feat: add more disk I/O metrics (#1866)

Co-authored-by: henrygd <hank@henrygd.me>

internal/site/src/components/charts/area-chart.tsx

@@ -41,8 +41,8 @@ export default function AreaChartDefault({
 	hideYAxis = false,
 	filter,
 	truncate = false,
-}: // logRender = false,
-{
+	chartProps,
+}: {
 	chartData: ChartData
 	// biome-ignore lint/suspicious/noExplicitAny: accepts different data source types (systemStats or containerData)
 	customData?: any[]
@@ -62,7 +62,7 @@ export default function AreaChartDefault({
 	hideYAxis?: boolean
 	filter?: string
 	truncate?: boolean
-	// logRender?: boolean
+	chartProps?: Omit<React.ComponentProps<typeof AreaChart>, "data" | "margin">
 }) {
 	const { yAxisWidth, updateYAxisWidth } = useYAxisWidth()
 	const { isIntersecting, ref } = useIntersectionObserver({ freeze: false })
@@ -131,6 +131,7 @@ export default function AreaChartDefault({
 					accessibilityLayer
 					data={displayData}
 					margin={hideYAxis ? { ...chartMargin, left: 5 } : chartMargin}
+					{...chartProps}
 				>
 					<CartesianGrid vertical={false} />
 					{!hideYAxis && (

internal/site/src/components/charts/line-chart.tsx

@@ -40,8 +40,8 @@ export default function LineChartDefault({
 	hideYAxis = false,
 	filter,
 	truncate = false,
-}: // logRender = false,
-{
+	chartProps,
+}: {
 	chartData: ChartData
 	// biome-ignore lint/suspicious/noExplicitAny: accepts different data source types (systemStats or containerData)
 	customData?: any[]
@@ -61,7 +61,7 @@ export default function LineChartDefault({
 	hideYAxis?: boolean
 	filter?: string
 	truncate?: boolean
-	// logRender?: boolean
+	chartProps?: Omit<React.ComponentProps<typeof LineChart>, "data" | "margin">
 }) {
 	const { yAxisWidth, updateYAxisWidth } = useYAxisWidth()
 	const { isIntersecting, ref } = useIntersectionObserver({ freeze: false })
@@ -130,6 +130,7 @@ export default function LineChartDefault({
 					accessibilityLayer
 					data={displayData}
 					margin={hideYAxis ? { ...chartMargin, left: 5 } : chartMargin}
+					{...chartProps}
 				>
 					<CartesianGrid vertical={false} />
 					{!hideYAxis && (

internal/site/src/components/routes/system.tsx

@@ -1,18 +1,16 @@
 import { memo, useState } from "react"
 import { Trans } from "@lingui/react/macro"
 import { compareSemVer, parseSemVer } from "@/lib/utils"
-
 import type { GPUData } from "@/types"
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
 import InfoBar from "./system/info-bar"
 import { useSystemData } from "./system/use-system-data"
 import { CpuChart, ContainerCpuChart } from "./system/charts/cpu-charts"
 import { MemoryChart, ContainerMemoryChart, SwapChart } from "./system/charts/memory-charts"
-import { DiskCharts } from "./system/charts/disk-charts"
+import { RootDiskCharts, ExtraFsCharts } from "./system/charts/disk-charts"
 import { BandwidthChart, ContainerNetworkChart } from "./system/charts/network-charts"
 import { TemperatureChart, BatteryChart } from "./system/charts/sensor-charts"
 import { GpuPowerChart, GpuDetailCharts } from "./system/charts/gpu-charts"
-import { ExtraFsCharts } from "./system/charts/extra-fs-charts"
 import { LazyContainersTable, LazySmartTable, LazySystemdTable } from "./system/lazy-tables"
 import { LoadAverageChart } from "./system/charts/load-average-chart"
 import { ContainerIcon, CpuIcon, HardDriveIcon, TerminalSquareIcon } from "lucide-react"
@@ -24,6 +22,8 @@ const SEMVER_0_14_0 = parseSemVer("0.14.0")
 const SEMVER_0_15_0 = parseSemVer("0.15.0")
 
 export default memo(function SystemDetail({ id }: { id: string }) {
+	const systemData = useSystemData(id)
+
 	const {
 		system,
 		systemStats,
@@ -48,7 +48,7 @@ export default memo(function SystemDetail({ id }: { id: string }) {
 		hasGpuData,
 		hasGpuEnginesData,
 		hasGpuPowerData,
-	} = useSystemData(id)
+	} = systemData
 
 	// extra margin to add to bottom of page, specifically for temperature chart,
 	// where the tooltip can go past the bottom of the page if lots of sensors
@@ -103,7 +103,7 @@ export default memo(function SystemDetail({ id }: { id: string }) {
 						/>
 					)}
 
-					<DiskCharts {...coreProps} systemStats={systemStats} />
+					<RootDiskCharts systemData={systemData} />
 
 					<BandwidthChart {...coreProps} systemStats={systemStats} />
 
@@ -138,7 +138,7 @@ export default memo(function SystemDetail({ id }: { id: string }) {
 					/>
 				)}
 
-				<ExtraFsCharts {...coreProps} systemStats={systemStats} />
+				<ExtraFsCharts systemData={systemData} />
 
 				{maybeHasSmartData && <LazySmartTable systemId={system.id} />}
 
@@ -198,9 +198,9 @@ export default memo(function SystemDetail({ id }: { id: string }) {
 					{mountedTabs.has("disk") && (
 						<>
 							<div className="grid xl:grid-cols-2 gap-4">
-								<DiskCharts {...coreProps} systemStats={systemStats} />
+								<RootDiskCharts systemData={systemData} />
 							</div>
-							<ExtraFsCharts {...coreProps} systemStats={systemStats} />
+							<ExtraFsCharts systemData={systemData} />
 							{maybeHasSmartData && <LazySmartTable systemId={system.id} />}
 						</>
 					)}

internal/site/src/components/routes/system/charts/disk-charts.tsx

@@ -1,106 +1,280 @@
 import { t } from "@lingui/core/macro"
 import AreaChartDefault from "@/components/charts/area-chart"
-import { $userSettings } from "@/lib/stores"
 import { decimalString, formatBytes, toFixedFloat } from "@/lib/utils"
-import type { ChartData, SystemStatsRecord } from "@/types"
+import type { SystemStatsRecord } from "@/types"
 import { ChartCard, SelectAvgMax } from "../chart-card"
 import { Unit } from "@/lib/enums"
+import { pinnedAxisDomain } from "@/components/ui/chart"
+import DiskIoSheet from "../disk-io-sheet"
+import type { SystemData } from "../use-system-data"
+import { useStore } from "@nanostores/react"
+import { $userSettings } from "@/lib/stores"
 
-export function DiskCharts({
-	chartData,
-	grid,
-	dataEmpty,
-	showMax,
-	isLongerChart,
-	maxValues,
-}: {
-	chartData: ChartData
-	grid: boolean
-	dataEmpty: boolean
-	showMax: boolean
-	isLongerChart: boolean
-	maxValues: boolean
-	systemStats: SystemStatsRecord[]
-}) {
-	const maxValSelect = isLongerChart ? <SelectAvgMax max={maxValues} /> : null
-	const userSettings = $userSettings.get()
+// Helpers for indexed dios/diosm access
+const dios =
+	(i: number) =>
+	({ stats }: SystemStatsRecord) =>
+		stats?.dios?.[i] ?? 0
+const diosMax =
+	(i: number) =>
+	({ stats }: SystemStatsRecord) =>
+		stats?.diosm?.[i] ?? 0
+const extraDios =
+	(name: string, i: number) =>
+	({ stats }: SystemStatsRecord) =>
+		stats?.efs?.[name]?.dios?.[i] ?? 0
+const extraDiosMax =
+	(name: string, i: number) =>
+	({ stats }: SystemStatsRecord) =>
+		stats?.efs?.[name]?.diosm?.[i] ?? 0
+
+export const diskDataFns = {
+	// usage
+	usage: ({ stats }: SystemStatsRecord) => stats?.du ?? 0,
+	extraUsage:
+		(name: string) =>
+		({ stats }: SystemStatsRecord) =>
+			stats?.efs?.[name]?.du ?? 0,
+	// throughput
+	read: ({ stats }: SystemStatsRecord) => stats?.dio?.[0] ?? (stats?.dr ?? 0) * 1024 * 1024,
+	readMax: ({ stats }: SystemStatsRecord) => stats?.diom?.[0] ?? (stats?.drm ?? 0) * 1024 * 1024,
+	write: ({ stats }: SystemStatsRecord) => stats?.dio?.[1] ?? (stats?.dw ?? 0) * 1024 * 1024,
+	writeMax: ({ stats }: SystemStatsRecord) => stats?.diom?.[1] ?? (stats?.dwm ?? 0) * 1024 * 1024,
+	// extra fs throughput
+	extraRead:
+		(name: string) =>
+		({ stats }: SystemStatsRecord) =>
+			stats?.efs?.[name]?.rb ?? (stats?.efs?.[name]?.r ?? 0) * 1024 * 1024,
+	extraReadMax:
+		(name: string) =>
+		({ stats }: SystemStatsRecord) =>
+			stats?.efs?.[name]?.rbm ?? (stats?.efs?.[name]?.rm ?? 0) * 1024 * 1024,
+	extraWrite:
+		(name: string) =>
+		({ stats }: SystemStatsRecord) =>
+			stats?.efs?.[name]?.wb ?? (stats?.efs?.[name]?.w ?? 0) * 1024 * 1024,
+	extraWriteMax:
+		(name: string) =>
+		({ stats }: SystemStatsRecord) =>
+			stats?.efs?.[name]?.wbm ?? (stats?.efs?.[name]?.wm ?? 0) * 1024 * 1024,
+	// read/write time
+	readTime: dios(0),
+	readTimeMax: diosMax(0),
+	extraReadTime: (name: string) => extraDios(name, 0),
+	extraReadTimeMax: (name: string) => extraDiosMax(name, 0),
+	writeTime: dios(1),
+	writeTimeMax: diosMax(1),
+	extraWriteTime: (name: string) => extraDios(name, 1),
+	extraWriteTimeMax: (name: string) => extraDiosMax(name, 1),
+	// utilization (IoTime-based, 0-100%)
+	util: dios(2),
+	utilMax: diosMax(2),
+	extraUtil: (name: string) => extraDios(name, 2),
+	extraUtilMax: (name: string) => extraDiosMax(name, 2),
+	// r_await / w_await: average service time per read/write operation (ms)
+	rAwait: dios(3),
+	rAwaitMax: diosMax(3),
+	extraRAwait: (name: string) => extraDios(name, 3),
+	extraRAwaitMax: (name: string) => extraDiosMax(name, 3),
+	wAwait: dios(4),
+	wAwaitMax: diosMax(4),
+	extraWAwait: (name: string) => extraDios(name, 4),
+	extraWAwaitMax: (name: string) => extraDiosMax(name, 4),
+	// average queue depth: stored as queue_depth * 100 in Go, divided here
+	weightedIO: ({ stats }: SystemStatsRecord) => (stats?.dios?.[5] ?? 0) / 100,
+	weightedIOMax: ({ stats }: SystemStatsRecord) => (stats?.diosm?.[5] ?? 0) / 100,
+	extraWeightedIO:
+		(name: string) =>
+		({ stats }: SystemStatsRecord) =>
+			(stats?.efs?.[name]?.dios?.[5] ?? 0) / 100,
+	extraWeightedIOMax:
+		(name: string) =>
+		({ stats }: SystemStatsRecord) =>
+			(stats?.efs?.[name]?.diosm?.[5] ?? 0) / 100,
+}
+
+export function RootDiskCharts({ systemData }: { systemData: SystemData }) {
+	return (
+		<>
+			<DiskUsageChart systemData={systemData} />
+			<DiskIOChart systemData={systemData} />
+		</>
+	)
+}
+
+export function DiskUsageChart({ systemData, extraFsName }: { systemData: SystemData; extraFsName?: string }) {
+	const { chartData, grid, dataEmpty } = systemData
 
 	let diskSize = chartData.systemStats?.at(-1)?.stats.d ?? NaN
+	if (extraFsName) {
+		diskSize = chartData.systemStats?.at(-1)?.stats.efs?.[extraFsName]?.d ?? NaN
+	}
 	// round to nearest GB
 	if (diskSize >= 100) {
 		diskSize = Math.round(diskSize)
 	}
 
-	return (
-		<>
-			<ChartCard empty={dataEmpty} grid={grid} title={t`Disk Usage`} description={t`Usage of root partition`}>
-				<AreaChartDefault
-					chartData={chartData}
-					domain={[0, diskSize]}
-					tickFormatter={(val) => {
-						const { value, unit } = formatBytes(val * 1024, false, Unit.Bytes, true)
-						return `${toFixedFloat(value, value >= 10 ? 0 : 1)} ${unit}`
-					}}
-					contentFormatter={({ value }) => {
-						const { value: convertedValue, unit } = formatBytes(value * 1024, false, Unit.Bytes, true)
-						return `${decimalString(convertedValue)} ${unit}`
-					}}
-					dataPoints={[
-						{
-							label: t`Disk Usage`,
-							color: 4,
-							opacity: 0.4,
-							dataKey: ({ stats }) => stats?.du,
-						},
-					]}
-				></AreaChartDefault>
-			</ChartCard>
+	const title = extraFsName ? `${extraFsName} ${t`Usage`}` : t`Disk Usage`
+	const description = extraFsName ? t`Disk usage of ${extraFsName}` : t`Usage of root partition`
 
-			<ChartCard
-				empty={dataEmpty}
-				grid={grid}
-				title={t`Disk I/O`}
-				description={t`Throughput of root filesystem`}
-				cornerEl={maxValSelect}
-			>
-				<AreaChartDefault
-					chartData={chartData}
-					maxToggled={showMax}
-					dataPoints={[
-						{
-							label: t({ message: "Write", comment: "Disk write" }),
-							dataKey: ({ stats }: SystemStatsRecord) => {
-								if (showMax) {
-									return stats?.dio?.[1] ?? (stats?.dwm ?? 0) * 1024 * 1024
-								}
-								return stats?.dio?.[1] ?? (stats?.dw ?? 0) * 1024 * 1024
-							},
-							color: 3,
-							opacity: 0.3,
-						},
-						{
-							label: t({ message: "Read", comment: "Disk read" }),
-							dataKey: ({ stats }: SystemStatsRecord) => {
-								if (showMax) {
-									return stats?.diom?.[0] ?? (stats?.drm ?? 0) * 1024 * 1024
-								}
-								return stats?.dio?.[0] ?? (stats?.dr ?? 0) * 1024 * 1024
-							},
-							color: 1,
-							opacity: 0.3,
-						},
-					]}
-					tickFormatter={(val) => {
-						const { value, unit } = formatBytes(val, true, userSettings.unitDisk, false)
-						return `${toFixedFloat(value, value >= 10 ? 0 : 1)} ${unit}`
-					}}
-					contentFormatter={({ value }) => {
-						const { value: convertedValue, unit } = formatBytes(value, true, userSettings.unitDisk, false)
-						return `${decimalString(convertedValue, convertedValue >= 100 ? 1 : 2)} ${unit}`
-					}}
-					showTotal={true}
-				/>
-			</ChartCard>
-		</>
+	return (
+		<ChartCard empty={dataEmpty} grid={grid} title={title} description={description}>
+			<AreaChartDefault
+				chartData={chartData}
+				domain={[0, diskSize]}
+				tickFormatter={(val) => {
+					const { value, unit } = formatBytes(val * 1024, false, Unit.Bytes, true)
+					return `${toFixedFloat(value, value >= 10 ? 0 : 1)} ${unit}`
+				}}
+				contentFormatter={({ value }) => {
+					const { value: convertedValue, unit } = formatBytes(value * 1024, false, Unit.Bytes, true)
+					return `${decimalString(convertedValue)} ${unit}`
+				}}
+				dataPoints={[
+					{
+						label: t`Disk Usage`,
+						color: 4,
+						opacity: 0.4,
+						dataKey: extraFsName ? diskDataFns.extraUsage(extraFsName) : diskDataFns.usage,
+					},
+				]}
+			></AreaChartDefault>
+		</ChartCard>
+	)
+}
+
+export function DiskIOChart({ systemData, extraFsName }: { systemData: SystemData; extraFsName?: string }) {
+	const { chartData, grid, dataEmpty, showMax, isLongerChart, maxValues } = systemData
+	const maxValSelect = isLongerChart ? <SelectAvgMax max={maxValues} /> : null
+	const userSettings = useStore($userSettings)
+
+	if (!chartData.systemStats?.length) {
+		return null
+	}
+
+	const title = extraFsName ? t`${extraFsName} I/O` : t`Disk I/O`
+	const description = extraFsName ? t`Throughput of ${extraFsName}` : t`Throughput of root filesystem`
+
+	const hasMoreIOMetrics = chartData.systemStats?.some((record) => record.stats?.dios?.at(0))
+
+	let CornerEl = maxValSelect
+	if (hasMoreIOMetrics) {
+		CornerEl = (
+			<div className="flex gap-2">
+				{maxValSelect}
+				<DiskIoSheet systemData={systemData} extraFsName={extraFsName} title={title} description={description} />
+			</div>
+		)
+	}
+
+	let readFn = showMax ? diskDataFns.readMax : diskDataFns.read
+	let writeFn = showMax ? diskDataFns.writeMax : diskDataFns.write
+	if (extraFsName) {
+		readFn = showMax ? diskDataFns.extraReadMax(extraFsName) : diskDataFns.extraRead(extraFsName)
+		writeFn = showMax ? diskDataFns.extraWriteMax(extraFsName) : diskDataFns.extraWrite(extraFsName)
+	}
+
+	return (
+		<ChartCard empty={dataEmpty} grid={grid} title={title} description={description} cornerEl={CornerEl}>
+			<AreaChartDefault
+				chartData={chartData}
+				maxToggled={showMax}
+				// domain={pinnedAxisDomain(true)}
+				showTotal={true}
+				dataPoints={[
+					{
+						label: t({ message: "Write", comment: "Disk write" }),
+						dataKey: writeFn,
+						color: 3,
+						opacity: 0.3,
+					},
+					{
+						label: t({ message: "Read", comment: "Disk read" }),
+						dataKey: readFn,
+						color: 1,
+						opacity: 0.3,
+					},
+				]}
+				tickFormatter={(val) => {
+					const { value, unit } = formatBytes(val, true, userSettings.unitDisk, false)
+					return `${toFixedFloat(value, value >= 10 ? 0 : 1)} ${unit}`
+				}}
+				contentFormatter={({ value }) => {
+					const { value: convertedValue, unit } = formatBytes(value, true, userSettings.unitDisk, false)
+					return `${decimalString(convertedValue, convertedValue >= 100 ? 1 : 2)} ${unit}`
+				}}
+			/>
+		</ChartCard>
+	)
+}
+
+export function DiskUtilizationChart({ systemData, extraFsName }: { systemData: SystemData; extraFsName?: string }) {
+	const { chartData, grid, dataEmpty, showMax, isLongerChart, maxValues } = systemData
+	const maxValSelect = isLongerChart ? <SelectAvgMax max={maxValues} /> : null
+
+	if (!chartData.systemStats?.length) {
+		return null
+	}
+
+	let utilFn = showMax ? diskDataFns.utilMax : diskDataFns.util
+	if (extraFsName) {
+		utilFn = showMax ? diskDataFns.extraUtilMax(extraFsName) : diskDataFns.extraUtil(extraFsName)
+	}
+	return (
+		<ChartCard
+			cornerEl={maxValSelect}
+			empty={dataEmpty}
+			grid={grid}
+			title={t`I/O Utilization`}
+			description={t`Percent of time the disk is busy with I/O`}
+			// legend={true}
+			className="min-h-auto"
+		>
+			<AreaChartDefault
+				chartData={chartData}
+				domain={pinnedAxisDomain()}
+				tickFormatter={(val) => `${toFixedFloat(val, 2)}%`}
+				contentFormatter={({ value }) => `${decimalString(value)}%`}
+				maxToggled={showMax}
+				chartProps={{ syncId: "io" }}
+				dataPoints={[
+					{
+						label: t`Utilization`,
+						dataKey: utilFn,
+						color: 1,
+						opacity: 0.4,
+					},
+				]}
+			/>
+		</ChartCard>
+	)
+}
+
+export function ExtraFsCharts({ systemData }: { systemData: SystemData }) {
+	const { systemStats } = systemData.chartData
+
+	const extraFs = systemStats?.at(-1)?.stats.efs
+
+	if (!extraFs || Object.keys(extraFs).length === 0) {
+		return null
+	}
+
+	return (
+		<div className="grid xl:grid-cols-2 gap-4">
+			{Object.keys(extraFs).map((extraFsName) => {
+				let diskSize = systemStats.at(-1)?.stats.efs?.[extraFsName].d ?? NaN
+				// round to nearest GB
+				if (diskSize >= 100) {
+					diskSize = Math.round(diskSize)
+				}
+				return (
+					<div key={extraFsName} className="contents">
+						<DiskUsageChart systemData={systemData} extraFsName={extraFsName} />
+
+						<DiskIOChart systemData={systemData} extraFsName={extraFsName} />
+					</div>
+				)
+			})}
+		</div>
 	)
 }

internal/site/src/components/routes/system/charts/extra-fs-charts.tsx

@@ -1,120 +0,0 @@
-import { t } from "@lingui/core/macro"
-import AreaChartDefault from "@/components/charts/area-chart"
-import { $userSettings } from "@/lib/stores"
-import { decimalString, formatBytes, toFixedFloat } from "@/lib/utils"
-import type { ChartData, SystemStatsRecord } from "@/types"
-import { ChartCard, SelectAvgMax } from "../chart-card"
-import { Unit } from "@/lib/enums"
-
-export function ExtraFsCharts({
-	chartData,
-	grid,
-	dataEmpty,
-	showMax,
-	isLongerChart,
-	maxValues,
-	systemStats,
-}: {
-	chartData: ChartData
-	grid: boolean
-	dataEmpty: boolean
-	showMax: boolean
-	isLongerChart: boolean
-	maxValues: boolean
-	systemStats: SystemStatsRecord[]
-}) {
-	const maxValSelect = isLongerChart ? <SelectAvgMax max={maxValues} /> : null
-	const userSettings = $userSettings.get()
-	const extraFs = systemStats.at(-1)?.stats.efs
-	if (!extraFs || Object.keys(extraFs).length === 0) {
-		return null
-	}
-
-	return (
-		<div className="grid xl:grid-cols-2 gap-4">
-			{Object.keys(extraFs).map((extraFsName) => {
-				let diskSize = systemStats.at(-1)?.stats.efs?.[extraFsName].d ?? NaN
-				// round to nearest GB
-				if (diskSize >= 100) {
-					diskSize = Math.round(diskSize)
-				}
-				return (
-					<div key={extraFsName} className="contents">
-						<ChartCard
-							empty={dataEmpty}
-							grid={grid}
-							title={`${extraFsName} ${t`Usage`}`}
-							description={t`Disk usage of ${extraFsName}`}
-						>
-							<AreaChartDefault
-								chartData={chartData}
-								domain={[0, diskSize]}
-								tickFormatter={(val) => {
-									const { value, unit } = formatBytes(val * 1024, false, Unit.Bytes, true)
-									return `${toFixedFloat(value, value >= 10 ? 0 : 1)} ${unit}`
-								}}
-								contentFormatter={({ value }) => {
-									const { value: convertedValue, unit } = formatBytes(value * 1024, false, Unit.Bytes, true)
-									return `${decimalString(convertedValue)} ${unit}`
-								}}
-								dataPoints={[
-									{
-										label: t`Disk Usage`,
-										color: 4,
-										opacity: 0.4,
-										dataKey: ({ stats }) => stats?.efs?.[extraFsName]?.du,
-									},
-								]}
-							></AreaChartDefault>
-						</ChartCard>
-						<ChartCard
-							empty={dataEmpty}
-							grid={grid}
-							title={`${extraFsName} I/O`}
-							description={t`Throughput of ${extraFsName}`}
-							cornerEl={maxValSelect}
-						>
-							<AreaChartDefault
-								chartData={chartData}
-								showTotal={true}
-								dataPoints={[
-									{
-										label: t`Write`,
-										dataKey: ({ stats }) => {
-											if (showMax) {
-												return stats?.efs?.[extraFsName]?.wbm || (stats?.efs?.[extraFsName]?.wm ?? 0) * 1024 * 1024
-											}
-											return stats?.efs?.[extraFsName]?.wb || (stats?.efs?.[extraFsName]?.w ?? 0) * 1024 * 1024
-										},
-										color: 3,
-										opacity: 0.3,
-									},
-									{
-										label: t`Read`,
-										dataKey: ({ stats }) => {
-											if (showMax) {
-												return stats?.efs?.[extraFsName]?.rbm ?? (stats?.efs?.[extraFsName]?.rm ?? 0) * 1024 * 1024
-											}
-											return stats?.efs?.[extraFsName]?.rb ?? (stats?.efs?.[extraFsName]?.r ?? 0) * 1024 * 1024
-										},
-										color: 1,
-										opacity: 0.3,
-									},
-								]}
-								maxToggled={showMax}
-								tickFormatter={(val) => {
-									const { value, unit } = formatBytes(val, true, userSettings.unitDisk, false)
-									return `${toFixedFloat(value, value >= 10 ? 0 : 1)} ${unit}`
-								}}
-								contentFormatter={({ value }) => {
-									const { value: convertedValue, unit } = formatBytes(value, true, userSettings.unitDisk, false)
-									return `${decimalString(convertedValue, convertedValue >= 100 ? 1 : 2)} ${unit}`
-								}}
-							/>
-						</ChartCard>
-					</div>
-				)
-			})}
-		</div>
-	)
-}

internal/site/src/components/routes/system/disk-io-sheet.tsx

@@ -0,0 +1,257 @@
+import { t } from "@lingui/core/macro"
+import { useStore } from "@nanostores/react"
+import { MoreHorizontalIcon } from "lucide-react"
+import { memo, useRef, useState } from "react"
+import AreaChartDefault from "@/components/charts/area-chart"
+import ChartTimeSelect from "@/components/charts/chart-time-select"
+import { Button } from "@/components/ui/button"
+import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet"
+import { DialogTitle } from "@/components/ui/dialog"
+import { $userSettings } from "@/lib/stores"
+import { decimalString, formatBytes, toFixedFloat } from "@/lib/utils"
+import { ChartCard, SelectAvgMax } from "@/components/routes/system/chart-card"
+import type { SystemData } from "@/components/routes/system/use-system-data"
+import { diskDataFns, DiskUtilizationChart } from "./charts/disk-charts"
+import { pinnedAxisDomain } from "@/components/ui/chart"
+
+export default memo(function DiskIOSheet({
+	systemData,
+	extraFsName,
+	title,
+	description,
+}: {
+	systemData: SystemData
+	extraFsName?: string
+	title: string
+	description: string
+}) {
+	const { chartData, grid, dataEmpty, showMax, maxValues, isLongerChart } = systemData
+	const userSettings = useStore($userSettings)
+
+	const [sheetOpen, setSheetOpen] = useState(false)
+
+	const hasOpened = useRef(false)
+
+	if (sheetOpen && !hasOpened.current) {
+		hasOpened.current = true
+	}
+
+	// throughput functions, with extra fs variants if needed
+	let readFn = showMax ? diskDataFns.readMax : diskDataFns.read
+	let writeFn = showMax ? diskDataFns.writeMax : diskDataFns.write
+	if (extraFsName) {
+		readFn = showMax ? diskDataFns.extraReadMax(extraFsName) : diskDataFns.extraRead(extraFsName)
+		writeFn = showMax ? diskDataFns.extraWriteMax(extraFsName) : diskDataFns.extraWrite(extraFsName)
+	}
+
+	// read and write time functions, with extra fs variants if needed
+	let readTimeFn = showMax ? diskDataFns.readTimeMax : diskDataFns.readTime
+	let writeTimeFn = showMax ? diskDataFns.writeTimeMax : diskDataFns.writeTime
+	if (extraFsName) {
+		readTimeFn = showMax ? diskDataFns.extraReadTimeMax(extraFsName) : diskDataFns.extraReadTime(extraFsName)
+		writeTimeFn = showMax ? diskDataFns.extraWriteTimeMax(extraFsName) : diskDataFns.extraWriteTime(extraFsName)
+	}
+
+	// I/O await functions, with extra fs variants if needed
+	let rAwaitFn = showMax ? diskDataFns.rAwaitMax : diskDataFns.rAwait
+	let wAwaitFn = showMax ? diskDataFns.wAwaitMax : diskDataFns.wAwait
+	if (extraFsName) {
+		rAwaitFn = showMax ? diskDataFns.extraRAwaitMax(extraFsName) : diskDataFns.extraRAwait(extraFsName)
+		wAwaitFn = showMax ? diskDataFns.extraWAwaitMax(extraFsName) : diskDataFns.extraWAwait(extraFsName)
+	}
+
+	// weighted I/O function, with extra fs variant if needed
+	let weightedIOFn = showMax ? diskDataFns.weightedIOMax : diskDataFns.weightedIO
+	if (extraFsName) {
+		weightedIOFn = showMax ? diskDataFns.extraWeightedIOMax(extraFsName) : diskDataFns.extraWeightedIO(extraFsName)
+	}
+
+	// check for availability of I/O metrics
+	let hasUtilization = false
+	let hasAwait = false
+	let hasWeightedIO = false
+	for (const record of chartData.systemStats ?? []) {
+		const dios = record.stats?.dios
+		if ((dios?.at(2) ?? 0) > 0) hasUtilization = true
+		if ((dios?.at(3) ?? 0) > 0) hasAwait = true
+		if ((dios?.at(5) ?? 0) > 0) hasWeightedIO = true
+		if (hasUtilization && hasAwait && hasWeightedIO) {
+			break
+		}
+	}
+
+	const maxValSelect = isLongerChart ? <SelectAvgMax max={maxValues} /> : null
+
+	const chartProps = { syncId: "io" }
+
+	return (
+		<Sheet open={sheetOpen} onOpenChange={setSheetOpen}>
+			<DialogTitle className="sr-only">{title}</DialogTitle>
+			<SheetTrigger asChild>
+				<Button
+					title={t`View more`}
+					variant="outline"
+					size="icon"
+					className="shrink-0 max-sm:absolute max-sm:top-0 max-sm:end-0"
+				>
+					<MoreHorizontalIcon />
+				</Button>
+			</SheetTrigger>
+			{hasOpened.current && (
+				<SheetContent aria-describedby={undefined} className="overflow-auto w-200 !max-w-full p-4 sm:p-6">
+					<ChartTimeSelect className="w-[calc(100%-2em)] bg-card" agentVersion={chartData.agentVersion} />
+
+					<ChartCard
+						className="min-h-auto"
+						empty={dataEmpty}
+						grid={grid}
+						title={title}
+						description={description}
+						cornerEl={maxValSelect}
+						// legend={true}
+					>
+						<AreaChartDefault
+							chartData={chartData}
+							maxToggled={showMax}
+							chartProps={chartProps}
+							showTotal={true}
+							domain={pinnedAxisDomain()}
+							itemSorter={(a, b) => a.order - b.order}
+							reverseStackOrder={true}
+							dataPoints={[
+								{
+									label: t({ message: "Write", comment: "Disk write" }),
+									dataKey: writeFn,
+									color: 3,
+									opacity: 0.4,
+									stackId: 0,
+									order: 0,
+								},
+								{
+									label: t({ message: "Read", comment: "Disk read" }),
+									dataKey: readFn,
+									color: 1,
+									opacity: 0.4,
+									stackId: 0,
+									order: 1,
+								},
+							]}
+							tickFormatter={(val) => {
+								const { value, unit } = formatBytes(val, true, userSettings.unitDisk, false)
+								return `${toFixedFloat(value, value >= 10 ? 0 : 1)} ${unit}`
+							}}
+							contentFormatter={({ value }) => {
+								const { value: convertedValue, unit } = formatBytes(value, true, userSettings.unitDisk, false)
+								return `${decimalString(convertedValue, convertedValue >= 100 ? 1 : 2)} ${unit}`
+							}}
+						/>
+					</ChartCard>
+
+					{hasUtilization && <DiskUtilizationChart systemData={systemData} extraFsName={extraFsName} />}
+
+					<ChartCard
+						empty={dataEmpty}
+						grid={grid}
+						title={t`I/O Time`}
+						description={t`Total time spent on read/write (can exceed 100%)`}
+						className="min-h-auto"
+						cornerEl={maxValSelect}
+					>
+						<AreaChartDefault
+							chartData={chartData}
+							domain={pinnedAxisDomain()}
+							tickFormatter={(val) => `${toFixedFloat(val, 2)}%`}
+							contentFormatter={({ value }) => `${decimalString(value)}%`}
+							maxToggled={showMax}
+							chartProps={chartProps}
+							showTotal={true}
+							itemSorter={(a, b) => a.order - b.order}
+							reverseStackOrder={true}
+							dataPoints={[
+								{
+									label: t`Write`,
+									dataKey: writeTimeFn,
+									color: 3,
+									opacity: 0.4,
+									stackId: 0,
+									order: 0,
+								},
+								{
+									label: t`Read`,
+									dataKey: readTimeFn,
+									color: 1,
+									opacity: 0.4,
+									stackId: 0,
+									order: 1,
+								},
+							]}
+						/>
+					</ChartCard>
+
+					{hasWeightedIO && (
+						<ChartCard
+							empty={dataEmpty}
+							grid={grid}
+							title={t`Average Queue Depth`}
+							description={t`Average number of I/O operations waiting to be serviced`}
+							className="min-h-auto"
+							cornerEl={maxValSelect}
+						>
+							<AreaChartDefault
+								chartData={chartData}
+								domain={pinnedAxisDomain()}
+								tickFormatter={(val) => `${toFixedFloat(val, 2)}`}
+								contentFormatter={({ value }) => decimalString(value, value < 10 ? 3 : 2)}
+								maxToggled={showMax}
+								chartProps={chartProps}
+								dataPoints={[
+									{
+										label: t`Queue Depth`,
+										dataKey: weightedIOFn,
+										color: 1,
+										opacity: 0.4,
+									},
+								]}
+							/>
+						</ChartCard>
+					)}
+
+					{hasAwait && (
+						<ChartCard
+							empty={dataEmpty}
+							grid={grid}
+							title={t`I/O Await`}
+							description={t`Average service time per operation`}
+							className="min-h-auto"
+							cornerEl={maxValSelect}
+							// legend={true}
+						>
+							<AreaChartDefault
+								chartData={chartData}
+								domain={pinnedAxisDomain()}
+								tickFormatter={(val) => `${toFixedFloat(val, 2)} ms`}
+								contentFormatter={({ value }) => `${decimalString(value)} ms`}
+								maxToggled={showMax}
+								chartProps={chartProps}
+								dataPoints={[
+									{
+										label: t`Write`,
+										dataKey: wAwaitFn,
+										color: 3,
+										opacity: 0.3,
+									},
+									{
+										label: t`Read`,
+										dataKey: rAwaitFn,
+										color: 1,
+										opacity: 0.3,
+									},
+								]}
+							/>
+						</ChartCard>
+					)}
+				</SheetContent>
+			)}
+		</Sheet>
+	)
+})

internal/site/src/components/routes/system/use-system-data.ts

@@ -28,6 +28,8 @@ import type {
 import { $router, navigate } from "../../router"
 import { appendData, cache, getStats, getTimeData, makeContainerData, makeContainerPoint } from "./chart-data"
 
+export type SystemData = ReturnType<typeof useSystemData>
+
 export function useSystemData(id: string) {
 	const direction = useStore($direction)
 	const systems = useStore($systems)