feat: enhance loading experience for telemetry and network analysis sections with blur overlays and loading indicators
This commit is contained in:
@@ -98,90 +98,111 @@
|
||||
</div>
|
||||
|
||||
<!-- Performance Telemetry -->
|
||||
<section wire:poll.120s="stats" class="bg-background-secondary border border-neutral rounded-2xl p-6 space-y-6 shadow-sm">
|
||||
<div class="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
|
||||
<div>
|
||||
<h2 class="text-lg font-semibold flex items-center gap-2">
|
||||
<x-ri-line-chart-line class="size-5" />
|
||||
Live Telemetry
|
||||
<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"
|
||||
@keydown.escape.window="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-line-chart-line class="size-5 text-primary" />
|
||||
</div>
|
||||
<h6 class="font-sans text-lg font-semibold leading-tight text-base">
|
||||
Live Telemetry
|
||||
</h6>
|
||||
</div>
|
||||
<p class="block font-sans text-sm font-normal leading-relaxed text-base/90 mb-4">
|
||||
This section displays four interactive performance graphs that visualize real-time telemetry data from your virtual machine. Each graph represents a different aspect of system performance, sourced directly from the Proxmox RRD (Round Robin Database) API, providing high-resolution metrics for monitoring resource utilization and identifying performance patterns.
|
||||
</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">Processor Utilization Graph:</span> Displays CPU usage as a percentage over time, showing how much of the allocated CPU resources are being consumed. This graph helps identify CPU-intensive periods and potential performance bottlenecks.
|
||||
</p>
|
||||
<p class="block font-sans text-xs font-normal leading-relaxed text-base/75">
|
||||
<span class="font-semibold text-base/90">Network Traffic Graph:</span> Visualizes network activity by showing both incoming (download) and outgoing (upload) data transfer rates. This graph helps monitor bandwidth usage and network performance, useful for identifying network-intensive operations or potential connectivity issues.
|
||||
</p>
|
||||
<p class="block font-sans text-xs font-normal leading-relaxed text-base/75">
|
||||
<span class="font-semibold text-base/90">Memory Utilization Graph:</span> Shows RAM usage over time, displaying both current memory consumption and the maximum allocated memory. This graph is essential for monitoring memory pressure and identifying potential memory leaks or insufficient allocation.
|
||||
</p>
|
||||
<p class="block font-sans text-xs font-normal leading-relaxed text-base/75">
|
||||
<span class="font-semibold text-base/90">Storage I/O Graph:</span> Tracks disk input/output operations by displaying both read and write rates. This graph helps monitor storage performance, identify I/O bottlenecks, and track disk-intensive operations such as backups or data transfers.
|
||||
</p>
|
||||
<p class="block font-sans text-xs font-normal leading-relaxed text-base/75">
|
||||
<span class="font-semibold text-base/90">Time Range Selection:</span> Each graph allows you to select from Hour, Day, Week, Month, or Year time ranges to view performance data over different periods. This flexibility enables both short-term troubleshooting and long-term trend analysis.
|
||||
</p>
|
||||
<p class="block font-sans text-xs font-normal leading-relaxed text-base/75">
|
||||
<span class="font-semibold text-base/90">Aggregation Method:</span> Choose between Average (mean values over the time period) or Maximum (peak values) aggregation methods. Average helps identify typical usage patterns, while Maximum reveals peak resource demands and potential capacity issues.
|
||||
</p>
|
||||
<p class="block font-sans text-xs font-normal leading-relaxed text-base/75">
|
||||
<span class="font-semibold text-base/90">Auto-Refresh:</span> Graphs automatically refresh every 2 minutes to ensure you're always viewing current performance data. The refresh interval is optimized to balance real-time monitoring with server load.
|
||||
</p>
|
||||
<p class="block font-sans text-xs font-normal leading-relaxed text-base/75">
|
||||
<span class="font-semibold text-base/90">Export Functionality:</span> Each graph includes an export button that allows you to download the currently displayed data as a CSV file. This enables detailed analysis in spreadsheet applications, reporting, and long-term archival of performance metrics.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</h2>
|
||||
<section
|
||||
wire:poll.120s="stats"
|
||||
x-data="{ loading: true }"
|
||||
x-init="setTimeout(() => loading = false, 4000)"
|
||||
class="relative bg-background-secondary border border-neutral rounded-2xl p-6 space-y-6 shadow-sm"
|
||||
>
|
||||
<!-- Blur overlay while telemetry data is loading -->
|
||||
<div
|
||||
x-show="loading"
|
||||
x-transition.opacity
|
||||
class="absolute inset-0 z-30 flex items-center justify-center bg-background/80 backdrop-blur-sm"
|
||||
>
|
||||
<div class="flex flex-col items-center gap-3 text-base/70">
|
||||
<svg fill="none" viewBox="0 0 24 24" class="size-8 animate-spin text-primary">
|
||||
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
|
||||
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 0 1 8-8v4a4 4 0 0 0-4 4H4z"></path>
|
||||
</svg>
|
||||
<p class="text-sm font-semibold">Loading telemetry data…</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 gap-6 xl:grid-cols-2">
|
||||
<div :class="loading ? 'blur-sm pointer-events-none select-none' : ''">
|
||||
<div class="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
|
||||
<div>
|
||||
<h2 class="text-lg font-semibold flex items-center gap-2">
|
||||
<x-ri-line-chart-line class="size-5" />
|
||||
Live Telemetry
|
||||
<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"
|
||||
@keydown.escape.window="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-line-chart-line class="size-5 text-primary" />
|
||||
</div>
|
||||
<h6 class="font-sans text-lg font-semibold leading-tight text-base">
|
||||
Live Telemetry
|
||||
</h6>
|
||||
</div>
|
||||
<p class="block font-sans text-sm font-normal leading-relaxed text-base/90 mb-4">
|
||||
This section displays four interactive performance graphs that visualize real-time telemetry data from your virtual machine. Each graph represents a different aspect of system performance, sourced directly from the Proxmox RRD (Round Robin Database) API, providing high-resolution metrics for monitoring resource utilization and identifying performance patterns.
|
||||
</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">Processor Utilization Graph:</span> Displays CPU usage as a percentage over time, showing how much of the allocated CPU resources are being consumed. This graph helps identify CPU-intensive periods and potential performance bottlenecks.
|
||||
</p>
|
||||
<p class="block font-sans text-xs font-normal leading-relaxed text-base/75">
|
||||
<span class="font-semibold text-base/90">Network Traffic Graph:</span> Visualizes network activity by showing both incoming (download) and outgoing (upload) data transfer rates. This graph helps monitor bandwidth usage and network performance, useful for identifying network-intensive operations or potential connectivity issues.
|
||||
</p>
|
||||
<p class="block font-sans text-xs font-normal leading-relaxed text-base/75">
|
||||
<span class="font-semibold text-base/90">Memory Utilization Graph:</span> Shows RAM usage over time, displaying both current memory consumption and the maximum allocated memory. This graph is essential for monitoring memory pressure and identifying potential memory leaks or insufficient allocation.
|
||||
</p>
|
||||
<p class="block font-sans text-xs font-normal leading-relaxed text-base/75">
|
||||
<span class="font-semibold text-base/90">Storage I/O Graph:</span> Tracks disk input/output operations by displaying both read and write rates. This graph helps monitor storage performance, identify I/O bottlenecks, and track disk-intensive operations such as backups or data transfers.
|
||||
</p>
|
||||
<p class="block font-sans text-xs font-normal leading-relaxed text-base/75">
|
||||
<span class="font-semibold text-base/90">Time Range Selection:</span> Each graph allows you to select from Hour, Day, Week, Month, or Year time ranges to view performance data over different periods. This flexibility enables both short-term troubleshooting and long-term trend analysis.
|
||||
</p>
|
||||
<p class="block font-sans text-xs font-normal leading-relaxed text-base/75">
|
||||
<span class="font-semibold text-base/90">Aggregation Method:</span> Choose between Average (mean values over the time period) or Maximum (peak values) aggregation methods. Average helps identify typical usage patterns, while Maximum reveals peak resource demands and potential capacity issues.
|
||||
</p>
|
||||
<p class="block font-sans text-xs font-normal leading-relaxed text-base/75">
|
||||
<span class="font-semibold text-base/90">Auto-Refresh:</span> Graphs automatically refresh every 2 minutes to ensure you're always viewing current performance data. The refresh interval is optimized to balance real-time monitoring with server load.
|
||||
</p>
|
||||
<p class="block font-sans text-xs font-normal leading-relaxed text-base/75">
|
||||
<span class="font-semibold text-base/90">Export Functionality:</span> Each graph includes an export button that allows you to download the currently displayed data as a CSV file. This enables detailed analysis in spreadsheet applications, reporting, and long-term archival of performance metrics.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 gap-6 xl:grid-cols-2">
|
||||
<!-- Processor Utilization Graph -->
|
||||
<div>
|
||||
<div class="bg-background-secondary hover:bg-background-secondary/80 border border-neutral p-4 rounded-lg">
|
||||
@@ -1908,11 +1929,29 @@
|
||||
|
||||
<!-- Network Analysis Section -->
|
||||
<div
|
||||
class="bg-background-secondary border border-neutral rounded-xl overflow-hidden mt-6"
|
||||
class="relative bg-background-secondary border border-neutral rounded-xl overflow-hidden mt-6"
|
||||
id="network-analysis-card"
|
||||
style="width: 100%;"
|
||||
wire:init="loadNetworkAnalysis"
|
||||
x-data="{ loading: true }"
|
||||
x-init="setTimeout(() => loading = false, 4000)"
|
||||
>
|
||||
<!-- Blur overlay while Network Analysis is loading -->
|
||||
<div
|
||||
x-show="loading"
|
||||
x-transition.opacity
|
||||
class="absolute inset-0 z-30 flex items-center justify-center bg-background/80 backdrop-blur-sm"
|
||||
>
|
||||
<div class="flex flex-col items-center gap-3 text-base/70">
|
||||
<svg fill="none" viewBox="0 0 24 24" class="size-8 animate-spin text-primary">
|
||||
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
|
||||
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 0 1 8-8v4a4 4 0 0 0-4 4H4z"></path>
|
||||
</svg>
|
||||
<p class="text-sm font-semibold">Loading network analysis…</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div :class="loading ? 'blur-sm pointer-events-none select-none' : ''">
|
||||
<div class="p-6 border-b border-neutral flex items-center justify-between gap-3 flex-wrap">
|
||||
<div class="flex items-center gap-2">
|
||||
<x-ri-router-line class="size-5" />
|
||||
|
||||
Reference in New Issue
Block a user