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
cockroachdb · Nov 9, 2022 · 9ced562 · 9ced562
1 parent 12ac878
commit 9ced562
Show file tree

Hide file tree

Showing 7 changed files with 238 additions and 78 deletions.
diff --git a/pkg/ui/workspaces/cluster-ui/src/api/tracezApi.ts b/pkg/ui/workspaces/cluster-ui/src/api/tracezApi.ts
@@ -10,68 +10,74 @@
 
 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> {
+export function listTracingSnapshots(
+  nodeID: string,
+): Promise<ListTracingSnapshotsResponse> {
+  // Note that the server is clever enough to ignore proxy requests to node "local."
   return fetchData(
     cockroach.server.serverpb.ListTracingSnapshotsResponse,
-    `${API_PREFIX}/trace_snapshots`,
+    `${API_PREFIX}/trace_snapshots?remote_node_id=${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`,
+    `${API_PREFIX}/trace_snapshots?remote_node_id=${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}`,
+    `${API_PREFIX}/trace_snapshots/${req.snapshotID}?remote_node_id=${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,
+    `${API_PREFIX}/traces?remote_node_id=${req.nodeID}`,
+    cockroach.server.serverpb.GetTraceRequest,
+    req.req as any,
   );
 }
diff --git a/pkg/ui/workspaces/cluster-ui/src/tracez/snapshot/snapshotPage.spec.tsx b/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 }],