feat(connections): add network protocol filter

Filter connections by metadata.network (All/TCP/UDP) in both table and
list layouts, combined with search, and kept across page switches like
the existing search state.

Refs #6140

Changelog.md

@@ -39,6 +39,7 @@
 <details>
 <summary><strong> ✨ 新增功能 </strong></summary>
 
+- 新增连接页面按网络协议（TCP/UDP）筛选连接
 
 </details>
 

src/locales/ar/connections.json

@@ -21,6 +21,9 @@
       "uploadSpeed": "سرعة الرفع",
       "downloadSpeed": "سرعة التنزيل"
     },
+    "filter": {
+      "allNetworks": "كل الشبكات"
+    },
     "actions": {
       "active": "Active",
       "closed": "Closed",

src/locales/de/connections.json

@@ -21,6 +21,9 @@
       "uploadSpeed": "Upload-Geschwindigkeit",
       "downloadSpeed": "Download-Geschwindigkeit"
     },
+    "filter": {
+      "allNetworks": "Alle Netzwerke"
+    },
     "actions": {
       "active": "Aktiv",
       "closed": "Geschlossen",

src/locales/en/connections.json

@@ -21,6 +21,9 @@
       "uploadSpeed": "Upload Speed",
       "downloadSpeed": "Download Speed"
     },
+    "filter": {
+      "allNetworks": "All Networks"
+    },
     "actions": {
       "active": "Active",
       "closed": "Closed",

src/locales/es/connections.json

@@ -21,6 +21,9 @@
       "uploadSpeed": "Velocidad de subida",
       "downloadSpeed": "Velocidad de descarga"
     },
+    "filter": {
+      "allNetworks": "Todas las redes"
+    },
     "actions": {
       "active": "Active",
       "closed": "Closed",

src/locales/fa/connections.json

@@ -21,6 +21,9 @@
       "uploadSpeed": "سرعت بارگذاری",
       "downloadSpeed": "سرعت دانلود"
     },
+    "filter": {
+      "allNetworks": "همه شبکه‌ها"
+    },
     "actions": {
       "active": "Active",
       "closed": "Closed",

src/locales/id/connections.json

@@ -21,6 +21,9 @@
       "uploadSpeed": "Kecepatan Unggah",
       "downloadSpeed": "Kecepatan Unduh"
     },
+    "filter": {
+      "allNetworks": "Semua Jaringan"
+    },
     "actions": {
       "active": "Active",
       "closed": "Closed",

src/locales/jp/connections.json

@@ -21,6 +21,9 @@
       "uploadSpeed": "アップロード速度",
       "downloadSpeed": "ダウンロード速度"
     },
+    "filter": {
+      "allNetworks": "すべてのネットワーク"
+    },
     "actions": {
       "active": "Active",
       "closed": "Closed",

src/locales/ko/connections.json

@@ -21,6 +21,9 @@
       "uploadSpeed": "업로드 속도",
       "downloadSpeed": "다운로드 속도"
     },
+    "filter": {
+      "allNetworks": "모든 네트워크"
+    },
     "actions": {
       "active": "Active",
       "closed": "Closed",

src/locales/pt/connections.json

@@ -21,6 +21,9 @@
       "uploadSpeed": "Velocidade de upload",
       "downloadSpeed": "Velocidade de download"
     },
+    "filter": {
+      "allNetworks": "Todas as redes"
+    },
     "actions": {
       "active": "Ativas",
       "closed": "Fechadas",

src/locales/ru/connections.json

@@ -21,6 +21,9 @@
       "uploadSpeed": "Скорость загрузки",
       "downloadSpeed": "Скорость скачивания"
     },
+    "filter": {
+      "allNetworks": "Все сети"
+    },
     "actions": {
       "active": "Активные",
       "closed": "Закрытые",

src/locales/tr/connections.json

@@ -21,6 +21,9 @@
       "uploadSpeed": "Yükleme Hızı",
       "downloadSpeed": "İndirme Hızı"
     },
+    "filter": {
+      "allNetworks": "Tüm Ağlar"
+    },
     "actions": {
       "active": "Etkin",
       "closed": "Kapatılan",

src/locales/tt/connections.json

@@ -21,6 +21,9 @@
       "uploadSpeed": "Йөкләү (чыгару) тизлеге",
       "downloadSpeed": "Йөкләү тизлеге"
     },
+    "filter": {
+      "allNetworks": "Барлык челтәрләр"
+    },
     "actions": {
       "active": "Active",
       "closed": "Closed",

src/locales/zh/connections.json

@@ -21,6 +21,9 @@
       "uploadSpeed": "上传速度",
       "downloadSpeed": "下载速度"
     },
