import React, { Suspense, lazy, useCallback, useEffect, useMemo, useRef, useState } from 'react'; import tw from 'twin.macro'; import http from '@/api/http'; import TitledGreyBox from '@/components/elements/TitledGreyBox'; import { formatBytes, formatPackets, formatPercent, formatPps, formatRelativeTime, blockRateColor, computeTrend, type Trend, } from './firewallFormat'; import { firewallApiError } from './firewallApiError'; import { unwrapEnvelope } from './firewallApiEnvelope'; import { POLLING } from './firewallConstants'; import type { FirewallRuleRecord } from './firewallTypes'; import { useAbuseDbLookup } from './useAbuseDbLookup'; import AbuseDbLookupOverlay from './abuseDbLookupOverlay'; import type { AbuseDbStatus } from './firewallAbuseDbTypes'; const FirewallChart = lazy(() => import('./firewallChart')); const FirewallAnalyticsDocsPopup = lazy(() => import('./firewallAnalyticsDocsPopup')); type Resolution = '1m' | '1h' | '6h' | '24h' | '7d' | '30d'; const RESOLUTIONS: { id: Resolution; label: string; pollMs: number | null }[] = [ { id: '1m', label: '1m', pollMs: POLLING.DASHBOARD_1M_MS }, { id: '1h', label: '1h', pollMs: POLLING.DASHBOARD_1H_MS }, { id: '6h', label: '6h', pollMs: null }, { id: '24h', label: '24h', pollMs: null }, { id: '7d', label: '7d', pollMs: null }, { id: '30d', label: '30d', pollMs: null }, ]; const PAGE_SIZE = 5; const RESOLUTION_STORAGE_KEY = 'fwp-dashboard-resolution'; const REFRESH_INTERVAL_STORAGE_KEY = 'fwp-dashboard-refresh-interval'; const STAT_SPARK_MODE_STORAGE_KEY = 'fwp-stat-spark-mode'; /** Top stat mini-chart display: 0 = filled area, 1 = line only, 2 = hidden. */ type StatSparkDisplayMode = 0 | 1 | 2; const STAT_SPARK_MODE_LABELS: Record = { 0: 'Filled mini charts', 1: 'Line mini charts', 2: 'Stats only (no mini charts)', }; /** Bucket duration (seconds) per resolution — mirrors node `RingBufferStore.js` RESOLUTIONS. */ const RES_BUCKET_SEC: Record = { '1m': 5, '1h': 60, '6h': 300, '24h': 900, '7d': 3600, '30d': 21600, }; /** Ring capacity per resolution — keep in sync with node `RingBufferStore.js` RESOLUTIONS. */ const RES_BUCKET_CAPACITY: Record = { '1m': 12, '1h': 60, '6h': 72, '24h': 96, '7d': 168, '30d': 120, }; /** Synthetic bucket for chart padding (full selected window, zeros where the node has no bucket yet). */ function emptyPaddedBucket(windowStart: number): Bucket { return { windowStart, packets_in: '0', packets_blocked: '0', packets_passed: '0', bytes_in: '0', bytes_blocked: '0', bytes_passed: '0', new_connections: 0, active_connections: 0, unique_sources: 0, peak_pps: 0, peak_bps: 0, per_rule: {}, }; } /** * Expand series to the full nominal window for the resolution (rolling window ending at "now"), * so e.g. 30d shows the whole 30 days with flat zeros before data existed. */ function padBucketsToFullWindow(incoming: Bucket[], resolution: Resolution): Bucket[] { const bucketMs = RES_BUCKET_SEC[resolution] * 1000; const capacity = RES_BUCKET_CAPACITY[resolution]; if (capacity <= 0 || bucketMs <= 0) return incoming; const alignStart = (ts: number) => Math.floor(ts / bucketMs) * bucketMs; const endStart = alignStart(Date.now()); const firstStart = endStart - (capacity - 1) * bucketMs; const byStart = new Map(); for (const b of incoming) { if (b.windowStart >= firstStart && b.windowStart <= endStart) { byStart.set(b.windowStart, b); } } const out: Bucket[] = []; for (let t = firstStart; t <= endStart; t += bucketMs) { out.push(byStart.get(t) ?? emptyPaddedBucket(t)); } return out; } /** Manual poll interval; `auto` uses resolution defaults (1m / 1h only). */ type RefreshIntervalId = 'auto' | '2' | '5' | '10' | '15' | '30' | '45' | '60'; const REFRESH_INTERVAL_OPTIONS: { id: RefreshIntervalId; label: string }[] = [ { id: 'auto', label: 'Auto' }, { id: '2', label: '2s' }, { id: '5', label: '5s' }, { id: '10', label: '10s' }, { id: '15', label: '15s' }, { id: '30', label: '30s' }, { id: '45', label: '45s' }, { id: '60', label: '60s' }, ]; const REFRESH_ID_TO_MS: Record, number> = { '2': 2000, '5': 5000, '10': 10000, '15': 15000, '30': 30000, '45': 45000, '60': 60000, }; function loadStoredResolution(): Resolution { try { const stored = localStorage.getItem(RESOLUTION_STORAGE_KEY); if (stored && RESOLUTIONS.some((r) => r.id === stored)) { return stored as Resolution; } } catch { // localStorage unavailable (private mode, etc.) } return '1h'; } function storeResolution(res: Resolution): void { try { localStorage.setItem(RESOLUTION_STORAGE_KEY, res); } catch { // ignore write failures } } function loadStoredRefreshInterval(): RefreshIntervalId { try { const stored = localStorage.getItem(REFRESH_INTERVAL_STORAGE_KEY); if (stored && REFRESH_INTERVAL_OPTIONS.some((o) => o.id === stored)) { return stored as RefreshIntervalId; } } catch { // localStorage unavailable } return 'auto'; } function storeRefreshInterval(id: RefreshIntervalId): void { try { localStorage.setItem(REFRESH_INTERVAL_STORAGE_KEY, id); } catch { // ignore write failures } } function loadStoredStatSparkMode(): StatSparkDisplayMode { try { const stored = localStorage.getItem(STAT_SPARK_MODE_STORAGE_KEY); if (stored === '0' || stored === '1' || stored === '2') { return Number(stored) as StatSparkDisplayMode; } } catch { // localStorage unavailable } return 0; } function storeStatSparkMode(mode: StatSparkDisplayMode): void { try { localStorage.setItem(STAT_SPARK_MODE_STORAGE_KEY, String(mode)); } catch { // ignore write failures } } type Bucket = { windowStart: number; packets_in: string; packets_blocked: string; packets_passed: string; bytes_in: string; bytes_blocked: string; bytes_passed: string; new_connections: number; active_connections: number; unique_sources: number; peak_pps: number; peak_bps: number; per_rule: Record; per_proto?: { tcp: string; udp: string; icmp: string }; per_port?: Record; top_sources?: Source[]; }; type Summary = { dataAvailable: boolean; reason?: string; packets_per_sec: number; blocked_per_sec: number; passed_per_sec: number; bytes_per_sec: number; block_rate_pct: number; active_connections: number; new_connections_per_sec: number; unique_sources: number; under_attack: boolean; mitigation_level: number; last_updated_at?: number; }; type RuleBreakdownRow = { rule_key?: string; rule_id?: number | null; rule_type: string; packets_matched: string; bytes_matched: string; packets_blocked?: string; pct_of_total: number; pct_of_blocked: number; mitigates?: boolean; }; /** Enabled rules list from metrics node (may include scope/port for disambiguation). */ type ActiveRuleListEntry = { rule_id?: number | null; rule_type: string; scope?: string; port?: number | null; }; type Distribution = { ports?: { port: string; packets: string; bytes: string; pct: number }[]; protocols?: { tcp_pct: number; udp_pct: number; icmp_pct: number; }; }; type Source = { src: string; packets?: number; bytes?: number; pps?: number; }; /** API may send legacy `{ ip, count }` from older nodes or persisted buckets. */ function normalizeSourcesList(rows: unknown[]): Source[] { const out: Source[] = []; for (const r of rows) { if (!r || typeof r !== 'object') continue; const row = r as Source & { ip?: string; count?: number }; const src = row.src ?? row.ip; if (!src) continue; out.push({ src: String(src), packets: Number(row.packets ?? row.count ?? 0) || 0, bytes: row.bytes, pps: row.pps, }); } return out; } /** Merge top_sources snapshots from every bucket in the window (same idea as node buildSources). */ function mergeTopSourcesFromBuckets(bkts: Bucket[]): Source[] { const merged = new Map(); for (const b of bkts) { for (const r of normalizeSourcesList(b.top_sources ?? [])) { merged.set(r.src, (merged.get(r.src) ?? 0) + (r.packets ?? 0)); } } return [...merged.entries()] .map(([src, packets]) => ({ src, packets })) .sort((a, b) => (b.packets ?? 0) - (a.packets ?? 0)); } function resolveBreakdownRuleId( row: RuleBreakdownRow | undefined, entry: ActiveRuleListEntry, panelRules: FirewallRuleRecord[], ): number | null { const r0 = row?.rule_id; if (r0 != null && Number.isFinite(Number(r0))) return Number(r0); const e0 = entry.rule_id; if (e0 != null && Number.isFinite(Number(e0))) return Number(e0); const scope = entry.scope === 'port' ? 'port' : 'global'; const port = scope === 'port' && entry.port != null && Number.isFinite(Number(entry.port)) ? Number(entry.port) : null; const candidates = panelRules.filter((p) => p.enabled !== false && p.rule_type === entry.rule_type); if (candidates.length === 0) return null; if (scope === 'port' && port != null) { const hit = candidates.find((p) => (p.scope ?? 'global') === 'port' && Number(p.port) === port); if (hit) return hit.id; } const globals = candidates.filter((p) => (p.scope ?? 'global') !== 'port'); if (globals.length === 1) return globals[0].id; const ports = candidates.filter((p) => p.scope === 'port'); if (ports.length === 1) return ports[0].id; return null; } type MetricsEnvelopePayload = { available: boolean; data: T | null; error: string | null; cached?: boolean; }; /** Shared surface style for all panels - uses the Nebula theme var when available. */ const surfaceStyle = { background: 'var(--pageSecondary, hsl(209, 18%, 30%))' } as const; const panelSurface = tw`bg-neutral-700 p-4 rounded shadow-lg`; // ─── Tiny SVG sparkline ──────────────────────────────────────────────────────── function MiniSparkline({ values, color, fill = false }: { values: number[]; color: string; fill?: boolean }) { const W = 100; const H = 100; if (!values || values.length < 2) { return ( ); } const min = Math.min(...values); const max = Math.max(...values); const flat = min === max; const range = flat ? 1 : max - min; const toX = (i: number) => (i / (values.length - 1)) * W; const toY = (v: number) => { if (flat) return H / 2; // Leave headroom at top so peaks don't clip against the chart box edge return H - 6 - ((v - min) / range) * (H - 14); }; const pts = values.map((v, i) => `${toX(i).toFixed(1)},${toY(v).toFixed(1)}`); const poly = pts.join(' '); const fillPath = fill ? `M 0,${H} L ${pts.join(' L ')} L ${W},${H} Z` : ''; return ( {fill && !flat && } ); } /** Top-right inside sparkline panel: green ↑ = metric rose in 2nd half vs 1st, red ↓ = fell. */ function SparklineTrendCorner({ trend }: { trend: Trend }) { if (trend.direction === 'flat') { return Stable; } const up = trend.direction === 'up'; const color = up ? '#34d399' : '#f87171'; const arrow = up ? '↑' : '↓'; return ( {arrow} {trend.pct.toFixed(1)}% ); } /** Sparkline panel: fixed width (extends left from right edge), capped height. */ const STAT_SPARK_WIDTH = 200; const STAT_CARD_MIN_H = 100; const STAT_SPARK_PANEL_H = 100; const STAT_SPARK_MIN_CHART_H = 48; /** Right-side sparkline slot: trend label in top row so the chart never overlaps it. */ function StatSparkline({ values, color, trend, fill, }: { values: number[]; color: string; trend: Trend; fill: boolean; }) { return (
); } function StatTitleIcon({ children }: { children: React.ReactNode }) { return ( svg]:block [&>svg]:w-[0.9em] [&>svg]:h-[0.9em] [&>svg]:relative [&>svg]:-top-px`} aria-hidden > {children} ); } function IcoChartArea() { return ( ); } function IcoArrowDownUp() { return ( ); } function IcoShieldX() { return ( ); } function IcoShieldCheck() { return ( ); } function IcoArrowBigUp() { return ( ); } function IcoCirclePlus() { return ( ); } function IcoMousePointerClick() { return ( ); } function IcoBrickWallFire() { return ( ); } function IcoActivity() { return ( ); } function IcoStretchHorizontal() { return ( ); } function IcoChartNoAxesCombined() { return ( ); } function IcoChartNoAxesGantt() { return ( ); } function IcoWifi() { return ( ); } function IcoRefreshCw() { return ( ); } // ─── Pagination arrows ──────────────────────────────────────────────────────── function PaginationBar({ page, totalPages, onPrev, onNext, }: { page: number; totalPages: number; onPrev: () => void; onNext: () => void; }) { if (totalPages <= 1) return null; return (
{page + 1} / {totalPages}
); } type Props = { base: string; onError: (msg: string) => void; canManage?: boolean; /** When true, top source IPs can be looked up via AbuseIPDB. */ canAbuseDb?: boolean; onAbuseDbSuccess?: (msg: string) => void; }; export default function FirewallDashboard({ base, onError, canManage = true, canAbuseDb = false, onAbuseDbSuccess, }: Props) { const [resolution, setResolution] = useState(loadStoredResolution); const [summary, setSummary] = useState(null); const [buckets, setBuckets] = useState([]); const [rules, setRules] = useState([]); const [activeRuleTypes, setActiveRuleTypes] = useState([]); const [activeRuleEntries, setActiveRuleEntries] = useState([]); const [panelRulesForIds, setPanelRulesForIds] = useState([]); const [sources, setSources] = useState([]); const [loadingSeries, setLoadingSeries] = useState(false); const [lastSeriesFetchedAt, setLastSeriesFetchedAt] = useState(null); const [relativeNow, setRelativeNow] = useState(() => Date.now()); const [rulesPage, setRulesPage] = useState(0); const [sourcesPage, setSourcesPage] = useState(0); const [showAnalyticsDocs, setShowAnalyticsDocs] = useState(false); const [statSparkMode, setStatSparkMode] = useState(loadStoredStatSparkMode); const [distribution, setDistribution] = useState(null); const [resetting, setResetting] = useState(false); const [refreshInterval, setRefreshInterval] = useState(loadStoredRefreshInterval); /** Cumulative degrees so each click animates a full 360° (browsers normalize multiples of 360). */ const [refreshSpinDeg, setRefreshSpinDeg] = useState(0); const tabVisibleRef = useRef(true); const [abuseDbVerified, setAbuseDbVerified] = useState(false); const abuseDbLookup = useAbuseDbLookup(base, onError, onAbuseDbSuccess); useEffect(() => { if (!canAbuseDb) { setAbuseDbVerified(false); return; } http.get(`${base}/abusedb/status`) .then((res) => { const status = unwrapEnvelope(res.data); setAbuseDbVerified(!!status?.verified); }) .catch(() => setAbuseDbVerified(false)); }, [base, canAbuseDb]); const lookupSourceIp = useCallback((ip: string) => { if (!abuseDbVerified) { onError('Configure an AbuseIPDB API key in the AbuseDB tab first.'); return; } abuseDbLookup.lookup(ip); }, [abuseDbLookup, abuseDbVerified, onError]); const fetchSummary = useCallback(async () => { try { const response = await http.get(`${base}/metrics/summary`); const payload = unwrapEnvelope>(response.data); if (payload?.available && payload.data) { setSummary(payload.data); } else if (!payload?.available) { setSummary({ dataAvailable: false, reason: payload?.error ?? 'unavailable', packets_per_sec: 0, blocked_per_sec: 0, passed_per_sec: 0, bytes_per_sec: 0, block_rate_pct: 0, active_connections: 0, new_connections_per_sec: 0, unique_sources: 0, under_attack: false, mitigation_level: 0, }); } } catch (e) { onError(firewallApiError(e)); } }, [base, onError]); const fetchSeries = useCallback(async (res: Resolution) => { setLoadingSeries(true); try { const [tsResp, rulesResp, sourcesResp, panelRulesResp] = await Promise.all([ http.get(`${base}/metrics/timeseries?resolution=${res}`), http.get(`${base}/metrics/rules?resolution=${res}`), http.get(`${base}/metrics/sources?resolution=${res}&limit=20`).catch(() => null), http.get(`${base}/rules`).catch(() => null), ]); const timeseries = unwrapEnvelope>(tsResp.data); const ruleBreakdown = unwrapEnvelope>(rulesResp.data); const sourcesData = sourcesResp ? unwrapEnvelope>(sourcesResp.data) : null; const rawBuckets: Bucket[] = timeseries?.data?.buckets ?? []; const bkts = padBucketsToFullWindow(rawBuckets, res); setBuckets(bkts); setDistribution(timeseries?.data?.distribution ?? null); setRules(ruleBreakdown?.data?.rules ?? []); setActiveRuleTypes(ruleBreakdown?.data?.active_rule_types ?? []); setActiveRuleEntries(ruleBreakdown?.data?.active_rules ?? []); if (panelRulesResp) { const pr = unwrapEnvelope(panelRulesResp.data); if (Array.isArray(pr)) setPanelRulesForIds(pr); } // Sources: merge dedicated /metrics/sources with summed top_sources across all buckets. const apiSources = normalizeSourcesList(sourcesData?.data?.sources ?? []); const fromBuckets = mergeTopSourcesFromBuckets(rawBuckets); const mergedBySrc = new Map(); for (const s of [...apiSources, ...fromBuckets]) { const prev = mergedBySrc.get(s.src); mergedBySrc.set(s.src, { src: s.src, packets: (prev?.packets ?? 0) + (s.packets ?? 0), bytes: s.bytes ?? prev?.bytes, pps: s.pps ?? prev?.pps, }); } const mergedSources = [...mergedBySrc.values()] .sort((a, b) => (b.packets ?? 0) - (a.packets ?? 0)) .slice(0, 20); setSources(mergedSources); setLastSeriesFetchedAt(Date.now()); } catch (e) { onError(firewallApiError(e)); } finally { setLoadingSeries(false); } }, [base, onError]); const handleManualRefresh = useCallback(async () => { setRefreshSpinDeg((d) => d + 360); setRulesPage(0); setSourcesPage(0); await Promise.all([fetchSeries(resolution), fetchSummary()]); }, [resolution, fetchSeries, fetchSummary]); useEffect(() => { fetchSummary(); setRulesPage(0); setSourcesPage(0); fetchSeries(resolution); }, [resolution, fetchSummary, fetchSeries]); useEffect(() => { const cfg = RESOLUTIONS.find((r) => r.id === resolution); const autoPollMs = cfg?.pollMs ?? null; const intervalMs = refreshInterval === 'auto' ? autoPollMs : REFRESH_ID_TO_MS[refreshInterval]; if (!intervalMs) return; const tick = () => { if (!tabVisibleRef.current) return; fetchSummary(); if (refreshInterval === 'auto') { if (resolution === '1m') fetchSeries('1m'); } else { fetchSeries(resolution); } }; const handle = setInterval(tick, intervalMs); return () => clearInterval(handle); }, [resolution, refreshInterval, fetchSummary, fetchSeries]); useEffect(() => { const onChange = () => { tabVisibleRef.current = !document.hidden; }; document.addEventListener('visibilitychange', onChange); return () => document.removeEventListener('visibilitychange', onChange); }, []); // Re-render "Updated X ago" every second - on 1m view series refresh resets the // timestamp every 5s so without this tick the label stays stuck at "0s ago". useEffect(() => { const handle = setInterval(() => setRelativeNow(Date.now()), 1000); return () => clearInterval(handle); }, []); const selectResolution = useCallback((res: Resolution) => { setResolution(res); storeResolution(res); }, []); const cycleStatSparkMode = useCallback(() => { setStatSparkMode((prev) => { const next = ((prev + 1) % 3) as StatSparkDisplayMode; storeStatSparkMode(next); return next; }); }, []); const resetAnalytics = useCallback(async () => { if (!window.confirm( 'Reset all analytics for this server? Historical charts and stats will be cleared. Firewall rules are not removed.', )) { return; } setResetting(true); try { await http.post(`${base}/metrics/reset`); setBuckets([]); setRules([]); setSources([]); setRulesPage(0); setSourcesPage(0); setDistribution(null); setPanelRulesForIds([]); setLastSeriesFetchedAt(null); await fetchSummary(); await fetchSeries(resolution); } catch (e) { onError(firewallApiError(e)); } finally { setResetting(false); } }, [base, onError, fetchSummary, fetchSeries, resolution]); // ─── Aggregated totals ───────────────────────────────────────────────────── const totals = useMemo(() => { const sum = (k: keyof Bucket) => buckets.reduce((acc, b) => acc + Number(b[k] ?? 0), 0); const totalPackets = sum('packets_in'); const totalBlocked = sum('packets_blocked'); const totalPassed = sum('packets_passed'); const totalBytes = sum('bytes_in'); const totalBlockedBytes = sum('bytes_blocked'); const totalPassedBytes = sum('bytes_passed'); const totalNewConns = sum('new_connections'); const peakPps = buckets.reduce((m, b) => Math.max(m, b.peak_pps ?? 0), 0); const peakAt = buckets.reduce((acc, b) => { if ((b.peak_pps ?? 0) === peakPps && peakPps > 0) return b.windowStart; return acc; }, null); const avgBlockRate = totalPackets > 0 ? (totalBlocked / totalPackets) * 100 : 0; const avgPassRate = totalPackets > 0 ? (totalPassed / totalPackets) * 100 : 0; const avgPacketSize = totalPackets > 0 ? totalBytes / totalPackets : 0; const uniqueSources = buckets.reduce((m, b) => Math.max(m, b.unique_sources ?? 0), 0); return { totalPackets, totalBlocked, totalPassed, totalBytes, totalBlockedBytes, totalPassedBytes, totalNewConns, peakPps, peakAt, avgBlockRate, avgPassRate, avgPacketSize, uniqueSources, }; }, [buckets]); // ─── Trend calculation ───────────────────────────────────────────────────── const trends = useMemo(() => { const flat = { direction: 'flat' as const, pct: 0 }; if (buckets.length < 4) return { traffic: flat, blockRate: flat, passed: flat }; const mid = Math.floor(buckets.length / 2); const prevTotal = buckets.slice(0, mid).reduce((a, b) => a + Number(b.packets_in), 0); const currTotal = buckets.slice(mid).reduce((a, b) => a + Number(b.packets_in), 0); const prevPassed = buckets.slice(0, mid).reduce((a, b) => a + Number(b.packets_passed), 0); const currPassed = buckets.slice(mid).reduce((a, b) => a + Number(b.packets_passed), 0); const prevBlocked = buckets.slice(0, mid).reduce((a, b) => a + Number(b.packets_blocked), 0); const currBlocked = buckets.slice(mid).reduce((a, b) => a + Number(b.packets_blocked), 0); const prevRate = prevTotal > 0 ? (prevBlocked / prevTotal) * 100 : 0; const currRate = currTotal > 0 ? (currBlocked / currTotal) * 100 : 0; return { traffic: computeTrend(currTotal, prevTotal), blockRate: computeTrend(currRate, prevRate), passed: computeTrend(currPassed, prevPassed), }; }, [buckets]); // ─── Sparkline data ──────────────────────────────────────────────────────── const sparkTraffic = useMemo(() => buckets.map(b => Number(b.packets_in)), [buckets]); const sparkBlocked = useMemo(() => buckets.map(b => Number(b.packets_blocked)), [buckets]); const sparkPassed = useMemo(() => buckets.map(b => Number(b.packets_passed)), [buckets]); // ─── Protocol distribution ───────────────────────────────────────────────── const protoStats = useMemo(() => { if (distribution?.protocols) { return { tcp: distribution.protocols.tcp_pct ?? 0, udp: distribution.protocols.udp_pct ?? 0, icmp: distribution.protocols.icmp_pct ?? 0, }; } let tcp = 0, udp = 0, icmp = 0; for (const b of buckets) { tcp += Number(b.per_proto?.tcp ?? 0); udp += Number(b.per_proto?.udp ?? 0); icmp += Number(b.per_proto?.icmp ?? 0); } const total = tcp + udp + icmp || 1; return { tcp: (tcp / total) * 100, udp: (udp / total) * 100, icmp: (icmp / total) * 100 }; }, [buckets, distribution]); const portStats = useMemo(() => { if (distribution?.ports && distribution.ports.length > 0) { return distribution.ports.map((p) => ({ port: p.port, packets: Number(p.packets), pct: p.pct, })); } const acc: Record = {}; for (const b of buckets) { if (b.per_port) { for (const [port, val] of Object.entries(b.per_port)) { const row = val as { packets: string; bytes: string }; acc[port] = (acc[port] ?? 0) + Number(row.packets); } } } const total = Object.values(acc).reduce((s, v) => s + v, 0) || 1; return Object.entries(acc) .map(([port, packets]) => ({ port, packets, pct: (packets / total) * 100 })) .sort((a, b) => b.packets - a.packets); }, [buckets, distribution]); // ─── All rules (stats + configured-but-idle) sorted by activity ─────────── const allRules = useMemo(() => { const statsMap = new Map(); for (const r of rules) { const k = r.rule_key ?? (r.rule_id != null && r.rule_id !== undefined ? `id:${r.rule_id}/${r.rule_type}` : r.rule_type); statsMap.set(k, { ...r, rule_key: r.rule_key ?? k }); } type RowEntry = { rule_key: string; rule_type: string; rule_id?: number | null; entry: ActiveRuleListEntry; }; const entries: RowEntry[] = activeRuleEntries.length > 0 ? activeRuleEntries.map((a) => ({ rule_key: a.rule_id != null && Number.isFinite(Number(a.rule_id)) ? `id:${a.rule_id}/${a.rule_type}` : a.rule_type, rule_type: a.rule_type, rule_id: a.rule_id, entry: a, })) : activeRuleTypes.map((rt) => ({ rule_key: rt, rule_type: rt, rule_id: null, entry: { rule_type: rt, rule_id: null }, })); return entries .map((e) => { let row = statsMap.get(e.rule_key); if (!row) row = statsMap.get(e.rule_type); const resolvedId = resolveBreakdownRuleId(row, e.entry, panelRulesForIds); if (row) { return { ...row, rule_type: e.rule_type, rule_id: resolvedId ?? row.rule_id ?? (e.rule_id != null ? Number(e.rule_id) : null), rule_key: row.rule_key ?? e.rule_key, }; } return { rule_key: e.rule_key, rule_type: e.rule_type, rule_id: resolvedId ?? (e.rule_id != null ? Number(e.rule_id) : null), packets_matched: '0', bytes_matched: '0', packets_blocked: '0', pct_of_total: 0, pct_of_blocked: 0, mitigates: false, }; }) .sort((a, b) => { const ap = Number(a.packets_matched); const bp = Number(b.packets_matched); if (bp !== ap) return bp - ap; const ida = a.rule_id ?? 0; const idb = b.rule_id ?? 0; if (ida !== idb) return ida - idb; return a.rule_type.localeCompare(b.rule_type); }); }, [rules, activeRuleEntries, activeRuleTypes, panelRulesForIds]); /** Summary row for header: use API summary, or derive from latest buckets if summary is "no data" but series exists. */ const headerStats = useMemo((): Summary | null => { if (!summary) return null; if (summary.dataAvailable) return summary; if (!buckets.length) return null; const sec = RES_BUCKET_SEC[resolution] ?? 60; const last = buckets[buckets.length - 1]; const tail = buckets.slice(-12); const pktIn = Number(BigInt(last.packets_in || '0') / BigInt(sec)) || 0; const pktBlocked = Number(BigInt(last.packets_blocked || '0') / BigInt(sec)) || 0; const pktPassed = Number(BigInt(last.packets_passed || '0') / BigInt(sec)) || 0; const bps = Number(BigInt(last.bytes_in || '0') / BigInt(sec)) || 0; const totalForRate = Number(BigInt(last.packets_in || '0')); const blockedForRate = Number(BigInt(last.packets_blocked || '0')); const activeConnections = Math.max(0, ...tail.map((b) => Number(b.active_connections ?? 0))); const uniqueSources = Math.max(0, ...tail.map((b) => Number(b.unique_sources ?? 0))); return { ...summary, dataAvailable: true, packets_per_sec: pktIn, blocked_per_sec: pktBlocked, passed_per_sec: pktPassed, bytes_per_sec: bps, block_rate_pct: totalForRate > 0 ? (blockedForRate / totalForRate) * 100 : 0, active_connections: activeConnections, new_connections_per_sec: (last.new_connections ?? 0) / sec, unique_sources: uniqueSources, last_updated_at: last.windowStart + sec * 1000, }; }, [summary, buckets, resolution]); const rulePageTotal = Math.ceil(allRules.length / PAGE_SIZE) || 1; const sourcePageTotal = Math.ceil(sources.length / PAGE_SIZE) || 1; const visibleRules = allRules.slice(rulesPage * PAGE_SIZE, (rulesPage + 1) * PAGE_SIZE); const visibleSources = sources.slice(sourcesPage * PAGE_SIZE, (sourcesPage + 1) * PAGE_SIZE); const liveBlockColor = headerStats ? blockRateColor(headerStats.block_rate_pct) : undefined; const statusColor = !headerStats ? undefined : headerStats.under_attack ? '#f87171' : '#34d399'; const statusText = !headerStats ? 'NO DATA' : headerStats.under_attack ? `MITIGATION L${headerStats.mitigation_level}` : 'ACTIVE'; const showStatSpark = statSparkMode !== 2; const statSparkFill = statSparkMode === 0; const statCardCss = [ tw`bg-neutral-700 p-4 rounded shadow-lg min-w-0`, showStatSpark ? tw`flex flex-row gap-3 items-stretch` : tw`flex flex-col items-center justify-center`, ]; const statBodyCss = showStatSpark ? tw`flex flex-col gap-1.5 flex-1 min-w-0 justify-center` : tw`flex flex-col gap-1.5 items-center text-center w-full justify-center`; const statTitleCss = [ tw`text-sm font-medium text-neutral-300 leading-none inline-flex items-center gap-1`, !showStatSpark && tw`justify-center`, ]; const statMetricRowCss = [tw`flex items-baseline gap-2`, !showStatSpark && tw`justify-center`]; return (
{/* ── Header bar ─────────────────────────────────────────────────── */}
{statusText === 'ACTIVE' && ( )} {statusText !== 'ACTIVE' && statusColor === '#f87171' && ( )} {!statusColor && } {statusText}
{/* Live stats pill (API summary or derived from visible time-series buckets) */} {headerStats && (
LIVE
Packets/sec {formatPps(headerStats.packets_per_sec)}
Blocked/sec {formatPps(headerStats.blocked_per_sec)}
Block rate {formatPercent(headerStats.block_rate_pct)}
Connections {headerStats.active_connections}
)}
{/* ── No-data warning ────────────────────────────────────────────── */} {!summary?.dataAvailable && buckets.length === 0 && (
No analytics data yet. Make sure the firewall node service is reachable and rules have been applied. New servers may take up to 30s after the first apply before counters start populating. {summary?.reason &&

{summary.reason}

}
)} {/* ── Resolution selector + refresh ─────────────────────────────── */}
{RESOLUTIONS.map((r) => ( ))} {canManage && ( )}
A PingLess Extension ©
{loadingSeries ? 'Loading…' : `Updated ${formatRelativeTime(lastSeriesFetchedAt, relativeNow)}`}
{/* ── 3 main stat cards (Total traffic / Blocked / Passed) ──────── */}
{/* Total traffic */}
} /> Total traffic
{formatPackets(totals.totalPackets)} PPS
{formatBytes(totals.totalBytes)}{' '} Packet Size Avg packet size:{' '} {formatBytes(totals.avgPacketSize)}
{showStatSpark && ( )}
{/* Total blocked */}
} /> Total blocked
{formatPackets(totals.totalBlocked)} PPS
{formatBytes(totals.totalBlockedBytes)}{' '} Packet Size Avg drop rate:{' '} {formatPercent(totals.avgBlockRate)}
{showStatSpark && ( )}
{/* Total passed */}
} /> Total passed
{formatPackets(totals.totalPassed)} PPS
{formatBytes(totals.totalPassedBytes)}{' '} Packet Size Avg pass rate:{' '} {formatPercent(totals.avgPassRate)}
{showStatSpark && ( )}
{/* ── Secondary stat cards ───────────────────────────────────────── */}
} /> Peak rate {formatPps(totals.peakPps)} {totals.peakAt && at {formatRelativeTime(totals.peakAt)}}
} /> New connections {formatPackets(totals.totalNewConns)}
} /> Unique sources {totals.uniqueSources}
} /> Active rules {allRules.length}
{/* Top Active Ports */}
} /> Top Active Ports {portStats.length === 0 ? ( - ) : ( <> {portStats[0].port}{' '} ({portStats[0].pct.toFixed(0)}%) {portStats.slice(1, 3).map(p => ( {p.port} ({p.pct.toFixed(0)}%) ))} )}
{/* Protocol distribution */}
} /> Protocol dist.
TCP {protoStats.tcp.toFixed(0)}%
UDP {protoStats.udp.toFixed(0)}%
ICMP {protoStats.icmp.toFixed(0)}%
{/* ── Traffic chart ──────────────────────────────────────────────── */}
} /> Traffic over time (packets/sec)

} >
{buckets.length === 0 ? (
No series data for this range yet.
) : ( Loading chart…
}> )}
{/* ── Per-rule breakdown + Top Sources (side by side) ───────────── */}
{/* Per-rule breakdown */} } /> Per-rule breakdown

} > {allRules.length === 0 ? (

No rules configured yet.

) : ( <> {visibleRules.map((r) => { const active = Number(r.packets_matched) > 0; const rowKey = r.rule_key ?? `id:${r.rule_id ?? ''}:${r.rule_type}`; return ( ); })}
ID Type Packets % total % blk
{r.rule_id != null && Number.isFinite(Number(r.rule_id)) ? ( #{r.rule_id} ) : null}
{r.rule_type}
{active ? formatPackets(r.packets_matched) : '-'} {active ? formatPercent(r.pct_of_total) : '-'} {active && r.mitigates ? formatPercent(r.pct_of_blocked) : '-'}
setRulesPage(p => p - 1)} onNext={() => setRulesPage(p => p + 1)} /> )} {/* Top Sources */} } /> Top sources {canAbuseDb && abuseDbVerified && ( · click IP to look up )}

} > {sources.length === 0 ? (() => { const hasTraffic = buckets.some((b) => Number(b.packets_in ?? 0) > 0); return hasTraffic ? (

Traffic detected but no source IPs yet. For TCP games the node can read peers from{' '} /proc/net/tcp — update the Firewall-Plus node service if this message persists. For UDP you still need connection tracking: load{' '} nf_conntrack{' '} (modprobe nf_conntrack{' '} exits silently on success; check with{' '} lsmod | grep conntrack {' '}and{' '} test -r /proc/net/nf_conntrack ).

) : (

No source data yet. Source IPs appear when the node publishes top talkers (often from connection tracking on the game ports).

); })() : ( <> {sources[0]?.bytes != null && ( )} {visibleSources.map((s, i) => ( {s.bytes != null && ( )} ))}
# Source IP PacketsBytes
{sourcesPage * PAGE_SIZE + i + 1} {canAbuseDb ? ( ) : ( {s.src} )} {s.packets != null ? formatPackets(s.packets) : '-'} {formatBytes(s.bytes)}
setSourcesPage(p => p - 1)} onNext={() => setSourcesPage(p => p + 1)} /> )}
{showAnalyticsDocs && ( setShowAnalyticsDocs(false)} /> )}
); }