ui: include blob file count on storage dashboard

Adapt the storage dashboard graph that displays the count of sstables in a
store to also show the number of blob files.

Epic: none
Release note: none

Author: jbowens

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

@@ -189,16 +189,27 @@ export default function (props: GraphDashboardProps) {
     </LineGraph>,
 
     <LineGraph
-      title="SSTables"
+      title="File Counts"
       sources={storeSources}
       isKvGraph={true}
       tenantSource={tenantSource}
-      tooltip={`The number of SSTables in use ${tooltipSelection}.`}
+      tooltip={`The number of files in use by type ${tooltipSelection}.`}
       showMetricsInTooltip={true}
     >
-      <Axis label="sstables">
-        {storeMetrics(
-          { name: "cr.store.rocksdb.num-sstables" },
+      <Axis label="files">
+        {multipleStoreMetrics(
+          [
+            {
+              prefix: "sstables",
+              name: "cr.store.rocksdb.num-sstables",
+              aggregateMax: true,
+            },
+            {
+              prefix: "blob files",
+              name: "cr.store.storage.value_separation.blob_files.count",
+              aggregateMax: true,
+            },
+          ],
           nodeIDs,
           storeIDsByNodeID,
         )}
@@ -412,40 +423,44 @@ export default function (props: GraphDashboardProps) {
       tenantSource={tenantSource}
       tooltip={
         <div>
-          The number of bytes of blocks loaded by iterators categorized according
-          to the source {tooltipSelection}. These sums include blocks loaded
-          from the block cache, blocks loaded from OS page cache and blocks loaded
-          from disk.
+          The number of bytes of blocks loaded by iterators categorized
+          according to the source {tooltipSelection}. These sums include blocks
+          loaded from the block cache, blocks loaded from OS page cache and
+          blocks loaded from disk.
           <br />
           See the "Hardware" dashboard to view an aggregate of all disk reads.
         </div>
       }
       showMetricsInTooltip={true}
     >
       <Axis units={AxisUnits.Bytes} label="bytes">
-        {multipleStoreMetrics([
-          "abort-span",
-          "backup",
-          "batch-eval",
-          "crdb-unknown",
-          "intent-resolution",
-          "mvcc-gc",
-          "pebble-compaction",
-          "pebble-get",
-          "pebble-ingest",
-          "range-snap",
-          "rangefeed",
-          "replication",
-          "scan-background",
-          "scan-regular",
-          "unknown",
-        ].map(category => ({
-              prefix: category,
-              name: `cr.store.storage.iterator.category-`+category+`.block-load.bytes`,
-              nonNegativeRate: true,
-            })),
-            nodeIDs,
-            storeIDsByNodeID,
+        {multipleStoreMetrics(
+          [
+            "abort-span",
+            "backup",
+            "batch-eval",
+            "crdb-unknown",
+            "intent-resolution",
+            "mvcc-gc",
+            "pebble-compaction",
+            "pebble-get",
+            "pebble-ingest",
+            "range-snap",
+            "rangefeed",
+            "replication",
+            "scan-background",
+            "scan-regular",
+            "unknown",
+          ].map(category => ({
+            prefix: category,
+            name:
+              `cr.store.storage.iterator.category-` +
+              category +
+              `.block-load.bytes`,
+            nonNegativeRate: true,
+          })),
+          nodeIDs,
+          storeIDsByNodeID,
         )}
       </Axis>
     </LineGraph>,
@@ -482,7 +497,8 @@ export default function (props: GraphDashboardProps) {
       tenantSource={tenantSource}
       tooltip={
         <div>
-          The volume of bytes stored separated from keys, externally in blob files.
+          The volume of bytes stored separated from keys, externally in blob
+          files.
         </div>
       }
       showMetricsInTooltip={true}
@@ -597,6 +613,5 @@ export default function (props: GraphDashboardProps) {
         />
       </Axis>
     </LineGraph>,
-
   ];
 }

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

@@ -17,7 +17,9 @@ export const multipleStoreMetrics = (
   nodeIDs: string[],
   storeIDsByNodeID: { [key: string]: string[] },
 ) =>
-  props.flatMap(prop => storeMetrics(prop, nodeIDs, storeIDsByNodeID, prop.prefix));
+  props.flatMap(prop =>
+    storeMetrics(prop, nodeIDs, storeIDsByNodeID, prop.prefix),
+  );
 
 /**
  * Dynamically shows either the aggregated node-level metric when viewing the
@@ -71,13 +73,10 @@ export const storeMetrics = (
 
     // If there's only one store for the node, don't show both the aggregated
     // metric and the per-store breakdown which will always be equal.
-    if (storeIDs.length == 1) {
+    if (storeIDs.length === 1) {
       return perStoreMetrics;
     }
 
     // Otherwise, show the aggregated metric and a per-store breakdown.
-    return [
-      nodeMetric,
-      ...perStoreMetrics,
-    ];
+    return [nodeMetric, ...perStoreMetrics];
   });