gsadmin/pulse
1
0
Fork 0
mirror of https://github.com/rcourtman/Pulse.git synced 2026-10-15 08:33:03 +00:00
Code Issues Packages Projects Releases Wiki Activity

Soften Duration column tone to canonical Pulse metric palette

Browse Source 
The amber-500 / amber-400 / emerald-500 fills on the Duration bar
were all fully opaque, which read as a wall of saturated orange on
any tab with many slow tasks. Switch to the canonical bg-metric-*-bg
tokens that Storage and Ceph row bars already use — same 60%-alpha
palette, immediately calmer in the same column.

Also cap at `warning` (soft yellow) rather than going to `critical`
(red) for the worst case. A slow backup task is a perf outlier, not
a failure; failure is already conveyed by the Status column. Two
tiers — normal / slow — keeps the column from looking alarmed on
every long-running VM backup.

No-data slots stay neutral via slate-500/30 instead of slate-400, so
empty rows don't draw the eye.
This commit is contained in:
rcourtman
2026-05-20 19:04:53 +01:00
parent 350a913ea4
commit 2f77e2680d
1 changed files with 13 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend-modern/src/features/proxmox/ProxmoxBackupsTable.tsx
+13 -4
View File
@@ -1651,13 +1651,22 @@ export const ProxmoxBackupsTable: Component<{
if (!durationSec || baseline <= 0) return 0;
return (durationSec / (baseline * 2)) * 100;
};
// Canonical Pulse metric tones (60% alpha) — same palette
// Storage and Ceph row bars use via getMetricColorClass.
// Cap at `warning` (soft yellow) rather than going to red
// for the worst case: a slow backup task is a perf
// outlier, not a failure. Failure is already conveyed by
// the Status column. Two tiers — normal / slow — keeps
// the column calm instead of screaming red on every
// long-running VM backup.
const durationToneClass = () => {
const baseline = taskDurationBaselineSeconds();
if (!durationSec || baseline <= 0) return 'bg-slate-400';
if (!durationSec || baseline <= 0)
return 'bg-slate-500/30 dark:bg-slate-500/30';
const ratio = durationSec / baseline;
if (ratio >= 2) return 'bg-amber-500';
if (ratio >= 1.5) return 'bg-amber-400';
return 'bg-emerald-500';
if (ratio >= 1.5)
return 'bg-metric-warning-bg dark:bg-metric-warning-bg';
return 'bg-metric-normal-bg dark:bg-metric-normal-bg';
};
return (
<TableRow class="hover:bg-surface-hover">