refactor: update Proxmox Firewall component to prevent log loading on mount, enhancing performance and user control over log visibility
This commit is contained in:
@@ -58,7 +58,7 @@ class Firewall extends Component
|
||||
$this->loadFirewallOptions();
|
||||
$this->loadFirewallRules();
|
||||
$this->loadNetworkAdapters();
|
||||
$this->loadFirewallLogs();
|
||||
// Don't load logs on mount - only load when refresh button is clicked
|
||||
}
|
||||
|
||||
protected function loadAvailableIps(): void
|
||||
|
||||
@@ -324,46 +324,10 @@
|
||||
@if(count($firewallLogs) > 0)
|
||||
<div
|
||||
x-data="{
|
||||
logs: [],
|
||||
logs: @js($firewallLogs),
|
||||
searchTerm: '',
|
||||
sortField: 'timestamp_iso',
|
||||
sortDirection: 'desc',
|
||||
initialized: false,
|
||||
seenRaws: new Set(),
|
||||
initialize(initialLogs) {
|
||||
if (this.initialized) return;
|
||||
|
||||
if (initialLogs && initialLogs.length > 0) {
|
||||
this.logs = initialLogs.map((log, index) => ({
|
||||
index,
|
||||
...log,
|
||||
}));
|
||||
// Track which logs we've seen
|
||||
this.logs.forEach(log => {
|
||||
if (log.raw) this.seenRaws.add(log.raw);
|
||||
});
|
||||
this.initialized = true;
|
||||
}
|
||||
},
|
||||
updateLogs(newLogs) {
|
||||
if (!newLogs || newLogs.length === 0) return;
|
||||
|
||||
// Filter out logs we've already seen
|
||||
const logsToAdd = newLogs.filter(log => {
|
||||
if (!log.raw) return false;
|
||||
if (this.seenRaws.has(log.raw)) return false;
|
||||
this.seenRaws.add(log.raw);
|
||||
return true;
|
||||
});
|
||||
|
||||
if (logsToAdd.length > 0) {
|
||||
// Add new logs to the beginning (most recent first)
|
||||
this.logs = [...logsToAdd, ...this.logs].map((log, index) => ({
|
||||
index,
|
||||
...log,
|
||||
}));
|
||||
}
|
||||
},
|
||||
sort(field) {
|
||||
if (this.sortField === field) {
|
||||
this.sortDirection = this.sortDirection === 'asc' ? 'desc' : 'asc';
|
||||
@@ -408,15 +372,7 @@
|
||||
});
|
||||
},
|
||||
}"
|
||||
x-init="initialize(@js($firewallLogs))"
|
||||
@logs-updated.window="updateLogs($event.detail.logs || $event.detail[0]?.logs || $event.detail[0] || [])"
|
||||
x-effect="
|
||||
// Watch for changes in the backend data and merge new logs
|
||||
const backendLogs = @js($firewallLogs);
|
||||
if (initialized && backendLogs && backendLogs.length > 0) {
|
||||
updateLogs(backendLogs);
|
||||
}
|
||||
"
|
||||
@logs-updated.window="logs = $event.detail.logs || $event.detail[0]?.logs || $event.detail[0] || []"
|
||||
class="space-y-4"
|
||||
>
|
||||
<div class="flex flex-col md:flex-row md:items-center md:justify-between gap-3">
|
||||
|
||||
Reference in New Issue
Block a user