feat: integrate network analysis feature in firewall view with detailed connection data display
This commit is contained in:
@@ -844,6 +844,7 @@
|
||||
<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-center py-3 px-4 text-xs font-semibold text-base/70 uppercase">Analysis</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@@ -1017,6 +1018,211 @@
|
||||
</td>
|
||||
<td class="py-3 px-4 text-sm">{{ $log['protocol'] ?? '-' }}</td>
|
||||
<td class="py-3 px-4 text-xs font-mono">{{ $log['destination_port'] ?? '-' }}</td>
|
||||
<td class="py-3 px-4 text-center">
|
||||
@php
|
||||
$sourceIP = $log['source'] ?? '';
|
||||
$destIP = $log['destination'] ?? '';
|
||||
$sourcePort = $log['source_port'] ?? '';
|
||||
$destPort = $log['destination_port'] ?? '';
|
||||
$protocol = $log['protocol'] ?? '';
|
||||
@endphp
|
||||
<div class="relative"
|
||||
x-data="{
|
||||
open: false,
|
||||
loading: false,
|
||||
connectionData: null,
|
||||
error: null,
|
||||
loadConnectionData() {
|
||||
this.loading = true;
|
||||
this.error = null;
|
||||
$wire.getNetworkAnalysisForLog('{{ $sourceIP }}', '{{ $destIP }}', '{{ $sourcePort }}', '{{ $destPort }}', '{{ $protocol }}')
|
||||
.then(data => {
|
||||
this.connectionData = data;
|
||||
this.loading = false;
|
||||
})
|
||||
.catch(err => {
|
||||
this.error = 'Failed to load connection data';
|
||||
this.loading = false;
|
||||
});
|
||||
}
|
||||
}"
|
||||
x-cloak>
|
||||
<button type="button"
|
||||
@click="open = true; if (!connectionData && !loading) { loadConnectionData(); }"
|
||||
class="text-primary hover:text-primary/80 transition-colors p-1 rounded hover:bg-primary/10"
|
||||
title="View Network Analysis">
|
||||
<x-ri-line-chart-line class="size-4" />
|
||||
</button>
|
||||
|
||||
{{-- Network Analysis Modal --}}
|
||||
<div x-show="open"
|
||||
x-transition:enter="transition ease-out duration-200"
|
||||
x-transition:enter-start="opacity-0"
|
||||
x-transition:enter-end="opacity-100"
|
||||
x-transition:leave="transition ease-in duration-150"
|
||||
x-transition:leave-start="opacity-100"
|
||||
x-transition:leave-end="opacity-0"
|
||||
@click="open = false"
|
||||
@keydown.escape.window="open = false"
|
||||
class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm flex items-center justify-center p-4"
|
||||
style="display: none;">
|
||||
<div @click.stop
|
||||
class="relative w-full max-w-5xl bg-gradient-to-br from-background via-background-secondary to-background rounded-2xl border border-primary/20 shadow-2xl max-h-[90vh] overflow-hidden">
|
||||
<button @click="open = false"
|
||||
class="absolute top-4 right-4 text-base/50 hover:text-base transition-colors z-10 bg-background/80 backdrop-blur-sm rounded-full p-2 hover:bg-background">
|
||||
<x-ri-close-line class="size-5" />
|
||||
</button>
|
||||
|
||||
{{-- Modal Header --}}
|
||||
<div class="bg-gradient-to-r from-primary/10 to-secondary/10 border-b border-primary/20 p-6">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-12 h-12 rounded-xl bg-primary/20 flex items-center justify-center">
|
||||
<x-ri-line-chart-line class="size-6 text-primary" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-xl font-bold text-base">Network Connection Analysis</h3>
|
||||
<p class="text-sm text-base/60 mt-1">Detailed connection information from firewall state</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Modal Content --}}
|
||||
<div class="p-6 overflow-y-auto" style="max-height: calc(90vh - 180px);">
|
||||
{{-- Loading State --}}
|
||||
<div x-show="loading && !connectionData" class="text-center py-12">
|
||||
<div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-primary/10 mb-4">
|
||||
<svg class="animate-spin size-8 text-primary" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
|
||||
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
|
||||
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<p class="text-sm text-base/60">Fetching connection data...</p>
|
||||
</div>
|
||||
|
||||
{{-- Error State --}}
|
||||
<div x-show="error && !loading && !connectionData" class="text-center py-12">
|
||||
<div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-warning/10 mb-4">
|
||||
<x-ri-error-warning-line class="size-8 text-warning" />
|
||||
</div>
|
||||
<p class="text-sm text-warning" x-text="error"></p>
|
||||
</div>
|
||||
|
||||
{{-- Connection Data Display --}}
|
||||
<div x-show="connectionData && !loading">
|
||||
<template x-if="connectionData && connectionData.connections && connectionData.connections.length > 0">
|
||||
<div>
|
||||
<template x-for="(conn, index) in connectionData.connections" :key="index">
|
||||
<div class="mb-6 last:mb-0 bg-background/50 border border-neutral/40 rounded-xl p-5 hover:border-primary/30 transition-colors">
|
||||
{{-- Connection Header --}}
|
||||
<div class="flex items-center justify-between mb-4 pb-3 border-b border-neutral/20">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="px-3 py-1 rounded-lg text-xs font-semibold bg-primary/20 text-primary border border-primary/30" x-text="'Connection #' + (index + 1)"></span>
|
||||
<span class="px-2 py-1 rounded text-xs font-medium bg-secondary/20 text-secondary" x-text="conn.protocol || 'N/A'"></span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<span :class="{
|
||||
'bg-success/20 text-success border-success/30': conn.direction === 'Inbound',
|
||||
'bg-info/20 text-info border-info/30': conn.direction === 'Outbound'
|
||||
}" class="px-2 py-1 rounded text-xs font-medium border" x-text="conn.direction || 'N/A'"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Connection Details Grid --}}
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
{{-- Source Information --}}
|
||||
<div class="space-y-3">
|
||||
<h4 class="text-sm font-semibold text-success flex items-center gap-2">
|
||||
<x-ri-arrow-right-line class="size-4" />
|
||||
Source
|
||||
</h4>
|
||||
<div class="pl-6 space-y-2">
|
||||
<div class="flex items-center justify-between py-1.5 px-3 bg-background rounded-lg">
|
||||
<span class="text-xs text-base/60">IP Address</span>
|
||||
<span class="text-sm font-mono font-semibold" x-text="conn.source || 'N/A'"></span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between py-1.5 px-3 bg-background rounded-lg">
|
||||
<span class="text-xs text-base/60">Port</span>
|
||||
<span class="text-sm font-mono font-semibold" x-text="conn.source_port || 'N/A'"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Destination Information --}}
|
||||
<div class="space-y-3">
|
||||
<h4 class="text-sm font-semibold text-error flex items-center gap-2">
|
||||
<x-ri-arrow-left-line class="size-4" />
|
||||
Destination
|
||||
</h4>
|
||||
<div class="pl-6 space-y-2">
|
||||
<div class="flex items-center justify-between py-1.5 px-3 bg-background rounded-lg">
|
||||
<span class="text-xs text-base/60">IP Address</span>
|
||||
<span class="text-sm font-mono font-semibold" x-text="conn.destination || 'N/A'"></span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between py-1.5 px-3 bg-background rounded-lg">
|
||||
<span class="text-xs text-base/60">Port</span>
|
||||
<span class="text-sm font-mono font-semibold" x-text="conn.destination_port || 'N/A'"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Connection Statistics --}}
|
||||
<div class="mt-4 pt-4 border-t border-neutral/20">
|
||||
<h4 class="text-sm font-semibold mb-3 flex items-center gap-2">
|
||||
<x-ri-bar-chart-line class="size-4 text-primary" />
|
||||
Traffic Statistics
|
||||
</h4>
|
||||
<div class="grid grid-cols-2 md:grid-cols-4 gap-3">
|
||||
<div class="bg-gradient-to-br from-primary/10 to-primary/5 border border-primary/20 rounded-lg p-3">
|
||||
<p class="text-xs text-base/60 mb-1">Data Transferred</p>
|
||||
<p class="text-lg font-bold text-primary" x-text="conn.bytes_human || '0 B'"></p>
|
||||
</div>
|
||||
<div class="bg-gradient-to-br from-secondary/10 to-secondary/5 border border-secondary/20 rounded-lg p-3">
|
||||
<p class="text-xs text-base/60 mb-1">Packets</p>
|
||||
<p class="text-lg font-bold text-secondary" x-text="conn.packets || '0'"></p>
|
||||
</div>
|
||||
<div class="bg-gradient-to-br from-info/10 to-info/5 border border-info/20 rounded-lg p-3">
|
||||
<p class="text-xs text-base/60 mb-1">State</p>
|
||||
<p class="text-sm font-bold text-info" x-text="conn.state || 'UNKNOWN'"></p>
|
||||
</div>
|
||||
<div class="bg-gradient-to-br from-success/10 to-success/5 border border-success/20 rounded-lg p-3">
|
||||
<p class="text-xs text-base/60 mb-1">Interface</p>
|
||||
<p class="text-sm font-bold text-success" x-text="conn.interface || 'N/A'"></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
{{-- No Connections Found --}}
|
||||
<template x-if="connectionData && (!connectionData.connections || connectionData.connections.length === 0)">
|
||||
<div class="text-center py-12">
|
||||
<div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-base/10 mb-4">
|
||||
<x-ri-information-line class="size-8 text-base/60" />
|
||||
</div>
|
||||
<p class="text-sm text-base/60">No matching network analysis data found for this log entry.</p>
|
||||
<p class="text-xs text-base/50 mt-2">The connection may have already closed or network analysis data may not be available.</p>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Modal Footer --}}
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
@endforeach
|
||||
</tbody>
|
||||
|
||||
Reference in New Issue
Block a user