feat(dashboard): reflect system up/down status

Co-authored-by: Ona <no-reply@ona.com>

apps/backend/src/beszel.ts

@@ -8,6 +8,7 @@ beszel.use("*", beszelAuth())
 
 interface BeszelSystemInfo {
 	name: string
+	status: "up" | "down"
 	info: {
 		cpu: number
 		ram: number
@@ -17,6 +18,7 @@ interface BeszelSystemInfo {
 
 interface BeszelApiSystem {
 	name: string
+	status: "up" | "down"
 	info: {
 		cpu: number
 		mp: number // memory percentage
@@ -56,6 +58,7 @@ beszel.get("/systems", async (c) => {
 
 		const systems: BeszelSystemInfo[] = data.items.map((system) => ({
 			name: system.name,
+			status: system.status,
 			info: {
 				cpu: system.info.cpu,
 				ram: system.info.mp,

apps/dashboard/src/App.tsx

@@ -597,12 +597,36 @@ function SystemTile({
 		)
 	}
 
+	let systemStatusContent: React.ReactNode
+	switch (beszelSystemsData.status) {
+		case "up":
+			systemStatusContent = (
+				<div className="w-full flex-1 min-w-0 basis-0 relative mb-2">
+					<canvas ref={onCanvasRef} className="min-h-0 absolute top-0 left-0 w-full h-full" />
+				</div>
+			)
+			break
+
+		case "down":
+			systemStatusContent = (
+				<div className="w-full flex-1 flex items-center justify-center">
+					<p className="font-mono text-red-500 uppercase font-bold">System offline</p>
+				</div>
+			)
+			break
+	}
+
 	return (
 		<Tile className={cn("h-full flex flex-col justify-start items-start", className)}>
 			<div className="grid grid-cols-6 px-4 pt-3 w-full">
 				<div className="col-span-3 flex flex-row items-center space-x-2">
 					<p className="text-2xl">{displayName}</p>
-					<div className="size-2 border border-green-300 bg-green-500 rounded-full animate-pulse" />
+					<div
+						className={cn("size-2 border rounded-full", {
+							"animate-pulse border-green-300 bg-green-500": beszelSystemsData.status === "up",
+							"border-red-300 bg-red-500": beszelSystemsData.status === "down",
+						})}
+					/>
 				</div>
 				<div className="flex flex-col font-mono">
 					<p className="text-neutral-400 text-right leading-none">CPU</p>
@@ -617,9 +641,7 @@ function SystemTile({
 					<p className="text-right">{beszelSystemsData.info.disk.toFixed(0).padStart(3, "0")}</p>
 				</div>
 			</div>
-			<div className="w-full flex-1 min-w-0 basis-0 relative mb-2">
+			{systemStatusContent}
-				<canvas ref={onCanvasRef} className="min-h-0 absolute top-0 left-0 w-full h-full" />
-			</div>
 		</Tile>
 	)
 }

apps/dashboard/src/beszel.ts

@@ -16,6 +16,7 @@ const API_BASE_URL = getApiBaseUrl()
 // System Info
 export interface BeszelSystemInfo {
 	name: string
+	status: "up" | "down"
 	info: {
 		cpu: number
 		ram: number