feat: show number of pending package updates (#2357)

internal/site/src/components/systems-table/systems-table-columns.tsx

@@ -14,6 +14,7 @@ import {
 	HardDriveIcon,
 	MemoryStickIcon,
 	MoreHorizontalIcon,
+	PackageIcon,
 	PauseCircleIcon,
 	PenBoxIcon,
 	PlayCircleIcon,
@@ -80,6 +81,15 @@ const STATUS_COLORS = {
 	[SystemStatus.Pending]: "bg-yellow-500",
 } as const
 
+/** Rank of the updates dot color for sorting: 2 security (red), 1 regular (yellow), 0 up to date (green), -1 no data */
+function getUpdatesRank(pu: SystemRecord["info"]["pu"]): number {
+	if (!pu) {
+		return -1
+	}
+	const [total, security = 0] = pu
+	return security > 0 ? 2 : total > 0 ? 1 : 0
+}
+
 function getMeterStateByThresholds(value: number, warn = 65, crit = 90): MeterState {
 	return value >= crit ? MeterState.Crit : value >= warn ? MeterState.Warn : MeterState.Good
 }
@@ -393,6 +403,45 @@ export function SystemsTableColumns(viewMode: "table" | "grid"): ColumnDef<Syste
 				)
 			},
 		},
+		{
+			accessorFn: ({ info }) => info.pu?.[0],
+			id: "updates",
+			name: () => t`Updates`,
+			size: 50,
+			Icon: PackageIcon,
+			header: sortableHeader,
+			hideSort: true,
+			sortingFn: (a, b) => {
+				// sort priorities: 1) dot color (security > regular > up to date), 2) total updates
+				const puA = a.original.info.pu
+				const puB = b.original.info.pu
+				const rankA = getUpdatesRank(puA)
+				const rankB = getUpdatesRank(puB)
+				if (rankA !== rankB) {
+					return rankA - rankB
+				}
+				return (puA?.[0] ?? 0) - (puB?.[0] ?? 0)
+			},
+			cell(info) {
+				const sys = info.row.original
+				if (sys.status !== SystemStatus.Up || !sys.info.pu) {
+					return null
+				}
+				const [total, security = 0] = sys.info.pu
+				return (
+					<span className="tabular-nums whitespace-nowrap flex gap-1.5 items-center">
+						<span
+							className={cn("block size-2 rounded-full", {
+								[STATUS_COLORS[SystemStatus.Down]]: security > 0,
+								[STATUS_COLORS[SystemStatus.Pending]]: security === 0 && total > 0,
+								[STATUS_COLORS[SystemStatus.Up]]: total === 0,
+							})}
+						/>
+						{total === 0 ? t`Up to date` : plural(total, { one: "# update", other: "# updates" })}
+					</span>
+				)
+			},
+		},
 		{
 			accessorFn: ({ info }) => info.u || undefined,
 			id: "uptime",