From df588f25bfcabd39f972bb95bd49c3fe57599e6c Mon Sep 17 00:00:00 2001
From: MacRimi <ricoextincion@gmail.com>
Date: Tue, 3 Feb 2026 18:14:40 +0100
Subject: [PATCH] Update virtual-machines.tsx

---
 AppImage/components/virtual-machines.tsx | 435 +----------------------
 1 file changed, 11 insertions(+), 424 deletions(-)

diff --git a/AppImage/components/virtual-machines.tsx b/AppImage/components/virtual-machines.tsx
index dd255447..c7e64115 100644
--- a/AppImage/components/virtual-machines.tsx
+++ b/AppImage/components/virtual-machines.tsx
@@ -8,9 +8,7 @@ import { Badge } from "./ui/badge"
 import { Progress } from "./ui/progress"
 import { Button } from "./ui/button"
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from "./ui/dialog"
-import { Server, Play, Square, Cpu, MemoryStick, HardDrive, Network, Power, RotateCcw, StopCircle, Container, ChevronDown, ChevronUp, Terminal, Archive, Plus, Loader2, Clock, Database } from 'lucide-react'
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./ui/select"
-import { ScrollArea } from "./ui/scroll-area"
+import { Server, Play, Square, Cpu, MemoryStick, HardDrive, Network, Power, RotateCcw, StopCircle, Container, ChevronDown, ChevronUp, Terminal } from 'lucide-react'
 import useSWR from "swr"
 import { MetricsView } from "./metrics-dialog"
 import { LxcTerminalModal } from "./lxc-terminal-modal"
@@ -123,29 +121,6 @@ interface VMDetails extends VMData {
   }
 }
 
-interface BackupStorage {
-  storage: string
-  type: string
-  content: string
-  total: number
-  used: number
-  avail: number
-  total_human?: string
-  used_human?: string
-  avail_human?: string
-}
-
-interface VMBackup {
-  volid: string
-  storage: string
-  type: string
-  size: number
-  size_human: string
-  timestamp: number
-  date: string
-  notes?: string
-}
-
 const fetcher = async (url: string) => {
   return fetchApi(url)
 }
