Update AppImage

AppImage/components/metrics-dialog.tsx

@@ -1,64 +1,67 @@
 "use client"
 
 import { useState, useEffect } from "react"
-import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
 import { Button } from "@/components/ui/button"
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
 import { ArrowLeft, Loader2 } from "lucide-react"
 import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Legend } from "recharts"
 
-interface MetricsDialogProps {
-  open: boolean
-  onClose: () => void
+interface MetricsViewProps {
   vmid: number
   vmName: string
   vmType: "qemu" | "lxc"
   metricType: "cpu" | "memory" | "network" | "disk"
+  onBack: () => void
 }
 
 const TIMEFRAME_OPTIONS = [
-  { value: "hour", label: "1 Hora" },
-  { value: "day", label: "24 Horas" },
-  { value: "week", label: "7 Días" },
-  { value: "month", label: "30 Días" },
-  { value: "year", label: "1 Año" },
+  { value: "hour", label: "1 Hour" },
+  { value: "day", label: "24 Hours" },
+  { value: "week", label: "7 Days" },
+  { value: "month", label: "30 Days" },
+  { value: "year", label: "1 Year" },
 ]
 
 const METRIC_TITLES = {
-  cpu: "Uso de CPU",
-  memory: "Uso de Memoria",
-  network: "Tráfico de Red",
-  disk: "I/O de Disco",
+  cpu: "CPU Usage",
+  memory: "Memory Usage",
+  network: "Network Traffic",
+  disk: "Disk I/O",
 }
 
-export function MetricsDialog({ open, onClose, vmid, vmName, vmType, metricType }: MetricsDialogProps) {
+export function MetricsView({ vmid, vmName, vmType, metricType, onBack }: MetricsViewProps) {
   const [timeframe, setTimeframe] = useState("week")
   const [data, setData] = useState<any[]>([])
   const [loading, setLoading] = useState(false)
   const [error, setError] = useState<string | null>(null)
 
   useEffect(() => {
-    if (open) {
     fetchMetrics()
-    }
-  }, [open, vmid, timeframe])
+  }, [vmid, timeframe])
 
   const fetchMetrics = async () => {
     setLoading(true)
     setError(null)
 
+    console.log("[v0] Fetching metrics for VMID:", vmid, "Timeframe:", timeframe, "Type:", vmType)
+
     try {
       const response = await fetch(`http://localhost:8008/api/vms/${vmid}/metrics?timeframe=${timeframe}`)
 
+      console.log("[v0] Response status:", response.status)
+
       if (!response.ok) {
-        throw new Error("Failed to fetch metrics")
+        const errorData = await response.json()
+        console.error("[v0] Error response:", errorData)
+        throw new Error(errorData.error || "Failed to fetch metrics")
       }
 
       const result = await response.json()
+      console.log("[v0] Metrics data received:", result)
 
       // Transform data for charts
       const transformedData = result.data.map((item: any) => ({
-        time: new Date(item.time * 1000).toLocaleString("es-ES", {
+        time: new Date(item.time * 1000).toLocaleString("en-US", {
           month: "short",
           day: "numeric",
           hour: timeframe === "hour" ? "2-digit" : undefined,
@@ -75,10 +78,11 @@ export function MetricsDialog({ open, onClose, vmid, vmName, vmType, metricType
         diskwrite: item.diskwrite ? (item.diskwrite / 1024 / 1024).toFixed(2) : 0,
       }))
 
+      console.log("[v0] Transformed data:", transformedData.length, "points")
       setData(transformedData)
-    } catch (err) {
+    } catch (err: any) {
       console.error("[v0] Error fetching metrics:", err)
-      setError("Error al cargar las métricas")
+      setError(err.message || "Error loading metrics")
     } finally {
       setLoading(false)
     }
@@ -104,7 +108,7 @@ export function MetricsDialog({ open, onClose, vmid, vmName, vmType, metricType
     if (data.length === 0) {
       return (
         <div className="flex items-center justify-center h-96">
-          <p className="text-muted-foreground">No hay datos disponibles</p>
+          <p className="text-muted-foreground">No data available</p>
         </div>
       )
     }
@@ -139,7 +143,7 @@ export function MetricsDialog({ open, onClose, vmid, vmName, vmType, metricType
                 labelStyle={{ color: "hsl(var(--foreground))" }}
               />
               <Legend />
-              <Line type="monotone" dataKey="memory" stroke="#10b981" name="Memoria %" strokeWidth={2} dot={false} />
+              <Line type="monotone" dataKey="memory" stroke="#10b981" name="Memory %" strokeWidth={2} dot={false} />
             </LineChart>
           </ResponsiveContainer>
         )
@@ -159,8 +163,8 @@ export function MetricsDialog({ open, onClose, vmid, vmName, vmType, metricType
                 labelStyle={{ color: "hsl(var(--foreground))" }}
               />
               <Legend />
-              <Line type="monotone" dataKey="netin" stroke="#3b82f6" name="Entrada (MB)" strokeWidth={2} dot={false} />
-              <Line type="monotone" dataKey="netout" stroke="#8b5cf6" name="Salida (MB)" strokeWidth={2} dot={false} />
+              <Line type="monotone" dataKey="netin" stroke="#3b82f6" name="In (MB)" strokeWidth={2} dot={false} />
+              <Line type="monotone" dataKey="netout" stroke="#8b5cf6" name="Out (MB)" strokeWidth={2} dot={false} />
             </LineChart>
           </ResponsiveContainer>
         )
@@ -180,19 +184,12 @@ export function MetricsDialog({ open, onClose, vmid, vmName, vmType, metricType
                 labelStyle={{ color: "hsl(var(--foreground))" }}
               />
               <Legend />
-              <Line
-                type="monotone"
-                dataKey="diskread"
-                stroke="#10b981"
-                name="Lectura (MB)"
-                strokeWidth={2}
-                dot={false}
-              />
+              <Line type="monotone" dataKey="diskread" stroke="#10b981" name="Read (MB)" strokeWidth={2} dot={false} />
               <Line
                 type="monotone"
                 dataKey="diskwrite"
                 stroke="#f59e0b"
-                name="Escritura (MB)"
+                name="Write (MB)"
                 strokeWidth={2}
                 dot={false}
               />
@@ -203,21 +200,20 @@ export function MetricsDialog({ open, onClose, vmid, vmName, vmType, metricType
   }
 
   return (
-    <Dialog open={open} onOpenChange={onClose}>
-      <DialogContent className="max-w-4xl max-h-[90vh] flex flex-col p-0">
+    <div className="flex flex-col h-full">
       {/* Fixed Header */}
-        <DialogHeader className="p-6 pb-4 border-b">
+      <div className="p-6 pb-4 border-b shrink-0">
         <div className="flex items-center justify-between">
           <div className="flex items-center gap-3">
-              <Button variant="ghost" size="icon" onClick={onClose}>
+            <Button variant="ghost" size="icon" onClick={onBack}>
               <ArrowLeft className="h-5 w-5" />
             </Button>
             <div>
-                <DialogTitle className="text-xl">
+              <h2 className="text-xl font-semibold">
                 {METRIC_TITLES[metricType]} - {vmName}
-                </DialogTitle>
+              </h2>
               <p className="text-sm text-muted-foreground mt-1">
-                  VMID: {vmid} • Tipo: {vmType.toUpperCase()}
+                VMID: {vmid} • Type: {vmType.toUpperCase()}
               </p>
             </div>
           </div>
@@ -234,11 +230,10 @@ export function MetricsDialog({ open, onClose, vmid, vmName, vmType, metricType
             </SelectContent>
           </Select>
         </div>
-        </DialogHeader>
+      </div>
 
       {/* Scrollable Content */}
       <div className="flex-1 overflow-y-auto p-6">{renderChart()}</div>
-      </DialogContent>
-    </Dialog>
+    </div>
   )
 }

AppImage/components/virtual-machines.tsx

@@ -20,7 +20,7 @@ import {
   Container,
 } from "lucide-react"
 import useSWR from "swr"
-import { MetricsDialog } from "./metrics-dialog"
+import { MetricsView } from "./metrics-dialog"
 
 interface VMData {
   vmid: number
@@ -185,8 +185,9 @@ export function VirtualMachines() {
   const [controlLoading, setControlLoading] = useState(false)
   const [detailsLoading, setDetailsLoading] = useState(false)
   const [vmConfigs, setVmConfigs] = useState<Record<number, string>>({})
-  const [metricsDialogOpen, setMetricsDialogOpen] = useState(false)
+  const [currentView, setCurrentView] = useState<"main" | "metrics">("main")
   const [selectedMetric, setSelectedMetric] = useState<"cpu" | "memory" | "disk" | "network" | null>(null)
+  const [metricsDialogOpen, setMetricsDialogOpen] = useState(false) // Declare and initialize metricsDialogOpen
 
   useEffect(() => {
     const fetchLXCIPs = async () => {
@@ -219,6 +220,8 @@ export function VirtualMachines() {
 
   const handleVMClick = async (vm: VMData) => {
     setSelectedVM(vm)
+    setCurrentView("main")
+    setSelectedMetric(null)
     setDetailsLoading(true)
     try {
       const response = await fetch(`/api/vms/${vm.vmid}`)
@@ -233,6 +236,17 @@ export function VirtualMachines() {
     }
   }
 
+  const handleMetricClick = (metric: "cpu" | "memory" | "disk" | "network") => {
+    setSelectedMetric(metric)
+    setCurrentView("metrics")
+    setMetricsDialogOpen(true) // Open the metrics dialog
+  }
+
+  const handleBackToMain = () => {
+    setCurrentView("main")
+    setSelectedMetric(null)
+  }
+
   const handleVMControl = async (vmid: number, action: string) => {
     setControlLoading(true)
     try {
@@ -707,9 +721,14 @@ export function VirtualMachines() {
         onOpenChange={() => {
           setSelectedVM(null)
           setVMDetails(null)
+          setCurrentView("main")
+          setSelectedMetric(null)
+          setMetricsDialogOpen(false) // Close the metrics dialog when the VM dialog is closed
         }}
       >
         <DialogContent className="max-w-4xl max-h-[95vh] flex flex-col p-0">
+          {currentView === "main" ? (
+            <>
               <DialogHeader className="pb-4 border-b border-border px-6 pt-6">
                 <DialogTitle className="flex flex-col sm:flex-row sm:items-center gap-3">
                   <div className="flex items-center gap-2">
@@ -751,10 +770,7 @@ export function VirtualMachines() {
                             <div className="text-xs text-muted-foreground mb-1">CPU Usage</div>
                             <div
                               className="cursor-pointer hover:opacity-80 transition-opacity"
-                          onClick={() => {
-                            setSelectedMetric("cpu")
-                            setMetricsDialogOpen(true)
-                          }}
+                              onClick={() => handleMetricClick("cpu")}
                             >
                               <div className={`font-semibold mb-1 ${getUsageColor(selectedVM.cpu * 100)}`}>
                                 {(selectedVM.cpu * 100).toFixed(1)}%
@@ -769,15 +785,13 @@ export function VirtualMachines() {
                             <div className="text-xs text-muted-foreground mb-1">Memory</div>
                             <div
                               className="cursor-pointer hover:opacity-80 transition-opacity"
-                          onClick={() => {
-                            setSelectedMetric("memory")
-                            setMetricsDialogOpen(true)
-                          }}
+                              onClick={() => handleMetricClick("memory")}
                             >
                               <div
                                 className={`font-semibold mb-1 ${getUsageColor((selectedVM.mem / selectedVM.maxmem) * 100)}`}
                               >
-                            {(selectedVM.mem / 1024 ** 3).toFixed(1)} / {(selectedVM.maxmem / 1024 ** 3).toFixed(1)} GB
+                                {(selectedVM.mem / 1024 ** 3).toFixed(1)} / {(selectedVM.maxmem / 1024 ** 3).toFixed(1)}{" "}
+                                GB
                               </div>
                               <Progress
                                 value={(selectedVM.mem / selectedVM.maxmem) * 100}
@@ -789,16 +803,13 @@ export function VirtualMachines() {
                             <div className="text-xs text-muted-foreground mb-1">Disk</div>
                             <div
                               className="cursor-pointer hover:opacity-80 transition-opacity"
-                          onClick={() => {
-                            setSelectedMetric("disk")
-                            setMetricsDialogOpen(true)
-                          }}
+                              onClick={() => handleMetricClick("disk")}
                             >
                               <div
                                 className={`font-semibold mb-1 ${getUsageColor((selectedVM.disk / selectedVM.maxdisk) * 100)}`}
                               >
-                            {(selectedVM.disk / 1024 ** 3).toFixed(1)} / {(selectedVM.maxdisk / 1024 ** 3).toFixed(1)}{" "}
-                            GB
+                                {(selectedVM.disk / 1024 ** 3).toFixed(1)} /{" "}
+                                {(selectedVM.maxdisk / 1024 ** 3).toFixed(1)} GB
                               </div>
                               <Progress
                                 value={(selectedVM.disk / selectedVM.maxdisk) * 100}
@@ -814,10 +825,7 @@ export function VirtualMachines() {
                             <div className="text-xs text-muted-foreground mb-1">Disk I/O</div>
                             <div
                               className="cursor-pointer hover:opacity-80 transition-opacity"
-                          onClick={() => {
-                            setSelectedMetric("disk")
-                            setMetricsDialogOpen(true)
-                          }}
+                              onClick={() => handleMetricClick("disk")}
                             >
                               <div className="text-sm text-green-500 flex items-center gap-1">
                                 <span>↓</span>
@@ -833,10 +841,7 @@ export function VirtualMachines() {
                             <div className="text-xs text-muted-foreground mb-1">Network I/O</div>
                             <div
                               className="cursor-pointer hover:opacity-80 transition-opacity"
-                          onClick={() => {
-                            setSelectedMetric("network")
-                            setMetricsDialogOpen(true)
-                          }}
+                              onClick={() => handleMetricClick("network")}
                             >
                               <div className="text-sm text-green-500 flex items-center gap-1">
                                 <span>↓</span>
@@ -927,7 +932,9 @@ export function VirtualMachines() {
                               {vmDetails.config.nameserver && (
                                 <div>
                                   <div className="text-xs text-muted-foreground mb-1">DNS Nameserver</div>
-                              <div className="font-medium text-foreground font-mono">{vmDetails.config.nameserver}</div>
+                                  <div className="font-medium text-foreground font-mono">
+                                    {vmDetails.config.nameserver}
+                                  </div>
                                 </div>
                               )}
                               {vmDetails.config.searchdomain && (
@@ -1052,23 +1059,22 @@ export function VirtualMachines() {
                   </Button>
                 </div>
               </div>
-        </DialogContent>
-      </Dialog>
-
-      {/* MetricsDialog component usage */}
-      {selectedVM && selectedMetric && (
-        <MetricsDialog
-          open={metricsDialogOpen}
-          onClose={() => {
-            setMetricsDialogOpen(false)
-            setSelectedMetric(null)
-          }}
+            </>
+          ) : (
+            /* Render metrics view when currentView is "metrics" */
+            selectedVM &&
+            selectedMetric && (
+              <MetricsView
                 vmid={selectedVM.vmid}
                 vmName={selectedVM.name}
-          vmType={selectedVM.type}
+                vmType={selectedVM.type as "qemu" | "lxc"}
                 metricType={selectedMetric}
+                onBack={handleBackToMain}
               />
+            )
           )}
+        </DialogContent>
+      </Dialog>
     </div>
   )
 }