fix(ui): Display disk size correctly for VMs and LXCs (fixes #71)

Change VM disk display to show only total allocated size (maxdisk) due to API limitations and unreliability of guest usage reporting via /status/current. LXCs continue to show usage bars based on metrics. Adds tooltip to Disk header clarifying the difference.
This commit is contained in:
courtmanr@gmail.com
2025-05-01 16:28:25 +01:00
parent 5fed14dbac
commit ba0277b71b
2 changed files with 29 additions and 5 deletions
+28 -4
View File
@@ -1368,20 +1368,44 @@ document.addEventListener('DOMContentLoaded', function() {
if (guest.status === 'running') {
const cpuPercent = Math.round(guest.cpu * 100);
const memoryPercent = guest.memory;
const diskPercent = guest.disk;
// REMOVED: const diskPercent = guest.disk;
// Revert to original calculation using guest.cpus
const cpuTooltipText = `${cpuPercent}% ${guest.cpus ? `(${(guest.cpu * guest.cpus).toFixed(1)}/${guest.cpus} cores)` : ''}`;
const memoryTooltipText = guest.memoryTotal ? `${formatBytesInt(guest.memoryCurrent)} / ${formatBytesInt(guest.memoryTotal)} (${memoryPercent}%)` : `${memoryPercent}%`;
const diskTooltipText = guest.diskTotal ? `${formatBytesInt(guest.diskCurrent)} / ${formatBytesInt(guest.diskTotal)} (${diskPercent}%)` : `${diskPercent}%`;
// REMOVED: const diskTooltipText = guest.diskTotal ? `${formatBytesInt(guest.diskCurrent)} / ${formatBytesInt(guest.diskTotal)} (${diskPercent}%)` : `${diskPercent}%`;
const cpuColorClass = getUsageColor(cpuPercent);
const memColorClass = getUsageColor(memoryPercent);
const diskColorClass = getUsageColor(diskPercent);
// REMOVED: const diskColorClass = getUsageColor(diskPercent);
cpuBarHTML = createProgressTextBarHTML(cpuPercent, cpuTooltipText, cpuColorClass);
memoryBarHTML = createProgressTextBarHTML(memoryPercent, memoryTooltipText, memColorClass);
diskBarHTML = createProgressTextBarHTML(diskPercent, diskTooltipText, diskColorClass);
// REMOVED: diskBarHTML = createProgressTextBarHTML(diskPercent, diskTooltipText, diskColorClass);
// --- NEW Conditional Disk Display ---
if (guest.type === 'lxc') { // Assuming type is 'lxc' or 'qemu' (check data structure if needed)
const diskPercent = guest.disk; // Use metric disk usage for LXC
const diskTooltipText = guest.diskTotal ? `${formatBytesInt(guest.diskCurrent)} / ${formatBytesInt(guest.diskTotal)} (${diskPercent}%)` : `${diskPercent}%`;
const diskColorClass = getUsageColor(diskPercent);
diskBarHTML = createProgressTextBarHTML(diskPercent, diskTooltipText, diskColorClass);
} else if (guest.type === 'VM') {
// --- DEBUG LOGGING ---
if (guest.name && guest.name.toLowerCase().includes('unraid')) { // Log only for specific VM for clarity
console.log(`[DEBUG] VM Disk Check (${guest.name}): guest.diskTotal =`, guest.diskTotal);
}
// --- END DEBUG LOGGING ---
if (guest.diskTotal) { // Check if total disk exists and is non-zero
// For VMs, show only total size without progress bar
const totalDiskFormatted = formatBytesInt(guest.diskTotal);
diskBarHTML = `<span class=\"text-xs text-gray-700 dark:text-gray-200 truncate\">${totalDiskFormatted}</span>`;
} else {
diskBarHTML = '-'; // Fallback if no total disk reported by API
}
} else {
diskBarHTML = '-'; // Fallback if type unknown
}
// --- END Conditional Disk Display ---
diskReadFormatted = formatSpeedInt(guest.diskread);
diskWriteFormatted = formatSpeedInt(guest.diskwrite);
+1 -1
View File
@@ -231,7 +231,7 @@
<th class="sortable p-1 px-2" data-sort="uptime" style="width: var(--uptime-col-width, 80px);">Uptime</th>
<th class="sortable p-1 px-2" data-sort="cpu" style="width: 110px;">CPU</th>
<th class="sortable p-1 px-2" data-sort="memory" style="width: 110px;">Memory</th>
<th class="sortable p-1 px-2" data-sort="disk" style="width: 110px;">Disk</th>
<th class="sortable p-1 px-2" data-sort="disk" style="width: 110px;" title="Shows usage for LXC; shows total size for VMs due to API limitations.">Disk</th>
<th class="sortable p-1 px-2 text-right" data-sort="diskread" style="width: 70px;">Read</th>
<th class="sortable p-1 px-2 text-right" data-sort="diskwrite" style="width: 70px;">Write</th>
<th class="sortable p-1 px-2 text-right" data-sort="netin" style="width: 70px;">Net In</th>