refactor load average handling (#982)

- Transitioned from individual load average fields (LoadAvg1, LoadAvg5,
LoadAvg15) to a single array (LoadAvg)
- Ensure load is displayed when all zero values.

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

@@ -9,31 +9,30 @@ import {
 	xAxis,
 } from "@/components/ui/chart"
 import { useYAxisWidth, cn, formatShortDate, toFixedFloat, decimalString, chartMargin } from "@/lib/utils"
-import { ChartData } from "@/types"
+import { ChartData, SystemStats } from "@/types"
 import { memo } from "react"
 import { t } from "@lingui/core/macro"
 
 export default memo(function LoadAverageChart({ chartData }: { chartData: ChartData }) {
 	const { yAxisWidth, updateYAxisWidth } = useYAxisWidth()
 
-	if (chartData.systemStats.length === 0) {
-		return null
-	}
-
-	const keys = {
-		l1: {
+	const keys: { legacy: keyof SystemStats; color: string; label: string }[] = [
+		{
+			legacy: "l1",
 			color: "hsl(271, 81%, 60%)", // Purple
 			label: t({ message: `1 min`, comment: "Load average" }),
 		},
-		l5: {
+		{
+			legacy: "l5",
 			color: "hsl(217, 91%, 60%)", // Blue
 			label: t({ message: `5 min`, comment: "Load average" }),
 		},
-		l15: {
+		{
+			legacy: "l15",
 			color: "hsl(25, 95%, 53%)", // Orange
 			label: t({ message: `15 min`, comment: "Load average" }),
 		},
-	}
+	]
 
 	return (
 		<div>
@@ -69,16 +68,22 @@ export default memo(function LoadAverageChart({ chartData }: { chartData: ChartD
 							/>
 						}
 					/>
-					{Object.entries(keys).map(([key, value]: [string, { color: string; label: string }]) => {
+					{keys.map(({ legacy, color, label }, i) => {
+						const dataKey = (value: { stats: SystemStats }) => {
+							if (chartData.agentVersion.patch < 1) {
+								return value.stats?.[legacy]
+							}
+							return value.stats?.la?.[i] ?? value.stats?.[legacy]
+						}
 						return (
 							<Line
-								key={key}
-								dataKey={`stats.${key}`}
-								name={value.label}
+								key={i}
+								dataKey={dataKey}
+								name={label}
 								type="monotoneX"
 								dot={false}
 								strokeWidth={1.5}
-								stroke={value.color}
+								stroke={color}
 								isAnimationActive={false}
 							/>
 						)

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

@@ -26,6 +26,7 @@ import {
 	getHostDisplayValue,
 	getPbTimestamp,
 	listen,
+	parseSemVer,
 	toFixedFloat,
 	useLocalStorage,
 } from "@/lib/utils"
@@ -191,6 +192,7 @@ export default function SystemDetail({ name }: { name: string }) {
 			chartTime,
 			orientation: direction === "rtl" ? "right" : "left",
 			...getTimeData(chartTime, lastCreated),
+			agentVersion: parseSemVer(system?.info?.v),
 		}
 	}, [systemStats, containerData, direction])
 
@@ -642,7 +644,7 @@ export default function SystemDetail({ name }: { name: string }) {
 					)}
 
 					{/* Load Average chart */}
-					{system.info.l1 !== undefined && (
+					{chartData.agentVersion?.minor >= 12 && (
 						<ChartCard
 							empty={dataEmpty}
 							grid={grid}

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

@@ -73,6 +73,7 @@ import {
 	formatTemperature,
 	decimalString,
 	formatBytes,
+	parseSemVer,
 } from "@/lib/utils"
 import AlertsButton from "../alerts/alert-button"
 import { $router, Link, navigate } from "../router"
@@ -224,8 +225,12 @@ export default function SystemsTable() {
 			{
 				id: "loadAverage",
 				accessorFn: ({ info }) => {
-					const { l1 = 0, l5 = 0, l15 = 0 } = info
-					return l1 + l5 + l15
+					const sum = info.la?.reduce((acc, curr) => acc + curr, 0)
+					// TODO: remove this in future release in favor of la array
+					if (!sum) {
+						return (info.l1 ?? 0) + (info.l5 ?? 0) + (info.l15 ?? 0)
+					}
+					return sum
 				},
 				name: () => t({ message: "Load Avg", comment: "Short label for load average" }),
 				size: 0,
@@ -233,16 +238,22 @@ export default function SystemsTable() {
 				header: sortableHeader,
 				cell(info: CellContext<SystemRecord, unknown>) {
 					const { info: sysInfo, status } = info.row.original
-					if (sysInfo.l1 === undefined) {
+					// agent version
+					const { minor, patch } = parseSemVer(sysInfo.v)
+					let loadAverages = sysInfo.la
+
+					// use legacy load averages if agent version is less than 12.1.0
+					if (!loadAverages || (minor === 12 && patch < 1)) {
+						loadAverages = [sysInfo.l1 ?? 0, sysInfo.l5 ?? 0, sysInfo.l15 ?? 0]
+					}
+
+					const max = Math.max(...loadAverages)
+					if (max === 0 && (status === "paused" || minor < 12)) {
 						return null
 					}
 
-					const { l1 = 0, l5 = 0, l15 = 0, t: cpuThreads = 1 } = sysInfo
-					const loadAverages = [l1, l5, l15]
-
 					function getDotColor() {
-						const max = Math.max(...loadAverages)
-						const normalized = max / cpuThreads
+						const normalized = max / (sysInfo.t ?? 1)
 						if (status !== "up") return "bg-primary/30"
 						if (normalized < 0.7) return "bg-green-500"
 						if (normalized < 1) return "bg-yellow-500"
@@ -252,7 +263,7 @@ export default function SystemsTable() {
 					return (
 						<div className="flex items-center gap-[.35em] w-full tabular-nums tracking-tight">
 							<span className={cn("inline-block size-2 rounded-full me-0.5", getDotColor())} />
-							{loadAverages.map((la, i) => (
+							{loadAverages?.map((la, i) => (
 								<span key={i}>{decimalString(la, la >= 10 ? 1 : 2)}</span>
 							))}
 						</div>

beszel/site/src/lib/utils.ts

@@ -9,6 +9,7 @@ import {
 	ChartTimeData,
 	ChartTimes,
 	FingerprintRecord,
+	SemVer,
 	SystemRecord,
 	UserSettings,
 } from "@/types"
@@ -495,3 +496,14 @@ export function formatDuration(
 		.filter(Boolean)
 		.join(" ")
 }
+
+export const parseSemVer = (semVer = ""): SemVer => {
+	// if (semVer.startsWith("v")) {
+	// 	semVer = semVer.slice(1)
+	// }
+	if (semVer.includes("-")) {
+		semVer = semVer.slice(0, semVer.indexOf("-"))
+	}
+	const parts = semVer.split(".").map(Number)
+	return { major: parts?.[0] ?? 0, minor: parts?.[1] ?? 0, patch: parts?.[2] ?? 0 }
+}

beszel/site/src/types.d.ts

@@ -50,6 +50,8 @@ export interface SystemInfo {
 	l5?: number
 	/** load average 15 minutes */
 	l15?: number
+	/** load average */
+	la?: [number, number, number]
 	/** operating system */
 	o?: string
 	/** uptime */
@@ -79,12 +81,15 @@ export interface SystemStats {
 	cpu: number
 	/** peak cpu */
 	cpum?: number
+	// TODO: remove these in future release in favor of la
 	/** load average 1 minute */
 	l1?: number
 	/** load average 5 minutes */
 	l5?: number
 	/** load average 15 minutes */
 	l15?: number
+	/** load average */
+	la?: [number, number, number]
 	/** total memory (gb) */
 	m: number
 	/** memory used (gb) */
@@ -234,7 +239,14 @@ type ChartDataContainer = {
 	[key: string]: key extends "created" ? never : ContainerStats
 }
 
+export interface SemVer {
+	major: number
+	minor: number
+	patch: number
+}
+
 export interface ChartData {
+	agentVersion: SemVer
 	systemStats: SystemStatsRecord[]
 	containerData: ChartDataContainer[]
 	orientation: "right" | "left"