Switch to absolute mode when using step forward/backward buttons (#9906)

* Switch to absolute mode when using timepicker step forward/backward buttons

* Instead of merging state, replace entire time object

* Uncomment time navigation buttons and fix pretty duration

src/ui/public/directives/pretty_duration.js

@@ -51,8 +51,8 @@ module.directive('prettyDuration', function (config, quickRanges, timeUnits) {
       function cantLookup() {
         const display = {};
         _.each(['from', 'to'], function (time) {
-          if (moment.isMoment($scope[time])) {
-            display[time] = $scope[time].format(dateFormat);
+          if (moment($scope[time]).isValid()) {
+            display[time] = moment($scope[time]).format(dateFormat);
           } else {
             if ($scope[time] === 'now') {
               display[time] = 'now';
@@ -71,4 +71,3 @@ module.directive('prettyDuration', function (config, quickRanges, timeUnits) {
     }
   };
 });
-

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

@@ -13,26 +13,30 @@ describe('timeNavigation', () => {
   });
 
   it('should step forward by the amount of the duration', () => {
-    const { from, to } = timeNavigation.stepForward(bounds);
+    const { from, to, mode } = timeNavigation.stepForward(bounds);
     expect(from).to.be('2016-01-01T00:15:00.000Z');
     expect(to).to.be('2016-01-01T00:30:00.000Z');
+    expect(mode).to.be('absolute');
   });
 
   it('should step backward by the amount of the duration', () => {
-    const { from, to } = timeNavigation.stepBackward(bounds);
+    const { from, to, mode } = timeNavigation.stepBackward(bounds);
     expect(from).to.be('2015-12-31T23:45:00.000Z');
     expect(to).to.be('2016-01-01T00:00:00.000Z');
+    expect(mode).to.be('absolute');
   });
 
   it('should zoom out to be double the original duration', () => {
-    const { from, to } = timeNavigation.zoomOut(bounds);
+    const { from, to, mode } = timeNavigation.zoomOut(bounds);
     expect(from).to.be('2015-12-31T23:52:30.000Z');
     expect(to).to.be('2016-01-01T00:22:30.000Z');
+    expect(mode).to.be('absolute');
   });
 
   it('should zoom in to be half the original duration', () => {
-    const { from, to } = timeNavigation.zoomIn(bounds);
+    const { from, to, mode } = timeNavigation.zoomIn(bounds);
     expect(from).to.be('2016-01-01T00:03:45.000Z');
     expect(to).to.be('2016-01-01T00:11:15.000Z');
+    expect(mode).to.be('absolute');
   });
 });

src/ui/public/timepicker/kbn_global_timepicker.html

@@ -21,9 +21,9 @@
     </span>
   </div>
 
-  <!-- <div class="kuiLocalMenuItem" ng-click="back()">
+  <div class="kuiLocalMenuItem" ng-click="back()">
     <span class="fa fa-chevron-left ng-scope" tooltip="Move backwards in time"></span>
-  </div> -->
+  </div>
 
   <div
     data-test-subj="globalTimepickerButton"
@@ -40,7 +40,7 @@
     ></pretty-duration>
   </div>
 
-  <!-- <div class="kuiLocalMenuItem" ng-click="forward()">
+  <div class="kuiLocalMenuItem" ng-click="forward()">
     <span class="fa fa-chevron-right ng-scope" tooltip="Move forwards in time"></span>
-  </div> -->
+  </div>
 </div>

src/ui/public/timepicker/kbn_global_timepicker.js

@@ -29,11 +29,11 @@ UiModules
       };
 
       $scope.forward = function () {
-        assign(timefilter.time, timeNavigation.stepForward(timefilter.getBounds()));
+        timefilter.time = timeNavigation.stepForward(timefilter.getBounds());
       };
 
       $scope.back = function () {
-        assign(timefilter.time, timeNavigation.stepBackward(timefilter.getBounds()));
+        timefilter.time = timeNavigation.stepBackward(timefilter.getBounds());
       };
 
       $scope.updateFilter = function (from, to) {

src/ui/public/timepicker/time_navigation.js

@@ -6,7 +6,8 @@ export default {
     const diff = max.diff(min);
     return {
       from: max.toISOString(),
-      to: moment(max).add(diff).toISOString()
+      to: moment(max).add(diff).toISOString(),
+      mode: 'absolute'
     };
   },
 
@@ -15,7 +16,8 @@ export default {
     const diff = max.diff(min);
     return {
       from: moment(min).subtract(diff).toISOString(),
-      to: min.toISOString()
+      to: min.toISOString(),
+      mode: 'absolute'
     };
   },
 
@@ -24,7 +26,8 @@ export default {
     const diff = max.diff(min);
     return {
       from: moment(min).subtract(diff / 2).toISOString(),
-      to: moment(max).add(diff / 2).toISOString()
+      to: moment(max).add(diff / 2).toISOString(),
+      mode: 'absolute'
     };
   },
 
@@ -33,7 +36,8 @@ export default {
     const diff = max.diff(min);
     return {
       from: moment(min).add(diff / 4).toISOString(),
-      to: moment(max).subtract(diff / 4).toISOString()
+      to: moment(max).subtract(diff / 4).toISOString(),
+      mode: 'absolute'
     };
   }
 };