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.error = 'Failed to load connection data';
|
||||||
this.loading = false;
|
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>
|
x-cloak>
|
||||||
@@ -1282,10 +1320,18 @@
|
|||||||
<div class="border-t border-neutral/20 bg-background/50 p-4">
|
<div class="border-t border-neutral/20 bg-background/50 p-4">
|
||||||
<div class="flex items-center justify-between">
|
<div class="flex items-center justify-between">
|
||||||
<p class="text-xs text-base/50">Data from Core Router network state tracking</p>
|
<p class="text-xs text-base/50">Data from Core Router network state tracking</p>
|
||||||
<button @click="open = false"
|
<div class="flex items-center gap-2">
|
||||||
class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors text-sm font-medium">
|
<button @click="exportToCsv()"
|
||||||
Close
|
x-show="connectionData && connectionData.connections && connectionData.connections.length > 0"
|
||||||
</button>
|
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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user