From 630d0b3426e2c0328ce0cb24a0f2356383790ba4 Mon Sep 17 00:00:00 2001
From: "Joseph.Rawlings" <root0091@gmail.com>
Date: Mon, 2 Feb 2026 19:13:30 -0500
Subject: [PATCH] Add Live Network Traffic section with real-time monitoring
 and export functionality

---
 .../Servers/Proxmox/views/overview.blade.php  | 196 +++++++++---------
 1 file changed, 97 insertions(+), 99 deletions(-)

diff --git a/extensions/Servers/Proxmox/views/overview.blade.php b/extensions/Servers/Proxmox/views/overview.blade.php
index ece3626dd..48d065db3 100644
--- a/extensions/Servers/Proxmox/views/overview.blade.php
+++ b/extensions/Servers/Proxmox/views/overview.blade.php
@@ -760,6 +760,103 @@
 
             </div>
 
+            <!-- Live Network Traffic -->
+            <div wire:ignore class="bg-background-secondary border border-neutral rounded-xl p-6">
+                <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>
+
         </div>
         
 <div class="space-y-6">
@@ -1239,105 +1336,6 @@
     </div>
 </div>
 
-<!-- Live Network Traffic (Full Width) -->
-<div wire:ignore class="bg-background-secondary border border-neutral rounded-xl p-6 w-full mt-8">
-    <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>
-        </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>
-
 
 
 @once