change layout of extra disks in all systems table (#1409)

internal/site/biome.json

@@ -48,7 +48,8 @@
 			},
 			"suspicious": {
 				"useAwait": "error",
-				"noEvolvingTypes": "error"
+				"noEvolvingTypes": "error",
+				"noArrayIndexKey": "off"
 			}
 		}
 	},

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

@@ -1,3 +1,4 @@
+/** biome-ignore-all lint/correctness/useHookAtTopLevel: <explanation> */
 import { t } from "@lingui/core/macro"
 import { Trans, useLingui } from "@lingui/react/macro"
 import { useStore } from "@nanostores/react"
@@ -218,7 +219,7 @@ export function SystemsTableColumns(viewMode: "table" | "grid"): ColumnDef<Syste
 			},
 		},
 		{
-			accessorFn: ({ info }) => (info.bb || (info.b || 0) * 1024 * 1024) || undefined,
+			accessorFn: ({ info }) => info.bb || (info.b || 0) * 1024 * 1024 || undefined,
 			id: "net",
 			name: () => t`Net`,
 			size: 0,
@@ -291,7 +292,10 @@ export function SystemsTableColumns(viewMode: "table" | "grid"): ColumnDef<Syste
 								[STATUS_COLORS[SystemStatus.Up]]: numFailed === 0,
 							})}
 						/>
-						{totalCount} <span className="text-muted-foreground text-sm -ms-0.5">({t`Failed`.toLowerCase()}: {numFailed})</span>
+						{totalCount}{" "}
+						<span className="text-muted-foreground text-sm -ms-0.5">
+							({t`Failed`.toLowerCase()}: {numFailed})
+						</span>
 					</span>
 				)
 			},
@@ -395,7 +399,6 @@ function DiskCellWithMultiple(info: CellContext<SystemRecord, unknown>) {
 	const { info: sysInfo, status, id } = info.row.original
 	const extraFs = Object.entries(sysInfo.efs ?? {})
 
-	// No extra disks - show basic meter
 	if (extraFs.length === 0) {
 		return TableCellWithMeter(info)
 	}
@@ -405,10 +408,9 @@ function DiskCellWithMultiple(info: CellContext<SystemRecord, unknown>) {
 	// sort extra disks by percentage descending
 	extraFs.sort((a, b) => b[1] - a[1])
 
-	function getMeterClass(pct: number) {
+	function getIndicatorColor(pct: number) {
 		const threshold = getMeterState(pct)
-		return cn(
+		return (
-			"h-full",
 			(status !== SystemStatus.Up && STATUS_COLORS.paused) ||
 			(threshold === MeterState.Good && STATUS_COLORS.up) ||
 			(threshold === MeterState.Warn && STATUS_COLORS.pending) ||
@@ -416,28 +418,43 @@ function DiskCellWithMultiple(info: CellContext<SystemRecord, unknown>) {
 		)
 	}
 
+	function getMeterClass(pct: number) {
+		return cn("h-full", getIndicatorColor(pct))
+	}
+
 	return (
 		<Tooltip>
 			<TooltipTrigger asChild>
-				<Link href={getPagePath($router, "system", { id })} tabIndex={-1} className="flex flex-col gap-0.5 w-full relative z-10">
+				<Link
+					href={getPagePath($router, "system", { id })}
+					tabIndex={-1}
+					className="flex flex-col gap-0.5 w-full relative z-10"
+				>
 					<div className="flex gap-2 items-center tabular-nums tracking-tight">
 						<span className="min-w-8 shrink-0">{decimalString(rootDiskPct, rootDiskPct >= 10 ? 1 : 2)}%</span>
-						<span className="flex-1 min-w-8 grid bg-muted h-[1em] rounded-sm overflow-hidden">
+						<span className="flex-1 min-w-8 flex items-center gap-0.5 px-1 justify-end bg-muted h-[1em] rounded-sm overflow-hidden relative">
 							{/* Root disk */}
-							<span className={getMeterClass(rootDiskPct)} style={{ width: `${rootDiskPct}%` }}></span>
+							<span
-							{/* Extra disks */}
+								className={cn("absolute inset-0", getMeterClass(rootDiskPct))}
-							{extraFs.map(([_name, pct], index) => (
+								style={{ width: `${rootDiskPct}%` }}
-								<span key={index} className={getMeterClass(pct)} style={{ width: `${pct}%` }}></span>
+							></span>
+							{/* Extra disk indicators */}
+							{extraFs.map(([name, pct]) => (
+								<span
+									key={name}
+									className={cn("size-1.5 rounded-full shrink-0 outline-[0.5px] outline-muted", getIndicatorColor(pct))}
+								/>
 							))}
-
 						</span>
 					</div>
 				</Link>
 			</TooltipTrigger>
 			<TooltipContent side="right" className="max-w-xs pb-2">
-				<div className="grid gap-1.5">
+				<div className="grid gap-1">
 					<div className="grid gap-0.5">
-						<div className="text-[0.65rem] text-muted-foreground uppercase tracking-wide tabular-nums"><Trans context="Root disk label">Root</Trans></div>
+						<div className="text-[0.65rem] text-muted-foreground uppercase tracking-wide tabular-nums">
+							<Trans context="Root disk label">Root</Trans>
+						</div>
 						<div className="flex gap-2 items-center tabular-nums text-xs">
 							<span className="min-w-7">{decimalString(rootDiskPct, rootDiskPct >= 10 ? 1 : 2)}%</span>
 							<span className="flex-1 min-w-12 grid bg-muted h-2.5 rounded-sm overflow-hidden">
@@ -448,7 +465,9 @@ function DiskCellWithMultiple(info: CellContext<SystemRecord, unknown>) {
 					{extraFs.map(([name, pct]) => {
 						return (
 							<div key={name} className="grid gap-0.5">
-								<div className="text-[0.65rem] max-w-40 text-muted-foreground uppercase tracking-wide truncate">{name}</div>
+								<div className="text-[0.65rem] max-w-40 text-muted-foreground uppercase tracking-wide truncate">
+									{name}
+								</div>
 								<div className="flex gap-2 items-center tabular-nums text-xs">
 									<span className="min-w-7">{decimalString(pct, pct >= 10 ? 1 : 2)}%</span>
 									<span className="flex-1 min-w-12 grid bg-muted h-2.5 rounded-sm overflow-hidden">