pkg/ui: add first stage of redesigned tracez page

Begins to implement

https://www.figma.com/file/LUptGAxt5x1idq6eZLA50o/BulkIO-Traces?node-id=59%3A7958

When complete, the new pages will offer:
- A robust route structure and full redux integration for better
navigation.
- Denser information display.
- More information display, i.e. start time/duration, and expanding mutliple
tag groups.
- A new span details page, which will include child span information.

For now, this page is behind a new route with no entrypoint.
It implements the core route structure, redux selectors and
API calls.
Left for later PRs are Take Snapshot, the Span Details page, pagination,
search filtering, and View Raw JSON.

Release note: None

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

@@ -19,3 +19,4 @@ export * from "./indexActionsApi";
 export * from "./schemaInsightsApi";
 export * from "./schedulesApi";
 export * from "./sqlApi";
+export * from "./tracezApi";

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

@@ -0,0 +1,81 @@
+// Copyright 2022 The Cockroach Authors.
+//
+// Use of this software is governed by the Business Source License
+// included in the file licenses/BSL.txt.
+//
+// As of the Change Date specified in that file, in accordance with
+// the Business Source License, use of this software will be governed
+// by the Apache License, Version 2.0, included in the file
+// licenses/APL.txt.
+
+import { cockroach } from "@cockroachlabs/crdb-protobuf-client";
+import { fetchData } from "src/api";
+import TakeTracingSnapshotRequest = cockroach.server.serverpb.TakeTracingSnapshotRequest;
+
+export type ListTracingSnapshotsRequestMessage =
+  cockroach.server.serverpb.ListTracingSnapshotsRequest;
+export type ListTracingSnapshotsResponseMessage =
+  cockroach.server.serverpb.ListTracingSnapshotsResponse;
+
+export type TakeTracingSnapshotRequestMessage = TakeTracingSnapshotRequest;
+export type TakeTracingSnapshotResponseMessage =
+  cockroach.server.serverpb.TakeTracingSnapshotResponse;
+
+export type GetTracingSnapshotRequestMessage =
+  cockroach.server.serverpb.GetTracingSnapshotRequest;
+export type GetTracingSnapshotResponseMessage =
+  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;
+
+const API_PREFIX = "_admin/v1";
+
+export function listTracingSnapshots(): Promise<ListTracingSnapshotsResponseMessage> {
+  return fetchData(
+    cockroach.server.serverpb.ListTracingSnapshotsResponse,
+    `${API_PREFIX}/trace_snapshots`,
+    null,
+    null,
+    "30M", // 30 minute timeout.
+  );
+}
+
+export function takeTracingSnapshot(): Promise<TakeTracingSnapshotResponseMessage> {
+  const req = new TakeTracingSnapshotRequest();
+  return fetchData(
+    cockroach.server.serverpb.TakeTracingSnapshotResponse,
+    `${API_PREFIX}/trace_snapshots`,
+    req as any,
+    null,
+    "30M",
+  );
+}
+
+export function getTracingSnapshot(
+  snapshotID: number,
+): Promise<GetTracingSnapshotResponseMessage> {
+  return fetchData(
+    cockroach.server.serverpb.GetTracingSnapshotResponse,
+    `${API_PREFIX}/trace_snapshots/${snapshotID}`,
+    null,
+    null,
+    "30M",
+  );
+}
+
+export function getTraceForSnapshot(
+  req: GetTraceRequestMessage,
+): Promise<GetTraceResponseMessage> {
+  return fetchData(
+    cockroach.server.serverpb.GetTraceResponse,
+    `${API_PREFIX}/traces`,
+    req as any,
+    null,
+    "30M",
+  );
+}

pkg/ui/workspaces/cluster-ui/src/icon/circleFilled.tsx

