server, ui: use POST request method for HotRangesV2 service

Initially, `HotRangesV2` service in status server was defined
to use GET method to handle HTTP request. It was convenient way
to display response data in Advanced debugging page since it allowed
to render response body right on to page.

But now, hot ranges will be used on user facing page and request
dispatching for hot ranges api should follow generic workflow:
initialize `HotRangesRequest` protobuf message and dispatch request
with `src/util/api` service. This restriction forces to use POST
method (since GET method doesn't allow to provide request body).

In addition, Hot Ranges debugging page is refactored to use `api`
service.

Release note: None

docs/generated/http/full.md

@@ -3098,7 +3098,7 @@ target node(s) selected in a HotRangesRequest.
 
 ## HotRangesV2
 
-`GET /_status/v2/hotranges`
+`POST /_status/v2/hotranges`
 
 
 

pkg/server/serverpb/status.proto

@@ -1744,7 +1744,8 @@ service Status {
 
   rpc HotRangesV2(HotRangesRequest) returns (HotRangesResponseV2) {
     option (google.api.http) = {
-      get : "/_status/v2/hotranges"
+      post : "/_status/v2/hotranges"
+      body : "*"
     };
   }
 

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

@@ -62,6 +62,7 @@ import Nodes from "src/views/reports/containers/nodes";
 import ProblemRanges from "src/views/reports/containers/problemRanges";
 import Range from "src/views/reports/containers/range";
 import ReduxDebug from "src/views/reports/containers/redux";
+import HotRanges from "src/views/reports/containers/hotranges";
 import Settings from "src/views/reports/containers/settings";
 import Stores from "src/views/reports/containers/stores";
 import SQLActivityPage from "src/views/sqlActivity/sqlActivityPage";
@@ -274,6 +275,12 @@ export const App: React.FC<AppProps> = (props: AppProps) => {
                   path="/debug/enqueue_range"
                   component={EnqueueRange}
                 />
+                <Route exact path="/debug/hotranges" component={HotRanges} />
+                <Route
+                  exact
+                  path="/debug/hotranges/:node_id"
+                  component={HotRanges}
+                />
 
                 <Route path="/raft">
                   <Raft>

pkg/ui/workspaces/db-console/src/util/api.ts

@@ -142,6 +142,9 @@ export type ResetSQLStatsResponseMessage = protos.cockroach.server.serverpb.Rese
 export type ResetIndexUsageStatsRequestMessage = protos.cockroach.server.serverpb.ResetIndexUsageStatsRequest;
 export type ResetIndexUsageStatsResponseMessage = protos.cockroach.server.serverpb.ResetIndexUsageStatsResponse;
 
+export type HotRangesRequestMessage = protos.cockroach.server.serverpb.HotRangesRequest;
+export type HotRangesV2ResponseMessage = protos.cockroach.server.serverpb.HotRangesResponseV2;
+
 // API constants
 
 export const API_PREFIX = "_admin/v1";
@@ -791,3 +794,15 @@ export function resetIndexUsageStats(
     timeout,
   );
 }
+
+export function getHotRanges(
+  req: HotRangesRequestMessage,
+  timeout?: moment.Duration,
+): Promise<HotRangesV2ResponseMessage> {
+  return timeoutFetch(
+    serverpb.HotRangesResponseV2,
+    `${STATUS_PREFIX}/v2/hotranges`,
+    req as any,
+    timeout,
+  );
+}

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

@@ -417,13 +417,13 @@ export default function Debug() {
         <DebugTableRow title="Hot Ranges">
           <DebugTableLink
             name="All Nodes"
-            url="_status/v2/hotranges"
-            note="_status/v2/hotranges"
+            url="#/debug/hotranges"
+            note="#/debug/hotranges"
           />
           <DebugTableLink
             name="Single node's ranges"
-            url="_status/v2/hotranges?node_id=local"
-            note="_status/v2/hotranges?node_id=[node_id]"
+            url="#/debug/hotranges/local"
+            note="#/debug/hotranges/[node_id]"
           />
         </DebugTableRow>
         <DebugTableRow title="Single Node Specific">

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

@@ -0,0 +1,48 @@
+import React, { useCallback, useEffect, useState } from "react";
+import { RouteComponentProps, withRouter } from "react-router-dom";
+import moment from "moment";
+import { Button } from "@cockroachlabs/ui-components";
+import { cockroach } from "src/js/protos";
+import { getHotRanges } from "src/util/api";
+
+type HotRangesProps = RouteComponentProps<{ node_id: string }>;
+
+const HotRanges = (props: HotRangesProps) => {
+  const nodeIdParam = props.match.params["node_id"];
+  const [nodeId, setNodeId] = useState(nodeIdParam);
+  const [time, setTime] = useState<moment.Moment>(moment());
+  const [hotRanges, setHotRanges] = useState<
+    cockroach.server.serverpb.HotRangesResponseV2["ranges"]
+  >([]);
+  const requestHotRanges = useCallback(() => {
+    const request = cockroach.server.serverpb.HotRangesRequest.create({
+      node_id: nodeId,
+    });
+    getHotRanges(request).then(response => {
+      setHotRanges(response.ranges);
+      setTime(moment());
+    });
+  }, [nodeId]);
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  useEffect(requestHotRanges, [nodeId]);
+  useEffect(() => {
+    setNodeId(nodeIdParam);
+  }, [nodeIdParam]);
+  return (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+      }}
+    >
+      <span>{`Node ID: ${nodeId ?? "All nodes"}`}</span>
+      <span>{`Time: ${time.toISOString()}`}</span>
+      <Button onClick={requestHotRanges} intent={"secondary"}>
+        Refresh
+      </Button>
+      <pre className="state-json-box">{JSON.stringify(hotRanges, null, 2)}</pre>
+    </div>
+  );
+};
+
+export default withRouter(HotRanges);