From e144cb765759b1ff0dbb80d64c1decb32acaf3a0 Mon Sep 17 00:00:00 2001
From: Austen McClernon <austen@cockroachlabs.com>
Date: Thu, 9 Mar 2023 00:41:29 +0000
Subject: [PATCH] dashboards: add replica cpu to repl dashboard

In #96127 we added the option to load balance replica CPU instead of QPS
across stores in a cluster. It is desirable to view the signal being
controlled for rebalancing in the replication dashboard, similar to QPS.

This commit adds the `rebalancing.cpunanospersecond` metric to the
replication metrics dashboard.

Resolves: #98109

Release note (ui change): `rebalancing.cpunanospersecond` is now
included in the replication metrics dashboard.
---
 .../nodeGraphs/dashboards/replication.tsx     | 20 ++++++++++++++++++-
 1 file changed, 19 insertions(+), 1 deletion(-)

diff --git a/pkg/ui/workspaces/db-console/src/views/cluster/containers/nodeGraphs/dashboards/replication.tsx b/pkg/ui/workspaces/db-console/src/views/cluster/containers/nodeGraphs/dashboards/replication.tsx
index 182dbf8b479f..29c93e273638 100644
--- a/pkg/ui/workspaces/db-console/src/views/cluster/containers/nodeGraphs/dashboards/replication.tsx
+++ b/pkg/ui/workspaces/db-console/src/views/cluster/containers/nodeGraphs/dashboards/replication.tsx
@@ -30,7 +30,7 @@ import {
 import { cockroach } from "src/js/protos";
 import TimeSeriesQueryAggregator = cockroach.ts.tspb.TimeSeriesQueryAggregator;
 
-export default function (props: GraphDashboardProps) {
+export default function(props: GraphDashboardProps) {
   const { nodeIDs, storeSources, nodeDisplayNameByID, storeIDsByNodeID } =
     props;
 
@@ -104,6 +104,24 @@ export default function (props: GraphDashboardProps) {
       </Axis>
     </LineGraph>,
 
+    <LineGraph
+      title="Average Replica CPU per Node"
+      tooltip={`Moving average of all replica CPU usage on each node per second.
+         Tracks roughly the last 30 minutes of usage. Used for load-based
+         rebalancing decisions.`}
+    >
+      <Axis units={AxisUnits.Duration} label="CPU time">
+        {_.map(nodeIDs, nid => (
+          <Metric
+            key={nid}
+            name="cr.store.rebalancing.cpunanospersecond"
+            title={nodeDisplayName(nodeDisplayNameByID, nid)}
+            sources={storeIDsForNode(storeIDsByNodeID, nid)}
+          />
+        ))}
+      </Axis>
+    </LineGraph>,
+
     <LineGraph
       title="Logical Bytes per Node"
       tooltip={<LogicalBytesGraphTooltip />}