From 33d23d0241d5b028242b1384174a91e7008e4557 Mon Sep 17 00:00:00 2001 From: Lukas Olson Date: Fri, 9 Dec 2016 15:41:33 -0700 Subject: [PATCH] Add time navigation buttons (#9253) * Add time navigation buttons * changing vars to const * Address some review points * fixing typo in function name * Remove unused variables * [timepicker] Simplify zoom in/out and forward/back and remove getter that had side effects * [timepicker] Move time navigation calculations to own class and write test * [timepicker] Remove unused styling and classes * [timepicker] Change from i to span, add more explanatory comments * [timepicker] Remove unused variable * Remove zoom in/out buttons from timepicker nav * Change step forward/back timepicker nav button icons --- src/ui/public/styles/base.less | 17 -------- .../timepicker/__tests__/time_navigation.js | 38 ++++++++++++++++++ .../timepicker/kbn_global_timepicker.html | 14 +++++-- .../timepicker/kbn_global_timepicker.js | 18 ++++++--- src/ui/public/timepicker/time_navigation.js | 39 +++++++++++++++++++ 5 files changed, 101 insertions(+), 25 deletions(-) create mode 100644 src/ui/public/timepicker/__tests__/time_navigation.js create mode 100644 src/ui/public/timepicker/time_navigation.js diff --git a/src/ui/public/styles/base.less b/src/ui/public/styles/base.less index 9c3ac595de46b..61d66a068ab09 100644 --- a/src/ui/public/styles/base.less +++ b/src/ui/public/styles/base.less @@ -200,23 +200,6 @@ a { .button-variant(@navbar-default-color; @navbar-default-bg; @navbar-default-border); } -.navbar-timepicker { - > li > a { - padding-left: 7px !important; - padding-right: 7px !important; - } - - .fa { - font-size: 16px; - vertical-align: middle; - } - - button { - background-color: transparent; - border-radius: 0; - } -} - .navbar-timepicker-time-desc > .fa-clock-o { padding-right: 5px; } diff --git a/src/ui/public/timepicker/__tests__/time_navigation.js b/src/ui/public/timepicker/__tests__/time_navigation.js new file mode 100644 index 0000000000000..6cebf5e182580 --- /dev/null +++ b/src/ui/public/timepicker/__tests__/time_navigation.js @@ -0,0 +1,38 @@ +import expect from 'expect.js'; +import moment from 'moment'; +import timeNavigation from '../time_navigation'; + +describe('timeNavigation', () => { + let bounds; + + beforeEach(() => { + bounds = { + min: moment('2016-01-01T00:00:00.000Z'), + max: moment('2016-01-01T00:15:00.000Z') + }; + }); + + it('should step forward by the amount of the duration', () => { + const {from, to} = timeNavigation.stepForward(bounds); + expect(from).to.be('2016-01-01T00:15:00.000Z'); + expect(to).to.be('2016-01-01T00:30:00.000Z'); + }); + + it('should step backward by the amount of the duration', () => { + const {from, to} = timeNavigation.stepBackward(bounds); + expect(from).to.be('2015-12-31T23:45:00.000Z'); + expect(to).to.be('2016-01-01T00:00:00.000Z'); + }); + + it('should zoom out to be double the original duration', () => { + const {from, to} = timeNavigation.zoomOut(bounds); + expect(from).to.be('2015-12-31T23:52:30.000Z'); + expect(to).to.be('2016-01-01T00:22:30.000Z'); + }); + + it('should zoom in to be half the original duration', () => { + const {from, to} = timeNavigation.zoomIn(bounds); + expect(from).to.be('2016-01-01T00:03:45.000Z'); + expect(to).to.be('2016-01-01T00:11:15.000Z'); + }); +}); diff --git a/src/ui/public/timepicker/kbn_global_timepicker.html b/src/ui/public/timepicker/kbn_global_timepicker.html index 3e280b3b2c743..b7d8b684d9000 100644 --- a/src/ui/public/timepicker/kbn_global_timepicker.html +++ b/src/ui/public/timepicker/kbn_global_timepicker.html @@ -4,7 +4,7 @@ ng-click="toggleRefresh()" ng-show="timefilter.refreshInterval.value > 0" > - +
- Auto-refresh + Auto-refresh {{timefilter.refreshInterval.display}}
+
+ +
+ + +
+ +
diff --git a/src/ui/public/timepicker/kbn_global_timepicker.js b/src/ui/public/timepicker/kbn_global_timepicker.js index 0656f3258e20d..7b6b62173095f 100644 --- a/src/ui/public/timepicker/kbn_global_timepicker.js +++ b/src/ui/public/timepicker/kbn_global_timepicker.js @@ -1,15 +1,15 @@ import moment from 'moment'; import UiModules from 'ui/modules'; -import chromeNavControlsRegistry from 'ui/registry/chrome_nav_controls'; -import { once, clone } from 'lodash'; +import { once, clone, assign } from 'lodash'; import toggleHtml from './kbn_global_timepicker.html'; +import timeNavigation from './time_navigation'; UiModules .get('kibana') -.directive('kbnGlobalTimepicker', (timefilter, globalState, $rootScope, config) => { +.directive('kbnGlobalTimepicker', (timefilter, globalState, $rootScope) => { const listenForUpdates = once($scope => { - $scope.$listen(timefilter, 'update', (newVal, oldVal) => { + $scope.$listen(timefilter, 'update', () => { globalState.time = clone(timefilter.time); globalState.refreshInterval = clone(timefilter.refreshInterval); globalState.save(); @@ -19,13 +19,21 @@ UiModules return { template: toggleHtml, replace: true, - link: ($scope, $el, attrs) => { + link: ($scope) => { listenForUpdates($rootScope); $rootScope.timefilter = timefilter; $rootScope.toggleRefresh = () => { timefilter.refreshInterval.pause = !timefilter.refreshInterval.pause; }; + + $scope.forward = function () { + assign(timefilter.time, timeNavigation.stepForward(timefilter.getBounds())); + }; + + $scope.back = function () { + assign(timefilter.time, timeNavigation.stepBackward(timefilter.getBounds())); + }; }, }; }); diff --git a/src/ui/public/timepicker/time_navigation.js b/src/ui/public/timepicker/time_navigation.js new file mode 100644 index 0000000000000..0e1b933989fc1 --- /dev/null +++ b/src/ui/public/timepicker/time_navigation.js @@ -0,0 +1,39 @@ +import moment from 'moment'; + +export default { + // travel forward in time based on the interval between from and to + stepForward({min, max}) { + const diff = max.diff(min); + return { + from: max.toISOString(), + to: moment(max).add(diff).toISOString() + }; + }, + + // travel backwards in time based on the interval between from and to + stepBackward({min, max}) { + const diff = max.diff(min); + return { + from: moment(min).subtract(diff).toISOString(), + to: min.toISOString() + }; + }, + + // zoom out, doubling the difference between start and end, keeping the same time range center + zoomOut({min, max}) { + const diff = max.diff(min); + return { + from: moment(min).subtract(diff / 2).toISOString(), + to: moment(max).add(diff / 2).toISOString() + }; + }, + + // zoom in, halving the difference between start and end, keeping the same time range center + zoomIn({min, max}) { + const diff = max.diff(min); + return { + from: moment(min).add(diff / 4).toISOString(), + to: moment(max).subtract(diff / 4).toISOString() + }; + } +};