[Feature][0.12.0-Beta] Enhance Load Average Display, Charting & Alert Grouping (#960)

* Add 1m load

* update alart dialog

* fix null data

* Remove omit zero

* change table and alert view

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

@@ -11,13 +11,14 @@ import {
 	DialogHeader,
 	DialogTitle,
 } from "@/components/ui/dialog"
-import { BellIcon, GlobeIcon, ServerIcon } from "lucide-react"
+import { BellIcon, GlobeIcon, ServerIcon, HourglassIcon } 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

@@ -0,0 +1,123 @@
+import { CartesianGrid, Line, LineChart, YAxis } from "recharts"
+
+import {
+	ChartContainer,
+	ChartLegend,
+	ChartLegendContent,
+	ChartTooltip,
+	ChartTooltipContent,
+	xAxis,
+} from "@/components/ui/chart"
+import {
+	useYAxisWidth,
+	cn,
+	formatShortDate,
+	toFixedWithoutTrailingZeros,
+	decimalString,
+	chartMargin,
+} from "@/lib/utils"
+import { ChartData } from "@/types"
+import { memo, useMemo } 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
+	}
+
+	/** 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())
+
+	return (
+		<div>
+			<ChartContainer
+				className={cn("h-full w-full absolute aspect-auto bg-card opacity-0 transition-opacity", {
+					"opacity-100": yAxisWidth,
+				})}
+			>
+				<LineChart accessibilityLayer data={newChartData.data} margin={chartMargin}>
+					<CartesianGrid vertical={false} />
+					<YAxis
+						direction="ltr"
+						orientation={chartData.orientation}
+						className="tracking-tighter"
+						domain={[0, "auto"]}
+						width={yAxisWidth}
+						tickFormatter={(value) => {
+							const val = toFixedWithoutTrailingZeros(value, 2)
+							return updateYAxisWidth(val)
+						}}
+						tickLine={false}
+						axisLine={false}
+					/>
+					{xAxis(chartData)}
+					<ChartTooltip
+						animationEasing="ease-out"
+						animationDuration={150}
+						// @ts-ignore
+						itemSorter={(a, b) => b.value - a.value}
+						content={
+							<ChartTooltipContent
+								labelFormatter={(_, data) => formatShortDate(data[0].payload.created)}
+								contentFormatter={(item) => decimalString(item.value)}
+							/>
+						}
+					/>
+					{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}
+						/>
+					))}
+					<ChartLegend content={<ChartLegendContent />} />
+				</LineChart>
+			</ChartContainer>
+		</div>
+	)
+}) 

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

@@ -48,6 +48,7 @@ const DiskChart = lazy(() => import("../charts/disk-chart"))
 const SwapChart = lazy(() => import("../charts/swap-chart"))
 const TemperatureChart = lazy(() => import("../charts/temperature-chart"))
 const GpuPowerChart = lazy(() => import("../charts/gpu-power-chart"))
+const LoadAverageChart = lazy(() => import("../charts/load-average-chart"))
 
 const cache = new Map<string, any>()
 
@@ -483,6 +484,18 @@ 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}

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

@@ -84,6 +84,7 @@ 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"
 
@@ -239,43 +240,61 @@ export default function SystemsTable() {
 				},
 			},
 			{
-				accessorFn: (originalRow) => originalRow.info.l5,
-				id: "l5",
-				name: () => t({ message: "L5", comment: "Load average 5 minutes" }),
+				id: "loadAverage",
+				name: () => t`Load Average`,
 				size: 0,
 				hideSort: true,
 				Icon: HourglassIcon,
 				header: sortableHeader,
-				cell(info) {
-					const val = info.getValue() as number
-					if (!val) {
-						return null
+				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 (
-						<span className={cn("tabular-nums whitespace-nowrap", viewMode === "table" && "ps-1")}>
-							{decimalString(val)}
-						</span>
-					)
-				},
-			},
-			{
-				accessorFn: (originalRow) => originalRow.info.l15,
-				id: "l15",
-				name: () => t({ message: "L15", comment: "Load average 15 minutes" }),
-				size: 0,
-				hideSort: true,
-				Icon: HourglassIcon,
-				header: sortableHeader,
-				cell(info) {
-					const val = info.getValue() as number
-					if (!val) {
-						return null
-					}
-					return (
-						<span className={cn("tabular-nums whitespace-nowrap", viewMode === "table" && "ps-1")}>
-							{decimalString(val)}
-						</span>
-					)
+						<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>
+					);
 				},
 			},
 			{

beszel/site/src/components/ui/collapsible.tsx

@@ -0,0 +1,49 @@
+import * as React from "react"
+import { ChevronDownIcon, HourglassIcon } from "lucide-react"
+import { cn } from "@/lib/utils"
+import { Button } from "./button"
+
+interface CollapsibleProps {
+	title: string
+	children: React.ReactNode
+	description?: React.ReactNode
+	defaultOpen?: boolean
+	className?: string
+	icon?: React.ReactNode
+}
+
+export function Collapsible({ title, children, description, defaultOpen = false, className, icon }: CollapsibleProps) {
+	const [isOpen, setIsOpen] = React.useState(defaultOpen)
+
+	return (
+		<div className={cn("border rounded-lg", className)}>
+			<Button
+				variant="ghost"
+				className="w-full justify-between p-4 font-semibold"
+				onClick={() => setIsOpen(!isOpen)}
+			>
+				<div className="flex items-center gap-2">
+					{icon}
+					{title}
+				</div>
+				<ChevronDownIcon
+					className={cn("h-4 w-4 transition-transform duration-200", {
+						"rotate-180": isOpen,
+					})}
+				/>
+			</Button>
+			{description && (
+				<div className="px-4 pb-2 text-sm text-muted-foreground">
+					{description}
+				</div>
+			)}
+			{isOpen && (
+				<div className="px-4 pb-4">
+					<div className="grid gap-3">
+						{children}
+					</div>
+				</div>
+			)}
+		</div>
+	)
+} 

beszel/site/src/lib/utils.ts

@@ -407,6 +407,16 @@ export const alertInfo: Record<string, AlertInfo> = {
 		icon: ThermometerIcon,
 		desc: () => t`Triggers when any sensor exceeds a threshold`,
 	},
+	LoadAvg1: {
+		name: () => t`Load Average 1m`,
+		unit: "",
+		icon: HourglassIcon,
+		max: 100,
+		min: 0.1,
+		start: 10,
+		step: 0.1,
+		desc: () => t`Triggers when 1 minute load average exceeds a threshold`,
+	},
 	LoadAvg5: {
 		name: () => t`Load Average 5m`,
 		unit: "",
@@ -445,3 +455,27 @@ 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
+}

beszel/site/src/types.d.ts

@@ -44,6 +44,8 @@ export interface SystemInfo {
 	c: number
 	/** cpu model */
 	m: string
+	/** load average 1 minute */
+	l1?: number
 	/** load average 5 minutes */
 	l5?: number
 	/** load average 15 minutes */