Joseph.Rawlings/Virtnet.bond
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Enhance Proxmox views with improved loading states and UI updates

Browse Source 
- Updated serverplaceholder.blade.php to enhance loading skeletons for server details.
- Added navigation breadcrumbs to statistics, subdomain, and system views for better user experience.
- Improved loading indicators for CPU, network, memory, and disk charts in statistics.blade.php.
- Refined storage.blade.php layout with section dividers and improved drive display, including bus type indicators and quota usage.
- Enhanced VNC and Xterm popups with a new header design, loading animations, and reconnect functionality.
- Added error handling for VNC and Xterm connections to inform users when unable to connect.
This commit is contained in:
Joseph.Rawlings
2026-02-24 19:51:46 -05:00
parent af62a16354
commit 16cd5f05de
40 changed files with 1423 additions and 475 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
extensions/Servers/Proxmox/views/backups.blade.php
View File

@@ -89,26 +89,36 @@
@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">
<p class="font-semibold text-base/90 break-words">{{ $backup->notes ?: '—' }}</p>
<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">
<span class="font-medium">{{ date('Y-m-d H:i:s', $backup->ctime) }}</span>
@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 @click="$wire.set('showRestore', true); $wire.set('volid', '{{ $backup->volid }}')"
wire:loading.attr="disabled"
class="bg-background border border-neutral px-3 py-2 rounded-md text-sm font-semibold flex items-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed">
<x-ri-checkbox-circle-fill class="w-4 h-4"/> Restore
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('{{ $backup->volid }}')"
class="bg-background border border-neutral px-3 py-2 rounded-md text-sm font-semibold flex items-center gap-2 text-error disabled:opacity-50 disabled:cursor-not-allowed">
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('{{ $backup->volid }}')" class="w-4 h-4 animate-pulse" />
<x-ri-delete-bin-fill wire:loading.remove wire:target="promptDelete('{{ $backup->volid }}')" class="w-4 h-4"/> Delete
</button>
@@ -117,8 +127,14 @@
</tr>
@empty
<tr>
<td colspan="4" class="px-4 py-6 text-center text-base/50 text-sm">
No backups available for this server.
<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