Browse Source

[impala] Added spinner to text facet

Enrico Berti 11 năm trước cách đây
mục cha
commit
f3ee428

+ 11 - 5
apps/impala/src/impala/templates/dashboard.mako

@@ -209,6 +209,10 @@ ${ dashboard.layout_skeleton() }
 
 
 <script type="text/html" id="facet-widget">
+  <div class="widget-spinner" data-bind="visible: isLoading()">
+    <!--[if !IE]> --><i class="fa fa-spinner fa-spin"></i><!-- <![endif]-->
+    <!--[if IE]><img src="/static/art/spinner.gif" /><![endif]-->
+  </div>
   <!-- ko if: $root.getFacetFromResult(id()) -->
   <div class="row-fluid" data-bind="with: $root.getFacetFromResult(id())">
     <div data-bind="visible: $root.isEditing, with: $root.dashboard.getFacetById($parent.id())">
@@ -216,7 +220,7 @@ ${ dashboard.layout_skeleton() }
       <input type="text" data-bind="value: properties.limit" />
     </div>
   
-    <span data-bind="foreach: data()">
+    <span data-bind="foreach: {data: data(), afterRender: function(){ $root.getWidgetById($parent.id()).isLoading(false); }} ">
       <div>
         <a href="javascript: void(0)">
           <span data-bind="text: $data, click: function(){ $root.query.toggleFacet({facet: $data, widget: $parent}) }"></span>
@@ -227,7 +231,7 @@ ${ dashboard.layout_skeleton() }
   </div>
   <!-- /ko -->
   
-  <span data-bind="template: { name: 'select-field' }"></span>
+  <span data-bind="template: { name: 'select-field' }, visible: ! isLoading()"></span>
 </script>
 
 
@@ -336,9 +340,11 @@ ${ dashboard.import_charts() }
   $(document).ready(function(){
     window.setTimeout(function(){
       viewModel.init(function(){
-        getDatabases(function(){
-          getTables();
-        });
+        if (! viewModel.inited()){
+          getDatabases(function(){
+            getTables();
+          });
+        }
       });
     }, 50);
   });

+ 10 - 5
apps/impala/src/impala/views.py

@@ -127,11 +127,16 @@ def new_search(request):
 
   return render('dashboard.mako', request, {
     'query_json': json.dumps({}),
-    'dashboard_json': json.dumps({
-      'layout': [],
-      'facets': [],
-      'properties': []
-      })
+    'dashboard_json': json.dumps({'layout': [
+              {"size":2,"rows":[],"drops":["temp"],"klass":"card card-home card-column span2"},
+              {"size":10,"rows":[{"widgets":[
+                  {"size":12,"name":"Grid Results","id":"52f07188-f30f-1296-2450-f77e02e1a5c0","widgetType":"resultset-widget",
+                   "properties":{},"offset":0,"isLoading":True,"klass":"card card-widget span12"}]}],
+              "drops":["temp"],"klass":"card card-home card-column span10"}
+         ],
+        'facets': [],
+        'properties': [{'database': 'default', 'table': 'sample_07'}]
+        }),
   })
 
 

+ 16 - 2
apps/impala/static/js/impala-dashboard.ko.js

@@ -197,7 +197,7 @@ var ImpalaDashboardViewModel = function (query_json, dashboard_json) {
     self.results_facet = ko.observableArray([]);
     self.results_cols = ko.observableArray([]);
 
-    self.inited = ko.observable(self.dashboard.facets().length > 0);
+    self.inited = ko.observable(self.columns().length > 0);
 
     self.init = function(callback) {
       if (self.inited()){
@@ -269,7 +269,21 @@ var ImpalaDashboardViewModel = function (query_json, dashboard_json) {
         }
       });
       return _facet;
-    }   
+    }
+
+    self.getWidgetById = function (widget_id) {
+      var _widget = null;
+      $.each(self.columns(), function (i, col) {
+        $.each(col.rows(), function (j, row) {
+          $.each(row.widgets(), function (z, widget) {
+            if (widget.id() == widget_id){
+              _widget = widget;
+            }
+          });
+        });
+      });
+      return _widget;
+    }
     
     function bareWidgetBuilder(name, type){
       return new Widget({