ui: search criteria ux improvements

Some of the names of sort on search criteria were
not a match for the column name on the tables, which
could cause confusion. This commit updates the values
of "P99" to "P99 Latency" and "Service Latency" to
"Statement time" and "Transaction time".

Epic: None

Release note (ui change): Update sort label
on Search Criteria to match the name on the table columns.

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 (
       <>

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 (
       <>

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,19 +66,29 @@ 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;
     if (a.label > b.label) return 1;
     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");