diff --git a/frontend-modern/src/components/Dashboard/GuestRow.tsx b/frontend-modern/src/components/Dashboard/GuestRow.tsx index 85c36255c..c6cbff85f 100644 --- a/frontend-modern/src/components/Dashboard/GuestRow.tsx +++ b/frontend-modern/src/components/Dashboard/GuestRow.tsx @@ -77,6 +77,29 @@ export function GuestRow(props: GuestRowProps) { const total = props.guest.memory.total ?? 0; return `${formatBytes(used)}/${formatBytes(total)}`; }); + const memoryBadges = createMemo(() => { + if (!props.guest.memory) return [] as { label: string; className: string }[]; + const badges: { label: string; className: string }[] = []; + const total = props.guest.memory.total ?? 0; + if ( + props.guest.memory.balloon && + props.guest.memory.balloon > 0 && + props.guest.memory.balloon !== total + ) { + badges.push({ + label: `Balloon ${formatBytes(props.guest.memory.balloon)}`, + className: 'bg-purple-100 text-purple-700 dark:bg-purple-900/40 dark:text-purple-200', + }); + } + if (props.guest.memory.swapTotal && props.guest.memory.swapTotal > 0) { + const swapUsed = props.guest.memory.swapUsed ?? 0; + badges.push({ + label: `Swap ${formatBytes(swapUsed)} / ${formatBytes(props.guest.memory.swapTotal)}`, + className: 'bg-amber-100 text-amber-700 dark:bg-amber-900/40 dark:text-amber-200', + }); + } + return badges; + }); const memoryTooltip = createMemo(() => { if (!props.guest.memory) return undefined; const lines: string[] = []; @@ -277,6 +300,17 @@ export function GuestRow(props: GuestRowProps) { type="memory" /> + 0}> +
+ + {(badge) => ( + + {badge.label} + + )} + +
+
{/* Disk */}