ui: preserve time window selection on window reload

This patch fixes recently introduced regression when
selected time window on SQL Activity or Metrics pages
was not preserved after window reload.
Now, everytime timescale is changed, it's preserved
in session storage and restored on initialization of
TimeScale reducer.

Release note: None

Release justification: low risk, high benefit changes to existing functionality

pkg/ui/workspaces/db-console/src/redux/localsettings.ts

@@ -27,7 +27,7 @@ import { call, takeEvery } from "redux-saga/effects";
 import { PayloadAction } from "src/interfaces/action";
 
 const STORAGE_PREFIX = "cockroachui";
-const SET_UI_VALUE = `${STORAGE_PREFIX}/ui/SET_UI_VALUE`;
+export const SET_UI_VALUE = `${STORAGE_PREFIX}/ui/SET_UI_VALUE`;
 
 export interface LocalSettingData {
   key: string;
@@ -61,7 +61,7 @@ function saveToSessionStorage(data: LocalSettingData) {
  * Retrieve local setting value by key from sessionStorage.
  * Value is stored as a stringified JSON so has to be parsed back.
  */
-function getValueFromSessionStorage(key: string) {
+export function getValueFromSessionStorage(key: string) {
   const value = sessionStorage.getItem(`${STORAGE_PREFIX}/${key}`);
   return JSON.parse(value);
 }

pkg/ui/workspaces/db-console/src/redux/sagas.ts

@@ -18,6 +18,7 @@ import { analyticsSaga } from "./analyticsSagas";
 import { sessionsSaga } from "./sessions";
 import { sqlStatsSaga } from "./sqlStats";
 import { indexUsageStatsSaga } from "./indexUsageStats";
+import { timeScaleSaga } from "src/redux/timeScale";
 
 export default function* rootSaga() {
   yield all([
@@ -29,5 +30,6 @@ export default function* rootSaga() {
     fork(sessionsSaga),
     fork(sqlStatsSaga),
     fork(indexUsageStatsSaga),
+    fork(timeScaleSaga),
   ]);
 }

pkg/ui/workspaces/db-console/src/redux/timeScale.ts

@@ -14,18 +14,24 @@
  */
 
 import { Action } from "redux";
+import { put, takeEvery } from "redux-saga/effects";
 import { PayloadAction } from "src/interfaces/action";
 import _ from "lodash";
 import { defaultTimeScaleOptions, TimeScale } from "@cockroachlabs/cluster-ui";
 import moment from "moment";
 import { createSelector } from "reselect";
 import { AdminUIState } from "src/redux/state";
+import {
+  getValueFromSessionStorage,
+  setLocalSetting,
+} from "src/redux/localsettings";
 
 export const SET_SCALE = "cockroachui/timewindow/SET_SCALE";
 export const SET_METRICS_MOVING_WINDOW =
   "cockroachui/timewindow/SET_METRICS_MOVING_WINDOW";
 export const SET_METRICS_FIXED_WINDOW =
   "cockroachui/timewindow/SET_METRICS_FIXED_WINDOW";
+const TIME_SCALE_SESSION_STORAGE_KEY = "time_scale";
 
 /**
  * TimeWindow represents an absolute window of time, defined with a start and
@@ -58,7 +64,15 @@ export class TimeScaleState {
   };
 
   constructor() {
-    this.scale = {
+    let timeScale: TimeScale;
+    try {
+      timeScale = getValueFromSessionStorage(TIME_SCALE_SESSION_STORAGE_KEY);
+    } catch {
+      console.warn(
+        `Couldn't retrieve or parse TimeScale options from SessionStorage`,
+      );
+    }
+    this.scale = timeScale || {
       ...defaultTimeScaleOptions["Past 10 Minutes"],
       key: "Past 10 Minutes",
       fixedWindowEnd: false,
@@ -197,3 +211,9 @@ export const adjustTimeScale = (
   }
   return result;
 };
+
+export function* timeScaleSaga() {
+  yield takeEvery(SET_SCALE, function* ({ payload }: PayloadAction<TimeScale>) {
+    yield put(setLocalSetting(TIME_SCALE_SESSION_STORAGE_KEY, payload));
+  });
+}