Add CSV export functionality for network connection data in Firewall component
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user