replace getUnit with explicit unit prop

Author: david-crespo

app/components/oxql-metrics/OxqlMetric.tsx

@@ -30,7 +30,6 @@ import {
   composeOxqlData,
   getBytesChartProps,
   getCountChartProps,
-  getUnit,
   getUtilizationChartProps,
   type OxqlQuery,
 } from './util'
@@ -47,9 +46,10 @@ export async function loader({ params }: LoaderFunctionArgs) {
 export type OxqlMetricProps = OxqlQuery & {
   title: string
   description?: string
+  unit: 'Bytes' | '%' | 'Count'
 }
 
-export function OxqlMetric({ title, description, ...queryObj }: OxqlMetricProps) {
+export function OxqlMetric({ title, description, unit, ...queryObj }: OxqlMetricProps) {
   // only start reloading data once an intial dataset has been loaded
   const { setIsIntervalPickerEnabled } = useMetricsContext()
   const query = toOxqlStr(queryObj)
@@ -67,7 +67,6 @@ export function OxqlMetric({ title, description, ...queryObj }: OxqlMetricProps)
   }, [metrics, setIsIntervalPickerEnabled])
   const { startTime, endTime } = queryObj
   const { chartData, timeseriesCount } = useMemo(() => composeOxqlData(metrics), [metrics])
-  const unit = getUnit(title)
   const { data, label, unitForSet, yAxisTickFormatter } = useMemo(() => {
     if (unit === 'Bytes') return getBytesChartProps(chartData)
     if (unit === 'Count') return getCountChartProps(chartData)

app/components/oxql-metrics/util.spec.ts

@@ -15,7 +15,6 @@ import {
   getMaxExponent,
   getMeanWithinSeconds,
   getTimePropsForOxqlQuery,
-  getUnit,
   getUtilizationChartProps,
   oxqlTimestamp,
   sumValues,
@@ -117,13 +116,6 @@ test('yAxisLabelForCountChart', () => {
   expect(yAxisLabelForCountChart(10 ** 12 + 1, 4)).toEqual('1T')
 })
 
-test('getUnit', () => {
-  expect(getUnit('CPU Utilization')).toEqual('%')
-  expect(getUnit('Bytes Read')).toEqual('Bytes')
-  expect(getUnit('Disk reads')).toEqual('Count')
-  expect(getUnit('Anything else')).toEqual('Count')
-})
-
 test('getLargestValue', () => {
   const sampleData = [
     { timestamp: 1739232000000, value: 5 },

app/components/oxql-metrics/util.ts

@@ -122,13 +122,6 @@ export const sumValues = (timeseries: Timeseries[], arrLen: number): (number | n
     )
   )
 
-type ChartUnitType = 'Bytes' | '%' | 'Count'
-export const getUnit = (title: string): ChartUnitType => {
-  if (title.includes('Bytes')) return 'Bytes'
-  if (title.includes('Utilization')) return '%'
-  return 'Count'
-}
-
 // Take the OxQL Query Result and return the data in a format that the chart can use
 // We'll do this by creating two arrays: one for the timestamps and one for the values
 // We'll then combine these into an array of objects, each with a timestamp and a value

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

@@ -36,6 +36,7 @@ export default function CpuMetricsTab() {
   type CpuChartType = OxqlVcpuState | 'all'
 
   const queryBase = {
+    unit: '%' as const,
     metricName: 'virtual_machine:vcpu_usage' as const,
     startTime,
     endTime,
@@ -96,7 +97,7 @@ export default function CpuMetricsTab() {
                 title="CPU Utilization: Waiting"
                 eqFilters={{ instance_id: instanceData.id, state: 'waiting' }}
                 {...queryBase}
-              />{' '}
+              />
             </MetricRow>
           </>
         ) : (

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

@@ -118,12 +118,14 @@ function DiskMetrics({ disks, instance }: { disks: Disk[]; instance: Instance })
             title="Disk Reads"
             description="Total number of read operations from the disk"
             metricName="virtual_disk:reads"
+            unit="Count"
             {...queryBase}
           />
           <OxqlMetric
             title="Disk Writes"
             description="Total number of write operations to the disk"
             metricName="virtual_disk:writes"
+            unit="Count"
             {...queryBase}
           />
         </MetricRow>
@@ -133,12 +135,14 @@ function DiskMetrics({ disks, instance }: { disks: Disk[]; instance: Instance })
             title="Bytes Read"
             description="Number of bytes read from the disk"
             metricName="virtual_disk:bytes_read"
+            unit="Bytes"
             {...queryBase}
           />
           <OxqlMetric
             title="Bytes Written"
             description="Number of bytes written to the disk"
             metricName="virtual_disk:bytes_written"
+            unit="Bytes"
             {...queryBase}
           />
         </MetricRow>
@@ -148,6 +152,7 @@ function DiskMetrics({ disks, instance }: { disks: Disk[]; instance: Instance })
             title="Disk Flushes"
             description="Total number of flush operations on the disk"
             metricName="virtual_disk:flushes"
+            unit="Count"
             {...queryBase}
           />
         </MetricRow>

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

@@ -115,12 +115,14 @@ function NetworkMetrics({ nics }: { nics: InstanceNetworkInterface[] }) {
             title="Bytes Sent"
             description="Number of bytes sent on the link"
             metricName="instance_network_interface:bytes_sent"
+            unit="Bytes"
             {...queryBase}
           />
           <OxqlMetric
             title="Bytes Received"
             description="Number of bytes received on the link"
             metricName="instance_network_interface:bytes_received"
+            unit="Bytes"
             {...queryBase}
           />
         </MetricRow>
@@ -129,19 +131,22 @@ function NetworkMetrics({ nics }: { nics: InstanceNetworkInterface[] }) {
             title="Packets Sent"
             description="Number of packets sent on the link"
             metricName="instance_network_interface:packets_sent"
+            unit="Count"
             {...queryBase}
           />
           <OxqlMetric
             title="Packets Received"
             description="Number of packets received on the link"
             metricName="instance_network_interface:packets_received"
+            unit="Count"
             {...queryBase}
           />
         </MetricRow>
         <MetricRow>
           <OxqlMetric
             title="Packets Dropped"
             metricName="instance_network_interface:packets_dropped"
+            unit="Count"
             {...queryBase}
           />
         </MetricRow>