diff --git a/frontend-modern/src/components/Dashboard/GuestRow.tsx b/frontend-modern/src/components/Dashboard/GuestRow.tsx
index 47b6f5c39..39048818e 100644
--- a/frontend-modern/src/components/Dashboard/GuestRow.tsx
+++ b/frontend-modern/src/components/Dashboard/GuestRow.tsx
@@ -71,13 +71,19 @@ export function GuestRow(props: GuestRowProps) {
// Use the pre-calculated usage percentage from the backend
return props.guest.memory.usage || 0;
});
- const memorySubLabel = createMemo(() => {
+ const memoryUsageLabel = createMemo(() => {
if (!props.guest.memory) return undefined;
const used = props.guest.memory.used ?? 0;
const total = props.guest.memory.total ?? 0;
- const parts = [`${formatBytes(used)}/${formatBytes(total)}`];
+ return `${formatBytes(used)}/${formatBytes(total)}`;
+ });
+
+ const memoryExtraInfo = createMemo(() => {
+ if (!props.guest.memory) return [] as string[];
+ const extras: string[] = [];
+ const total = props.guest.memory.total ?? 0;
if (props.guest.memory.balloon && props.guest.memory.balloon > 0 && props.guest.memory.balloon !== total) {
- parts.push(`balloon ${formatBytes(props.guest.memory.balloon)}`);
+ extras.push(`balloon ${formatBytes(props.guest.memory.balloon)}`);
}
if (
props.guest.memory.swapUsed &&
@@ -85,9 +91,9 @@ export function GuestRow(props: GuestRowProps) {
props.guest.memory.swapTotal &&
props.guest.memory.swapTotal > 0
) {
- parts.push(`swap ${formatBytes(props.guest.memory.swapUsed)}/${formatBytes(props.guest.memory.swapTotal)}`);
+ extras.push(`swap ${formatBytes(props.guest.memory.swapUsed)}/${formatBytes(props.guest.memory.swapTotal)}`);
}
- return parts.join(' • ');
+ return extras;
});
const diskPercent = createMemo(() => {
if (!props.guest.disk || props.guest.disk.total === 0) return 0;
@@ -267,9 +273,14 @@ export function GuestRow(props: GuestRowProps) {
+ 0}>
+
+ {(info) => {info}}
+
+
{/* Disk */}