Enhance Proxmox views with improved loading states and UI updates
- 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:
@@ -326,50 +326,53 @@
|
||||
<div class="flex border-b border-neutral/20 overflow-x-auto">
|
||||
<button @click="activeTab = 'rules'"
|
||||
class="px-6 py-4 text-sm font-semibold transition-all relative whitespace-nowrap"
|
||||
:class="activeTab === 'rules' ? 'text-primary' : 'text-base/60 hover:text-base'">
|
||||
:class="activeTab === 'rules' ? 'text-primary bg-primary/5' : 'text-base/60 hover:text-base hover:bg-background-secondary/50'">
|
||||
<div class="flex items-center gap-2">
|
||||
<x-ri-list-check class="size-4" />
|
||||
<span>Firewall Rules</span>
|
||||
<span class="ml-1.5 inline-flex items-center justify-center px-1.5 py-0.5 text-[10px] font-bold rounded-full bg-primary/15 text-primary min-w-[1.25rem]">{{ count($rules) }}</span>
|
||||
</div>
|
||||
<div x-show="activeTab === 'rules'" class="absolute bottom-0 left-0 right-0 h-0.5 bg-primary"></div>
|
||||
<div x-show="activeTab === 'rules'" class="absolute bottom-0 left-0 right-0 h-0.5 bg-primary rounded-t"></div>
|
||||
</button>
|
||||
<button @click="activeTab = 'aliases'"
|
||||
class="px-6 py-4 text-sm font-semibold transition-all relative whitespace-nowrap"
|
||||
:class="activeTab === 'aliases' ? 'text-primary' : 'text-base/60 hover:text-base'">
|
||||
:class="activeTab === 'aliases' ? 'text-primary bg-primary/5' : 'text-base/60 hover:text-base hover:bg-background-secondary/50'">
|
||||
<div class="flex items-center gap-2">
|
||||
<x-ri-bookmark-line class="size-4" />
|
||||
<span>IP Aliases</span>
|
||||
<span class="ml-1.5 inline-flex items-center justify-center px-1.5 py-0.5 text-[10px] font-bold rounded-full bg-primary/15 text-primary min-w-[1.25rem]">{{ count($aliases) }}</span>
|
||||
</div>
|
||||
<div x-show="activeTab === 'aliases'" class="absolute bottom-0 left-0 right-0 h-0.5 bg-primary"></div>
|
||||
<div x-show="activeTab === 'aliases'" class="absolute bottom-0 left-0 right-0 h-0.5 bg-primary rounded-t"></div>
|
||||
</button>
|
||||
<button @click="activeTab = 'ipsets'"
|
||||
class="px-6 py-4 text-sm font-semibold transition-all relative whitespace-nowrap"
|
||||
:class="activeTab === 'ipsets' ? 'text-primary' : 'text-base/60 hover:text-base'">
|
||||
:class="activeTab === 'ipsets' ? 'text-primary bg-primary/5' : 'text-base/60 hover:text-base hover:bg-background-secondary/50'">
|
||||
<div class="flex items-center gap-2">
|
||||
<x-ri-folder-3-line class="size-4" />
|
||||
<span>IP Sets</span>
|
||||
<span class="ml-1.5 inline-flex items-center justify-center px-1.5 py-0.5 text-[10px] font-bold rounded-full bg-primary/15 text-primary min-w-[1.25rem]">{{ count($ipsets) }}</span>
|
||||
</div>
|
||||
<div x-show="activeTab === 'ipsets'" class="absolute bottom-0 left-0 right-0 h-0.5 bg-primary"></div>
|
||||
<div x-show="activeTab === 'ipsets'" class="absolute bottom-0 left-0 right-0 h-0.5 bg-primary rounded-t"></div>
|
||||
</button>
|
||||
<button @click="activeTab = 'logs'"
|
||||
class="px-6 py-4 text-sm font-semibold transition-all relative whitespace-nowrap"
|
||||
:class="activeTab === 'logs' ? 'text-primary' : 'text-base/60 hover:text-base'">
|
||||
:class="activeTab === 'logs' ? 'text-primary bg-primary/5' : 'text-base/60 hover:text-base hover:bg-background-secondary/50'">
|
||||
<div class="flex items-center gap-2">
|
||||
<x-ri-file-list-3-line class="size-4" />
|
||||
<span>Firewall Logs</span>
|
||||
<span class="px-2 py-0.5 bg-primary/10 text-primary rounded-full text-xs font-bold">{{ count($firewallLogs) }}</span>
|
||||
<span class="ml-1.5 inline-flex items-center justify-center px-1.5 py-0.5 text-[10px] font-bold rounded-full bg-primary/15 text-primary min-w-[1.25rem]">{{ count($firewallLogs) }}</span>
|
||||
</div>
|
||||
<div x-show="activeTab === 'logs'" class="absolute bottom-0 left-0 right-0 h-0.5 bg-primary"></div>
|
||||
<div x-show="activeTab === 'logs'" class="absolute bottom-0 left-0 right-0 h-0.5 bg-primary rounded-t"></div>
|
||||
</button>
|
||||
<button @click="activeTab = 'saved'"
|
||||
class="px-6 py-4 text-sm font-semibold transition-all relative whitespace-nowrap"
|
||||
:class="activeTab === 'saved' ? 'text-primary' : 'text-base/60 hover:text-base'">
|
||||
:class="activeTab === 'saved' ? 'text-primary bg-primary/5' : 'text-base/60 hover:text-base hover:bg-background-secondary/50'">
|
||||
<div class="flex items-center gap-2">
|
||||
<x-ri-save-3-line class="size-4" />
|
||||
<span>Saved Configurations</span>
|
||||
<span class="px-2 py-0.5 bg-primary/10 text-primary rounded-full text-xs font-bold">{{ count($savedConfigurations) }}</span>
|
||||
<span class="ml-1.5 inline-flex items-center justify-center px-1.5 py-0.5 text-[10px] font-bold rounded-full bg-primary/15 text-primary min-w-[1.25rem]">{{ count($savedConfigurations) }}</span>
|
||||
</div>
|
||||
<div x-show="activeTab === 'saved'" class="absolute bottom-0 left-0 right-0 h-0.5 bg-primary"></div>
|
||||
<div x-show="activeTab === 'saved'" class="absolute bottom-0 left-0 right-0 h-0.5 bg-primary rounded-t"></div>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -389,7 +392,7 @@
|
||||
@if(count($rules) > 0)
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full">
|
||||
<thead>
|
||||
<thead class="sticky top-0 z-[5] bg-background">
|
||||
<tr class="border-b border-neutral/20">
|
||||
<th class="text-left py-3 px-4 text-xs font-semibold text-base/70 uppercase">Order</th>
|
||||
<th class="text-left py-3 px-4 text-xs font-semibold text-base/70 uppercase">Pos</th>
|
||||
@@ -405,7 +408,7 @@
|
||||
</thead>
|
||||
<tbody>
|
||||
@foreach($rules as $index => $rule)
|
||||
<tr wire:key="rule-{{ $rule['pos'] ?? $index }}" class="border-b border-neutral/10 hover:bg-background-secondary/30 transition-colors">
|
||||
<tr wire:key="rule-{{ $rule['pos'] ?? $index }}" class="border-b border-neutral/10 hover:bg-background-secondary/30 transition-colors {{ $index % 2 === 1 ? 'bg-background-secondary/20' : '' }}">
|
||||
<td class="py-3 px-4 text-sm">
|
||||
<div class="flex flex-col gap-1">
|
||||
@if($index > 0)
|
||||
|
||||
Reference in New Issue
Block a user