ui: save sort on cache for Sessions page

Previously, a sort selection was not maintained when
the page change (e.g. coming back from Session details).
This commits saves the selected value to be used.

Partially adressed cockroachdb#68199

Release note: None

pkg/ui/workspaces/cluster-ui/src/sessions/sessionsPage.fixture.ts

@@ -158,9 +158,14 @@ export const sessionsPagePropsFixture: SessionsPageProps = {
   },
   sessions: sessionsList,
   sessionsError: null,
+  sortSetting: {
+    ascending: false,
+    columnTitle: "statementAge",
+  },
   refreshSessions: () => {},
   cancelSession: (req: CancelSessionRequestMessage) => {},
   cancelQuery: (req: CancelQueryRequestMessage) => {},
+  onSortingChange: () => {},
 };
 
 export const sessionsPagePropsEmptyFixture: SessionsPageProps = {
@@ -179,7 +184,12 @@ export const sessionsPagePropsEmptyFixture: SessionsPageProps = {
   },
   sessions: [],
   sessionsError: null,
+  sortSetting: {
+    ascending: false,
+    columnTitle: "statementAge",
+  },
   refreshSessions: () => {},
   cancelSession: (req: CancelSessionRequestMessage) => {},
   cancelQuery: (req: CancelQueryRequestMessage) => {},
+  onSortingChange: () => {},
 };

pkg/ui/workspaces/cluster-ui/src/sessions/sessionsPage.tsx

@@ -9,7 +9,7 @@
 // licenses/APL.txt.
 
 import React from "react";
-import { isNil, merge } from "lodash";
+import { isNil } from "lodash";
 
 import { syncHistory } from "src/util/query";
 import { appAttr } from "src/util/constants";
@@ -51,19 +51,23 @@ const sessionsPageCx = classNames.bind(sessionPageStyles);
 export interface OwnProps {
   sessions: SessionInfo[];
   sessionsError: Error | Error[];
+  sortSetting: SortSetting;
   refreshSessions: () => void;
   cancelSession: (payload: ICancelSessionRequest) => void;
   cancelQuery: (payload: ICancelQueryRequest) => void;
   isCloud?: boolean;
   onPageChanged?: (newPage: number) => void;
-  onSortingChange?: (columnName: string) => void;
+  onSortingChange?: (
+    name: string,
+    columnTitle: string,
+    ascending: boolean,
+  ) => void;
   onSessionClick?: () => void;
   onTerminateSessionClick?: () => void;
   onTerminateStatementClick?: () => void;
 }
 
 export interface SessionsPageState {
-  sortSetting: SortSetting;
   pagination: ISortedTablePagination;
 }
 
