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"