@@ -296,14 +271,6 @@ export function VirtualMachines() {
   const [ipsLoaded, setIpsLoaded] = useState(false)
   const [loadingIPs, setLoadingIPs] = useState(false)
   const [networkUnit, setNetworkUnit] = useState<"Bytes" | "Bits">("Bytes")
-  
-  // Backup states
-  const [vmBackups, setVmBackups] = useState<VMBackup[]>([])
-  const [backupStorages, setBackupStorages] = useState<BackupStorage[]>([])
-  const [selectedBackupStorage, setSelectedBackupStorage] = useState<string>("")
-  const [loadingBackups, setLoadingBackups] = useState(false)
-  const [creatingBackup, setCreatingBackup] = useState(false)
-  const [modalPage, setModalPage] = useState(0)
 
   useEffect(() => {
     const fetchLXCIPs = async () => {
@@ -380,13 +347,7 @@ export function VirtualMachines() {
     setShowNotes(false)
     setIsEditingNotes(false)
     setEditedNotes("")
-    setModalPage(0)
     setDetailsLoading(true)
-    
-    // Load backups and storages immediately (independent of config)
-    fetchBackupStorages()
-    fetchVmBackups(vm.vmid)
-    
     try {
       const details = await fetchApi(`/api/vms/${vm.vmid}`)
       setVMDetails(details)
@@ -405,54 +366,6 @@ export function VirtualMachines() {
     setCurrentView("main")
   }
 
-  // Backup functions
-  const fetchBackupStorages = async () => {
-    try {
-      const response = await fetchApi("/api/backup-storages")
-      if (response.storages) {
-        setBackupStorages(response.storages)
-        if (response.storages.length > 0 && !selectedBackupStorage) {
-          setSelectedBackupStorage(response.storages[0].storage)
-        }
-      }
-    } catch (error) {
-      console.error("Error fetching backup storages:", error)
-    }
-  }
-
-  const fetchVmBackups = async (vmid: number) => {
-    setLoadingBackups(true)
-    try {
-      const response = await fetchApi(`/api/vms/${vmid}/backups`)
-      if (response.backups) {
-        setVmBackups(response.backups)
-      }
-    } catch (error) {
-      console.error("Error fetching VM backups:", error)
-      setVmBackups([])
-    } finally {
-      setLoadingBackups(false)
-    }
-  }
-
-  const handleCreateBackup = async () => {
-    if (!selectedVM || !selectedBackupStorage) return
-    
-    setCreatingBackup(true)
-    try {
-      await fetchApi(`/api/vms/${selectedVM.vmid}/backup`, {
-        method: "POST",
-        body: JSON.stringify({ storage: selectedBackupStorage }),
-      })
-      // Refresh backups list after creation
-      setTimeout(() => fetchVmBackups(selectedVM.vmid), 2000)
-    } catch (error) {
-      console.error("Error creating backup:", error)
-    } finally {
-      setCreatingBackup(false)
-    }
-  }
-
   const handleVMControl = async (vmid: number, action: string) => {
     setControlLoading(true)
     try {
@@ -613,7 +526,7 @@ const handleDownloadLogs = async (vmid: number, vmName: string) => {
   }
 
   const isHTML = (str: string): boolean => {
-    const htmlRegex = new RegExp('<\\/?[a-z][\\s\\S]*>', 'i')
+    const htmlRegex = /<\/?[a-z][\s\S]*>/i
     return htmlRegex.test(str)
   }
 
@@ -1231,246 +1144,12 @@ const handleDownloadLogs = async (vmid: number, vmName: string) => {
                 </DialogTitle>
               </DialogHeader>
 
-              <div className="flex-1 overflow-hidden">
-                {/* Mobile carousel */}
-                <div className="sm:hidden h-full flex flex-col">
-                  <div className="flex-1 relative overflow-hidden">
-                    {/* Page 0: Main content */}
-                    <div 
-                      className={`absolute inset-0 px-6 py-4 overflow-y-auto transition-all duration-300 ease-in-out ${
-                        modalPage === 0 
-                          ? 'opacity-100 translate-x-0' 
-                          : 'opacity-0 -translate-x-full pointer-events-none'
-                      }`}
-                    >
-                      <div className="space-y-4">
-                        {selectedVM && (
-                          <>
-                            <div key={`mobile-metrics-${selectedVM.vmid}`}>
-                              <Card
-                                className="cursor-pointer rounded-lg border border-black/10 dark:border-white/10 bg-black/5 dark:bg-white/5 transition-colors group"
-                                onClick={handleMetricsClick}
-                              >
-                                <CardContent className="p-4">
-                                  <div className="grid grid-cols-2 gap-4">
-                                    {/* CPU */}
-                                    <div>
-                                      <div className="text-xs text-muted-foreground mb-2">CPU Usage</div>
-                                      <div className={`text-base font-semibold mb-2 ${getUsageColor(selectedVM.cpu * 100)}`}>
-                                        {(selectedVM.cpu * 100).toFixed(1)}%
-                                      </div>
-                                      <Progress value={selectedVM.cpu * 100} className="h-2" />
-                                    </div>
-                                    {/* Memory */}
-                                    <div>
-                                      <div className="text-xs text-muted-foreground mb-2">Memory</div>
-                                      <div className={`text-base font-semibold mb-2 ${getUsageColor((selectedVM.mem / selectedVM.maxmem) * 100)}`}>
-                                        {(selectedVM.mem / 1024 ** 3).toFixed(1)} / {(selectedVM.maxmem / 1024 ** 3).toFixed(1)} GB
-                                      </div>
-                                      <Progress value={(selectedVM.mem / selectedVM.maxmem) * 100} className="h-2" />
-                                    </div>
-                                    {/* Disk */}
-                                    <div>
-                                      <div className="text-xs text-muted-foreground mb-2">Disk</div>
-                                      <div className={`text-base font-semibold mb-2 ${getUsageColor((selectedVM.disk / selectedVM.maxdisk) * 100)}`}>
-                                        {(selectedVM.disk / 1024 ** 3).toFixed(1)} / {(selectedVM.maxdisk / 1024 ** 3).toFixed(1)} GB
-                                      </div>
-                                      <Progress value={(selectedVM.disk / selectedVM.maxdisk) * 100} className="h-2" />
-                                    </div>
-                                    {/* Disk I/O */}
-                                    <div>
-                                      <div className="text-xs text-muted-foreground mb-2">Disk I/O</div>
-                                      <div className="space-y-1">
-                                        <div className="text-sm text-green-500">↓ {((selectedVM.diskread || 0) / 1024 ** 2).toFixed(2)} MB</div>
-                                        <div className="text-sm text-blue-500">↑ {((selectedVM.diskwrite || 0) / 1024 ** 2).toFixed(2)} MB</div>
-                                      </div>
-                                    </div>
-                                    {/* Network I/O */}
-                                    <div>
-                                      <div className="text-xs text-muted-foreground mb-2">Network I/O</div>
-                                      <div className="space-y-1">
-                                        <div className="text-sm text-green-500">↓ {formatNetworkTraffic(selectedVM.netin || 0, networkUnit)}</div>
-                                        <div className="text-sm text-blue-500">↑ {formatNetworkTraffic(selectedVM.netout || 0, networkUnit)}</div>
-                                      </div>
-                                    </div>
-                                    {/* OS Icon */}
-                                    <div className="flex items-center justify-center">
-                                      {getOSIcon(vmDetails?.os_info, selectedVM.type)}
-                                    </div>
-                                  </div>
-                                </CardContent>
-                              </Card>
-                            </div>
-
-                            {/* Resources Section Mobile */}
-                            {vmDetails?.config && (
-                              <Card className="border border-border bg-card/50">
-                                <CardContent className="p-4">
-                                  <div className="flex items-center gap-2 mb-4">
-                                    <div className="p-1.5 rounded-md bg-blue-500/10">
-                                      <Cpu className="h-4 w-4 text-blue-500" />
-                                    </div>
-                                    <h3 className="text-sm font-semibold text-foreground">Resources</h3>
-                                  </div>
-                                  <div className="grid grid-cols-3 gap-3">
-                                    {vmDetails.config.cores && (
-                                      <div>
-                                        <div className="text-xs text-muted-foreground mb-1">CPU Cores</div>
-                                        <div className="font-semibold text-blue-500">{vmDetails.config.cores}</div>
-                                      </div>
-                                    )}
-                                    {vmDetails.config.memory && (
-                                      <div>
-                                        <div className="text-xs text-muted-foreground mb-1">Memory</div>
-                                        <div className="font-semibold text-blue-500">{vmDetails.config.memory} MB</div>
-                                      </div>
-                                    )}
-                                    {vmDetails.config.swap !== undefined && (
-                                      <div>
-                                        <div className="text-xs text-muted-foreground mb-1">Swap</div>
-                                        <div className="font-semibold text-foreground">{vmDetails.config.swap} MB</div>
-                                      </div>
-                                    )}
-                                  </div>
-                                  {selectedVM?.type === "lxc" && vmDetails?.lxc_ip_info && vmDetails.lxc_ip_info.real_ips.length > 0 && (
-                                    <div className="mt-4 pt-4 border-t border-border">
-                                      <h4 className="text-sm font-semibold text-muted-foreground mb-2">IP Addresses</h4>
-                                      <div className="flex flex-wrap gap-2">
-                                        {vmDetails.lxc_ip_info.real_ips.map((ip, index) => (
-                                          <Badge key={`mobile-ip-${ip}-${index}`} variant="outline" className="bg-green-500/10 text-green-500 border-green-500/20">
-                                            {ip}
-                                          </Badge>
-                                        ))}
-                                      </div>
-                                    </div>
-                                  )}
-                                </CardContent>
-                              </Card>
-                            )}
-                          </>
-                        )}
-                      </div>
-                    </div>
-
-                    {/* Page 1: Backups */}
-                    <div 
-                      className={`absolute inset-0 px-6 py-4 overflow-y-auto transition-all duration-300 ease-in-out ${
-                        modalPage === 1 
-                          ? 'opacity-100 translate-x-0' 
-                          : 'opacity-0 translate-x-full pointer-events-none'
-                      }`}
-                    >
-                      <div className="space-y-4">
-                        <Card className="border border-border bg-card/50 h-full">
-                          <CardContent className="p-4">
-                            {/* Header */}
-                            <div className="flex items-center gap-2 mb-4">
-                              <div className="p-1.5 rounded-md bg-amber-500/10">
-                                <Archive className="h-4 w-4 text-amber-500" />
-                              </div>
-                              <h3 className="text-sm font-semibold text-foreground">Backups</h3>
-                            </div>
-                            
-                            {/* Create Backup */}
-                            <div className="space-y-3 mb-4">
-                              <Select value={selectedBackupStorage} onValueChange={setSelectedBackupStorage}>
-                                <SelectTrigger className="w-full h-10">
-                                  <SelectValue placeholder="Select storage" />
-                                </SelectTrigger>
-                                <SelectContent>
-                                  {backupStorages.map((storage) => (
-                                    <SelectItem key={`mobile-storage-${storage.storage}`} value={storage.storage}>
-                                      {storage.storage} ({storage.avail_human} free)
-                                    </SelectItem>
-                                  ))}
-                                </SelectContent>
-                              </Select>
-                              <Button 
-                                className="w-full h-10 bg-amber-600 hover:bg-amber-700 text-white"
-                                onClick={handleCreateBackup}
-                                disabled={creatingBackup || !selectedBackupStorage}
-                              >
-                                {creatingBackup ? (
-                                  <Loader2 className="h-4 w-4 animate-spin mr-2" />
-                                ) : (
-                                  <Plus className="h-4 w-4 mr-2" />
-                                )}
-                                Create Backup
-                              </Button>
-                            </div>
-                            
-                            {/* Divider */}
-                            <div className="border-t border-border/50 my-4" />
-                            
-                            {/* Backup List */}
-                            <div className="flex items-center justify-between mb-3">
-                              <span className="text-xs text-muted-foreground">Available backups</span>
-                              <Badge variant="secondary" className="text-xs">{vmBackups.length}</Badge>
-                            </div>
-                            
-                            {loadingBackups ? (
-                              <div className="flex items-center justify-center py-8 text-muted-foreground">
-                                <Loader2 className="h-5 w-5 animate-spin mr-2" />
-                                <span>Loading...</span>
-                              </div>
-                            ) : vmBackups.length === 0 ? (
-                              <div className="flex flex-col items-center justify-center py-8 text-muted-foreground">
-                                <Archive className="h-10 w-10 mb-2 opacity-30" />
-                                <span className="text-sm">No backups found</span>
-                              </div>
-                            ) : (
-                              <div className="space-y-2">
-                                {vmBackups.map((backup, index) => (
-                                  <div 
-                                    key={`mobile-backup-${backup.volid}-${index}`}
-                                    className="flex items-center justify-between p-3 rounded-lg bg-muted/30"
-                                  >
-                                    <div className="flex items-center gap-2">
-                                      <div className="w-2 h-2 rounded-full bg-green-500" />
-                                      <Clock className="h-4 w-4 text-muted-foreground" />
-                                      <span className="text-sm">{backup.date}</span>
-                                    </div>
-                                    <Badge variant="outline" className="text-xs font-mono">
-                                      {backup.size_human}
-                                    </Badge>
-                                  </div>
-                                ))}
-                              </div>
-                            )}
-                          </CardContent>
-                        </Card>
-                      </div>
-                    </div>
-                  </div>
-                  
-                  {/* Pagination dots */}
-                  <div className="flex justify-center items-center gap-3 py-3 border-t border-border/50">
-                    <button
-                      type="button"
-                      onClick={() => setModalPage(0)}
-                      className={`w-2.5 h-2.5 rounded-full transition-all ${
-                        modalPage === 0 ? 'bg-primary scale-110' : 'bg-muted-foreground/30'
-                      }`}
-                      aria-label="Main info"
-                    />
-                    <button
-                      type="button"
-                      onClick={() => setModalPage(1)}
-                      className={`w-2.5 h-2.5 rounded-full transition-all ${
-                        modalPage === 1 ? 'bg-primary scale-110' : 'bg-muted-foreground/30'
-                      }`}
-                      aria-label="Backups"
-                    />
-                  </div>
-                </div>
-
-                {/* Desktop layout */}
-                <div className="hidden sm:block overflow-y-auto px-6 py-4" style={{ maxHeight: 'calc(100vh - 260px)' }}>
-                  <div className="space-y-4">
-                    {selectedVM && (
-                      <>
-                        <div key={`metrics-${selectedVM.vmid}`}>
-                          <Card
+              <div className="flex-1 overflow-y-auto px-6 py-4">
+                <div className="space-y-6">
+                  {selectedVM && (
+                    <>
+                      <div key={`metrics-${selectedVM.vmid}`}>
+                        <Card
                           className="cursor-pointer rounded-lg border border-black/10 dark:border-white/10 sm:border-border max-sm:bg-black/5 max-sm:dark:bg-white/5 sm:bg-card sm:hover:bg-black/5 sm:dark:hover:bg-white/5 transition-colors group"
                           onClick={handleMetricsClick}
                         >
@@ -1556,95 +1235,6 @@ const handleDownloadLogs = async (vmid: number, vmName: string) => {
                         </Card>
                       </div>
 
-                      {/* Backups Section - Always visible, loads independently */}
-                      <Card className="border border-border bg-card/50">
-                        <CardContent className="p-4">
-                          {/* Header */}
-                          <div className="flex items-center justify-between mb-4">
-                            <div className="flex items-center gap-2">
-                              <div className="p-1.5 rounded-md bg-amber-500/10">
-                                <Archive className="h-4 w-4 text-amber-500" />
-                              </div>
-                              <h3 className="text-sm font-semibold text-foreground">Backups</h3>
-                            </div>
-                          </div>
-                          
-                          {/* Create Backup Section */}
-                          <div className="flex items-center gap-2 mb-4">
-                            <Select value={selectedBackupStorage} onValueChange={setSelectedBackupStorage}>
-                              <SelectTrigger className="flex-1 h-9 text-sm">
-                                <SelectValue placeholder="Select storage" />
-                              </SelectTrigger>
-                              <SelectContent>
-                                {backupStorages.map((storage) => (
-                                  <SelectItem key={`backup-storage-${storage.storage}`} value={storage.storage}>
-                                    <span className="flex items-center gap-2">
-                                      <Database className="h-3.5 w-3.5 text-muted-foreground" />
-                                      {storage.storage}
-                                      <span className="text-xs text-muted-foreground">({storage.avail_human} free)</span>
-                                    </span>
-                                  </SelectItem>
-                                ))}
-                              </SelectContent>
-                            </Select>
-                            <Button 
-                              size="sm"
-                              className="h-9 bg-amber-600 hover:bg-amber-700 text-white gap-1.5"
-                              onClick={handleCreateBackup}
-                              disabled={creatingBackup || !selectedBackupStorage}
-                            >
-                              {creatingBackup ? (
-                                <Loader2 className="h-4 w-4 animate-spin" />
-                              ) : (
-                                <>
-                                  <Plus className="h-4 w-4" />
-                                  <span className="hidden sm:inline">Create</span>
-                                </>
-                              )}
-                            </Button>
-                          </div>
-                          
-                          {/* Divider */}
-                          <div className="border-t border-border/50 my-3" />
-                          
-                          {/* Backup List */}
-                          <div className="flex items-center justify-between mb-2">
-                            <span className="text-xs text-muted-foreground">Available backups</span>
-                            <Badge variant="secondary" className="text-xs h-5">{vmBackups.length}</Badge>
-                          </div>
-                          
-                          {loadingBackups ? (
-                            <div className="flex items-center justify-center py-6 text-muted-foreground">
-                              <Loader2 className="h-4 w-4 animate-spin mr-2" />
-                              <span className="text-sm">Loading backups...</span>
-                            </div>
-                          ) : vmBackups.length === 0 ? (
-                            <div className="flex flex-col items-center justify-center py-6 text-muted-foreground">
-                              <Archive className="h-8 w-8 mb-2 opacity-30" />
-                              <span className="text-sm">No backups found</span>
-                            </div>
-                          ) : (
-                            <div className="space-y-1.5 max-h-[180px] overflow-y-auto pr-1">
-                              {vmBackups.map((backup, index) => (
-                                <div 
-                                  key={`backup-${backup.volid}-${index}`}
-                                  className="flex items-center justify-between p-2.5 rounded-lg bg-muted/30 hover:bg-muted/50 transition-colors"
-                                >
-                                  <div className="flex items-center gap-2">
-                                    <div className="w-1.5 h-1.5 rounded-full bg-green-500" />
-                                    <Clock className="h-3.5 w-3.5 text-muted-foreground" />
-                                    <span className="text-sm text-foreground">{backup.date}</span>
-                                  </div>
-                                  <Badge variant="outline" className="text-xs font-mono">
-                                    {backup.size_human}
-                                  </Badge>
-                                </div>
-                              ))}
-                            </div>
-                          )}
-                        </CardContent>
-                      </Card>
-
                       {detailsLoading ? (
                         <div className="text-center py-8 text-muted-foreground">Loading configuration...</div>
                       ) : vmDetails?.config ? (
@@ -1652,12 +1242,9 @@ const handleDownloadLogs = async (vmid: number, vmName: string) => {
                           <Card className="border border-border bg-card/50" key={`config-${selectedVM.vmid}`}>
                             <CardContent className="p-4">
                               <div className="flex items-center justify-between mb-4">
-                                <div className="flex items-center gap-2">
-                                  <div className="p-1.5 rounded-md bg-blue-500/10">
-                                    <Cpu className="h-4 w-4 text-blue-500" />
-                                  </div>
-                                  <h3 className="text-sm font-semibold text-foreground">Resources</h3>
-                                </div>
+                                <h3 className="text-sm font-semibold text-muted-foreground uppercase tracking-wide">
+                                  Resources
+                                </h3>
                                 <div className="flex gap-2">
                                   <Button
                                     variant="outline"