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

65
extensions/Servers/Proxmox/views/server.blade.php
View File

@@ -148,22 +148,22 @@
<div class="hidden sm:flex flex-col">
<span class="text-xs text-base/50">Memory</span>
<span class="text-base">
@if($status->status == 'running')
@if($status->status == 'running' && isset($status->mem))
{{ Illuminate\Support\Number::fileSize(bytes: $status->mem) }}/
@endif
{{ Illuminate\Support\Number::fileSize(bytes: $status->maxmem) }}
{{ Illuminate\Support\Number::fileSize(bytes: $status->maxmem ?? 0) }}
</span>
</div>
<div class="hidden sm:flex flex-col">
<span class="text-xs text-base/50">Disk</span>
<span class="text-base">
{{ Illuminate\Support\Number::fileSize(bytes: $status->maxdisk) }}
{{ Illuminate\Support\Number::fileSize(bytes: $status->maxdisk ?? 0) }}
</span>
</div>
@if($status->status == 'running')
<div class="hidden sm:flex flex-col">
<span class="text-xs text-base/50">CPU</span>
<span class="text-base">{{ round($status->cpu * 100, 2) }}%</span>
<span class="text-base">{{ round(($status->cpu ?? 0) * 100, 2) }}%</span>
</div>
@endif
</div>
@@ -172,37 +172,54 @@
<div class="mt-4 pt-4 border-t border-neutral">
<div class="text-sm font-medium text-base/70 mb-3">Server Configuration</div>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
<div class="flex flex-col">
<div class="flex items-center gap-2 mb-1">
<x-ri-cpu-line class="size-4 text-base/50" />
<div class="flex flex-col p-3 rounded-lg border border-neutral/30 bg-background/50 hover:border-primary/30 transition-colors">
<div class="flex items-center gap-2 mb-1.5">
<div class="flex items-center justify-center w-7 h-7 rounded-md bg-info/10">
<x-ri-cpu-line class="size-3.5 text-info" />
</div>
<span class="text-xs text-base/50">CPU Cores</span>
</div>
<span class="text-base">{{ $status->cpus ?? 'N/A' }} {{ ($status->cpus ?? 0) > 1 ? 'Cores' : 'Core' }}</span>
<span class="text-base font-semibold">{{ $status->cpus ?? 'N/A' }} {{ ($status->cpus ?? 0) > 1 ? 'Cores' : 'Core' }}</span>
</div>
<div class="flex flex-col">
<div class="flex items-center gap-2 mb-1">
<x-ri-database-2-line class="size-4 text-base/50" />
<div class="flex flex-col p-3 rounded-lg border border-neutral/30 bg-background/50 hover:border-primary/30 transition-colors">
<div class="flex items-center gap-2 mb-1.5">
<div class="flex items-center justify-center w-7 h-7 rounded-md bg-success/10">
<x-ri-database-2-line class="size-3.5 text-success" />
</div>
<span class="text-xs text-base/50">RAM Allocation</span>
</div>
<span class="text-base">{{ round(($status->maxmem ?? 0) / (1024 * 1024 * 1024), 2) }} GiB</span>
<span class="text-base font-semibold">{{ round(($status->maxmem ?? 0) / (1024 * 1024 * 1024), 2) }} GiB</span>
</div>
<div class="flex flex-col">
<div class="flex items-center gap-2 mb-1">
<x-ri-hard-drive-2-line class="size-4 text-base/50" />
<div class="flex flex-col p-3 rounded-lg border border-neutral/30 bg-background/50 hover:border-primary/30 transition-colors">
<div class="flex items-center gap-2 mb-1.5">
<div class="flex items-center justify-center w-7 h-7 rounded-md bg-warning/10">
<x-ri-hard-drive-2-line class="size-3.5 text-warning" />
</div>
<span class="text-xs text-base/50">Disk Capacity</span>
</div>
<span class="text-base">{{ Illuminate\Support\Number::fileSize(bytes: $status->maxdisk ?? 0) }}</span>
<span class="text-base font-semibold">{{ Illuminate\Support\Number::fileSize(bytes: $status->maxdisk ?? 0) }}</span>
</div>
<div class="flex flex-col">
<div class="flex items-center gap-2 mb-1">
<x-ri-speed-line class="size-4 text-base/50" />
<span class="text-xs text-base/50">Bandwidth (95% threshold: {{ $this->bandwidthThreshold95 }} GiB)</span>
<div class="flex flex-col p-3 rounded-lg border border-neutral/30 bg-background/50 hover:border-primary/30 transition-colors">
<div class="flex items-center gap-2 mb-1.5">
<div class="flex items-center justify-center w-7 h-7 rounded-md bg-secondary/10">
<x-ri-speed-line class="size-3.5 text-secondary" />
</div>
<span class="text-xs text-base/50">Bandwidth</span>
</div>
<span class="text-base font-medium">
{{ $this->monthlyTraffic }} GiB / {{ $this->bandwidthThreshold95 }} GiB
<span class="text-base font-semibold">
{{ $this->monthlyTraffic }} / {{ $this->bandwidthThreshold95 }} GiB
</span>
<span class="text-base text-xs leading-relaxed text-base/60 mt-1">
Threshold: 95% of average usage or 10 GiB minimum. Connection reduced to 1 MiB/s if exceeded.
@php
$bwPercent = $this->bandwidthThreshold95 > 0
? min(100, round(($this->monthlyTraffic / $this->bandwidthThreshold95) * 100, 1))
: 0;
@endphp
<div class="mt-2 h-1.5 rounded-full bg-neutral/20 overflow-hidden">
<div class="h-full rounded-full transition-all duration-500 {{ $bwPercent >= 90 ? 'bg-danger' : ($bwPercent >= 70 ? 'bg-warning' : 'bg-success') }}"
style="width: {{ $bwPercent }}%"></div>
</div>
<span class="text-[10px] leading-relaxed text-base/50 mt-1">
95th percentile threshold &middot; {{ $bwPercent }}% used
</span>
</div>
</div>