[drill] branch master updated: DRILL-5571: Cancel running query from its Web UI

[ku...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

kunal pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/drill.git


The following commit(s) were added to refs/heads/master by this push:
     new c3080fe  DRILL-5571: Cancel running query from its Web UI
c3080fe is described below

commit c3080fedf9dcfe3d2c12a7942d3f82713be695f2
Author: Kunal Khatua <kk...@users.noreply.github.com>
AuthorDate: Tue Nov 13 12:09:42 2018 -0800

    DRILL-5571: Cancel running query from its Web UI
    
    Currently, a running query can be cancelled by navigating to the Edit Query Tab of the profile page, making it difficult to access. This commit allows the user to cancel.
    In addition, the Duration segment is also made visible by default rather than collapsed.
---
 .../src/main/resources/rest/profile/profile.ftl    | 44 +++++++++++++++++++++-
 1 file changed, 42 insertions(+), 2 deletions(-)

diff --git a/exec/java-exec/src/main/resources/rest/profile/profile.ftl b/exec/java-exec/src/main/resources/rest/profile/profile.ftl
index c14e1b2..cbef548 100644
--- a/exec/java-exec/src/main/resources/rest/profile/profile.ftl
+++ b/exec/java-exec/src/main/resources/rest/profile/profile.ftl
@@ -50,6 +50,22 @@
         "info": false
       }
     );} );
+
+    //Close the cancellation status popup
+    function refreshStatus() {
+      //Close PopUp Modal
+      $("#queryCancelModal").modal("hide");
+      location.reload(true);
+    }
+
+    //Cancel query & show cancellation status
+    function cancelQuery() {
+      document.getElementById("cancelTitle").innerHTML = "Drillbit on " + location.hostname + " says";
+      $.get("/profiles/cancel/"+globalconfig.queryid, function(data, status){/*Not Tracking Response*/});
+      //Show PopUp Modal
+      $("#queryCancelModal").modal("show");
+    };
+
 </script>
 <style>
 /* DataTables Sorting: inherited via sortable class */
@@ -63,6 +79,7 @@ table.sortable thead .sorting { background-image: url("/static/img/black-unsorte
 table.sortable thead .sorting_asc { background-image: url("/static/img/black-asc.gif"); }
 table.sortable thead .sorting_desc { background-image: url("/static/img/black-desc.gif"); }
 </style>
+
 </#macro>
 
 <#macro page_body>
@@ -171,7 +188,30 @@ table.sortable thead .sorting_desc { background-image: url("/static/img/black-de
   <#assign queued = queueName != "" && queueName != "-" />
 
   <div class="page-header"></div>
-  <h3>Query Profile : <span style='font-size:85%'>${model.getQueryId()}</span></h3>
+  <h3>Query Profile: <span style='font-size:85%'>${model.getQueryId()}</span>
+  <#if model.getQueryStateDisplayName() == "Prepared" || model.getQueryStateDisplayName() == "Planning" || model.getQueryStateDisplayName() == "Enqueued" || model.getQueryStateDisplayName() == "Starting">
+    <div  style="display: inline-block;">
+      <button type="button" id="cancelBtn" class="btn btn-warning btn-sm" onclick="cancelQuery()" > Cancel </button>
+    </div>
+
+  <!-- Cancellation Modal -->
+  <div class="modal fade" id="queryCancelModal" role="dialog">
+    <div class="modal-dialog">
+      <div class="modal-content">
+        <div class="modal-header">
+          <button type="button" class="close" data-dismiss="modal" onclick="refreshStatus()">&times;</button>
+          <h4 class="modal-title" id="cancelTitle"></h4>
+        </div>
+        <div class="modal-body" style="line-height:2">
+          Cancellation issued for Query ID:<br>${model.getQueryId()}
+        </div>
+        <div class="modal-footer"><button type="button" class="btn btn-default" onclick="refreshStatus()">Close</button></div>
+      </div>
+    </div>
+  </div>
+  </#if>
+  </h3>
+  
   <div class="panel-group" id="query-profile-accordion">
     <div class="panel panel-default">
       <div class="panel-heading">
@@ -214,7 +254,7 @@ table.sortable thead .sorting_desc { background-image: url("/static/img/black-de
     <div class="panel panel-default">
       <div class="panel-heading">
         <h4 class="panel-title">
-          <a data-toggle="collapse" href="#query-profile-duration">
+          <a data-toggle="collapse" href="#query-profile-duration in">
              Duration
           </a>
         </h4>