Mirrors/ProxMenux
1
0
Fork 0
mirror of https://github.com/MacRimi/ProxMenux.git synced 2026-02-19 08:56:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update virtual-machines.tsx

Browse Source
This commit is contained in:
MacRimi
2026-01-31 15:57:59 +01:00
parent ba727f53c4
commit 6c3886ad24
1 changed files with 38 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
AppImage/components/virtual-machines.tsx
View File

@@ -453,10 +453,18 @@ export function VirtualMachines() {
const safeVMData = vmData || [] const safeVMData = vmData || []
// Total allocated RAM for ALL VMs/LXCs (running + stopped)
const totalAllocatedMemoryGB = useMemo(() => { const totalAllocatedMemoryGB = useMemo(() => {
return (safeVMData.reduce((sum, vm) => sum + (vm.maxmem || 0), 0) / 1024 ** 3).toFixed(1) return (safeVMData.reduce((sum, vm) => sum + (vm.maxmem || 0), 0) / 1024 ** 3).toFixed(1)
}, [safeVMData]) }, [safeVMData])
// Allocated RAM only for RUNNING VMs/LXCs (this is what actually matters for overcommit)
const runningAllocatedMemoryGB = useMemo(() => {
return (safeVMData
.filter((vm) => vm.status === "running")
.reduce((sum, vm) => sum + (vm.maxmem || 0), 0) / 1024 ** 3).toFixed(1)
}, [safeVMData])
const { data: systemData } = useSWR<{ memory_total: number; memory_used: number; memory_usage: number }>( const { data: systemData } = useSWR<{ memory_total: number; memory_used: number; memory_usage: number }>(
"/api/system", "/api/system",
fetcher, fetcher,
@@ -470,7 +478,9 @@ export function VirtualMachines() {
const usedMemoryGB = systemData?.memory_used ?? null const usedMemoryGB = systemData?.memory_used ?? null
const memoryUsagePercent = systemData?.memory_usage ?? null const memoryUsagePercent = systemData?.memory_usage ?? null
const allocatedMemoryGB = Number.parseFloat(totalAllocatedMemoryGB) const allocatedMemoryGB = Number.parseFloat(totalAllocatedMemoryGB)
const isMemoryOvercommit = physicalMemoryGB !== null && allocatedMemoryGB > physicalMemoryGB const runningAllocatedGB = Number.parseFloat(runningAllocatedMemoryGB)
// Overcommit warning should be based on RUNNING VMs allocation, not total
const isMemoryOvercommit = physicalMemoryGB !== null && runningAllocatedGB > physicalMemoryGB
const getMemoryUsageColor = (percent: number | null) => { const getMemoryUsageColor = (percent: number | null) => {
if (percent === null) return "bg-blue-500" if (percent === null) return "bg-blue-500"
@@ -758,13 +768,21 @@ export function VirtualMachines() {
</div> </div>
)} )}
{/* Allocated RAM (configured) */} {/* Allocated RAM (configured) - Split into Running and Total */}
<div className="pt-3 border-t border-border"> <div className="pt-3 border-t border-border">
{/* Layout para desktop (sin cambios) */} {/* Layout para desktop */}
<div className="hidden lg:flex items-center justify-between"> <div className="hidden lg:flex items-center justify-between">
<div> <div className="flex gap-6">
<div className="text-lg font-semibold text-foreground">{totalAllocatedMemoryGB} GB</div> {/* Running allocation - most important */}
<div className="text-xs text-muted-foreground">Allocated RAM</div> <div>
<div className="text-lg font-semibold text-foreground">{runningAllocatedMemoryGB} GB</div>
<div className="text-xs text-muted-foreground">Running Allocated</div>
</div>
{/* Total allocation */}
<div>
<div className="text-lg font-semibold text-muted-foreground">{totalAllocatedMemoryGB} GB</div>
<div className="text-xs text-muted-foreground">Total Allocated</div>
</div>
</div> </div>
{physicalMemoryGB !== null && ( {physicalMemoryGB !== null && (
<div> <div>
@@ -781,10 +799,20 @@ export function VirtualMachines() {
)} )}
</div> </div>
{/* Layout para móvil (44.0 GB solo, Allocated RAM en otra línea, badge en tercera línea) */} {/* Layout para movil */}
<div className="lg:hidden space-y-1"> <div className="lg:hidden space-y-2">
<div className="text-lg font-semibold text-foreground">{totalAllocatedMemoryGB} GB</div> <div className="flex gap-4">
<div className="text-xs text-muted-foreground">Allocated RAM</div> {/* Running allocation */}
<div>
<div className="text-lg font-semibold text-foreground">{runningAllocatedMemoryGB} GB</div>
<div className="text-xs text-muted-foreground">Running</div>
</div>
{/* Total allocation */}
<div>
<div className="text-lg font-semibold text-muted-foreground">{totalAllocatedMemoryGB} GB</div>
<div className="text-xs text-muted-foreground">Total</div>
</div>
</div>
{physicalMemoryGB !== null && ( {physicalMemoryGB !== null && (
<div> <div>
{isMemoryOvercommit ? ( {isMemoryOvercommit ? (