For #240.

apache · Mar 24, 2017 · db6ebea · db6ebea
1 parent 0244951
commit db6ebea
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 34 deletions.
diff --git a/...lastic-job-lite-console/src/main/resources/console/html/status/job/job_status_detail.html b/...lastic-job-lite-console/src/main/resources/console/html/status/job/job_status_detail.html
@@ -1,20 +1,23 @@
 <div class="index-content">
     <section class="content">
         <h4>作业名称：<span id="job-name"></span></h4>
-        <ul class="nav nav-tabs" role="tablist">
-            <li id="servers-tab" role="presentation" class="active"><a href="#servers" aria-controls="servers" role="tab" data-toggle="tab">作业服务器</a></li>
-            <li id="execution-info-tab" role="presentation"><a href="#execution-info" aria-controls="execution-info" role="tab" data-toggle="tab">作业运行状态</a></li>
-        </ul>
         <div class="tab-content">
-            <div role="tabpanel" class="tab-pane active" id="servers">
-                <table id="job-servers">
-                </table>
+            <table id="job-servers"/>
+        </div>
+    </section>
+</div>
+<div id="execution-info" class="modal" tabindex="-1" role="dialog">
+    <div class="modal-dialog" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <button type="button" id="close-execution-info-modal" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+                <h4 class="modal-title">作业运行状态</h4>
             </div>
-            <div role="tabpanel" class="tab-pane" id="execution-info">
-                <table id="execution"></table>
+            <div class="modal-body">
+                <table id="execution"/>
             </div>
         </div>
-    </section>
+    </div>
 </div>
 <script src="lib/bootstrap-table/bootstrap-table.min.js"></script>
 <script src="lib/bootstrap-table/bootstrap-table-zh-CN.js"></script>

diff --git a/elastic-job-lite/elastic-job-lite-console/src/main/resources/console/index.html b/elastic-job-lite/elastic-job-lite-console/src/main/resources/console/index.html
@@ -57,7 +57,7 @@
                     </ul>
                 </li>
                 <li class="treeview" id="job">
-                    <a href="#" id="job-config">
+                    <a href="#" id="job-config" class="sub-menu">
                         <i class="fa fa-tags">&nbsp;&nbsp;作业配置</i>
                         <span id="job-nav-tag" class="label label-primary pull-right"></span>
                     </a>
@@ -81,7 +81,7 @@
                     </ul>
                 </li>
                 <li class="treeview">
-                    <a href="#" id="help">
+                    <a href="#" id="help" class="sub-menu">
                         <i class="fa fa-book">&nbsp;&nbsp;帮助</i>
                     </a>
                 </li> 

diff --git a/...te/elastic-job-lite-console/src/main/resources/console/js/status/job/job_status_detail.js b/...te/elastic-job-lite-console/src/main/resources/console/js/status/job/job_status_detail.js
@@ -1,12 +1,6 @@
 $(function() {
     $("#job-name").text(getCurrentUrl("job-name"));
     renderServers();
-    $('[href="#servers"]').click(function() {
-        renderServers();
-    });
-    $('[href="#execution-info"]').click(function() {
-        renderExecution();
-    });
     bindButtons();
 });
 
