Joseph.Rawlings
68043f0416
Reduce security and reliability risk across the Proxmox extension by removing password exposure from Livewire state, hardening console auth/cookie handling, and improving sanitized error paths. Improve firewall and router performance by adding safer lazy loading, bounded pagination, cross-server compatibility guards, and lower-overhead API workflows. Made-with: Cursor
156 lines
9.6 KiB
PHP
156 lines
9.6 KiB
PHP
<x-proxmox::layout :server="$server" view="backups" :status="$status" :status-polling="true" :status-polling-interval="'30s'">
|
|
<div class="space-y-6" wire:poll.60s.visible="loadBackups">
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex items-center gap-3">
|
|
<div class="flex items-center gap-2 min-w-0">
|
|
<h2 class="text-xl font-semibold break-words">Backup Details</h2>
|
|
<x-proxmox::ui.help-modal title="Backup Details" icon="ri-database-2-line">
|
|
<x-slot:description>
|
|
View and manage backups for this virtual machine. Backups are stored on the hypervisor node and can be restored or deleted as needed.
|
|
</x-slot:description>
|
|
<x-slot:details>
|
|
<div class="space-y-2.5">
|
|
<p class="block font-sans text-xs font-normal leading-relaxed text-base/75">
|
|
<span class="font-semibold text-base/90">Restore:</span> Restores the virtual machine to the state captured in the backup. The panel will attempt a safe stop automatically before restore.
|
|
</p>
|
|
<p class="block font-sans text-xs font-normal leading-relaxed text-base/75">
|
|
<span class="font-semibold text-base/90">Delete:</span> Permanently removes a backup from the server. This action cannot be undone.
|
|
</p>
|
|
<p class="block font-sans text-xs font-normal leading-relaxed text-base/75">
|
|
<span class="font-semibold text-base/90">Note:</span> Backups include the entire VM state including disk data, configuration, and metadata. Ensure you have sufficient storage quota for backups.
|
|
</p>
|
|
</div>
|
|
</x-slot:details>
|
|
</x-proxmox::ui.help-modal>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<div class="flex flex-row gap-2 w-fit hidden lg:flex">
|
|
<livewire:proxmox.backups.create :server="$server" />
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="bg-background-secondary border border-neutral rounded-lg shadow-sm">
|
|
<div class="overflow-x-auto rounded-lg">
|
|
<table class="min-w-full divide-y divide-neutral/40 text-sm">
|
|
<thead>
|
|
<tr class="text-left text-base font-semibold text-base/70">
|
|
<th class="px-4 py-3">Backup</th>
|
|
<th class="px-4 py-3">Size</th>
|
|
<th class="px-4 py-3">Created At</th>
|
|
<th class="px-4 py-3 text-center">Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-neutral/20 text-base text-base/80">
|
|
@forelse($backups as $backup)
|
|
@php $backup = (object) $backup; @endphp
|
|
<tr wire:key="backup-{{ $backup->volid }}" class="hover:bg-background/60 transition-colors">
|
|
<td class="px-4 py-4 align-middle">
|
|
<div class="flex items-center gap-3">
|
|
<div class="flex items-center justify-center w-8 h-8 rounded-lg bg-primary/10 flex-shrink-0">
|
|
<x-ri-archive-fill class="size-4 text-primary" />
|
|
</div>
|
|
<p class="font-semibold text-base/90 break-words">{{ $backup->notes ?: '—' }}</p>
|
|
</div>
|
|
</td>
|
|
<td class="px-4 py-4 align-middle">
|
|
<span class="font-medium">{{ Illuminate\Support\Number::fileSize($backup->size, 2) }}</span>
|
|
</td>
|
|
<td class="px-4 py-4 align-middle">
|
|
@php
|
|
$fullDate = !empty($backup->ctime) ? date('Y-m-d H:i:s', $backup->ctime) : 'Unknown';
|
|
$relativeTime = !empty($backup->ctime) ? \Carbon\Carbon::createFromTimestamp($backup->ctime)->diffForHumans() : 'Unknown';
|
|
@endphp
|
|
<span class="font-medium cursor-help" title="{{ $fullDate }}">{{ $relativeTime }}</span>
|
|
<span class="block text-xs text-base/50 mt-0.5">{{ $fullDate }}</span>
|
|
</td>
|
|
<td class="px-4 py-4 align-middle">
|
|
<div class="flex flex-wrap items-center justify-center gap-2">
|
|
<button wire:click="promptRestore('{{ $backup->volid }}')"
|
|
wire:loading.attr="disabled"
|
|
wire:target="promptRestore"
|
|
class="bg-background border border-neutral px-3 py-2 rounded-md text-sm font-semibold flex items-center gap-2 hover:bg-background-secondary transition-colors disabled:opacity-50 disabled:cursor-not-allowed">
|
|
<x-ri-checkbox-circle-fill class="w-4 h-4 text-success"/> Restore
|
|
</button>
|
|
<button
|
|
wire:click="promptDelete('{{ $backup->volid }}')"
|
|
wire:loading.attr="disabled"
|
|
wire:target="promptDelete"
|
|
class="bg-background border border-danger/30 px-3 py-2 rounded-md text-sm font-semibold flex items-center gap-2 text-error hover:bg-danger/10 transition-colors disabled:opacity-50 disabled:cursor-not-allowed">
|
|
<x-ri-hourglass-fill wire:loading wire:target="promptDelete" class="w-4 h-4 animate-pulse" />
|
|
<x-ri-delete-bin-fill wire:loading.remove wire:target="promptDelete" class="w-4 h-4"/> Delete
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
@empty
|
|
<tr>
|
|
<td colspan="4" class="px-4 py-8">
|
|
<div class="flex flex-col items-center justify-center py-12 text-center">
|
|
<div class="flex items-center justify-center w-16 h-16 rounded-2xl bg-base/5 mb-4">
|
|
<x-ri-archive-line class="size-8 text-base/20" />
|
|
</div>
|
|
<h3 class="text-sm font-semibold text-base/70 mb-1">No backups found</h3>
|
|
<p class="text-xs text-base/50 max-w-sm">Backups capture the full state of your VM including disk data and configuration. Create one to protect against data loss.</p>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
@endforelse
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
@if($showRestore)
|
|
<x-modal id="restore-backup" title="Restore Backup" open>
|
|
<div class="flex flex-col gap-4">
|
|
<x-form.checkbox label="I'm sure I want to restore this backup and delete all current data. This process is irreversible. "
|
|
wire:model="confirmRestore" name="confirmRestore" required />
|
|
<div class="text-sm font-semibold">
|
|
The panel will try to stop the virtual private server before restoring. If stop fails due to a non-recoverable state, the restore will be blocked.
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex flex-row gap-4 mt-4">
|
|
<x-button.secondary wire:click="$set('showRestore', false)">Cancel</x-button.secondary>
|
|
<x-button.primary wire:click="restoreBackup" wire:loading.attr="disabled" wire:loading.class="opacity-50"
|
|
wire:target="restoreBackup">
|
|
<x-loading target="restoreBackup" />
|
|
<div wire:loading.remove wire:target="restoreBackup">
|
|
Restore
|
|
</div>
|
|
</x-button.primary>
|
|
</div>
|
|
</x-modal>
|
|
@endif
|
|
|
|
@if($showDelete)
|
|
<x-modal id="delete-backup" title="Delete Backup" open>
|
|
<div class="flex flex-col gap-4">
|
|
<x-form.checkbox label="I understand this backup will be permanently deleted and cannot be recovered."
|
|
wire:model="confirmDelete" name="confirmDelete" required />
|
|
<div class="text-sm font-semibold text-error">
|
|
Ensure you have downloaded or verified this backup before deleting.
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex flex-row gap-4 mt-4">
|
|
<x-button.secondary wire:click="$set('showDelete', false)">Cancel</x-button.secondary>
|
|
<x-button.danger wire:click="deleteBackup" wire:loading.attr="disabled" wire:loading.class="opacity-50"
|
|
wire:target="deleteBackup">
|
|
<x-loading target="deleteBackup" />
|
|
<div wire:loading.remove wire:target="deleteBackup">
|
|
Delete Backup
|
|
</div>
|
|
</x-button.danger>
|
|
</div>
|
|
</x-modal>
|
|
@endif
|
|
|
|
</x-proxmox::layout>
|
|
|