Close timepicker when a filter/interval is selected (#9618)

* Close timepicker when a filter/interval is selected

* Copy absolute variables before sending

* Use & instead of = for directive binding

* Fix timepicker tests

* Fix timepicker tests and remove tests that no longer apply

src/ui/public/chrome/config/filter.html

@@ -3,5 +3,7 @@
   to="timefilter.time.to"
   mode="timefilter.time.mode"
   active-tab="'filter'"
-  interval="timefilter.refreshInterval">
+  interval="timefilter.refreshInterval"
+  on-filter-select="updateFilter(from, to)"
+  on-interval-select="updateInterval(interval)">
 </kbn-timepicker>

src/ui/public/chrome/config/interval.html

@@ -3,5 +3,7 @@
   to="timefilter.time.to"
   mode="timefilter.time.mode"
   active-tab="'interval'"
-  interval="timefilter.refreshInterval">
+  interval="timefilter.refreshInterval"
+  on-filter-select="updateFilter(from, to)"
+  on-interval-select="updateInterval(interval)">
 </kbn-timepicker>

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

@@ -46,6 +46,8 @@ const init = function () {
       }
     };
     $parentScope.timefilter = timefilter;
+    $parentScope.updateInterval = sinon.spy();
+    $parentScope.updateFilter = sinon.spy();
 
     // Create the element
     $elem = angular.element(
@@ -54,7 +56,9 @@ const init = function () {
       ' to="timefilter.time.to"' +
       ' mode="timefilter.time.mode"' +
       ' active-tab="timefilter.timepickerActiveTab"' +
-      ' interval="timefilter.refreshInterval">' +
+      ' interval="timefilter.refreshInterval"' +
+      ' on-interval-select="updateInterval(interval)"' +
+      ' on-filter-select="updateFilter(from, to)">' +
       '</kbn-timepicker>'
     );
 
@@ -99,64 +103,34 @@ describe('timepicker directive', function () {
       done();
     });
 
-    it('should have a $scope.setRefreshInterval() that sets interval variable', function (done) {
+    it('should have a $scope.setRefreshInterval() that calls handler', function (done) {
       $scope.setRefreshInterval({ value : 10000  });
-      expect($scope.interval).to.have.property('value', 10000);
-      done();
-    });
-
-    it('should set the interval on the courier', function (done) {
-      // Change refresh interval and digest
-      $scope.setRefreshInterval({ value : 1000 });
-      $elem.scope().$digest();
-      expect($courier.searchLooper.loopInterval()).to.be(1000);
-      done();
-    });
-
-    it('should disable the looper when paused', function (done) {
-      $scope.setRefreshInterval({ value : 1000, pause: true });
-      $elem.scope().$digest();
-      expect($courier.searchLooper.loopInterval()).to.be(0);
-      expect($scope.interval.value).to.be(1000);
-      done();
-    });
-
-    it('but keep interval.value set', function (done) {
-      $scope.setRefreshInterval({ value : 1000, pause: true });
-      $elem.scope().$digest();
-      expect($scope.interval.value).to.be(1000);
+      sinon.assert.calledOnce($parentScope.updateInterval);
+      expect($parentScope.updateInterval.firstCall.args[0]).to.have.property('value', 10000);
       done();
     });
 
     it('should unpause when setRefreshInterval is called without pause:true', function (done) {
       $scope.setRefreshInterval({ value : 1000, pause: true });
-      expect($scope.interval.pause).to.be(true);
+      expect($parentScope.updateInterval.getCall(0).args[0]).to.have.property('pause', true);
 
       $scope.setRefreshInterval({ value : 1000, pause: false });
-      expect($scope.interval.pause).to.be(false);
+      expect($parentScope.updateInterval.getCall(1).args[0]).to.have.property('pause', false);
 
       $scope.setRefreshInterval({ value : 1000 });
-      expect($scope.interval.pause).to.be(false);
+      expect($parentScope.updateInterval.getCall(2).args[0]).to.have.property('pause', false);
 
       done();
     });
 
 
     it('should highlight the current active interval', function (done) {
-      $scope.setRefreshInterval({ value: 300000 });
+      $scope.interval = { value: 300000 };
       $elem.scope().$digest();
       expect($elem.find('.refresh-interval-active').length).to.be(1);
       expect($elem.find('.refresh-interval-active').text().trim()).to.be('5 minutes');
       done();
     });
-
-    it('should default the interval on the courier with incorrect values', function (done) {
-      // Change refresh interval and digest
-      $scope.setRefreshInterval();
-      $elem.scope().$digest();
-      expect($courier.searchLooper.loopInterval()).to.be(0);
-      done();
-    });
   });
 
   describe('mode setting', function () {
@@ -198,10 +172,11 @@ describe('timepicker directive', function () {
       done();
     });
 
-    it('should have a $scope.setQuick() that sets the to and from variables to strings', function (done) {
+    it('should have a $scope.setQuick() that calls handler', function (done) {
       $scope.setQuick('now', 'now');
-      expect($scope.from).to.be('now');
-      expect($scope.to).to.be('now');
+      sinon.assert.calledOnce($parentScope.updateFilter);
+      expect($parentScope.updateFilter.firstCall.args[0]).to.be('now');
+      expect($parentScope.updateFilter.firstCall.args[1]).to.be('now');
       done();
     });
   });
@@ -312,24 +287,25 @@ describe('timepicker directive', function () {
       $scope.relative.count = 1;
       $scope.relative.unit = 's';
       $scope.applyRelative();
-      expect($scope.from).to.be('now-1s');
+      sinon.assert.calledOnce($parentScope.updateFilter);
+      expect($parentScope.updateFilter.getCall(0).args[0]).to.be('now-1s');
 
       $scope.relative.count = 2;
       $scope.relative.unit = 'm';
       $scope.applyRelative();
-      expect($scope.from).to.be('now-2m');
+      expect($parentScope.updateFilter.getCall(1).args[0]).to.be('now-2m');
 
       $scope.relative.count = 3;
       $scope.relative.unit = 'h';
       $scope.applyRelative();
-      expect($scope.from).to.be('now-3h');
+      expect($parentScope.updateFilter.getCall(2).args[0]).to.be('now-3h');
 
       // Enable rounding
       $scope.relative.round = true;
       $scope.relative.count = 7;
       $scope.relative.unit = 'd';
       $scope.applyRelative();
-      expect($scope.from).to.be('now-7d/d');
+      expect($parentScope.updateFilter.getCall(3).args[0]).to.be('now-7d/d');
 
       done();
     });
@@ -398,16 +374,6 @@ describe('timepicker directive', function () {
       done();
     });
 
-    it('should parse the time of scope.from and scope.to to set its own variables', function (done) {
-      $scope.setQuick('now-30m', 'now');
-      $scope.setMode('absolute');
-      $scope.$digest();
-
-      expect($scope.absolute.from.valueOf()).to.be(moment().subtract(30, 'minutes').valueOf());
-      expect($scope.absolute.to.valueOf()).to.be(moment().valueOf());
-      done();
-    });
-
     it('should update its own variables if timefilter time is updated', function (done) {
       $scope.setMode('absolute');
       $scope.$digest();
@@ -438,9 +404,8 @@ describe('timepicker directive', function () {
     });
 
     it('should only copy its input to scope.from and scope.to when scope.applyAbsolute() is called', function (done) {
-      $scope.setQuick('now-30m', 'now');
-      expect($scope.from).to.be('now-30m');
-      expect($scope.to).to.be('now');
+      $scope.from = 'now-30m';
+      $scope.to = 'now';
 
       $scope.absolute.from = moment('2012-02-01');
       $scope.absolute.to = moment('2012-02-11');
@@ -448,8 +413,8 @@ describe('timepicker directive', function () {
       expect($scope.to).to.be('now');
 
       $scope.applyAbsolute();
-      expect($scope.from.valueOf()).to.be(moment('2012-02-01').valueOf());
-      expect($scope.to.valueOf()).to.be(moment('2012-02-11').valueOf());
+      expect($parentScope.updateFilter.firstCall.args[0]).to.eql(moment('2012-02-01'));
+      expect($parentScope.updateFilter.firstCall.args[1]).to.eql(moment('2012-02-11'));
 
       $scope.$digest();
 

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

@@ -5,11 +5,13 @@ import $ from 'jquery';
 
 describe('kbnGlobalTimepicker', function () {
   let compile;
+
   beforeEach(() => {
     ngMock.module('kibana');
     ngMock.inject(($compile, $rootScope) => {
       compile = () => {
         const $el = $('<kbn-global-timepicker></kbn-global-timepicker>');
+        $el.data('$kbnTopNavController', {}); // Mock the kbnTopNav
         $rootScope.$apply();
         $compile($el)($rootScope);
         return $el;

src/ui/public/timepicker/kbn_global_timepicker.js

@@ -19,7 +19,8 @@ UiModules
   return {
     template: toggleHtml,
     replace: true,
-    link: ($scope) => {
+    require: '^kbnTopNav',
+    link: ($scope, element, attributes, kbnTopNav) => {
       listenForUpdates($rootScope);
 
       $rootScope.timefilter = timefilter;
@@ -34,6 +35,17 @@ UiModules
       $scope.back = function () {
         assign(timefilter.time, timeNavigation.stepBackward(timefilter.getBounds()));
       };
+
+      $scope.updateFilter = function (from, to) {
+        timefilter.time.from = from;
+        timefilter.time.to = to;
+        kbnTopNav.close('filter');
+      };
+
+      $scope.updateInterval = function (interval) {
+        timefilter.refreshInterval = interval;
+        kbnTopNav.close('interval');
+      };
     },
   };
 });

src/ui/public/timepicker/timepicker.js

@@ -24,7 +24,9 @@ module.directive('kbnTimepicker', function (quickRanges, timeUnits, refreshInter
       to: '=',
       mode: '=',
       interval: '=',
-      activeTab: '='
+      activeTab: '=',
+      onFilterSelect: '&',
+      onIntervalSelect: '&'
     },
     template: html,
     controller: function ($scope) {
@@ -124,8 +126,7 @@ module.directive('kbnTimepicker', function (quickRanges, timeUnits, refreshInter
       };
 
       $scope.setQuick = function (from, to) {
-        $scope.from = from;
-        $scope.to = to;
+        $scope.onFilterSelect({ from, to });
       };
 
       $scope.setToNow = function () {
@@ -139,8 +140,10 @@ module.directive('kbnTimepicker', function (quickRanges, timeUnits, refreshInter
       };
 
       $scope.applyRelative = function () {
-        $scope.from = getRelativeString();
-        $scope.to = 'now';
+        $scope.onFilterSelect({
+          from: getRelativeString(),
+          to: 'now'
+        });
       };
 
       function getRelativeString() {
@@ -148,8 +151,10 @@ module.directive('kbnTimepicker', function (quickRanges, timeUnits, refreshInter
       }
 
       $scope.applyAbsolute = function () {
-        $scope.from = moment($scope.absolute.from);
-        $scope.to = moment($scope.absolute.to);
+        $scope.onFilterSelect({
+          from: moment($scope.absolute.from),
+          to: moment($scope.absolute.to)
+        });
       };
 
       $scope.setRefreshInterval = function (interval) {
@@ -159,7 +164,7 @@ module.directive('kbnTimepicker', function (quickRanges, timeUnits, refreshInter
 
         notify.log('after: ' + interval.pause);
 
-        $scope.interval = interval;
+        $scope.onIntervalSelect({ interval });
       };
 
       $scope.setMode($scope.mode);

test/support/page_objects/header_page.js

@@ -102,9 +102,6 @@ export default class HeaderPage {
     })
     .then(() => {
       return this.isGlobalLoadingIndicatorHidden();
-    })
-    .then(() => {
-      return this.clickTimepicker();
     });
   }