pkg/ui: Make tracez v2 page node-aware

Adds an easy toggle for selecting across nodes without reproxying every time.
If no node is provided, will redirect with the local node by default, and
attempt to look up its ID.

Release note: None

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

@@ -10,68 +10,86 @@
 
 import { cockroach } from "@cockroachlabs/crdb-protobuf-client";
 import { fetchData } from "src/api";
-import TakeTracingSnapshotRequest = cockroach.server.serverpb.TakeTracingSnapshotRequest;
 
-export type ListTracingSnapshotsRequestMessage =
+export type ListTracingSnapshotsRequest =
   cockroach.server.serverpb.ListTracingSnapshotsRequest;
-export type ListTracingSnapshotsResponseMessage =
+export type ListTracingSnapshotsResponse =
   cockroach.server.serverpb.ListTracingSnapshotsResponse;
 
-export type TakeTracingSnapshotRequestMessage = TakeTracingSnapshotRequest;
-export type TakeTracingSnapshotResponseMessage =
+export const TakeTracingSnapshotRequest =
+  cockroach.server.serverpb.TakeTracingSnapshotRequest;
+export type TakeTracingSnapshotResponse =
   cockroach.server.serverpb.TakeTracingSnapshotResponse;
 
-export type GetTracingSnapshotRequestMessage =
+export type GetTracingSnapshotRequest =
   cockroach.server.serverpb.GetTracingSnapshotRequest;
-export type GetTracingSnapshotResponseMessage =
+export type GetTracingSnapshotResponse =
   cockroach.server.serverpb.GetTracingSnapshotResponse;
 
 export type Span = cockroach.server.serverpb.ITracingSpan;
 export type Snapshot = cockroach.server.serverpb.ITracingSnapshot;
 
-export type GetTraceRequestMessage = cockroach.server.serverpb.GetTraceRequest;
-export type GetTraceResponseMessage =
-  cockroach.server.serverpb.GetTraceResponse;
+export type GetTraceRequest = cockroach.server.serverpb.GetTraceRequest;
+export type GetTraceResponse = cockroach.server.serverpb.GetTraceResponse;
 
 const API_PREFIX = "_admin/v1";
 
-export function listTracingSnapshots(): Promise<ListTracingSnapshotsResponseMessage> {
+const proxyNonLocalNode = (path: string, nodeID: string): string => {
+  if (nodeID === "local") {
+    // While the server is clever enough to do the smart thing around proxying to node
+    // "local," it still queries gossip while doing it. We'd like to avoid a hard dependency
+    // on that to support malfunctioning clusters or nodes.
+    return path;
+  }
+  return path + `?remote_node_id=${nodeID}`;
+};
+
+export function listTracingSnapshots(
+  nodeID: string,
+): Promise<ListTracingSnapshotsResponse> {
   return fetchData(
     cockroach.server.serverpb.ListTracingSnapshotsResponse,
-    `${API_PREFIX}/trace_snapshots`,
+    proxyNonLocalNode(`${API_PREFIX}/trace_snapshots`, nodeID),
     null,
     null,
   );
 }
 
-export function takeTracingSnapshot(): Promise<TakeTracingSnapshotResponseMessage> {
+export function takeTracingSnapshot(
+  nodeID: string,
+): Promise<TakeTracingSnapshotResponse> {
   const req = new TakeTracingSnapshotRequest();
   return fetchData(
     cockroach.server.serverpb.TakeTracingSnapshotResponse,
-    `${API_PREFIX}/trace_snapshots`,
+    proxyNonLocalNode(`${API_PREFIX}/trace_snapshots`, nodeID),
+    cockroach.server.serverpb.TakeTracingSnapshotRequest,
     req as any,
-    null,
   );
 }
 
-export function getTracingSnapshot(
-  snapshotID: number,
-): Promise<GetTracingSnapshotResponseMessage> {
+export function getTracingSnapshot(req: {
+  nodeID: string;
+  snapshotID: number;
+}): Promise<GetTracingSnapshotResponse> {
   return fetchData(
     cockroach.server.serverpb.GetTracingSnapshotResponse,
-    `${API_PREFIX}/trace_snapshots/${snapshotID}`,
+    proxyNonLocalNode(
+      `${API_PREFIX}/trace_snapshots/${req.snapshotID}`,
+      req.nodeID,
+    ),
     null,
     null,
   );
 }
 
-export function getTraceForSnapshot(
-  req: GetTraceRequestMessage,
-): Promise<GetTraceResponseMessage> {
+export function getTraceForSnapshot(req: {
+  nodeID: string;
+  req: GetTraceRequest;
+}): Promise<GetTraceResponse> {
   return fetchData(
     cockroach.server.serverpb.GetTraceResponse,
-    `${API_PREFIX}/traces`,
-    req as any,
-    null,
+    proxyNonLocalNode(`${API_PREFIX}/traces`, req.nodeID),
+    cockroach.server.serverpb.GetTraceRequest,
+    req.req as any,
   );
 }

pkg/ui/workspaces/cluster-ui/src/tracez/snapshot/snapshotPage.spec.tsx

@@ -16,7 +16,9 @@ import * as H from "history";
 
 import { SortSetting } from "../../sortedtable";
 import { cockroach } from "@cockroachlabs/crdb-protobuf-client";
+import { TakeTracingSnapshotResponseMessage } from "src/api/tracezApi";
 import GetTracingSnapshotResponse = cockroach.server.serverpb.GetTracingSnapshotResponse;
+import ListTracingSnapshotsResponse = cockroach.server.serverpb.ListTracingSnapshotsResponse;
 
 const getMockSnapshotPageProps = (): SnapshotPageProps => {
   const history = H.createHashHistory();
@@ -29,8 +31,14 @@ const getMockSnapshotPageProps = (): SnapshotPageProps => {
       isExact: false,
       params: {},
     },
-    refreshSnapshot: (id: number): void => {},
-    refreshSnapshots: (): void => {},
+    refreshSnapshot: (_req: { nodeID: number; snapshotID: number }): void => {},
+    refreshSnapshots: (_id: number): void => {},
+    defaultNodeID: undefined,
+    nodesLoading: false,
+    refreshNodes: (): void => {},
+    takeSnapshot(_nodeID: number): Promise<TakeTracingSnapshotResponseMessage> {
+      return Promise.resolve(undefined);
+    },
     setSort: (value: SortSetting): void => {},
     snapshotError: undefined,
     snapshotLoading: false,
@@ -45,6 +53,7 @@ const getMockSnapshotPageProps = (): SnapshotPageProps => {
 describe("Snapshot", () => {
   it("renders expected snapshot table columns", () => {
     const props = getMockSnapshotPageProps();
+    props.match.params.snapshotID = "1";
     props.snapshot = GetTracingSnapshotResponse.fromObject({
       snapshot: {
         spans: [{ span_id: 1 }],