ui: proper handle of unset app name

Previously, if a filter for `unset` app name
was selected on Statement page, the Stament Details
page was not finding the correct values.
Now if no filter is selected, no search params is
passed to the Details page. If there is an empty value
for the appNames on request, is looking for unset.

This commit also creates a constant for the unset value
and replaces all places to use the constant instead.

Fixes #83002

Release note (bug fix): Statement Details now find the stats
when the `unset` app filter is selected.

pkg/server/combined_statement_stats.go

@@ -428,6 +428,9 @@ func getStatementDetailsQueryClausesAndArgs(
 		if !(len(req.AppNames) == 1 && req.AppNames[0] == "") {
 			buffer.WriteString(" AND (")
 			for i, app := range req.AppNames {
+				if app == "(unset)" {
+					app = ""
+				}
 				if i != 0 {
 					args = append(args, app)
 					buffer.WriteString(fmt.Sprintf(" OR app_name = $%d", len(args)))

pkg/ui/workspaces/cluster-ui/src/sessions/sessionsPage.tsx

@@ -59,7 +59,7 @@ import sessionPageStyles from "./sessionPage.module.scss";
 import ColumnsSelector, {
   SelectOption,
 } from "../columnsSelector/columnsSelector";
-import { TimestampToMoment } from "src/util";
+import { TimestampToMoment, unset } from "src/util";
 import moment from "moment";
 import {
   getLabel,
@@ -104,9 +104,12 @@ export type SessionsPageProps = OwnProps & RouteComponentProps;
 
 function getSessionAppFilterOptions(sessions: SessionInfo[]): string[] {
   const uniqueAppNames = new Set(
-    sessions.map(s =>
-      s.session.application_name ? s.session.application_name : "(unset)",
-    ),
+    sessions.map(s => {
+      if (s.session.application_name.startsWith("$ internal")) {
+        return "$ internal";
+      }
+      return s.session.application_name ? s.session.application_name : unset;
+    }),
   );
 
   return Array.from(uniqueAppNames).sort();
@@ -280,7 +283,7 @@ export class SessionsPage extends React.Component<
           if (apps.includes(internalAppNamePrefix)) {
             showInternal = true;
           }
-          if (apps.includes("(unset)")) {
+          if (apps.includes(unset)) {
             apps.push("");
           }
 

pkg/ui/workspaces/cluster-ui/src/statementsPage/statementsPage.selectors.ts

@@ -20,6 +20,7 @@ import {
   statementKey,
   StatementStatistics,
   TimestampToMoment,
+  unset,
 } from "src/util";
 import { cockroach } from "@cockroachlabs/crdb-protobuf-client";
 import { RouteComponentProps } from "react-router-dom";
@@ -81,9 +82,7 @@ export const selectApps = createSelector(sqlStatsSelector, sqlStatsState => {
       }
     },
   );
-  return []
-    .concat(sawBlank ? ["(unset)"] : [])
-    .concat(Object.keys(apps).sort());
+  return [].concat(sawBlank ? [unset] : []).concat(Object.keys(apps).sort());
 });
 
 // selectDatabases returns the array of all databases with statement statistics present
@@ -98,7 +97,7 @@ export const selectDatabases = createSelector(
     return Array.from(
       new Set(
         sqlStatsState.data.statements.map(s =>
-          s.key.key_data.database ? s.key.key_data.database : "(unset)",
+          s.key.key_data.database ? s.key.key_data.database : unset,
         ),
       ),
     )
@@ -154,7 +153,7 @@ export const selectStatements = createSelector(
       if (criteria.includes(state.data.internal_app_name_prefix)) {
         showInternal = true;
       }
-      if (criteria.includes("(unset)")) {
+      if (criteria.includes(unset)) {
         criteria.push("");
       }
 

pkg/ui/workspaces/cluster-ui/src/statementsPage/statementsPage.tsx

@@ -39,6 +39,7 @@ import {
   unique,
   containAny,
   syncHistory,
+  unset,
 } from "src/util";
 import {
   AggregateStatistics,
@@ -432,7 +433,7 @@ export class StatementsPage extends React.Component<
         : [];
     const databases =
       filters.database.length > 0 ? filters.database.split(",") : [];
-    if (databases.includes("(unset)")) {
+    if (databases.includes(unset)) {
       databases.push("");
     }
     const regions =

pkg/ui/workspaces/cluster-ui/src/transactionsPage/utils.ts

@@ -23,12 +23,12 @@ import {
   FixLong,
   longToInt,
   TimestampToNumber,
-  TimestampToString,
   addStatementStats,
   flattenStatementStats,
   DurationToNumber,
   computeOrUseStmtSummary,
   transactionScopedStatementKey,
+  unset,
 } from "../util";
 
 type Statement = protos.cockroach.server.serverpb.StatementsResponse.ICollectedStatementStatistics;
@@ -42,7 +42,7 @@ export const getTrxAppFilterOptions = (
   const uniqueAppNames = new Set(
     transactions
       .filter(t => !t.stats_data.app.startsWith(prefix))
-      .map(t => (t.stats_data.app ? t.stats_data.app : "(unset)")),
+      .map(t => (t.stats_data.app ? t.stats_data.app : unset)),
   );
 
   return Array.from(uniqueAppNames).sort();
@@ -166,7 +166,7 @@ export const filterTransactions = (
         if (apps.includes(internalAppNamePrefix)) {
           showInternal = true;
         }
-        if (apps.includes("(unset)")) {
+        if (apps.includes(unset)) {
           apps.push("");
         }
 

pkg/ui/workspaces/cluster-ui/src/util/constants.ts

@@ -26,6 +26,8 @@ export const sessionAttr = "session";
 export const tabAttr = "tab";
 export const tableNameAttr = "table_name";
 export const txnFingerprintIdAttr = "txn_fingerprint_id";
+export const unset = "(unset)";
+export const viewAttr = "view";
 
 export const REMOTE_DEBUGGING_ERROR_TEXT =
   "This information is not available due to the current value of the 'server.remote_debugging.mode' setting.";

pkg/ui/workspaces/db-console/src/util/constants.ts

@@ -31,5 +31,7 @@ export const {
   tabAttr,
   tableNameAttr,
   txnFingerprintIdAttr,
+  unset,
+  viewAttr,
   REMOTE_DEBUGGING_ERROR_TEXT,
 } = util;

pkg/ui/workspaces/db-console/src/views/statements/statements.spec.tsx

@@ -17,7 +17,12 @@ import { merge } from "lodash";
 
 import "src/protobufInit";
 import * as protos from "src/js/protos";
-import { appAttr, appNamesAttr, statementAttr } from "src/util/constants";
+import {
+  appAttr,
+  appNamesAttr,
+  statementAttr,
+  unset,
+} from "src/util/constants";
 import {
   selectStatements,
   selectApps,
@@ -170,7 +175,7 @@ describe("selectStatements", () => {
       ],
       timeScale,
     );
-    const props = makeRoutePropsWithApp("(unset)");
+    const props = makeRoutePropsWithApp(unset);
 
     const result = selectStatements(state, props);
 
@@ -214,7 +219,7 @@ describe("selectApps", () => {
 
     const result = selectApps(state);
 
-    assert.deepEqual(result, ["(unset)", "cockroach sql", "foobar"]);
+    assert.deepEqual(result, [unset, "cockroach sql", "foobar"]);
   });
 });
 
@@ -390,10 +395,7 @@ describe("selectStatement", () => {
       detailsC,
     ]);
     const stmtAFingerprintID = stmtA.id.toString();
-    const props = makeRoutePropsWithStatementAndApp(
-      stmtAFingerprintID,
-      "(unset)",
-    );
+    const props = makeRoutePropsWithStatementAndApp(stmtAFingerprintID, unset);
 
     const { statementDetails } = selectStatementDetails(state, props);
     const result = statementDetails.statement;

pkg/ui/workspaces/db-console/src/views/statements/statementsPage.tsx

@@ -20,7 +20,7 @@ import {
 import { CachedDataReducerState } from "src/redux/cachedDataReducer";
 import { AdminUIState, AppDispatch } from "src/redux/state";
 import { StatementsResponseMessage } from "src/util/api";
-import { appAttr } from "src/util/constants";
+import { appAttr, unset } from "src/util/constants";
 import { PrintTime } from "src/views/reports/containers/range/print";
 import { selectDiagnosticsReportsPerStatement } from "src/redux/statements/statementsSelectors";
 import {
@@ -103,7 +103,7 @@ export const selectStatements = createSelector(
       if (criteria.includes(state.data.internal_app_name_prefix)) {
         showInternal = true;
       }
-      if (criteria.includes("(unset)")) {
+      if (criteria.includes(unset)) {
         criteria.push("");
       }
 
@@ -189,7 +189,7 @@ export const selectApps = createSelector(
       },
     );
     return []
-      .concat(sawBlank ? ["(unset)"] : [])
+      .concat(sawBlank ? [unset] : [])
       .concat(Object.keys(apps))
       .sort();
   },
@@ -206,7 +206,7 @@ export const selectDatabases = createSelector(
     return Array.from(
       new Set(
         state.data.statements.map(s =>
-          s.key.key_data.database ? s.key.key_data.database : "(unset)",
+          s.key.key_data.database ? s.key.key_data.database : unset,
         ),
       ),
     )