Update virtual-machines.tsx

This commit is contained in:
MacRimi
2026-02-03 16:50:29 +01:00
parent d3ef3c7452
commit c44e0afb81

View File

@@ -1547,90 +1547,90 @@ const handleDownloadLogs = async (vmid: number, vmName: string) => {
</div> </div>
</div> </div>
</CardContent> </CardContent>
</Card> </Card>
</div> </div>
{/* Desktop Backups Section - Always visible */} {/* Desktop Backups Section - Always visible */}
<Card className="border border-border bg-card/50"> <Card className="border border-border bg-card/50">
<CardContent className="p-4"> <CardContent className="p-4">
<div className="flex items-center justify-between mb-4"> <div className="flex items-center justify-between mb-4">
<h3 className="text-sm font-semibold text-muted-foreground uppercase tracking-wide"> <h3 className="text-sm font-semibold text-muted-foreground uppercase tracking-wide">
Backups Backups
</h3> </h3>
<Button <Button
variant="outline" variant="outline"
size="sm" size="sm"
onClick={() => selectedVM && fetchVmBackups(selectedVM.vmid)} onClick={() => selectedVM && fetchVmBackups(selectedVM.vmid)}
className="text-xs bg-transparent" className="text-xs bg-transparent"
> >
Refresh Refresh
</Button> </Button>
</div> </div>
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4"> <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
{/* Create Backup */} {/* Create Backup */}
<div className="space-y-3"> <div className="space-y-3">
<label className="text-xs text-muted-foreground block">Create New Backup</label> <label className="text-xs text-muted-foreground block">Create New Backup</label>
<div className="flex gap-2"> <div className="flex gap-2">
<Select value={selectedBackupStorage} onValueChange={setSelectedBackupStorage}> <Select value={selectedBackupStorage} onValueChange={setSelectedBackupStorage}>
<SelectTrigger className="flex-1"> <SelectTrigger className="flex-1">
<SelectValue placeholder="Select storage" /> <SelectValue placeholder="Select storage" />
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
{backupStorages.map((storage) => ( {backupStorages.map((storage) => (
<SelectItem key={`desktop-storage-${storage.storage}`} value={storage.storage}> <SelectItem key={`desktop-storage-${storage.storage}`} value={storage.storage}>
{storage.storage} ({storage.avail_human} free) {storage.storage} ({storage.avail_human} free)
</SelectItem> </SelectItem>
))} ))}
</SelectContent> </SelectContent>
</Select> </Select>
<Button <Button
className="bg-amber-600 hover:bg-amber-700 text-white" className="bg-amber-600 hover:bg-amber-700 text-white"
onClick={handleCreateBackup} onClick={handleCreateBackup}
disabled={creatingBackup || !selectedBackupStorage} disabled={creatingBackup || !selectedBackupStorage}
> >
{creatingBackup ? ( {creatingBackup ? (
<Loader2 className="h-4 w-4 animate-spin" /> <Loader2 className="h-4 w-4 animate-spin" />
) : ( ) : (
<Archive className="h-4 w-4" /> <Archive className="h-4 w-4" />
)} )}
</Button> </Button>
</div> </div>
</div> </div>
{/* Backup List */} {/* Backup List */}
<div> <div>
<label className="text-xs text-muted-foreground block mb-2"> <label className="text-xs text-muted-foreground block mb-2">
Existing Backups ({vmBackups.length}) Existing Backups ({vmBackups.length})
</label> </label>
{loadingBackups ? ( {loadingBackups ? (
<div className="text-center py-2 text-muted-foreground text-sm"> <div className="text-center py-2 text-muted-foreground text-sm">
<Loader2 className="h-4 w-4 animate-spin inline mr-2" /> <Loader2 className="h-4 w-4 animate-spin inline mr-2" />
Loading... Loading...
</div> </div>
) : vmBackups.length === 0 ? ( ) : vmBackups.length === 0 ? (
<div className="text-center py-2 text-muted-foreground text-sm"> <div className="text-center py-2 text-muted-foreground text-sm">
No backups found No backups found
</div> </div>
) : ( ) : (
<div className="space-y-1 max-h-32 overflow-y-auto"> <div className="space-y-1 max-h-32 overflow-y-auto">
{vmBackups.map((backup, index) => ( {vmBackups.map((backup, index) => (
<div key={`desktop-backup-top-${backup.volid}-${index}`} className="flex justify-between items-center text-sm p-2 rounded bg-muted/30"> <div key={`desktop-backup-top-${backup.volid}-${index}`} className="flex justify-between items-center text-sm p-2 rounded bg-muted/30">
<span>{backup.date}</span> <span>{backup.date}</span>
<Badge variant="outline" className="text-xs">{backup.size_human}</Badge> <Badge variant="outline" className="text-xs">{backup.size_human}</Badge>
</div> </div>
))} ))}
</div> </div>
)} )}
</div> </div>
</div> </div>
</CardContent> </CardContent>
</Card> </Card>
> {detailsLoading ? ( {detailsLoading ? (
<div className="text-center py-8 text-muted-foreground">Loading configuration...</div> <div className="text-center py-8 text-muted-foreground">Loading configuration...</div>
) : vmDetails?.config ? ( ) : vmDetails?.config ? (
<> <>
<Card className="border border-border bg-card/50"> <Card className="border border-border bg-card/50">
<CardContent className="p-4"> <CardContent className="p-4">
<div className="flex items-center justify-between mb-4"> <div className="flex items-center justify-between mb-4">