ui: add Transaction and Statement fingerprint id

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

@@ -36,6 +36,7 @@ type ICollectedStatementStatistics =
   cockroach.server.serverpb.StatementsResponse.ICollectedStatementStatistics;
 export interface StatementsSummaryData {
   statementFingerprintID: string;
+  statementFingerprintHexID: string;
   statement: string;
   statementSummary: string;
   aggregatedTs: number;
@@ -175,6 +176,8 @@ export const selectStatements = createSelector(
       if (!(key in statsByStatementKey)) {
         statsByStatementKey[key] = {
           statementFingerprintID: stmt.statement_fingerprint_id?.toString(),
+          statementFingerprintHexID:
+            stmt.statement_fingerprint_id?.toString(16),
           statement: stmt.statement,
           statementSummary: stmt.statement_summary,
           aggregatedTs: stmt.aggregated_ts,
@@ -192,6 +195,7 @@ export const selectStatements = createSelector(
       const stmt = statsByStatementKey[key];
       return {
         aggregatedFingerprintID: stmt.statementFingerprintID,
+        aggregatedFingerprintHexID: stmt.statementFingerprintHexID,
         label: stmt.statement,
         summary: stmt.statementSummary,
         aggregatedTs: stmt.aggregatedTs,

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

@@ -86,6 +86,7 @@ describe("StatementsPage", () => {
 
     const statement: AggregateStatistics = {
       aggregatedFingerprintID: "",
+      aggregatedFingerprintHexID: "",
       aggregatedTs: 0,
       aggregationInterval: 0,
       database: "",

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

@@ -166,16 +166,21 @@ export function filterBySearchQuery(
   search: string,
 ): boolean {
   const matchString = statement.label.toLowerCase();
+  const matchFingerPrintId = statement.aggregatedFingerprintHexID;
+
   // If search term is wrapped by quotes, do the exact search term.
   if (search.startsWith('"') && search.endsWith('"')) {
     search = search.substring(1, search.length - 1);
-    return matchString.includes(search);
+
+    return matchString.includes(search) || matchFingerPrintId.includes(search);
   }
 
   return search
     .toLowerCase()
     .split(" ")
-    .every(val => matchString.includes(val));
+    .every(
+      val => matchString.includes(val) || matchFingerPrintId.includes(val),
+    );
 }
 
 export class StatementsPage extends React.Component<

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

@@ -193,11 +193,19 @@ function makeCommonColumns(
         TimestampToNumber(stmt.stats.last_exec_timestamp),
       showByDefault: false,
     },
+    {
+      name: "statementFingerprintId",
+      title: statisticsTableTitles.statementFingerprintId(statType),
+      cell: (stmt: AggregateStatistics) => stmt.aggregatedFingerprintHexID,
+      sort: (stmt: AggregateStatistics) => stmt.aggregatedFingerprintHexID,
+      showByDefault: false,
+    },
   ];
 }
 
 export interface AggregateStatistics {
   aggregatedFingerprintID: string;
+  aggregatedFingerprintHexID: string;
   // label is either shortStatement (StatementsPage) or nodeId (StatementDetails).
   label: string;
   // summary exists only for SELECT/INSERT/UPSERT/UPDATE statements, and is

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

@@ -60,6 +60,8 @@ export const statisticsColumnLabels = {
   transactions: "Transactions",
   workloadPct: "% of All Runtime",
   lastExecTimestamp: "Last Execution Time (UTC)",
+  statementFingerprintId: "Statement Fingerprint ID",
+  transactionFingerprintId: "Transaction Fingerprint ID",
 };
 
 export const contentModifiers = {
@@ -242,6 +244,32 @@ export const statisticsTableTitles: StatisticTableTitleType = {
       </Tooltip>
     );
   },
+  statementFingerprintId: () => {
+    return (
+      <Tooltip
+        style="tableTitle"
+        placement="bottom"
+        content={
+          "The statement fingerprint id is the combination of the statement fingerprint, the database it was executed on, the transaction type (implicit or explicit) and whether execution has failed (true or false)."
+        }
+      >
+        {getLabel("statementFingerprintId")}
+      </Tooltip>
+    );
+  },
+  transactionFingerprintId: () => {
+    return (
+      <Tooltip
+        style="tableTitle"
+        placement="bottom"
+        content={
+          "The transaction fingerprint id represents the list of statement fingerprint ids in order of execution within that transaction."
+        }
+      >
+        {getLabel("transactionFingerprintId")}
+      </Tooltip>
+    );
+  },
   actions: () => {
     return (
       <Tooltip

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

@@ -102,6 +102,7 @@ export const aggregateStatements = (
     if (!(key in statsKey)) {
       statsKey[key] = {
         aggregatedFingerprintID: s.statement_fingerprint_id?.toString(),
+        aggregatedFingerprintHexID: s.statement_fingerprint_id.toString(16),
         label: s.statement,
         summary: s.statement_summary,
         aggregatedTs: s.aggregated_ts,
@@ -129,19 +130,29 @@ export const searchTransactionsData = (
     searchTerms = [search.substring(1, search.length - 1)];
   }
 
+  if (!search) {
+    return transactions;
+  }
+
   return transactions.filter((t: Transaction) =>
-    search
-      ? searchTerms.every(val =>
-          collectStatementsText(
-            getStatementsByFingerprintId(
-              t.stats_data.statement_fingerprint_ids,
-              statements,
-            ),
-          )
-            .toLowerCase()
-            .includes(val.toLowerCase()),
+    searchTerms.every(val => {
+      if (
+        collectStatementsText(
+          getStatementsByFingerprintId(
+            t.stats_data.statement_fingerprint_ids,
+            statements,
+          ),
         )
-      : true,
+          .toLowerCase()
+          .includes(val.toLowerCase())
+      ) {
+        return true;
+      }
+
+      return t.stats_data.transaction_fingerprint_id
+        ?.toString(16)
+        ?.includes(val);
+    }),
   );
 };
 

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

@@ -230,6 +230,15 @@ export function makeTransactionsColumns(
       sort: (item: TransactionInfo) =>
         item.stats_data.statement_fingerprint_ids.length,
     },
+    {
+      name: "transactionFingerprintId",
+      title: statisticsTableTitles.transactionFingerprintId(statType),
+      cell: (item: TransactionInfo) =>
+        item.stats_data?.transaction_fingerprint_id.toString(16),
+      sort: (item: TransactionInfo) =>
+        item.stats_data?.transaction_fingerprint_id.toString(16),
+      showByDefault: false,
+    },
   ].filter(c => !(isTenant && c.hideIfTenant));
 }
 

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

@@ -81,6 +81,7 @@ type StatementStatistics = util.StatementStatistics;
 
 interface StatementsSummaryData {
   statementFingerprintID: string;
+  statementFingerprintHexID: string;
   statement: string;
   statementSummary: string;
   aggregatedTs: number;
@@ -140,6 +141,8 @@ export const selectStatements = createSelector(
       if (!(key in statsByStatementKey)) {
         statsByStatementKey[key] = {
           statementFingerprintID: stmt.statement_fingerprint_id?.toString(),
+          statementFingerprintHexID:
+            stmt.statement_fingerprint_id?.toString(16),
           statement: stmt.statement,
           statementSummary: stmt.statement_summary,
           aggregatedTs: stmt.aggregated_ts,
@@ -157,6 +160,7 @@ export const selectStatements = createSelector(
       const stmt = statsByStatementKey[key];
       return {
         aggregatedFingerprintID: stmt.statementFingerprintID,
+        aggregatedFingerprintHexID: stmt.statementFingerprintHexID,
         label: stmt.statement,
         summary: stmt.statementSummary,
         aggregatedTs: stmt.aggregatedTs,