feat: add firewall logs functionality to Proxmox Firewall component, enabling users to view recent firewall activity and enhance monitoring capabilities

This commit is contained in:
2025-12-01 14:11:05 -05:00
parent aa4115732e
commit 51b9997c28
2 changed files with 209 additions and 16 deletions

View File

@@ -129,22 +129,23 @@
@if($adapter['mac'])
<div>MAC: <code class="text-xs">{{ $adapter['mac'] }}</code></div>
@endif
@if($adapter['bridge'])
<div>Bridge: <code class="text-xs">{{ $adapter['bridge'] }}</code></div>
@endif
</div>
<p class="text-xs text-base/50 mt-2">Enables or disables the firewall ability for this network adapter</p>
</div>
<div class="flex items-center gap-3 ml-4">
<span class="text-sm font-medium text-base/70">Disabled</span>
<label class="firewall-toggle-switch" wire:loading.attr="disabled">
<input
type="checkbox"
@if($adapterFirewallStates[$adapter['name']] ?? false) checked @endif
wire:click="toggleAdapterFirewall('{{ $adapter['name'] }}')"
wire:loading.attr="disabled">
<span class="firewall-toggle-slider"></span>
</label>
<span class="text-sm font-medium text-base/70">Enabled</span>
<div class="flex flex-col items-center gap-2 ml-4">
<span class="text-xs font-medium text-base/60">Firewall</span>
<div class="flex items-center gap-3">
<span class="text-sm font-medium text-base/70">Disabled</span>
<label class="firewall-toggle-switch" wire:loading.attr="disabled">
<input
type="checkbox"
@if($adapterFirewallStates[$adapter['name']] ?? false) checked @endif
wire:click="toggleAdapterFirewall('{{ $adapter['name'] }}')"
wire:loading.attr="disabled">
<span class="firewall-toggle-slider"></span>
</label>
<span class="text-sm font-medium text-base/70">Enabled</span>
</div>
</div>
</div>
</div>
@@ -260,7 +261,6 @@
<div>
<label class="block text-sm font-medium mb-2">Destination</label>
<select wire:model="ruleDest" class="w-full px-3 py-2 border border-neutral rounded-lg bg-background">
<option value="">Any</option>
@php
$allIps = collect();
if ($server->primaryIpv4) {
@@ -290,7 +290,6 @@
<div>
<label class="block text-sm font-medium mb-2">Interface</label>
<select wire:model="ruleIface" class="w-full px-3 py-2 border border-neutral rounded-lg bg-background">
<option value="">Any</option>
@foreach($networkAdapters as $adapter)
<option value="{{ $adapter['name'] }}">{{ $adapter['name'] }} ({{ ucfirst($adapter['model'] ?? 'Unknown') }})</option>
@endforeach
@@ -400,6 +399,75 @@
</div>
@endif
</div>
<!-- Firewall Logs Card -->
<div class="bg-background border border-neutral rounded-lg p-6">
<div class="flex items-center justify-between mb-4">
<div class="flex items-center gap-3">
<div class="flex items-center justify-center w-10 h-10 rounded-lg bg-primary/10">
<x-ri-file-list-3-line class="size-5 text-primary" />
</div>
<div>
<h2 class="text-xl font-semibold">Firewall Logs</h2>
<p class="text-sm text-base/60 mt-1">Recent firewall activity and blocked/allowed connections</p>
</div>
</div>
<button
wire:click="loadFirewallLogs"
wire:loading.attr="disabled"
class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors text-sm font-medium">
<x-ri-refresh-line class="size-4 inline mr-1" />
Refresh
</button>
</div>
@if(count($firewallLogs) > 0)
<div class="overflow-x-auto">
<table class="w-full border-collapse">
<thead>
<tr class="border-b border-neutral">
<th class="text-left py-3 px-4 font-semibold text-sm">Timestamp</th>
<th class="text-left py-3 px-4 font-semibold text-sm">Action</th>
<th class="text-left py-3 px-4 font-semibold text-sm">Source</th>
<th class="text-left py-3 px-4 font-semibold text-sm">Destination</th>
<th class="text-left py-3 px-4 font-semibold text-sm">Protocol</th>
<th class="text-left py-3 px-4 font-semibold text-sm">Source Port</th>
<th class="text-left py-3 px-4 font-semibold text-sm">Dest Port</th>
<th class="text-left py-3 px-4 font-semibold text-sm">TTL</th>
<th class="text-left py-3 px-4 font-semibold text-sm">ACK</th>
</tr>
</thead>
<tbody>
@foreach($firewallLogs as $log)
<tr class="border-b border-neutral/20 hover:bg-background-secondary/50">
<td class="py-3 px-4 text-sm">{{ $log['timestamp'] ?? '-' }}</td>
<td class="py-3 px-4 text-sm">
<span class="px-2 py-1 rounded text-xs font-medium
{{ ($log['action'] ?? '') === 'ACCEPT' ? 'bg-success/20 text-success' : '' }}
{{ ($log['action'] ?? '') === 'REJECT' ? 'bg-warning/20 text-warning' : '' }}
{{ ($log['action'] ?? '') === 'DROP' ? 'bg-error/20 text-error' : '' }}">
{{ $log['action'] ?? '-' }}
</span>
</td>
<td class="py-3 px-4 text-sm"><code class="text-xs">{{ $log['source'] ?? '-' }}</code></td>
<td class="py-3 px-4 text-sm"><code class="text-xs">{{ $log['destination'] ?? '-' }}</code></td>
<td class="py-3 px-4 text-sm">{{ $log['proto'] ?? '-' }}</td>
<td class="py-3 px-4 text-sm">{{ $log['spt'] ?? '-' }}</td>
<td class="py-3 px-4 text-sm">{{ $log['dpt'] ?? '-' }}</td>
<td class="py-3 px-4 text-sm">{{ $log['ttl'] ?? '-' }}</td>
<td class="py-3 px-4 text-sm">{{ $log['ack'] ?? '-' }}</td>
</tr>
@endforeach
</tbody>
</table>
</div>
@else
<div class="text-center py-8 text-base/60">
<x-ri-file-list-3-line class="size-12 mx-auto mb-3 opacity-50" />
<p>No firewall logs available</p>
</div>
@endif
</div>
@else
<div class="bg-background-secondary border border-neutral/20 rounded-lg p-8 text-center">
<x-ri-shield-line class="size-16 mx-auto mb-4 opacity-50" />