Update virtual-machines.tsx

AppImage/components/virtual-machines.tsx

@@ -10,7 +10,6 @@ import {
   Server,
   Play,
   Square,
-  Monitor,
   Cpu,
   MemoryStick,
   HardDrive,
@@ -94,6 +93,38 @@ const formatBytes = (bytes: number | undefined): string => {
   return `${(bytes / Math.pow(k, i)).toFixed(2)} ${sizes[i]}`
 }
 
+const formatUptime = (seconds: number) => {
+  const days = Math.floor(seconds / 86400)
+  const hours = Math.floor((seconds % 86400) / 3600)
+  const minutes = Math.floor((seconds % 3600) / 60)
+  return `${days}d ${hours}h ${minutes}m`
+}
+
+const extractIPFromConfig = (config?: VMConfig): string => {
+  if (!config) return "DHCP"
+
+  // Check net0, net1, net2, etc.
+  for (let i = 0; i < 10; i++) {
+    const netKey = `net${i}`
+    const netConfig = config[netKey]
+
+    if (netConfig && typeof netConfig === "string") {
+      // Look for ip=x.x.x.x/xx pattern
+      const ipMatch = netConfig.match(/ip=([0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3})(\/\d+)?/)
+      if (ipMatch) {
+        return ipMatch[1] // Return just the IP without CIDR
+      }
+
+      // Check if it's explicitly DHCP
+      if (netConfig.includes("ip=dhcp")) {
+        return "DHCP"
+      }
+    }
+  }
+
+  return "DHCP"
+}
+
 export function VirtualMachines() {
   const {
     data: vmData,
@@ -218,13 +249,6 @@ export function VirtualMachines() {
     return { color: "bg-purple-500/10 text-purple-500 border-purple-500/20", label: "VM" }
   }
 
-  const formatUptime = (seconds: number) => {
-    const days = Math.floor(seconds / 86400)
-    const hours = Math.floor((seconds % 86400) / 3600)
-    const minutes = Math.floor((seconds % 3600) / 60)
-    return `${days}d ${hours}h ${minutes}m`
-  }
-
   // Safe data handling with default empty array
   const safeVMData = vmData || []
 
@@ -326,28 +350,6 @@ export function VirtualMachines() {
           </CardContent>
         </Card>
 
-        <Card className="bg-card border-border">
-          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-            <CardTitle className="text-sm font-medium text-muted-foreground">Average Load</CardTitle>
-            <Monitor className="h-4 w-4 text-muted-foreground" />
-          </CardHeader>
-          <CardContent>
-            <div className="text-2xl font-bold text-foreground">
-              {safeVMData.filter((vm) => vm.status === "running").length > 0
-                ? (
-                    (safeVMData.reduce((sum, vm) => sum + (vm.cpu || 0), 0) /
-                      safeVMData.filter((vm) => vm.status === "running").length) *
-                    100
-                  ).toFixed(0)
-                : 0}
-              %
-            </div>
-            <p className="text-xs text-muted-foreground mt-2">Average resource utilization</p>
-          </CardContent>
-        </Card>
-      </div>
-
-      {/* Virtual Machines List */}
         <Card className="bg-card border-border">
           <CardHeader>
             <CardTitle className="text-foreground flex items-center">
@@ -366,6 +368,7 @@ export function VirtualMachines() {
                   const memGB = (vm.mem / 1024 ** 3).toFixed(1)
                   const maxMemGB = (vm.maxmem / 1024 ** 3).toFixed(1)
                   const typeBadge = getTypeBadge(vm.type)
+                  const vmIP = extractIPFromConfig(vm.config)
 
                   return (
                     <div
@@ -384,6 +387,7 @@ export function VirtualMachines() {
                               </Badge>
                             </div>
                             <div className="text-sm text-muted-foreground">ID: {vm.vmid}</div>
+                            <div className="text-sm text-muted-foreground">IP: {vmIP}</div>
                           </div>
                         </div>
 
@@ -770,5 +774,6 @@ export function VirtualMachines() {
           </DialogContent>
         </Dialog>
       </div>
+    </div>
   )
 }