ui: consolidate log-commit and command-commit latency graphs

Previously the storage dashboard had two separate graphs for log-commit
latencies (p99 and p50) and two separate graphs for command-commit latencies
(p99 and p50). This commit consolidates these four graphs into two: one for
log-commit latencies and one for command-commit latencies.

Epic: none
Release note: none

Author: jbowens

pkg/ui/workspaces/db-console/src/views/cluster/containers/nodeGraphs/dashboards/storage.tsx

@@ -19,7 +19,7 @@ import {
   nodeDisplayName,
   storeIDsForNode,
 } from "./dashboardUtils";
-import { storeMetrics } from "./storeUtils";
+import { multipleStoreMetrics, storeMetrics } from "./storeUtils";
 
 export default function (props: GraphDashboardProps) {
   const {
@@ -103,85 +103,64 @@ export default function (props: GraphDashboardProps) {
     </LineGraph>,
 
     <LineGraph
-      title="Log Commit Latency: 99th Percentile"
+      title="Log Commit Latency"
       sources={storeSources}
       isKvGraph={true}
       tenantSource={tenantSource}
-      tooltip={`The 99th %ile latency for commits to the Raft Log. This measures
-          essentially an fdatasync to the storage engine's write-ahead log.`}
+      tooltip={`The latency for commits to the Raft Log. This is typically
+          dominated by the latency of an fdatasync to the storage engine's
+          write-ahead log.`}
       showMetricsInTooltip={true}
     >
       <Axis units={AxisUnits.Duration} label="latency">
-        {storeMetrics(
-          {
-            name: "cr.store.raft.process.logcommit.latency-p99",
-            aggregateMax: true,
-          },
-          nodeIDs,
-          storeIDsByNodeID,
-        )}
-      </Axis>
-    </LineGraph>,
-
-    <LineGraph
-      title="Log Commit Latency: 50th Percentile"
-      sources={storeSources}
-      isKvGraph={true}
-      tenantSource={tenantSource}
-      tooltip={`The 50th %ile latency for commits to the Raft Log. This measures
-          essentially an fdatasync to the storage engine's write-ahead log.`}
-      showMetricsInTooltip={true}
-    >
-      <Axis units={AxisUnits.Duration} label="latency">
-        {storeMetrics(
-          {
-            name: "cr.store.raft.process.logcommit.latency-p50",
-            aggregateMax: true,
-          },
-          nodeIDs,
-          storeIDsByNodeID,
-        )}
-      </Axis>
-    </LineGraph>,
-
-    <LineGraph
-      title="Command Commit Latency: 99th Percentile"
-      sources={storeSources}
-      isKvGraph={true}
-      tenantSource={tenantSource}
-      tooltip={`The 99th %ile latency for commits of Raft commands. This measures
-          applying a batch to the storage engine (including writes to the
-          write-ahead log), but no fsync.`}
-      showMetricsInTooltip={true}
-    >
-      <Axis units={AxisUnits.Duration} label="latency">
-        {storeMetrics(
-          {
-            name: "cr.store.raft.process.commandcommit.latency-p99",
-            aggregateMax: true,
-          },
+        {multipleStoreMetrics(
+          [
+            {
+              prefix: "p99.9",
+              name: "cr.store.raft.process.logcommit.latency-p99.9",
+              aggregateMax: true,
+            },
+            {
+              prefix: "p99",
+              name: "cr.store.raft.process.logcommit.latency-p99",
+              aggregateMax: true,
+            },
+            {
+              prefix: "p50",
+              name: "cr.store.raft.process.logcommit.latency-p50",
+              aggregateMax: true,
+            },
+          ],
           nodeIDs,
           storeIDsByNodeID,
         )}
       </Axis>
     </LineGraph>,
 
     <LineGraph
-      title="Command Commit Latency: 50th Percentile"
+      title="Command Commit Latency"
       sources={storeSources}
       isKvGraph={true}
       tenantSource={tenantSource}
-      tooltip={`The 50th %ile latency for commits of Raft commands. This measures
+      tooltip={`The latency for commits of Raft commands. This measures
           applying a batch to the storage engine (including writes to the
           write-ahead log), but no fsync.`}
       showMetricsInTooltip={true}
     >
       <Axis units={AxisUnits.Duration} label="latency">
-        {storeMetrics(
-          {
-            name: "cr.store.raft.process.commandcommit.latency-p50",
-            aggregateMax: true,
-          },
+        {multipleStoreMetrics(
+          [
+            {
+              prefix: "p99",
+              name: "cr.store.raft.process.commandcommit.latency-p99",
+              aggregateMax: true,
+            },
+            {
+              prefix: "p50",
+              name: "cr.store.raft.process.commandcommit.latency-p50",
+              aggregateMax: true,
+            },
+          ],
           nodeIDs,
           storeIDsByNodeID,
         )}

pkg/ui/workspaces/db-console/src/views/cluster/containers/nodeGraphs/dashboards/storeUtils.tsx

@@ -8,6 +8,17 @@ import React from "react";
 import { storeIDsForNode } from "src/views/cluster/containers/nodeGraphs/dashboards/dashboardUtils";
 import { Metric, MetricProps } from "src/views/shared/components/metricQuery";
 
+type PerStoreMetricProps = MetricProps & {
+  prefix: string;
+};
+
+export const multipleStoreMetrics = (
+  props: PerStoreMetricProps[],
+  nodeIDs: string[],
+  storeIDsByNodeID: { [key: string]: string[] },
+) =>
+  props.flatMap(prop => storeMetrics(prop, nodeIDs, storeIDsByNodeID, prop.prefix));
+
 /**
  * Dynamically shows either the aggregated node-level metric when viewing the
  * cluster-level dashboard, or store-level metrics when viewing a single node.