Timefilter Auto Refresh - Closes "Support for auto-refresh #1845"

src/kibana/components/courier/courier.js

@@ -1,12 +1,13 @@
 define(function (require) {
   var errors = require('errors');
-
+  var _ = require('lodash');
+
   require('services/es');
   require('services/promises');
   require('components/index_patterns/index_patterns');
 
   require('modules').get('kibana/courier')
-  .service('courier', function ($rootScope, Private, Promise, indexPatterns) {
+  .service('courier', function ($rootScope, Private, Promise, indexPatterns, timefilter) {
     function Courier() {
       var self = this;
 
@@ -114,6 +115,13 @@ define(function (require) {
           throw new Error('Aborting all pending requests failed.');
         }
       };
+
+      // Listen for refreshInterval changes
+      $rootScope.$watch('timefilter.refreshInterval', function () {
+        if (!_.isUndefined(timefilter.refreshInterval)) {
+          self.fetchInterval(timefilter.refreshInterval.value);
+        }
+      });
     }
 
     return new Courier();

src/kibana/components/timepicker/timepicker.html

@@ -13,132 +13,152 @@
       padding: 0px 15px;
     }
 
+    .kbn-refresh-list {
+      padding: 0px 15px;
+    }
+
     .kbn-timepicket-alert {
       width: 100px;
     }
   </style>
 
-  <div class="row">
-    <div class="col-md-2">
-      <ul class="nav nav-pills nav-stacked kbn-timepicker-modes">
-        <li ng-class="{active: mode=='quick'}"><a ng-click="setMode('quick')" >quick</a></li>
-        <li ng-class="{active: mode=='relative'}"><a ng-click="setMode('relative')" >relative</a></li>
-        <li ng-class="{active: mode=='absolute'}"><a ng-click="setMode('absolute')" >absolute</a></li>
-      </ul>
-    </div>
-
-    <div class="col-md-10">
-      <div ng-switch on="mode" class="container-fluid">
-        <div ng-switch-when="quick" bindonce>
-
-          <div ng-repeat="list in quickLists" class="kbn-timepicker-section">
-            <ul class="list-unstyled">
-              <li ng-repeat="option in list"><a ng-click="setQuick(option.from, option.to)" bo-text="option.display"></a></li>
+ <ul class="nav nav-tabs" role="tablist" ng-init="tab = 'filter'">
+      <li ng-class="{active:tab== 'filter'}" ><a href ng-click="tab = 'filter'">Time Filter</a></li>
+      <li ng-class="{active:tab== 'interval'}"><a href ng-click="tab = 'interval'">Refresh Interval</a></li>
+    </ul>
+
+    <div class="tab-content">
+      <!-- Filters -->
+      <div ng-show="tab == 'filter'" role="tabpanel" class="tab-pane active">
+        </br>
+        <div class="row">
+          <div class="col-md-2">
+            <ul class="nav nav-pills nav-stacked kbn-timepicker-modes">
+              <li ng-class="{active: mode=='quick'}"><a ng-click="setMode('quick')" >quick</a></li>
+              <li ng-class="{active: mode=='relative'}"><a ng-click="setMode('relative')" >relative</a></li>
+              <li ng-class="{active: mode=='absolute'}"><a ng-click="setMode('absolute')" >absolute</a></li>
             </ul>
           </div>
 
-          <!-- TODO: Add a section for custom intervals -->
-        </div>
-        <div ng-switch-when="relative">
-
-          <form
-            ng-submit="applyRelative()"
-            class="form-inline"
-            name="relativeTime">
-
-            <div class="kbn-timepicker-section">
-              <label>
-                From:
-                <span ng-show="relative.preview">{{relative.preview}}</span><span ng-hide="relative.preview"><i>Invalid Expression</i></span>
-              </label><br>
-              <div class="form-group">
-                <input type="number" class="form-control" required
-                  ng-model="relative.count"
-                  ng-change="formatRelative()">
-              </div>
-              <div class="form-group">
-                <select class="form-control col-xs-2"
-                  ng-model="relative.unit"
-                  ng-options="opt.value as opt.text for opt in relativeOptions"
-                  ng-change="formatRelative()">
-                </select>
-              </div>
-              <br>
-              <div class="small">
-                <input type="checkbox"
-                  ng-model="relative.round"
-                  ng-checked="relative.round"
-                  ng-change="formatRelative()"/> round to the {{units[relative.unit]}}
-              </div>
+          <div class="col-md-10">
+            <div ng-switch on="mode" class="container-fluid">
+              <div ng-switch-when="quick" bindonce>
 
-            </div>
+                <div ng-repeat="list in quickLists" class="kbn-timepicker-section">
+                  <ul class="list-unstyled">
+                    <li ng-repeat="option in list"><a ng-click="setQuick(option.from, option.to)" bo-text="option.display"></a></li>
+                  </ul>
+                </div>
 
-            <div class="kbn-timepicker-section">
-              <label>
-                To: Now
-              </label><br>
-              <div class="form-group">
-                <input type="text" disabled class="form-control" value="Now">
+                <!-- TODO: Add a section for custom intervals -->
               </div>
-            </div>
+              <div ng-switch-when="relative">
+
+                <form
+                  ng-submit="applyRelative()"
+                  class="form-inline"
+                  name="relativeTime">
+
+                  <div class="kbn-timepicker-section">
+                    <label>
+                      From:
+                      <span ng-show="relative.preview">{{relative.preview}}</span><span ng-hide="relative.preview"><i>Invalid Expression</i></span>
+                    </label><br>
+                    <div class="form-group">
+                      <input type="number" class="form-control" required
+                        ng-model="relative.count"
+                        ng-change="formatRelative()">
+                    </div>
+                    <div class="form-group">
+                      <select class="form-control col-xs-2"
+                        ng-model="relative.unit"
+                        ng-options="opt.value as opt.text for opt in relativeOptions"
+                        ng-change="formatRelative()">
+                      </select>
+                    </div>
+                    <br>
+                    <div class="small">
+                      <input type="checkbox"
+                        ng-model="relative.round"
+                        ng-checked="relative.round"
+                        ng-change="formatRelative()"/> round to the {{units[relative.unit]}}
+                    </div>
+
+                  </div>
+
+                  <div class="kbn-timepicker-section">
+                    <label>
+                      To: Now
+                    </label><br>
+                    <div class="form-group">
+                      <input type="text" disabled class="form-control" value="Now">
+                    </div>
+                  </div>
+
+                  <div class="kbn-timepicker-section">
+                    <label>&nbsp;</label><br>
+                    <div class="form-group">
+                      <button
+                        type="submit"
+                        class="btn btn-primary kbn-timepicker-go"
+                        ng-disabled="!relative.preview">
+                        Go
+                      </button>
+                    </div>
+                  </div>
+                </form>
 
-            <div class="kbn-timepicker-section">
-              <label>&nbsp;</label><br>
-              <div class="form-group">
-                <button
-                  type="submit"
-                  class="btn btn-primary kbn-timepicker-go"
-                  ng-disabled="!relative.preview">
-                  Go
-                </button>
               </div>
-            </div>
-          </form>
-
-        </div>
-
-        <div ng-switch-when="absolute">
 
-          <form name="absoluteTime" ng-submit="applyAbsolute()">
-
-            <div class="kbn-timepicker-section">
-              <div>
-                <label class="small">From: <span ng-show="!absolute.from"><i>Invalid Date</i></span></label>
-                <input type="text" required class="form-control" input-datetime="{{format}}" ng-model="absolute.from">
-              </div>
-              <div>
-                <datepicker ng-model="absolute.from" max="absolute.to" show-weeks="false"></datepicker>
-              </div>
-            </div>
-
-            <div class="kbn-timepicker-section">
-              <div>
-                <label class="small">To: <span ng-show="!absolute.to"><i>Invalid Date</i></span></label>
-                <input type="text" required class="form-control" input-datetime="{{format}}" ng-model="absolute.to">
-              </div>
-              <div>
-                <datepicker ng-model="absolute.to" min="absolute.from" show-weeks="false"></datepicker>
+              <div ng-switch-when="absolute">
+
+                <form name="absoluteTime" ng-submit="applyAbsolute()">
+
+                  <div class="kbn-timepicker-section">
+                    <div>
+                      <label class="small">From: <span ng-show="!absolute.from"><i>Invalid Date</i></span></label>
+                      <input type="text" required class="form-control" input-datetime="{{format}}" ng-model="absolute.from">
+                    </div>
+                    <div>
+                      <datepicker ng-model="absolute.from" max="absolute.to" show-weeks="false"></datepicker>
+                    </div>
+                  </div>
+
+                  <div class="kbn-timepicker-section">
+                    <div>
+                      <label class="small">To: <span ng-show="!absolute.to"><i>Invalid Date</i></span></label>
+                      <input type="text" required class="form-control" input-datetime="{{format}}" ng-model="absolute.to">
+                    </div>
+                    <div>
+                      <datepicker ng-model="absolute.to" min="absolute.from" show-weeks="false"></datepicker>
+                    </div>
+                  </div>
+
+                  <div class="kbn-timepicker-section kbn-timepicker-alert">
+                    <label>&nbsp</label>
+                    <div class="form-group">
+                      <button
+                        class="btn btn-primary kbn-timepicker-go"
+                        ng-disabled="absolute.from > absolute.to || !absolute.from || !absolute.to"
+                        type="submit">
+                        Go
+                      </button>
+                      <span class="small" ng-show="absolute.from > absolute.to"><strong>From</strong> must occur before <strong>To</strong></span>
+                    </div>
+                  </div>
+                </form>
               </div>
             </div>
-
-            <div class="kbn-timepicker-section kbn-timepicker-alert">
-              <label>&nbsp</label>
-              <div class="form-group">
-                <button
-                  class="btn btn-primary kbn-timepicker-go"
-                  ng-disabled="absolute.from > absolute.to || !absolute.from || !absolute.to"
-                  type="submit">
-                  Go
-                </button>
-                <span class="small" ng-show="absolute.from > absolute.to"><strong>From</strong> must occur before <strong>To</strong></span>
-              </div>
-            </div>
-          </form>
-
-
+          </div>
+        </div>
+      </div>
+      <!-- Refresh Intervals -->
+      <div ng-show="tab == 'interval'" role="tabpanel" class="tab-pane active">
+        </br>
+         <ul class="list-unstyled kbn-refresh-list">
+          <li ng-repeat="interval in refreshIntervals"><a ng-click="setRefreshInterval(interval)">{{interval.display}}</a></li>
+          </ul>
         </div>
       </div>
     </div>
-
-  </div>
-</div>
+</div>

src/kibana/components/timepicker/timepicker.js

@@ -9,14 +9,14 @@ define(function (require) {
   require('components/timepicker/quick_ranges');
   require('components/timepicker/time_units');
 
-
   module.directive('kbnTimepicker', function (quickRanges, timeUnits) {
     return {
       restrict: 'E',
       scope: {
         from: '=',
         to: '=',
-        mode: '='
+        mode: '=',
+        interval: '='
       },
       template: html,
       controller: function ($scope) {
@@ -33,6 +33,20 @@ define(function (require) {
           return _.filter(quickRanges, {section: section});
         });
 
+        $scope.refreshIntervals = [
+          { value : 0, display: 'Off'},
+          { value : 5000, display: '5 seconds'},
+          { value : 10000, display: '10 seconds'},
+          { value : 30000, display: '30 seconds'},
+          { value : 60000, display: '1 minute'},
+          { value : 300000, display: '5 minutes'},
+          { value : 900000, display: '15 minutes'},
+          { value : 1800000, display: '30 minutes'},
+          { value : 3600000, display: '1 hour'},
+          { value : 7200000, display: '2 hour'},
+          { value : 86400000, display: '1 day'}
+        ];
+
         $scope.relative = {
           count: 1,
           unit: 'm',
@@ -131,6 +145,10 @@ define(function (require) {
           $scope.to = moment($scope.absolute.to);
         };
 
+        $scope.setRefreshInterval = function (interval) {
+          $scope.interval = interval;
+        };
+
         init();
       }
     };

src/kibana/plugins/kibana/_timepicker.html

@@ -1,5 +1,6 @@
 <kbn-timepicker
   from="timefilter.time.from"
   to="timefilter.time.to"
-  mode="timefilter.time.mode">
+  mode="timefilter.time.mode"
+  interval="timefilter.refreshInterval">
 </kbn-timepicker>

src/kibana/plugins/kibana/_timepicker.js

@@ -4,6 +4,7 @@ define(function (require) {
 
     $scope.notifList = notify._notifs;
     $scope.timefilter = timefilter;
+    $scope.timefilter.refreshInterval = { value : 0, display: 'Off'};
 
     $scope.$listen(timefilter, 'update', function (newVal, oldVal) {
       globalState.time = _.clone(timefilter.time);

src/kibana/plugins/kibana/kibana.html

@@ -18,7 +18,7 @@
       <!-- Full navbar -->
       <div collapse="!showCollapsed" class="navbar-collapse" id="kibana-primary-navbar">
         <ul class="nav navbar-nav">
-          <li ng-repeat="app in apps.inOrder | filter:{show: true}" ng-class="{active: activeApp === app}">
+          <li ng-repeat="app in apps.inOrder" ng-class="{active: activeApp === app}">
             <a ng-href="#{{app.lastPath}}" bo-text="app.name"></a>
           </li>
         </ul>
@@ -30,6 +30,7 @@
           </li>
           <li ng-if="setupComplete" ng-show="timefilter.enabled" class="navbar-timepicker-display">
             <a ng-click="toggleTimepicker()">
+              Refresh: {{timefilter.refreshInterval.display}} - Filter:
               <pretty-duration from="timefilter.time.from" to="timefilter.time.to"></pretty-duration>
               &nbsp;
               <i class="fa fa-clock-o"></i>