ui: Redirect Range Report page to Hot Ranges page

Fixes: #102377.

Previously, when a user selected a range ID from the Hot Ranges page,
the left side menu would switch to Advanced Debug and the back button
would also redirect to the Advanced Dedug page. This commit ensures that
when a range ID is selected, the left side menu will stay on the Hot
Ranges page and also changes the back button to redirect back to the
Hot Ranges page.

Release note (ui change): The Range Report page (route
`/reports/range/:rangeID`) shows the "Hot Ranges" menu item as
highlighted in the left side menu. The back button in the Range Report
page redirects back to the Hot Ranges page.

Author: gtr

pkg/ui/workspaces/db-console/src/views/app/components/layoutSidebar/index.tsx

@@ -59,15 +59,15 @@ export class Sidebar extends React.Component<SidebarProps> {
     {
       path: "/hotranges",
       text: "Hot Ranges",
-      activeFor: ["/hotranges"],
+      activeFor: ["/hotranges", "/reports/range"],
     },
     { path: "/jobs", text: "Jobs", activeFor: [] },
     { path: "/schedules", text: "Schedules", activeFor: [] },
     {
       path: "/debug",
       text: "Advanced Debug",
       activeFor: ["/reports", "/data-distribution", "/raft", "/keyvisualizer"],
-      ignoreFor: ["/reports/network"],
+      ignoreFor: ["/reports/network", "/reports/range"],
     },
   ];
 

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

@@ -35,7 +35,8 @@ 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";
+import { Button, commonStyles } from "@cockroachlabs/cluster-ui";
+import { ArrowLeft } from "@cockroachlabs/icons";
 
 interface RangeDispatchProps {
   refreshRange: typeof refreshRange;
@@ -111,6 +112,10 @@ export class Range extends React.Component<RangeProps, {}> {
     }
   }
 
+  backToHotRanges = (): void => {
+    this.props.history.push("/hotranges");
+  };
+
   render() {
     const { range, match } = this.props;
     const rangeID = getMatchParamByName(match, rangeIDAttr);
@@ -188,7 +193,16 @@ export class Range extends React.Component<RangeProps, {}> {
     return (
       <div className="section">
         <Helmet title={`r${responseRangeID.toString()} Range | Debug`} />
-        <BackToAdvanceDebug history={this.props.history} />
+        <Button
+          onClick={this.backToHotRanges}
+          type="unstyled-link"
+          size="small"
+          icon={<ArrowLeft fontSize={"10px"} />}
+          iconPosition="left"
+          className={commonStyles("small-margin")}
+        >
+          Hot Ranges
+        </Button>
         <h1 className="base-heading">
           Range Report for r{responseRangeID.toString()}
         </h1>