From cbb34918be3a7359a4b56e5e0b3b52869f4695e5 Mon Sep 17 00:00:00 2001
From: maryliag <marylia@cockroachlabs.com>
Date: Thu, 6 Apr 2023 18:45:09 -0400
Subject: [PATCH] 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.
---
 .../src/statementsPage/statementsPage.tsx     |  7 ++--
 .../src/transactionsPage/transactionsPage.tsx |  7 ++--
 .../src/util/sqlActivityConstants.ts          | 33 +++++++++++++------
 3 files changed, 33 insertions(+), 14 deletions(-)

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");