vrr/Pulse
2
0
Fork 0
mirror of https://github.com/rcourtman/Pulse.git synced 2026-04-28 03:20:11 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Rename Cache to Reclaimable and add Proxmox reconciliation in tooltip

Browse source 
Rename the amber segment label from "Cache" to "Reclaimable" to avoid
jargon confusion. Add a "Proxmox view: X%" line in the tooltip so
users immediately see why the percentage differs from Proxmox (which
includes reclaimable cache as used memory).
This commit is contained in:
rcourtman 2026-03-10 10:26:50 +00:00
parent 7dab977d91
commit 9601afb44c
1 changed files with 20 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -104,9 +104,9 @@ export function StackedMemoryBar(props: StackedMemoryBarProps) {
// Always show the used segment
segs.push({ type: 'Used', bytes: props.used, percent: usedPercent, color: getMemoryColor(usedPercent) });
// Cache segment (reclaimable buff/cache) — shown as muted amber
// Reclaimable segment (buff/cache) — shown as muted amber
if (cache > 0) {
segs.push({ type: 'Cache', bytes: cache, percent: cachePercent, color: MEMORY_COLORS.cache });
segs.push({ type: 'Reclaimable', bytes: cache, percent: cachePercent, color: MEMORY_COLORS.cache });
}
if (hasActiveBallooning) {
@ -163,6 +163,13 @@ export function StackedMemoryBar(props: StackedMemoryBarProps) {
setShowTooltip(false);
};
// "Proxmox view" percentage: (used + cache) / total — what Proxmox would show
const proxmoxPercent = createMemo(() => {
const cache = props.cache || 0;
if (props.total <= 0) return 0;
return ((props.used + cache) / props.total) * 100;
});
// Truly free memory (excludes cache; capped at balloon limit when active)
const trulyFree = createMemo(() => {
const cache = props.cache || 0;
@ -266,7 +273,7 @@ export function StackedMemoryBar(props: StackedMemoryBarProps) {
<Show when={(props.cache || 0) > 0}>
<div class="flex justify-between gap-3 py-0.5 border-t border-gray-700/50">
<span class="text-amber-400">Cache</span>
<span class="text-amber-400">Reclaimable</span>
<span class="whitespace-nowrap text-gray-300">
{formatBytes(props.cache || 0)}
</span>
@ -289,6 +296,16 @@ export function StackedMemoryBar(props: StackedMemoryBarProps) {
</span>
</div>
{/* Proxmox reconciliation — only shown when cache data is available */}
<Show when={(props.cache || 0) > 0}>
<div class="flex justify-between gap-3 py-0.5 border-t border-gray-700/50">
<span class="text-gray-500 italic">Proxmox view</span>
<span class="whitespace-nowrap text-gray-500 italic">
{formatPercent(proxmoxPercent())}
</span>
</div>
</Show>
{/* Swap Section */}
<Show when={hasSwap()}>
<div class="mt-1 pt-1 border-t border-gray-600">