ui: save sort on cache for Transaction page

Previously, a sort selection was not maintained when the page change (e.g. coming back from Transaction details). This commits saves the selected value to be used. Partially adressed #68199 Release note: None
cockroachdb · Nov 17, 2021 · 73bae4b · 73bae4b
1 parent e3e8917
commit 73bae4b
Show file tree

Hide file tree

Showing 7 changed files with 104 additions and 28 deletions.
diff --git a/pkg/ui/workspaces/cluster-ui/src/store/localStorage/localStorage.reducer.ts b/pkg/ui/workspaces/cluster-ui/src/store/localStorage/localStorage.reducer.ts
@@ -28,6 +28,7 @@ export type LocalStorageState = {
   "showColumns/TransactionPage": string;
   "dateRange/StatementsPage": StatementsDateRangeState;
   "sortSetting/StatementsPage": SortSetting;
+  "sortSetting/TransactionsPage": SortSetting;
 };
 
 type Payload = {
@@ -63,6 +64,9 @@ const initialState: LocalStorageState = {
   "sortSetting/StatementsPage":
     JSON.parse(localStorage.getItem("sortSetting/StatementsPage")) ||
     defaultSortSetting,
+  "sortSetting/TransactionsPage":
+    JSON.parse(localStorage.getItem("sortSetting/TransactionsPage")) ||
+    defaultSortSetting,
 };
 
 const localStorageSlice = createSlice({

diff --git a/pkg/ui/workspaces/cluster-ui/src/transactionsPage/transactions.fixture.ts b/pkg/ui/workspaces/cluster-ui/src/transactionsPage/transactions.fixture.ts
@@ -13,6 +13,7 @@ import { cockroach } from "@cockroachlabs/crdb-protobuf-client";
 import Long from "long";
 import moment from "moment";
 import * as protos from "@cockroachlabs/crdb-protobuf-client";
+import { SortSetting } from "../sortedtable";
 
 const history = createMemoryHistory({ initialEntries: ["/transactions"] });
 
@@ -47,6 +48,11 @@ export const timestamp = new protos.google.protobuf.Timestamp({
   seconds: new Long(Date.parse("Sep 15 2021 01:00:00 GMT") * 1e-3),
 });
 
+export const sortSetting: SortSetting = {
+  ascending: false,
+  columnTitle: "executionCount",
+};
+
 export const data: cockroach.server.serverpb.IStatementsResponse = {
   statements: [
     {

diff --git a/pkg/ui/workspaces/cluster-ui/src/transactionsPage/transactionsPage.selectors.ts b/pkg/ui/workspaces/cluster-ui/src/transactionsPage/transactionsPage.selectors.ts
@@ -40,3 +40,8 @@ export const selectTxnColumns = createSelector(
       ? localStorage["showColumns/TransactionPage"].split(",")
       : null,
 );
+
+export const selectSortSetting = createSelector(
+  localStorageSelector,
+  localStorage => localStorage["sortSetting/TransactionsPage"],
+);
diff --git a/pkg/ui/workspaces/cluster-ui/src/transactionsPage/transactionsPage.stories.tsx b/pkg/ui/workspaces/cluster-ui/src/transactionsPage/transactionsPage.stories.tsx
@@ -17,6 +17,7 @@ import {
   nodeRegions,
   routeProps,
   dateRange,
+  sortSetting,
 } from "./transactions.fixture";
 
 import { TransactionsPage } from ".";
@@ -38,6 +39,8 @@ storiesOf("Transactions Page", module)
       nodeRegions={nodeRegions}
       refreshData={noop}
       resetSQLStats={noop}
+      sortSetting={sortSetting}
+      onSortingChange={noop}
     />
   ))
   .add("without data", () => {
@@ -49,6 +52,8 @@ storiesOf("Transactions Page", module)
         nodeRegions={nodeRegions}
         refreshData={noop}
         resetSQLStats={noop}
+        sortSetting={sortSetting}
+        onSortingChange={noop}
       />
     );
   })
@@ -68,6 +73,8 @@ storiesOf("Transactions Page", module)
         refreshData={noop}
         history={history}
         resetSQLStats={noop}
+        sortSetting={sortSetting}
+        onSortingChange={noop}
       />
     );
   })
