From 7e1932f935b1292964d3eefcf372e0788a100f6b Mon Sep 17 00:00:00 2001 From: James Gowdy Date: Mon, 3 Oct 2016 18:19:42 +0100 Subject: [PATCH 01/12] 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 @@
  • + + + +
    • 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 Date: Wed, 5 Oct 2016 15:05:03 +0100 Subject: [PATCH 02/12] 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 Date: Tue, 11 Oct 2016 13:23:38 +0100 Subject: [PATCH 03/12] 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 @@
  • - - - + + + - +
    • 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 Date: Mon, 24 Oct 2016 11:19:34 +0100 Subject: [PATCH 04/12] 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 @@ - + 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(); From 2299d7bc0e97c1d0dd8280911b6b1ceb98c21ad2 Mon Sep 17 00:00:00 2001 From: Lukas Olson Date: Tue, 29 Nov 2016 09:39:43 -0700 Subject: [PATCH 05/12] Remove unused variables --- src/ui/public/timepicker/kbn_global_timepicker.js | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/src/ui/public/timepicker/kbn_global_timepicker.js b/src/ui/public/timepicker/kbn_global_timepicker.js index f1d5f58b82d1f..171180c22e919 100644 --- a/src/ui/public/timepicker/kbn_global_timepicker.js +++ b/src/ui/public/timepicker/kbn_global_timepicker.js @@ -1,6 +1,5 @@ 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'; @@ -8,9 +7,9 @@ import toggleHtml from './kbn_global_timepicker.html'; 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(); @@ -20,7 +19,7 @@ UiModules return { template: toggleHtml, replace: true, - link: ($scope, $el, attrs) => { + link: ($scope) => { listenForUpdates($rootScope); $rootScope.timefilter = timefilter; From aacde2b7054ba53448cacdc56d6590a6a50e666d Mon Sep 17 00:00:00 2001 From: Lukas Olson Date: Tue, 29 Nov 2016 10:16:59 -0700 Subject: [PATCH 06/12] [timepicker] Simplify zoom in/out and forward/back and remove getter that had side effects --- .../timepicker/kbn_global_timepicker.js | 65 +++++-------------- 1 file changed, 16 insertions(+), 49 deletions(-) diff --git a/src/ui/public/timepicker/kbn_global_timepicker.js b/src/ui/public/timepicker/kbn_global_timepicker.js index 171180c22e919..011a53ffe002d 100644 --- a/src/ui/public/timepicker/kbn_global_timepicker.js +++ b/src/ui/public/timepicker/kbn_global_timepicker.js @@ -29,68 +29,35 @@ UiModules // travel forward in time based on the interval between from and to $scope.forward = function () { - const time = getFromTo(); - const diff = time.to.diff(time.from); - const origTo = time.to.toISOString(); - - time.to.add(diff, 'milliseconds'); - timefilter.time.from = origTo; - timefilter.time.to = time.to.toISOString(); + const time = timefilter.getBounds(); + const diff = time.max.diff(time.min); + timefilter.time.from = time.max.toISOString(); + timefilter.time.to = time.max.add(diff, 'milliseconds').toISOString(); }; // travel backwards in time based on the interval between from and to $scope.back = function () { - const time = getFromTo(); - const diff = time.to.diff(time.from); - const origFrom = time.from.toISOString(); - - time.from.subtract(diff, 'milliseconds'); - timefilter.time.from = time.from.toISOString(); - timefilter.time.to = origFrom; + const time = timefilter.getBounds(); + const diff = time.max.diff(time.min); + timefilter.time.to = time.min.toISOString(); + timefilter.time.from = time.min.subtract(diff, 'milliseconds').toISOString(); }; // zoom out, doubling the difference between start and end, keeping the same time range center $scope.zoomOut = function () { - const time = getFromTo(); - const from = time.from.unix() * 1000; - const to = time.to.unix() * 1000; - - const diff = Math.floor((to - from) / 2); - - timefilter.time.from = moment(from - diff).toISOString(); - timefilter.time.to = moment(to + diff).toISOString(); + const time = timefilter.getBounds(); + const diff = time.max.diff(time.min); + timefilter.time.from = time.min.subtract(diff / 2, 'milliseconds').toISOString(); + timefilter.time.to = time.max.add(diff / 2, 'milliseconds').toISOString(); }; // zoom in, halving the difference between start and end, keeping the same time range center $scope.zoomIn = function () { - const time = getFromTo(); - const from = time.from.unix() * 1000; - const to = time.to.unix() * 1000; - - const diff = Math.floor((to - from) / 4); - - timefilter.time.from = moment(from + diff).toISOString(); - timefilter.time.to = moment(to - diff).toISOString(); + const time = timefilter.getBounds(); + const diff = time.max.diff(time.min); + timefilter.time.from = time.min.add(diff / 4, 'milliseconds').toISOString(); + timefilter.time.to = time.max.subtract(diff / 4, 'milliseconds').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 50b4f75f51f99b666142129d35671e8afcaa5699 Mon Sep 17 00:00:00 2001 From: Lukas Olson Date: Tue, 29 Nov 2016 11:57:47 -0700 Subject: [PATCH 07/12] [timepicker] Move time navigation calculations to own class and write test --- .../timepicker/__tests__/time_navigation.js | 38 +++++++++++++++++++ .../timepicker/kbn_global_timepicker.js | 23 +++-------- src/ui/public/timepicker/time_navigation.js | 35 +++++++++++++++++ 3 files changed, 79 insertions(+), 17 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/timepicker/__tests__/time_navigation.js b/src/ui/public/timepicker/__tests__/time_navigation.js new file mode 100644 index 0000000000000..1cf775f669ee1 --- /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', () => { + 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', () => { + 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', () => { + 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', () => { + 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.js b/src/ui/public/timepicker/kbn_global_timepicker.js index 011a53ffe002d..5239af790019a 100644 --- a/src/ui/public/timepicker/kbn_global_timepicker.js +++ b/src/ui/public/timepicker/kbn_global_timepicker.js @@ -1,9 +1,10 @@ import moment from 'moment'; import UiModules from 'ui/modules'; -import { once, clone } from 'lodash'; +import { once, clone, assign } from 'lodash'; import dateMath from '@elastic/datemath'; import toggleHtml from './kbn_global_timepicker.html'; +import timeNavigation from './time_navigation'; UiModules .get('kibana') @@ -29,34 +30,22 @@ UiModules // travel forward in time based on the interval between from and to $scope.forward = function () { - const time = timefilter.getBounds(); - const diff = time.max.diff(time.min); - timefilter.time.from = time.max.toISOString(); - timefilter.time.to = time.max.add(diff, 'milliseconds').toISOString(); + assign(timefilter.time, timeNavigation.stepForward(timefilter.getBounds())); }; // travel backwards in time based on the interval between from and to $scope.back = function () { - const time = timefilter.getBounds(); - const diff = time.max.diff(time.min); - timefilter.time.to = time.min.toISOString(); - timefilter.time.from = time.min.subtract(diff, 'milliseconds').toISOString(); + assign(timefilter.time, timeNavigation.stepBackward(timefilter.getBounds())); }; // zoom out, doubling the difference between start and end, keeping the same time range center $scope.zoomOut = function () { - const time = timefilter.getBounds(); - const diff = time.max.diff(time.min); - timefilter.time.from = time.min.subtract(diff / 2, 'milliseconds').toISOString(); - timefilter.time.to = time.max.add(diff / 2, 'milliseconds').toISOString(); + assign(timefilter.time, timeNavigation.zoomOut(timefilter.getBounds())); }; // zoom in, halving the difference between start and end, keeping the same time range center $scope.zoomIn = function () { - const time = timefilter.getBounds(); - const diff = time.max.diff(time.min); - timefilter.time.from = time.min.add(diff / 4, 'milliseconds').toISOString(); - timefilter.time.to = time.max.subtract(diff / 4, 'milliseconds').toISOString(); + assign(timefilter.time, timeNavigation.zoomIn(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..af98c1412429e --- /dev/null +++ b/src/ui/public/timepicker/time_navigation.js @@ -0,0 +1,35 @@ +import moment from 'moment'; + +export default { + stepForward({min, max}) { + const diff = max.diff(min); + return { + from: max.toISOString(), + to: moment(max).add(diff).toISOString() + }; + }, + + stepBackward({min, max}) { + const diff = max.diff(min); + return { + from: moment(min).subtract(diff).toISOString(), + to: min.toISOString() + }; + }, + + zoomOut({min, max}) { + const diff = max.diff(min); + return { + from: moment(min).subtract(diff / 2).toISOString(), + to: moment(max).add(diff / 2).toISOString() + }; + }, + + zoomIn({min, max}) { + const diff = max.diff(min); + return { + from: moment(min).add(diff / 4).toISOString(), + to: moment(max).subtract(diff / 4).toISOString() + }; + } +}; From 55d1ae9049b2b99c8b693d3c250a0a4471bf5bbd Mon Sep 17 00:00:00 2001 From: Lukas Olson Date: Tue, 29 Nov 2016 12:12:48 -0700 Subject: [PATCH 08/12] [timepicker] Remove unused styling and classes --- src/ui/public/styles/base.less | 24 ------------------- .../timepicker/kbn_global_timepicker.html | 8 +++---- 2 files changed, 4 insertions(+), 28 deletions(-) diff --git a/src/ui/public/styles/base.less b/src/ui/public/styles/base.less index f40b8b11404cf..61d66a068ab09 100644 --- a/src/ui/public/styles/base.less +++ b/src/ui/public/styles/base.less @@ -200,30 +200,6 @@ a { .button-variant(@navbar-default-color; @navbar-default-bg; @navbar-default-border); } -.navbar-timepicker { - border-left: 1px solid @kibanaGray4; - - > li > a { - padding-left: 7px !important; - padding-right: 7px !important; - } - - .fa { - font-size: 16px; - vertical-align: middle; - } - - button { - background-color: transparent; - border-radius: 0; - } - - .time-nav-btn { - padding-left: 10px; - padding-right: 10px; - } -} - .navbar-timepicker-time-desc > .fa-clock-o { padding-right: 5px; } diff --git a/src/ui/public/timepicker/kbn_global_timepicker.html b/src/ui/public/timepicker/kbn_global_timepicker.html index e31351e6519a1..5cefc3bbd7f6a 100644 --- a/src/ui/public/timepicker/kbn_global_timepicker.html +++ b/src/ui/public/timepicker/kbn_global_timepicker.html @@ -22,15 +22,15 @@
    - +
    - +
    - +
    - +
    From 3feda24f1f63209a9e9a3500d3e7ce9e573492c3 Mon Sep 17 00:00:00 2001 From: Lukas Olson Date: Tue, 29 Nov 2016 17:34:47 -0700 Subject: [PATCH 09/12] [timepicker] Change from i to span, add more explanatory comments --- .../public/timepicker/__tests__/time_navigation.js | 8 ++++---- .../public/timepicker/kbn_global_timepicker.html | 14 +++++++------- src/ui/public/timepicker/kbn_global_timepicker.js | 4 ---- src/ui/public/timepicker/time_navigation.js | 4 ++++ 4 files changed, 15 insertions(+), 15 deletions(-) diff --git a/src/ui/public/timepicker/__tests__/time_navigation.js b/src/ui/public/timepicker/__tests__/time_navigation.js index 1cf775f669ee1..6cebf5e182580 100644 --- a/src/ui/public/timepicker/__tests__/time_navigation.js +++ b/src/ui/public/timepicker/__tests__/time_navigation.js @@ -12,25 +12,25 @@ describe('timeNavigation', () => { }; }); - it('should step forward', () => { + 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', () => { + 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', () => { + 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', () => { + 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 5cefc3bbd7f6a..ea2db8a446e7b 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}} @@ -22,15 +22,15 @@
    - +
    - +
    - +
    diff --git a/src/ui/public/timepicker/kbn_global_timepicker.js b/src/ui/public/timepicker/kbn_global_timepicker.js index 5239af790019a..c2e40f2bf408c 100644 --- a/src/ui/public/timepicker/kbn_global_timepicker.js +++ b/src/ui/public/timepicker/kbn_global_timepicker.js @@ -28,22 +28,18 @@ UiModules timefilter.refreshInterval.pause = !timefilter.refreshInterval.pause; }; - // travel forward in time based on the interval between from and to $scope.forward = function () { assign(timefilter.time, timeNavigation.stepForward(timefilter.getBounds())); }; - // travel backwards in time based on the interval between from and to $scope.back = function () { assign(timefilter.time, timeNavigation.stepBackward(timefilter.getBounds())); }; - // zoom out, doubling the difference between start and end, keeping the same time range center $scope.zoomOut = function () { assign(timefilter.time, timeNavigation.zoomOut(timefilter.getBounds())); }; - // zoom in, halving the difference between start and end, keeping the same time range center $scope.zoomIn = function () { assign(timefilter.time, timeNavigation.zoomIn(timefilter.getBounds())); }; diff --git a/src/ui/public/timepicker/time_navigation.js b/src/ui/public/timepicker/time_navigation.js index af98c1412429e..0e1b933989fc1 100644 --- a/src/ui/public/timepicker/time_navigation.js +++ b/src/ui/public/timepicker/time_navigation.js @@ -1,6 +1,7 @@ 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 { @@ -9,6 +10,7 @@ export default { }; }, + // travel backwards in time based on the interval between from and to stepBackward({min, max}) { const diff = max.diff(min); return { @@ -17,6 +19,7 @@ export default { }; }, + // zoom out, doubling the difference between start and end, keeping the same time range center zoomOut({min, max}) { const diff = max.diff(min); return { @@ -25,6 +28,7 @@ export default { }; }, + // 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 315739e648958baff3f9038de3ad13118fed6a26 Mon Sep 17 00:00:00 2001 From: Lukas Olson Date: Tue, 29 Nov 2016 17:36:07 -0700 Subject: [PATCH 10/12] [timepicker] Remove unused variable --- src/ui/public/timepicker/kbn_global_timepicker.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/ui/public/timepicker/kbn_global_timepicker.js b/src/ui/public/timepicker/kbn_global_timepicker.js index c2e40f2bf408c..e2c899f276b4f 100644 --- a/src/ui/public/timepicker/kbn_global_timepicker.js +++ b/src/ui/public/timepicker/kbn_global_timepicker.js @@ -1,7 +1,6 @@ import moment from 'moment'; import UiModules from 'ui/modules'; import { once, clone, assign } from 'lodash'; -import dateMath from '@elastic/datemath'; import toggleHtml from './kbn_global_timepicker.html'; import timeNavigation from './time_navigation'; From a5497d1027707a4ff6fa5c7fb1ffd2b14fcc228b Mon Sep 17 00:00:00 2001 From: Lukas Olson Date: Fri, 2 Dec 2016 13:14:27 -0700 Subject: [PATCH 11/12] Remove zoom in/out buttons from timepicker nav --- src/ui/public/timepicker/kbn_global_timepicker.html | 8 -------- src/ui/public/timepicker/kbn_global_timepicker.js | 8 -------- 2 files changed, 16 deletions(-) diff --git a/src/ui/public/timepicker/kbn_global_timepicker.html b/src/ui/public/timepicker/kbn_global_timepicker.html index ea2db8a446e7b..2891819b0c165 100644 --- a/src/ui/public/timepicker/kbn_global_timepicker.html +++ b/src/ui/public/timepicker/kbn_global_timepicker.html @@ -21,14 +21,6 @@ -
    - -
    - -
    - -
    -
    diff --git a/src/ui/public/timepicker/kbn_global_timepicker.js b/src/ui/public/timepicker/kbn_global_timepicker.js index e2c899f276b4f..7b6b62173095f 100644 --- a/src/ui/public/timepicker/kbn_global_timepicker.js +++ b/src/ui/public/timepicker/kbn_global_timepicker.js @@ -34,14 +34,6 @@ UiModules $scope.back = function () { assign(timefilter.time, timeNavigation.stepBackward(timefilter.getBounds())); }; - - $scope.zoomOut = function () { - assign(timefilter.time, timeNavigation.zoomOut(timefilter.getBounds())); - }; - - $scope.zoomIn = function () { - assign(timefilter.time, timeNavigation.zoomIn(timefilter.getBounds())); - }; }, }; }); From 91646df90da4ea46a826e777d4e9dd32b75fd54a Mon Sep 17 00:00:00 2001 From: Lukas Olson Date: Wed, 7 Dec 2016 09:42:16 -0700 Subject: [PATCH 12/12] Change step forward/back timepicker nav button icons --- src/ui/public/timepicker/kbn_global_timepicker.html | 4 ++-- 1 file 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 2891819b0c165..b7d8b684d9000 100644 --- a/src/ui/public/timepicker/kbn_global_timepicker.html +++ b/src/ui/public/timepicker/kbn_global_timepicker.html @@ -22,7 +22,7 @@
    - +
    - +