db-console: change the name of the "Hot Ranges" page to "Top Ranges"

Previously, the UI referred to high-activity ranges as "hot ranges",
which implied they were necessarily experiencing high load or activity.
This was inadequate because ranges shown may simply be the highest by
some measure (QPS, CPU usage, etc.) without being truly "hot".

To address this, this patch renames the "hot ranges" page and related UI
components to "top ranges" to more accurately reflect that these are the
top-ranked ranges by various metrics rather than necessarily
experiencing high activity.

Release note (ui change): The "Hot Ranges" page in the DB Console has
been renamed to "Top Ranges" to better reflect that it shows the
highest-ranked ranges by various metrics, not necessarily ranges
experiencing high activity.

Fixes: #147330
Epic: CRDB-43150
Release note (ui change): Changes the name of the "Hot Ranges" page to
"Top Ranges".

Author: angles-n-daemons

pkg/ui/workspaces/db-console/src/app.tsx

@@ -473,10 +473,15 @@ export const App: React.FC<AppProps> = (props: AppProps) => {
                         {/* hot ranges */}
                         <Route
                           exact
-                          path={`/hotranges`}
+                          path={`/topranges`}
                           component={HotRangesPage}
                         />
                         {/* old route redirects */}
+                        <Route
+                          exact
+                          path={`/hotranges`}
+                          component={HotRangesPage}
+                        />
                         <Redirect
                           exact
                           from="/cluster"

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

@@ -52,9 +52,9 @@ export class Sidebar extends React.Component<SidebarProps> {
       isHidden: () => this.props.isSingleNodeCluster,
     },
     {
-      path: "/hotranges",
-      text: "Hot Ranges",
-      activeFor: ["/hotranges", "/reports/range"],
+      path: "/topranges",
+      text: "Top Ranges",
+      activeFor: ["/hotranges", "/hotranges", "/reports/range"],
     },
     { path: "/jobs", text: "Jobs", activeFor: [] },
     { path: "/schedules", text: "Schedules", activeFor: [] },

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

@@ -97,10 +97,10 @@ const HotRangesPage = () => {
 
   return (
     <React.Fragment>
-      <Helmet title="Hot Ranges" />
-      <h3 className="base-heading">Hot Ranges</h3>
+      <Helmet title="Top Ranges" />
+      <h3 className="base-heading">Top Ranges</h3>
       <Text className={cx("hotranges-description")}>
-        The Hot Ranges table shows ranges receiving a high number of reads or
+        The Top Ranges table shows ranges receiving a high number of reads or
         writes. By default, the table is sorted by ranges with the highest QPS
         (queries per second). <br />
         Use this information to