Update virtual-machines.tsx

This commit is contained in:
MacRimi
2025-10-05 15:18:50 +02:00
parent 7739de5db9
commit dd3523ddd7

View File

@@ -96,6 +96,23 @@ const formatBytes = (bytes: number | undefined): string => {
return `${(bytes / Math.pow(k, i)).toFixed(2)} ${sizes[i]}`
}
const extractIPFromNetConfig = (netConfig: string | undefined): string | null => {
if (!netConfig) return null
// Check for DHCP
if (netConfig.includes("ip=dhcp")) {
return "DHCP"
}
// Extract static IP (format: ip=192.168.0.4/24)
const ipMatch = netConfig.match(/ip=([0-9.]+)/)
if (ipMatch && ipMatch[1]) {
return ipMatch[1]
}
return null
}
export function VirtualMachines() {
const {
data: vmData,
@@ -279,6 +296,12 @@ export function VirtualMachines() {
const memoryBadge = getMemoryOvercommitBadge()
console.log("[v0] VM Data:", vmData)
console.log("[v0] Physical Memory GB:", physicalMemoryGB)
console.log("[v0] Total Allocated Memory GB:", totalAllocatedMemoryGB)
console.log("[v0] Is Memory Overcommit:", isMemoryOvercommit)
console.log("[v0] Memory Badge:", memoryBadge)
if (isLoading) {
return (
<div className="space-y-6">
@@ -577,9 +600,11 @@ export function VirtualMachines() {
<div className="text-xs text-muted-foreground mb-1">Disk I/O</div>
<div className="text-sm font-semibold">
<div className="flex items-center gap-1">
<HardDrive className="h-3 w-3 text-green-500" />
<span className="text-green-500"> {formatBytes(selectedVM.diskread)}</span>
</div>
<div className="flex items-center gap-1">
<HardDrive className="h-3 w-3 text-blue-500" />
<span className="text-blue-500"> {formatBytes(selectedVM.diskwrite)}</span>
</div>
</div>
@@ -588,9 +613,11 @@ export function VirtualMachines() {
<div className="text-xs text-muted-foreground mb-1">Network I/O</div>
<div className="text-sm font-semibold">
<div className="flex items-center gap-1">
<Network className="h-3 w-3 text-green-500" />
<span className="text-green-500"> {formatBytes(selectedVM.netin)}</span>
</div>
<div className="flex items-center gap-1">
<Network className="h-3 w-3 text-blue-500" />
<span className="text-blue-500"> {formatBytes(selectedVM.netout)}</span>
</div>
</div>
@@ -663,16 +690,31 @@ export function VirtualMachines() {
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
{Object.keys(vmDetails.config)
.filter((key) => key.match(/^net\d+$/))
.map((netKey) => (
<div key={netKey} className="col-span-1">
<div className="text-xs text-muted-foreground mb-1">
Network Interface {netKey.replace("net", "")}
.map((netKey) => {
const netConfig = vmDetails.config[netKey]
const extractedIP = extractIPFromNetConfig(netConfig)
return (
<div key={netKey} className="col-span-1 lg:col-span-2">
<div className="text-xs text-muted-foreground mb-1">
Network Interface {netKey.replace("net", "")}
</div>
<div className="font-medium text-green-500 text-sm break-all font-mono mb-2">
{netConfig}
</div>
{extractedIP && selectedVM.type === "lxc" && (
<div className="mt-2">
<Badge
variant="outline"
className="bg-blue-500/10 text-blue-500 border-blue-500/20"
>
IP: {extractedIP}
</Badge>
</div>
)}
</div>
<div className="font-medium text-green-500 text-sm break-all font-mono">
{vmDetails.config[netKey]}
</div>
</div>
))}
)
})}
{vmDetails.config.nameserver && (
<div>
<div className="text-xs text-muted-foreground mb-1">DNS Nameserver</div>