Refactor Live Network Traffic section for improved layout and functionality
This commit is contained in:
@@ -762,9 +762,9 @@
|
|||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div class="space-y-6">
|
||||||
<div style="background-image: url('https://billing.virtnet.bond/assets/images/dns.jpeg'); background-size: 100%; height: 5.5vh;" class="flex flex-col p-4 rounded-t-lg border-t border-x border-neutral "></div>
|
<div style="background-image: url('https://billing.virtnet.bond/assets/images/dns.jpeg'); background-size: 100%; height: 5.5vh;" class="flex flex-col p-4 rounded-t-lg border-t border-x border-neutral "></div>
|
||||||
<div class="fflex flex-col gap-4 bg-background-secondary hover:bg-background-secondary/80 border-m border-x border-neutral p-4 ">
|
<div class="flex flex-col gap-4 bg-background-secondary hover:bg-background-secondary/80 border-x border-neutral p-4 ">
|
||||||
<div class="flex flex-col gap-2">
|
<div class="flex flex-col gap-2">
|
||||||
<div class="flex items-center gap-2 min-w-0">
|
<div class="flex items-center gap-2 min-w-0">
|
||||||
<h2 class="text-lg font-semibold break-words">
|
<h2 class="text-lg font-semibold break-words">
|
||||||
@@ -1063,116 +1063,12 @@
|
|||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@endif
|
@endif
|
||||||
|
|
||||||
<!-- Live Network Traffic -->
|
|
||||||
<div wire:ignore class="bg-background-secondary border border-neutral rounded-xl p-6 h-full w-full mt-0">
|
|
||||||
<div class="flex items-center justify-between mb-4">
|
|
||||||
<div>
|
|
||||||
<div class="flex items-center gap-2 min-w-0">
|
|
||||||
<h3 class="text-lg font-semibold flex items-center gap-2">
|
|
||||||
<svg class="w-5 h-5 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
|
|
||||||
</svg>
|
|
||||||
Live Network Traffic
|
|
||||||
</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"
|
|
||||||
@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">
|
|
||||||
<svg class="w-5 h-5 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
<h6 class="font-sans text-lg font-semibold leading-tight">
|
|
||||||
Live Network Traffic
|
|
||||||
</h6>
|
|
||||||
</div>
|
|
||||||
<p class="block font-sans text-sm font-normal leading-relaxed text-base/90 mb-4">
|
|
||||||
Displays real-time network bandwidth statistics for each network interface on your virtual machine, including current transfer rates, peak values, and historical traffic graphs.
|
|
||||||
</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">Current Rates:</span> Shows the instantaneous download and upload speeds in bytes per second, updated every 30 seconds from Proxmox RRD data.
|
|
||||||
</p>
|
|
||||||
<p class="block font-sans text-xs font-normal leading-relaxed text-base/75">
|
|
||||||
<span class="font-semibold text-base/90">Peak Values:</span> Tracks the highest observed transfer rates for each direction since the page was loaded, helping identify maximum bandwidth usage.
|
|
||||||
</p>
|
|
||||||
<p class="block font-sans text-xs font-normal leading-relaxed text-base/75">
|
|
||||||
<span class="font-semibold text-base/90">Historical Graph:</span> Click the "Graph" button to view a line chart showing network traffic trends over the last 10 minutes, with separate lines for download (green) and upload (blue) traffic.
|
|
||||||
</p>
|
|
||||||
<p class="block font-sans text-xs font-normal leading-relaxed text-base/75">
|
|
||||||
<span class="font-semibold text-base/90">Total Statistics:</span> Displays cumulative data transfer totals (total bytes in and out) from the VM's start, providing a long-term view of network usage.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<p class="text-sm text-base/60 mt-1">Real-time bandwidth monitoring • Updates every 30 seconds</p>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<button type="button"
|
|
||||||
@click="exportLiveNetworkTrafficToCSV()"
|
|
||||||
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 network traffic data to CSV">
|
|
||||||
<x-ri-download-line class="size-4" />
|
|
||||||
Export
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Network Traffic Sections -->
|
|
||||||
<div id="network-traffic-container" data-live-traffic-endpoint="{{ route('proxmox.server.live-traffic', $server) }}">
|
|
||||||
<!-- Initial placeholder; replaced on first successful poll -->
|
|
||||||
<div class="border border-dashed border-neutral/40 rounded-lg p-6 text-center">
|
|
||||||
<p class="text-sm text-base/60">Loading live network statistics…</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Notes Section -->
|
<!-- Notes Section -->
|
||||||
<div id="notes-section" class="bg-background-secondary hover:bg-background-secondary/80 border border-neutral rounded-xl p-6 h-full flex flex-col mt-0" x-data="{ showExportErrorModal: false }" x-cloak>
|
<div id="notes-section" class="bg-background-secondary hover:bg-background-secondary/80 border border-neutral rounded-xl p-6 flex flex-col mt-6" x-data="{ showExportErrorModal: false }" x-cloak>
|
||||||
<div class="flex items-center justify-between mb-4">
|
<div class="flex items-center justify-between mb-4">
|
||||||
<div>
|
<div>
|
||||||
<div class="flex items-center gap-2 min-w-0">
|
<div class="flex items-center gap-2 min-w-0">
|
||||||
@@ -1340,6 +1236,104 @@
|
|||||||
@endif
|
@endif
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Live Network Traffic (Full Width) -->
|
||||||
|
<div wire:ignore class="bg-background-secondary border border-neutral rounded-xl p-6 h-full w-full mt-0">
|
||||||
|
<div class="flex items-center justify-between mb-4">
|
||||||
|
<div>
|
||||||
|
<div class="flex items-center gap-2 min-w-0">
|
||||||
|
<h3 class="text-lg font-semibold flex items-center gap-2">
|
||||||
|
<svg class="w-5 h-5 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
|
||||||
|
</svg>
|
||||||
|
Live Network Traffic
|
||||||
|
</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"
|
||||||
|
@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">
|
||||||
|
<svg class="w-5 h-5 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h6 class="font-sans text-lg font-semibold leading-tight">
|
||||||
|
Live Network Traffic
|
||||||
|
</h6>
|
||||||
|
</div>
|
||||||
|
<p class="block font-sans text-sm font-normal leading-relaxed text-base/90 mb-4">
|
||||||
|
Displays real-time network bandwidth statistics for each network interface on your virtual machine, including current transfer rates, peak values, and historical traffic graphs.
|
||||||
|
</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">Current Rates:</span> Shows the instantaneous download and upload speeds in bytes per second, updated every 30 seconds from Proxmox RRD data.
|
||||||
|
</p>
|
||||||
|
<p class="block font-sans text-xs font-normal leading-relaxed text-base/75">
|
||||||
|
<span class="font-semibold text-base/90">Peak Values:</span> Tracks the highest observed transfer rates for each direction since the page was loaded, helping identify maximum bandwidth usage.
|
||||||
|
</p>
|
||||||
|
<p class="block font-sans text-xs font-normal leading-relaxed text-base/75">
|
||||||
|
<span class="font-semibold text-base/90">Historical Graph:</span> Click the "Graph" button to view a line chart showing network traffic trends over the last 10 minutes, with separate lines for download (green) and upload (blue) traffic.
|
||||||
|
</p>
|
||||||
|
<p class="block font-sans text-xs font-normal leading-relaxed text-base/75">
|
||||||
|
<span class="font-semibold text-base/90">Total Statistics:</span> Displays cumulative data transfer totals (total bytes in and out) from the VM's start, providing a long-term view of network usage.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p class="text-sm text-base/60 mt-1">Real-time bandwidth monitoring • Updates every 30 seconds</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<button type="button"
|
||||||
|
@click="exportLiveNetworkTrafficToCSV()"
|
||||||
|
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 network traffic data to CSV">
|
||||||
|
<x-ri-download-line class="size-4" />
|
||||||
|
Export
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Network Traffic Sections -->
|
||||||
|
<div id="network-traffic-container" data-live-traffic-endpoint="{{ route('proxmox.server.live-traffic', $server) }}">
|
||||||
|
<!-- Initial placeholder; replaced on first successful poll -->
|
||||||
|
<div class="border border-dashed border-neutral/40 rounded-lg p-6 text-center">
|
||||||
|
<p class="text-sm text-base/60">Loading live network statistics…</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user