Instance disk metrics should not be displayed in bytes

[Aaron-Hartwig]

I'm seeing raw counts of things like number of/bytes for reads/writes. I'm assuming this is not the design intent given those raw numbers aren't really that useful and it also is not how we display /utilization.

Is there supposed to be some sort of dynamic unit selection here?

Also, when I resize my browser those Y-axis labels continue to run outside the box (sorry I don't know the technical word here). I guess I'd have expected the chart to scale more dynamically, perhaps some % of new width would be allocated to the axis labels and the rest to the graph itself.

[david-crespo]

We are being very unsmart here, just jamming the data directly into the chart without any transformation.

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

Lines 47 to 81 in 02c6ce7

	const { data: metrics, isLoading } = useApiQuery(
	'diskMetricsList',
	{
	path: { disk, metric },
	query: { project, startTime, endTime, limit: 3000 },
	},
	// avoid graphs flashing blank while loading when you change the time
	{ placeholderData: (x) => x }
	)
	const data = (metrics?.items || []).map(({ datum, timestamp }) => ({
	timestamp: timestamp.getTime(),
	// all of these metrics are cumulative ints
	value: (datum.datum as Cumulativeint64).value,
	}))
	return (
	<div className="flex w-1/2 flex-grow flex-col">
	<h2 className="ml-3 flex items-center text-mono-xs text-secondary">
	{title} {unit && <div className="ml-1 text-quaternary">{unit}</div>}
	{isLoading && <Spinner className="ml-2" />}
	</h2>
	<Suspense fallback={<div className="mt-3 h-[300px]" />}>
	<TimeSeriesChart
	className="mt-3"
	data={data}
	title={title}
	width={480}
	height={240}
	startTime={startTime}
	endTime={endTime}
	/>
	</Suspense>
	</div>
	)

Compare to utilization tables, where we explicitly transform to a hard-coded unit:

console/app/pages/SiloUtilizationPage.tsx

Lines 104 to 117 in 02c6ce7

	<SiloMetric
	{...commonProps}
	metricName="ram_provisioned"
	title="Memory"
	unit="GiB"
	valueTransform={bytesToGiB}
	/>
	<SiloMetric
	{...commonProps}
	metricName="virtual_disk_space_provisioned"
	title="Storage"
	unit="TiB"
	valueTransform={bytesToTiB}
	/>

Obviously we should do something similar here. The main open question for me is whether we should hard-code a unit like we do above — presumably MiB or GiB — or do we need to be more clever based on the order of magnitude of the data we're seeing (if this data tends to vary over a pretty wide range).

[bnaecker]

The usual trick with this kind of data is to divide it by 10 so that it’s always between one inclusive and 1000 exclusive. Each time you divide you move up by one SI prefix, so you start with bytes, then KiB, then MiB, etc., 00 rounding to one or two decimal places.