Merge pull request #3290 from w33ble/discover-interval

Discover interval

src/kibana/plugins/discover/controllers/discover.js

@@ -75,6 +75,17 @@ define(function (require) {
       location: 'Discover'
     });
 
+    $scope.intervalOptions = Private(require('components/agg_types/buckets/_interval_options'));
+    $scope.showInterval = false;
+
+    $scope.intervalEnabled = function (interval) {
+      return interval.val !== 'custom';
+    };
+
+    $scope.toggleInterval = function () {
+      $scope.showInterval = !$scope.showInterval;
+    };
+
     // config panel templates
     $scope.configTemplate = new ConfigTemplate({
       load: require('text!plugins/discover/partials/load_search.html'),
@@ -166,6 +177,23 @@ define(function (require) {
           timefilter.enabled = !!timefield;
         });
 
+        $scope.$watch('state.interval', function (interval, oldInterval) {
+          if (interval !== oldInterval && interval === 'auto') {
+            $scope.showInterval = false;
+          }
+          $scope.fetch();
+        });
+
+        $scope.$watch('vis.aggs', function (aggs) {
+          var buckets = $scope.vis.aggs.bySchemaGroup.buckets;
+
+          if (buckets && buckets.length === 1) {
+            $scope.intervalName = 'by ' + buckets[0].buckets.getInterval().description;
+          } else {
+            $scope.intervalName = 'auto';
+          }
+        });
+
         $scope.$watchMulti([
           'rows',
           'fetchStatus'
@@ -426,17 +454,31 @@ define(function (require) {
       if (!$scope.opts.timefield) return Promise.resolve();
       if (loadingVis) return loadingVis;
 
+      var visStateAggs = [
+        {
+          type: 'count',
+          schema: 'metric'
+        },
+        {
+          type: 'date_histogram',
+          schema: 'segment',
+          params: {
+            field: $scope.opts.timefield,
+            interval: $state.interval,
+            min_doc_count: 0
+          }
+        }
+      ];
 
-      // we shouldn't have a vis, delete it
-      if (!$scope.opts.timefield && $scope.vis) {
-        $scope.vis.destroy();
-        $scope.searchSource.set('aggs', undefined);
-        delete $scope.vis;
+      // we have a vis, just modify the aggs
+      if ($scope.vis) {
+        var visState = $scope.vis.getState();
+        visState.aggs = visStateAggs;
+
+        $scope.vis.setState(visState);
+        return Promise.resolve($scope.vis);
       }
 
-      // we shouldn't have one, or already do, return whatever we already have
-      if (!$scope.opts.timefield || $scope.vis) return Promise.resolve($scope.vis);
-
       // TODO: a legit way to update the index pattern
       $scope.vis = new Vis($scope.indexPattern, {
         type: 'histogram',
@@ -452,21 +494,7 @@ define(function (require) {
           },
           brush: brushEvent
         },
-        aggs: [
-          {
-            type: 'count',
-            schema: 'metric'
-          },
-          {
-            type: 'date_histogram',
-            schema: 'segment',
-            params: {
-              field: $scope.opts.timefield,
-              interval: 'auto',
-              min_doc_count: 0
-            }
-          }
-        ]
+        aggs: visStateAggs
       });
 
       $scope.searchSource.aggs(function () {

src/kibana/plugins/discover/index.html

@@ -79,6 +79,7 @@
             <span bindonce bo-bind="opts.savedSearch.title"></span>
             <i aria-label="Reload saved query" tooltip="Reload saved query" ng-click="resetQuery();" class="fa fa-undo small"></i>
           </span>
+
           <strong class="discover-info-hits">{{(hits || 0) | number:0}}</strong>
           <ng-pluralize count="hits" when="{'1':'hit', 'other':'hits'}"></ng-pluralize>
         </div>
@@ -149,17 +150,30 @@
           <!-- result -->
           <div class="results" ng-show="resultState === 'ready'">
             <div class="discover-timechart" ng-if="opts.timefield">
-              <center class="small">
-                <span tooltip="To change the time, click the clock icon in the navigation bar">{{timeRange.from | moment}} - {{timeRange.to | moment}}</span>
-                <!-- TODO: Currently no way to apply this setting to the visualization -->
-                <!-- <select
-                  class="form-control"
-                  ng-model="state.interval"
-                  ng-options="interval as interval for interval in intervalOptions"
-                  ng-change="setupVisualization();fetch()"
-                  >
-                </select> -->
-              </center>
+              <header>
+                <center class="small">
+                  <span tooltip="To change the time, click the clock icon in the navigation bar">{{timeRange.from | moment}} - {{timeRange.to | moment}}</span>
+
+                  &mdash;
+
+                  <span class="results-interval" ng-hide="showInterval">
+                    <a
+                      ng-click="toggleInterval()">
+                      {{ intervalName }}
+                    </a>
+                  </span>
+
+                  <span ng-show="showInterval" class="results-interval form-inline">
+                    <select
+                      class="form-control"
+                      ng-model="state.interval"
+                      ng-options="interval.val as interval.display for interval in intervalOptions | filter: intervalEnabled"
+                      >
+                    </select>
+                  </span>
+                </center>
+
+              </header>
 
               <visualize ng-if="vis && rows.length != 0" vis="vis" es-resp="mergedEsResp" search-source="searchSource"></visualize>
             </div>

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

@@ -21,6 +21,11 @@
     display: block;
     position: relative;
 
+    header {
+      min-height: @input-height-base + 8px;
+      padding: 4px 0;
+    }
+
     visualize {
       height: 200px;
       max-height: 600px;
@@ -248,4 +253,15 @@ disc-field-chooser {
     margin: -20px 0 10px 0;
     text-align: center;
   }
+
+  &-interval {
+    a {
+      text-decoration: underline;;
+    }
+
+    select {
+      display: inline-block;
+      width: auto;
+    }
+  }
 }