store time filter history in localStorage

elastic · Jan 10, 2018 · 040e075 · 040e075
1 parent 2570eeb
commit 040e075
Show file tree

Hide file tree

Showing 8 changed files with 130 additions and 10 deletions.
diff --git a/src/ui/public/timefilter/lib/diff_interval.js b/src/ui/public/timefilter/lib/diff_interval.js
@@ -1,5 +1,6 @@
 import _ from 'lodash';
 import { UtilsDiffTimePickerValsProvider } from 'ui/utils/diff_time_picker_vals';
+import { timeHistory } from 'ui/timefilter/time_history';
 
 export function TimefilterLibDiffIntervalProvider(Private) {
   const diff = Private(UtilsDiffTimePickerValsProvider);
@@ -9,6 +10,7 @@ export function TimefilterLibDiffIntervalProvider(Private) {
 
     return function () {
       if (diff(self.refreshInterval, oldRefreshInterval)) {
+        timeHistory.setRefreshInterval(self.refreshInterval);
         self.emit('update');
         if (!self.refreshInterval.pause && self.refreshInterval.value !== 0) {
           self.emit('fetch');

diff --git a/src/ui/public/timefilter/lib/diff_time.js b/src/ui/public/timefilter/lib/diff_time.js
@@ -1,5 +1,6 @@
 import _ from 'lodash';
 import { UtilsDiffTimePickerValsProvider } from 'ui/utils/diff_time_picker_vals';
+import { timeHistory } from 'ui/timefilter/time_history';
 
 export function TimefilterLibDiffTimeProvider(Private) {
   const diff = Private(UtilsDiffTimePickerValsProvider);
@@ -8,6 +9,7 @@ export function TimefilterLibDiffTimeProvider(Private) {
     let oldTime = _.clone(self.time);
     return function () {
       if (diff(self.time, oldTime)) {
+        timeHistory.setTime(self.time);
         self.emit('update');
         self.emit('fetch');
       }

diff --git a/src/ui/public/timefilter/time_history.js b/src/ui/public/timefilter/time_history.js
@@ -0,0 +1,85 @@
+import _ from 'lodash';
+import moment from 'moment';
+import { Storage } from 'ui/storage';
+import { TIME_MODES } from 'ui/timepicker/modes';
+
+const MAX_HISTORY = 20;
+const TIME_HISTORY_KEY = 'kibana.timepicker.timeHistory';
+const TIME_KEY = 'kibana.timepicker.time';
+const REFRESH_INTERVAL_KEY = 'kibana.timepicker.refreshInterval';
+
+class TimeHistory {
+  constructor() {
+    this.storage = new Storage(window.localStorage);
+  }
+
+  setRefreshInterval(refreshInterval) {
+    if (!refreshInterval) {
+      return;
+    }
+
+    this.storage.set(REFRESH_INTERVAL_KEY, refreshInterval);
+  }
+
+  getRefreshInterval(defaultRefreshValue) {
+    const refreshInterval = this.storage.get(REFRESH_INTERVAL_KEY);
+    if (!refreshInterval) {
+      return defaultRefreshValue;
+    }
+    return refreshInterval;
+  }
+
+  setTime(time) {
+    if (!time) {
+      return;
+    }
+
+    // time from/to can be strings or moment objects - convert to strings so always dealing with same types
+    const justStringsTime = {
+      from: moment.isMoment(time.from) ? time.from.toISOString() : time.from,
+      mode: time.mode,
+      to: moment.isMoment(time.to) ? time.to.toISOString() : time.to
+    };
+
+    this.storage.set(TIME_KEY, justStringsTime);
+
+    let timeHistory = this.storage.get(TIME_HISTORY_KEY);
+    if (!timeHistory) {
+      timeHistory = {
+        [TIME_MODES.ABSOLUTE]: [],
+        [TIME_MODES.RELATIVE]: [],
+      };
+    }
+    if (!Object.keys(timeHistory).includes(justStringsTime.mode)) {
+      return;
+    }
+    const noDuplicates = timeHistory[justStringsTime.mode].filter(t => {
+      return !_.isEqual(t, justStringsTime);
+    });
+    noDuplicates.unshift(justStringsTime);
+    if (noDuplicates.length >= MAX_HISTORY) {
+      noDuplicates.length = MAX_HISTORY;
+    }
+    timeHistory[time.mode] = noDuplicates;
+    this.storage.set(TIME_HISTORY_KEY, timeHistory);
+  }
+
+  getTimeHistory(timeMode) {
+    const timeHistory = this.storage.get(TIME_HISTORY_KEY);
+    if (!timeHistory || !Object.keys(timeHistory).includes(timeMode)) {
+      return [];
+    }
+
+    return timeHistory[timeMode];
+  }
+
+  getTime(defaultTime) {
+    const time = this.storage.get(TIME_KEY);
+    if (!time) {
+      return defaultTime;
+    }
+    return time;
+  }
+}
+
+export const timeHistory = new TimeHistory();
diff --git a/src/ui/public/timefilter/timefilter.js b/src/ui/public/timefilter/timefilter.js
@@ -8,6 +8,7 @@ import { TimefilterLibDiffTimeProvider } from 'ui/timefilter/lib/diff_time';
 import { TimefilterLibDiffIntervalProvider } from 'ui/timefilter/lib/diff_interval';
 import uiRoutes from 'ui/routes';
 import { uiModules } from 'ui/modules';
+import { timeHistory } from 'ui/timefilter/time_history';
 
 uiRoutes
   .addSetupWork(function (timefilter) {
@@ -36,8 +37,8 @@ uiModules
       self.isAutoRefreshSelectorEnabled = false;
 
       self.init = _.once(function () {
-        const timeDefaults = config.get('timepicker:timeDefaults');
-        const refreshIntervalDefaults = config.get('timepicker:refreshIntervalDefaults');
+        const timeDefaults = timeHistory.getTime(config.get('timepicker:timeDefaults'));
+        const refreshIntervalDefaults = timeHistory.getRefreshInterval(config.get('timepicker:refreshIntervalDefaults'));
 
         // These can be date math strings or moments.
         self.time = _.defaults(globalState.time || {}, timeDefaults);

diff --git a/src/ui/public/timepicker/absolute_panel/kbn_timepicker_absolute_panel.html b/src/ui/public/timepicker/absolute_panel/kbn_timepicker_absolute_panel.html
@@ -64,6 +64,20 @@
   </div>
 
   <div class="kbn-timepicker-actions kuiVerticalRhythm">
+    <select
+      ng-if="history.length > 0"
+      ng-change="selectHistory(selectedIndex)"
+      ng-model="selectedIndex"
+      class="kuiSelect fullWidth"
+    >
+      <option value="" disabled selected hidden>Select previous absolute time</option>
+      <option
+        ng-repeat="time in history"
+        value="{{$index}}"
+      >
+        {{time.from}} to {{time.to}}
+      </option>
+    </select>
     <span
       class="kbn-timepicker-action-item kbn-timepicker-error"
       ng-show="absolute.from > absolute.to"

diff --git a/src/ui/public/timepicker/absolute_panel/kbn_timepicker_absolute_panel.js b/src/ui/public/timepicker/absolute_panel/kbn_timepicker_absolute_panel.js
@@ -1,5 +1,8 @@
+import moment from 'moment';
 import template from './kbn_timepicker_absolute_panel.html';
 import { uiModules } from 'ui/modules';
+import { timeHistory } from 'ui/timefilter/time_history';
+import { TIME_MODES } from 'ui/timepicker/modes';
 
 const module = uiModules.get('ui/timepicker');
 
@@ -16,7 +19,14 @@ module.directive('kbnTimepickerAbsolutePanel', function () {
       setToNow: '&'
     },
     template,
-    controller: function () {
+    controller: function ($scope) {
+      $scope.history = timeHistory.getTimeHistory(TIME_MODES.ABSOLUTE);
+      $scope.selectHistory = function (selectedIndex) {
+        if ($scope.history[selectedIndex]) {
+          $scope.absolute.from = moment($scope.history[selectedIndex].from);
+          $scope.absolute.to = moment($scope.history[selectedIndex].to);
+        }
+      };
     }
   };
 });
diff --git a/src/ui/public/timepicker/modes.js b/src/ui/public/timepicker/modes.js
@@ -0,0 +1,5 @@
+export const TIME_MODES = {
+  ABSOLUTE: 'absolute',
+  QUICK: 'quick',
+  RELATIVE: 'relative',
+};
diff --git a/src/ui/public/timepicker/timepicker.js b/src/ui/public/timepicker/timepicker.js
@@ -16,6 +16,7 @@ import 'ui/timepicker/refresh_intervals';
 import 'ui/timepicker/time_units';
 import 'ui/timepicker/kbn_global_timepicker';
 import { uiModules } from 'ui/modules';
+import { TIME_MODES } from './modes';
 const module = uiModules.get('ui/timepicker');
 const notify = new Notifier({
   location: 'timepicker',
@@ -36,10 +37,10 @@ module.directive('kbnTimepicker', function (timeUnits, refreshIntervals) {
     template: html,
     controller: function ($scope) {
       $scope.format = 'MMMM Do YYYY, HH:mm:ss.SSS';
-      $scope.modes = ['quick', 'relative', 'absolute'];
+      $scope.modes = [TIME_MODES.QUICK, TIME_MODES.RELATIVE, TIME_MODES.ABSOLUTE];
       $scope.activeTab = $scope.activeTab || 'filter';
 
-      if (_.isUndefined($scope.mode)) $scope.mode = 'quick';
+      if (_.isUndefined($scope.mode)) $scope.mode = TIME_MODES.QUICK;
 
       $scope.refreshLists = _(refreshIntervals).groupBy('section').values().value();
 
@@ -68,13 +69,13 @@ module.directive('kbnTimepicker', function (timeUnits, refreshIntervals) {
       $scope.relativeOptions = relativeOptions;
 
       $scope.$watch('from', function (date) {
-        if (moment.isMoment(date) && $scope.mode === 'absolute') {
+        if (moment.isMoment(date) && $scope.mode === TIME_MODES.ABSOLUTE) {
           $scope.absolute.from = date;
         }
       });
 
       $scope.$watch('to', function (date) {
-        if (moment.isMoment(date) && $scope.mode === 'absolute') {
+        if (moment.isMoment(date) && $scope.mode === TIME_MODES.ABSOLUTE) {
           $scope.absolute.to = date;
         }
       });
@@ -126,14 +127,14 @@ module.directive('kbnTimepicker', function (timeUnits, refreshIntervals) {
 
       $scope.setMode = function (thisMode) {
         switch (thisMode) {
-          case 'quick':
+          case TIME_MODES.QUICK:
             break;
-          case 'relative':
+          case TIME_MODES.RELATIVE:
             $scope.relative = parseRelativeParts($scope.from, $scope.to);
             $scope.formatRelative('from');
             $scope.formatRelative('to');
             break;
-          case 'absolute':
+          case TIME_MODES.ABSOLUTE:
             $scope.absolute.from = dateMath.parse($scope.from || moment().subtract(15, 'minutes'));
             $scope.absolute.to = dateMath.parse($scope.to || moment(), true);
             break;