feat: Add cumulative disk read/write totals to Disk I/O sheet (#2179)

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

@@ -57,6 +57,17 @@ export const diskDataFns = {
 		(name: string) =>
 		({ stats }: SystemStatsRecord) =>
 			stats?.efs?.[name]?.wbm ?? (stats?.efs?.[name]?.wm ?? 0) * 1024 * 1024,
+	// cumulative totals
+	totalRead: ({ stats }: SystemStatsRecord) => stats?.diot?.[0] ?? 0,
+	totalWrite: ({ stats }: SystemStatsRecord) => stats?.diot?.[1] ?? 0,
+	extraTotalRead:
+		(name: string) =>
+		({ stats }: SystemStatsRecord) =>
+			stats?.efs?.[name]?.tr ?? 0,
+	extraTotalWrite:
+		(name: string) =>
+		({ stats }: SystemStatsRecord) =>
+			stats?.efs?.[name]?.tw ?? 0,
 	// read/write time
 	readTime: dios(0),
 	readTimeMax: diosMax(0),

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

@@ -52,6 +52,14 @@ export default memo(function DiskIOSheet({
 		writeTimeFn = showMax ? diskDataFns.extraWriteTimeMax(extraFsName) : diskDataFns.extraWriteTime(extraFsName)
 	}
 
+	// cumulative total functions, with extra fs variants if needed
+	let totalReadFn = diskDataFns.totalRead
+	let totalWriteFn = diskDataFns.totalWrite
+	if (extraFsName) {
+		totalReadFn = diskDataFns.extraTotalRead(extraFsName)
+		totalWriteFn = diskDataFns.extraTotalWrite(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
@@ -70,12 +78,16 @@ export default memo(function DiskIOSheet({
 	let hasUtilization = false
 	let hasAwait = false
 	let hasWeightedIO = false
+	let hasCumulative = 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) {
+		if (!hasCumulative && (totalReadFn(record) > 0 || totalWriteFn(record) > 0)) {
+			hasCumulative = true
+		}
+		if (hasUtilization && hasAwait && hasWeightedIO && hasCumulative) {
 			break
 		}
 	}
@@ -258,6 +270,69 @@ export default memo(function DiskIOSheet({
 							/>
 						</ChartCard>
 					)}
+
+					{hasCumulative && (
+						<ChartCard
+							empty={dataEmpty}
+							grid={grid}
+							title={t`Cumulative Read`}
+							description={t`Cumulative data read since boot`}
+							className="min-h-auto"
+						>
+							<AreaChartDefault
+								chartData={chartData}
+                chartProps={{syncId: "c"}}
+								dataPoints={[
+									{
+										label: t`Read`,
+										dataKey: totalReadFn,
+										color: 1,
+										opacity: 0.4,
+									},
+								]}
+								tickFormatter={(val) => {
+									const { value, unit } = formatBytes(val, false, userSettings.unitDisk, false)
+									return `${toFixedFloat(value, value >= 10 ? 0 : 1)} ${unit}`
+								}}
+								contentFormatter={({ value }) => {
+									const { value: convertedValue, unit } = formatBytes(value, false, userSettings.unitDisk, false)
+									return `${decimalString(convertedValue, convertedValue >= 100 ? 1 : 2)} ${unit}`
+								}}
+							/>
+						</ChartCard>
+					)}
+
+					{hasCumulative && (
+						<ChartCard
+							empty={dataEmpty}
+							grid={grid}
+							title={t`Cumulative Write`}
+							description={t`Cumulative data written since boot`}
+							className="min-h-auto"
+						>
+							<AreaChartDefault
+								chartData={chartData}
+                chartProps={{syncId: "c"}}
+								dataPoints={[
+									{
+										label: t`Write`,
+										dataKey: totalWriteFn,
+										color: 3,
+										opacity: 0.4,
+									},
+								]}
+								tickFormatter={(val) => {
+									const { value, unit } = formatBytes(val, false, userSettings.unitDisk, false)
+									return `${toFixedFloat(value, value >= 10 ? 0 : 1)} ${unit}`
+								}}
+								contentFormatter={({ value }) => {
+									const { value: convertedValue, unit } = formatBytes(value, false, userSettings.unitDisk, false)
+									return `${decimalString(convertedValue, convertedValue >= 100 ? 1 : 2)} ${unit}`
+								}}
+							/>
+						</ChartCard>
+					)}
+
 				</SheetContent>
 			)}
 		</Sheet>

internal/site/src/types.d.ts

@@ -131,6 +131,8 @@ export interface SystemStats {
 	dios?: [number, number, number, number, number, number]
 	/** max disk io stats */
 	diosm?: [number, number, number, number, number, number]
+	/** cumulative device I/O bytes [total read, total write] */
+	diot?: [number, number]
 	/** network sent (mb) */
 	ns: number
 	/** network received (mb) */
@@ -201,6 +203,10 @@ export interface ExtraFsStats {
 	dios?: [number, number, number, number, number, number]
 	/** max disk io stats */
 	diosm?: [number, number, number, number, number, number]
+	/** cumulative device read bytes */
+	tr?: number
+	/** cumulative device write bytes */
+	tw?: number
 }
 
 export interface ContainerStatsRecord extends RecordModel {