update load avg display and include it in longer records

beszel/internal/records/records.go

@@ -203,6 +203,9 @@ func (rm *RecordManager) AverageSystemStats(db dbx.Builder, records RecordIds) *
 		sum.DiskWritePs += stats.DiskWritePs
 		sum.NetworkSent += stats.NetworkSent
 		sum.NetworkRecv += stats.NetworkRecv
+		sum.LoadAvg1 += stats.LoadAvg1
+		sum.LoadAvg5 += stats.LoadAvg5
+		sum.LoadAvg15 += stats.LoadAvg15
 		// Set peak values
 		sum.MaxCpu = max(sum.MaxCpu, stats.MaxCpu, stats.Cpu)
 		sum.MaxNetworkSent = max(sum.MaxNetworkSent, stats.MaxNetworkSent, stats.NetworkSent)
@@ -278,7 +281,9 @@ func (rm *RecordManager) AverageSystemStats(db dbx.Builder, records RecordIds) *
 		sum.DiskWritePs = twoDecimals(sum.DiskWritePs / count)
 		sum.NetworkSent = twoDecimals(sum.NetworkSent / count)
 		sum.NetworkRecv = twoDecimals(sum.NetworkRecv / count)
-
+		sum.LoadAvg1 = twoDecimals(sum.LoadAvg1 / count)
+		sum.LoadAvg5 = twoDecimals(sum.LoadAvg5 / count)
+		sum.LoadAvg15 = twoDecimals(sum.LoadAvg15 / count)
 		// Average temperatures
 		if sum.Temperatures != nil && tempCount > 0 {
 			for key := range sum.Temperatures {

beszel/site/src/components/alerts/alert-button.tsx

@@ -11,14 +11,13 @@ import {
 	DialogHeader,
 	DialogTitle,
 } from "@/components/ui/dialog"
-import { BellIcon, GlobeIcon, ServerIcon, HourglassIcon } from "lucide-react"
+import { BellIcon, GlobeIcon, ServerIcon } from "lucide-react"
 import { alertInfo, cn } from "@/lib/utils"
 import { Button } from "@/components/ui/button"
 import { AlertRecord, SystemRecord } from "@/types"
 import { $router, Link } from "../router"
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
 import { Checkbox } from "../ui/checkbox"
-import { Collapsible } from "../ui/collapsible"
 import { SystemAlert, SystemAlertGlobal } from "./alerts-system"
 import { getPagePath } from "@nanostores/router"
 

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

@@ -8,16 +8,9 @@ import {
 	ChartTooltipContent,
 	xAxis,
 } from "@/components/ui/chart"
-import {
-	useYAxisWidth,
-	cn,
-	formatShortDate,
-	toFixedWithoutTrailingZeros,
-	decimalString,
-	chartMargin,
-} from "@/lib/utils"
+import { useYAxisWidth, cn, formatShortDate, toFixedFloat, decimalString, chartMargin } from "@/lib/utils"
 import { ChartData } from "@/types"
-import { memo, useMemo } from "react"
+import { memo } from "react"
 import { t } from "@lingui/core/macro"
 
 export default memo(function LoadAverageChart({ chartData }: { chartData: ChartData }) {
@@ -27,46 +20,20 @@ export default memo(function LoadAverageChart({ chartData }: { chartData: ChartD
 		return null
 	}
 
-	/** Format load average data for chart */
-	const newChartData = useMemo(() => {
-		const newChartData = { data: [], colors: {} } as {
-			data: Record<string, number | string>[]
-			colors: Record<string, string>
-		}
-		
-		// Define colors for the three load average lines
-		const colors = {
-			"1m": "hsl(25, 95%, 53%)",   // Orange for 1-minute
-			"5m": "hsl(217, 91%, 60%)",  // Blue for 5-minute  
-			"15m": "hsl(271, 81%, 56%)", // Purple for 15-minute
-		}
-
-		for (let data of chartData.systemStats) {
-			let newData = { created: data.created } as Record<string, number | string>
-			
-			// Add load average values if they exist and stats is not null
-			if (data.stats && data.stats.l1 !== undefined) {
-				newData["1m"] = data.stats.l1
-			}
-			if (data.stats && data.stats.l5 !== undefined) {
-				newData["5m"] = data.stats.l5
-			}
-			if (data.stats && data.stats.l15 !== undefined) {
-				newData["15m"] = data.stats.l15
-			}
-			
-			newChartData.data.push(newData)
-		}
-		
-		newChartData.colors = colors
-		return newChartData
-	}, [chartData])
-
-	const loadKeys = ["1m", "5m", "15m"].filter(key => 
-		newChartData.data.some(data => data[key] !== undefined)
-	)
-
-	// console.log('rendered at', new Date())
+	const keys = {
+		l1: {
+			color: "hsl(271, 81%, 60%)", // Purple
+			label: t`1 min`,
+		},
+		l5: {
+			color: "hsl(217, 91%, 60%)", // Blue
+			label: t`5 min`,
+		},
+		l15: {
+			color: "hsl(25, 95%, 53%)", // Orange
+			label: t`15 min`,
+		},
+	}
 
 	return (
 		<div>
@@ -75,7 +42,7 @@ export default memo(function LoadAverageChart({ chartData }: { chartData: ChartD
 					"opacity-100": yAxisWidth,
 				})}
 			>
-				<LineChart accessibilityLayer data={newChartData.data} margin={chartMargin}>
+				<LineChart accessibilityLayer data={chartData.systemStats} margin={chartMargin}>
 					<CartesianGrid vertical={false} />
 					<YAxis
 						direction="ltr"
@@ -84,8 +51,7 @@ export default memo(function LoadAverageChart({ chartData }: { chartData: ChartD
 						domain={[0, "auto"]}
 						width={yAxisWidth}
 						tickFormatter={(value) => {
-							const val = toFixedWithoutTrailingZeros(value, 2)
-							return updateYAxisWidth(val)
+							return updateYAxisWidth(String(toFixedFloat(value, 2)))
 						}}
 						tickLine={false}
 						axisLine={false}
@@ -95,7 +61,7 @@ export default memo(function LoadAverageChart({ chartData }: { chartData: ChartD
 						animationEasing="ease-out"
 						animationDuration={150}
 						// @ts-ignore
-						itemSorter={(a, b) => b.value - a.value}
+						// itemSorter={(a, b) => b.value - a.value}
 						content={
 							<ChartTooltipContent
 								labelFormatter={(_, data) => formatShortDate(data[0].payload.created)}
@@ -103,21 +69,23 @@ export default memo(function LoadAverageChart({ chartData }: { chartData: ChartD
 							/>
 						}
 					/>
-					{loadKeys.map((key) => (
-						<Line
-							key={key}
-							dataKey={key}
-							name={key === "1m" ? t`1 min` : key === "5m" ? t`5 min` : t`15 min`}
-							type="monotoneX"
-							dot={false}
-							strokeWidth={1.5}
-							stroke={newChartData.colors[key]}
-							isAnimationActive={false}
-						/>
-					))}
+					{Object.entries(keys).map(([key, value]: [string, { color: string; label: string }]) => {
+						return (
+							<Line
+								key={key}
+								dataKey={`stats.${key}`}
+								name={value.label}
+								type="monotoneX"
+								dot={false}
+								strokeWidth={1.5}
+								stroke={value.color}
+								isAnimationActive={false}
+							/>
+						)
+					})}
 					<ChartLegend content={<ChartLegendContent />} />
 				</LineChart>
 			</ChartContainer>
 		</div>
 	)
-}) 
+})

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

@@ -484,18 +484,6 @@ export default function SystemDetail({ name }: { name: string }) {
 						/>
 					</ChartCard>
 
-					{/* Load Average chart */}
-					{(systemStats.at(-1)?.stats.l1 !== undefined || systemStats.at(-1)?.stats.l5 !== undefined || systemStats.at(-1)?.stats.l15 !== undefined) && (
-						<ChartCard
-							empty={dataEmpty}
-							grid={grid}
-							title={t`Load Average`}
-							description={t`System load averages over time`}
-						>
-							<LoadAverageChart chartData={chartData} />
-						</ChartCard>
-					)}
-
 					{containerFilterBar && (
 						<ChartCard
 							empty={dataEmpty}
@@ -608,6 +596,18 @@ export default function SystemDetail({ name }: { name: string }) {
 						</ChartCard>
 					)}
 
+					{/* Load Average chart */}
+					{system.info.l1 !== undefined && (
+						<ChartCard
+							empty={dataEmpty}
+							grid={grid}
+							title={t`Load Average`}
+							description={t`System load averages over time`}
+						>
+							<LoadAverageChart chartData={chartData} />
+						</ChartCard>
+					)}
+
 					{/* Temperature chart */}
 					{systemStats.at(-1)?.stats.t && (
 						<ChartCard

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

@@ -84,7 +84,6 @@ import { ClassValue } from "clsx"
 import { getPagePath } from "@nanostores/router"
 import { SystemDialog } from "../add-system"
 import { Dialog } from "../ui/dialog"
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../ui/tooltip"
 
 type ViewMode = "table" | "grid"
 
@@ -183,14 +182,14 @@ export default function SystemsTable() {
 							onClick={() => copyToClipboard(info.getValue() as string)}
 						>
 							{info.getValue() as string}
-							<CopyIcon className="h-2.5 w-2.5" />
+							<CopyIcon className="size-2.5" />
 						</Button>
 					</span>
 				),
 				header: sortableHeader,
 			},
 			{
-				accessorFn: (originalRow) => originalRow.info.cpu,
+				accessorFn: ({ info }) => decimalString(info.cpu, info.cpu >= 10 ? 1 : 2),
 				id: "cpu",
 				name: () => t`CPU`,
 				cell: CellFormatter,
@@ -222,6 +221,44 @@ export default function SystemsTable() {
 				Icon: GpuIcon,
 				header: sortableHeader,
 			},
+			{
+				id: "loadAverage",
+				accessorFn: ({ info }) => {
+					const { l1 = 0, l5 = 0, l15 = 0 } = info
+					return l1 + l5 + l15
+				},
+				name: () => t({ message: "Load Avg", comment: "Short label for load average" }),
+				size: 0,
+				Icon: HourglassIcon,
+				header: sortableHeader,
+				cell(info: CellContext<SystemRecord, unknown>) {
+					const { info: sysInfo, status } = info.row.original
+					if (sysInfo.l1 == undefined) {
+						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
+						if (status !== "up") return "bg-primary/30"
+						if (normalized < 0.7) return "bg-green-500"
+						if (normalized < 1.0) return "bg-yellow-500"
+						return "bg-red-600"
+					}
+
+					return (
+						<div className="flex items-center gap-2 w-full tabular-nums tracking-tight">
+							<span className={cn("inline-block size-2 rounded-full", getDotColor())} />
+							{loadAverages.map((la, i) => (
+								<span key={i}>{decimalString(la, la >= 10 ? 1 : 2)}</span>
+							))}
+						</div>
+					)
+				},
+			},
 			{
 				accessorFn: (originalRow) => originalRow.info.b || 0,
 				id: "net",
@@ -230,8 +267,12 @@ export default function SystemsTable() {
 				Icon: EthernetIcon,
 				header: sortableHeader,
 				cell(info) {
+					if (info.row.original.status !== "up") {
+						return null
+					}
+					const val = info.getValue() as number
 					const userSettings = useStore($userSettings)
-					const { value, unit } = formatBytes(info.getValue() as number, true, userSettings.unitNet, true)
+					const { value, unit } = formatBytes(val, true, userSettings.unitNet, true)
 					return (
 						<span className="tabular-nums whitespace-nowrap">
 							{decimalString(value, value >= 100 ? 1 : 2)} {unit}
@@ -239,64 +280,6 @@ export default function SystemsTable() {
 					)
 				},
 			},
-			{
-				id: "loadAverage",
-				name: () => t`Load Average`,
-				size: 0,
-				hideSort: true,
-				Icon: HourglassIcon,
-				header: sortableHeader,
-				cell(info: CellContext<SystemRecord, unknown>) {
-					const system = info.row.original;
-					const l1 = system.info?.l1;
-					const l5 = system.info?.l5;
-					const l15 = system.info?.l15;
-					const cores = system.info?.c || 1;
-
-					// If no load average data, return null
-					if (!l1 && !l5 && !l15) return null;
-
-					const loadAverages = [
-						{ name: "1m", value: l1 },
-						{ name: "5m", value: l5 },
-						{ name: "15m", value: l15 }
-					].filter(la => la.value !== undefined);
-
-					if (!loadAverages.length) return null;
-
-					function getDotColor(value: number) {
-						const normalized = value / cores;
-						if (normalized < 0.7) return "bg-green-500";
-						if (normalized < 1.0) return "bg-orange-500";
-						return "bg-red-600";
-					}
-
-					return (
-						<div className="flex items-center gap-2 w-full">
-							{loadAverages.map((la, idx) => (
-								<TooltipProvider key={la.name}>
-									<Tooltip>
-										<TooltipTrigger asChild>
-											<span className="flex items-center cursor-pointer">
-												<span className={cn("inline-block w-2 h-2 rounded-full mr-1", getDotColor(la.value || 0))} />
-												<span className="tabular-nums">
-													{decimalString(la.value || 0, 2)}
-												</span>
-												{idx < loadAverages.length - 1 && <span className="mx-1 text-muted-foreground">/</span>}
-											</span>
-										</TooltipTrigger>
-										<TooltipContent side="top">
-											<div className="text-center">
-												<div className="font-medium">{t`${la.name}`}</div>
-											</div>
-										</TooltipContent>
-									</Tooltip>
-								</TooltipProvider>
-							))}
-						</div>
-					);
-				},
-			},
 			{
 				accessorFn: (originalRow) => originalRow.info.dt,
 				id: "temp",
@@ -565,7 +548,7 @@ function SystemsTableHead({ table, colLength }: { table: TableType<SystemRecord>
 					<TableRow key={headerGroup.id}>
 						{headerGroup.headers.map((header) => {
 							return (
-								<TableHead className="px-1" key={header.id}>
+								<TableHead className="px-1.5" key={header.id}>
 									{flexRender(header.column.columnDef.header, header.getContext())}
 								</TableHead>
 							)

beszel/site/src/lib/utils.ts

@@ -455,27 +455,3 @@ export const getHubURL = () => BESZEL?.HUB_URL || window.location.origin
 
 /** Map of system IDs to their corresponding tokens (used to avoid fetching in add-system dialog) */
 export const tokenMap = new Map<SystemRecord["id"], FingerprintRecord["token"]>()
-
-/**
- * Calculate load average percentage relative to CPU cores
- * @param loadAverage - The load average value (1m, 5m, or 15m)
- * @param cores - Number of CPU cores
- * @returns Percentage (0-100) representing CPU utilization
- */
-export const calculateLoadAveragePercent = (loadAverage: number, cores: number): number => {
-	if (!loadAverage || !cores) return 0
-	return Math.min((loadAverage / cores) * 100, 100)
-}
-
-/**
- * Get load average opacity based on utilization relative to cores
- * @param loadAverage - The load average value
- * @param cores - Number of CPU cores
- * @returns Opacity value (0.6, 0.8, or 1.0)
- */
-export const getLoadAverageOpacity = (loadAverage: number, cores: number): number => {
-	if (!loadAverage || !cores) return 0.6
-	if (loadAverage < cores * 0.5) return 0.6
-	if (loadAverage < cores) return 0.8
-	return 1.0
-}