diff --git a/src/components/Connections.js b/src/components/Connections.js index f58c15c..4edd756 100644 --- a/src/components/Connections.js +++ b/src/components/Connections.js @@ -27,6 +27,25 @@ function arrayToIdKv(items) { return o; } +function filterConns(conns, keyword) { + const hasSubstring = (s, pat) => s.toLowerCase().includes(pat.toLowerCase()); + + return !keyword + ? conns + : conns.filter((conn) => + [ + conn.host, + conn.sourceIP, + conn.sourcePort, + conn.destinationIP, + conn.chains, + conn.rule, + conn.type, + conn.network, + ].some((field) => hasSubstring(field, keyword)) + ); +} + function formatConnectionDataItem(i, prevKv) { const { id, metadata, upload, download, start, chains, rule } = i; // eslint-disable-next-line prefer-const @@ -72,6 +91,9 @@ function Conn({ apiConfig }) { const [refContainer, containerHeight] = useRemainingViewPortHeight(); const [conns, setConns] = useState([]); const [closedConns, setClosedConns] = useState([]); + const [filterKeyword, setFilterKeyword] = useState(''); + const filteredConns = filterConns(conns, filterKeyword); + const filteredClosedConns = filterConns(closedConns, filterKeyword); const [isCloseAllModalOpen, setIsCloseAllModalOpen] = useState(false); const openCloseAllModal = useCallback(() => setIsCloseAllModalOpen(true), []); const closeCloseAllModal = useCallback( @@ -124,20 +146,38 @@ function Conn({ apiConfig }) {