diff --git a/pkg/ui/workspaces/db-console/src/redux/localsettings.ts b/pkg/ui/workspaces/db-console/src/redux/localsettings.ts index a1eca5b94508..310981455f61 100644 --- a/pkg/ui/workspaces/db-console/src/redux/localsettings.ts +++ b/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); } diff --git a/pkg/ui/workspaces/db-console/src/redux/sagas.ts b/pkg/ui/workspaces/db-console/src/redux/sagas.ts index 69c43fe9bf0f..6451ffbd884c 100644 --- a/pkg/ui/workspaces/db-console/src/redux/sagas.ts +++ b/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), ]); } diff --git a/pkg/ui/workspaces/db-console/src/redux/timeScale.ts b/pkg/ui/workspaces/db-console/src/redux/timeScale.ts index 7c4e95813a66..8f16c66bb95a 100644 --- a/pkg/ui/workspaces/db-console/src/redux/timeScale.ts +++ b/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) { + yield put(setLocalSetting(TIME_SCALE_SESSION_STORAGE_KEY, payload)); + }); +}