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
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);
});