From e51a9f083f3ebf26f995eaca216972791c5546db Mon Sep 17 00:00:00 2001
From: rcourtman <courtmanr@gmail.com>
Date: Sat, 16 May 2026 17:07:51 +0100
Subject: [PATCH] proxmox(ceph-drawer): use canonical metric color tokens on
 capacity bars
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Raw bg-emerald-500 / bg-amber-500 / bg-red-500 are brighter than the
muted bg-metric-normal-bg / warning-bg / critical-bg theme tokens
that Workloads MetricBar uses, so dark text-base-content labels sat
on top of high-saturation fills and dropped legibility.

Switch capacity + pool bars to getMetricColorClass(percent, 'disk')
— same util the Workloads CPU/Memory/Disk bars use — and centered
single-line labels matching MetricBar's layout (text-[10px]
font-semibold text-base-content leading-none, centered).
---
 .../proxmox/ProxmoxCephClusterDrawer.tsx      | 27 +++++++------------
 1 file changed, 10 insertions(+), 17 deletions(-)

diff --git a/frontend-modern/src/features/proxmox/ProxmoxCephClusterDrawer.tsx b/frontend-modern/src/features/proxmox/ProxmoxCephClusterDrawer.tsx
index ddff71a65..b3bf0db42 100644
--- a/frontend-modern/src/features/proxmox/ProxmoxCephClusterDrawer.tsx
+++ b/frontend-modern/src/features/proxmox/ProxmoxCephClusterDrawer.tsx
@@ -5,6 +5,7 @@ import { ProgressBar } from '@/components/shared/ProgressBar';
 import { StatusDot } from '@/components/shared/StatusDot';
 import type { StatusIndicatorVariant } from '@/utils/status';
 import { formatBytes } from '@/utils/format';
+import { getMetricColorClass } from '@/utils/metricThresholds';
 import { asTrimmedString } from '@/utils/stringUtils';
 import type { Resource, ResourceCephServiceMeta } from '@/types/resource';
 
@@ -38,12 +39,13 @@ function classifyService(svc: ResourceCephServiceMeta): {
 }
 
 // Capacity utilization bar — matches the Workloads row convention:
-// the label sits on top of the fill, not in a legend below. Color
-// thresholds at 75%/90% match the rest of the app's storage bars.
+// the label sits on top of the fill, not in a legend below. Reuses
+// the shared metric color tokens (bg-metric-normal-bg / warning /
+// critical) so the green/amber/red match the rest of the app exactly
+// (raw bg-emerald-500 was brighter and clashed with the dark label
+// text overlay).
 function capacityToneFor(percent: number): string {
-  if (percent >= 90) return 'bg-red-500 dark:bg-red-400';
-  if (percent >= 75) return 'bg-amber-500 dark:bg-amber-400';
-  return 'bg-emerald-500 dark:bg-emerald-400';
+  return getMetricColorClass(percent, 'disk');
 }
 
 function CapacityBar(props: {
@@ -52,23 +54,14 @@ function CapacityBar(props: {
   percent: number;
 }) {
   const clamped = Math.max(0, Math.min(100, props.percent));
-  const available = Math.max(0, props.total - props.used);
   return (
     <ProgressBar
       value={clamped}
-      class="h-6"
+      class="h-5"
       fillClass={capacityToneFor(clamped)}
       label={
-        <span class="absolute inset-0 flex items-center justify-between px-2 text-[11px] font-semibold text-base-content leading-none">
-          <span class="tabular-nums">
-            {clamped.toFixed(1)}%
-            <span class="ml-1 font-normal text-muted">
-              ({formatBytes(props.used)} of {formatBytes(props.total)})
-            </span>
-          </span>
-          <span class="tabular-nums font-normal text-muted">
-            {formatBytes(available)} free
-          </span>
+        <span class="absolute inset-0 flex items-center justify-center text-[10px] font-semibold text-base-content leading-none tabular-nums">
+          {clamped.toFixed(1)}% · {formatBytes(props.used)} / {formatBytes(props.total)}
         </span>
       }
     />