update load avg display and include it in longer records

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>
 							)