@@ -78,45 +82,35 @@ export class SessionsPage extends React.Component<
 
   constructor(props: SessionsPageProps) {
     super(props);
-    const defaultState = {
-      sortSetting: {
-        // Sort by Statement Age column as default option.
-        ascending: false,
-        columnTitle: "statementAge",
-      },
+    this.state = {
       pagination: {
         pageSize: 20,
         current: 1,
       },
     };
-
-    const stateFromHistory = this.getStateFromHistory();
-    this.state = merge(defaultState, stateFromHistory);
     this.terminateSessionRef = React.createRef();
     this.terminateQueryRef = React.createRef();
-  }
 
-  getStateFromHistory = (): Partial<SessionsPageState> => {
     const { history } = this.props;
     const searchParams = new URLSearchParams(history.location.search);
-    const ascending = searchParams.get("ascending") || undefined;
+    const ascending = (searchParams.get("ascending") || undefined) === "true";
     const columnTitle = searchParams.get("columnTitle") || undefined;
-
-    return {
-      sortSetting: {
-        ascending: ascending === "true",
-        columnTitle: columnTitle,
-      },
-    };
-  };
+    const sortSetting = this.props.sortSetting;
+
+    if (
+      this.props.onSortingChange &&
+      columnTitle &&
+      (sortSetting.columnTitle != columnTitle ||
+        sortSetting.ascending != ascending)
+    ) {
+      this.props.onSortingChange("Sessions", columnTitle, ascending);
+    }
+  }
 
   changeSortSetting = (ss: SortSetting): void => {
-    const { onSortingChange } = this.props;
-    onSortingChange && onSortingChange(ss.columnTitle);
-
-    this.setState({
-      sortSetting: ss,
-    });
+    if (this.props.onSortingChange) {
+      this.props.onSortingChange("Sessions", ss.columnTitle, ss.ascending);
+    }
 
     syncHistory(
       {
@@ -142,7 +136,7 @@ export class SessionsPage extends React.Component<
     this.props.refreshSessions();
   }
 
-  componentDidUpdate = (__: SessionsPageProps, _: SessionsPageState): void => {
+  componentDidUpdate = (): void => {
     this.props.refreshSessions();
   };
 
@@ -194,7 +188,7 @@ export class SessionsPage extends React.Component<
                 }
               />
             }
-            sortSetting={this.state.sortSetting}
+            sortSetting={this.props.sortSetting}
             onChangeSortSetting={this.changeSortSetting}
             pagination={pagination}
           />

pkg/ui/workspaces/cluster-ui/src/sessions/sessionsPageConnected.tsx

@@ -17,6 +17,7 @@ import { createSelector } from "reselect";
 import { SessionsPage } from "./index";
 
 import { actions as sessionsActions } from "src/store/sessions";
+import { actions as localStorageActions } from "src/store/localStorage";
 import {
   actions as terminateQueryActions,
   ICancelQueryRequest,
@@ -36,26 +37,42 @@ export const selectSessions = createSelector(
   },
 );
 
+export const selectSortSetting = createSelector(
+  (state: AppState) => state.adminUI.localStorage,
+  localStorage => localStorage["sortSetting/SessionsPage"],
+);
+
 export const SessionsPageConnected = withRouter(
   connect(
     (state: AppState, props: RouteComponentProps) => ({
       sessions: selectSessions(state),
       sessionsError: state.adminUI.sessions.lastError,
       isCloud: true,
+      sortSetting: selectSortSetting(state),
     }),
     (dispatch: Dispatch) => ({
       refreshSessions: () => dispatch(sessionsActions.refresh()),
       cancelSession: (payload: ICancelSessionRequest) =>
         dispatch(terminateQueryActions.terminateSession(payload)),
       cancelQuery: (payload: ICancelQueryRequest) =>
         dispatch(terminateQueryActions.terminateQuery(payload)),
-      onSortingChange: (columnName: string) => {
+      onSortingChange: (
+        tableName: string,
+        columnName: string,
+        ascending: boolean,
+      ) => {
         dispatch(
           analyticsActions.track({
             name: "Column Sorted",
             page: "Sessions",
+            tableName,
             columnName,
-            tableName: "Sessions",
+          }),
+        );
+        dispatch(
+          localStorageActions.update({
+            key: "sortSetting/SessionsPage",
+            value: { columnTitle: columnName, ascending: ascending },
           }),
         );
       },

pkg/ui/workspaces/cluster-ui/src/store/localStorage/localStorage.reducer.ts

@@ -29,6 +29,7 @@ export type LocalStorageState = {
   "dateRange/StatementsPage": StatementsDateRangeState;
   "sortSetting/StatementsPage": SortSetting;
   "sortSetting/TransactionsPage": SortSetting;
+  "sortSetting/SessionsPage": SortSetting;
 };
 
 type Payload = {
@@ -49,6 +50,11 @@ const defaultSortSetting: SortSetting = {
   columnTitle: "executionCount",
 };
 
+const defaultSessionsSortSetting: SortSetting = {
+  ascending: false,
+  columnTitle: "statementAge",
+};
+
 // TODO (koorosh): initial state should be restored from preserved keys in LocalStorage
 const initialState: LocalStorageState = {
   "adminUi/showDiagnosticsModal":
@@ -67,6 +73,9 @@ const initialState: LocalStorageState = {
   "sortSetting/TransactionsPage":
     JSON.parse(localStorage.getItem("sortSetting/TransactionsPage")) ||
     defaultSortSetting,
+  "sortSetting/SessionsPage":
+    JSON.parse(localStorage.getItem("sortSetting/SessionsPage")) ||
+    defaultSessionsSortSetting,
 };
 
 const localStorageSlice = createSlice({

pkg/ui/workspaces/db-console/src/views/sessions/sessionsPage.tsx

@@ -12,6 +12,7 @@ import { Pick } from "src/util/pick";
 import { RouteComponentProps, withRouter } from "react-router-dom";
 import { connect } from "react-redux";
 import { AdminUIState } from "src/redux/state";
+import { LocalSetting } from "src/redux/localsettings";
 import { CachedDataReducerState, refreshSessions } from "src/redux/apiReducers";
 
 import { createSelector } from "reselect";
@@ -41,16 +42,32 @@ export const selectSessions = createSelector(
   },
 );
 
+export const sortSettingLocalSetting = new LocalSetting(
+  "sortSetting/SessionsPage",
+  (state: AdminUIState) => state.localSettings,
+  { ascending: false, columnTitle: "statementAge" },
+);
+
 const SessionsPageConnected = withRouter(
   connect(
     (state: AdminUIState, props: RouteComponentProps) => ({
       sessions: selectSessions(state, props),
       sessionsError: state.cachedData.sessions.lastError,
+      sortSetting: sortSettingLocalSetting.selector(state),
     }),
     {
       refreshSessions,
       cancelSession: terminateSessionAction,
       cancelQuery: terminateQueryAction,
+      onSortingChange: (
+        _tableName: string,
+        columnName: string,
+        ascending: boolean,
+      ) =>
+        sortSettingLocalSetting.set({
+          ascending: ascending,
+          columnTitle: columnName,
+        }),
     },
   )(SessionsPage),
 );