ui: add transaction diagnostics api client and page

This change introduces a transaction diagnostics request page that
lists oustanding and completed requests along with the transaction IDs
or fingerprints. If the bundle has not yet been captured, we can only
show the transactionId, otherwise we'll have the fingeprint available
to display as well. In both cases, the ID or fingerprint will link to
the corresponding SQL Activity page for that Transaction.

This change also converts StatementDiagnosticsHistory into a
functional component which uses `swr` for loading data.

This change adds a diagnostics history page with tabs for Statements
and Transactions that switches between the components above.

Resolves: CRDB-53543
Epic: CRDB-53541
Release note (db console change): The statement diagnostics page in
Advanced Debug now also displays any active transaction diagnostics
requests in a separate tab

Release note: None

Author: dhartunian

pkg/ui/pnpm-lock.yaml

@@ -5,6 +5,7 @@
 
 export * from "./fetchData";
 export * from "./statementDiagnosticsApi";
+export * from "./transactionDiagnosticsApi";
 export * from "./statementsApi";
 export * from "./basePath";
 export * from "./nodesApi";

pkg/ui/workspaces/cluster-ui/src/api/index.ts

@@ -0,0 +1,133 @@
+// Copyright 2025 The Cockroach Authors.
+//
+// Use of this software is governed by the CockroachDB Software License
+// included in the /LICENSE file.
+
+import { cockroach } from "@cockroachlabs/crdb-protobuf-client";
+import Long from "long";
+import moment from "moment-timezone";
+
+import { fetchData } from "src/api";
+
+import { DurationToMomentDuration, NumberToDuration } from "../util";
+
+const TRANSACTION_DIAGNOSTICS_PATH = "_status/txndiagreports";
+const CANCEL_TRANSACTION_DIAGNOSTICS_PATH =
+  TRANSACTION_DIAGNOSTICS_PATH + "/cancel";
+
+export type TransactionDiagnosticsReport = {
+  id: string;
+  transaction_fingerprint: string;
+  transaction_fingerprint_id: bigint;
+  statement_fingerprint_ids: Uint8Array[];
+  completed: boolean;
+  transaction_diagnostics_id?: string;
+  requested_at: moment.Moment;
+  min_execution_latency?: moment.Duration;
+  expires_at?: moment.Moment;
+  sampling_probability?: number;
+  redacted: boolean;
+  username: string;
+};
+
+export type TransactionDiagnosticsResponse = TransactionDiagnosticsReport[];
+
+export async function getTransactionDiagnosticsReports(): Promise<TransactionDiagnosticsResponse> {
+  const response = await fetchData(
+    cockroach.server.serverpb.TransactionDiagnosticsReportsResponse,
+    TRANSACTION_DIAGNOSTICS_PATH,
+  );
+  return response.reports.map(report => {
+    const minExecutionLatency = report.min_execution_latency
+      ? DurationToMomentDuration(report.min_execution_latency)
+      : null;
+    let txnId = BigInt(0);
+    if (
+      report.transaction_fingerprint_id &&
+      report.transaction_fingerprint_id.length >= 8
+    ) {
+      // Note: the probuf code constructs the Uint8Array fingeprint
+      // using a shared underlying buffer so we need to use its
+      // specific offset when decoding the Uint64 within.
+      const dv = new DataView(report.transaction_fingerprint_id.buffer);
+      txnId = dv.getBigUint64(report.transaction_fingerprint_id.byteOffset);
+    }
+    return {
+      id: report.id.toString(),
+      transaction_fingerprint: report.transaction_fingerprint,
+      transaction_fingerprint_id: txnId,
+      statement_fingerprint_ids: report.statement_fingerprint_ids,
+      completed: report.completed,
+      transaction_diagnostics_id: report.transaction_diagnostics_id?.toString(),
+      requested_at: moment.unix(report.requested_at?.seconds.toNumber()),
+      min_execution_latency: minExecutionLatency,
+      expires_at: moment.unix(report.expires_at?.seconds.toNumber()),
+      sampling_probability: report.sampling_probability,
+      redacted: report.redacted,
+      username: report.username,
+    };
+  });
+}
+
+export type InsertTxnDiagnosticRequest = {
+  transactionFingerprintId: Uint8Array;
+  statementFingerprintIds: Uint8Array[];
+  samplingProbability?: number;
+  minExecutionLatencySeconds?: number;
+  expiresAfterSeconds?: number;
+  redacted: boolean;
+};
+
+export type InsertTxnDiagnosticResponse = {
+  req_resp: boolean;
+};
+
+export async function createTransactionDiagnosticsReport(
+  req: InsertTxnDiagnosticRequest,
+): Promise<InsertTxnDiagnosticResponse> {
+  return fetchData(
+    cockroach.server.serverpb.CreateTransactionDiagnosticsReportResponse,
+    TRANSACTION_DIAGNOSTICS_PATH,
+    cockroach.server.serverpb.CreateTransactionDiagnosticsReportRequest,
+    new cockroach.server.serverpb.CreateTransactionDiagnosticsReportRequest({
+      transaction_fingerprint_id: req.transactionFingerprintId,
+      statement_fingerprint_ids: req.statementFingerprintIds,
+      sampling_probability: req.samplingProbability,
+      min_execution_latency: NumberToDuration(req.minExecutionLatencySeconds),
+      expires_at: NumberToDuration(req.expiresAfterSeconds),
+      redacted: req.redacted,
+    }),
+  ).then(response => {
+    return {
+      req_resp: response.report !== null,
+    };
+  });
+}
+
+export type CancelTxnDiagnosticRequest = {
+  requestId: string;
+};
+
+export type CancelTxnDiagnosticResponse = {
+  txn_diag_req_id: string;
+};
+
+export async function cancelTransactionDiagnosticsReport(
+  req: CancelTxnDiagnosticRequest,
+): Promise<CancelTxnDiagnosticResponse> {
+  return fetchData(
+    cockroach.server.serverpb.CancelTransactionDiagnosticsReportResponse,
+    CANCEL_TRANSACTION_DIAGNOSTICS_PATH,
+    cockroach.server.serverpb.CancelTransactionDiagnosticsReportRequest,
+    new cockroach.server.serverpb.CancelTransactionDiagnosticsReportRequest({
+      request_id: Long.fromString(req.requestId),
+    }),
+  ).then(response => {
+    if (response.error) {
+      throw new Error(response.error);
+    }
+    return {
+      txn_diag_req_id: req.requestId,
+    };
+  });
+}

