Joseph.Rawlings
a90aba582d
- Updated server card component to use a more compact layout with adjusted spacing and styling. - Enhanced server status display with improved icon sizes and colors. - Modified quick info row to use smaller text and adjusted labels for clarity. - Refined server configuration grid for better alignment and spacing. - Updated modal z-index values for consistent layering across various modals in statistics, storage, subdomain, and system views. - General styling improvements for better readability and user experience.
130 lines
7.7 KiB
PHP
130 lines
7.7 KiB
PHP
<x-proxmox::layout :server="$server" view="backups" :status="$status" :status-polling="true" :status-polling-interval="'2s'">
|
|
<div class="space-y-4">
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex items-center gap-2">
|
|
<h2 class="text-lg font-semibold">Backups</h2>
|
|
<div class="relative" x-data="{ open: false }" x-cloak>
|
|
<button type="button" @click="open = true" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
|
|
<x-ri-question-line class="size-4" />
|
|
</button>
|
|
<div x-show="open" @click="open = false" @keydown.escape.window="open = false"
|
|
class="fixed inset-0 z-[60] bg-gray-900 bg-opacity-50 backdrop-blur-sm" style="display: none;"></div>
|
|
<div x-show="open" @click.away="open = false"
|
|
class="fixed inset-0 z-[60] flex items-center justify-center p-4" style="display: none;">
|
|
<div class="relative w-full max-w-xl max-h-[90vh] overflow-y-auto bg-white dark:bg-gray-900 rounded-lg border border-gray-200 dark:border-gray-800 shadow-xl p-4">
|
|
<button @click="open = false" class="absolute top-3 right-3 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
|
|
<x-ri-close-line class="size-4" />
|
|
</button>
|
|
<div class="flex items-center gap-2 mb-3 pr-6">
|
|
<div class="flex items-center justify-center w-8 h-8 rounded bg-blue-50 dark:bg-blue-900">
|
|
<x-ri-database-2-line class="size-4 text-primary" />
|
|
</div>
|
|
<h6 class="text-base font-semibold">Backup Details</h6>
|
|
</div>
|
|
<p class="text-sm text-gray-700 dark:text-gray-300 mb-3">Manage VM backups stored on the KVM server.</p>
|
|
<div class="pt-3 border-t border-gray-200 dark:border-gray-700 space-y-2 text-xs text-gray-600 dark:text-gray-400">
|
|
<p><strong>Restore:</strong> Restores VM state. Must be powered off.</p>
|
|
<p><strong>Delete:</strong> Permanently removes backup. Cannot be undone.</p>
|
|
<p><strong>Note:</strong> Includes disk data, config, and metadata.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex flex-row gap-2 w-fit hidden lg:flex">
|
|
<livewire:proxmox.backups.create :server="$server" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-lg shadow-sm">
|
|
<div class="overflow-x-auto rounded-lg">
|
|
<table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700 text-sm">
|
|
<thead>
|
|
<tr class="text-left text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase">
|
|
<th class="px-3 py-2">Backup</th>
|
|
<th class="px-3 py-2">Size</th>
|
|
<th class="px-3 py-2">Created</th>
|
|
<th class="px-3 py-2 text-center">Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-gray-200 dark:divide-gray-700 text-gray-700 dark:text-gray-300">
|
|
@forelse($backups as $backup)
|
|
@php $backup = (object) $backup; @endphp
|
|
<tr class="hover:bg-gray-50 dark:hover:bg-gray-800">
|
|
<td class="px-3 py-3"><span class="font-medium text-gray-800 dark:text-gray-200">{{ $backup->notes ?: '—' }}</span></td>
|
|
<td class="px-3 py-3">{{ Illuminate\Support\Number::fileSize($backup->size, 2) }}</td>
|
|
<td class="px-3 py-3">{{ date('Y-m-d H:i', $backup->ctime) }}</td>
|
|
<td class="px-3 py-3">
|
|
<div class="flex flex-wrap items-center justify-center gap-1">
|
|
<button @click="$wire.set('showRestore', true); $wire.set('volid', '{{ $backup->volid }}')"
|
|
class="bg-background border border-neutral px-2 py-1 rounded text-xs font-semibold flex items-center gap-1">
|
|
<x-ri-checkbox-circle-fill class="w-3 h-3"/> Restore
|
|
</button>
|
|
<button wire:click="promptDelete('{{ $backup->volid }}')"
|
|
class="bg-background border border-neutral px-2 py-1 rounded text-xs font-semibold flex items-center gap-1 text-error">
|
|
<x-ri-delete-bin-fill class="w-3 h-3"/> Delete
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
@empty
|
|
<tr>
|
|
<td colspan="4" class="px-3 py-4 text-center text-gray-400 text-sm">No backups available.</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">
|
|
Please ensure that the virtual private server is powered off before proceeding. If the server is not powered off, the restore <u>will</u> fail.
|
|
</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:loading.attr="aria-busy" 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:loading.attr="aria-busy" 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>
|
|
|