Update AppImage

AppImage/components/virtual-machines.tsx

@@ -1,147 +1,105 @@
 "use client"
 
+import { useState, useEffect } from "react"
 import { Card, CardContent, CardHeader, CardTitle } from "./ui/card"
 import { Badge } from "./ui/badge"
 import { Progress } from "./ui/progress"
-import { Server, Play, Square, RotateCcw, Monitor, Cpu, MemoryStick } from "lucide-react"
+import { Server, Play, Square, Monitor, Cpu, MemoryStick, AlertCircle } from "lucide-react"
 
-const virtualMachines = [
-  {
-    id: 100,
-    name: "web-server-01",
-    type: "vm",
-    status: "running",
-    os: "Ubuntu 22.04",
-    cpu: 4,
-    memory: 8192,
-    disk: 50,
-    uptime: "15d 7h 23m",
-    cpuUsage: 45,
-    memoryUsage: 62,
-    diskUsage: 78,
-  },
-  {
-    id: 101,
-    name: "database-01",
-    type: "vm",
-    status: "running",
-    os: "CentOS 8",
-    cpu: 8,
-    memory: 16384,
-    disk: 100,
-    uptime: "12d 3h 45m",
-    cpuUsage: 78,
-    memoryUsage: 85,
-    diskUsage: 45,
-  },
-  {
-    id: 102,
-    name: "backup-server",
-    type: "vm",
-    status: "stopped",
-    os: "Debian 11",
-    cpu: 2,
-    memory: 4096,
-    disk: 200,
-    uptime: "0d 0h 0m",
-    cpuUsage: 0,
-    memoryUsage: 0,
-    diskUsage: 23,
-  },
-  {
-    id: 103,
-    name: "dev-environment",
-    type: "vm",
-    status: "running",
-    os: "Ubuntu 20.04",
-    cpu: 6,
-    memory: 12288,
-    disk: 75,
-    uptime: "3d 12h 18m",
-    cpuUsage: 32,
-    memoryUsage: 58,
-    diskUsage: 67,
-  },
-  {
-    id: 104,
-    name: "monitoring-01",
-    type: "vm",
-    status: "running",
-    os: "Alpine Linux",
-    cpu: 2,
-    memory: 2048,
-    disk: 25,
-    uptime: "8d 15h 32m",
-    cpuUsage: 15,
-    memoryUsage: 34,
-    diskUsage: 42,
-  },
-  {
-    id: 105,
-    name: "mail-server",
-    type: "vm",
-    status: "stopped",
-    os: "Ubuntu 22.04",
-    cpu: 4,
-    memory: 8192,
-    disk: 60,
-    uptime: "0d 0h 0m",
-    cpuUsage: 0,
-    memoryUsage: 0,
-    diskUsage: 56,
-  },
-  {
-    id: 200,
-    name: "nginx-proxy",
-    type: "lxc",
-    status: "running",
-    os: "Ubuntu 22.04 LXC",
-    cpu: 1,
-    memory: 512,
-    disk: 8,
-    uptime: "25d 14h 12m",
-    cpuUsage: 8,
-    memoryUsage: 45,
-    diskUsage: 32,
-  },
-  {
-    id: 201,
-    name: "redis-cache",
-    type: "lxc",
-    status: "running",
-    os: "Alpine Linux LXC",
-    cpu: 1,
-    memory: 1024,
-    disk: 4,
-    uptime: "18d 6h 45m",
-    cpuUsage: 12,
-    memoryUsage: 38,
-    diskUsage: 28,
-  },
-  {
-    id: 202,
-    name: "log-collector",
-    type: "lxc",
-    status: "stopped",
-    os: "Debian 11 LXC",
-    cpu: 1,
-    memory: 256,
-    disk: 2,
-    uptime: "0d 0h 0m",
-    cpuUsage: 0,
-    memoryUsage: 0,
-    diskUsage: 15,
-  },
-]
+interface VMData {
+  vmid: number
+  name: string
+  status: string
+  cpu: number
+  mem: number
+  maxmem: number
+  disk: number
+  maxdisk: number
+  uptime: number
+}
+
+const fetchVMData = async (): Promise<VMData[]> => {
+  try {
+    console.log("[v0] Fetching VM data from Flask server...")
+    const response = await fetch("/api/vms", {
+      method: "GET",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      signal: AbortSignal.timeout(5000),
+    })
+
+    if (!response.ok) {
+      throw new Error(`Flask server responded with status: ${response.status}`)
+    }
+
+    const data = await response.json()
+    console.log("[v0] Successfully fetched VM data from Flask:", data)
+    return Array.isArray(data) ? data : []
+  } catch (error) {
+    console.error("[v0] Failed to fetch VM data from Flask server:", error)
+    throw error
+  }
+}
 
 export function VirtualMachines() {
-  const runningVMs = virtualMachines.filter((vm) => vm.status === "running").length
-  const stoppedVMs = virtualMachines.filter((vm) => vm.status === "stopped").length
-  const runningLXC = virtualMachines.filter((vm) => vm.type === "lxc" && vm.status === "running").length
-  const totalVMs = virtualMachines.filter((vm) => vm.type === "vm").length
-  const totalLXC = virtualMachines.filter((vm) => vm.type === "lxc").length
-  const totalCPU = virtualMachines.reduce((sum, vm) => sum + vm.cpu, 0)
-  const totalMemory = virtualMachines.reduce((sum, vm) => sum + vm.memory, 0)
+  const [vmData, setVmData] = useState<VMData[]>([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        setLoading(true)
+        setError(null)
+        const result = await fetchVMData()
+        setVmData(result)
+      } catch (err) {
+        setError("Flask server not available. Please ensure the server is running.")
+      } finally {
+        setLoading(false)
+      }
+    }
+
+    fetchData()
+    const interval = setInterval(fetchData, 30000)
+    return () => clearInterval(interval)
+  }, [])
+
+  if (loading) {
+    return (
+      <div className="space-y-6">
+        <div className="text-center py-8">
+          <div className="text-lg font-medium text-foreground mb-2">Loading VM data...</div>
+        </div>
+      </div>
+    )
+  }
+
+  if (error) {
+    return (
+      <div className="space-y-6">
+        <Card className="bg-red-500/10 border-red-500/20">
+          <CardContent className="p-6">
+            <div className="flex items-center gap-3 text-red-600">
+              <AlertCircle className="h-6 w-6" />
+              <div>
+                <div className="font-semibold text-lg mb-1">Flask Server Not Available</div>
+                <div className="text-sm">
+                  {error || "Unable to connect to the Flask server. Please ensure the server is running and try again."}
+                </div>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    )
+  }
+
+  const runningVMs = vmData.filter((vm) => vm.status === "running").length
+  const stoppedVMs = vmData.filter((vm) => vm.status === "stopped").length
+  const totalCPU = vmData.reduce((sum, vm) => sum + (vm.cpu || 0), 0)
+  const totalMemory = vmData.reduce((sum, vm) => sum + (vm.maxmem || 0), 0)
 
   const getStatusColor = (status: string) => {
     switch (status) {
@@ -161,46 +119,48 @@ export function VirtualMachines() {
       case "stopped":
         return <Square className="h-3 w-3 mr-1" />
       default:
-        return <RotateCcw className="h-3 w-3 mr-1" />
+        return null
     }
   }
 
+  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`
+  }
+
   return (
     <div className="space-y-6">
       {/* VM Overview Cards */}
       <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
         <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">Total VMs & LXC</CardTitle>
+            <CardTitle className="text-sm font-medium text-muted-foreground">Total VMs</CardTitle>
             <Server className="h-4 w-4 text-muted-foreground" />
           </CardHeader>
           <CardContent>
-            <div className="text-2xl font-bold text-foreground">{virtualMachines.length}</div>
+            <div className="text-2xl font-bold text-foreground">{vmData.length}</div>
             <div className="vm-badges mt-2">
               <Badge variant="outline" className="vm-badge bg-green-500/10 text-green-500 border-green-500/20">
-                {runningVMs} VMs
-              </Badge>
-              <Badge variant="outline" className="vm-badge bg-blue-500/10 text-blue-500 border-blue-500/20">
-                {runningLXC} LXC
+                {runningVMs} Running
               </Badge>
               <Badge variant="outline" className="vm-badge bg-red-500/10 text-red-500 border-red-500/20">
                 {stoppedVMs} Stopped
               </Badge>
             </div>
-            <p className="text-xs text-muted-foreground mt-2">
-              {totalVMs} VMs • {totalLXC} LXC
-            </p>
+            <p className="text-xs text-muted-foreground mt-2">Virtual machines configured</p>
           </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">Total CPU Cores</CardTitle>
+            <CardTitle className="text-sm font-medium text-muted-foreground">Total CPU</CardTitle>
             <Cpu className="h-4 w-4 text-muted-foreground" />
           </CardHeader>
           <CardContent>
-            <div className="text-2xl font-bold text-foreground">{totalCPU}</div>
-            <p className="text-xs text-muted-foreground mt-2">Allocated across all VMs and LXC containers</p>
+            <div className="text-2xl font-bold text-foreground">{(totalCPU * 100).toFixed(0)}%</div>
+            <p className="text-xs text-muted-foreground mt-2">Allocated CPU usage</p>
           </CardContent>
         </Card>
 
@@ -210,8 +170,8 @@ export function VirtualMachines() {
             <MemoryStick className="h-4 w-4 text-muted-foreground" />
           </CardHeader>
           <CardContent>
-            <div className="text-2xl font-bold text-foreground">{(totalMemory / 1024).toFixed(1)} GB</div>
-            <p className="text-xs text-muted-foreground mt-2">Allocated RAM across all VMs and LXC containers</p>
+            <div className="text-2xl font-bold text-foreground">{(totalMemory / 1024 ** 3).toFixed(1)} GB</div>
+            <p className="text-xs text-muted-foreground mt-2">Allocated RAM</p>
           </CardContent>
         </Card>
 
@@ -221,7 +181,9 @@ export function VirtualMachines() {
             <Monitor className="h-4 w-4 text-muted-foreground" />
           </CardHeader>
           <CardContent>
-            <div className="text-2xl font-bold text-foreground">42%</div>
+            <div className="text-2xl font-bold text-foreground">
+              {runningVMs > 0 ? ((totalCPU / runningVMs) * 100).toFixed(0) : 0}%
+            </div>
             <p className="text-xs text-muted-foreground mt-2">Average resource utilization</p>
           </CardContent>
         </Card>
@@ -232,84 +194,72 @@ export function VirtualMachines() {
         <CardHeader>
           <CardTitle className="text-foreground flex items-center">
             <Server className="h-5 w-5 mr-2" />
-            Virtual Machines & LXC Containers
+            Virtual Machines
           </CardTitle>
         </CardHeader>
         <CardContent>
-          <div className="space-y-4">
-            {virtualMachines.map((vm) => (
-              <div key={vm.id} className="p-6 rounded-lg border border-border bg-card/50">
-                <div className="flex items-center justify-between mb-4">
-                  <div className="flex items-center space-x-4">
-                    <Server className="h-6 w-6 text-muted-foreground" />
-                    <div>
-                      <div className="font-semibold text-foreground text-lg flex items-center">
-                        {vm.name}
-                        <Badge
-                          variant="outline"
-                          className={`ml-2 text-xs ${
-                            vm.type === "lxc"
-                              ? "bg-blue-500/10 text-blue-500 border-blue-500/20"
-                              : "bg-purple-500/10 text-purple-500 border-purple-500/20"
-                          }`}
-                        >
-                          {vm.type.toUpperCase()}
+          {vmData.length === 0 ? (
+            <div className="text-center py-8 text-muted-foreground">No virtual machines found</div>
+          ) : (
+            <div className="space-y-4">
+              {vmData.map((vm) => {
+                const cpuPercent = (vm.cpu * 100).toFixed(1)
+                const memPercent = vm.maxmem > 0 ? ((vm.mem / vm.maxmem) * 100).toFixed(1) : "0"
+                const memGB = (vm.mem / 1024 ** 3).toFixed(1)
+                const maxMemGB = (vm.maxmem / 1024 ** 3).toFixed(1)
+
+                return (
+                  <div key={vm.vmid} className="p-6 rounded-lg border border-border bg-card/50">
+                    <div className="flex items-center justify-between mb-4">
+                      <div className="flex items-center space-x-4">
+                        <Server className="h-6 w-6 text-muted-foreground" />
+                        <div>
+                          <div className="font-semibold text-foreground text-lg flex items-center">
+                            {vm.name}
+                            <Badge
+                              variant="outline"
+                              className="ml-2 text-xs bg-purple-500/10 text-purple-500 border-purple-500/20"
+                            >
+                              VM
+                            </Badge>
+                          </div>
+                          <div className="text-sm text-muted-foreground">ID: {vm.vmid}</div>
+                        </div>
+                      </div>
+
+                      <div className="flex items-center space-x-3">
+                        <Badge variant="outline" className={getStatusColor(vm.status)}>
+                          {getStatusIcon(vm.status)}
+                          {vm.status.toUpperCase()}
                         </Badge>
                       </div>
-                      <div className="text-sm text-muted-foreground">
-                        ID: {vm.id} • {vm.os}
+                    </div>
+
+                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+                      <div>
+                        <div className="text-sm text-muted-foreground mb-2">CPU Usage</div>
+                        <div className="text-lg font-semibold text-foreground mb-1">{cpuPercent}%</div>
+                        <Progress value={Number.parseFloat(cpuPercent)} className="h-2" />
+                      </div>
+
+                      <div>
+                        <div className="text-sm text-muted-foreground mb-2">Memory Usage</div>
+                        <div className="text-lg font-semibold text-foreground mb-1">
+                          {memGB} GB / {maxMemGB} GB
+                        </div>
+                        <Progress value={Number.parseFloat(memPercent)} className="h-2" />
+                      </div>
+
+                      <div>
+                        <div className="text-sm text-muted-foreground mb-2">Uptime</div>
+                        <div className="text-lg font-semibold text-foreground">{formatUptime(vm.uptime)}</div>
                       </div>
                     </div>
                   </div>
-
-                  <div className="flex items-center space-x-3">
-                    <Badge variant="outline" className={getStatusColor(vm.status)}>
-                      {getStatusIcon(vm.status)}
-                      {vm.status.toUpperCase()}
-                    </Badge>
-                  </div>
-                </div>
-
-                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
-                  <div>
-                    <div className="text-sm text-muted-foreground mb-2">Resources</div>
-                    <div className="space-y-1 text-sm">
-                      <div className="flex justify-between">
-                        <span>CPU:</span>
-                        <span className="font-medium">{vm.cpu} cores</span>
-                      </div>
-                      <div className="flex justify-between">
-                        <span>Memory:</span>
-                        <span className="font-medium">{(vm.memory / 1024).toFixed(1)} GB</span>
-                      </div>
-                      <div className="flex justify-between">
-                        <span>Disk:</span>
-                        <span className="font-medium">{vm.disk} GB</span>
-                      </div>
-                    </div>
-                  </div>
-
-                  <div>
-                    <div className="text-sm text-muted-foreground mb-2">CPU Usage</div>
-                    <div className="text-lg font-semibold text-foreground mb-1">{vm.cpuUsage}%</div>
-                    <Progress value={vm.cpuUsage} className="h-2" />
-                  </div>
-
-                  <div>
-                    <div className="text-sm text-muted-foreground mb-2">Memory Usage</div>
-                    <div className="text-lg font-semibold text-foreground mb-1">{vm.memoryUsage}%</div>
-                    <Progress value={vm.memoryUsage} className="h-2" />
-                  </div>
-
-                  <div>
-                    <div className="text-sm text-muted-foreground mb-2">Uptime</div>
-                    <div className="text-lg font-semibold text-foreground">{vm.uptime}</div>
-                    <div className="text-xs text-muted-foreground mt-1">Disk: {vm.diskUsage}% used</div>
-                  </div>
-                </div>
-              </div>
-            ))}
-          </div>
+                )
+              })}
+            </div>
+          )}
         </CardContent>
       </Card>
     </div>