From fba4dc54093522836606ad7d87168b40b67e4f9b Mon Sep 17 00:00:00 2001 From: Tunglies <77394545+Tunglies@users.noreply.github.com> Date: Tue, 10 Nov 2026 00:05:15 +0800 Subject: [PATCH] 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 | 1 + src/locales/ar/connections.json | 3 ++ src/locales/de/connections.json | 3 ++ src/locales/en/connections.json | 3 ++ src/locales/es/connections.json | 3 ++ src/locales/fa/connections.json | 3 ++ src/locales/id/connections.json | 3 ++ src/locales/jp/connections.json | 3 ++ src/locales/ko/connections.json | 3 ++ src/locales/pt/connections.json | 3 ++ src/locales/ru/connections.json | 3 ++ src/locales/tr/connections.json | 3 ++ src/locales/tt/connections.json | 3 ++ src/locales/zh/connections.json | 3 ++ src/locales/zhtw/connections.json | 3 ++ src/pages/connections.tsx | 48 ++++++++++++++++++++++++--- src/types/generated/i18n-keys.ts | 1 + src/types/generated/i18n-resources.ts | 3 ++ 18 files changed, 90 insertions(+), 5 deletions(-) diff --git a/Changelog.md b/Changelog.md index 307e88622..039d4ba96 100644 --- a/Changelog.md +++ b/Changelog.md @@ -39,6 +39,7 @@
✨ 新增功能 +- 新增连接页面按网络协议（TCP/UDP）筛选连接
diff --git a/src/locales/ar/connections.json b/src/locales/ar/connections.json index c5bcd0057..b0136bf1b 100644 --- a/src/locales/ar/connections.json +++ b/src/locales/ar/connections.json @@ -21,6 +21,9 @@ "uploadSpeed": "سرعة الرفع", "downloadSpeed": "سرعة التنزيل" }, + "filter": { + "allNetworks": "كل الشبكات" + }, "actions": { "active": "Active", "closed": "Closed", diff --git a/src/locales/de/connections.json b/src/locales/de/connections.json index 5f5b62dff..1d58918c6 100644 --- a/src/locales/de/connections.json +++ b/src/locales/de/connections.json @@ -21,6 +21,9 @@ "uploadSpeed": "Upload-Geschwindigkeit", "downloadSpeed": "Download-Geschwindigkeit" }, + "filter": { + "allNetworks": "Alle Netzwerke" + }, "actions": { "active": "Aktiv", "closed": "Geschlossen", diff --git a/src/locales/en/connections.json b/src/locales/en/connections.json index 82b3cebac..8bfa98c11 100644 --- a/src/locales/en/connections.json +++ b/src/locales/en/connections.json @@ -21,6 +21,9 @@ "uploadSpeed": "Upload Speed", "downloadSpeed": "Download Speed" }, + "filter": { + "allNetworks": "All Networks" + }, "actions": { "active": "Active", "closed": "Closed", diff --git a/src/locales/es/connections.json b/src/locales/es/connections.json index 1b49bc17c..1e4050b2c 100644 --- a/src/locales/es/connections.json +++ b/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", diff --git a/src/locales/fa/connections.json b/src/locales/fa/connections.json index a8c8687e7..436d30234 100644 --- a/src/locales/fa/connections.json +++ b/src/locales/fa/connections.json @@ -21,6 +21,9 @@ "uploadSpeed": "سرعت بارگذاری", "downloadSpeed": "سرعت دانلود" }, + "filter": { + "allNetworks": "همه شبکه‌ها" + }, "actions": { "active": "Active", "closed": "Closed", diff --git a/src/locales/id/connections.json b/src/locales/id/connections.json index 29748ccf9..0e679cd10 100644 --- a/src/locales/id/connections.json +++ b/src/locales/id/connections.json @@ -21,6 +21,9 @@ "uploadSpeed": "Kecepatan Unggah", "downloadSpeed": "Kecepatan Unduh" }, + "filter": { + "allNetworks": "Semua Jaringan" + }, "actions": { "active": "Active", "closed": "Closed", diff --git a/src/locales/jp/connections.json b/src/locales/jp/connections.json index 25fb84e8a..bf4782ff2 100644 --- a/src/locales/jp/connections.json +++ b/src/locales/jp/connections.json @@ -21,6 +21,9 @@ "uploadSpeed": "アップロード速度", "downloadSpeed": "ダウンロード速度" }, + "filter": { + "allNetworks": "すべてのネットワーク" + }, "actions": { "active": "Active", "closed": "Closed", diff --git a/src/locales/ko/connections.json b/src/locales/ko/connections.json index 88173f6ac..1de994098 100644 --- a/src/locales/ko/connections.json +++ b/src/locales/ko/connections.json @@ -21,6 +21,9 @@ "uploadSpeed": "업로드 속도", "downloadSpeed": "다운로드 속도" }, + "filter": { + "allNetworks": "모든 네트워크" + }, "actions": { "active": "Active", "closed": "Closed", diff --git a/src/locales/pt/connections.json b/src/locales/pt/connections.json index 8034e7599..96873906f 100644 --- a/src/locales/pt/connections.json +++ b/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", diff --git a/src/locales/ru/connections.json b/src/locales/ru/connections.json index 37b8adaef..f8686a45c 100644 --- a/src/locales/ru/connections.json +++ b/src/locales/ru/connections.json @@ -21,6 +21,9 @@ "uploadSpeed": "Скорость загрузки", "downloadSpeed": "Скорость скачивания" }, + "filter": { + "allNetworks": "Все сети" + }, "actions": { "active": "Активные", "closed": "Закрытые", diff --git a/src/locales/tr/connections.json b/src/locales/tr/connections.json index b8f85292a..8a1778990 100644 --- a/src/locales/tr/connections.json +++ b/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", diff --git a/src/locales/tt/connections.json b/src/locales/tt/connections.json index 48a28d4b8..474f092a8 100644 --- a/src/locales/tt/connections.json +++ b/src/locales/tt/connections.json @@ -21,6 +21,9 @@ "uploadSpeed": "Йөкләү (чыгару) тизлеге", "downloadSpeed": "Йөкләү тизлеге" }, + "filter": { + "allNetworks": "Барлык челтәрләр" + }, "actions": { "active": "Active", "closed": "Closed", diff --git a/src/locales/zh/connections.json b/src/locales/zh/connections.json index 33a447813..3385be8b9 100644 --- a/src/locales/zh/connections.json +++ b/src/locales/zh/connections.json @@ -21,6 +21,9 @@ "uploadSpeed": "上传速度", "downloadSpeed": "下载速度" }, + "filter": { + "allNetworks": "全部网络" + }, "actions": { "active": "活跃", "closed": "已关闭", diff --git a/src/locales/zhtw/connections.json b/src/locales/zhtw/connections.json index 520f3a855..6982edecb 100644 --- a/src/locales/zhtw/connections.json +++ b/src/locales/zhtw/connections.json @@ -21,6 +21,9 @@ "uploadSpeed": "上傳速度", "downloadSpeed": "下載速度" }, + "filter": { + "allNetworks": "全部網路" + }, "actions": { "active": "活躍", "closed": "已關閉", diff --git a/src/pages/connections.tsx b/src/pages/connections.tsx index fbfe9d378..3ca0b4157 100644 --- a/src/pages/connections.tsx +++ b/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>( (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('default') + const [networkFilter, setNetworkFilter] = + useState(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 = () => { ))} )} + { + savedNetworkFilter = e.target.value as NetworkFilter + setNetworkFilter(savedNetworkFilter) + }} + > + + + {t('connections.components.filter.allNetworks')} + + + + TCP + + + UDP + +