dashboards: add replica cpu to repl dashboard

In cockroachdb#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: cockroachdb#98109

Release note (ui change): `rebalancing.cpunanospersecond` is now
included in the replication metrics dashboard.

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 />}