grafana#33931 - Save timerange to localstorage for restoring

Hixon10 · May 16, 2021 · d7fc4dc · d7fc4dc
1 parent 65cacd3
commit d7fc4dc
Show file tree

Hide file tree

Showing 2 changed files with 67 additions and 0 deletions.
diff --git a/packages/grafana-e2e-selectors/src/selectors/components.ts b/packages/grafana-e2e-selectors/src/selectors/components.ts
@@ -4,6 +4,8 @@ export const Components = {
     fromField: 'TimePicker from field',
     toField: 'TimePicker to field',
     applyTimeRange: 'TimePicker submit button',
+    saveToStorage: 'TimePicker save range to storage button',
+    restoreFromStorage: 'TimePicker restore range from storage button',
   },
   DataSource: {
     TestData: {

diff --git a/packages/grafana-ui/src/components/TimePicker/TimeRangePicker/TimeRangeForm.tsx b/packages/grafana-ui/src/components/TimePicker/TimeRangePicker/TimeRangeForm.tsx
@@ -15,6 +15,19 @@ import { Button } from '../../Button';
 import { Field } from '../../Forms/Field';
 import { Input } from '../../Input/Input';
 import { TimePickerCalendar } from './TimePickerCalendar';
+import { css } from '@emotion/css';
+import { useStyles2 } from '../../../themes/ThemeContext';
+
+const getStyles = () => {
+  return {
+    saveRangeContainer: css`
+      margin-top: 15px;
+    `,
+    withRightMargin: css`
+      margin-right: 10px;
+    `,
+  };
+};
 
 interface Props {
   isFullscreen: boolean;
@@ -31,6 +44,7 @@ export interface InputState {
 }
 
 const errorMessage = 'Please enter a past date or "now"';
+const timeRangeStoreKey = 'timeRangeStoreKey';
 
 export const TimeRangeForm: React.FC<Props> = (props) => {
   const { value, isFullscreen = false, timeZone, onApply: onApplyFromProps, isReversed } = props;
@@ -78,6 +92,36 @@ export const TimeRangeForm: React.FC<Props> = (props) => {
     [from.invalid, from.value, onApplyFromProps, timeZone, to.invalid, to.value]
   );
 
+  const onSaveToStorage = useCallback(
+    (e: FormEvent<HTMLButtonElement>) => {
+      e.preventDefault();
+      if (to.invalid || from.invalid) {
+        return;
+      }
+
+      const raw: RawTimeRange = { from: from.value, to: to.value };
+      window.localStorage[timeRangeStoreKey] = JSON.stringify(raw);
+      alert('Saved!');
+    },
+    [from.invalid, from.value, to.invalid, to.value]
+  );
+
+  const onRestoreFromStorage = useCallback(
+    (e: FormEvent<HTMLButtonElement>) => {
+      e.preventDefault();
+
+      const rawTimeRangeAsJson = window.localStorage[timeRangeStoreKey];
+      if (rawTimeRangeAsJson == null) {
+        return;
+      }
+      const raw: RawTimeRange = JSON.parse(rawTimeRangeAsJson);
+
+      setFrom(valueToState(raw.from, false, timeZone));
+      setTo(valueToState(raw.to, true, timeZone));
+    },
+    [timeZone]
+  );
+
   const onChange = useCallback(
     (from: DateTime, to: DateTime) => {
       setFrom(valueToState(from, false, timeZone));
@@ -88,6 +132,8 @@ export const TimeRangeForm: React.FC<Props> = (props) => {
 
   const icon = isFullscreen ? null : <Button icon="calendar-alt" variant="secondary" onClick={onOpen} />;
 
+  const styles = useStyles2(getStyles);
+
   return (
     <>
       <Field label="From" invalid={from.invalid} error={errorMessage}>
@@ -113,6 +159,25 @@ export const TimeRangeForm: React.FC<Props> = (props) => {
       <Button aria-label={selectors.components.TimePicker.applyTimeRange} onClick={onApply}>
         Apply time range
       </Button>
+      <div className={styles.saveRangeContainer}>
+        <Button
+          className={styles.withRightMargin}
+          variant="secondary"
+          aria-label={selectors.components.TimePicker.saveToStorage}
+          onClick={onSaveToStorage}
+          size="sm"
+        >
+          Save to storage
+        </Button>
+        <Button
+          variant="secondary"
+          aria-label={selectors.components.TimePicker.restoreFromStorage}
+          onClick={onRestoreFromStorage}
+          size="sm"
+        >
+          Restore from storage
+        </Button>
+      </div>
 
       <TimePickerCalendar
         isFullscreen={isFullscreen}