DRILL-6939: Indicate when a query is submitted and is in progress

On query submission, a modal popup blocks further interaction until the result of the query are available.
Since the Query ID is not available at this point, the only way to cancel a running query is to navigate to it via the `/profiles` tab. For this, the modal allows a button to pop out to this tab without closing the current window which is waiting for the result-set.
[Update] Shared running query modal introduced
closes #1592

5 files changed, 79 insertions, 1 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 ab245c74c..e432e2080 100644
--- a/exec/java-exec/src/main/resources/rest/profile/profile.ftl
+++ b/exec/java-exec/src/main/resources/rest/profile/profile.ftl
@@ -179,6 +179,9 @@ table.sortable thead .sorting_desc { background-image: url("/static/img/black-de
             </button>
           </form>
       </p>
+
+<#include "*/runningQuery.ftl">
+
       <p>
       <form action="/profiles/cancel/${model.queryId}" method="GET">
         <div class="form-group">
diff --git a/exec/java-exec/src/main/resources/rest/query/query.ftl b/exec/java-exec/src/main/resources/rest/query/query.ftl
index 3477f94b3..38ed7c9c2 100644
--- a/exec/java-exec/src/main/resources/rest/query/query.ftl
+++ b/exec/java-exec/src/main/resources/rest/query/query.ftl
@@ -39,6 +39,8 @@
     Sample SQL query: <strong>SELECT * FROM cp.`employee.json` LIMIT 20</strong>
   </div>
 
+<#include "*/runningQuery.ftl">
+
   <#if model?? && model>
      <div class="form-group">
        <label for="userName">User Name</label>
diff --git a/exec/java-exec/src/main/resources/rest/runningQuery.ftl b/exec/java-exec/src/main/resources/rest/runningQuery.ftl
new file mode 100644
index 000000000..7978cf595
--- /dev/null
+++ b/exec/java-exec/src/main/resources/rest/runningQuery.ftl
@@ -0,0 +1,44 @@
+<#--
+
+    Licensed to the Apache Software Foundation (ASF) under one
+    or more contributor license agreements.  See the NOTICE file
+    distributed with this work for additional information
+    regarding copyright ownership.  The ASF licenses this file
+    to you under the Apache License, Version 2.0 (the
+    "License"); you may not use this file except in compliance
+    with the License.  You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+
+-->
+  <!-- Loading Modal -->
+  <div class="modal fade" id="queryLoadingModal" role="dialog"  data-backdrop="static" data-keyboard="false">
+    <div class="modal-dialog">
+      <!-- Modal content-->
+      <div class="modal-content">
+        <div class="modal-header">
+          <h4 class="modal-title" id="cancelTitle">Query Submitted</h4>
+        </div>
+        <div class="modal-body" style="line-height:3">
+            <table border="0px" width="100%"><tr>
+                <td align="center" style="font-size:125%">Waiting for results... (This may take some time) <br>Please don't close this window</td>
+                <td align="right"><img src="/static/img/loader.gif"></td>
+            </tr></table>
+        </div>
+        <div class="modal-footer">
+        <table border="0px" width="100%"><tr>
+        <td align="left" id="stopWatch">Elapsed Time: 00:00</td><td align="right">
+          <button type="button" class="btn btn-default" title="Check profiles in new tab" onclick="window.open(&#39;/profiles&#39;)">Check Status <span class="glyphicon glyphicon-new-window"></span></button>
+          </td>
+          </tr>
+          </table>
+        </div>
+      </div>
+    </div>
+  </div>
\ No newline at end of file
diff --git a/exec/java-exec/src/main/resources/rest/static/img/loader.gif b/exec/java-exec/src/main/resources/rest/static/img/loader.gif
new file mode 100644
index 000000000..0b0294bc2
--- /dev/null
+++ b/exec/java-exec/src/main/resources/rest/static/img/loader.gif
diff --git a/exec/java-exec/src/main/resources/rest/static/js/querySubmission.js b/exec/java-exec/src/main/resources/rest/static/js/querySubmission.js
index d2785172f..e62cc8f33 100644
--- a/exec/java-exec/src/main/resources/rest/static/js/querySubmission.js
+++ b/exec/java-exec/src/main/resources/rest/static/js/querySubmission.js
@@ -11,10 +11,36 @@
  *  language governing permissions and limitations under the License.
  */
 var userName = null;
+//Elements for Timer in LoadingModal
+var elapsedTime = 0;
+var delay = 1000; //msec
+var timeTracker = null; //Handle for stopping watch
+
+//Show cancellation status
+function popupAndWait() {
+  elapsedTime=0; //Init
+  $("#queryLoadingModal").modal("show");
+  var stopWatchElem = $('#stopWatch'); //Get handle on time progress elem within Modal
+  //Timer updating
+  timeTracker = setInterval(function() {
+    elapsedTime = elapsedTime + delay/1000;
+    let time = elapsedTime;
+    let minutes = Math.floor(time / 60);
+    let seconds = time - minutes * 60;
+    let prettyTime = ("0" + minutes).slice(-2)+':'+ ("0" + seconds).slice(-2);
+    stopWatchElem.text('Elapsed Time : ' + prettyTime);
+  }, delay);
+}
+
+//Close the cancellation status popup
+function closePopup() {
+  clearInterval(timeTracker);
+  $("#queryLoadingModal").modal("hide");
+}
 
 //Submit query with username
 function doSubmitQueryWithUserName() {
-    userName = document.getElementById("userName").value;
+    var userName = document.getElementById("userName").value;
     if (!userName.trim()) {
         alert("Please fill in User Name field");
         return;
@@ -24,6 +50,7 @@ function doSubmitQueryWithUserName() {
 
 //Submit Query (used if impersonation is not enabled)
 function submitQuery() {
+    popupAndWait();
     //Submit query
     $.ajax({
         type: "POST",
@@ -35,11 +62,13 @@ function submitQuery() {
         url: "/query",
         data: $("#queryForm").serializeArray(),
         success: function (response) {
+            closePopup();
             var newDoc = document.open("text/html", "replace");
             newDoc.write(response);
             newDoc.close();
         },
         error: function (request, textStatus, errorThrown) {
+            closePopup();
             alert(errorThrown);
         }
     });