Add time navigation buttons (#9253)

* Add time navigation buttons

* changing vars to const

* Address some review points

* fixing typo in function name

* Remove unused variables

* [timepicker] Simplify zoom in/out and forward/back and remove getter that had side effects

* [timepicker] Move time navigation calculations to own class and write test

* [timepicker] Remove unused styling and classes

* [timepicker] Change from i to span, add more explanatory comments

* [timepicker] Remove unused variable

* Remove zoom in/out buttons from timepicker nav

* Change step forward/back timepicker nav button icons

src/ui/public/styles/base.less

@@ -200,23 +200,6 @@ a {
   .button-variant(@navbar-default-color; @navbar-default-bg; @navbar-default-border);
 }
 
-.navbar-timepicker {
-  > li > a {
-    padding-left: 7px !important;
-    padding-right: 7px !important;
-  }
-
-  .fa {
-    font-size: 16px;
-    vertical-align: middle;
-  }
-
-  button {
-    background-color: transparent;
-    border-radius: 0;
-  }
-}
-
   .navbar-timepicker-time-desc > .fa-clock-o {
     padding-right: 5px;
   }

src/ui/public/timepicker/__tests__/time_navigation.js

@@ -0,0 +1,38 @@
+import expect from 'expect.js';
+import moment from 'moment';
+import timeNavigation from '../time_navigation';
+
+describe('timeNavigation', () => {
+  let bounds;
+
+  beforeEach(() => {
+    bounds = {
+      min: moment('2016-01-01T00:00:00.000Z'),
+      max: moment('2016-01-01T00:15:00.000Z')
+    };
+  });
+
+  it('should step forward by the amount of the duration', () => {
+    const {from, to} = timeNavigation.stepForward(bounds);
+    expect(from).to.be('2016-01-01T00:15:00.000Z');
+    expect(to).to.be('2016-01-01T00:30:00.000Z');
+  });
+
+  it('should step backward by the amount of the duration', () => {
+    const {from, to} = timeNavigation.stepBackward(bounds);
+    expect(from).to.be('2015-12-31T23:45:00.000Z');
+    expect(to).to.be('2016-01-01T00:00:00.000Z');
+  });
+
+  it('should zoom out to be double the original duration', () => {
+    const {from, to} = timeNavigation.zoomOut(bounds);
+    expect(from).to.be('2015-12-31T23:52:30.000Z');
+    expect(to).to.be('2016-01-01T00:22:30.000Z');
+  });
+
+  it('should zoom in to be half the original duration', () => {
+    const {from, to} = timeNavigation.zoomIn(bounds);
+    expect(from).to.be('2016-01-01T00:03:45.000Z');
+    expect(to).to.be('2016-01-01T00:11:15.000Z');
+  });
+});

src/ui/public/timepicker/kbn_global_timepicker.html

@@ -4,7 +4,7 @@
     ng-click="toggleRefresh()"
     ng-show="timefilter.refreshInterval.value > 0"
   >
-    <i class="fa" ng-class="timefilter.refreshInterval.pause ? 'fa-play' : 'fa-pause'"></i>
+    <span class="fa" ng-class="timefilter.refreshInterval.pause ? 'fa-play' : 'fa-pause'"></span>
   </div>
 
   <div
@@ -14,13 +14,17 @@
     ng-click="kbnTopNav.toggle('interval')"
   >
     <span ng-show="timefilter.refreshInterval.value === 0">
-      <i class="fa fa-repeat"></i> Auto-refresh
+      <span class="fa fa-repeat"></span> Auto-refresh
     </span>
     <span ng-show="timefilter.refreshInterval.value > 0">
       {{timefilter.refreshInterval.display}}
     </span>
   </div>
 
+  <div class="localMenuItem" ng-click="back()">
+    <span class="fa fa-chevron-left ng-scope" tooltip="Move backwards in time"></span>
+  </div>
+
   <div
     data-test-subj="globalTimepickerButton"
     class="localMenuItem navbar-timepicker-time-desc"
@@ -29,10 +33,14 @@
     aria-haspopup="true"
     aria-expanded="false"
   >
-    <i aria-hidden="true" class="fa fa-clock-o"></i>
+    <span aria-hidden="true" class="fa fa-clock-o"></span>
     <pretty-duration
       from="timefilter.time.from" to="timefilter.time.to"
       data-test-subj="globalTimepickerRange"
     ></pretty-duration>
   </div>
+
+  <div class="localMenuItem" ng-click="forward()">
+    <span class="fa fa-chevron-right ng-scope" tooltip="Move forwards in time"></span>
+  </div>
 </div>

src/ui/public/timepicker/kbn_global_timepicker.js

@@ -1,15 +1,15 @@
 import moment from 'moment';
 import UiModules from 'ui/modules';
-import chromeNavControlsRegistry from 'ui/registry/chrome_nav_controls';
-import { once, clone } from 'lodash';
+import { once, clone, assign } from 'lodash';
 
 import toggleHtml from './kbn_global_timepicker.html';
+import timeNavigation from './time_navigation';
 
 UiModules
 .get('kibana')
-.directive('kbnGlobalTimepicker', (timefilter, globalState, $rootScope, config) => {
+.directive('kbnGlobalTimepicker', (timefilter, globalState, $rootScope) => {
   const listenForUpdates = once($scope => {
-    $scope.$listen(timefilter, 'update', (newVal, oldVal) => {
+    $scope.$listen(timefilter, 'update', () => {
       globalState.time = clone(timefilter.time);
       globalState.refreshInterval = clone(timefilter.refreshInterval);
       globalState.save();
@@ -19,13 +19,21 @@ UiModules
   return {
     template: toggleHtml,
     replace: true,
-    link: ($scope, $el, attrs) => {
+    link: ($scope) => {
       listenForUpdates($rootScope);
 
       $rootScope.timefilter = timefilter;
       $rootScope.toggleRefresh = () => {
         timefilter.refreshInterval.pause = !timefilter.refreshInterval.pause;
       };
+
+      $scope.forward = function () {
+        assign(timefilter.time, timeNavigation.stepForward(timefilter.getBounds()));
+      };
+
+      $scope.back = function () {
+        assign(timefilter.time, timeNavigation.stepBackward(timefilter.getBounds()));
+      };
     },
   };
 });

src/ui/public/timepicker/time_navigation.js

@@ -0,0 +1,39 @@
+import moment from 'moment';
+
+export default {
+  // travel forward in time based on the interval between from and to
+  stepForward({min, max}) {
+    const diff = max.diff(min);
+    return {
+      from: max.toISOString(),
+      to: moment(max).add(diff).toISOString()
+    };
+  },
+
+  // travel backwards in time based on the interval between from and to
+  stepBackward({min, max}) {
+    const diff = max.diff(min);
+    return {
+      from: moment(min).subtract(diff).toISOString(),
+      to: min.toISOString()
+    };
+  },
+
+  // zoom out, doubling the difference between start and end, keeping the same time range center
+  zoomOut({min, max}) {
+    const diff = max.diff(min);
+    return {
+      from: moment(min).subtract(diff / 2).toISOString(),
+      to: moment(max).add(diff / 2).toISOString()
+    };
+  },
+
+  // zoom in, halving the difference between start and end, keeping the same time range center
+  zoomIn({min, max}) {
+    const diff = max.diff(min);
+    return {
+      from: moment(min).add(diff / 4).toISOString(),
+      to: moment(max).subtract(diff / 4).toISOString()
+    };
+  }
+};