From 81fa4f16d6075866e34a3a126f4236732576f33f Mon Sep 17 00:00:00 2001
From: Henry Dollman <hank@henrygd.me>
Date: Mon, 6 Jan 2025 13:22:51 -0500
Subject: [PATCH] ui: grey meters in systems table if system is not up (#370)

---
 .../src/components/systems-table/systems-table.tsx | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/beszel/site/src/components/systems-table/systems-table.tsx b/beszel/site/src/components/systems-table/systems-table.tsx
index 8c70aef..669a562 100644
--- a/beszel/site/src/components/systems-table/systems-table.tsx
+++ b/beszel/site/src/components/systems-table/systems-table.tsx
@@ -84,7 +84,10 @@ function CellFormatter(info: CellContext<SystemRecord, unknown>) {
 				<span
 					className={cn(
 						"absolute inset-0 w-full h-full origin-left",
-						(val < 65 && "bg-green-500") || (val < 90 && "bg-yellow-500") || "bg-red-600"
+						(info.row.original.status !== "up" && "bg-primary/30") ||
+							(val < 65 && "bg-green-500") ||
+							(val < 90 && "bg-yellow-500") ||
+							"bg-red-600"
 					)}
 					style={{
 						transform: `scalex(${val / 100})`,
@@ -208,6 +211,7 @@ export default function SystemsTable() {
 					if (!version || !hubVersion) {
 						return null
 					}
+					const system = info.row.original
 					return (
 						<span
 							className={cn("flex gap-2 items-center md:pe-5 tabular-nums", {
@@ -215,8 +219,12 @@ export default function SystemsTable() {
 							})}
 						>
 							<IndicatorDot
-								system={info.row.original}
-								className={version === hubVersion ? "bg-green-500" : "bg-yellow-500"}
+								system={system}
+								className={
+									(system.status !== "up" && "bg-primary/30") ||
+									(version === hubVersion && "bg-green-500") ||
+									"bg-yellow-500"
+								}
 							/>
 							<span>{info.getValue() as string}</span>
 						</span>