Dynamic units

app/components/CapacityBars.tsx

@@ -9,7 +9,7 @@
 import type { VirtualResourceCounts } from '@oxide/api'
 import { Cpu16Icon, Ram16Icon, Ssd16Icon } from '@oxide/design-system/icons/react'
 
-import { bytesToGiB, bytesToTiB } from '~/util/units'
+import { useConvertBytesToSpecificUnit, useGetUnit } from '~/util/units'
 
 import { CapacityBar } from './CapacityBar'
 
@@ -22,6 +22,16 @@ export const CapacityBars = ({
   provisioned: VirtualResourceCounts
   allocatedLabel: string
 }) => {
+  // These will most likely be GiB, but calculating dynamically to handle larger configurations in the future
+  const memoryUnit = useGetUnit(provisioned.memory, allocated.memory)
+  const provisionedMemory = useConvertBytesToSpecificUnit(provisioned.memory, memoryUnit)
+  const allocatedMemory = useConvertBytesToSpecificUnit(allocated.memory, memoryUnit)
+
+  // These will most likely be TiB, but calculating dynamically for the same reason as above
+  const storageUnit = useGetUnit(provisioned.storage, allocated.storage)
+  const provisionedStorage = useConvertBytesToSpecificUnit(provisioned.storage, storageUnit)
+  const allocatedStorage = useConvertBytesToSpecificUnit(allocated.storage, storageUnit)
+
   return (
     <div className="mb-12 flex min-w-min flex-col gap-3 lg+:flex-row">
       <CapacityBar
@@ -36,17 +46,17 @@ export const CapacityBars = ({
       <CapacityBar
         icon={<Ram16Icon />}
         title="MEMORY"
-        unit="GiB"
-        provisioned={bytesToGiB(provisioned.memory)}
-        capacity={bytesToGiB(allocated.memory)}
+        unit={memoryUnit}
+        provisioned={provisionedMemory}
+        capacity={allocatedMemory}
         capacityLabel={allocatedLabel}
       />
       <CapacityBar
         icon={<Ssd16Icon />}
         title="STORAGE"
-        unit="TiB"
-        provisioned={bytesToTiB(provisioned.storage)}
-        capacity={bytesToTiB(allocated.storage)}
+        unit={storageUnit}
+        provisioned={provisionedStorage}
+        capacity={allocatedStorage}
         capacityLabel={allocatedLabel}
       />
     </div>

app/pages/system/UtilizationPage.tsx

@@ -14,6 +14,7 @@ import {
   FLEET_ID,
   totalUtilization,
   usePrefetchedApiQuery,
+  type SiloUtilization,
 } from '@oxide/api'
 import { Metrics16Icon, Metrics24Icon } from '@oxide/design-system/icons/react'
 
@@ -33,7 +34,13 @@ import { Tabs } from '~/ui/lib/Tabs'
 import { docLinks } from '~/util/links'
 import { round } from '~/util/math'
 import { pb } from '~/util/path-builder'
-import { bytesToGiB, bytesToTiB } from '~/util/units'
+import {
+  bytesToGiB,
+  bytesToTiB,
+  useConvertBytesToSpecificUnit,
+  useGetUnit,
+  type BinaryUnit,
+} from '~/util/units'
 
 SystemUtilizationPage.loader = async () => {
   await Promise.all([
@@ -195,18 +202,10 @@ function UsageTab() {
               />
             </Table.Cell>
             <Table.Cell width="14%" height="large">
-              <UsageCell
-                provisioned={bytesToGiB(silo.provisioned.memory)}
-                allocated={bytesToGiB(silo.allocated.memory)}
-                unit="GiB"
-              />
+              <SiloCell cellType="usage" silo={silo} resource="memory" />
             </Table.Cell>
             <Table.Cell width="14%" height="large">
-              <UsageCell
-                provisioned={bytesToTiB(silo.provisioned.storage)}
-                allocated={bytesToTiB(silo.allocated.storage)}
-                unit="TiB"
-              />
+              <SiloCell cellType="usage" silo={silo} resource="storage" />
             </Table.Cell>
             <Table.Cell width="14%" className="relative" height="large">
               <AvailableCell
@@ -215,18 +214,10 @@ function UsageTab() {
               />
             </Table.Cell>
             <Table.Cell width="14%" className="relative" height="large">
-              <AvailableCell
-                provisioned={bytesToGiB(silo.provisioned.memory)}
-                allocated={bytesToGiB(silo.allocated.memory)}
-                unit="GiB"
-              />
+              <SiloCell cellType="available" silo={silo} resource="memory" />
             </Table.Cell>
             <Table.Cell width="14%" className="relative" height="large">
-              <AvailableCell
-                provisioned={bytesToTiB(silo.provisioned.storage)}
-                allocated={bytesToTiB(silo.allocated.storage)}
-                unit="TiB"
-              />
+              <SiloCell cellType="available" silo={silo} resource="storage" />
             </Table.Cell>
             <Table.Cell className="action-col w-10 children:p-0" height="large">
               <RowActions id={silo.siloId} copyIdLabel="Copy silo ID" />
@@ -238,15 +229,9 @@ function UsageTab() {
   )
 }
 
-const UsageCell = ({
-  provisioned,
-  allocated,
-  unit,
-}: {
-  provisioned: number
-  allocated: number
-  unit?: string
-}) => (
+type CellProps = { provisioned: number; allocated: number; unit?: BinaryUnit }
+
+const UsageCell = ({ provisioned, allocated, unit }: CellProps) => (
   <div className="flex flex-col text-tertiary">
     <div>
       <span className="text-default">{provisioned}</span> /
@@ -257,15 +242,7 @@ const UsageCell = ({
   </div>
 )
 
-const AvailableCell = ({
-  provisioned,
-  allocated,
-  unit,
-}: {
-  provisioned: number
-  allocated: number
-  unit?: string
-}) => {
+const AvailableCell = ({ provisioned, allocated, unit }: CellProps) => {
   const usagePercent = (provisioned / allocated) * 100
   return (
     <div className="flex w-full items-center justify-between">
@@ -282,3 +259,26 @@ const AvailableCell = ({
     </div>
   )
 }
+
+type SiloCellProps = {
+  silo: SiloUtilization
+  resource: 'memory' | 'storage'
+  cellType: 'usage' | 'available'
+}
+
+// Used as a wrapper around the UsageCell and AvailableCell components,
+// for rendering the silo's memory and storage resources
+const SiloCell = ({ silo, resource, cellType }: SiloCellProps) => {
+  // Get the raw values from the silo object
+  const provisionedRaw = silo.provisioned[resource]
+  const allocatedRaw = silo.allocated[resource]
+  // Use those to get the standardized unit
+  const unit = useGetUnit(provisionedRaw, allocatedRaw)
+  const provisioned = useConvertBytesToSpecificUnit(provisionedRaw, unit)
+  const allocated = useConvertBytesToSpecificUnit(allocatedRaw, unit)
+  return cellType === 'usage' ? (
+    <UsageCell provisioned={provisioned} allocated={allocated} unit={unit} />
+  ) : (
+    <AvailableCell provisioned={provisioned} allocated={allocated} unit={unit} />
+  )
+}

app/pages/system/silos/SiloQuotasTab.tsx

@@ -23,7 +23,7 @@ import { Message } from '~/ui/lib/Message'
 import { Table } from '~/ui/lib/Table'
 import { classed } from '~/util/classed'
 import { links } from '~/util/links'
-import { bytesToGiB, GiB } from '~/util/units'
+import { bytesToGiB, GiB, useConvertBytesToSpecificUnit, useGetUnit } from '~/util/units'
 
 const Unit = classed.span`ml-1 text-tertiary`
 
@@ -34,6 +34,16 @@ export function SiloQuotasTab() {
   })
 
   const { allocated: quotas, provisioned } = utilization
+  const memoryUnits = useGetUnit(provisioned.memory, quotas.memory)
+  const provisionedMemory = useConvertBytesToSpecificUnit(provisioned.memory, memoryUnits)
+  const quotasMemory = useConvertBytesToSpecificUnit(quotas.memory, memoryUnits)
+
+  const storageUnits = useGetUnit(provisioned.storage, quotas.storage)
+  const provisionedStorage = useConvertBytesToSpecificUnit(
+    provisioned.storage,
+    storageUnits
+  )
+  const quotasStorage = useConvertBytesToSpecificUnit(quotas.storage, storageUnits)
 
   const [editing, setEditing] = useState(false)
 
@@ -60,19 +70,19 @@ export function SiloQuotasTab() {
           <Table.Row>
             <Table.Cell>Memory</Table.Cell>
             <Table.Cell>
-              {bytesToGiB(provisioned.memory)} <Unit>GiB</Unit>
+              {provisionedMemory} <Unit>{memoryUnits}</Unit>
             </Table.Cell>
             <Table.Cell>
-              {bytesToGiB(quotas.memory)} <Unit>GiB</Unit>
+              {quotasMemory} <Unit>{memoryUnits}</Unit>
             </Table.Cell>
           </Table.Row>
           <Table.Row>
             <Table.Cell>Storage</Table.Cell>
             <Table.Cell>
-              {bytesToGiB(provisioned.storage)} <Unit>GiB</Unit>
+              {provisionedStorage} <Unit>{storageUnits}</Unit>
             </Table.Cell>
             <Table.Cell>
-              {bytesToGiB(quotas.storage)} <Unit>GiB</Unit>
+              {quotasStorage} <Unit>{storageUnits}</Unit>
             </Table.Cell>
           </Table.Row>
         </Table.Body>

app/util/units.spec.ts

@@ -0,0 +1,57 @@
+/*
+ * 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, it } from 'vitest'
+
+import { bytesToReadableNumber } from './units'
+
+function bytesToReadableNumberTest() {
+  // the basics
+  expect(bytesToReadableNumber(1024)).toEqual({ number: 1, unit: 'KiB' })
+  expect(bytesToReadableNumber(1048576)).toEqual({ number: 1, unit: 'MiB' })
+  expect(bytesToReadableNumber(1073741824)).toEqual({ number: 1, unit: 'GiB' })
+  expect(bytesToReadableNumber(1099511627776)).toEqual({ number: 1, unit: 'TiB' })
+
+  // double those
+  expect(bytesToReadableNumber(2048)).toEqual({ number: 2, unit: 'KiB' })
+  expect(bytesToReadableNumber(2097152)).toEqual({ number: 2, unit: 'MiB' })
+  expect(bytesToReadableNumber(2147483648)).toEqual({ number: 2, unit: 'GiB' })
+  expect(bytesToReadableNumber(2199023255552)).toEqual({ number: 2, unit: 'TiB' })
+
+  // just 1.5 now
+  expect(bytesToReadableNumber(1536)).toEqual({ number: 1.5, unit: 'KiB' })
+  expect(bytesToReadableNumber(1572864)).toEqual({ number: 1.5, unit: 'MiB' })
+  expect(bytesToReadableNumber(1610612736)).toEqual({ number: 1.5, unit: 'GiB' })
+  expect(bytesToReadableNumber(1649267441664)).toEqual({ number: 1.5, unit: 'TiB' })
+
+  // let's do two decimal places (1.75)
+  expect(bytesToReadableNumber(1792)).toEqual({ number: 1.75, unit: 'KiB' })
+  expect(bytesToReadableNumber(1835008)).toEqual({ number: 1.75, unit: 'MiB' })
+  expect(bytesToReadableNumber(1879048192)).toEqual({ number: 1.75, unit: 'GiB' })
+  expect(bytesToReadableNumber(1924145348608)).toEqual({ number: 1.75, unit: 'TiB' })
+
+  // and three decimal places (1.755)
+  expect(bytesToReadableNumber(1797.12, 3)).toEqual({ number: 1.755, unit: 'KiB' })
+  expect(bytesToReadableNumber(1840250.88, 3)).toEqual({ number: 1.755, unit: 'MiB' })
+  expect(bytesToReadableNumber(1884416901.12, 3)).toEqual({ number: 1.755, unit: 'GiB' })
+  expect(bytesToReadableNumber(1929642906746.88, 3)).toEqual({
+    number: 1.755,
+    unit: 'TiB',
+  })
+
+  // but if we only want two decimal places, it should round appropriately
+  // note the missing second argument, so we'll used the default decimal value, 2
+  expect(bytesToReadableNumber(1797.12)).toEqual({ number: 1.76, unit: 'KiB' })
+  expect(bytesToReadableNumber(1840250.88)).toEqual({ number: 1.76, unit: 'MiB' })
+  expect(bytesToReadableNumber(1884416901.12)).toEqual({ number: 1.76, unit: 'GiB' })
+  expect(bytesToReadableNumber(1929642906746.88)).toEqual({
+    number: 1.76,
+    unit: 'TiB',
+  })
+}
+
+it('rounds to a rational number', bytesToReadableNumberTest)

app/util/units.ts

@@ -5,12 +5,62 @@
  *
  * Copyright Oxide Computer Company
  */
+import { useMemo } from 'react'
+
 import { round } from './math'
 
+// We only need to support up to TiB for now, but we can add more if needed
+export type BinaryUnit = 'B' | 'KiB' | 'MiB' | 'GiB' | 'TiB' // | 'PiB' | 'EiB' | 'ZiB' | 'YiB'
+
 export const KiB = 1024
 export const MiB = 1024 * KiB
 export const GiB = 1024 * MiB
 export const TiB = 1024 * GiB
 
+export const bytesToKiB = (b: number, digits = 2) => round(b / KiB, digits)
+export const bytesToMiB = (b: number, digits = 2) => round(b / MiB, digits)
 export const bytesToGiB = (b: number, digits = 2) => round(b / GiB, digits)
 export const bytesToTiB = (b: number, digits = 2) => round(b / TiB, digits)
+
+type BytesToReadableNumber = { number: number; unit: BinaryUnit }
+/** Takes a raw byte count and determines the appropriate unit to use in formatting it */
+export const bytesToReadableNumber = (b: number, digits = 2): BytesToReadableNumber => {
+  if (b < 1024) {
+    return { number: round(b, digits), unit: 'B' }
+  }
+  // 1024^2 = 1,048,576
+  if (b < 1048576) {
+    return { number: bytesToKiB(b, digits), unit: 'KiB' }
+  }
+  // 1024^3 = 1,073,741,824
+  if (b < 1073741824) {
+    return { number: bytesToMiB(b, digits), unit: 'MiB' }
+  }
+  // 1024^4 = 1,099,511,627,776
+  if (b < 1099511627776) {
+    return { number: bytesToGiB(b, digits), unit: 'GiB' }
+  }
+  return { number: bytesToTiB(b, digits), unit: 'TiB' }
+}
+
+// Used when we have multiple related numbers that might normally round to different units.
+// Once the proper "unified" unit base is established, all numbers can be converted to a specific unit.
+export const useConvertBytesToSpecificUnit = (
+  bytes: number,
+  unit: BinaryUnit,
+  digits = 2
+): number =>
+  useMemo(
+    () =>
+      ({
+        B: round(bytes, digits),
+        KiB: bytesToKiB(bytes, digits),
+        MiB: bytesToMiB(bytes, digits),
+        GiB: bytesToGiB(bytes, digits),
+        TiB: bytesToTiB(bytes, digits),
+      })[unit],
+    [bytes, digits, unit]
+  )
+
+export const useGetUnit = (n1: number, n2: number): BinaryUnit =>
+  useMemo(() => bytesToReadableNumber(Math.max(n1, n2)).unit, [n1, n2])

test/e2e/silos.e2e.ts

@@ -314,8 +314,8 @@ test('Quotas tab', async ({ page }) => {
   })
   await expectRowVisible(table, {
     Resource: 'Storage',
-    Provisioned: '4403.2 GiB',
-    Quota: '7168 GiB',
+    Provisioned: '4.3 TiB',
+    Quota: '7 TiB',
   })
 
   const sideModal = page.getByRole('dialog', { name: 'Edit quotas' })
@@ -344,5 +344,5 @@ test('Quotas tab', async ({ page }) => {
   // only one changes, the others stay the same
   await expectRowVisible(table, { Resource: 'CPU', Quota: '50 vCPUs' })
   await expectRowVisible(table, { Resource: 'Memory', Quota: '50 GiB' })
-  await expectRowVisible(table, { Resource: 'Storage', Quota: '7168 GiB' })
+  await expectRowVisible(table, { Resource: 'Storage', Quota: '7 TiB' })
 })