setSelectedInterface(interface_)}
- >
- {/* First row: Icon, Name, VM/LXC Badge, VM Name, Status */}
-
-
-
-
{interface_.name}
-
- {vmTypeBadge.label}
-
- {interface_.vm_name && (
-
→ {interface_.vm_name}
- )}
+ {/* Second row: Details - Responsive layout */}
+
+
+
IP Address
+
+ {interface_.addresses.length > 0 ? interface_.addresses[0].ip : "N/A"}
-
- {interface_.status.toUpperCase()}
-
- {/* Second row: Details - Responsive layout */}
-
-
-
VMID
-
{interface_.vmid ?? "N/A"}
+
+
Speed
+
+
+ {formatSpeed(interface_.speed)}
+
-
-
Speed
-
-
- {formatSpeed(interface_.speed)}
-
+
+
Traffic
+
+ ↓ {formatBytes(interface_.bytes_recv)}
+ {" / "}
+ ↑ {formatBytes(interface_.bytes_sent)}
+
+ {interface_.mac_address && (
-
Traffic
-
-
↓ {formatBytes(interface_.bytes_recv)}
- {" / "}
-
↑ {formatBytes(interface_.bytes_sent)}
+
MAC
+
+ {interface_.mac_address}
+ )}
+
+
+ )
+ })}
+
+
+
+ )}
- {interface_.mac_address && (
-
-
MAC
-
- {interface_.mac_address}
-
-
+ {networkData.vm_lxc_interfaces && networkData.vm_lxc_interfaces.length > 0 && (
+
+
+
+
+ VM & LXC Network Interfaces
+
+ {networkData.vm_lxc_active_count ?? 0} / {networkData.vm_lxc_total_count ?? 0} Active
+
+
+
+
+
+ {networkData.vm_lxc_interfaces.map((interface_, index) => {
+ const vmTypeBadge = getVMTypeBadge(interface_.vm_type)
+
+ return (
+
setSelectedInterface(interface_)}
+ >
+ {/* First row: Icon, Name, VM/LXC Badge, VM Name, Status */}
+
+
+
+
{interface_.name}
+
+ {vmTypeBadge.label}
+
+ {interface_.vm_name && (
+
→ {interface_.vm_name}
)}
+
+ {interface_.status.toUpperCase()}
+
- )
- })}
-
-
-
- )}
-
+
+ {/* Second row: Details - Responsive layout */}
+
+
+
VMID
+
{interface_.vmid ?? "N/A"}
+
+
+
+
Speed
+
+
+ {formatSpeed(interface_.speed)}
+
+
+
+
+
Traffic
+
+ ↓ {formatBytes(interface_.bytes_recv)}
+ {" / "}
+ ↑ {formatBytes(interface_.bytes_sent)}
+
+
+
+ {interface_.mac_address && (
+
+
MAC
+
+ {interface_.mac_address}
+
+
+ )}
+
+
+ )
+ })}
+
+
+
+ )}
{/* Interface Details Modal */}
)}
{selectedInterface.type === "vm_lxc" && selectedInterface.vm_name && (
diff --git a/AppImage/components/virtual-machines.tsx b/AppImage/components/virtual-machines.tsx
index b0b2cdc..75abecd 100644
--- a/AppImage/components/virtual-machines.tsx
+++ b/AppImage/components/virtual-machines.tsx
@@ -19,7 +19,6 @@ import {
RotateCcw,
StopCircle,
AlertTriangle,
- CheckCircle,
} from "lucide-react"
import useSWR from "swr"
@@ -38,7 +37,6 @@ interface VMData {
netout?: number
diskread?: number
diskwrite?: number
- ipaddress?: string
}
interface VMConfig {
@@ -253,32 +251,6 @@ export function VirtualMachines() {
return false
}, [totalAllocatedMemoryGB, physicalMemoryGB])
- const getMemoryOvercommitBadge = () => {
- if (!physicalMemoryGB) return null
-
- const allocated = Number.parseFloat(totalAllocatedMemoryGB)
- const physical = Number.parseFloat(physicalMemoryGB)
- const overcommitPercent = ((allocated / physical) * 100).toFixed(0)
-
- if (allocated > physical) {
- return {
- color: "bg-yellow-500/10 text-yellow-500 border-yellow-500/20",
- icon:
,
- label: "Overcommit",
- message: `${overcommitPercent}% de memoria física`,
- }
- }
-
- return {
- color: "bg-green-500/10 text-green-500 border-green-500/20",
- icon:
,
- label: "Normal",
- message: `${overcommitPercent}% de memoria física`,
- }
- }
-
- const memoryBadge = getMemoryOvercommitBadge()
-
if (isLoading) {
return (
@@ -334,20 +306,22 @@ export function VirtualMachines() {
Total Memory
-
+
+ {isMemoryOvercommit &&
}
+
+
{totalAllocatedMemoryGB} GB
- {memoryBadge && (
-
-
- {memoryBadge.icon}
- {memoryBadge.label}
-
-
{memoryBadge.message}
-
+ {isMemoryOvercommit ? (
+
+
+ Overcommit: Excede memoria física ({physicalMemoryGB} GB)
+
+ ) : (
+ Allocated RAM
)}
@@ -422,13 +396,6 @@ export function VirtualMachines() {
- {vm.ipaddress && (
-
-
IP Address
-
{vm.ipaddress}
-
- )}
-
CPU Usage
@@ -529,12 +496,6 @@ export function VirtualMachines() {
VMID
{selectedVM.vmid}
- {selectedVM.ipaddress && (
-
-
IP Address
-
{selectedVM.ipaddress}
-
- )}
CPU Usage
Uptime
-
{formatUptime(selectedVM.uptime)}
+
{formatUptime(selectedVM.uptime)}