Automatically close timepicker upon selection

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

@@ -1,7 +1,6 @@
 <kbn-timepicker
-  from="timefilter.time.from"
-  to="timefilter.time.to"
-  mode="timefilter.time.mode"
+  time="timefilter.time"
   active-tab="'filter'"
-  interval="timefilter.refreshInterval">
+  interval="timefilter.refreshInterval"
+  on-select="kbnTopNav.close('filter')">
 </kbn-timepicker>

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

@@ -1,7 +1,6 @@
 <kbn-timepicker
-  from="timefilter.time.from"
-  to="timefilter.time.to"
-  mode="timefilter.time.mode"
+  time="timefilter.time"
   active-tab="'interval'"
-  interval="timefilter.refreshInterval">
+  interval="timefilter.refreshInterval"
+  on-select="kbnTopNav.close('interval')">
 </kbn-timepicker>

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

@@ -50,9 +50,7 @@ const init = function () {
     // Create the element
     $elem = angular.element(
       '<kbn-timepicker' +
-      ' from="timefilter.time.from"' +
-      ' to="timefilter.time.to"' +
-      ' mode="timefilter.time.mode"' +
+      ' time="timefilter.time"' +
       ' active-tab="timefilter.timepickerActiveTab"' +
       ' interval="timefilter.refreshInterval">' +
       '</kbn-timepicker>'
@@ -166,7 +164,7 @@ describe('timepicker directive', function () {
     });
 
     it('should be in quick mode by default', function (done) {
-      expect($scope.mode).to.be('quick');
+      expect($scope.time.mode).to.be('quick');
       done();
     });
 
@@ -200,8 +198,8 @@ describe('timepicker directive', function () {
 
     it('should have a $scope.setQuick() that sets the to and from variables to strings', function (done) {
       $scope.setQuick('now', 'now');
-      expect($scope.from).to.be('now');
-      expect($scope.to).to.be('now');
+      expect($scope.time.from).to.be('now');
+      expect($scope.time.to).to.be('now');
       done();
     });
   });
@@ -312,24 +310,24 @@ describe('timepicker directive', function () {
       $scope.relative.count = 1;
       $scope.relative.unit = 's';
       $scope.applyRelative();
-      expect($scope.from).to.be('now-1s');
+      expect($scope.time.from).to.be('now-1s');
 
       $scope.relative.count = 2;
       $scope.relative.unit = 'm';
       $scope.applyRelative();
-      expect($scope.from).to.be('now-2m');
+      expect($scope.time.from).to.be('now-2m');
 
       $scope.relative.count = 3;
       $scope.relative.unit = 'h';
       $scope.applyRelative();
-      expect($scope.from).to.be('now-3h');
+      expect($scope.time.from).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($scope.time.from).to.be('now-7d/d');
 
       done();
     });
@@ -388,8 +386,8 @@ describe('timepicker directive', function () {
     });
 
     it('should present a timeframe of 15 minutes ago to now if scope.from and scope.to are not set', function (done) {
-      delete $scope.from;
-      delete $scope.to;
+      delete $scope.time.from;
+      delete $scope.time.to;
       $scope.setMode('absolute');
       $scope.$digest();
 
@@ -439,17 +437,17 @@ 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');
+      expect($scope.time.from).to.be('now-30m');
+      expect($scope.time.to).to.be('now');
 
       $scope.absolute.from = moment('2012-02-01');
       $scope.absolute.to = moment('2012-02-11');
-      expect($scope.from).to.be('now-30m');
-      expect($scope.to).to.be('now');
+      expect($scope.time.from).to.be('now-30m');
+      expect($scope.time.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($scope.time.from.valueOf()).to.be(moment('2012-02-01').valueOf());
+      expect($scope.time.to.valueOf()).to.be(moment('2012-02-11').valueOf());
 
       $scope.$digest();
 

src/ui/public/timepicker/timepicker.html

@@ -8,20 +8,20 @@
       <div class="row">
         <div class="col-md-2">
           <ul class="nav nav-pills nav-stacked kbn-timepicker-modes">
-            <li ng-class="{active: mode === 'quick' }">
+            <li ng-class="{active: time.mode === 'quick' }">
               <a ng-click="setMode('quick')">quick</a>
             </li>
-            <li ng-class="{active: mode === 'relative' }">
+            <li ng-class="{active: time.mode === 'relative' }">
               <a ng-click="setMode('relative')">relative</a>
             </li>
-            <li ng-class="{active: mode === 'absolute' }">
+            <li ng-class="{active: time.mode === 'absolute' }">
               <a ng-click="setMode('absolute')">absolute</a>
             </li>
           </ul>
         </div>
 
         <div class="col-md-10">
-          <div ng-switch on="mode" class="container-fluid">
+          <div ng-switch on="time.mode" class="container-fluid">
             <div ng-switch-when="quick">
 
               <div ng-repeat="list in quickLists" class="kbn-timepicker-section">

src/ui/public/timepicker/timepicker.js

@@ -20,19 +20,18 @@ module.directive('kbnTimepicker', function (quickRanges, timeUnits, refreshInter
   return {
     restrict: 'E',
     scope: {
-      from: '=',
-      to: '=',
-      mode: '=',
+      time: '=',
       interval: '=',
-      activeTab: '='
+      activeTab: '=',
+      onSelect: '&'
     },
     template: html,
     controller: function ($scope) {
       $scope.format = 'MMMM Do YYYY, HH:mm:ss.SSS';
       $scope.modes = ['quick', 'relative', 'absolute'];
       $scope.activeTab = $scope.activeTab || 'filter';
 
-      if (_.isUndefined($scope.mode)) $scope.mode = 'quick';
+      if (_.isUndefined($scope.time.mode)) $scope.time.mode = 'quick';
 
       $scope.quickLists = _(quickRanges).groupBy('section').values().value();
       $scope.refreshLists = _(refreshIntervals).groupBy('section').values().value();
@@ -61,14 +60,14 @@ module.directive('kbnTimepicker', function (quickRanges, timeUnits, refreshInter
         { text: 'Years ago', value: 'y' },
       ];
 
-      $scope.$watch('from', function (date) {
-        if (moment.isMoment(date) && $scope.mode === 'absolute') {
+      $scope.$watch('time.from', function (date) {
+        if (moment.isMoment(date) && $scope.time.mode === 'absolute') {
           $scope.absolute.from = date;
         }
       });
 
-      $scope.$watch('to', function (date) {
-        if (moment.isMoment(date) && $scope.mode === 'absolute') {
+      $scope.$watch('time.to', function (date) {
+        if (moment.isMoment(date) && $scope.time.mode === 'absolute') {
           $scope.absolute.to = date;
         }
       });
@@ -86,20 +85,20 @@ module.directive('kbnTimepicker', function (quickRanges, timeUnits, refreshInter
           case 'quick':
             break;
           case 'relative':
-            const fromParts = $scope.from.toString().split('-');
+            const fromParts = $scope.time.from.toString().split('-');
             let relativeParts = [];
 
             // Try to parse the relative time, if we can't use moment duration to guestimate
-            if ($scope.to.toString() === 'now' && fromParts[0] === 'now' && fromParts[1]) {
+            if ($scope.time.to.toString() === 'now' && fromParts[0] === 'now' && fromParts[1]) {
               relativeParts = fromParts[1].match(/([0-9]+)([smhdwMy]).*/);
             }
             if (relativeParts[1] && relativeParts[2]) {
               $scope.relative.count = parseInt(relativeParts[1], 10);
               $scope.relative.unit = relativeParts[2];
             } else {
-              const duration = moment.duration(moment().diff(dateMath.parse($scope.from)));
+              const duration = moment.duration(moment().diff(dateMath.parse($scope.time.from)));
               const units = _.pluck(_.clone($scope.relativeOptions).reverse(), 'value');
-              if ($scope.from.toString().split('/')[1]) $scope.relative.round = true;
+              if ($scope.time.from.toString().split('/')[1]) $scope.relative.round = true;
               for (let i = 0; i < units.length; i++) {
                 const as = duration.as(units[i]);
                 if (as > 1) {
@@ -110,22 +109,23 @@ module.directive('kbnTimepicker', function (quickRanges, timeUnits, refreshInter
               }
             }
 
-            if ($scope.from.toString().split('/')[1]) $scope.relative.round = true;
+            if ($scope.time.from.toString().split('/')[1]) $scope.relative.round = true;
             $scope.formatRelative();
 
             break;
           case 'absolute':
-            $scope.absolute.from = dateMath.parse($scope.from || moment().subtract(15, 'minutes'));
-            $scope.absolute.to = dateMath.parse($scope.to || moment(), true);
+            $scope.absolute.from = dateMath.parse($scope.time.from || moment().subtract(15, 'minutes'));
+            $scope.absolute.to = dateMath.parse($scope.time.to || moment(), true);
             break;
         }
 
-        $scope.mode = thisMode;
+        $scope.time.mode = thisMode;
       };
 
       $scope.setQuick = function (from, to) {
-        $scope.from = from;
-        $scope.to = to;
+        $scope.time.from = from;
+        $scope.time.to = to;
+        $scope.onSelect();
       };
 
       $scope.setToNow = function () {
@@ -139,17 +139,19 @@ module.directive('kbnTimepicker', function (quickRanges, timeUnits, refreshInter
       };
 
       $scope.applyRelative = function () {
-        $scope.from = getRelativeString();
-        $scope.to = 'now';
+        $scope.time.from = getRelativeString();
+        $scope.time.to = 'now';
+        $scope.onSelect();
       };
 
       function getRelativeString() {
         return 'now-' + $scope.relative.count + $scope.relative.unit + ($scope.relative.round ? '/' + $scope.relative.unit : '');
       }
 
       $scope.applyAbsolute = function () {
-        $scope.from = moment($scope.absolute.from);
-        $scope.to = moment($scope.absolute.to);
+        $scope.time.from = moment($scope.absolute.from);
+        $scope.time.to = moment($scope.absolute.to);
+        $scope.onSelect();
       };
 
       $scope.setRefreshInterval = function (interval) {
@@ -160,9 +162,10 @@ module.directive('kbnTimepicker', function (quickRanges, timeUnits, refreshInter
         notify.log('after: ' + interval.pause);
 
         $scope.interval = interval;
+        $scope.onSelect();
       };
 
-      $scope.setMode($scope.mode);
+      $scope.setMode($scope.time.mode);
     }
   };
 });

test/support/page_objects/header_page.js

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