diff --git a/src/web/components/LogsPage.jsx b/src/web/components/LogsPage.jsx index 1112825..e1c8671 100644 --- a/src/web/components/LogsPage.jsx +++ b/src/web/components/LogsPage.jsx @@ -33,11 +33,31 @@ const CATEGORY_BADGE = { other: { cls: '', label: 'other' }, }; +const TRAFFIC_GROUP_WINDOW_MS = 60_000; + +function groupTraffic(list) { + const out = []; + for (const e of list) { + const key = `${e.category}|${e.host}|${e.port}|${e.matchedRule || ''}`; + const ts = new Date(e.ts).getTime(); + const last = out[out.length - 1]; + if (last && last._key === key && ts - last._lastTs < TRAFFIC_GROUP_WINDOW_MS) { + last.count += 1; + last._lastTs = ts; + last.lastTs = e.ts; + } else { + out.push({ ...e, _key: key, _lastTs: ts, count: 1, lastTs: e.ts }); + } + } + return out; +} + function TrafficTab() { const [traffic, setTraffic] = useState([]); const [paused, setPaused] = useState(false); const [filter, setFilter] = useState('all'); // all | direct | vpn | block const [search, setSearch] = useState(''); + const [grouped, setGrouped] = useState(true); const [autoscroll, setAutoscroll] = useState(true); const containerRef = useRef(null); const pausedRef = useRef(false); @@ -72,8 +92,8 @@ function TrafficTab() { e.matchedRule?.toLowerCase().includes(s), ); } - return list; - }, [traffic, filter, search]); + return grouped ? groupTraffic(list) : list; + }, [traffic, filter, search, grouped]); useEffect(() => { if (!autoscroll || !containerRef.current) return; @@ -102,6 +122,10 @@ function TrafficTab() { +