From 7ab3e34f3b787bcaf33590bacee82eb0de77cfac Mon Sep 17 00:00:00 2001
From: Ben Bardin <bardin@cockroachlabs.com>
Date: Wed, 4 Jan 2023 11:44:20 -0500
Subject: [PATCH] pkg/ui: Swap in new Snapshot debug component

Part of: https://github.com/cockroachdb/cockroach/issues/83679

Release note: None
---
 .../src/tracez/snapshot/snapshotPage.tsx           | 14 ++++++++++----
 pkg/ui/workspaces/db-console/src/app.spec.tsx      |  4 ++--
 pkg/ui/workspaces/db-console/src/app.tsx           |  4 +---
 3 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/pkg/ui/workspaces/cluster-ui/src/tracez/snapshot/snapshotPage.tsx b/pkg/ui/workspaces/cluster-ui/src/tracez/snapshot/snapshotPage.tsx
index 008c6abc2d8f..458f3325b99f 100644
--- a/pkg/ui/workspaces/cluster-ui/src/tracez/snapshot/snapshotPage.tsx
+++ b/pkg/ui/workspaces/cluster-ui/src/tracez/snapshot/snapshotPage.tsx
@@ -38,7 +38,7 @@ import { Breadcrumbs } from "src/breadcrumbs";
 // In order to provide that feature with respectable performance and an easy
 // GUI, we toggle between one of several components here based on the URL
 // params. To manage that navigation, we need to know the route prefix.
-export const ROUTE_PREFIX = "/debug/tracez_v2/";
+export const ROUTE_PREFIX = "/debug/tracez/";
 
 export interface SnapshotPageStateProps {
   sort: SortSetting;
@@ -308,11 +308,14 @@ export const SnapshotPage: React.FC<SnapshotPageProps> = props => {
 
   const breadcrumbItems = [
     {
-      link: `/debug/tracez_v2/node/${nodeID}/snapshot/${snapshotID}`,
+      link: join(ROUTE_PREFIX, `/node/${nodeID}/snapshot/${snapshotID}`),
       name: `Node ${nodeID}, Snapshot ${snapshotID}`,
     },
     {
-      link: `/debug/tracez_v2/node/${nodeID}/snapshot/${snapshotID}/span/${spanID}`,
+      link: join(
+        ROUTE_PREFIX,
+        `/node/${nodeID}/snapshot/${snapshotID}/span/${spanID}`,
+      ),
       name: `${span?.operation}`,
     },
   ];
@@ -329,7 +332,10 @@ export const SnapshotPage: React.FC<SnapshotPageProps> = props => {
         items={[
           ...breadcrumbItems,
           {
-            link: `/debug/tracez_v2/node/${nodeID}/snapshot/${snapshotID}/span/${spanID}/raw`,
+            link: join(
+              ROUTE_PREFIX,
+              `/node/${nodeID}/snapshot/${snapshotID}/span/${spanID}/raw`,
+            ),
             name: `raw trace`,
           },
         ]}
diff --git a/pkg/ui/workspaces/db-console/src/app.spec.tsx b/pkg/ui/workspaces/db-console/src/app.spec.tsx
index 77626e3da707..5b8641ddfce3 100644
--- a/pkg/ui/workspaces/db-console/src/app.spec.tsx
+++ b/pkg/ui/workspaces/db-console/src/app.spec.tsx
@@ -498,9 +498,9 @@ describe("Routing to", () => {
     });
   });
 
-  describe("'/debug/tracez_v2/node/:nodeID/snapshot/:snapshotID' path", () => {
+  describe("'/debug/tracez/node/:nodeID/snapshot/:snapshotID' path", () => {
     test("routes to <SnapshotPage> component", () => {
-      navigateToPath("/debug/tracez_v2/node/1/snapshot/12345");
+      navigateToPath("/debug/tracez/node/1/snapshot/12345");
       screen.getByTestId("snapshotPage");
     });
   });
diff --git a/pkg/ui/workspaces/db-console/src/app.tsx b/pkg/ui/workspaces/db-console/src/app.tsx
index 13b48d73a96f..8e7eadcd6150 100644
--- a/pkg/ui/workspaces/db-console/src/app.tsx
+++ b/pkg/ui/workspaces/db-console/src/app.tsx
@@ -80,7 +80,6 @@ import HotRangesPage from "src/views/hotRanges/index";
 import RecentStatementDetails from "./views/statements/recentStatementDetailsConnected";
 import RecentTransactionDetails from "./views/transactions/recentTransactionDetailsConnected";
 import "styl/app.styl";
-import { Tracez } from "src/views/tracez/tracez";
 import InsightsOverviewPage from "./views/insights/insightsOverview";
 import TransactionInsightDetailsPage from "./views/insights/transactionInsightDetailsPage";
 import StatementInsightDetailsPage from "./views/insights/statementInsightDetailsPage";
@@ -326,8 +325,7 @@ export const App: React.FC<AppProps> = (props: AppProps) => {
 
                   {/* debug pages */}
                   <Route exact path="/debug" component={Debug} />
-                  <Route exact path="/debug/tracez" component={Tracez} />
-                  <Route path="/debug/tracez_v2" component={SnapshotRouter} />
+                  <Route path="/debug/tracez" component={SnapshotRouter} />
                   <Route exact path="/debug/redux" component={ReduxDebug} />
                   <Route exact path="/debug/chart" component={CustomChart} />
                   <Route