Explorar o código

HUE-3385 [editor] Add feedback on cancel button

Enrico Berti %!s(int64=9) %!d(string=hai) anos
pai
achega
01099116ac

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

@@ -277,6 +277,7 @@
     self.aceSize = ko.observable(typeof snippet.aceSize != "undefined" && snippet.aceSize != null ? snippet.aceSize : 100);
     // self.statement_raw.extend({ rateLimit: 150 }); // Should prevent lag from typing but currently send the old query when using the key shortcut
     self.status = ko.observable(typeof snippet.status != "undefined" && snippet.status != null ? snippet.status : 'loading');
+    self.statusForButtons = ko.observable(typeof snippet.statusForButtons != "undefined" && snippet.statusForButtons != null ? snippet.statusForButtons : '');
 
     self.properties = ko.observable(ko.mapping.fromJS(typeof snippet.properties != "undefined" && snippet.properties != null ? snippet.properties : getDefaultSnippetProperties(self.type())));
     self.hasProperties = ko.computed(function() {
@@ -525,6 +526,7 @@
       logGA('execute/' + self.type());
 
       self.status('running');
+      self.statusForButtons('executing');
       self.errors([]);
       self.result.logLines = 0;
       self.progress(0);
@@ -539,6 +541,7 @@
         notebook: ko.mapping.toJSON(notebook.getContext()),
         snippet: ko.mapping.toJSON(self.getContext())
       }, function (data) {
+        self.statusForButtons('executed');
         if (data.status == 0) {
           self.result.clear();
           self.result.handle(data.handle);
@@ -746,11 +749,13 @@
         self.checkStatusTimeout = null;
       }
       logGA('cancel');
+      self.statusForButtons('canceling');
 
       $.post("/notebook/api/cancel_statement", {
         notebook: ko.mapping.toJSON(notebook.getContext()),
         snippet: ko.mapping.toJSON(self.getContext())
       }, function (data) {
+        self.statusForButtons('canceled');
         if (data.status == 0) {
           self.status('canceled');
         } else {

+ 4 - 4
desktop/libs/notebook/src/notebook/templates/editor_components.mako

@@ -976,17 +976,17 @@ ${ require.config() }
     <a class="snippet-side-btn" style="cursor: default;" data-bind="visible: status() == 'loading'" title="${ _('Creating session') }">
       <i class="fa fa-fw fa-spinner fa-spin"></i>
     </a>
-    <a class="snippet-side-btn blue" data-bind="click: cancel, visible: status() == 'running'" title="${ _('Stop the currently running statement') }">
-      <i class="fa fa-fw fa-stop"></i>
-    </a>
     <a class="snippet-side-btn" data-bind="click: reexecute, visible: $root.editorMode && result.handle() && result.handle().has_more_statements, css: {'blue': $parent.history().length == 0 || $root.editorMode, 'disabled': statement() === '' }" title="${ _('Restart from the first statement') }">
       <i class="fa fa-fw fa-repeat"></i>
     </a>
     <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 && status() != 'running' && status() != 'loading'">
       <span data-bind="text: result.statement_id() + 1"></span>/<span data-bind="text: result.statements_count()"></span>
     </div>
+    <a class="snippet-side-btn blue" data-bind="click: cancel, visible: status() == 'running'" title="${ _('Stop the currently running statement') }">
+      <i class="fa fa-fw fa-stop" data-bind="css: {'fa-spin': statusForButtons() == 'canceling'}"></i>
+    </a>
     <a class="snippet-side-btn" data-bind="attr: {'title': $root.editorMode && result.statements_count() > 1 ? '${ _ko('Execute next statement')}' : '${ _ko('Execute or CTRL + ENTER') }'}, click: execute, visible: status() != 'running' && status() != 'loading', css: {'blue': $parent.history().length == 0 || $root.editorMode, 'disabled': statement() === '' }">
-      <i class="fa fa-fw fa-play"></i>
+      <i class="fa fa-fw fa-play" data-bind="css: {'fa-spin': statusForButtons() == 'executing'}"></i>
     </a>
     <div class="dropdown">
       <a class="snippet-side-btn" style="padding-right:0" href="javascript: void(0)" data-bind="click: explain, css: {'disabled': statement() === '' || status() === 'running' || status() === 'loading' }" title="${ _('Explain the current SQL query') }">