Merge pull request #3800 from rashidkpc/feature/pause-button

Add a pause button to the header when auto-refresh is enabled
elastic · May 15, 2015 · 6d48f73 · 6d48f73
2 parents e4d7383 + f34d906
commit 6d48f73
Show file tree

Hide file tree

Showing 19 changed files with 297 additions and 97 deletions.
diff --git a/src/kibana/components/courier/courier.js b/src/kibana/components/courier/courier.js
@@ -118,9 +118,10 @@ define(function (require) {
       };
 
       // Listen for refreshInterval changes
-      $rootScope.$watch('timefilter.refreshInterval', function () {
+      $rootScope.$watchCollection('timefilter.refreshInterval', function () {
         var refreshValue = _.deepGet($rootScope, 'timefilter.refreshInterval.value');
-        if (_.isNumber(refreshValue)) {
+        var refreshPause = _.deepGet($rootScope, 'timefilter.refreshInterval.pause');
+        if (_.isNumber(refreshValue) && !refreshPause) {
           self.fetchInterval(refreshValue);
         } else {
           self.fetchInterval(0);

diff --git a/src/kibana/components/timefilter/lib/diff_interval.js b/src/kibana/components/timefilter/lib/diff_interval.js
@@ -0,0 +1,21 @@
+define(function (require) {
+  var _ = require('lodash');
+  return function diffTimeProvider(Private) {
+    var diff = Private(require('utils/diff_time_picker_vals'));
+
+    return function (self) {
+      var oldRefreshInterval = _.clone(self.refreshInterval);
+
+      return function () {
+        if (diff(self.refreshInterval, oldRefreshInterval)) {
+          self.emit('update');
+          if (!self.refreshInterval.pause && self.refreshInterval.value !== 0) {
+            self.emit('fetch');
+          }
+        }
+
+        oldRefreshInterval = _.clone(self.refreshInterval);
+      };
+    };
+  };
+});
diff --git a/src/kibana/components/timefilter/lib/diff_time.js b/src/kibana/components/timefilter/lib/diff_time.js
@@ -0,0 +1,17 @@
+define(function (require) {
+  var _ = require('lodash');
+  return function diffTimeProvider(Private) {
+    var diff = Private(require('utils/diff_time_picker_vals'));
+
+    return function (self) {
+        var oldTime = _.clone(self.time);
+        return function () {
+          if (diff(self.time, oldTime)) {
+            self.emit('update');
+            self.emit('fetch');
+          }
+          oldTime = _.clone(self.time);
+        };
+      };
+  };
+});
diff --git a/src/kibana/services/timefilter.js → ...ibana/components/timefilter/timefilter.js b/src/kibana/services/timefilter.js → ...ibana/components/timefilter/timefilter.js
@@ -1,4 +1,4 @@
-define(function (require) {
+  define(function (require) {
   require('modules')
   .get('kibana')
   .service('timefilter', function (Private, globalState, $rootScope) {
@@ -22,6 +22,8 @@ define(function (require) {
       Timefilter.Super.call(this);
 
       var self = this;
+      var diffTime = Private(require('components/timefilter/lib/diff_time'))(self);
+      var diffInterval = Private(require('components/timefilter/lib/diff_interval'))(self);
 
       self.enabled = false;
 
@@ -32,6 +34,7 @@ define(function (require) {
 
       var refreshIntervalDefaults = {
         display: 'Off',
+        pause: false,
         section: 0,
         value: 0
       };
@@ -55,26 +58,19 @@ define(function (require) {
       });
 
       $rootScope.$$timefilter = self;
+
       $rootScope.$watchMulti([
+        '$$timefilter.time',
         '$$timefilter.time.from',
         '$$timefilter.time.to',
-        '$$timefilter.time.mode',
-        '$$timefilter.time',
+        '$$timefilter.time.mode'
+      ], diffTime);
+
+      $rootScope.$watchMulti([
         '$$timefilter.refreshInterval',
+        '$$timefilter.refreshInterval.pause',
         '$$timefilter.refreshInterval.value'
-      ], (function () {
-        var oldTime;
-        var oldRefreshInterval;
-
-        return function () {
-          if (diff(self.time, oldTime) || diff(self.refreshInterval, oldRefreshInterval)) {
-            self.emit('update');
-          }
-
-          oldTime = _.clone(self.time);
-          oldRefreshInterval = _.clone(self.refreshInterval);
-        };
-      }()));
+      ], diffInterval);
     }
 
     Timefilter.prototype.get = function (indexPattern) {

diff --git a/src/kibana/components/timepicker/timepicker.html b/src/kibana/components/timepicker/timepicker.html
@@ -19,30 +19,21 @@
     }
   </style>
 
-  <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">
+    <div ng-show="activeTab === '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'}">
+            <li ng-class="{active: mode === 'quick' }">
               <a ng-click="setMode('quick')">quick</a>
             </li>
-            <li ng-class="{active: mode=='relative'}">
+            <li ng-class="{active: mode === 'relative' }">
               <a ng-click="setMode('relative')">relative</a>
             </li>
-            <li ng-class="{active: mode=='absolute'}">
+            <li ng-class="{active: mode === 'absolute' }">
               <a ng-click="setMode('absolute')">absolute</a>
             </li>
           </ul>
@@ -167,12 +158,12 @@
     </div>
 
     <!-- Refresh Intervals -->
-    <div ng-show="tab == 'interval'" role="tabpanel" class="tab-pane active">
+    <div ng-show="activeTab === 'interval'" role="tabpanel" class="tab-pane active">
       <br>
       <div ng-repeat="list in refreshLists" class="kbn-refresh-section">
         <ul class="list-unstyled">
           <li ng-repeat="inter in list">
-            <a class="refresh-interval" ng-class="{ 'refresh-interval-active': interval.value == inter.value }" ng-click="setRefreshInterval(inter)">
+            <a class="refresh-interval" ng-class="{ 'refresh-interval-active': interval.value === inter.value }" ng-click="setRefreshInterval(inter)">
               {{inter.display}}
             </a>
           </li>

diff --git a/src/kibana/components/timepicker/timepicker.js b/src/kibana/components/timepicker/timepicker.js
@@ -18,7 +18,8 @@ define(function (require) {
         from: '=',
         to: '=',
         mode: '=',
-        interval: '='
+        interval: '=',
+        activeTab: '='
       },
       template: html,
       controller: function ($scope) {
@@ -28,6 +29,8 @@ define(function (require) {
 
         $scope.format = 'MMMM Do YYYY, HH:mm:ss.SSS';
         $scope.modes = ['quick', 'relative', 'absolute'];
+        $scope.activeTab = $scope.activeTab || 'filter';
+
         if (_.isUndefined($scope.mode)) $scope.mode = 'quick';
 
         $scope.quickLists = _(quickRanges).groupBy('section').values().value();
@@ -137,6 +140,11 @@ define(function (require) {
         };
 
         $scope.setRefreshInterval = function (interval) {
+          interval = _.clone(interval);
+          console.log('before: ' + interval.pause);
+          interval.pause = (interval.pause == null || interval.pause === false) ? false : true;
+
+          console.log('after: ' + interval.pause);
           $scope.interval = interval;
         };
 

diff --git a/src/kibana/plugins/dashboard/index.js b/src/kibana/plugins/dashboard/index.js
@@ -94,7 +94,7 @@ define(function (require) {
 
         timefilter.enabled = true;
         $scope.timefilter = timefilter;
-        $scope.$listen(timefilter, 'update', $scope.refresh);
+        $scope.$listen(timefilter, 'fetch', $scope.refresh);
 
         courier.setRootSearchSource(dash.searchSource);
 

diff --git a/src/kibana/plugins/discover/controllers/discover.js b/src/kibana/plugins/discover/controllers/discover.js
@@ -17,7 +17,7 @@ define(function (require) {
   require('components/courier/courier');
   require('components/index_patterns/index_patterns');
   require('components/state_management/app_state');
-  require('services/timefilter');
+  require('components/timefilter/timefilter');
   require('components/highlight/highlight_tags');
 
   var app = require('modules').get('apps/discover', [
@@ -148,7 +148,7 @@ define(function (require) {
 
       $scope.updateDataSource()
       .then(function () {
-        $scope.$listen(timefilter, 'update', function () {
+        $scope.$listen(timefilter, 'fetch', function () {
           $scope.fetch();
         });
 

diff --git a/src/kibana/plugins/kibana/_timepicker.html b/src/kibana/plugins/kibana/_timepicker.html
@@ -2,5 +2,6 @@
   from="timefilter.time.from"
   to="timefilter.time.to"
   mode="timefilter.time.mode"
+  active-tab="timefilter.timepickerActiveTab"
   interval="timefilter.refreshInterval">
-</kbn-timepicker>
+</kbn-timepicker>
diff --git a/src/kibana/plugins/kibana/_timepicker.js b/src/kibana/plugins/kibana/_timepicker.js
@@ -12,14 +12,21 @@ define(function (require) {
     });
 
     var timepickerHtml = require('text!plugins/kibana/_timepicker.html');
-    $scope.toggleTimepicker = function () {
+    $scope.toggleTimepicker = function (tab) {
+      tab = tab || timefilter.timepickerActiveTab || 'filter';
+
       // Close if already open
-      if ($scope.globalConfigTemplate === timepickerHtml) {
+      if ($scope.globalConfigTemplate === timepickerHtml && timefilter.timepickerActiveTab === tab) {
         delete $scope.globalConfigTemplate;
+        delete timefilter.timepickerActiveTab;
       } else {
+        timefilter.timepickerActiveTab = tab;
         $scope.globalConfigTemplate = timepickerHtml;
       }
     };
 
+    $scope.toggleRefresh = function () {
+      timefilter.refreshInterval.pause = !timefilter.refreshInterval.pause;
+    };
   };
-});
+});
diff --git a/src/kibana/plugins/kibana/kibana.html b/src/kibana/plugins/kibana/kibana.html
@@ -22,32 +22,46 @@
         </li>
       </ul>
 
-      <ul class="nav navbar-nav navbar-right navbar-timepicker">
-        <li ng-show="httpActive.length" class="navbar-text hidden-xs">
-          <div class="spinner"></div>
+      <ul ng-if="setupComplete" ng-show="timefilter.enabled" class="nav navbar-nav navbar-right navbar-timepicker">
+        <li>
+          <a  ng-click="toggleRefresh()"
+              ng-show="timefilter.refreshInterval.value > 0">
+            <i class="fa" ng-class="timefilter.refreshInterval.pause ? 'fa-play' : 'fa-pause'"></i>
+          </a>
+        </li>
+
+        <li ng-class="{active: timefilter.timepickerActiveTab === 'interval'}"
+            ng-show="timefilter.refreshInterval.value > 0 || timefilter.timepickerActiveTab"
+            class="to-body">
+          <a  ng-click="toggleTimepicker('interval')"
+              class="navbar-timepicker-auto-refresh-desc">
+            <span ng-show="timefilter.refreshInterval.value === 0"><i class="fa fa-repeat"></i> Auto-refresh</span>
+            <span ng-show="timefilter.refreshInterval.value > 0">{{timefilter.refreshInterval.display}}</span>
+          </a>
         </li>
 
-        <li ng-if="setupComplete" ng-show="timefilter.enabled" class="navbar-timepicker-container">
-          <a ng-click="toggleTimepicker()" aria-haspopup="true" aria-expanded="false">
-            <span ng-show="timefilter.refreshInterval.value > 0" class="navbar-timepicker-auto-refresh-desc">
-              {{timefilter.refreshInterval.display}}
-              <i aria-hidden="true" class="fa fa-rotate-right"></i>
-            </span>
-            <span class="navbar-timepicker-timefilter-desc">
-              <pretty-duration from="timefilter.time.from" to="timefilter.time.to"></pretty-duration>
-              <i aria-hidden="true" class="fa fa-clock-o"></i>
-            </span>
+        <li class="to-body" ng-class="{active: timefilter.timepickerActiveTab === 'filter'}">
+          <a  ng-click="toggleTimepicker('filter')" aria-haspopup="true" aria-expanded="false" class="navbar-timepicker-time-desc">
+            <i aria-hidden="true" class="fa fa-clock-o"></i>
+            <pretty-duration from="timefilter.time.from" to="timefilter.time.to"></pretty-duration>
           </a>
         </li>
       </ul>
+
+      <ul class="nav navbar-nav navbar-right navbar-timepicker" >
+        <li ng-show="httpActive.length" class="navbar-text hidden-xs">
+          <div class="spinner"></div>
+        </li>
+      </ul>
       <!-- /Full navbar -->
     </div>
   </nav>
 
   <config
     ng-show="timefilter.enabled"
     config-template="globalConfigTemplate"
-    config-object="timefilter">
+    config-object="timefilter"
+    config-close="toggleTimepicker">
   </config>
 
   <div class="application" ng-view></div>

diff --git a/src/kibana/plugins/visualize/editor/editor.js b/src/kibana/plugins/visualize/editor/editor.js
@@ -194,7 +194,7 @@ define(function (require) {
       // Without this manual emission, we'd miss filters and queries that were on the $state initially
       $state.emit('fetch_with_changes');
 
-      $scope.$listen(timefilter, 'update', _.bindKey($scope, 'fetch'));
+      $scope.$listen(timefilter, 'fetch', _.bindKey($scope, 'fetch'));
 
       $scope.$on('ready:vis', function () {
         $scope.$emit('application.load');

diff --git a/src/kibana/styles/_mixins.less b/src/kibana/styles/_mixins.less
@@ -12,4 +12,27 @@
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
+}
+
+.nav-active-arrow (@color: @body-bg) {
+
+  @media (max-width: @screen-sm-min) {
+    &:before {
+      display: none !important;
+    }
+  }
+
+  &:before {
+    content:"";
+    display:inline-block;
+    position:absolute;
+    border:@navbar-arrow-size solid @color;
+    border-color:transparent transparent @color transparent;
+    top:(@navbar-height - @navbar-arrow-size*2);
+    left: 0;
+    right: 0;
+    margin: 0 auto;
+    width: 0;
+    height: 0;
+  }
 }
diff --git a/src/kibana/styles/main.less b/src/kibana/styles/main.less
@@ -258,12 +258,13 @@ notifications {
 }
 
 .navbar-timepicker {
-  &-auto-refresh-desc {
-    margin-right: 20px;
+  > li > a {
+    padding-left: 7px !important;
+    padding-right: 7px !important;
   }
 
-  &-timefilter-desc {
-
+  &-time-desc > .fa-clock-o {
+    padding-right: 5px;
   }
 
   .fa {