pkg/ui/workspaces/cluster-ui/src/api/transactionDiagnosticsApi.ts

@@ -10,9 +10,9 @@ import { TimeScale, toDateRange } from "src/timeScaleDropdown";
 
 import { StatementDiagnosticsReport } from "../../api";
 
-export function getDiagnosticsStatus(
-  diagnosticsRequest: StatementDiagnosticsReport,
-): DiagnosticStatuses {
+export function getDiagnosticsStatus(diagnosticsRequest: {
+  completed: boolean;
+}): DiagnosticStatuses {
   if (diagnosticsRequest.completed) {
     return "READY";
   }

pkg/ui/workspaces/cluster-ui/src/statementDetails/diagnostics/diagnosticsUtils.ts

@@ -72,6 +72,7 @@
     "redux-saga": "^1.1.3",
     "redux-thunk": "^2.3.0",
     "reselect": "^4.0.0",
+    "swr": "2.2.5",
     "uplot": "^1.6.19",
     "whatwg-fetch": "^2.0.3"
   },

pkg/ui/workspaces/db-console/package.json

@@ -66,6 +66,7 @@ import { ConnectedDecommissionedNodeHistory } from "src/views/reports";
 import Certificates from "src/views/reports/containers/certificates";
 import CustomChart from "src/views/reports/containers/customChart";
 import Debug from "src/views/reports/containers/debug";
+import DiagnosticsHistoryPage from "src/views/reports/containers/diagnosticsHistoryPage";
 import EnqueueRange from "src/views/reports/containers/enqueueRange";
 import HotRanges from "src/views/reports/containers/hotranges";
 import Localities from "src/views/reports/containers/localities";
@@ -75,7 +76,6 @@ import ProblemRanges from "src/views/reports/containers/problemRanges";
 import Range from "src/views/reports/containers/range";
 import ReduxDebug from "src/views/reports/containers/redux";
 import Settings from "src/views/reports/containers/settings";
-import StatementsDiagnosticsHistoryView from "src/views/reports/containers/statementDiagnosticsHistory";
 import Stores from "src/views/reports/containers/stores";
 import ScheduleDetails from "src/views/schedules/scheduleDetails";
 import SchedulesPage from "src/views/schedules/schedulesPage";
@@ -467,8 +467,14 @@ export const App: React.FC<AppProps> = (props: AppProps) => {
                         />
                         <Route
                           exact
-                          path={`/reports/statements/diagnosticshistory`}
-                          component={StatementsDiagnosticsHistoryView}
+                          path={`/reports/diagnosticshistory`}
+                          component={DiagnosticsHistoryPage}
+                        />
+                        {/* Redirect old statement diagnostics route to new tabbed page */}
+                        <Redirect
+                          exact
+                          from={`/reports/statements/diagnosticshistory`}
+                          to={`/reports/diagnosticshistory?tab=Statements`}
                         />
                         {/* hot ranges */}
                         <Route

pkg/ui/workspaces/db-console/src/app.tsx

@@ -229,9 +229,9 @@ function StatementDiagnosticsSelector(props: {
   return (
     canSeeDebugPanelLink && (
       <DebugPanelLink
-        name="Statement Diagnostics History"
-        url="#/reports/statements/diagnosticshistory"
-        note="View the history of statement diagnostics requests"
+        name="Diagnostics History"
+        url="#/reports/diagnosticshistory"
+        note="View the history of statement and transaction diagnostics requests"
       />
     )
   );