Merge #156801

156801: ui: separate regular and elastic store graphs r=tbg a=sumeerbhola

When they are in the same graph, it is hard to discern whether only elastic work is experiencing overload and delay.

Example:
<img width="659" height="571" alt="Screenshot 2025-11-03 at 2 13 59 PM" src="https://github.com/user-attachments/assets/1f4b2131-665f-40e0-8dac-37aa978dd184" />
<img width="653" height="567" alt="Screenshot 2025-11-03 at 2 14 12 PM" src="https://github.com/user-attachments/assets/219beccd-7511-48aa-9bc1-119f12d4b895" />

Epic: none

Release note (ui change): The background (elastic) store graphs for exhausted duration, and the wait duration histogram have been separated from the foreground (regular) graphs.

Co-authored-by: sumeerbhola <sumeer@cockroachlabs.com>

Author: craig[bot]

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

@@ -62,11 +62,11 @@ export default function (props: GraphDashboardProps) {
     </LineGraph>,
 
     <LineGraph
-      title="Admission IO Tokens Exhausted Duration Per Second"
+      title="Admission Foreground IO Tokens Exhausted Duration Per Second"
       sources={storeSources}
       tenantSource={tenantSource}
       showMetricsInTooltip={true}
-      tooltip={`Relative time the node had exhausted IO tokens for all IO-bound work per second of wall time, measured in microseconds/second. Increased IO token exhausted duration indicates IO resource exhaustion.`}
+      tooltip={`Relative time the store had exhausted foreground (regular) IO tokens for all IO-bound work per second of wall time, measured in microseconds/second. Increased IO token exhausted duration indicates IO resource exhaustion.`}
     >
       <Axis label="Duration (micros/sec)">
         {storeMetrics(
@@ -79,6 +79,17 @@ export default function (props: GraphDashboardProps) {
           storeIDsByNodeID,
           "regular (foreground)",
         )}
+      </Axis>
+    </LineGraph>,
+
+    <LineGraph
+      title="Admission Background IO Tokens Exhausted Duration Per Second"
+      sources={storeSources}
+      tenantSource={tenantSource}
+      showMetricsInTooltip={true}
+      tooltip={`Relative time the store had exhausted background (elastic) IO tokens for all IO-bound work per second of wall time, measured in microseconds/second. Increased IO token exhausted duration indicates IO resource exhaustion.`}
+    >
+      <Axis label="Duration (micros/sec)">
         {storeMetrics(
           {
             name: "cr.store.admission.granter.elastic_io_tokens_exhausted_duration.kv",
@@ -168,11 +179,11 @@ export default function (props: GraphDashboardProps) {
     </LineGraph>,
 
     <LineGraph
-      title="Admission Queueing Delay p99 – Store"
+      title="Admission Queueing Delay p99 – Foreground (Regular) Store"
       sources={storeSources}
       tenantSource={tenantSource}
       showMetricsInTooltip={true}
-      tooltip={`The 99th percentile latency of requests waiting in the Admission Control store queue.`}
+      tooltip={`The 99th percentile latency of requests waiting in the foreground (regular) Admission Control store queue.`}
     >
       <Axis units={AxisUnits.DurationMillis} label="Write Delay Duration">
         {storeMetrics(
@@ -184,6 +195,17 @@ export default function (props: GraphDashboardProps) {
           storeIDsByNodeID,
           "KV",
         )}
+      </Axis>
+    </LineGraph>,
+
+    <LineGraph
+      title="Admission Queueing Delay p99 – Background (Elastic) Store"
+      sources={storeSources}
+      tenantSource={tenantSource}
+      showMetricsInTooltip={true}
+      tooltip={`The 99th percentile latency of requests waiting in the background (elastic) Admission Control store queue.`}
+    >
+      <Axis units={AxisUnits.DurationMillis} label="Write Delay Duration">
         {storeMetrics(
           {
             name: "cr.store.admission.wait_durations.elastic-stores-p99",