Преглед изворни кода

HUE-4242 [editor] Add a message when query submission takes time

Enrico Berti пре 9 година
родитељ
комит
ea91f826e4

+ 4 - 0
desktop/libs/notebook/src/notebook/static/notebook/css/notebook.css

@@ -1181,3 +1181,7 @@ pre {
 #schedulerEditor .workflow-parameter:hover {
   background-color: #FAFAFA;
 }
+
+.warning {
+  color: #fdae6b;
+}

+ 20 - 1
desktop/libs/notebook/src/notebook/static/notebook/js/notebook.ko.js

@@ -666,6 +666,21 @@
 
     self.lastExecuted = ko.observable(typeof snippet.lastExecuted != "undefined" && snippet.lastExecuted != null ? snippet.lastExecuted : 0);
 
+    self.showLongOperationWarning = ko.observable(false);
+
+    var longOperationTimeout = -1;
+
+    function startLongOperationTimeout() {
+      longOperationTimeout = window.setTimeout(function () {
+        self.showLongOperationWarning(true);
+      }, 2000);
+    }
+
+    function stopLongOperationTimeout() {
+      window.clearTimeout(longOperationTimeout);
+      self.showLongOperationWarning(false);
+    }
+
     self.execute = function () {
       var now = (new Date()).getTime(); // We don't allow fast clicks
       if (self.status() == 'running' || self.status() == 'loading' || now - self.lastExecuted() < 1000 || self.statement() == '') {
@@ -710,6 +725,8 @@
         }
       });
 
+      startLongOperationTimeout();
+
       self.currentQueryTab('queryHistory');
 
       $.post("/notebook/api/execute", {
@@ -717,7 +734,7 @@
         snippet: ko.mapping.toJSON(self.getContext())
       }, function (data) {
         self.statusForButtons('executed');
-
+        stopLongOperationTimeout();
         if (vm.editorMode() && data.history_id) {
           var url = '/notebook/editor?editor=' + data.history_id;
           hueUtils.changeURL(url);
@@ -870,6 +887,7 @@
     self.isFetchingData = false;
     self.fetchResultData = function (rows, startOver) {
       if (! self.isFetchingData) {
+        startLongOperationTimeout();
         self.isFetchingData = true;
         logGA('fetchResult/' + rows + '/' + startOver);
         $.post("/notebook/api/fetch_result_data", {
@@ -878,6 +896,7 @@
           rows: rows,
           startOver: startOver
         }, function (data) {
+          stopLongOperationTimeout();
           data = JSON.bigdataParse(data);
           if (data.status == 0) {
             self.loadData(data.result, rows);

+ 8 - 0
desktop/libs/notebook/src/notebook/templates/editor_components.mako

@@ -1297,9 +1297,16 @@ ${ hueIcons.symbols() }
   </div>
 </script>
 
+<script type="text/html" id="longer-operation">
+  <div rel="tooltip" data-placement="bottom" data-bind="tooltip, fadeVisible: showLongOperationWarning" title="${ _('The operation in the server is taking longer than expected') }" class="inline-block">
+    <i  class="fa fa-exclamation-triangle warning"></i>
+  </div>
+</script>
+
 <script type="text/html" id="notebook-snippet-header">
   <div class="inactive-action hover-actions inline"><span class="inactive-action" data-bind="css: { 'empty-title': name() === '' }, editable: name, editableOptions: { emptytext: '${_ko('My Snippet')}', mode: 'inline', enabled: true, placement: 'right' }" style="border:none;color: #DDD"></span></div>
   <div class="hover-actions inline pull-right" style="font-size: 15px;">
+    <!-- ko template: { name: 'longer-operation' } --><!-- /ko -->
     <a class="inactive-action" href="javascript:void(0)" data-bind="visible: status() != 'ready' && status() != 'loading' && errors().length == 0, click: function() { hideFixedHeaders(); $data.showLogs(!$data.showLogs());}, css: {'blue': $data.showLogs}" title="${ _('Show Logs') }"><i class="fa fa-file-text-o"></i></a>
     <span class="execution-timer" data-bind="visible: type() != 'text' && status() != 'ready' && status() != 'loading', text: result.executionTime().toHHMMSS()" title="${ _('Execution time') }"></span>
     <a class="inactive-action move-widget" href="javascript:void(0)"><i class="fa fa-arrows"></i></a>
@@ -1310,6 +1317,7 @@ ${ hueIcons.symbols() }
 
 <script type="text/html" id="editor-snippet-header">
   <div class="hover-actions inline pull-right" style="font-size: 15px; position: relative;">
+    <!-- ko template: { name: 'longer-operation' } --><!-- /ko -->
     <span class="execution-timer" data-bind="visible: type() != 'text' && status() != 'ready' && status() != 'loading', text: result.executionTime().toHHMMSS()" title="${ _('Execution time') }"></span>
     <!-- ko if: availableDatabases().length > 0 && isSqlDialect() -->
     <div data-bind="component: { name: 'snippet-db-selection', params: { selectedDatabase: database, availableDatabases: availableDatabases } }" style="display: inline-block"></div>