Add CSV export functionality for firewall logs and update port column headers

This commit is contained in:
2025-12-10 12:10:55 -05:00
parent 5c76a381d0
commit 24eee90728

View File

@@ -819,6 +819,49 @@
</div>
</div>
<div class="flex items-center gap-3">
<button type="button"
x-data
@click="
const logs = @js($firewallLogs);
if (!logs || logs.length === 0) {
alert('No logs to export');
return;
}
const headers = ['Timestamp', 'Action', 'Source', 'Destination', 'Protocol', 'Source Port', 'Destination Port', 'Chain', 'Interface'];
const rows = logs.map(log => [
log.timestamp_display || log.timestamp || '',
log.action || '',
log.source || '',
log.destination || '',
log.protocol || '',
log.source_port || '',
log.destination_port || '',
log.chain || '',
log.interface || ''
]);
let csvContent = headers.join(',') + '\n';
const dq = String.fromCharCode(34);
rows.forEach(row => {
csvContent += row.map(cell => {
const str = String(cell);
if (str.indexOf(',') !== -1 || str.indexOf(dq) !== -1 || str.indexOf('\n') !== -1) {
return dq + str.replace(new RegExp(dq, 'g'), dq + dq) + dq;
}
return str;
}).join(',') + '\n';
});
const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
const link = document.createElement('a');
const timestamp = new Date().toISOString().slice(0, 19).replace(/[T:]/g, '-');
link.href = URL.createObjectURL(blob);
link.download = 'firewall-logs-' + timestamp + '.csv';
link.click();
URL.revokeObjectURL(link.href);
"
class="px-4 py-2 bg-secondary text-white rounded-lg hover:bg-secondary/90 transition-colors text-sm font-medium flex items-center gap-2">
<x-ri-download-line class="size-4" />
Export CSV
</button>
<button type="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 flex items-center gap-2">
<span wire:loading.remove wire:target="loadFirewallLogs">
<x-ri-refresh-line class="size-4" />
@@ -854,7 +897,8 @@
<th class="text-left py-3 px-4 text-xs font-semibold text-base/70 uppercase">Source</th>
<th class="text-left py-3 px-4 text-xs font-semibold text-base/70 uppercase">Destination</th>
<th class="text-left py-3 px-4 text-xs font-semibold text-base/70 uppercase">Protocol</th>
<th class="text-left py-3 px-4 text-xs font-semibold text-base/70 uppercase">Port</th>
<th class="text-left py-3 px-4 text-xs font-semibold text-base/70 uppercase">Src Port</th>
<th class="text-left py-3 px-4 text-xs font-semibold text-base/70 uppercase">Dest Port</th>
<th class="text-center py-3 px-4 text-xs font-semibold text-base/70 uppercase">Analysis</th>
</tr>
</thead>
@@ -1071,6 +1115,7 @@
</div>
</td>
<td class="py-3 px-4 text-sm">{{ $log['protocol'] ?? '-' }}</td>
<td class="py-3 px-4 text-xs font-mono">{{ $log['source_port'] ?? '-' }}</td>
<td class="py-3 px-4 text-xs font-mono">{{ $log['destination_port'] ?? '-' }}</td>
<td class="py-3 px-4 text-center">
@php