@@ -80,6 +87,8 @@ storiesOf("Transactions Page", module)
         nodeRegions={nodeRegions}
         refreshData={noop}
         resetSQLStats={noop}
+        sortSetting={sortSetting}
+        onSortingChange={noop}
       />
     );
   })
@@ -99,6 +108,8 @@ storiesOf("Transactions Page", module)
         }
         refreshData={noop}
         resetSQLStats={noop}
+        sortSetting={sortSetting}
+        onSortingChange={noop}
       />
     );
   });
diff --git a/pkg/ui/workspaces/cluster-ui/src/transactionsPage/transactionsPage.tsx b/pkg/ui/workspaces/cluster-ui/src/transactionsPage/transactionsPage.tsx
@@ -69,7 +69,6 @@ type Timestamp = protos.google.protobuf.ITimestamp;
 const cx = classNames.bind(styles);
 
 interface TState {
-  sortSetting: SortSetting;
   pagination: ISortedTablePagination;
   search?: string;
   filters?: Filters;
@@ -87,13 +86,19 @@ export interface TransactionsPageStateProps {
   pageSize?: number;
   isTenant?: UIConfigState["isTenant"];
   columns: string[];
+  sortSetting: SortSetting;
 }
 
 export interface TransactionsPageDispatchProps {
   refreshData: (req?: StatementsRequest) => void;
   resetSQLStats: () => void;
   onDateRangeChange?: (start: Moment, end: Moment) => void;
   onColumnsChange?: (selectedColumns: string[]) => void;
+  onSortingChange?: (
+    name: string,
+    columnTitle: string,
+    ascending: boolean,
+  ) => void;
 }
 
 export type TransactionsPageProps = TransactionsPageStateProps &
@@ -113,33 +118,46 @@ export class TransactionsPage extends React.Component<
   TransactionsPageProps,
   TState
 > {
+  constructor(props: TransactionsPageProps) {
+    super(props);
+    const filters = getFiltersFromQueryString(
+      this.props.history.location.search,
+    );
+
+    const trxSearchParams = getSearchParams(this.props.history.location.search);
+    this.state = {
+      pagination: {
+        pageSize: this.props.pageSize || 20,
+        current: 1,
+      },
+      search: trxSearchParams("q", "").toString(),
+      filters: filters,
+      aggregatedTs: null,
+      statementFingerprintIds: null,
+      transactionStats: null,
+      transactionFingerprintId: null,
+    };
+
+    const ascending = trxSearchParams("ascending", false).toString() === "true";
+    const columnTitle = trxSearchParams("columnTitle", undefined);
+    if (
+      this.props.onSortingChange &&
+      columnTitle &&
+      (this.props.sortSetting.columnTitle != columnTitle ||
+        this.props.sortSetting.ascending != ascending)
+    ) {
+      this.props.onSortingChange(
+        "Transactions",
+        columnTitle.toString(),
+        ascending,
+      );
+    }
+  }
+
   static defaultProps: Partial<TransactionsPageProps> = {
     isTenant: false,
   };
 
-  trxSearchParams = getSearchParams(this.props.history.location.search);
-  filters = getFiltersFromQueryString(this.props.history.location.search);
-  state: TState = {
-    sortSetting: {
-      // Sort by Execution Count column as default option.
-      ascending: this.trxSearchParams("ascending", false).toString() === "true",
-      columnTitle: this.trxSearchParams(
-        "columnTitle",
-        "execution count",
-      ).toString(),
-    },
-    pagination: {
-      pageSize: this.props.pageSize || 20,
-      current: 1,
-    },
-    search: this.trxSearchParams("q", "").toString(),
-    filters: this.filters,
-    aggregatedTs: null,
-    statementFingerprintIds: null,
-    transactionStats: null,
-    transactionFingerprintId: null,
-  };
-
   refreshData = (): void => {
     const req = statementsRequestFromProps(this.props);
     this.props.refreshData(req);
@@ -153,16 +171,16 @@ export class TransactionsPage extends React.Component<
   }
 
   onChangeSortSetting = (ss: SortSetting): void => {
-    this.setState({
-      sortSetting: ss,
-    });
     syncHistory(
       {
         ascending: ss.ascending.toString(),
         columnTitle: ss.columnTitle,
       },
       this.props.history,
     );
+    if (this.props.onSortingChange) {
+      this.props.onSortingChange("Transactions", ss.columnTitle, ss.ascending);
+    }
   };
 
   onChangePage = (current: number): void => {
@@ -284,6 +302,7 @@ export class TransactionsPage extends React.Component<
               isTenant,
               onColumnsChange,
               columns: userSelectedColumnsToShow,
+              sortSetting,
             } = this.props;
             const { pagination, search, filters } = this.state;
             const { statements, internal_app_name_prefix } = data;
@@ -435,7 +454,7 @@ export class TransactionsPage extends React.Component<
                   <TransactionsTable
                     columns={displayColumns}
                     transactions={transactionsToDisplay}
-                    sortSetting={this.state.sortSetting}
+                    sortSetting={sortSetting}
                     onChangeSortSetting={this.onChangeSortSetting}
                     pagination={pagination}
                     renderNoResult={

diff --git a/pkg/ui/workspaces/cluster-ui/src/transactionsPage/transactionsPageConnected.tsx b/pkg/ui/workspaces/cluster-ui/src/transactionsPage/transactionsPageConnected.tsx
@@ -26,12 +26,14 @@ import {
   selectTransactionsData,
   selectTransactionsLastError,
   selectTxnColumns,
+  selectSortSetting,
 } from "./transactionsPage.selectors";
 import { selectIsTenant } from "../store/uiConfig";
 import { nodeRegionsByIDSelector } from "../store/nodes";
 import { selectDateRange } from "src/statementsPage/statementsPage.selectors";
 import { StatementsRequest } from "src/api/statementsApi";
 import { actions as localStorageActions } from "../store/localStorage";
+import { actions as analyticsActions } from "../store/analytics";
 
 export const TransactionsPageConnected = withRouter(
   connect<
@@ -46,6 +48,7 @@ export const TransactionsPageConnected = withRouter(
       isTenant: selectIsTenant(state),
       dateRange: selectDateRange(state),
       columns: selectTxnColumns(state),
+      sortSetting: selectSortSetting(state),
     }),
     (dispatch: Dispatch) => ({
       refreshData: (req?: StatementsRequest) =>
@@ -71,6 +74,18 @@ export const TransactionsPageConnected = withRouter(
               selectedColumns.length === 0 ? " " : selectedColumns.join(","),
           }),
         ),
+      onSortingChange: (
+        tableName: string,
+        columnName: string,
+        ascending: boolean,
+      ) => {
+        dispatch(
+          localStorageActions.update({
+            key: "sortSetting/TransactionsPage",
+            value: { columnTitle: columnName, ascending: ascending },
+          }),
+        );
+      },
     }),
   )(TransactionsPage),
 );
