Joseph.Rawlings/Virtnet.bond
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

refactor: reduce log limit to 500 and implement lazy loading for firewall logs in Proxmox component, enhancing performance and preventing payload issues

Browse Source
This commit is contained in:
Joseph.Rawlings
2025-12-04 20:17:24 -05:00
parent 5801f90c88
commit 2046505109
2 changed files with 55 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
extensions/Servers/Proxmox/Livewire/Firewall.php
View File

@@ -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 ====================

36
extensions/Servers/Proxmox/views/firewall.blade.php
View File

@@ -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>