Эх сурвалжийг харах

[impala] Added spinner on result widget

Enrico Berti 11 жил өмнө
parent
commit
d741d4b

+ 44 - 26
apps/impala/src/impala/templates/dashboard.mako

@@ -117,29 +117,42 @@ ${ dashboard.layout_skeleton() }
 
 <script type="text/html" id="resultset-widget">
 
-<div id="result-main" style="overflow-x: auto">
-  <table id="result-container" style="margin-top: 0; width: 100%">
-    <thead>
-      <tr>
-        <th style="width: 18px">&nbsp;</th>
-        <!-- ko foreach: $root.results_cols -->
-          <th data-bind="text: $data"></th>       
-        <!-- /ko -->
-      </tr>
-    </thead>
-    <tbody data-bind="foreach: { data: $root.results, as: 'row'}" class="result-tbody">
-      <tr class="result-row">
-        <td>
-          <a href="javascript:void(0)">
-            <i class="fa" data-bind="css: {'fa-caret-right' : true }"></i>
-          </a>
-        </td>
-        <!-- ko foreach: row -->
-          <td data-bind="html: $data"></td>
-        <!-- /ko -->
-      </tr>
-    </tbody>
-  </table>
+
+<div class="widget-spinner" data-bind="visible: $root.isRetrievingResults()">
+  <!--[if !IE]> --><i class="fa fa-spinner fa-spin"></i><!-- <![endif]-->
+  <!--[if IE]><img src="/static/art/spinner.gif" /><![endif]-->
+</div>
+
+<div data-bind="visible: !$root.isRetrievingResults() && $root.results().length == 0">
+  </br>
+  ${ _('Your search did not match any documents.') }
+</div>
+
+<div data-bind="visible: !$root.isRetrievingResults() && $root.results().length > 0">
+  <div id="result-main" style="overflow-x: auto">
+    <table id="result-container" style="margin-top: 0; width: 100%">
+      <thead>
+        <tr>
+          <th style="width: 18px">&nbsp;</th>
+          <!-- ko foreach: $root.results_cols -->
+            <th data-bind="text: $data"></th>
+          <!-- /ko -->
+        </tr>
+      </thead>
+      <tbody data-bind="foreach: { data: $root.results, as: 'row'}" class="result-tbody">
+        <tr class="result-row">
+          <td>
+            <a href="javascript:void(0)">
+              <i class="fa" data-bind="css: {'fa-caret-right' : true }"></i>
+            </a>
+          </td>
+          <!-- ko foreach: row -->
+            <td data-bind="html: $data"></td>
+          <!-- /ko -->
+        </tr>
+      </tbody>
+    </table>
+  </div>
 </div>
 </script>
 
@@ -193,10 +206,15 @@ ${ dashboard.import_charts() }
     console.log("boom")
   }
 
-  var viewModel = new TestViewModel(${ query_json | n,unicode }, ${ dashboard_json | n,unicode  });
+  var viewModel = new ImpalaDashboardViewModel(${ query_json | n,unicode }, ${ dashboard_json | n,unicode  });
   ko.applyBindings(viewModel);
-  
-  viewModel.init();
+
+  $(document).ready(function(){
+    window.setTimeout(function(){
+      viewModel.init();
+    }, 50);
+  });
+
 </script>
 
 ${ commonfooter(messages) | n,unicode }

+ 4 - 1
apps/impala/static/js/impala-dashboard.ko.js

@@ -116,13 +116,14 @@ var Dashboard = function (vm, dashboard) {
   }   
 }
 
-var TestViewModel = function (query_json, dashboard_json) {
+var ImpalaDashboardViewModel = function (query_json, dashboard_json) {
     var self = this;
 
     self.isEditing = ko.observable(true);
     self.toggleEditing = function () {
       self.isEditing(! self.isEditing());
     };
+    self.isRetrievingResults = ko.observable(false);
     self.previewColumns = ko.observable("");
     self.columns = ko.observable([]);
 
@@ -140,6 +141,7 @@ var TestViewModel = function (query_json, dashboard_json) {
     }
     
     self.search = function (callback) {
+      self.isRetrievingResults(true);
       self.results.removeAll();
     	
       var multiQs = $.map(self.dashboard.facets(), function(facet) {
@@ -157,6 +159,7 @@ var TestViewModel = function (query_json, dashboard_json) {
             "dashboard": ko.mapping.toJSON(self.dashboard),
             "layout": ko.mapping.toJSON(self.columns),
             }, function (data) {
+              self.isRetrievingResults(false);
               if (data.status == 0) {
             	self.results_cols(data.cols)
             	$.each(data.data, function (index, row) {