Replace inline telemetry section with @include partial for cleaner statistics page
Made-with: Cursor
This commit is contained in:
@@ -3,22 +3,6 @@
|
||||
<script src="https://cdn.jsdelivr.net/npm/apexcharts" onload="window.apexChartsLoaded = true"></script>
|
||||
@endonce
|
||||
<div class="flex flex-col gap-6" data-server-id="{{ $server->id }}">
|
||||
<style>
|
||||
.formRight select {
|
||||
background-color: hsl(var(--color-background));
|
||||
border: 1px solid hsl(var(--color-neutral));
|
||||
border-radius: 0.375rem;
|
||||
padding: 0.5rem 0.75rem;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.formRight select:focus {
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 2px hsl(var(--color-secondary));
|
||||
}
|
||||
</style>
|
||||
<!-- Header Section -->
|
||||
<div class="flex flex-col gap-4">
|
||||
<div class="flex items-center gap-1.5 text-xs text-base/50 mb-0">
|
||||
@@ -102,558 +86,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Performance Telemetry -->
|
||||
<style>
|
||||
.telemetry-spinner {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: 3px solid rgba(0, 143, 251, 0.2);
|
||||
border-top-color: #008FFB;
|
||||
border-radius: 50%;
|
||||
animation: telemetrySpin 0.8s linear infinite;
|
||||
}
|
||||
@keyframes telemetrySpin {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
</style>
|
||||
<section
|
||||
wire:poll.120s="stats"
|
||||
x-data="{ chartsLoaded: false }"
|
||||
@proxmox-all-stats-loaded.window="chartsLoaded = true"
|
||||
class="bg-background-secondary border border-neutral rounded-2xl shadow-sm overflow-hidden relative"
|
||||
>
|
||||
<!-- Loading Overlay with blur -->
|
||||
<div
|
||||
x-show="!chartsLoaded"
|
||||
x-transition:leave="transition ease-in duration-500"
|
||||
x-transition:leave-start="opacity-100"
|
||||
x-transition:leave-end="opacity-0"
|
||||
class="absolute inset-0 z-10 flex items-center justify-center bg-background-secondary/80 backdrop-blur-sm"
|
||||
>
|
||||
<div class="flex flex-col items-center gap-3">
|
||||
<div class="telemetry-spinner"></div>
|
||||
<span class="text-base/70 text-sm">Loading Telemetry...</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-6 space-y-6">
|
||||
<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.self="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">
|
||||
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">
|
||||
<div class="flex flex-col gap-2">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<h2 class="text-lg font-semibold flex items-center gap-2">
|
||||
<x-ri-cpu-line class="size-5 rotate-45" />
|
||||
Processor Utilization
|
||||
<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.self="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-cpu-line class="size-5 text-primary" />
|
||||
</div>
|
||||
<h6 class="font-sans text-lg font-semibold leading-tight">
|
||||
Processor Utilization
|
||||
</h6>
|
||||
</div>
|
||||
<p class="block font-sans text-sm font-normal leading-relaxed text-base/90 mb-4">
|
||||
This graph displays the CPU utilization percentage over time. It shows how much of the server's processing capacity is being used, helping you monitor performance and identify potential bottlenecks or resource constraints.
|
||||
</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">Time Range:</span> Select from Hour, Day, Week, Month, or Year to view CPU usage over different time periods.
|
||||
</p>
|
||||
<p class="block font-sans text-xs font-normal leading-relaxed text-base/75">
|
||||
<span class="font-semibold text-base/90">Aggregation:</span> Choose between Average (mean CPU usage) or Maximum (peak CPU usage) to see different perspectives of CPU performance.
|
||||
</p>
|
||||
<p class="block font-sans text-xs font-normal leading-relaxed text-base/75">
|
||||
<span class="font-semibold text-base/90">Export:</span> CPU usage data can be exported to CSV format for further analysis or reporting.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</h2>
|
||||
</div>
|
||||
<div class="formRight flex items-center gap-2">
|
||||
<select wire:model.live="cpuTimeRange">
|
||||
<option value="hour">Hour</option>
|
||||
<option value="day">Day</option>
|
||||
<option value="week">Week</option>
|
||||
<option value="month">Month</option>
|
||||
<option value="year">Year</option>
|
||||
</select>
|
||||
<select wire:model.live="cpuAggregation">
|
||||
<option value="average">Average</option>
|
||||
<option value="maximum">Maximum</option>
|
||||
</select>
|
||||
<button type="button" onclick="exportCpuChartToCSV()"
|
||||
class="bg-background border border-neutral px-3 py-2 rounded-md text-sm font-semibold hover:bg-background/80 flex items-center gap-2 h-[calc(0.5rem*2+1.25rem)]"
|
||||
title="Export to CSV">
|
||||
<x-ri-download-line class="size-4" />
|
||||
Export
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative" x-data="{ cpuChartReady: false }" x-init="
|
||||
let cpuCheckAttempts = 0;
|
||||
const checkCpu = setInterval(() => {
|
||||
cpuCheckAttempts++;
|
||||
if (document.querySelector('#cpu-chart .apexcharts-canvas')) { cpuChartReady = true; clearInterval(checkCpu); }
|
||||
else if (cpuCheckAttempts >= 150) { clearInterval(checkCpu); }
|
||||
}, 200);
|
||||
">
|
||||
<div class="absolute inset-0 flex items-center justify-center skeleton-loading rounded-lg z-[1]"
|
||||
x-show="!cpuChartReady" x-transition:leave="transition ease-in duration-300" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0">
|
||||
<span class="text-xs text-base/40">Loading chart...</span>
|
||||
</div>
|
||||
<div id="cpu-chart" wire:ignore></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Network Traffic Graph -->
|
||||
<div>
|
||||
<div class="bg-background-secondary hover:bg-background-secondary/80 border border-neutral p-4 rounded-lg">
|
||||
<div class="flex flex-col gap-2">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<h2 class="text-lg font-semibold flex items-center gap-2">
|
||||
<x-ri-arrow-left-right-line class="size-5 rotate-45" />
|
||||
Network Traffic
|
||||
<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.self="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-arrow-left-right-line class="size-5 text-primary" />
|
||||
</div>
|
||||
<h6 class="font-sans text-lg font-semibold leading-tight">
|
||||
Network Traffic
|
||||
</h6>
|
||||
</div>
|
||||
<p class="block font-sans text-sm font-normal leading-relaxed text-base/90 mb-4">
|
||||
This graph displays network traffic over time, showing both incoming (Network In) and outgoing (Network Out) data rates. It helps you monitor bandwidth utilization, identify network bottlenecks, and track data transfer 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">95th Percentile Line:</span> The dashed red line shows the 95th percentile of your combined network traffic. This is a common billing metric used by data centers - it means 95% of your traffic samples fall below this line. Understanding your 95th percentile helps predict bandwidth costs and capacity needs.
|
||||
</p>
|
||||
<p class="block font-sans text-xs font-normal leading-relaxed text-base/75">
|
||||
<span class="font-semibold text-base/90">Time Range:</span> Select from Hour, Day, Week, Month, or Year to view network usage over different time periods.
|
||||
</p>
|
||||
<p class="block font-sans text-xs font-normal leading-relaxed text-base/75">
|
||||
<span class="font-semibold text-base/90">Aggregation:</span> Choose between Average (mean network traffic) or Maximum (peak network traffic) to see different perspectives of network performance.
|
||||
</p>
|
||||
<p class="block font-sans text-xs font-normal leading-relaxed text-base/75">
|
||||
<span class="font-semibold text-base/90">Export:</span> Network usage data can be exported to CSV format for further analysis or reporting.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</h2>
|
||||
</div>
|
||||
<div class="formRight flex flex-wrap items-center gap-2 text-sm">
|
||||
<select wire:model.live="networkTimeRange">
|
||||
<option value="hour">Hour</option>
|
||||
<option value="day">Day</option>
|
||||
<option value="week">Week</option>
|
||||
<option value="month">Month</option>
|
||||
<option value="year">Year</option>
|
||||
</select>
|
||||
<select wire:model.live="networkAggregation">
|
||||
<option value="average">Average</option>
|
||||
<option value="maximum">Maximum</option>
|
||||
</select>
|
||||
<button type="button" onclick="exportNetworkChartToCSV()"
|
||||
class="bg-background border border-neutral px-3 py-2 rounded-md text-sm font-semibold hover:bg-background/80 flex items-center gap-2 h-[calc(0.5rem*2+1.25rem)]"
|
||||
title="Export to CSV">
|
||||
<x-ri-download-line class="size-4" />
|
||||
Export
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative" x-data="{ networkChartReady: false }" x-init="
|
||||
let netCheckAttempts = 0;
|
||||
const checkNet = setInterval(() => {
|
||||
netCheckAttempts++;
|
||||
if (document.querySelector('#network-chart .apexcharts-canvas')) { networkChartReady = true; clearInterval(checkNet); }
|
||||
else if (netCheckAttempts >= 150) { clearInterval(checkNet); }
|
||||
}, 200);
|
||||
">
|
||||
<div class="absolute inset-0 flex items-center justify-center skeleton-loading rounded-lg z-[1]"
|
||||
x-show="!networkChartReady" x-transition:leave="transition ease-in duration-300" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0">
|
||||
<span class="text-xs text-base/40">Loading chart...</span>
|
||||
</div>
|
||||
<div id="network-chart" wire:ignore></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Memory Utilization Graph -->
|
||||
<div>
|
||||
<div class="bg-background-secondary hover:bg-background-secondary/80 border border-neutral p-4 rounded-lg">
|
||||
<div class="flex flex-col gap-2">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<h2 class="text-lg font-semibold flex items-center gap-2">
|
||||
<x-ri-ram-line class="size-5 rotate-45" />
|
||||
Memory Utilization
|
||||
<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.self="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-ram-line class="size-5 text-primary" />
|
||||
</div>
|
||||
<h6 class="font-sans text-lg font-semibold leading-tight">
|
||||
Memory Utilization
|
||||
</h6>
|
||||
</div>
|
||||
<p class="block font-sans text-sm font-normal leading-relaxed text-base/90 mb-4">
|
||||
This graph displays memory utilization over time, showing both the current memory usage and the maximum available memory. It helps you monitor RAM consumption, identify memory leaks, and track memory allocation 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">Time Range:</span> Select from Hour, Day, Week, Month, or Year to view memory usage over different time periods.
|
||||
</p>
|
||||
<p class="block font-sans text-xs font-normal leading-relaxed text-base/75">
|
||||
<span class="font-semibold text-base/90">Aggregation:</span> Choose between Average (mean memory usage) or Maximum (peak memory usage) to see different perspectives of memory performance.
|
||||
</p>
|
||||
<p class="block font-sans text-xs font-normal leading-relaxed text-base/75">
|
||||
<span class="font-semibold text-base/90">Export:</span> Memory usage data can be exported to CSV format for further analysis or reporting.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</h2>
|
||||
</div>
|
||||
<div class="formRight flex flex-wrap items-center gap-2 text-sm">
|
||||
<select wire:model.live="memoryTimeRange">
|
||||
<option value="hour">Hour</option>
|
||||
<option value="day">Day</option>
|
||||
<option value="week">Week</option>
|
||||
<option value="month">Month</option>
|
||||
<option value="year">Year</option>
|
||||
</select>
|
||||
<select wire:model.live="memoryAggregation">
|
||||
<option value="average">Average</option>
|
||||
<option value="maximum">Maximum</option>
|
||||
</select>
|
||||
<button type="button" onclick="exportMemoryChartToCSV()"
|
||||
class="bg-background border border-neutral px-3 py-2 rounded-md text-sm font-semibold hover:bg-background/80 flex items-center gap-2 h-[calc(0.5rem*2+1.25rem)]"
|
||||
title="Export to CSV">
|
||||
<x-ri-download-line class="size-4" />
|
||||
Export
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative" x-data="{ memoryChartReady: false }" x-init="
|
||||
let memCheckAttempts = 0;
|
||||
const checkMem = setInterval(() => {
|
||||
memCheckAttempts++;
|
||||
if (document.querySelector('#memory-chart .apexcharts-canvas')) { memoryChartReady = true; clearInterval(checkMem); }
|
||||
else if (memCheckAttempts >= 150) { clearInterval(checkMem); }
|
||||
}, 200);
|
||||
">
|
||||
<div class="absolute inset-0 flex items-center justify-center skeleton-loading rounded-lg z-[1]"
|
||||
x-show="!memoryChartReady" x-transition:leave="transition ease-in duration-300" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0">
|
||||
<span class="text-xs text-base/40">Loading chart...</span>
|
||||
</div>
|
||||
<div id="memory-chart" wire:ignore></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Storage I/O Graph -->
|
||||
<div>
|
||||
<div class="bg-background-secondary hover:bg-background-secondary/80 border border-neutral p-4 rounded-lg">
|
||||
<div class="flex flex-col gap-2">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<h2 class="text-lg font-semibold flex items-center gap-2">
|
||||
<x-ri-hard-drive-line class="size-5 rotate-45" />
|
||||
Storage I/O
|
||||
<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.self="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-hard-drive-line class="size-5 text-primary" />
|
||||
</div>
|
||||
<h6 class="font-sans text-lg font-semibold leading-tight">
|
||||
Storage I/O
|
||||
</h6>
|
||||
</div>
|
||||
<p class="block font-sans text-sm font-normal leading-relaxed text-base/90 mb-4">
|
||||
This graph displays disk I/O throughput over time, showing both disk read and disk write rates. It helps you monitor storage performance, identify I/O bottlenecks, and track disk activity 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">Time Range:</span> Select from Hour, Day, Week, Month, or Year to view disk usage over different time periods.
|
||||
</p>
|
||||
<p class="block font-sans text-xs font-normal leading-relaxed text-base/75">
|
||||
<span class="font-semibold text-base/90">Aggregation:</span> Choose between Average (mean disk I/O) or Maximum (peak disk I/O) to see different perspectives of disk performance.
|
||||
</p>
|
||||
<p class="block font-sans text-xs font-normal leading-relaxed text-base/75">
|
||||
<span class="font-semibold text-base/90">Export:</span> Disk usage data can be exported to CSV format for further analysis or reporting.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</h2>
|
||||
</div>
|
||||
<div class="formRight flex flex-wrap items-center gap-2 text-sm">
|
||||
<select wire:model.live="diskTimeRange">
|
||||
<option value="hour">Hour</option>
|
||||
<option value="day">Day</option>
|
||||
<option value="week">Week</option>
|
||||
<option value="month">Month</option>
|
||||
<option value="year">Year</option>
|
||||
</select>
|
||||
<select wire:model.live="diskAggregation">
|
||||
<option value="average">Average</option>
|
||||
<option value="maximum">Maximum</option>
|
||||
</select>
|
||||
<button type="button" onclick="exportDiskChartToCSV()"
|
||||
class="bg-background border border-neutral px-3 py-2 rounded-md text-sm font-semibold hover:bg-background/80 flex items-center gap-2 h-[calc(0.5rem*2+1.25rem)]"
|
||||
title="Export to CSV">
|
||||
<x-ri-download-line class="size-4" />
|
||||
Export
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative" x-data="{ diskChartReady: false }" x-init="
|
||||
let diskCheckAttempts = 0;
|
||||
const checkDisk = setInterval(() => {
|
||||
diskCheckAttempts++;
|
||||
if (document.querySelector('#disk-chart .apexcharts-canvas')) { diskChartReady = true; clearInterval(checkDisk); }
|
||||
else if (diskCheckAttempts >= 150) { clearInterval(checkDisk); }
|
||||
}, 200);
|
||||
">
|
||||
<div class="absolute inset-0 flex items-center justify-center skeleton-loading rounded-lg z-[1]"
|
||||
x-show="!diskChartReady" x-transition:leave="transition ease-in duration-300" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0">
|
||||
<span class="text-xs text-base/40">Loading chart...</span>
|
||||
</div>
|
||||
<div id="disk-chart" wire:ignore></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@include('proxmox::partials.telemetry-charts')
|
||||
|
||||
<!-- Statistics History Table -->
|
||||
@php
|
||||
|
||||
Reference in New Issue
Block a user