Add advanced setting to control quick ranges (elastic#15975)

* Add advanced setting to control quick ranges

* Fix test

* Add docs for quick ranges

* Remove comment

docs/management/advanced-options.asciidoc

@@ -73,6 +73,7 @@ mentioned use "_default_".
 `savedObjects:perPage`:: The number of objects shown on each page of the list of saved objects. The default value is 5.
 `timepicker:timeDefaults`:: The default time filter selection.
 `timepicker:refreshIntervalDefaults`:: The time filter's default refresh interval.
+`timepicker:quickRanges`:: The list of ranges to show in the Quick section of the time picker. This should be an array of objects, with each object containing `from`, `to` (see {ref}/common-options.html#date-math[accepted formats]), `display` (the title to be displayed), and `section` (which column to put the option in).
 `dashboard:defaultDarkTheme`:: Set this property to `true` to make new dashboards use the dark theme by default.
 `filters:pinnedByDefault`:: Set this property to `true` to make filters have a global state by default.
 `filterEditor:suggestValues`:: Set this property to `false` to prevent the filter editor from suggesting values for fields.

src/core_plugins/kibana/public/dashboard/__tests__/dashboard_state.js

@@ -9,8 +9,8 @@ describe('DashboardState', function () {
   let savedDashboard;
   let SavedDashboard;
   let timefilter;
-  let quickTimeRanges;
   let dashboardConfig;
+  const mockQuickTimeRanges = [{ from: 'now/w', to: 'now/w', display: 'This week', section: 0 }];
   const mockIndexPattern = { id: 'index1' };
 
   function initDashboardState() {
@@ -20,7 +20,6 @@ describe('DashboardState', function () {
   beforeEach(ngMock.module('kibana'));
   beforeEach(ngMock.inject(function ($injector) {
     timefilter = $injector.get('timefilter');
-    quickTimeRanges = $injector.get('quickRanges');
     AppState = $injector.get('AppState');
     SavedDashboard = $injector.get('SavedDashboard');
     dashboardConfig = $injector.get('dashboardConfig');
@@ -38,7 +37,7 @@ describe('DashboardState', function () {
       timefilter.time.mode = 'absolute';
 
       initDashboardState();
-      dashboardState.syncTimefilterWithDashboard(timefilter, quickTimeRanges);
+      dashboardState.syncTimefilterWithDashboard(timefilter, mockQuickTimeRanges);
 
       expect(timefilter.time.mode).to.equal('quick');
       expect(timefilter.time.to).to.equal('now/w');
@@ -55,7 +54,7 @@ describe('DashboardState', function () {
       timefilter.time.mode = 'absolute';
 
       initDashboardState();
-      dashboardState.syncTimefilterWithDashboard(timefilter, quickTimeRanges);
+      dashboardState.syncTimefilterWithDashboard(timefilter, mockQuickTimeRanges);
 
       expect(timefilter.time.mode).to.equal('relative');
       expect(timefilter.time.to).to.equal('now');
@@ -72,7 +71,7 @@ describe('DashboardState', function () {
       timefilter.time.mode = 'quick';
 
       initDashboardState();
-      dashboardState.syncTimefilterWithDashboard(timefilter, quickTimeRanges);
+      dashboardState.syncTimefilterWithDashboard(timefilter, mockQuickTimeRanges);
 
       expect(timefilter.time.mode).to.equal('absolute');
       expect(timefilter.time.to).to.equal(savedDashboard.timeTo);

src/core_plugins/kibana/public/dashboard/dashboard_app.js

@@ -45,7 +45,6 @@ app.directive('dashboardApp', function ($injector) {
   const courier = $injector.get('courier');
   const AppState = $injector.get('AppState');
   const timefilter = $injector.get('timefilter');
-  const quickRanges = $injector.get('quickRanges');
   const kbnUrl = $injector.get('kbnUrl');
   const confirmModal = $injector.get('confirmModal');
   const config = $injector.get('config');
@@ -83,7 +82,7 @@ app.directive('dashboardApp', function ($injector) {
       // The 'previouslyStored' check is so we only update the time filter on dashboard open, not during
       // normal cross app navigation.
       if (dashboardStateManager.getIsTimeSavedWithDashboard() && !getAppState.previouslyStored()) {
-        dashboardStateManager.syncTimefilterWithDashboard(timefilter, quickRanges);
+        dashboardStateManager.syncTimefilterWithDashboard(timefilter, config.get('timepicker:quickRanges'));
       }
 
       const updateState = () => {
@@ -239,7 +238,7 @@ app.directive('dashboardApp', function ($injector) {
           // it does on 'open' because it's been saved to the url and the getAppState.previouslyStored() check on
           // reload will cause it not to sync.
           if (dashboardStateManager.getIsTimeSavedWithDashboard()) {
-            dashboardStateManager.syncTimefilterWithDashboard(timefilter, quickRanges);
+            dashboardStateManager.syncTimefilterWithDashboard(timefilter, config.get('timepicker:quickRanges'));
           }
         }
 

src/core_plugins/kibana/ui_setting_defaults.js

@@ -277,6 +277,40 @@ export function getUiSettingDefaults() {
 }`,
       description: 'The timefilter\'s default refresh interval'
     },
+    'timepicker:quickRanges': {
+      type: 'json',
+      value: JSON.stringify([
+        { from: 'now/d',    to: 'now/d',    display: 'Today',                 section: 0 },
+        { from: 'now/w',    to: 'now/w',    display: 'This week',             section: 0 },
+        { from: 'now/M',    to: 'now/M',    display: 'This month',            section: 0 },
+        { from: 'now/y',    to: 'now/y',    display: 'This year',             section: 0 },
+        { from: 'now/d',    to: 'now',      display: 'Today so far',          section: 0 },
+        { from: 'now/w',    to: 'now',      display: 'Week to date',          section: 0 },
+        { from: 'now/M',    to: 'now',      display: 'Month to date',         section: 0 },
+        { from: 'now/y',    to: 'now',      display: 'Year to date',          section: 0 },
+
+        { from: 'now-15m',  to: 'now',      display: 'Last 15 minutes',       section: 1 },
+        { from: 'now-30m',  to: 'now',      display: 'Last 30 minutes',       section: 1 },
+        { from: 'now-1h',   to: 'now',      display: 'Last 1 hour',           section: 1 },
+        { from: 'now-4h',   to: 'now',      display: 'Last 4 hours',          section: 1 },
+        { from: 'now-12h',  to: 'now',      display: 'Last 12 hours',         section: 1 },
+        { from: 'now-24h',  to: 'now',      display: 'Last 24 hours',         section: 1 },
+        { from: 'now-7d',   to: 'now',      display: 'Last 7 days',           section: 1 },
+
+        { from: 'now-30d',  to: 'now',      display: 'Last 30 days',          section: 2 },
+        { from: 'now-60d',  to: 'now',      display: 'Last 60 days',          section: 2 },
+        { from: 'now-90d',  to: 'now',      display: 'Last 90 days',          section: 2 },
+        { from: 'now-6M',   to: 'now',      display: 'Last 6 months',         section: 2 },
+        { from: 'now-1y',   to: 'now',      display: 'Last 1 year',           section: 2 },
+        { from: 'now-2y',   to: 'now',      display: 'Last 2 years',          section: 2 },
+        { from: 'now-5y',   to: 'now',      display: 'Last 5 years',          section: 2 },
+
+      ], null, 2),
+      description: 'The list of ranges to show in the Quick section of the time picker. ' +
+        'This should be an array of objects, with each object containing "from", "to" (see ' +
+        '<a href="https://www.elastic.co/guide/en/elasticsearch/reference/current/common-options.html#date-math" target="_blank" rel="noopener noreferrer">accepted formats</a>' +
+        '), "display" (the title to be displayed), and "section" (which column to put the option in).'
+    },
     'dashboard:defaultDarkTheme': {
       value: false,
       description: 'New dashboards use dark theme by default'
@@ -287,7 +321,7 @@ export function getUiSettingDefaults() {
     },
     'filterEditor:suggestValues': {
       value: true,
-      description: 'Set this property to `false` to prevent the filter editor from suggesting values for fields.'
+      description: 'Set this property to false to prevent the filter editor from suggesting values for fields.'
     },
     'notifications:banner': {
       type: 'markdown',

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

@@ -151,8 +151,8 @@ describe('timepicker directive', function () {
       $scope.$digest();
     });
 
-    it('should contain 4 lists of options', function () {
-      expect($elem.find('.kbn-timepicker-section .list-unstyled').length).to.be(4);
+    it('should contain 3 lists of options', function () {
+      expect($elem.find('.kbn-timepicker-section .list-unstyled').length).to.be(3);
     });
 
     it('should have a $scope.setQuick() that calls handler', function () {

src/ui/public/directives/pretty_duration.js

@@ -1,20 +1,20 @@
 import _ from 'lodash';
 import dateMath from '@elastic/datemath';
 import moment from 'moment';
-import 'ui/timepicker/quick_ranges';
 import 'ui/timepicker/time_units';
 import { uiModules } from 'ui/modules';
 const module = uiModules.get('kibana');
 
 
-module.directive('prettyDuration', function (config, quickRanges, timeUnits) {
+module.directive('prettyDuration', function (config, timeUnits) {
   return {
     restrict: 'E',
     scope: {
       from: '=',
       to: '='
     },
     link: function ($scope, $elem) {
+      const quickRanges = config.get('timepicker:quickRanges');
       const dateFormat = config.get('dateFormat');
 
       const lookupByRange = {};

src/ui/public/timepicker/quick_panel/kbn_timepicker_quick_panel.js

@@ -4,7 +4,7 @@ import { uiModules } from 'ui/modules';
 
 const module = uiModules.get('ui/timepicker');
 
-module.directive('kbnTimepickerQuickPanel', function (quickRanges) {
+module.directive('kbnTimepickerQuickPanel', function (config) {
   return {
     restrict: 'E',
     replace: true,
@@ -13,6 +13,7 @@ module.directive('kbnTimepickerQuickPanel', function (quickRanges) {
     },
     template,
     controller: function ($scope) {
+      const quickRanges = config.get('timepicker:quickRanges');
       $scope.quickLists = _(quickRanges).groupBy('section').values().value();
     }
   };

src/ui/public/timepicker/timepicker.js

@@ -11,7 +11,6 @@ import { Notifier } from 'ui/notify/notifier';
 import 'ui/timepicker/timepicker.less';
 import 'ui/directives/input_datetime';
 import 'ui/directives/inequality';
-import 'ui/timepicker/quick_ranges';
 import 'ui/timepicker/refresh_intervals';
 import 'ui/timepicker/time_units';
 import 'ui/timepicker/kbn_global_timepicker';