add one minute chart + refactor rpc

- add one minute charts
- update disk io to use bytes
- update hub and agent connection interfaces / handlers to be more
flexible
- change agent cache to use cache time instead of session id
- refactor collection of metrics which require deltas to track
separately per cache time

internal/site/src/components/charts/chart-time-select.tsx

@@ -2,12 +2,27 @@ import { useStore } from "@nanostores/react"
 import { HistoryIcon } from "lucide-react"
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
 import { $chartTime } from "@/lib/stores"
-import { chartTimeData, cn } from "@/lib/utils"
-import type { ChartTimes } from "@/types"
+import { chartTimeData, cn, compareSemVer, parseSemVer } from "@/lib/utils"
+import type { ChartTimes, SemVer } from "@/types"
+import { memo } from "react"
 
-export default function ChartTimeSelect({ className }: { className?: string }) {
+export default memo(function ChartTimeSelect({
+	className,
+	agentVersion,
+}: {
+	className?: string
+	agentVersion: SemVer
+}) {
 	const chartTime = useStore($chartTime)
 
+	// remove chart times that are not supported by the system agent version
+	const availableChartTimes = Object.entries(chartTimeData).filter(([_, { minVersion }]) => {
+		if (!minVersion) {
+			return true
+		}
+		return compareSemVer(agentVersion, parseSemVer(minVersion)) >= 0
+	})
+
 	return (
 		<Select defaultValue="1h" value={chartTime} onValueChange={(value: ChartTimes) => $chartTime.set(value)}>
 			<SelectTrigger className={cn(className, "relative ps-10 pe-5")}>
@@ -15,7 +30,7 @@ export default function ChartTimeSelect({ className }: { className?: string }) {
 				<SelectValue />
 			</SelectTrigger>
 			<SelectContent>
-				{Object.entries(chartTimeData).map(([value, { label }]) => (
+				{availableChartTimes.map(([value, { label }]) => (
 					<SelectItem key={value} value={value}>
 						{label()}
 					</SelectItem>
@@ -23,4 +38,4 @@ export default function ChartTimeSelect({ className }: { className?: string }) {
 			</SelectContent>
 		</Select>
 	)
-}
+})

internal/site/src/components/charts/load-average-chart.tsx

@@ -59,8 +59,6 @@ export default memo(function LoadAverageChart({ chartData }: { chartData: ChartD
 					<ChartTooltip
 						animationEasing="ease-out"
 						animationDuration={150}
-						// @ts-expect-error
-						// itemSorter={(a, b) => b.value - a.value}
 						content={
 							<ChartTooltipContent
 								labelFormatter={(_, data) => formatShortDate(data[0].payload.created)}
@@ -70,14 +68,15 @@ export default memo(function LoadAverageChart({ chartData }: { chartData: ChartD
 					/>
 					{keys.map(({ legacy, color, label }, i) => {
 						const dataKey = (value: { stats: SystemStats }) => {
-							if (chartData.agentVersion.patch < 1) {
+							const { minor, patch } = chartData.agentVersion
+							if (minor <= 12 && patch < 1) {
 								return value.stats?.[legacy]
 							}
 							return value.stats?.la?.[i] ?? value.stats?.[legacy]
 						}
 						return (
 							<Line
-								key={i}
+								key={label}
 								dataKey={dataKey}
 								name={label}
 								type="monotoneX"

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

@@ -14,7 +14,7 @@ import {
 } from "lucide-react"
 import { subscribeKeys } from "nanostores"
 import React, { type JSX, memo, useCallback, useEffect, useMemo, useRef, useState } from "react"
-import AreaChartDefault from "@/components/charts/area-chart"
+import AreaChartDefault, { type DataPoint } from "@/components/charts/area-chart"
 import ContainerChart from "@/components/charts/container-chart"
 import DiskChart from "@/components/charts/disk-chart"
 import GpuPowerChart from "@/components/charts/gpu-power-chart"
@@ -49,7 +49,16 @@ import {
 	toFixedFloat,
 	useBrowserStorage,
 } from "@/lib/utils"
-import type { ChartData, ChartTimes, ContainerStatsRecord, GPUData, SystemRecord, SystemStatsRecord } from "@/types"
+import type {
+	ChartData,
+	ChartTimes,
+	ContainerStatsRecord,
+	GPUData,
+	SystemInfo,
+	SystemRecord,
+	SystemStats,
+	SystemStatsRecord,
+} from "@/types"
 import ChartTimeSelect from "../charts/chart-time-select"
 import { $router, navigate } from "../router"
 import Spinner from "../spinner"
@@ -95,25 +104,28 @@ function getTimeData(chartTime: ChartTimes, lastCreated: number) {
 }
 
 // add empty values between records to make gaps if interval is too large
-function addEmptyValues<T extends SystemStatsRecord | ContainerStatsRecord>(
+function addEmptyValues<T extends { created: string | number | null }>(
 	prevRecords: T[],
 	newRecords: T[],
 	expectedInterval: number
-) {
+): T[] {
 	const modifiedRecords: T[] = []
 	let prevTime = (prevRecords.at(-1)?.created ?? 0) as number
 	for (let i = 0; i < newRecords.length; i++) {
 		const record = newRecords[i]
-		record.created = new Date(record.created).getTime()
-		if (prevTime) {
+		if (record.created !== null) {
+			record.created = new Date(record.created).getTime()
+		}
+		if (prevTime && record.created !== null) {
 			const interval = record.created - prevTime
 			// if interval is too large, add a null record
 			if (interval > expectedInterval / 2 + expectedInterval) {
-				// @ts-expect-error
-				modifiedRecords.push({ created: null, stats: null })
+				modifiedRecords.push({ created: null, ...("stats" in record ? { stats: null } : {}) } as T)
 			}
 		}
-		prevTime = record.created
+		if (record.created !== null) {
+			prevTime = record.created
+		}
 		modifiedRecords.push(record)
 	}
 	return modifiedRecords
@@ -137,7 +149,7 @@ async function getStats<T extends SystemStatsRecord | ContainerStatsRecord>(
 	})
 }
 
-function dockerOrPodman(str: string, system: SystemRecord) {
+function dockerOrPodman(str: string, system: SystemRecord): string {
 	if (system.info.p) {
 		return str.replace("docker", "podman").replace("Docker", "Podman")
 	}
@@ -156,10 +168,9 @@ export default memo(function SystemDetail({ name }: { name: string }) {
 	const [containerData, setContainerData] = useState([] as ChartData["containerData"])
 	const netCardRef = useRef<HTMLDivElement>(null)
 	const persistChartTime = useRef(false)
-	const [containerFilterBar, setContainerFilterBar] = useState(null as null | JSX.Element)
 	const [bottomSpacing, setBottomSpacing] = useState(0)
 	const [chartLoading, setChartLoading] = useState(true)
-	const isLongerChart = chartTime !== "1h"
+	const isLongerChart = !["1m", "1h"].includes(chartTime) // true if chart time is not 1m or 1h
 	const userSettings = $userSettings.get()
 	const chartWrapRef = useRef<HTMLDivElement>(null)
 
@@ -172,7 +183,6 @@ export default memo(function SystemDetail({ name }: { name: string }) {
 			persistChartTime.current = false
 			setSystemStats([])
 			setContainerData([])
-			setContainerFilterBar(null)
 			$containerFilter.set("")
 		}
 	}, [name])
@@ -185,6 +195,51 @@ export default memo(function SystemDetail({ name }: { name: string }) {
 		})
 	}, [name])
 
+	// hide 1m chart time if system agent version is less than 0.13.0
+	useEffect(() => {
+		if (parseSemVer(system?.info?.v) < parseSemVer("0.13.0")) {
+			$chartTime.set("1h")
+		}
+	}, [system?.info?.v])
+
+	// subscribe to realtime metrics if chart time is 1m
+	// biome-ignore lint/correctness/useExhaustiveDependencies: not necessary
+	useEffect(() => {
+		let unsub = () => {}
+		if (!system.id || chartTime !== "1m") {
+			return
+		}
+		if (system.status !== SystemStatus.Up || parseSemVer(system?.info?.v).minor < 13) {
+			$chartTime.set("1h")
+			return
+		}
+		pb.realtime
+			.subscribe(
+				`rt_metrics`,
+				(data: { container: ContainerStatsRecord[]; info: SystemInfo; stats: SystemStats }) => {
+					// console.log("received realtime metrics", data)
+					const newContainerData = makeContainerData([
+						{ created: Date.now(), stats: data.container } as unknown as ContainerStatsRecord,
+					])
+					setContainerData((prevData) => addEmptyValues(prevData, prevData.slice(-59).concat(newContainerData), 1000))
+					setSystemStats((prevStats) =>
+						addEmptyValues(
+							prevStats,
+							prevStats.slice(-59).concat({ created: Date.now(), stats: data.stats } as SystemStatsRecord),
+							1000
+						)
+					)
+				},
+				{ query: { system: system.id } }
+			)
+			.then((us) => {
+				unsub = us
+			})
+		return () => {
+			unsub?.()
+		}
+	}, [chartTime, system.id])
+
 	// biome-ignore lint/correctness/useExhaustiveDependencies: not necessary
 	const chartData: ChartData = useMemo(() => {
 		const lastCreated = Math.max(
@@ -221,13 +276,13 @@ export default memo(function SystemDetail({ name }: { name: string }) {
 			}
 			containerData.push(containerStats)
 		}
-		setContainerData(containerData)
+		return containerData
 	}, [])
 
 	// get stats
 	// biome-ignore lint/correctness/useExhaustiveDependencies: not necessary
 	useEffect(() => {
-		if (!system.id || !chartTime) {
+		if (!system.id || !chartTime || chartTime === "1m") {
 			return
 		}
 		// loading: true
@@ -261,12 +316,7 @@ export default memo(function SystemDetail({ name }: { name: string }) {
 				}
 				cache.set(cs_cache_key, containerData)
 			}
-			if (containerData.length) {
-				!containerFilterBar && setContainerFilterBar(<FilterBar />)
-			} else if (containerFilterBar) {
-				setContainerFilterBar(null)
-			}
-			makeContainerData(containerData)
+			setContainerData(makeContainerData(containerData))
 		})
 	}, [system, chartTime])
 
@@ -392,9 +442,10 @@ export default memo(function SystemDetail({ name }: { name: string }) {
 
 	// select field for switching between avg and max values
 	const maxValSelect = isLongerChart ? <SelectAvgMax max={maxValues} /> : null
-	const showMax = chartTime !== "1h" && maxValues
+	const showMax = maxValues && isLongerChart
+
+	const containerFilterBar = containerData.length ? <FilterBar /> : null
 
-	// if no data, show empty message
 	const dataEmpty = !chartLoading && chartData.systemStats.length === 0
 	const lastGpuVals = Object.values(systemStats.at(-1)?.stats.g ?? {})
 	const hasGpuData = lastGpuVals.length > 0
@@ -483,7 +534,7 @@ export default memo(function SystemDetail({ name }: { name: string }) {
 							</div>
 						</div>
 						<div className="xl:ms-auto flex items-center gap-2 max-sm:-mb-1">
-							<ChartTimeSelect className="w-full xl:w-40" />
+							<ChartTimeSelect className="w-full xl:w-40" agentVersion={chartData.agentVersion} />
 							<TooltipProvider delayDuration={100}>
 								<Tooltip>
 									<TooltipTrigger asChild>
@@ -594,23 +645,33 @@ export default memo(function SystemDetail({ name }: { name: string }) {
 							dataPoints={[
 								{
 									label: t({ message: "Write", comment: "Disk write" }),
-									dataKey: ({ stats }: SystemStatsRecord) => (showMax ? stats?.dwm : stats?.dw),
+									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) => (showMax ? stats?.drm : stats?.dr),
+									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, true)
+								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, true)
+								const { value: convertedValue, unit } = formatBytes(value, true, userSettings.unitDisk, false)
 								return `${decimalString(convertedValue, convertedValue >= 100 ? 1 : 2)} ${unit}`
 							}}
 						/>
@@ -791,7 +852,7 @@ export default memo(function SystemDetail({ name }: { name: string }) {
 							return (
 								<div key={id} className="contents">
 									<ChartCard
-										className="!col-span-1"
+										className={cn(grid && "!col-span-1")}
 										empty={dataEmpty}
 										grid={grid}
 										title={`${gpu.n} ${t`Usage`}`}
@@ -877,24 +938,36 @@ export default memo(function SystemDetail({ name }: { name: string }) {
 											dataPoints={[
 												{
 													label: t`Write`,
-													dataKey: ({ stats }) => stats?.efs?.[extraFsName]?.[showMax ? "wm" : "w"] ?? 0,
+													dataKey: ({ stats }) => {
+														if (showMax) {
+															return stats?.efs?.[extraFsName]?.wb ?? (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 }) => stats?.efs?.[extraFsName]?.[showMax ? "rm" : "r"] ?? 0,
+													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={maxValues}
 											tickFormatter={(val) => {
-												const { value, unit } = formatBytes(val, true, userSettings.unitDisk, true)
+												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, true)
+												const { value: convertedValue, unit } = formatBytes(value, true, userSettings.unitDisk, false)
 												return `${decimalString(convertedValue, convertedValue >= 100 ? 1 : 2)} ${unit}`
 											}}
 										/>
@@ -913,7 +986,7 @@ export default memo(function SystemDetail({ name }: { name: string }) {
 })
 
 function GpuEnginesChart({ chartData }: { chartData: ChartData }) {
-	const dataPoints = []
+	const dataPoints: DataPoint[] = []
 	const engines = Object.keys(chartData.systemStats?.at(-1)?.stats.g?.[0]?.e ?? {}).sort()
 	for (const engine of engines) {
 		dataPoints.push({

internal/site/src/components/routes/system/network-sheet.tsx

@@ -53,7 +53,7 @@ export default memo(function NetworkSheet({
 			</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)]" />
+					<ChartTimeSelect className="w-[calc(100%-2em)]" agentVersion={chartData.agentVersion} />
 					<ChartCard
 						empty={dataEmpty}
 						grid={grid}

internal/site/src/components/systems-table/systems-table.tsx

@@ -131,7 +131,6 @@ export default function SystemsTable() {
 		return [Object.values(upSystems).length, Object.values(downSystems).length, Object.values(pausedSystems).length]
 	}, [upSystems, downSystems, pausedSystems])
 
-	// TODO: hiding temp then gpu messes up table headers
 	const CardHead = useMemo(() => {
 		return (
 			<CardHeader className="pb-4.5 px-2 sm:px-6 max-sm:pt-5 max-sm:pb-1">