Merge #94701

94701: pkg/ui: Swap in new Snapshot debug component r=benbardin a=benbardin The PR focuses on the routes. I'll delete deprecated code in a follow-up diff. Part of: #83679 Release note: None Co-authored-by: Ben Bardin <[email protected]>
cockroachdb · Jan 11, 2023 · 2b8d85b · 2b8d85b
2 parents 1f2e66a + 7ab3e34
commit 2b8d85b
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 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
@@ -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
@@ -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
@@ -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