diff --git a/pkg/ui/workspaces/cluster-ui/src/statementsPage/statementsPage.tsx b/pkg/ui/workspaces/cluster-ui/src/statementsPage/statementsPage.tsx index f408db14884d..09a61a9182d0 100644 --- a/pkg/ui/workspaces/cluster-ui/src/statementsPage/statementsPage.tsx +++ b/pkg/ui/workspaces/cluster-ui/src/statementsPage/statementsPage.tsx @@ -308,7 +308,7 @@ export class StatementsPage extends React.Component< this.props.onApplySearchCriteria( this.state.timeScale, this.state.limit, - getSortLabel(this.state.reqSortSetting), + getSortLabel(this.state.reqSortSetting, "Statement"), ); } this.refreshStatements(); @@ -594,7 +594,10 @@ export class StatementsPage extends React.Component< ); const period = timeScaleToString(this.props.timeScale); - const sortSettingLabel = getSortLabel(this.props.reqSortSetting); + const sortSettingLabel = getSortLabel( + this.props.reqSortSetting, + "Statement", + ); return ( <> diff --git a/pkg/ui/workspaces/cluster-ui/src/transactionsPage/transactionsPage.tsx b/pkg/ui/workspaces/cluster-ui/src/transactionsPage/transactionsPage.tsx index 872fbb7b9274..ef2b43a165d3 100644 --- a/pkg/ui/workspaces/cluster-ui/src/transactionsPage/transactionsPage.tsx +++ b/pkg/ui/workspaces/cluster-ui/src/transactionsPage/transactionsPage.tsx @@ -417,7 +417,7 @@ export class TransactionsPage extends React.Component< this.props.onApplySearchCriteria( this.state.timeScale, this.state.limit, - getSortLabel(this.state.reqSortSetting), + getSortLabel(this.state.reqSortSetting, "Transaction"), ); } this.refreshData(); @@ -528,7 +528,10 @@ export class TransactionsPage extends React.Component< ); const period = timeScaleToString(this.props.timeScale); - const sortSettingLabel = getSortLabel(this.props.reqSortSetting); + const sortSettingLabel = getSortLabel( + this.props.reqSortSetting, + "Transaction", + ); return ( <> diff --git a/pkg/ui/workspaces/cluster-ui/src/util/sqlActivityConstants.ts b/pkg/ui/workspaces/cluster-ui/src/util/sqlActivityConstants.ts index 1352039eaab5..ee9a52a30f9d 100644 --- a/pkg/ui/workspaces/cluster-ui/src/util/sqlActivityConstants.ts +++ b/pkg/ui/workspaces/cluster-ui/src/util/sqlActivityConstants.ts @@ -22,20 +22,23 @@ export const limitOptions = [ { value: 500, label: "500" }, ]; -export function getSortLabel(sort: SqlStatsSortType): string { +export function getSortLabel( + sort: SqlStatsSortType, + type: "Statement" | "Transaction", +): string { switch (sort) { case SqlStatsSortOptions.SERVICE_LAT: - return "Service Latency"; + return `${type} Time`; case SqlStatsSortOptions.EXECUTION_COUNT: return "Execution Count"; case SqlStatsSortOptions.CPU_TIME: return "CPU Time"; case SqlStatsSortOptions.P99_STMTS_ONLY: - return "P99"; + return "P99 Latency"; case SqlStatsSortOptions.CONTENTION_TIME: return "Contention Time"; case SqlStatsSortOptions.PCT_RUNTIME: - return "% Of All Runtime"; + return "% of All Runtime"; default: return ""; } @@ -63,7 +66,7 @@ export function getSortColumn(sort: SqlStatsSortType): string { export const stmtRequestSortOptions = Object.values(SqlStatsSortOptions) .map(sortVal => ({ value: sortVal as SqlStatsSortType, - label: getSortLabel(sortVal as SqlStatsSortType), + label: getSortLabel(sortVal as SqlStatsSortType, "Statement"), })) .sort((a, b) => { if (a.label < b.label) return -1; @@ -71,11 +74,21 @@ export const stmtRequestSortOptions = Object.values(SqlStatsSortOptions) return 0; }); -export const txnRequestSortOptions = stmtRequestSortOptions.filter( - option => - option.value !== SqlStatsSortOptions.P99_STMTS_ONLY && - option.value !== SqlStatsSortOptions.PCT_RUNTIME, -); +export const txnRequestSortOptions = Object.values(SqlStatsSortOptions) + .map(sortVal => ({ + value: sortVal as SqlStatsSortType, + label: getSortLabel(sortVal as SqlStatsSortType, "Transaction"), + })) + .sort((a, b) => { + if (a.label < b.label) return -1; + if (a.label > b.label) return 1; + return 0; + }) + .filter( + option => + option.value !== SqlStatsSortOptions.P99_STMTS_ONLY && + option.value !== SqlStatsSortOptions.PCT_RUNTIME, + ); export const STATS_LONG_LOADING_DURATION = duration(2, "s");