ui: add back option to Advanced Debug pages

pkg/ui/workspaces/db-console/src/views/cluster/containers/dataDistribution/index.tsx

@@ -35,6 +35,7 @@ import {
   selectLivenessRequestStatus,
   selectNodeRequestStatus,
 } from "src/redux/nodes";
+import { BackToAdvanceDebug } from "src/views/reports/containers/util";
 
 type DataDistributionResponse =
   cockroach.server.serverpb.DataDistributionResponse;
@@ -159,7 +160,9 @@ interface DataDistributionPageProps {
   refreshLiveness: typeof refreshLiveness;
 }
 
-export class DataDistributionPage extends React.Component<DataDistributionPageProps> {
+export class DataDistributionPage extends React.Component<
+  DataDistributionPageProps & RouteComponentProps
+> {
   componentDidMount() {
     this.props.refreshDataDistribution();
     this.props.refreshNodes();
@@ -176,6 +179,7 @@ export class DataDistributionPage extends React.Component<DataDistributionPagePr
     return (
       <div>
         <Helmet title="Data Distribution" />
+        <BackToAdvanceDebug history={this.props.history} />
         <section className="section">
           <h1 className="base-heading">Data Distribution</h1>
         </section>

pkg/ui/workspaces/db-console/src/views/keyVisualizer/index.tsx

@@ -27,6 +27,8 @@ import { selectTimeScale } from "src/redux/timeScale";
 import { refreshSettings } from "src/redux/apiReducers";
 import KeyVisSamplesRequest = cockroach.server.serverpb.KeyVisSamplesRequest;
 import KeyVisSamplesResponse = cockroach.server.serverpb.KeyVisSamplesResponse;
+import { BackToAdvanceDebug } from "../reports/containers/util";
+import { RouteComponentProps } from "react-router-dom";
 
 const EnabledSetting = "keyvisualizer.enabled";
 const IntervalSetting = "keyvisualizer.sample_interval";
@@ -128,7 +130,7 @@ interface KeyVisualizerContainerProps {
 }
 
 class KeyVisualizerContainer extends React.Component<
-  KeyVisualizerContainerProps,
+  KeyVisualizerContainerProps & RouteComponentProps,
   KeyVisualizerContainerState
 > {
   interval: any;
@@ -162,19 +164,27 @@ class KeyVisualizerContainer extends React.Component<
       this.state.response.samples.length === 0 ||
       Object.keys(this.state.response.pretty_key_for_uuid).length === 0
     ) {
-      return <div>Waiting for samples...</div>;
+      return (
+        <>
+          <BackToAdvanceDebug history={this.props.history} />
+          <div>Waiting for samples...</div>
+        </>
+      );
     }
 
     return (
-      <div style={{ position: "relative" }}>
-        <KeyVisualizerTimeWindow />
-        <KeyVisualizer
-          samples={samples}
-          yOffsetsForKey={yOffsetsForKey}
-          hottestBucket={hottestBucket}
-          keys={keys}
-        />
-      </div>
+      <>
+        <BackToAdvanceDebug history={this.props.history} />
+        <div style={{ position: "relative" }}>
+          <KeyVisualizerTimeWindow />
+          <KeyVisualizer
+            samples={samples}
+            yOffsetsForKey={yOffsetsForKey}
+            hottestBucket={hottestBucket}
+            keys={keys}
+          />
+        </div>
+      </>
     );
   }
 }
@@ -188,7 +198,7 @@ interface KeyVisualizerPageProps {
 }
 
 const KeyVisualizerPage: React.FunctionComponent<
-  KeyVisualizerPageProps
+  KeyVisualizerPageProps & RouteComponentProps
 > = props => {
   if (props.clusterSettings === undefined) {
     props.refreshSettings();
@@ -200,6 +210,7 @@ const KeyVisualizerPage: React.FunctionComponent<
   if (!enabled) {
     return (
       <div>
+        <BackToAdvanceDebug history={props.history} />
         <p>To enable the key visualizer, run the following SQL statement:</p>
         <pre>SET CLUSTER SETTING {EnabledSetting} = true;</pre>
       </div>
@@ -212,6 +223,7 @@ const KeyVisualizerPage: React.FunctionComponent<
 
   return (
     <KeyVisualizerContainer
+      {...props}
       timeScale={props.timeScale}
       refreshInterval={refreshInterval}
     />

pkg/ui/workspaces/db-console/src/views/reports/containers/certificates/index.tsx

@@ -23,6 +23,7 @@ import { AdminUIState } from "src/redux/state";
 import { nodeIDAttr } from "src/util/constants";
 import { Loading, util } from "@cockroachlabs/cluster-ui";
 import { getMatchParamByName } from "src/util/query";
+import { BackToAdvanceDebug } from "src/views/reports/containers/util";
 
 interface CertificatesOwnProps {
   certificates: protos.cockroach.server.serverpb.CertificatesResponse;
@@ -207,6 +208,7 @@ export class Certificates extends React.Component<CertificatesProps, {}> {
     return (
       <div className="section">
         <Helmet title="Certificates | Debug" />
+        <BackToAdvanceDebug history={this.props.history} />
         <h1 className="base-heading">Certificates</h1>
 
         <section className="section">

pkg/ui/workspaces/db-console/src/views/reports/containers/customChart/index.tsx

@@ -44,6 +44,7 @@ import {
   selectTimeScale,
   setTimeScale,
 } from "src/redux/timeScale";
+import { BackToAdvanceDebug } from "src/views/reports/containers/util";
 
 export interface CustomChartProps {
   refreshNodes: typeof refreshNodes;
@@ -289,6 +290,7 @@ export class CustomChart extends React.Component<
     return (
       <>
         <Helmet title="Custom Chart | Debug" />
+        <BackToAdvanceDebug history={this.props.history} />
         <section className="section">
           <h1 className="base-heading">Custom Chart</h1>
         </section>

pkg/ui/workspaces/db-console/src/views/reports/containers/enqueueRange/index.tsx

@@ -20,6 +20,7 @@ import "./index.styl";
 
 import EnqueueRangeRequest = cockroach.server.serverpb.EnqueueRangeRequest;
 import EnqueueRangeResponse = cockroach.server.serverpb.EnqueueRangeResponse;
+import { BackToAdvanceDebug } from "src/views/reports/containers/util";
 
 const QUEUES = [
   "replicate",
@@ -198,6 +199,7 @@ export class EnqueueRange extends React.Component<
     return (
       <Fragment>
         <Helmet title="Enqueue Range" />
+        <BackToAdvanceDebug history={this.props.history} />
         <div className="content">
           <section className="section">
             <div className="form-container">

pkg/ui/workspaces/db-console/src/views/reports/containers/localities/index.tsx

@@ -32,6 +32,7 @@ import { findMostSpecificLocation, hasLocation } from "src/util/locations";
 import { Loading } from "@cockroachlabs/cluster-ui";
 import "./localities.styl";
 import { CachedDataReducerState } from "src/redux/cachedDataReducer";
+import { BackToAdvanceDebug } from "../util";
 
 function formatCoord(coordinate: number) {
   return coordinate.toFixed(4);
@@ -109,7 +110,10 @@ interface LocalitiesProps {
   refreshNodes: typeof refreshNodes;
 }
 
-export class Localities extends React.Component<LocalitiesProps, {}> {
+export class Localities extends React.Component<
+  LocalitiesProps & RouteComponentProps,
+  {}
+> {
   componentDidMount() {
     this.props.refreshLocations();
     this.props.refreshNodes();
@@ -124,6 +128,7 @@ export class Localities extends React.Component<LocalitiesProps, {}> {
     return (
       <div>
         <Helmet title="Localities | Debug" />
+        <BackToAdvanceDebug history={this.props.history} />
         <section className="section">
           <h1 className="base-heading">Localities</h1>
         </section>

pkg/ui/workspaces/db-console/src/views/reports/containers/nodeHistory/decommissionedNodeHistory.tsx

@@ -31,6 +31,7 @@ import {
   util,
 } from "@cockroachlabs/cluster-ui";
 import { createSelector } from "reselect";
+import { BackToAdvanceDebug } from "src/views/reports/containers/util";
 
 const decommissionedNodesSortSetting = new LocalSetting<
   AdminUIState,
@@ -75,7 +76,9 @@ const sortByDecommissioningDate = (
   return 0;
 };
 
-export class DecommissionedNodeHistory extends React.Component<DecommissionedNodeHistoryProps> {
+export class DecommissionedNodeHistory extends React.Component<
+  DecommissionedNodeHistoryProps & RouteComponentProps
+> {
   columns: ColumnsConfig<DecommissionedNodeStatusRow> = [
     {
       key: "id",
@@ -109,6 +112,7 @@ export class DecommissionedNodeHistory extends React.Component<DecommissionedNod
     return (
       <section className="section">
         <Helmet title="Decommissioned Node History | Debug" />
+        <BackToAdvanceDebug history={this.props.history} />
         <h1 className="base-heading title">Decommissioned Node History</h1>
         <div>
           <Table

pkg/ui/workspaces/db-console/src/views/reports/containers/nodes/index.tsx

@@ -40,6 +40,7 @@ import {
   PageConfigItem,
 } from "src/views/shared/components/pageconfig";
 import Dropdown, { DropdownOption } from "src/views/shared/components/dropdown";
+import { BackToAdvanceDebug } from "../util";
 
 interface NodesOwnProps {
   nodeIds: ReturnType<typeof nodeIDsStringifiedSelector.resultFunc>;
@@ -444,6 +445,7 @@ export class Nodes extends React.Component<NodesProps, LocalNodeState> {
     return (
       <section className="section">
         <Helmet title="Node Diagnostics | Debug" />
+        <BackToAdvanceDebug history={this.props.history} />
         <h1 className="base-heading">Node Diagnostics</h1>
         <NodeFilterList
           nodeIDs={filters.nodeIDs}

pkg/ui/workspaces/db-console/src/views/reports/containers/problemRanges/index.tsx

@@ -26,6 +26,7 @@ import { FixLong } from "src/util/fixLong";
 import ConnectionsTable from "src/views/reports/containers/problemRanges/connectionsTable";
 import { Loading } from "@cockroachlabs/cluster-ui";
 import { getMatchParamByName } from "src/util/query";
+import { BackToAdvanceDebug } from "src/views/reports/containers/util";
 
 type NodeProblems$Properties =
   protos.cockroach.server.serverpb.ProblemRangesResponse.INodeProblems;
@@ -225,6 +226,7 @@ export class ProblemRanges extends React.Component<ProblemRangesProps, {}> {
     return (
       <div className="section">
         <Helmet title="Problem Ranges | Debug" />
+        <BackToAdvanceDebug history={this.props.history} />
         <h1 className="base-heading">Problem Ranges Report</h1>
         <Loading
           loading={isLoading(this.props.problemRanges)}

pkg/ui/workspaces/db-console/src/views/reports/containers/range/index.tsx

@@ -35,6 +35,7 @@ import AllocatorOutput from "src/views/reports/containers/range/allocator";
 import RangeInfo from "src/views/reports/containers/range/rangeInfo";
 import LeaseTable from "src/views/reports/containers/range/leaseTable";
 import { getMatchParamByName } from "src/util/query";
+import { BackToAdvanceDebug } from "../util";
 
 interface RangeDispatchProps {
   refreshRange: typeof refreshRange;
@@ -187,6 +188,7 @@ export class Range extends React.Component<RangeProps, {}> {
     return (
       <div className="section">
         <Helmet title={`r${responseRangeID.toString()} Range | Debug`} />
+        <BackToAdvanceDebug history={this.props.history} />
         <h1 className="base-heading">
           Range Report for r{responseRangeID.toString()}
         </h1>

pkg/ui/workspaces/db-console/src/views/reports/containers/redux/index.tsx

@@ -18,6 +18,7 @@ import { RouteComponentProps, withRouter } from "react-router-dom";
 import { AdminUIState } from "src/redux/state";
 
 import "./redux.styl";
+import { BackToAdvanceDebug } from "../util";
 
 interface ReduxDebugProps extends RouteComponentProps {
   state: AdminUIState;
@@ -46,6 +47,7 @@ export class ReduxDebug extends React.Component<
     return (
       <div>
         <Helmet title="Redux State | Debug" />
+        <BackToAdvanceDebug history={this.props.history} />
         <section className="section">
           <h1 className="base-heading">Redux State</h1>
         </section>

pkg/ui/workspaces/db-console/src/views/reports/containers/settings/index.tsx

@@ -26,6 +26,7 @@ import {
 } from "@cockroachlabs/cluster-ui";
 import "./index.styl";
 import { CachedDataReducerState } from "src/redux/cachedDataReducer";
+import { BackToAdvanceDebug } from "../util";
 
 interface SettingsOwnProps {
   settings: CachedDataReducerState<protos.cockroach.server.serverpb.SettingsResponse>;
@@ -144,6 +145,7 @@ export class Settings extends React.Component<SettingsProps, SettingsState> {
     return (
       <div className="section">
         <Helmet title="Cluster Settings | Debug" />
+        <BackToAdvanceDebug history={this.props.history} />
         <h1 className="base-heading">Cluster Settings</h1>
         <Loading
           loading={!this.props.settings.data}

pkg/ui/workspaces/db-console/src/views/reports/containers/stores/index.tsx

@@ -22,6 +22,7 @@ import { nodeIDAttr } from "src/util/constants";
 import EncryptionStatus from "src/views/reports/containers/stores/encryption";
 import { Loading } from "@cockroachlabs/cluster-ui";
 import { getMatchParamByName } from "src/util/query";
+import { BackToAdvanceDebug } from "../util";
 
 interface StoresOwnProps {
   stores: protos.cockroach.server.serverpb.IStoreDetails[];
@@ -111,6 +112,7 @@ export class Stores extends React.Component<StoresProps, {}> {
     return (
       <div className="section">
         <Helmet title="Stores | Debug" />
+        <BackToAdvanceDebug history={this.props.history} />
         <h1 className="base-heading">Stores</h1>
         <h2 className="base-heading">{header} stores</h2>
         <Loading

pkg/ui/workspaces/db-console/src/views/reports/containers/util.tsx

@@ -0,0 +1,36 @@
+// Copyright 2023 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 React from "react";
+import { History } from "history";
+import { Button, commonStyles } from "@cockroachlabs/cluster-ui";
+import { ArrowLeft } from "@cockroachlabs/icons";
+
+interface backProps {
+  history: History;
+}
+export function BackToAdvanceDebug(props: backProps): React.ReactElement {
+  function onBackClick(history: History): void {
+    history.push("/debug");
+  }
+
+  return (
+    <Button
+      onClick={() => onBackClick(props.history)}
+      type="unstyled-link"
+      size="small"
+      icon={<ArrowLeft fontSize={"10px"} />}
+      iconPosition="left"
+      className={commonStyles("small-margin")}
+    >
+      Advanced Debug
+    </Button>
+  );
+}