From 7e1932f935b1292964d3eefcf372e0788a100f6b Mon Sep 17 00:00:00 2001
From: James Gowdy <jgowdy@elastic.co>
Date: Mon, 3 Oct 2016 18:19:42 +0100
Subject: [PATCH 1/4] Add time navigation buttons

---
 src/ui/public/styles/base.less                |  5 ++
 .../timepicker/kbn_global_timepicker.html     |  4 ++
 .../timepicker/kbn_global_timepicker.js       | 68 +++++++++++++++++++
 3 files changed, 77 insertions(+)

diff --git a/src/ui/public/styles/base.less b/src/ui/public/styles/base.less
index c14af77d75497..5a35b89d0e1e6 100644
--- a/src/ui/public/styles/base.less
+++ b/src/ui/public/styles/base.less
@@ -232,6 +232,11 @@ a {
     background-color: transparent;
     border-radius: 0;
   }
+
+  i.time-nav-btn {
+    padding-left: 10px;
+    padding-right: 10px;
+  }
 }
 
   .navbar-timepicker-time-desc > .fa-clock-o {
diff --git a/src/ui/public/timepicker/kbn_global_timepicker.html b/src/ui/public/timepicker/kbn_global_timepicker.html
index ae4e9c27ba713..142782d78c311 100644
--- a/src/ui/public/timepicker/kbn_global_timepicker.html
+++ b/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"></i>
+    <i ng-click="zoomOut()" class="time-nav-btn fa fa-search-minus ng-scope"></i>
+    <i ng-click="back()" class="time-nav-btn fa fa-arrow-left ng-scope"></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="foward()" class="time-nav-btn fa fa-arrow-right ng-scope"></i>
   </li>
 </ul>
diff --git a/src/ui/public/timepicker/kbn_global_timepicker.js b/src/ui/public/timepicker/kbn_global_timepicker.js
index b4323d26dbccc..b40792a68ea82 100644
--- a/src/ui/public/timepicker/kbn_global_timepicker.js
+++ b/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,73 @@ UiModules
       $rootScope.toggleRefresh = () => {
         timefilter.refreshInterval.pause = !timefilter.refreshInterval.pause;
       };
+
+      // functions for the time navigation buttons
+
+      // travel forward in time based on the interval between from and to
+      $scope.foward = function () {
+        var time = getFromTo();
+        var diff = time.to.diff(time.from);
+        var 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 () {
+        var time = getFromTo();
+        var diff = time.to.diff(time.from);
+        var origFrom = time.from.toISOString();
+
+        time.from.subtract(diff, 'milliseconds');
+        timefilter.time.to = origFrom;
+        timefilter.time.from = time.from.toISOString();
+      };
+
+      // zoom out, doubling the difference between start and end, keeping the same time range center
+      $scope.zoomOut = function () {
+        var time = getFromTo();
+        var from = time.from.unix() * 1000;
+        var to = time.to.unix() * 1000;
+
+        var 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 () {
+        var time = getFromTo();
+        var from = time.from.unix() * 1000;
+        var to = time.to.unix() * 1000;
+
+        var 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)
+          };
+        }
+      }
+
     },
   };
 });

From ad58aaab7752058128c33a0d61fbc305b07f8163 Mon Sep 17 00:00:00 2001
From: James Gowdy <jgowdy@elastic.co>
Date: Wed, 5 Oct 2016 15:05:03 +0100
Subject: [PATCH 2/4] changing vars to const

---
 .../timepicker/kbn_global_timepicker.js       | 28 +++++++++----------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/ui/public/timepicker/kbn_global_timepicker.js b/src/ui/public/timepicker/kbn_global_timepicker.js