diff --git a/pkg/ui/workspaces/db-console/src/views/transactions/transactionsPage.tsx b/pkg/ui/workspaces/db-console/src/views/transactions/transactionsPage.tsx
@@ -62,6 +62,12 @@ export const selectDateRange = createSelector(
   },
 );
 
+export const sortSettingLocalSetting = new LocalSetting(
+  "sortSetting/TransactionsPage",
+  (state: AdminUIState) => state.localSettings,
+  { ascending: false, columnTitle: "executionCount" },
+);
+
 export const transactionColumnsLocalSetting = new LocalSetting(
   "showColumns/TransactionPage",
   (state: AdminUIState) => state.localSettings,
@@ -78,6 +84,7 @@ const TransactionsPageConnected = withRouter(
       error: selectLastError(state),
       nodeRegions: nodeRegionsByIDSelector(state),
       columns: transactionColumnsLocalSetting.selectorToArray(state),
+      sortSetting: sortSettingLocalSetting.selector(state),
     }),
     {
       refreshData: refreshStatements,
@@ -91,6 +98,15 @@ const TransactionsPageConnected = withRouter(
         transactionColumnsLocalSetting.set(
           value.length === 0 ? " " : value.join(","),
         ),
+      onSortingChange: (
+        _tableName: string,
+        columnName: string,
+        ascending: boolean,
+      ) =>
+        sortSettingLocalSetting.set({
+          ascending: ascending,
+          columnTitle: columnName,
+        }),
     },
   )(TransactionsPage),
 );