From 0be9882b34bb3445b5ec7b6af8915b097e0bbf27 Mon Sep 17 00:00:00 2001
From: Sven van Ginkel <svenvanginkel@icloud.com>
Date: Thu, 24 Sep 2026 18:05:26 +0200
Subject: [PATCH] feat(ui): simplify Services column in systems table (#2399)

Co-authored-by: hank <hank@henrygd.me>
---
 .../systems-table/systems-table-columns.tsx   | 40 ++++++++++++++-----
 1 file changed, 29 insertions(+), 11 deletions(-)

diff --git a/internal/site/src/components/systems-table/systems-table-columns.tsx b/internal/site/src/components/systems-table/systems-table-columns.tsx
index 1db27673..c49b8ca6 100644
--- a/internal/site/src/components/systems-table/systems-table-columns.tsx
+++ b/internal/site/src/components/systems-table/systems-table-columns.tsx
@@ -1,5 +1,5 @@
 /** biome-ignore-all lint/correctness/useHookAtTopLevel: Hooks live inside memoized column definitions */
-import { t } from "@lingui/core/macro"
+import { plural, t } from "@lingui/core/macro"
 import { Trans, useLingui } from "@lingui/react/macro"
 import { useStore } from "@nanostores/react"
 import { getPagePath } from "@nanostores/router"
@@ -345,11 +345,13 @@ export function SystemsTableColumns(viewMode: "table" | "grid"): ColumnDef<Syste
 			header: sortableHeader,
 			hideSort: true,
 			sortingFn: (a, b) => {
-				// sort priorities: 1) failed services, 2) total services
+				// sort priorities: 1) has failed services (dot color), 2) total services
 				const [totalCountA, numFailedA] = a.original.info.sv ?? [0, 0]
 				const [totalCountB, numFailedB] = b.original.info.sv ?? [0, 0]
-				if (numFailedA !== numFailedB) {
-					return numFailedA - numFailedB
+				const hasFailedA = numFailedA > 0 ? 1 : 0
+				const hasFailedB = numFailedB > 0 ? 1 : 0
+				if (hasFailedA !== hasFailedB) {
+					return hasFailedA - hasFailedB
 				}
 				return totalCountA - totalCountB
 			},
@@ -359,20 +361,36 @@ export function SystemsTableColumns(viewMode: "table" | "grid"): ColumnDef<Syste
 				if (sys.status !== SystemStatus.Up || totalCount === 0) {
 					return null
 				}
-				return (
+				const content = (
 					<span className="tabular-nums whitespace-nowrap flex gap-1.5 items-center">
 						<span
 							className={cn("block size-2 rounded-full", {
-								[STATUS_COLORS[SystemStatus.Down]]: numFailed > 0,
-								[STATUS_COLORS[SystemStatus.Up]]: numFailed === 0,
+								[STATUS_COLORS.pending]: numFailed > 0,
+								[STATUS_COLORS.up]: numFailed === 0,
 							})}
 						/>
-						{totalCount}{" "}
-						<span className="text-muted-foreground text-sm -ms-0.5">
-							({t`Failed`.toLowerCase()}: {numFailed})
-						</span>
+						{plural(totalCount, { one: "# service", other: "# services" })}
 					</span>
 				)
+				if (numFailed === 0) {
+					return content
+				}
+				return (
+					<Tooltip>
+						<TooltipTrigger asChild>
+							<Link
+								href={getPagePath($router, "system", { id: sys.id })}
+								tabIndex={-1}
+								className="relative z-10 w-fit block"
+							>
+								{content}
+							</Link>
+						</TooltipTrigger>
+						<TooltipContent>
+							{plural(numFailed, { one: "# failed service", other: "# failed services" })}
+						</TooltipContent>
+					</Tooltip>
+				)
 			},
 		},
 		{