extract cycleCount logic, test it, use default arg for yAxisTickFormatter

Author: david-crespo

app/components/TimeSeriesChart.tsx

@@ -130,7 +130,7 @@ export default function TimeSeriesChart({
   startTime,
   endTime,
   unit,
-  yAxisTickFormatter,
+  yAxisTickFormatter = (val) => val.toLocaleString(),
 }: TimeSeriesChartProps) {
   // We use the largest data point +20% for the graph scale. !rawData doesn't
   // mean it's empty (it will never be empty because we fill in artificial 0s at
@@ -184,7 +184,7 @@ export default function TimeSeriesChart({
           orientation="right"
           tick={textMonoMd}
           tickMargin={8}
-          tickFormatter={yAxisTickFormatter || ((val: number) => val.toLocaleString())}
+          tickFormatter={yAxisTickFormatter}
           padding={{ top: 32 }}
           {...yTicks}
         />

app/pages/project/instances/instance/tabs/MetricsTab.spec.ts

@@ -0,0 +1,28 @@
+/*
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, you can obtain one at https://mozilla.org/MPL/2.0/.
+ *
+ * Copyright Oxide Computer Company
+ */
+import { expect, test } from 'vitest'
+
+import { getCycleCount } from './MetricsTab'
+
+test('getCycleCount', () => {
+  expect(getCycleCount(5, 1000)).toEqual(0)
+  expect(getCycleCount(1000, 1000)).toEqual(0)
+  expect(getCycleCount(1001, 1000)).toEqual(1)
+  expect(getCycleCount(10 ** 6, 1000)).toEqual(1)
+  expect(getCycleCount(10 ** 6 + 1, 1000)).toEqual(2)
+  expect(getCycleCount(10 ** 9, 1000)).toEqual(2)
+  expect(getCycleCount(10 ** 9 + 1, 1000)).toEqual(3)
+
+  expect(getCycleCount(5, 1024)).toEqual(0)
+  expect(getCycleCount(1024, 1024)).toEqual(0)
+  expect(getCycleCount(1025, 1024)).toEqual(1)
+  expect(getCycleCount(2 ** 20, 1024)).toEqual(1)
+  expect(getCycleCount(2 ** 20 + 1, 1024)).toEqual(2)
+  expect(getCycleCount(2 ** 30, 1024)).toEqual(2)
+  expect(getCycleCount(2 ** 30 + 1, 1024)).toEqual(3)
+})

app/pages/project/instances/instance/tabs/MetricsTab.tsx

@@ -22,6 +22,16 @@ import { getInstanceSelector, useInstanceSelector } from 'app/hooks'
 
 const TimeSeriesChart = React.lazy(() => import('app/components/TimeSeriesChart'))
 
+export function getCycleCount(num: number, base: number) {
+  let cycleCount = 0
+  let transformedValue = num
+  while (transformedValue > base) {
+    transformedValue = transformedValue / base
+    cycleCount++
+  }
+  return cycleCount
+}
+
 type DiskMetricParams = {
   title: string
   unit: 'Bytes' | 'Count'
@@ -56,36 +66,28 @@ function DiskMetric({
 
   const isBytesChart = unit === 'Bytes'
 
-  let unitForSet = ''
-  let cycleCount = 0
-  let label
-  const divisorBase = isBytesChart ? 1024 : 1000
-  if (metrics?.items?.length) {
-    // Because we're using cumulative metrics, we can use the last (and therefore largest)
-    // value in the set to determine the unit and the divisor for the set.
-    const largestValue =
-      (metrics?.items?.[metrics.items.length - 1].datum.datum as Cumulativeint64).value || 0
-
-    // We'll need to divide each number in the set by a consistent multiple of 1024 (for Bytes) or 1000 (for Counts)
-    // Figure out what that multiple is:
-    let transformedValue = largestValue
-    while (transformedValue > divisorBase) {
-      transformedValue = transformedValue / divisorBase
-      cycleCount++
-    }
+  const largestValue = useMemo(() => {
+    if (!metrics || metrics.items.length === 0) return 0
+    return Math.max(...metrics.items.map((m) => (m.datum.datum as Cumulativeint64).value))
+  }, [metrics])
 
-    // Now that we know how many cycles of "divide by 1024 || 1000" to run through
-    // (via cylceCount), we can determine the proper unit for the set
-    if (isBytesChart) {
-      const byteUnits = ['Bytes', 'KiB', 'MiB', 'GiB', 'TiB']
-      unitForSet = byteUnits[cycleCount]
-      label = `(${unitForSet})`
-    } else {
-      label = '(COUNT)'
-    }
+  // We'll need to divide each number in the set by a consistent exponent
+  // of 1024 (for Bytes) or 1000 (for Counts)
+  const base = isBytesChart ? 1024 : 1000
+  // Figure out what that exponent is:
+  const cycleCount = getCycleCount(largestValue, base)
+
+  // Now that we know how many cycles of "divide by 1024 || 1000" to run through
+  // (via cycleCount), we can determine the proper unit for the set
+  let unitForSet = ''
+  let label = '(COUNT)'
+  if (isBytesChart) {
+    const byteUnits = ['Bytes', 'KiB', 'MiB', 'GiB', 'TiB']
+    unitForSet = byteUnits[cycleCount]
+    label = `(${unitForSet})`
   }
 
-  const divisor = divisorBase ** cycleCount
+  const divisor = base ** cycleCount
 
   const data = useMemo(
     () =>