Browse Source

HUE-7895 [editor] Give the user a feedback of editor loading when opening an assist document

Enrico Berti 7 years ago
parent
commit
61c802178b

File diff suppressed because it is too large
+ 0 - 0
desktop/core/src/desktop/static/desktop/css/hue-embedded.css


File diff suppressed because it is too large
+ 0 - 0
desktop/core/src/desktop/static/desktop/css/hue.css


File diff suppressed because it is too large
+ 0 - 0
desktop/core/src/desktop/static/desktop/css/hue3-extra.css


+ 5 - 1
desktop/core/src/desktop/static/desktop/js/ko.hue-bindings.js

@@ -614,7 +614,8 @@
         size: 'default',
         center: false,
         overlay: false,
-        inline: false
+        inline: false,
+        blackout: false
       };
 
       var spin = false;
@@ -630,6 +631,9 @@
       if (spin) {
         var $container = $('<div>');
         $container.addClass(options.overlay ? 'hue-spinner-overlay' : ( options.inline ? 'hue-spinner-inline' : 'hue-spinner'));
+        if (options.blackout) {
+          $container.addClass('hue-spinner-blackout');
+        }
         if (!options.overlay) {
           var $spinner = $('<i>');
           $spinner.addClass('fa fa-spinner fa-spin');

+ 5 - 0
desktop/core/src/desktop/static/desktop/less/components/hue-spinner.less

@@ -42,6 +42,11 @@
   .hue-fade-in();
 }
 
+.hue-spinner-blackout {
+  z-index: 10000;
+  background-color: @cui-white;
+}
+
 .hue-spinner-center {
   position: absolute;
   left: 50%;

+ 9 - 3
desktop/core/src/desktop/templates/hue.mako

@@ -393,7 +393,7 @@ ${ hueIcons.symbols() }
 
 
     <div class="page-content">
-      <!-- ko hueSpinner: { spin: isLoadingEmbeddable, center: true, size: 'xlarge' } --><!-- /ko -->
+      <!-- ko hueSpinner: { spin: isLoadingEmbeddable, center: true, size: 'xlarge', blackout: true } --><!-- /ko -->
       <div id="embeddable_editor" class="embeddable"></div>
       <div id="embeddable_notebook" class="embeddable"></div>
       <div id="embeddable_metastore" class="embeddable"></div>
@@ -1133,7 +1133,10 @@ ${ smart_unicode(login_modal(request).content) | n,unicode }
                 self.loadApp('editor');
                 if (getUrlParameter('editor') !== '') {
                   self.getActiveAppViewModel(function (viewModel) {
-                    viewModel.openNotebook(getUrlParameter('editor'));
+                    self.isLoadingEmbeddable(true);
+                    viewModel.openNotebook(getUrlParameter('editor')).always(function () {
+                      self.isLoadingEmbeddable(false);
+                    });
                   });
                 } else if (getUrlParameter('type') !== '') {
                   self.changeEditorType(getUrlParameter('type'));
@@ -1191,7 +1194,10 @@ ${ smart_unicode(login_modal(request).content) | n,unicode }
             var notebookId = hueUtils.getSearchParameter('?' + ctx.querystring, 'notebook');
             if (notebookId !== '') {
               self.getActiveAppViewModel(function (viewModel) {
-                viewModel.openNotebook(notebookId);
+                self.isLoadingEmbeddable(true);
+                viewModel.openNotebook(notebookId).always(function () {
+                  self.isLoadingEmbeddable(false);
+                });
               });
             } else {
               self.getActiveAppViewModel(function (viewModel) {

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

@@ -3170,6 +3170,7 @@ var EditorViewModel = (function() {
     };
 
     self.openNotebook = function (uuid, queryTab, skipUrlChange, callback) {
+      var deferredOpen = new $.Deferred();
       $.get('/desktop/api2/doc/', {
         uuid: uuid,
         data: true,
@@ -3200,12 +3201,15 @@ var EditorViewModel = (function() {
           if (typeof callback !== 'undefined'){
             callback();
           }
+          deferredOpen.resolve();
         }
         else {
           $(document).trigger("error", data.message);
+          deferredOpen.reject();
           self.newNotebook();
         }
       });
+      return deferredOpen.promise();
     };
 
     self.newNotebook = function (editorType, callback, queryTab) {

Some files were not shown because too many files changed in this diff