feat: add real-time log updates in Proxmox Firewall component by dispatching events to the frontend, enhancing interactivity and user experience

extensions/Servers/Proxmox/Livewire/Firewall.php

@@ -937,6 +937,9 @@ class Firewall extends Component
             } elseif (empty($this->firewallLogs)) {
                 $this->logError = 'No firewall logs available. Ensure firewall logging is enabled in Proxmox (Datacenter > Firewall > Options).';
             }
+
+            // Dispatch event to update frontend without full re-render
+            $this->dispatch('logs-updated', logs: $this->firewallLogs);
         } catch (\Exception $e) {
             $errorMessage = $e->getMessage();
             if (method_exists($e, 'response') && $e->response()) {

extensions/Servers/Proxmox/views/firewall.blade.php

@@ -323,6 +323,7 @@
 
             @if(count($firewallLogs) > 0)
                 <div
+                    wire:ignore
                     x-data="{
                         logs: [],
                         searchTerm: '',
@@ -334,6 +335,12 @@
                                 ...log,
                             }));
                         },
+                        updateLogs(newLogs) {
+                            this.logs = (newLogs || []).map((log, index) => ({
+                                index,
+                                ...log,
+                            }));
+                        },
                         sort(field) {
                             if (this.sortField === field) {
                                 this.sortDirection = this.sortDirection === 'asc' ? 'desc' : 'asc';
@@ -378,7 +385,12 @@
                             });
                         },
                     }"
-                    x-init="initialize(@js($firewallLogs))"
+                    x-init="
+                        initialize(@js($firewallLogs));
+                        $wire.on('logs-updated', (event) => {
+                            updateLogs(event.logs || event[0]?.logs || event[0] || []);
+                        });
+                    "
                     class="space-y-4"
                 >
                     <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-3">