Răsfoiți Sursa

HUE-5256 [editor] Clicking on the Stop button of a snippet doesn’t give any feedback

Enrico Berti 9 ani în urmă
părinte
comite
b7bb45a

+ 6 - 0
desktop/libs/notebook/src/notebook/static/notebook/js/notebook.ko.js

@@ -1185,7 +1185,10 @@ var EditorViewModel = (function() {
       });
     };
 
+    self.isCanceling = ko.observable(false);
+
     self.cancel = function () {
+      self.isCanceling(true);
       if (self.checkStatusTimeout != null) {
         clearTimeout(self.checkStatusTimeout);
         self.checkStatusTimeout = null;
@@ -1199,6 +1202,7 @@ var EditorViewModel = (function() {
         }
         self.statusForButtons('canceled');
         self.status('failed');
+        self.isCanceling(false);
       } else {
         self.statusForButtons('canceling');
         $.post("/notebook/api/cancel_statement", {
@@ -1215,6 +1219,8 @@ var EditorViewModel = (function() {
           $(document).trigger("error", xhr.responseText);
           self.statusForButtons('canceled');
           self.status('failed');
+        }).always(function (){
+          self.isCanceling(false);
         });
       }
     };

+ 7 - 1
desktop/libs/notebook/src/notebook/templates/editor_components.mako

@@ -2006,10 +2006,16 @@ ${ hueIcons.symbols() }
     <div class="label label-info" data-bind="attr: {'title':'${ _ko('Showing results of the statement #')}' + (result.statement_id() + 1)}, visible: $root.editorMode() && result.statements_count() > 1">
       <div class="pull-left" data-bind="text: (result.statement_id() + 1)"></div><div class="pull-left">/</div><div class="pull-left" data-bind="text: result.statements_count()"></div>
     </div>
+    <!-- ko if: !isCanceling() -->
     <a class="snippet-side-btn red" data-bind="click: cancel, visible: status() == 'running'" title="${ _('Cancel operation') }">
       <i class="fa fa-fw fa-stop snippet-side-single"></i>
     </a>
-
+    <!-- /ko -->
+    <!-- ko if: isCanceling() -->
+    <a class="snippet-side-btn" style="cursor: default;" title="${ _('Canceling operation...') }">
+      <i class="fa fa-fw fa-spinner snippet-side-single fa-spin"></i>
+    </a>
+    <!-- /ko -->
     <div class="inactive-action dropdown hover-actions pointer" data-bind="css: {'disabled': statement() === '' || status() === 'running' || status() === 'loading' }">
       <!-- ko if: isBatchable() && wasBatchExecuted() -->
       <a class="snippet-side-btn" style="padding-right:0; padding-left: 2px" href="javascript: void(0)" title="${ _('Submit all the queries as a background batch job.') }" data-bind="click: function() { wasBatchExecuted(true); execute(); }, visible: status() != 'running' && status() != 'loading', css: {'blue': $parent.history().length == 0 || $root.editorMode(), 'disabled': statement() === '' }">