This is an automated email from the ASF dual-hosted git repository. hmaduri pushed a commit to branch master in repository https://gitbox.apache.org/repos/asf/drill.git
commit 5c90032503dbdaa75e71a4a22dd150218960145a Author: Kunal Khatua <[email protected]> AuthorDate: Thu Jan 3 10:27:57 2019 -0800 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 --- .../src/main/resources/rest/profile/profile.ftl | 3 ++ .../src/main/resources/rest/query/query.ftl | 2 + .../src/main/resources/rest/runningQuery.ftl | 44 +++++++++++++++++++++ .../src/main/resources/rest/static/img/loader.gif | Bin 0 -> 26758 bytes .../resources/rest/static/js/querySubmission.js | 31 ++++++++++++++- 5 files changed, 79 insertions(+), 1 deletion(-) 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 ab245c7..e432e20 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 3477f94..38ed7c9 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 0000000..7978cf5 --- /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('/profiles')">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 0000000..0b0294b Binary files /dev/null and b/exec/java-exec/src/main/resources/rest/static/img/loader.gif differ 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 d278517..e62cc8f 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); } });
