From d8f099b478534c8b6aaa3fd8d084b91b612ecad6 Mon Sep 17 00:00:00 2001 From: Xin Hao Zhang Date: Tue, 21 Mar 2023 16:52:08 -0400 Subject: [PATCH] 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' --- .../workspaces/cluster-ui/src/api/statementsApi.ts | 3 ++- .../src/statementsPage/statementsPage.fixture.ts | 2 +- .../src/store/localStorage/localStorage.reducer.ts | 4 ++-- .../cluster-ui/src/util/sqlActivityConstants.ts | 12 ++++++++---- .../src/views/statements/statementsPage.tsx | 2 +- .../src/views/transactions/transactionsPage.tsx | 2 +- 6 files changed, 15 insertions(+), 10 deletions(-) diff --git a/pkg/ui/workspaces/cluster-ui/src/api/statementsApi.ts b/pkg/ui/workspaces/cluster-ui/src/api/statementsApi.ts index ac8a795c0be6..e637684f6abe 100644 --- 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 index a51b8b04381a..1710bafc6c51 100644 --- 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 index b8c6ae3ae887..372e89a1a3dc 100644 --- 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 index 2bd6d353eee5..65b7fbe66069 100644 --- 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 index 9472b5b900e3..04adb3a1855e 100644 --- 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 index 77cb34167f82..232d05007f6f 100644 --- 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(