refactor: simplify overview view structure and enhance UI elements for better clarity and usability
This commit is contained in:
@@ -86,98 +86,56 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-1.5" wire:init="checkStatus" wire:poll.{{ $fastPolling ? '2s' : '30s' }}="checkStatus"
|
||||
<div wire:init="checkStatus" wire:poll.{{ $fastPolling ? '2s' : '30s' }}="checkStatus"
|
||||
wire:key="{{ $fastPolling ? 'fast' : 'slow' }}">
|
||||
<div class="flex items-center gap-2.5 min-w-0 group">
|
||||
<h1 class="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-white break-words tracking-tight">Server Overview</h1>
|
||||
<div class="relative" x-data="{ open: false }" x-cloak>
|
||||
<button type="button" @click="open = true" class="text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300 transition-colors opacity-70 hover:opacity-100">
|
||||
<svg class="size-4.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 015.83 1c0 2-3 3-3 3M12 17h.01" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</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-[60] 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 translate-y-4"
|
||||
x-transition:enter-end="opacity-100 scale-100 translate-y-0"
|
||||
x-transition:leave="transition ease-in duration-200"
|
||||
x-transition:leave-start="opacity-100 scale-100 translate-y-0"
|
||||
x-transition:leave-end="opacity-0 scale-95 translate-y-4"
|
||||
@click.away="open = false"
|
||||
@keydown.escape.window="open = false"
|
||||
class="fixed inset-0 z-[60] 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-white dark:bg-gray-900 rounded-2xl border border-gray-200 dark:border-gray-700 shadow-2xl p-6 lg:p-8">
|
||||
<button @click="open = false" class="absolute top-5 right-5 text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300 transition-colors opacity-75 hover:opacity-100">
|
||||
<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 opacity-80">
|
||||
<svg class="size-5 text-primary" fill="currentColor" viewBox="0 0 24 24"><rect x="2" y="3" width="20" height="5" rx="1" stroke="currentColor" stroke-width="1" fill="none"/><rect x="2" y="10" width="20" height="5" rx="1" stroke="currentColor" stroke-width="1" fill="none"/><circle cx="6" cy="5.5" r="0.5" fill="currentColor"/><circle cx="6" cy="12.5" r="0.5" fill="currentColor"/></svg>
|
||||
<x-proxmox::ui.section-header
|
||||
title="Server Overview"
|
||||
subtitle="Real-time resource monitoring and server configuration details."
|
||||
icon="ri-server-line"
|
||||
class="mb-6">
|
||||
<x-slot name="actions">
|
||||
<x-proxmox::ui.help-modal icon="ri-question-line" title="Server Overview">
|
||||
<p class="block font-sans text-sm font-normal leading-relaxed text-base/90 mb-4">
|
||||
Complete overview of your virtual machine including real-time resource usage, server status, network configuration, and DNS information.
|
||||
</p>
|
||||
<div class="pt-4 mt-4 border-t border-neutral/30 space-y-2.5">
|
||||
<div class="flex gap-3">
|
||||
<div class="flex-shrink-0 mt-0.5">
|
||||
<span class="flex items-center justify-center h-8 w-8 rounded-lg bg-primary/10 opacity-75">
|
||||
<svg class="h-4 w-4 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><rect x="3" y="3" width="7" height="7" stroke-linecap="round" stroke-linejoin="round"/><rect x="14" y="3" width="7" height="7" stroke-linecap="round" stroke-linejoin="round"/><rect x="14" y="14" width="7" height="7" stroke-linecap="round" stroke-linejoin="round"/><rect x="3" y="14" width="7" height="7" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="font-bold text-lg text-gray-900 dark:text-white">Server Overview</h3>
|
||||
<p class="text-xs text-gray-500 dark:text-gray-400">Real-time monitoring</p>
|
||||
<p class="block font-sans text-xs font-semibold text-base/90">Status</p>
|
||||
<p class="block font-sans text-xs font-normal leading-relaxed text-base/75">Power state with real-time updates every 2-30 seconds.</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-sm text-gray-700 dark:text-gray-300 leading-relaxed mb-4 opacity-90">
|
||||
Complete overview of your virtual machine including real-time resource usage, server status, network configuration, and DNS information.
|
||||
</p>
|
||||
<div class="pt-4 mt-4 border-t border-gray-200 dark:border-gray-700 space-y-3">
|
||||
<div class="flex gap-3">
|
||||
<div class="flex-shrink-0 mt-0.5">
|
||||
<span class="flex items-center justify-center h-8 w-8 rounded-lg bg-primary/10 opacity-75">
|
||||
<svg class="h-4 w-4 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><rect x="3" y="3" width="7" height="7" stroke-linecap="round" stroke-linejoin="round"/><rect x="14" y="3" width="7" height="7" stroke-linecap="round" stroke-linejoin="round"/><rect x="14" y="14" width="7" height="7" stroke-linecap="round" stroke-linejoin="round"/><rect x="3" y="14" width="7" height="7" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-sm font-semibold text-gray-900 dark:text-white">Status</p>
|
||||
<p class="text-xs text-gray-600 dark:text-gray-400 opacity-80">Power state with real-time updates every 2-30 seconds.</p>
|
||||
</div>
|
||||
<div class="flex gap-3">
|
||||
<div class="flex-shrink-0 mt-0.5">
|
||||
<span class="flex items-center justify-center h-8 w-8 rounded-lg bg-success/10 opacity-75">
|
||||
<svg class="h-4 w-4 text-success" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><rect x="4" y="4" width="16" height="16" rx="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M9 9h6v6H9zM9 2v2M9 20v2M15 2v2M15 20v2M2 9h2M2 15h2M20 9h2M20 15h2" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex gap-3">
|
||||
<div class="flex-shrink-0 mt-0.5">
|
||||
<span class="flex items-center justify-center h-8 w-8 rounded-lg bg-success/10 opacity-75">
|
||||
<svg class="h-4 w-4 text-success" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><rect x="4" y="4" width="16" height="16" rx="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M9 9h6v6H9zM9 2v2M9 20v2M15 2v2M15 20v2M2 9h2M2 15h2M20 9h2M20 15h2" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-sm font-semibold text-gray-900 dark:text-white">Resources</p>
|
||||
<p class="text-xs text-gray-600 dark:text-gray-400 opacity-80">CPU, memory usage, and uptime statistics from the hypervisor.</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="block font-sans text-xs font-semibold text-base/90">Resources</p>
|
||||
<p class="block font-sans text-xs font-normal leading-relaxed text-base/75">CPU, memory usage, and uptime statistics from the hypervisor.</p>
|
||||
</div>
|
||||
<div class="flex gap-3">
|
||||
<div class="flex-shrink-0 mt-0.5">
|
||||
<span class="flex items-center justify-center h-8 w-8 rounded-lg bg-warning/10 opacity-75">
|
||||
<svg class="h-4 w-4 text-warning" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><circle cx="12" cy="12" r="10" stroke-linecap="round" stroke-linejoin="round"/><path d="M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-sm font-semibold text-gray-900 dark:text-white">Network</p>
|
||||
<p class="text-xs text-gray-600 dark:text-gray-400 opacity-80">IPv4/IPv6 addresses and DNS configuration for your VM.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-3">
|
||||
<div class="flex-shrink-0 mt-0.5">
|
||||
<span class="flex items-center justify-center h-8 w-8 rounded-lg bg-warning/10 opacity-75">
|
||||
<svg class="h-4 w-4 text-warning" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><circle cx="12" cy="12" r="10" stroke-linecap="round" stroke-linejoin="round"/><path d="M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="block font-sans text-xs font-semibold text-base/90">Network</p>
|
||||
<p class="block font-sans text-xs font-normal leading-relaxed text-base/75">IPv4/IPv6 addresses and DNS configuration for your VM.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400 opacity-80 ml-0.5">
|
||||
Real-time resource monitoring and server configuration details.
|
||||
</p>
|
||||
</div>
|
||||
</x-proxmox::ui.help-modal>
|
||||
</x-slot>
|
||||
</x-proxmox::ui.section-header>
|
||||
<style>
|
||||
/* TailAdmin Progress Bar Styles */
|
||||
progress {
|
||||
@@ -1364,6 +1322,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user