From 2046505109f117772b18a36064195f9c1eb55549 Mon Sep 17 00:00:00 2001
From: "Joseph.Rawlings" <root0091@gmail.com>
Date: Thu, 4 Dec 2025 20:17:24 -0500
Subject: [PATCH] refactor: reduce log limit to 500 and implement lazy loading
 for firewall logs in Proxmox component, enhancing performance and preventing
 payload issues

---
 .../Servers/Proxmox/Livewire/Firewall.php     | 24 +++++++++++--
 .../Servers/Proxmox/views/firewall.blade.php  | 36 +++++++++++++++++--
 2 files changed, 55 insertions(+), 5 deletions(-)

diff --git a/extensions/Servers/Proxmox/Livewire/Firewall.php b/extensions/Servers/Proxmox/Livewire/Firewall.php
index 2add15c69..3ffbd1367 100644
--- a/extensions/Servers/Proxmox/Livewire/Firewall.php
+++ b/extensions/Servers/Proxmox/Livewire/Firewall.php
@@ -155,13 +155,13 @@ class Firewall extends Component
 
     // Firewall Logs
     public array $firewallLogs = [];
-    public int $logLimit = 5000; // Fetch more logs to ensure fresh data
+    public int $logLimit = 500; // Reduced to prevent 413 errors
     public string $logError = '';
+    public bool $logsLoaded = false; // Track if logs have been loaded
     
     // Pagination for logs
     public int $currentPage = 1;
     public int $perPage = 50;
-    public bool $autoRefreshLogs = false;
     public ?string $lastLogRefresh = null;
 
     // Available IPs for rules
@@ -178,7 +178,7 @@ class Firewall extends Component
         $this->loadFirewallRules();
         $this->loadAliases();
         $this->loadIPSets();
-        $this->loadFirewallLogs();
+        // Don't load logs on mount - load lazily when logs tab is viewed
     }
 
     // ==================== AVAILABLE IPS ====================
@@ -1226,6 +1226,9 @@ class Firewall extends Component
             // Reset to page 1 when refreshing logs
             $this->currentPage = 1;
             
+            // Mark logs as loaded
+            $this->logsLoaded = true;
+            
             // Set last refresh timestamp
             $this->lastLogRefresh = now()->format('Y-m-d H:i:s');
             
@@ -1251,6 +1254,10 @@ class Firewall extends Component
     
     public function getPaginatedLogsProperty(): array
     {
+        if (!$this->logsLoaded || empty($this->firewallLogs)) {
+            return [];
+        }
+        
         $reversedLogs = array_reverse($this->firewallLogs);
         $offset = ($this->currentPage - 1) * $this->perPage;
         return array_slice($reversedLogs, $offset, $this->perPage);
@@ -1258,6 +1265,9 @@ class Firewall extends Component
     
     public function getTotalPagesProperty(): int
     {
+        if (!$this->logsLoaded || empty($this->firewallLogs)) {
+            return 1;
+        }
         return (int)ceil(count($this->firewallLogs) / $this->perPage);
     }
     
@@ -1288,6 +1298,14 @@ class Firewall extends Component
         // Reset to page 1 when changing per-page value
         $this->currentPage = 1;
     }
+    
+    public function clearLogs(): void
+    {
+        // Clear logs to reduce payload size when not viewing logs tab
+        $this->firewallLogs = [];
+        $this->logsLoaded = false;
+        $this->currentPage = 1;
+    }
 
     // ==================== LOG PARSING ====================
 
diff --git a/extensions/Servers/Proxmox/views/firewall.blade.php b/extensions/Servers/Proxmox/views/firewall.blade.php
index 1520e5eee..9b5f22787 100644
--- a/extensions/Servers/Proxmox/views/firewall.blade.php
+++ b/extensions/Servers/Proxmox/views/firewall.blade.php
@@ -726,7 +726,10 @@
                                                                 </div>
                                                                 
                 {{-- LOGS TAB --}}
-                <div x-show="activeTab === 'logs'" x-transition wire:poll.30s="loadFirewallLogs">
+                <div x-show="activeTab === 'logs'" 
+                     x-transition 
+                     wire:poll.30s="loadFirewallLogs"
+                     x-init="$watch('activeTab', value => { if (value === 'logs' && !@json($logsLoaded)) { $wire.loadFirewallLogs(); } })">
                     <div class="flex items-center justify-between mb-4">
                         <div>
                             <h3 class="text-lg font-semibold">Firewall Logs</h3>
@@ -785,7 +788,36 @@
                                                                     </div>
                     @endif
 
-                    @if(count($firewallLogs) > 0)
+                    @if(!$logsLoaded && count($firewallLogs) === 0)
+                        <div class="text-center py-12 text-base/60">
+                            <div class="loader-container-large" style="width: 50px; height: 50px; margin: 0 auto 1rem;">
+                                <style>
+                                    .loader-container-large {
+                                        display: flex;
+                                        align-items: center;
+                                        justify-content: center;
+                                    }
+                                    .loader-large {
+                                        width: 50px;
+                                        aspect-ratio: 1;
+                                        border-radius: 50%;
+                                        padding: 6px;
+                                        background:
+                                            conic-gradient(from 135deg at top, currentColor 90deg, #0000 0) 0 calc(50% - 4px)/17px 8.5px,
+                                            radial-gradient(farthest-side at bottom left, #0000 calc(100% - 6px), currentColor calc(100% - 5px) 99%, #0000) top right/50% 50% content-box content-box,
+                                            radial-gradient(farthest-side at top, #0000 calc(100% - 6px), currentColor calc(100% - 5px) 99%, #0000) bottom/100% 50% content-box content-box;
+                                        background-repeat: no-repeat;
+                                        animation: loader-spin-large 1s infinite linear;
+                                    }
+                                    @keyframes loader-spin-large { 
+                                        100% { transform: rotate(1turn); }
+                                    }
+                                </style>
+                                <div class="loader-large"></div>
+                            </div>
+                            <p class="text-sm">Loading firewall logs...</p>
+                        </div>
+                    @elseif(count($firewallLogs) > 0)
                         <div class="overflow-x-auto">
                             <table class="w-full">
                                 <thead>