Add time navigation buttons

src/ui/public/styles/base.less

@@ -218,6 +218,8 @@ a {
 }
 
 .navbar-timepicker {
+  border-left: 1px solid @kibanaGray4;
+
   > li > a {
     padding-left: 7px !important;
     padding-right: 7px !important;
@@ -232,6 +234,11 @@ a {
     background-color: transparent;
     border-radius: 0;
   }
+
+  .time-nav-btn {
+    padding-left: 10px;
+    padding-right: 10px;
+  }
 }
 
   .navbar-timepicker-time-desc > .fa-clock-o {

src/ui/public/timepicker/kbn_global_timepicker.html

@@ -20,6 +20,9 @@
   </li>
 
   <li>
+    <i ng-click="zoomIn()" class="time-nav-btn fa fa-search-plus ng-scope" tooltip="Zoom in"></i>
+    <i ng-click="zoomOut()" class="time-nav-btn fa fa-search-minus ng-scope" tooltip="Zoom out"></i>
+    <i ng-click="back()" class="time-nav-btn fa fa-arrow-left ng-scope" tooltip="Move backwards in time"></i>
     <button ng-class="{active: kbnTopNav.isCurrent('filter')}"
       ng-click="kbnTopNav.toggle('filter')"
       aria-haspopup="true"
@@ -28,5 +31,6 @@
       <i aria-hidden="true" class="fa fa-clock-o"></i>
       <pretty-duration from="timefilter.time.from" to="timefilter.time.to"></pretty-duration>
     </button>
+    <i ng-click="forward()" class="time-nav-btn fa fa-arrow-right ng-scope" tooltip="Move forwards in time"></i>
   </li>
 </ul>

src/ui/public/timepicker/kbn_global_timepicker.js

@@ -2,6 +2,7 @@ import moment from 'moment';
 import UiModules from 'ui/modules';
 import chromeNavControlsRegistry from 'ui/registry/chrome_nav_controls';
 import { once, clone } from 'lodash';
+import dateMath from '@elastic/datemath';
 
 import toggleHtml from './kbn_global_timepicker.html';
 
@@ -25,6 +26,71 @@ UiModules
       $rootScope.toggleRefresh = () => {
         timefilter.refreshInterval.pause = !timefilter.refreshInterval.pause;
       };
+
+      // travel forward in time based on the interval between from and to
+      $scope.forward = function () {
+        const time = getFromTo();
+        const diff = time.to.diff(time.from);
+        const origTo = time.to.toISOString();
+
+        time.to.add(diff, 'milliseconds');
+        timefilter.time.from = origTo;
+        timefilter.time.to = time.to.toISOString();
+      };
+
+      // travel backwards in time based on the interval between from and to
+      $scope.back = function () {
+        const time = getFromTo();
+        const diff = time.to.diff(time.from);
+        const origFrom = time.from.toISOString();
+
+        time.from.subtract(diff, 'milliseconds');
+        timefilter.time.from = time.from.toISOString();
+        timefilter.time.to = origFrom;
+      };
+
+      // zoom out, doubling the difference between start and end, keeping the same time range center
+      $scope.zoomOut = function () {
+        const time = getFromTo();
+        const from = time.from.unix() * 1000;
+        const to = time.to.unix() * 1000;
+
+        const diff = Math.floor((to - from) / 2);
+
+        timefilter.time.from = moment(from - diff).toISOString();
+        timefilter.time.to = moment(to + diff).toISOString();
+      };
+
+      // zoom in, halving the difference between start and end, keeping the same time range center
+      $scope.zoomIn = function () {
+        const time = getFromTo();
+        const from = time.from.unix() * 1000;
+        const to = time.to.unix() * 1000;
+
+        const diff = Math.floor((to - from) / 4);
+
+        timefilter.time.from = moment(from + diff).toISOString();
+        timefilter.time.to = moment(to - diff).toISOString();
+      };
+
+      // find the from and to values from the timefilter
+      // if a quick or relative mode has been selected, work out the
+      // absolute times and then change the mode to absolute
+      function getFromTo() {
+        if (timefilter.time.mode === 'absolute') {
+          return {
+            to:   moment(timefilter.time.to),
+            from: moment(timefilter.time.from)
+          };
+        } else {
+          timefilter.time.mode = 'absolute';
+          return {
+            to:   dateMath.parse(timefilter.time.to, true),
+            from: dateMath.parse(timefilter.time.from)
+          };
+        }
+      }
+
     },
   };
 });