@@ -12,6 +12,7 @@ import * as React from "react";
 
 interface IconProps {
   className: string;
+  viewBox?: string;
 }
 
 export function CircleFilled(props: IconProps): React.ReactElement {

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

@@ -46,6 +46,7 @@ export * from "./store";
 export * from "./transactionsPage";
 export * from "./transactionDetails";
 export * from "./text";
+export * from "./tracez";
 export { util, api };
 export * from "./sessions";
 export * from "./timeScaleDropdown";

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

@@ -0,0 +1,11 @@
+// Copyright 2022 The Cockroach Authors.
+//
+// Use of this software is governed by the Business Source License
+// included in the file licenses/BSL.txt.
+//
+// As of the Change Date specified in that file, in accordance with
+// the Business Source License, use of this software will be governed
+// by the Apache License, Version 2.0, included in the file
+// licenses/APL.txt.
+
+export * from "./snapshot";

pkg/ui/workspaces/cluster-ui/src/tracez/snapshot.module.scss

@@ -0,0 +1,110 @@
+// Copyright 2022 The Cockroach Authors.
+//
+// Use of this software is governed by the Business Source License
+// included in the file licenses/BSL.txt.
+//
+// As of the Change Date specified in that file, in accordance with
+// the Business Source License, use of this software will be governed
+// by the Apache License, Version 2.0, included in the file
+// licenses/APL.txt.
+@import "src/core/index.module.scss";
+
+.snapshots-page {
+  display: flex;
+  flex-flow: column;
+  height: 100%;
+}
+
+.no-results {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
+
+.table-row {
+  vertical-align: top;
+  height: 37px; // Override the default row-wrapper height of 70px.
+}
+
+.table-cell {
+  padding: 4px 0px 4px 16px; // For vertical, override default of 16px.
+}
+
+.operation-cell {
+  padding: 4px 0px 4px 0px; // For vertical, override default of 16px.
+}
+
+.tag {
+  padding: 4px;
+  border-radius: 6px;
+  color: $colors--primary-blue-4;
+  background-color: $colors--primary-blue-1;
+  align-self: start;
+  justify-self: start;
+}
+
+.single-tags-row {
+  display: flex;
+  flex-flow: row;
+  gap: 4px;
+  flex-wrap: wrap;
+}
+
+.icon-cell {
+  padding: 4px 4px 4px 0px;
+  margin: 0px;
+  display: flex;
+  justify-content: right;
+}
+
+.table-cell-time {
+  padding: 4px 16px; // For vertical, override default of 16px.
+  display: flex;
+  justify-content: right;
+}
+
+.table-title-time {
+  width: 20ch;
+}
+
+.tag-group {
+  display: flex;
+  flex-direction: row;
+}
+
+.tag-cell {
+  gap: 4px;
+  display: flex;
+  flex-direction: column;
+}
+
+.plus-minus {
+  border-style: solid;
+  border-width: 1px;
+  height: 13px;
+  width: 13px;
+  margin-top: 4px;
+  fill: $colors--primary-blue-4;
+  border-color: $colors--primary-blue-4;
+  border-radius: 2px;
+}
+
+.icon-red {
+  fill: red;
+  height: 10px;
+  width: 10px;
+  padding-top: 1px;
+}
+
+.icon-green {
+  fill: green;
+  height: 10px;
+  width: 10px;
+  padding-top: 1px;
+}
+
+.section {
+  flex: 0 0 auto;
+  padding: 12px 24px 140px 0px;
+}

pkg/ui/workspaces/cluster-ui/src/tracez/snapshot/index.ts

@@ -0,0 +1,12 @@
+// Copyright 2022 The Cockroach Authors.
+//
+// Use of this software is governed by the Business Source License
+// included in the file licenses/BSL.txt.
+//
+// As of the Change Date specified in that file, in accordance with
+// the Business Source License, use of this software will be governed
+// by the Apache License, Version 2.0, included in the file
+// licenses/APL.txt.
+
+export * from "./snapshotPage";
+export * from "./spanTable";

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

@@ -0,0 +1,85 @@
+// Copyright 2022 The Cockroach Authors.
+//
+// Use of this software is governed by the Business Source License
+// included in the file licenses/BSL.txt.
+//
+// As of the Change Date specified in that file, in accordance with
+// the Business Source License, use of this software will be governed
+// by the Apache License, Version 2.0, included in the file
+// licenses/APL.txt.
+
+import { SnapshotPage, SnapshotPageProps } from "./snapshotPage";
+import { render } from "@testing-library/react";
+import React from "react";
+import { MemoryRouter } from "react-router-dom";
+import * as H from "history";
+
+import { SortSetting } from "../../sortedtable";
+import { cockroach } from "@cockroachlabs/crdb-protobuf-client";
+import GetTracingSnapshotResponse = cockroach.server.serverpb.GetTracingSnapshotResponse;
+
+const getMockSnapshotPageProps = (): SnapshotPageProps => {
+  const history = H.createHashHistory();
+  return {
+    location: history.location,
+    history,
+    match: {
+      url: "",
+      path: history.location.pathname,
+      isExact: false,
+      params: {},
+    },
+    refreshSnapshot: (id: number): void => {},
+    refreshSnapshots: (): void => {},
+    setSort: (value: SortSetting): void => {},
+    snapshotError: undefined,
+    snapshotLoading: false,
+    snapshots: undefined,
+    snapshotsError: undefined,
+    snapshotsLoading: false,
+    sort: undefined,
+    snapshot: null,
+  };
+};
+
+describe("Snapshot", () => {
+  it("renders expected snapshot table columns", () => {
+    const props = getMockSnapshotPageProps();
+    props.snapshot = GetTracingSnapshotResponse.fromObject({
+      snapshot: {
+        spans: [{ span_id: 1 }],
+      },
+    });
+    const { getAllByText } = render(
+      <MemoryRouter>
+        <SnapshotPage {...props} />
+      </MemoryRouter>,
+    );
+    const expectedColumnTitles = [
+      "Span",
+      "Start Time (UTC)",
+      "Duration",
+      "Tags",
+    ];
+
+    for (const columnTitle of expectedColumnTitles) {
+      getAllByText(columnTitle);
+    }
+  });
+
+  it("renders a message when the table is empty", () => {
+    const { getByText } = render(
+      <MemoryRouter>
+        <SnapshotPage {...getMockSnapshotPageProps()} />
+      </MemoryRouter>,
+    );
+    const expectedText = [
+      "No spans to show",
+      "Spans provide debug information.",
+    ];
+
+    for (const text of expectedText) {
+      getByText(text);
+    }
+  });
+});