From 1db8d0a9e9b7870a1db32f2f2969ad7e63a9bb39 Mon Sep 17 00:00:00 2001
From: "Joseph.Rawlings" <root0091@gmail.com>
Date: Mon, 2 Feb 2026 19:01:33 -0500
Subject: [PATCH] Refactor Live Network Traffic section for improved layout and
 functionality

---
 .../Servers/Proxmox/views/overview.blade.php  | 208 +++++++++---------
 1 file changed, 101 insertions(+), 107 deletions(-)

diff --git a/extensions/Servers/Proxmox/views/overview.blade.php b/extensions/Servers/Proxmox/views/overview.blade.php
index b6694309f..ea20ef13e 100644
--- a/extensions/Servers/Proxmox/views/overview.blade.php
+++ b/extensions/Servers/Proxmox/views/overview.blade.php
@@ -762,9 +762,9 @@
 
         </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 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 items-center gap-2 min-w-0">
             <h2 class="text-lg font-semibold break-words">
@@ -1063,116 +1063,12 @@
     </p>
     </div>
 
-
-                    
-
-
-
-                    
-        
         </div>
 
         @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 -->
-        <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>
                     <div class="flex items-center gap-2 min-w-0">
@@ -1340,6 +1236,104 @@
                 @endif
             </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>