Add CSV export functionality for network connection data in Firewall component

This commit is contained in:
2025-12-10 11:59:21 -05:00
parent 43c31495a2
commit 835fc9216d

View File

@@ -1107,6 +1107,44 @@
this.error = 'Failed to load connection data';
this.loading = false;
});
},
exportToCsv() {
if (!this.connectionData || !this.connectionData.connections || this.connectionData.connections.length === 0) {
return;
}
const headers = ['Protocol', 'Source IP', 'Source Port', 'Destination IP', 'Destination Port', 'Direction', 'State', 'Interface', 'Bytes', 'Packets'];
const rows = this.connectionData.connections.map(conn => [
conn.protocol || '',
conn.source || '',
conn.source_port || '',
conn.destination || '',
conn.destination_port || '',
conn.direction || '',
conn.state || '',
conn.interface || '',
conn.bytes || 0,
conn.packets || 0
]);
let csvContent = headers.join(',') + '\n';
rows.forEach(row => {
csvContent += row.map(cell => {
const str = String(cell);
if (str.includes(',') || str.includes('"') || str.includes('\n')) {
return '"' + str.replace(/"/g, '""') + '"';
}
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 = `network-analysis-${this.sourceIP}-${timestamp}.csv`;
link.click();
URL.revokeObjectURL(link.href);
}
}"
x-cloak>
@@ -1282,10 +1320,18 @@
<div class="border-t border-neutral/20 bg-background/50 p-4">
<div class="flex items-center justify-between">
<p class="text-xs text-base/50">Data from Core Router network state tracking</p>
<button @click="open = false"
class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors text-sm font-medium">
Close
</button>
<div class="flex items-center gap-2">
<button @click="exportToCsv()"
x-show="connectionData && connectionData.connections && connectionData.connections.length > 0"
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 @click="open = false"
class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors text-sm font-medium">
Close
</button>
</div>
</div>
</div>
</div>