ui: change default sort to % of All Runtime for stmts

Previously, the default sort sent to server for stmts was service lat. This commit changes it to '% Of All Runtime' since that is a more widely used option. Note that txns does not contain this column at the moment and keeps service lat as the default sort. We also now display the sort options in alphabetical order. Epic: none Release note (ui change): The default request sort for stmt fingerprint overview page is now '% of All Runtime'
cockroachdb · Mar 21, 2023 · d8f099b · d8f099b
1 parent 25f34b2
commit d8f099b
Show file tree

Hide file tree

Showing 6 changed files with 15 additions and 10 deletions.
diff --git a/pkg/ui/workspaces/cluster-ui/src/api/statementsApi.ts b/pkg/ui/workspaces/cluster-ui/src/api/statementsApi.ts
@@ -49,7 +49,8 @@ export type ErrorWithKey = {
 
 export const DEFAULT_STATS_REQ_OPTIONS = {
   limit: 100,
-  sort: SqlStatsSortOptions.SERVICE_LAT,
+  sortStmt: SqlStatsSortOptions.PCT_RUNTIME,
+  sortTxn: SqlStatsSortOptions.SERVICE_LAT,
 };
 
 // The required fields to create a stmts request.

diff --git a/pkg/ui/workspaces/cluster-ui/src/statementsPage/statementsPage.fixture.ts b/pkg/ui/workspaces/cluster-ui/src/statementsPage/statementsPage.fixture.ts
@@ -590,7 +590,7 @@ const statementsPagePropsFixture: StatementsPageProps = {
   // of 'statementKey' in appStats.ts changes.
   statementsError: null,
   limit: DEFAULT_STATS_REQ_OPTIONS.limit,
-  reqSortSetting: DEFAULT_STATS_REQ_OPTIONS.sort,
+  reqSortSetting: DEFAULT_STATS_REQ_OPTIONS.sortStmt,
   timeScale: {
     windowSize: moment.duration(5, "day"),
     sampleSize: moment.duration(5, "minutes"),

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
@@ -143,7 +143,7 @@ const initialState: LocalStorageState = {
     ) || DEFAULT_STATS_REQ_OPTIONS.limit,
   [LocalStorageKeys.STMT_FINGERPRINTS_SORT]:
     JSON.parse(localStorage.getItem(LocalStorageKeys.STMT_FINGERPRINTS_SORT)) ||
-    DEFAULT_STATS_REQ_OPTIONS.sort,
+    DEFAULT_STATS_REQ_OPTIONS.sortStmt,
   "showColumns/ActiveTransactionsPage":
     JSON.parse(localStorage.getItem("showColumns/ActiveTransactionsPage")) ??
     null,
@@ -156,7 +156,7 @@ const initialState: LocalStorageState = {
     DEFAULT_STATS_REQ_OPTIONS.limit,
   [LocalStorageKeys.TXN_FINGERPRINTS_SORT]:
     JSON.parse(localStorage.getItem(LocalStorageKeys.TXN_FINGERPRINTS_SORT)) ||
-    DEFAULT_STATS_REQ_OPTIONS.sort,
+    DEFAULT_STATS_REQ_OPTIONS.sortTxn,
   "showColumns/SessionsPage":
     JSON.parse(localStorage.getItem("showColumns/SessionsPage")) || null,
   "showColumns/StatementInsightsPage":

diff --git a/pkg/ui/workspaces/cluster-ui/src/util/sqlActivityConstants.ts b/pkg/ui/workspaces/cluster-ui/src/util/sqlActivityConstants.ts
@@ -37,12 +37,16 @@ export function getSortLabel(sort: SqlStatsSortType): string {
   }
 }
 
-export const stmtRequestSortOptions = Object.values(SqlStatsSortOptions).map(
-  sortVal => ({
+export const stmtRequestSortOptions = Object.values(SqlStatsSortOptions)
+  .map(sortVal => ({
     value: sortVal as SqlStatsSortType,
     label: getSortLabel(sortVal as SqlStatsSortType),
-  }),
-);
+  }))
+  .sort((a, b) => {
+    if (a.label < b.label) return -1;
+    if (a.label > b.label) return 1;
+    return 0;
+  });
 
 export const txnRequestSortOptions = stmtRequestSortOptions.filter(
   option =>

diff --git a/pkg/ui/workspaces/db-console/src/views/statements/statementsPage.tsx b/pkg/ui/workspaces/db-console/src/views/statements/statementsPage.tsx
@@ -289,7 +289,7 @@ export const searchLocalSetting = new LocalSetting(
 export const reqSortSetting = new LocalSetting(
   "reqSortSetting/StatementsPage",
   (state: AdminUIState) => state.localSettings,
-  api.DEFAULT_STATS_REQ_OPTIONS.sort,
+  api.DEFAULT_STATS_REQ_OPTIONS.sortStmt,
 );
 
 export const limitSetting = new LocalSetting(

diff --git a/pkg/ui/workspaces/db-console/src/views/transactions/transactionsPage.tsx b/pkg/ui/workspaces/db-console/src/views/transactions/transactionsPage.tsx
@@ -106,7 +106,7 @@ export const transactionColumnsLocalSetting = new LocalSetting(
 export const reqSortSetting = new LocalSetting(
   "reqSortSetting/TransactionsPage",
   (state: AdminUIState) => state.localSettings,
-  api.DEFAULT_STATS_REQ_OPTIONS.sort,
+  api.DEFAULT_STATS_REQ_OPTIONS.sortTxn,
 );
 
 export const limitSetting = new LocalSetting(