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

35
extensions/Servers/Proxmox/views/network.blade.php
View File

@@ -155,7 +155,8 @@
</div>
</div>
<!-- Section Divider -->
<div class="border-t border-neutral/20 my-2"></div>
<div class="bg-background-secondary border border-neutral rounded-lg p-4 mb-6"
x-data="{ isAdvancedView: localStorage.getItem('proxmox-view-mode') === 'advanced' }"
@@ -253,7 +254,7 @@
<td class="px-4 py-3">
<select wire:model.live="interfaceSelections.{{ $name }}"
wire:change="queueInterfaceChange('{{ $name }}')"
class="bg-background border border-neutral rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-secondary w-full">
class="bg-background border border-neutral rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary/25 focus:border-primary transition-colors w-full">
@foreach($interfaceTypeOptions as $value => $label)
<option value="{{ $value }}">{{ $label }}</option>
@endforeach
@@ -276,7 +277,7 @@
@keydown.enter="updateQueues()"
min="1"
:max="maxQueues"
class="bg-background border border-neutral rounded-md px-3 py-2 text-sm text-center focus:outline-none focus:ring-2 focus:ring-secondary w-20"
class="bg-background border border-neutral rounded-md px-3 py-2 text-sm text-center focus:outline-none focus:ring-2 focus:ring-primary/25 focus:border-primary transition-colors w-20"
:title="'Number of queues (1-' + maxQueues + ')'">
</div>
</td>
@@ -463,39 +464,39 @@
@endphp
@if($isPublic)
<div class="network-tools-column flex flex-col gap-2 relative min-w-0 @if($guestInterface) network-tools-with-details @endif">
<h4 class="text-sm font-semibold text-base/70"></h4>
<h4 class="text-sm font-semibold text-base/70">{{ $isIpv6 ? 'IPv6 Tools' : 'IPv4 Tools' }}</h4>
<div class="flex-1"></div>
<div class="flex gap-2 justify-end mt-auto">
@if($isIpv6)
<x-button.primary
onclick="window.open('https://ping6.ping.pe/{{ $network->ip }}', '_blank')"
class="text-xs">
class="text-xs hover:scale-105 hover:shadow-md transition-all duration-200">
Ping
</x-button.primary>
<x-button.primary
onclick="window.open('https://mtr6.ping.pe/{{ $network->ip }}', '_blank')"
class="text-xs">
class="text-xs hover:scale-105 hover:shadow-md transition-all duration-200">
MTR
</x-button.primary>
<x-button.primary
onclick="window.open('https://bgp.ping.pe/{{ $network->ip }}', '_blank')"
class="text-xs">
class="text-xs hover:scale-105 hover:shadow-md transition-all duration-200">
BGP
</x-button.primary>
@else
<x-button.primary
onclick="window.open('https://ping.pe/{{ $network->ip }}', '_blank')"
class="text-xs">
class="text-xs hover:scale-105 hover:shadow-md transition-all duration-200">
Ping
</x-button.primary>
<x-button.primary
onclick="window.open('https://mtr.ping.pe/{{ $network->ip }}', '_blank')"
class="text-xs">
class="text-xs hover:scale-105 hover:shadow-md transition-all duration-200">
MTR
</x-button.primary>
<x-button.primary
onclick="window.open('https://bgp.ping.pe/{{ $network->ip }}', '_blank')"
class="text-xs">
class="text-xs hover:scale-105 hover:shadow-md transition-all duration-200">
BGP
</x-button.primary>
@endif
@@ -743,39 +744,39 @@
@endphp
@if($isPublic)
<div class="network-tools-column flex flex-col gap-2 relative min-w-0 @if($hasInterface) network-tools-with-details @endif">
<h4 class="text-sm font-semibold text-base/70">{{ $isIpv6 ? 'IPv6 Tools' : 'IPv4 Tools' }}</h4>
<div class="flex-1"></div>
<div class="flex gap-2 justify-end mt-auto">
@if($isIpv6)
<x-button.primary
onclick="window.open('https://ping6.ping.pe/{{ $address['ip'] }}', '_blank')"
class="text-xs">
class="text-xs hover:scale-105 hover:shadow-md transition-all duration-200">
Ping
</x-button.primary>
<x-button.primary
onclick="window.open('https://mtr6.ping.pe/{{ $address['ip'] }}', '_blank')"
class="text-xs">
class="text-xs hover:scale-105 hover:shadow-md transition-all duration-200">
MTR
</x-button.primary>
<x-button.primary
onclick="window.open('https://bgp.ping.pe/{{ $address['ip'] }}', '_blank')"
class="text-xs">
class="text-xs hover:scale-105 hover:shadow-md transition-all duration-200">
BGP
</x-button.primary>
@else
<x-button.primary
onclick="window.open('https://ping.pe/{{ $address['ip'] }}', '_blank')"
class="text-xs">
class="text-xs hover:scale-105 hover:shadow-md transition-all duration-200">
Ping
</x-button.primary>
<x-button.primary
onclick="window.open('https://mtr.ping.pe/{{ $address['ip'] }}', '_blank')"
class="text-xs">
class="text-xs hover:scale-105 hover:shadow-md transition-all duration-200">
MTR
</x-button.primary>
<x-button.primary
onclick="window.open('https://bgp.ping.pe/{{ $address['ip'] }}', '_blank')"
class="text-xs">
class="text-xs hover:scale-105 hover:shadow-md transition-all duration-200">
BGP
</x-button.primary>
@endif