danvics/Pulse
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(ui): apply threshold-based coloring to memory bars

Browse source 
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.
This commit is contained in:
rcourtman 2025-12-14 22:11:07 +00:00
parent 3948652a21
commit 9e7240042f
1 changed files with 11 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
frontend-modern/src/components/Dashboard/StackedMemoryBar.tsx
View file

@ -16,11 +16,18 @@ interface StackedMemoryBarProps {
// Colors for memory segments // Colors for memory segments
const MEMORY_COLORS = { 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 balloon: 'rgba(234, 179, 8, 0.6)', // yellow
swap: 'rgba(168, 85, 247, 0.6)', // purple 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) { export function StackedMemoryBar(props: StackedMemoryBarProps) {
const { viewMode, timeRange } = useMetricsViewMode(); const { viewMode, timeRange } = useMetricsViewMode();
@ -77,7 +84,7 @@ export function StackedMemoryBar(props: StackedMemoryBarProps) {
const balloonLimitPercent = Math.max(0, (balloon / props.total) * 100 - usedPercent); const balloonLimitPercent = Math.max(0, (balloon / props.total) * 100 - usedPercent);
const segs = [ 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 // 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); 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 [ 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); ].filter(s => s.bytes > 0);
}); });