+    "filter": {
+      "allNetworks": "全部网络"
+    },
     "actions": {
       "active": "活跃",
       "closed": "已关闭",

src/locales/zhtw/connections.json

@@ -21,6 +21,9 @@
       "uploadSpeed": "上傳速度",
       "downloadSpeed": "下載速度"
     },
+    "filter": {
+      "allNetworks": "全部網路"
+    },
     "actions": {
       "active": "活躍",
       "closed": "已關閉",

src/pages/connections.tsx

@@ -71,6 +71,10 @@ const ORDER_OPTIONS = [
 
 type OrderKey = (typeof ORDER_OPTIONS)[number]['id']
 
+type NetworkFilter = 'all' | 'tcp' | 'udp'
+
+let savedNetworkFilter: NetworkFilter = 'all'
+
 const orderFunctionMap = ORDER_OPTIONS.reduce<Record<OrderKey, OrderFunc>>(
   (acc, option) => {
     acc[option.id] = option.fn
@@ -86,6 +90,9 @@ const ConnectionsPage = () => {
   const { searchState, match, onSearch } = usePageSearch('connections')
   const hasSearch = searchState.text.length > 0
   const [curOrderOpt, setCurOrderOpt] = useState<OrderKey>('default')
+  const [networkFilter, setNetworkFilter] =
+    useState<NetworkFilter>(savedNetworkFilter)
+  const hasFilter = networkFilter !== 'all'
   const [connectionsType, setConnectionsType] = useState<'active' | 'closed'>(
     'active',
   )
@@ -112,18 +119,30 @@ const ConnectionsPage = () => {
   const filterConn = useMemo(() => {
     const orderFunc = orderFunctionMap[curOrderOpt]
 
-    if (isTableLayout && !hasSearch) return selectedConnections
-    if (!hasSearch) return orderFunc([...selectedConnections])
+    if (isTableLayout && !hasSearch && !hasFilter) return selectedConnections
+    if (!hasSearch && !hasFilter) return orderFunc([...selectedConnections])
 
     const matchConns = selectedConnections.filter((conn) => {
-      const { host, destinationIP, process } = conn.metadata
+      const { host, destinationIP, process, network } = conn.metadata
+      if (networkFilter !== 'all' && network !== networkFilter) return false
       return (
-        match(host || '') || match(destinationIP || '') || match(process || '')
+        !hasSearch ||
+        match(host || '') ||
+        match(destinationIP || '') ||
+        match(process || '')
       )
     })
 
     return orderFunc ? orderFunc(matchConns) : matchConns
-  }, [selectedConnections, isTableLayout, hasSearch, match, curOrderOpt])
+  }, [
+    selectedConnections,
+    isTableLayout,
+    hasSearch,
+    hasFilter,
+    networkFilter,
+    match,
+    curOrderOpt,
+  ])
 
   const displayRows = useConnectionRowViews(
     isTableLayout ? EMPTY_CONNECTIONS : filterConn,
@@ -255,6 +274,25 @@ const ConnectionsPage = () => {
             ))}
           </BaseStyledSelect>
         )}
+        <BaseStyledSelect
+          value={networkFilter}
+          onChange={(e) => {
+            savedNetworkFilter = e.target.value as NetworkFilter
+            setNetworkFilter(savedNetworkFilter)
+          }}
+        >
+          <MenuItem value="all">
+            <span style={{ fontSize: 14 }}>
+              {t('connections.components.filter.allNetworks')}
+            </span>
+          </MenuItem>
+          <MenuItem value="tcp">
+            <span style={{ fontSize: 14 }}>TCP</span>
+          </MenuItem>
+          <MenuItem value="udp">
+            <span style={{ fontSize: 14 }}>UDP</span>
+          </MenuItem>
+        </BaseStyledSelect>
         <Box
           sx={{
             flex: 1,

src/types/generated/i18n-keys.ts

@@ -17,6 +17,7 @@ export const translationKeys = [
   'connections.components.order.default',
   'connections.components.order.uploadSpeed',
   'connections.components.order.downloadSpeed',
+  'connections.components.filter.allNetworks',
   'connections.components.actions.active',
   'connections.components.actions.closed',
   'connections.components.actions.closeConnection',

src/types/generated/i18n-resources.ts

@@ -27,6 +27,9 @@ export interface TranslationResources {
           type: string
           ulSpeed: string
         }
+        filter: {
+          allNetworks: string
+        }
         order: {
           default: string
           downloadSpeed: string