@@ -61,14 +55,15 @@ function statusFormatter(value, row) {
 }
 
 function generateOperationButtons(val, row) {
-    var triggerButton = "<button operation='trigger' class='btn-xs btn-success' ip='" + row.ip + "' instanceId='" + row.instanceId + "'>触发</button>";
-    var resumeButton = "<button operation='resume' class='btn-xs btn-success' ip='" + row.ip + "' instanceId='" + row.instanceId + "'>恢复</button>";
-    var pauseButton = "<button operation='pause' class='btn-xs btn-warning' ip='" + row.ip + "' instanceId='" + row.instanceId + "'>暂停</button>";
-    var shutdownButton = "<button operation='shutdown' class='btn-xs btn-danger' ip='" + row.ip + "' instanceId='" + row.instanceId + "'>关闭</button>";
-    var removeButton = "<button operation='remove' class='btn-xs btn-danger' ip='" + row.ip + "' instanceId='" + row.instanceId + "'>删除</button>";
-    var disableButton = "<button operation='disable' class='btn-xs btn-warning' ip='" + row.ip + "' instanceId='" + row.instanceId + "'>失效</button>";
-    var enableButton = "<button operation='enable' class='btn-xs btn-success' ip='" + row.ip + "' instanceId='" + row.instanceId + "'>生效</button>";
-    var operationTd = triggerButton + "&nbsp;";
+    var triggerButton = "<button operation='trigger' class='btn-xs btn-success' ip='" + row.ip + "' instance-id='" + row.instanceId + "'>触发</button>";
+    var executionButton = "<button operation='execution' class='btn-xs btn-info' ip='" + row.ip + "' instance-id='" + row.instanceId + "'>详情</button>";
+    var resumeButton = "<button operation='resume' class='btn-xs btn-success' ip='" + row.ip + "' instance-id='" + row.instanceId + "'>恢复</button>";
+    var pauseButton = "<button operation='pause' class='btn-xs btn-warning' ip='" + row.ip + "' instance-id='" + row.instanceId + "'>暂停</button>";
+    var shutdownButton = "<button operation='shutdown' class='btn-xs btn-danger' ip='" + row.ip + "' instance-id='" + row.instanceId + "'>关闭</button>";
+    var removeButton = "<button operation='remove' class='btn-xs btn-danger' ip='" + row.ip + "' instance-id='" + row.instanceId + "'>删除</button>";
+    var disableButton = "<button operation='disable' class='btn-xs btn-warning' ip='" + row.ip + "' instance-id='" + row.instanceId + "'>失效</button>";
+    var enableButton = "<button operation='enable' class='btn-xs btn-success' ip='" + row.ip + "' instance-id='" + row.instanceId + "'>生效</button>";
+    var operationTd = triggerButton + "&nbsp;" + executionButton + "&nbsp;";
     if ("PAUSED" === row.status) {
         operationTd = operationTd + resumeButton + "&nbsp;";
     } else if ("DISABLED" !== row.status && "CRASHED" !== row.status && "SHUTDOWN" !== row.status) {
@@ -89,6 +84,7 @@ function generateOperationButtons(val, row) {
 }
 
 function bindButtons() {
+    bindExecutionButton();
     bindTriggerButton();
     bindPauseButton();
     bindResumeButton();
@@ -98,13 +94,21 @@ function bindButtons() {
     bindEnableButton();
 }
 
+function bindExecutionButton() {
+    $(document).on("click", "button[operation='execution'][data-toggle!='modal']", function(event) {
+        $('#execution-info').modal({backdrop : 'static', keyboard : true});
+        renderExecution();
+    });
+}
+
+
 function bindTriggerButton() {
     $(document).on("click", "button[operation='trigger'][data-toggle!='modal']", function(event) {
         var jobName = $("#job-name").text();
         $.ajax({
             url: "/api/jobs/trigger",
             type: "POST",
-            data: JSON.stringify({jobName : jobName, ip : $(event.currentTarget).attr("ip"), instanceId : $(event.currentTarget).attr("instanceId")}),
+            data: JSON.stringify({jobName : jobName, ip : $(event.currentTarget).attr("ip"), instanceId : $(event.currentTarget).attr("instance-id")}),
             contentType: "application/json",
             dataType: "json",
             success: function() {
@@ -121,7 +125,7 @@ function bindPauseButton() {
         $.ajax({
             url: "/api/jobs/pause",
             type: "POST",
-            data: JSON.stringify({jobName : jobName, ip : $(event.currentTarget).attr("ip"), instanceId : $(event.currentTarget).attr("instanceId")}),
+            data: JSON.stringify({jobName : jobName, ip : $(event.currentTarget).attr("ip"), instanceId : $(event.currentTarget).attr("instance-id")}),
             contentType: "application/json",
             dataType: "json",
             success: function() {
@@ -138,7 +142,7 @@ function bindResumeButton() {
         $.ajax({
             url: "/api/jobs/resume",
             type: "POST",
-            data: JSON.stringify({jobName : jobName, ip : $(event.currentTarget).attr("ip"), instanceId : $(event.currentTarget).attr("instanceId")}),
+            data: JSON.stringify({jobName : jobName, ip : $(event.currentTarget).attr("ip"), instanceId : $(event.currentTarget).attr("instance-id")}),
             contentType: "application/json",
             dataType: "json",
             success: function() {
@@ -155,7 +159,7 @@ function bindShutdownButton() {
         $.ajax({
             url: "/api/jobs/shutdown",
             type: "POST",
-            data: JSON.stringify({jobName : jobName, ip : $(event.currentTarget).attr("ip"), instanceId : $(event.currentTarget).attr("instanceId")}),
+            data: JSON.stringify({jobName : jobName, ip : $(event.currentTarget).attr("ip"), instanceId : $(event.currentTarget).attr("instance-id")}),
             contentType: "application/json",
             dataType: "json",
             success: function() {
@@ -172,7 +176,7 @@ function bindRemoveButton() {
         $.ajax({
             url: "/api/jobs/remove",
             type: "POST",
-            data: JSON.stringify({jobName : jobName, ip : $(event.currentTarget).attr("ip"), instanceId : $(event.currentTarget).attr("instanceId")}),
+            data: JSON.stringify({jobName : jobName, ip : $(event.currentTarget).attr("ip"), instanceId : $(event.currentTarget).attr("instance-id")}),
             contentType: "application/json",
             dataType: "json",
             success: function(data) {
@@ -193,7 +197,7 @@ function bindDisableButton() {
         $.ajax({
             url: "/api/jobs/disable",
             type: "POST",
-            data: JSON.stringify({jobName : jobName, ip : $(event.currentTarget).attr("ip"), instanceId : $(event.currentTarget).attr("instanceId")}),
+            data: JSON.stringify({jobName : jobName, ip : $(event.currentTarget).attr("ip"), instanceId : $(event.currentTarget).attr("instance-id")}),
             contentType: "application/json",
             dataType: "json",
             success: function() {
@@ -210,7 +214,7 @@ function bindEnableButton() {
         $.ajax({
             url: "/api/jobs/enable",
             type: "POST",
-            data: JSON.stringify({jobName : jobName, ip : $(event.currentTarget).attr("ip"), instanceId : $(event.currentTarget).attr("instanceId")}),
+            data: JSON.stringify({jobName : jobName, ip : $(event.currentTarget).attr("ip"), instanceId : $(event.currentTarget).attr("instance-id")}),
             contentType: "application/json",
             dataType: "json",
             success: function() {
@@ -253,4 +257,4 @@ function executionStatusFormatter(value, row) {
             return "<span class='label label-warning'>待运行</span>";
             break;
     }
-}
+}