Merge pull request #248 from spenceralger/informative_loading

Informative loading in discover

TODOS.md

@@ -5,9 +5,9 @@
    - change this from event based to calling a method on dashboardApp – [L68](https://github.com/elasticsearch/kibana4/blob/master/src/kibana/apps/dashboard/directives/grid.js#L68)
  - **src/kibana/apps/discover/controllers/discover.js**
    - Switch this to watching time.string when we implement it – [L150](https://github.com/elasticsearch/kibana4/blob/master/src/kibana/apps/discover/controllers/discover.js#L150)
-   - On array fields, negating does not negate the combination, rather all terms – [L467](https://github.com/elasticsearch/kibana4/blob/master/src/kibana/apps/discover/controllers/discover.js#L467)
-   - Move to utility class – [L538](https://github.com/elasticsearch/kibana4/blob/master/src/kibana/apps/discover/controllers/discover.js#L538)
+   - On array fields, negating does not negate the combination, rather all terms – [L477](https://github.com/elasticsearch/kibana4/blob/master/src/kibana/apps/discover/controllers/discover.js#L477)
    - Move to utility class – [L548](https://github.com/elasticsearch/kibana4/blob/master/src/kibana/apps/discover/controllers/discover.js#L548)
+   - Move to utility class – [L558](https://github.com/elasticsearch/kibana4/blob/master/src/kibana/apps/discover/controllers/discover.js#L558)
  - **src/kibana/apps/settings/sections/indices/_create.js**
    - we should probably display a message of some kind – [L111](https://github.com/elasticsearch/kibana4/blob/master/src/kibana/apps/settings/sections/indices/_create.js#L111)
  - **src/kibana/apps/visualize/controllers/editor.js**

src/kibana/apps/discover/_segmented_fetch.js

@@ -29,6 +29,7 @@ define(function (require) {
      * @return {Promise}
      */
     segmentedFetch.fetch = function (opts) {
+      opts = opts || {};
       var searchSource = opts.searchSource;
       var direction = opts.direction;
       var limitSize = false;
@@ -48,6 +49,9 @@ define(function (require) {
       activeReq = req;
 
       var queue = searchSource.get('index').toIndexList();
+      var total = queue.length;
+      var active = null;
+      var complete = [];
 
       if (!_.isArray(queue)) {
         queue = [queue];
@@ -67,10 +71,24 @@ define(function (require) {
         }
       };
 
+      function reportStatus() {
+        if (!opts.status) return;
+        opts.status({
+          total: total,
+          complete: complete.length,
+          remaining: queue.length,
+          active: active
+        });
+      }
+
+      reportStatus();
       getStateFromRequest(req)
       .then(function (state) {
         return (function recurse() {
           var index = queue.shift();
+          active = index;
+
+          reportStatus();
 
           if (limitSize) {
             state.body.size = remainingSize;
@@ -133,6 +151,7 @@ define(function (require) {
               }
             })
             .then(function () {
+              complete.push(index);
               if (queue.length) return recurse();
               return done();
             });

src/kibana/apps/discover/controllers/discover.js

@@ -173,27 +173,31 @@ define(function (require) {
         // options are 'loading', 'ready', 'none', undefined
         $scope.$watchMulti([
           'rows',
-          'searchSource.activeFetchCount'
+          'fetchStatus'
         ], (function updateResultState() {
           var prev = {};
 
-          function pick(rows, oldRows, activeFetchCount, oldActiveFetchCount) {
-            if (!rows && !oldRows && !activeFetchCount) return 'loading';
-            if (activeFetchCount) return 'loading';
-            return _.isEmpty(rows) ? 'none' : 'ready';
+          function pick(rows, oldRows, fetchStatus, oldFetchStatus) {
+            // initial state, pretend we are loading
+            if (rows == null && oldRows == null) return 'loading';
+
+            var rowsEmpty = _.isEmpty(rows);
+            if (rowsEmpty && fetchStatus) return 'loading';
+            else if (!rowsEmpty) return 'ready';
+            else return 'none';
           }
 
           return function () {
             var current = {
               rows: $scope.rows,
-              activeFetchCount: $scope.searchSource.activeFetchCount
+              fetchStatus: $scope.fetchStatus
             };
 
             $scope.resultState = pick(
               current.rows,
               prev.rows,
-              current.activeFetchCount,
-              prev.activeFetchCount
+              current.fetchStatus,
+              prev.fetchStatus
             );
 
             prev = current;
@@ -271,6 +275,9 @@ define(function (require) {
           searchSource: $scope.searchSource,
           totalSize: sortBy === 'non-time' ? false : totalSize,
           direction: sortBy === 'time' ? sort[1] : 'desc',
+          status: function (status) {
+            $scope.fetchStatus = status;
+          },
           first: function (resp) {
             $scope.hits = 0;
             $scope.rows = [];
@@ -324,7 +331,10 @@ define(function (require) {
             $scope.mergedEsResp = merged;
           }
         })
-        .finally(eventComplete);
+        .finally(function () {
+          $scope.fetchStatus = false;
+          eventComplete();
+        });
       })
       .catch(notify.error);
     };

src/kibana/apps/discover/index.html

@@ -57,6 +57,7 @@
         <div class="discover-overlay">
           <h2>Searching</h2>
           <div class="spinner large"></div>
+          <div ng-show="fetchStatus">{{fetchStatus.complete}}/{{fetchStatus.total}}</div>
         </div>
       </div>
 

src/kibana/apps/discover/styles/main.less

@@ -45,11 +45,9 @@
   text-align: center;
   background-color: #ffffff;
 
-  .spinner {
-    position: absolute;
-    top: 70px;
-    left: 0;
-    right: 0;
+  // spinner and prorgess counter
+  > div {
+    text-align: center;
   }
 }