index b40792a68ea82..63b783e1e6c2d 100644
--- a/src/ui/public/timepicker/kbn_global_timepicker.js
+++ b/src/ui/public/timepicker/kbn_global_timepicker.js
@@ -31,9 +31,9 @@ UiModules
 
       // travel forward in time based on the interval between from and to
       $scope.foward = function () {
-        var time = getFromTo();
-        var diff = time.to.diff(time.from);
-        var origTo = time.to.toISOString();
+        const time = getFromTo();
+        const diff = time.to.diff(time.from);
+        const origTo = time.to.toISOString();
 
         time.to.add(diff, 'milliseconds');
         timefilter.time.from = origTo;
@@ -42,9 +42,9 @@ UiModules
 
       // travel backwards in time based on the interval between from and to
       $scope.back = function () {
-        var time = getFromTo();
-        var diff = time.to.diff(time.from);
-        var origFrom = time.from.toISOString();
+        const time = getFromTo();
+        const diff = time.to.diff(time.from);
+        const origFrom = time.from.toISOString();
 
         time.from.subtract(diff, 'milliseconds');
         timefilter.time.to = origFrom;
@@ -53,11 +53,11 @@ UiModules
 
       // zoom out, doubling the difference between start and end, keeping the same time range center
       $scope.zoomOut = function () {
-        var time = getFromTo();
-        var from = time.from.unix() * 1000;
-        var to = time.to.unix() * 1000;
+        const time = getFromTo();
+        const from = time.from.unix() * 1000;
+        const to = time.to.unix() * 1000;
 
-        var diff = Math.floor((to - from) / 2);
+        const diff = Math.floor((to - from) / 2);
 
         timefilter.time.from = moment(from - diff).toISOString();
         timefilter.time.to = moment(to + diff).toISOString();
@@ -65,11 +65,11 @@ UiModules
 
       // zoom in, halving the difference between start and end, keeping the same time range center
       $scope.zoomIn = function () {
-        var time = getFromTo();
-        var from = time.from.unix() * 1000;
-        var to = time.to.unix() * 1000;
+        const time = getFromTo();
+        const from = time.from.unix() * 1000;
+        const to = time.to.unix() * 1000;
 
-        var diff = Math.floor((to - from) / 4);
+        const diff = Math.floor((to - from) / 4);
 
         timefilter.time.from = moment(from + diff).toISOString();
         timefilter.time.to = moment(to - diff).toISOString();

From 4e976af93048552cc123f111f6bf5ac69564a322 Mon Sep 17 00:00:00 2001
From: James Gowdy <jgowdy@elastic.co>
Date: Tue, 11 Oct 2016 13:23:38 +0100
Subject: [PATCH 3/4] Address some review points

---
 src/ui/public/styles/base.less                      | 4 +++-
 src/ui/public/timepicker/kbn_global_timepicker.html | 8 ++++----
 src/ui/public/timepicker/kbn_global_timepicker.js   | 4 +---
 3 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/ui/public/styles/base.less b/src/ui/public/styles/base.less
index 5a35b89d0e1e6..febe345d64adf 100644
--- a/src/ui/public/styles/base.less
+++ b/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;
@@ -233,7 +235,7 @@ a {
     border-radius: 0;
   }
 
-  i.time-nav-btn {
+  .time-nav-btn {
     padding-left: 10px;
     padding-right: 10px;
   }
diff --git a/src/ui/public/timepicker/kbn_global_timepicker.html b/src/ui/public/timepicker/kbn_global_timepicker.html
index 142782d78c311..0af5192b93eb6 100644
--- a/src/ui/public/timepicker/kbn_global_timepicker.html
+++ b/src/ui/public/timepicker/kbn_global_timepicker.html
@@ -20,9 +20,9 @@
   </li>
 
   <li>
-    <i ng-click="zoomIn()" class="time-nav-btn fa fa-search-plus ng-scope"></i>
-    <i ng-click="zoomOut()" class="time-nav-btn fa fa-search-minus ng-scope"></i>
-    <i ng-click="back()" class="time-nav-btn fa fa-arrow-left ng-scope"></i>
+    <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"
@@ -31,6 +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="foward()" class="time-nav-btn fa fa-arrow-right ng-scope"></i>
+    <i ng-click="foward()" class="time-nav-btn fa fa-arrow-right ng-scope" tooltip="Move forwards in time"></i>
   </li>
 </ul>
diff --git a/src/ui/public/timepicker/kbn_global_timepicker.js b/src/ui/public/timepicker/kbn_global_timepicker.js
index 63b783e1e6c2d..d05ec42a690d7 100644
--- a/src/ui/public/timepicker/kbn_global_timepicker.js
+++ b/src/ui/public/timepicker/kbn_global_timepicker.js
@@ -27,8 +27,6 @@ UiModules
         timefilter.refreshInterval.pause = !timefilter.refreshInterval.pause;
       };
 
-      // functions for the time navigation buttons
-
       // travel forward in time based on the interval between from and to
       $scope.foward = function () {
         const time = getFromTo();
@@ -47,8 +45,8 @@ UiModules
         const origFrom = time.from.toISOString();
 
         time.from.subtract(diff, 'milliseconds');
-        timefilter.time.to = origFrom;
         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

From efad64d9feb0c84f57d9c77bdfd937970d530c9a Mon Sep 17 00:00:00 2001
From: James Gowdy <jgowdy@elastic.co>
Date: Mon, 24 Oct 2016 11:19:34 +0100
Subject: [PATCH 4/4] fixing typo in function name

---
 src/ui/public/timepicker/kbn_global_timepicker.html | 2 +-
 src/ui/public/timepicker/kbn_global_timepicker.js   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/ui/public/timepicker/kbn_global_timepicker.html b/src/ui/public/timepicker/kbn_global_timepicker.html
index 0af5192b93eb6..5468ef09518bd 100644
--- a/src/ui/public/timepicker/kbn_global_timepicker.html
+++ b/src/ui/public/timepicker/kbn_global_timepicker.html
@@ -31,6 +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="foward()" class="time-nav-btn fa fa-arrow-right ng-scope" tooltip="Move forwards in time"></i>
+    <i ng-click="forward()" class="time-nav-btn fa fa-arrow-right ng-scope" tooltip="Move forwards in time"></i>
   </li>
 </ul>
diff --git a/src/ui/public/timepicker/kbn_global_timepicker.js b/src/ui/public/timepicker/kbn_global_timepicker.js
index d05ec42a690d7..a039914a169ec 100644
--- a/src/ui/public/timepicker/kbn_global_timepicker.js
+++ b/src/ui/public/timepicker/kbn_global_timepicker.js
@@ -28,7 +28,7 @@ UiModules
       };
 
       // travel forward in time based on the interval between from and to
-      $scope.foward = function () {
+      $scope.forward = function () {
         const time = getFromTo();
         const diff = time.to.diff(time.from);
         const origTo = time.to.toISOString();