From 9e7240042f1bc64fee3e3995fec23422b563687f Mon Sep 17 00:00:00 2001 From: rcourtman Date: Sun, 14 Dec 2025 22:11:07 +0000 Subject: [PATCH] fix(ui): apply threshold-based coloring to memory bars Fixes #828 Memory bars were always showing green regardless of usage percentage. Added getMemoryColor() function that applies threshold-based coloring: - Green: Below 70% - Yellow/Orange: 70-90% - Red: Above 90% This matches the existing disk bar behavior and restores the expected visual warning for high memory usage. --- .../src/components/Dashboard/StackedMemoryBar.tsx | 15 +++++++++++---- 1 file changed, 11 insertions(+), 4 deletions(-) diff --git a/frontend-modern/src/components/Dashboard/StackedMemoryBar.tsx b/frontend-modern/src/components/Dashboard/StackedMemoryBar.tsx index 36e2d81..3da92b8 100644 --- a/frontend-modern/src/components/Dashboard/StackedMemoryBar.tsx +++ b/frontend-modern/src/components/Dashboard/StackedMemoryBar.tsx @@ -16,11 +16,18 @@ interface StackedMemoryBarProps { // Colors for memory segments const MEMORY_COLORS = { - active: 'rgba(34, 197, 94, 0.6)', // green + active: 'rgba(34, 197, 94, 0.6)', // green (base, overridden by threshold) balloon: 'rgba(234, 179, 8, 0.6)', // yellow swap: 'rgba(168, 85, 247, 0.6)', // purple }; +// Threshold-based colors for memory usage (matches disk bar behavior) +const getMemoryColor = (percent: number): string => { + if (percent >= 90) return 'rgba(239, 68, 68, 0.7)'; // red + if (percent >= 70) return 'rgba(234, 179, 8, 0.7)'; // yellow/orange + return 'rgba(34, 197, 94, 0.6)'; // green +}; + export function StackedMemoryBar(props: StackedMemoryBarProps) { const { viewMode, timeRange } = useMetricsViewMode(); @@ -77,7 +84,7 @@ export function StackedMemoryBar(props: StackedMemoryBarProps) { const balloonLimitPercent = Math.max(0, (balloon / props.total) * 100 - usedPercent); const segs = [ - { type: 'Active', bytes: props.used, percent: usedPercent, color: MEMORY_COLORS.active }, + { type: 'Active', bytes: props.used, percent: usedPercent, color: getMemoryColor(usedPercent) }, ]; // Only show balloon segment if there's room between used and balloon limit @@ -93,9 +100,9 @@ export function StackedMemoryBar(props: StackedMemoryBarProps) { return segs.filter(s => s.bytes > 0); } - // No active ballooning - just show used memory as green + // No active ballooning - show used memory with threshold-based coloring return [ - { type: 'Active', bytes: props.used, percent: usedPercent, color: MEMORY_COLORS.active }, + { type: 'Active', bytes: props.used, percent: usedPercent, color: getMemoryColor(usedPercent) }, ].filter(s => s.bytes > 0); });