Enhance LogViewer and NetworkView components for improved log filtering and selection

- Added support for filtering network logs based on selected nodes and links in the NetworkView component.
- Updated LogViewer to display selected node or link information, allowing users to clear filters easily.
- Refactored LogViewer props to include new selection handling functions for better user interaction.

Author: rajsinghtech

frontend/src/components/LogViewer.tsx

@@ -7,7 +7,8 @@ import {
   Download, 
   Search,
   ArrowDown,
-  Loader
+  Loader,
+  X
 } from 'lucide-react'
 import type { NetworkFlowLog, TrafficFlow } from '@/types/tailscale'
 
@@ -43,8 +44,11 @@ interface LogViewerProps {
   searchQuery?: string
   protocolFilters?: Set<string>
   trafficTypeFilters?: Set<string>
+  selectedNode?: { id: string; displayName: string; ips?: string[]; ip: string } | null
+  selectedLink?: { source: string; target: string; originalSource: string; originalTarget: string } | null
   onSelectLog?: (entry: LogEntry) => void
   onHeightChange?: (height: number) => void
+  onClearSelection?: () => void
 }
 
 // Worker for heavy data processing
@@ -183,8 +187,11 @@ const LogViewer: React.FC<LogViewerProps> = ({
   searchQuery = '',
   protocolFilters = new Set(),
   trafficTypeFilters = new Set(),
+  selectedNode,
+  selectedLink,
   onSelectLog,
-  onHeightChange
+  onHeightChange,
+  onClearSelection
 }) => {
   const [isExpanded, setIsExpanded] = useState(false)
   const [panelHeight, setPanelHeight] = useState(300)
@@ -460,6 +467,23 @@ const LogViewer: React.FC<LogViewerProps> = ({
             {isExpanded ? <ChevronDown className="w-4 h-4" /> : <ChevronUp className="w-4 h-4" />}
             <span>Network Logs ({filteredLogs.length.toLocaleString()} entries)</span>
             {isProcessing && <Loader className="w-4 h-4 animate-spin" />}
+            {(selectedNode || selectedLink) && (
+              <div className="flex items-center gap-1 px-2 py-0.5 bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 text-xs rounded-full">
+                <span>{selectedNode ? `Filtered by ${selectedNode.displayName}` : 'Filtered by connection'}</span>
+                {onClearSelection && (
+                  <button 
+                    onClick={(e) => {
+                      e.stopPropagation()
+                      onClearSelection()
+                    }}
+                    className="hover:bg-blue-200 dark:hover:bg-blue-800 rounded-full p-0.5"
+                    title="Clear filter"
+                  >
+                    <X className="w-3 h-3" />
+                  </button>
+                )}
+              </div>
+            )}
           </button>
 
           {isExpanded && (

frontend/src/pages/NetworkView.tsx

@@ -558,6 +558,47 @@ const NetworkView: React.FC = () => {
     }
   }, [networkLogs, devices, servicesRecords])
 
+  // Filter network logs based on selected node/link
+  const filteredNetworkLogs = useMemo(() => {
+    if (!selectedNode && !selectedLink) {
+      return networkLogs
+    }
+
+    return networkLogs.filter(log => {
+      const allTraffic = [
+        ...(log.virtualTraffic || []).map((t: any) => ({ ...t, type: 'virtual' })),
+        ...(log.subnetTraffic || []).map((t: any) => ({ ...t, type: 'subnet' })),
+        ...(log.physicalTraffic || []).map((t: any) => ({ ...t, type: 'physical' }))
+      ]
+
+      return allTraffic.some(traffic => {
+        const srcIP = extractIP(traffic.src)
+        const dstIP = extractIP(traffic.dst)
+
+        if (selectedNode) {
+          // Check if this traffic involves the selected node
+          const nodeIPs = selectedNode.ips || [selectedNode.ip]
+          return nodeIPs.some(ip => ip === srcIP || ip === dstIP)
+        }
+
+        if (selectedLink) {
+          // Check if this traffic matches the selected link
+          const linkSourceIP = typeof selectedLink.source === 'string' ? 
+            selectedLink.originalSource : 
+            selectedLink.originalSource
+          const linkTargetIP = typeof selectedLink.target === 'string' ? 
+            selectedLink.originalTarget : 
+            selectedLink.originalTarget
+          
+          return (srcIP === linkSourceIP && dstIP === linkTargetIP) ||
+                 (srcIP === linkTargetIP && dstIP === linkSourceIP)
+        }
+
+        return false
+      })
+    })
+  }, [networkLogs, selectedNode, selectedLink])
+
   // Apply filters
   const filteredData = useMemo(() => {
     let filteredNodes = nodes.filter(node => {
@@ -1339,12 +1380,22 @@ const NetworkView: React.FC = () => {
 
       {/* Log Viewer */}
       <LogViewer
-        networkLogs={networkLogs as any[]}
+        networkLogs={filteredNetworkLogs as any[]}
         devices={devices}
         searchQuery={searchQuery}
         protocolFilters={protocolFilters}
         trafficTypeFilters={trafficTypeFilters}
         onHeightChange={setLogViewerHeight}
+        selectedNode={selectedNode}
+        selectedLink={selectedLink ? {
+          ...selectedLink,
+          source: typeof selectedLink.source === 'string' ? selectedLink.source : selectedLink.source.id,
+          target: typeof selectedLink.target === 'string' ? selectedLink.target : selectedLink.target.id
+        } : null}
+        onClearSelection={() => {
+          setSelectedNode(null)
+          setSelectedLink(null)
+        }}
         onSelectLog={(logEntry) => {
           // Highlight the corresponding nodes in the graph
           const srcNode = nodes.find(n =>