Update virtual-machines.tsx

AppImage/components/virtual-machines.tsx

@@ -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) => (
+                          .map((netKey) => {
-                            <div key={netKey} className="col-span-1">
+                            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">
+                                <div className="font-medium text-green-500 text-sm break-all font-mono mb-2">
-                                {vmDetails.config[netKey]}
+                                  {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>
+                            )
+                          })}
                         {vmDetails.config.nameserver && (
                           <div>
                             <div className="text-xs text-muted-foreground mb-1">DNS Nameserver</div>