Refactor Proxmox server views for improved UI consistency and usability
- Updated server card component to use new UI elements and improved layout. - Enhanced status display with badges and better status indicators. - Refined quick info row for server details with consistent styling. - Reorganized server configuration statistics into stat cards for clarity. - Improved help modals for statistics and storage management sections. - Streamlined alerts and warnings for better user experience. - Updated storage management view to utilize new UI components and improve readability.
This commit is contained in:
@@ -7,22 +7,18 @@
|
||||
>
|
||||
@if(!$status)
|
||||
{{-- Error state when status cannot be loaded --}}
|
||||
<div class="bg-danger/10 border border-danger/30 rounded-xl p-6 mt-8">
|
||||
<div class="flex items-center gap-3 mb-4">
|
||||
<x-ri-error-warning-fill class="size-6 text-danger" />
|
||||
<h3 class="text-lg font-semibold text-danger">Unable to Load Server Status</h3>
|
||||
</div>
|
||||
<x-proxmox::ui.alert variant="danger" icon="ri-error-warning-fill" class="mt-8">
|
||||
<x-slot name="title">Unable to Load Server Status</x-slot>
|
||||
<p class="text-base/70 mb-4">We couldn't retrieve the current status from the hypervisor. This may be due to:</p>
|
||||
<ul class="list-disc list-inside text-base/70 mb-4 space-y-1">
|
||||
<li>Temporary connectivity issues with the Proxmox cluster</li>
|
||||
<li>The VM may be in an intermediate state</li>
|
||||
<li>Network timeout while fetching data</li>
|
||||
</ul>
|
||||
<button wire:click="loadVmStatus" class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/80 transition-colors">
|
||||
<x-ri-refresh-line class="size-4 inline mr-2" />
|
||||
<x-proxmox::ui.button wire:click="loadVmStatus" icon="ri-refresh-line">
|
||||
Retry
|
||||
</button>
|
||||
</div>
|
||||
</x-proxmox::ui.button>
|
||||
</x-proxmox::ui.alert>
|
||||
@else
|
||||
<script>
|
||||
function copyToClipboard(text, buttonEl) {
|
||||
@@ -300,107 +296,47 @@
|
||||
$lastSampleTimestamp = now()->toIso8601String();
|
||||
@endphp
|
||||
|
||||
<div class="bg-background-secondary border border-neutral rounded-xl p-6 mt-8">
|
||||
<x-proxmox::ui.card class="mt-8">
|
||||
<div class="flex flex-col gap-2 md:flex-row md:items-center md:justify-between mb-6">
|
||||
<div>
|
||||
<div class="flex items-center gap-2 min-w-0">
|
||||
<h3 class="text-lg font-semibold">Resource Allocation vs Entitlement</h3>
|
||||
<div class="relative" x-data="{ open: false }" x-cloak>
|
||||
<button type="button" @click="open = true" class="text-base/50 hover:text-base/70 transition-colors">
|
||||
<x-ri-question-line class="size-4" />
|
||||
</button>
|
||||
<!-- Modal Backdrop -->
|
||||
<div x-show="open"
|
||||
x-transition:enter="transition ease-out duration-300"
|
||||
x-transition:enter-start="opacity-0"
|
||||
x-transition:enter-end="opacity-100"
|
||||
x-transition:leave="transition ease-in duration-200"
|
||||
x-transition:leave-start="opacity-100"
|
||||
x-transition:leave-end="opacity-0"
|
||||
@click="open = false"
|
||||
@keydown.escape.window="open = false"
|
||||
class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm"
|
||||
style="display: none;">
|
||||
</div>
|
||||
<!-- Modal -->
|
||||
<div x-show="open"
|
||||
x-transition:enter="transition ease-out duration-300"
|
||||
x-transition:enter-start="opacity-0 scale-95"
|
||||
x-transition:enter-end="opacity-100 scale-100"
|
||||
x-transition:leave="transition ease-in duration-200"
|
||||
x-transition:leave-start="opacity-100 scale-100"
|
||||
x-transition:leave-end="opacity-0 scale-95"
|
||||
@click.away="open = false"
|
||||
class="fixed inset-0 z-50 flex items-center justify-center p-4"
|
||||
style="display: none;">
|
||||
<div class="relative w-full max-w-2xl max-h-[90vh] overflow-y-auto bg-background-secondary rounded-xl border border-neutral/20 shadow-2xl p-6">
|
||||
<button @click="open = false" class="absolute top-4 right-4 text-base/50 hover:text-base transition-colors">
|
||||
<x-ri-close-line class="size-5" />
|
||||
</button>
|
||||
<div class="flex items-center gap-3 mb-4 pr-8">
|
||||
<div class="flex items-center justify-center w-10 h-10 rounded-lg bg-primary/10">
|
||||
<x-ri-server-line class="size-5 text-primary" />
|
||||
</div>
|
||||
<h6 class="font-sans text-lg font-semibold leading-tight">
|
||||
Resource Allocation vs Entitlement
|
||||
</h6>
|
||||
</div>
|
||||
<p class="block font-sans text-sm font-normal leading-relaxed text-base/90 mb-4">
|
||||
Compares your virtual machine's actual resource consumption against its allocated entitlements, providing real-time visibility into CPU, memory, and uptime metrics.
|
||||
</p>
|
||||
<div class="pt-4 mt-4 border-t border-neutral/30 space-y-2.5">
|
||||
<p class="block font-sans text-xs font-normal leading-relaxed text-base/75">
|
||||
<span class="font-semibold text-base/90">CPU Allocation:</span> Shows live CPU usage as a percentage of your vCPU entitlement. Values are sampled directly from the Proxmox hypervisor and update with each status poll. The progress bar can exceed 100% to indicate over-allocation.
|
||||
</p>
|
||||
<p class="block font-sans text-xs font-normal leading-relaxed text-base/75">
|
||||
<span class="font-semibold text-base/90">Memory Allocation:</span> Displays current RAM usage compared to your provisioned memory entitlement. Calculated from the VM's allocated memory and updates in real-time as memory consumption changes.
|
||||
</p>
|
||||
<p class="block font-sans text-xs font-normal leading-relaxed text-base/75">
|
||||
<span class="font-semibold text-base/90">Hypervisor Uptime:</span> Shows the live uptime reported by the Proxmox hypervisor, plus power event statistics (starts, shutdowns, reboots) from the task history. This provides insight into VM stability and availability.
|
||||
</p>
|
||||
<p class="block font-sans text-xs font-normal leading-relaxed text-base/75">
|
||||
<span class="font-semibold text-base/90">Status Badges:</span> Color-coded badges indicate resource health: "Healthy" (green) for normal usage, "Watchlist" (yellow) when approaching limits (85%+), and "Over entitlement" (red) when exceeding allocated resources.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<h3 class="text-lg font-semibold">Resource Allocation vs Entitlement</h3>
|
||||
<x-proxmox::ui.help-modal title="Resource Allocation vs Entitlement">
|
||||
<p class="block font-sans text-sm font-normal leading-relaxed text-base/90 mb-4">
|
||||
Compares your virtual machine's actual resource consumption against its allocated entitlements, providing real-time visibility into CPU, memory, and uptime metrics.
|
||||
</p>
|
||||
<div class="pt-4 mt-4 border-t border-neutral/30 space-y-2.5">
|
||||
<p class="block font-sans text-xs font-normal leading-relaxed text-base/75">
|
||||
<span class="font-semibold text-base/90">CPU Allocation:</span> Shows live CPU usage as a percentage of your vCPU entitlement. Values are sampled directly from the Proxmox hypervisor and update with each status poll.
|
||||
</p>
|
||||
<p class="block font-sans text-xs font-normal leading-relaxed text-base/75">
|
||||
<span class="font-semibold text-base/90">Memory Allocation:</span> Displays current RAM usage compared to your provisioned memory entitlement.
|
||||
</p>
|
||||
<p class="block font-sans text-xs font-normal leading-relaxed text-base/75">
|
||||
<span class="font-semibold text-base/90">Hypervisor Uptime:</span> Shows the live uptime plus power event statistics from the task history.
|
||||
</p>
|
||||
<p class="block font-sans text-xs font-normal leading-relaxed text-base/75">
|
||||
<span class="font-semibold text-base/90">Status Badges:</span> "Healthy" (green) for normal usage, "Watchlist" (yellow) at 85%+, "Over entitlement" (red) when exceeded.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-sm text-base/70">Instantly compare what this service is entitled to with how much it is consuming right now.</p>
|
||||
</x-proxmox::ui.help-modal>
|
||||
<p class="text-sm text-base/70 ml-2 hidden md:block">Instantly compare entitlement with current consumption.</p>
|
||||
</div>
|
||||
<p class="text-xs text-base/50">Values refresh alongside the live status poll.</p>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
@foreach($resourceAllocations as $resource)
|
||||
<div class="border border-neutral rounded-xl p-4 bg-background flex flex-col gap-4">
|
||||
<div class="flex items-start justify-between gap-3">
|
||||
<div>
|
||||
<p class="text-xs font-semibold tracking-wide uppercase text-base/60">{{ $resource['label'] }}</p>
|
||||
<p class="text-lg font-semibold">{{ $resource['usage_summary'] }}</p>
|
||||
<p class="text-xs text-base/60">{{ $resource['entitlement_label'] }}</p>
|
||||
</div>
|
||||
<span class="text-[10px] font-semibold px-2 py-1 rounded-full {{ $resource['badge']['class'] }}">
|
||||
{{ $resource['badge']['label'] }}
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
@if(!is_null($resource['used_percent']))
|
||||
<div class="flex items-center justify-between text-xs text-base/60 mb-1">
|
||||
<span>Usage</span>
|
||||
<span>{{ $resource['used_percent'] }}%</span>
|
||||
</div>
|
||||
<div class="h-2 rounded-full bg-background-secondary overflow-hidden">
|
||||
<div class="h-full rounded-full transition-all duration-300"
|
||||
style="width: {{ min($resource['used_percent'], 130) }}%; background-image: {{ $resource['gradient'] }};">
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
<p class="text-xs text-base/60 mt-2">{{ $resource['description'] }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<x-proxmox::ui.allocation-card
|
||||
:label="$resource['label']"
|
||||
:percent="$resource['used_percent']"
|
||||
:usage-summary="$resource['usage_summary']"
|
||||
:entitlement-label="$resource['entitlement_label']"
|
||||
:description="$resource['description']"
|
||||
:gradient="$resource['gradient']"
|
||||
:badge="$resource['badge']"
|
||||
/>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
</x-proxmox::ui.card>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-12 mt-8 md:items-stretch">
|
||||
|
||||
|
||||
Reference in New Issue
Block a user