<div class="content-wrapper">
    <div class="page-height-min">
        <section class="content-header">
            <h1 data-lang="sidebar-job-trace"></h1>
            <ol class="breadcrumb">
                <li class="active"><i class="fa fa-history" data-lang="sidebar-job-history"></i></li>
                <li class="active" data-lang="sidebar-job-trace"></li>
            </ol>
        </section>
        <section class="content">
            <div id="job-exec-detail-toolbar-div">
                <div class="form-inline" role="form">
                    <div class="form-group toolbar">
                        <label for="job-name" data-lang="job-name"></label>
                        <input type="text" class="form-control" id="job-name" placeholder="">
                    </div>
                    <div class="form-group toolbar">
                        <label for="task-id" data-lang="task-id"></label>
                        <input type="text" class="form-control" size="55" id="task-id" placeholder="">
                    </div>
                    <br/>
                    <div class="form-group toolbar">
                        <label for="ip" data-lang="server-ip"></label>
                        <input type="text" class="form-control" data-inputmask="'alias': 'ip'" data-mask="" id="ip">
                    </div>
                    <div class="form-group toolbar">
                        <label for="start-time" data-lang="start-time"></label>
                        <input type="text" class="form-control pull-right custom-datepicker" id="start-time">
                    </div>
                    <div class="form-group toolbar">
                        <label for="end-time" data-lang="complete-time"></label>
                        <input type="text" class="form-control pull-right custom-datepicker" id="end-time">
                    </div><br>
                    <div id="execute-result">
                        <div class="form-group">
                            <label data-lang="execute-result"></label>:
                            <input type="radio" name="isSuccess" value="1"><label data-lang="execute-result-success"></label>
                            <input type="radio" name="isSuccess" value="0"><label data-lang="execute-result-failure"></label>
                            <input type="radio" name="isSuccess" value="" checked="checked"><label data-lang="execute-result-all"></label>
                        </div>
                    </div>
                </div>
            </div>
            <table id="job-exec-details-table" 
                data-show-refresh="true"
                data-show-toggle="true"
                data-striped="true"
                data-toggle="table"
                data-url="/api/job/events/executions"
                data-flat="true"
                data-click-to-select="true"
                data-row-style="rowStyle"
                data-query-params="queryParams"
                data-query-params-type="notLimit"
                data-side-pagination="server"
                data-pagination="true"
                data-page-list="[10, 20, 50, 100]"
                data-show-columns="true"
                data-toolbar="#job-exec-detail-toolbar-div">
                <thead>
                    <tr>
                        <th data-field="jobName" data-sortable="true"><span data-lang="job-name"></span></th>
                        <th data-field="taskId"><span data-lang="task-id"></span></th>
                        <th data-field="ip" data-sortable="true"><span data-lang="server-ip"></span></th>
                        <th data-field="shardingItem"><span data-lang="job-shrading-item"></span></th>
                        <th data-field="source" data-sortable="true"><span data-lang="execute-source"></span></th>
                        <th data-field="success" data-sortable="true" data-formatter="successFormatter"><span data-lang="execute-result"></span></th>
                        <th data-field="failureCause.plainText" data-formatter="splitFormatter"><span data-lang="failure-reason"></span></th>
                        <th data-field="startTime" data-sortable="true" data-formatter="dateTimeFormatter"><span data-lang="start-time"></span></th>
                        <th data-field="completeTime" data-sortable="true" data-formatter="dateTimeFormatter"><span data-lang="complete-time"></span></th>
                    </tr>
                </thead>
            </table>
        </section>
    </div>
</div>
<script src="lib/bootstrap-table/bootstrap-table.min.js"></script>
<script src="lib/daterangepicker/moment.min.js"></script>
<script src="lib/daterangepicker/daterangepicker.js"></script>
<script src="lib/input-mask/jquery.inputmask.js"></script>
<script src="lib/input-mask/jquery.inputmask.date.extensions.js"></script>
<script src="lib/input-mask/jquery.inputmask.extensions.js"></script>
<script src="js/history/history_common.js"></script>
<script src="js/history/job_exec_details.js"></script>