feat(traffic): protocol breakdown layout + inbound packets chart + flow source health (v0.15.0-beta)
- Traffic by Application: donut + legend side-by-side, larger donut with center total label, percentage in tooltip; card now sizes to its content - New Inbound Packets area chart below the throughput chart (packets field now summed per direction in /traffic/timeseries) - New Flow Sources & Data Health card: collector listening state, packets received, flows attributed, attribution rate, per-exporter flow/packet counts and last-seen; low-attribution hint for NAT-in-path exporters - /traffic/apps now returns per-app packets alongside bytes - Restructured bottom row: Top Talkers (left) | Application + Data Health stacked (right) for alignment - Tightened Top Talkers row spacing Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
2GT-Rich
co-authored by
Claude Opus 4.8
Claude Opus 4.8
parent
d79eb13119
commit
b1dd62bd1f
@@ -2,7 +2,7 @@
|
||||
|
||||
A self-hosted, full-stack network management platform for MikroTik devices. Monitor, configure, and manage your entire MikroTik infrastructure — routers, switches, and wireless access points — from a single web interface.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Generated
+2
-2
@@ -1,12 +1,12 @@
|
||||
{
|
||||
"name": "mikrotik-manager-backend",
|
||||
"version": "0.14.1-beta",
|
||||
"version": "0.15.0-beta",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "mikrotik-manager-backend",
|
||||
"version": "0.14.1-beta",
|
||||
"version": "0.15.0-beta",
|
||||
"dependencies": {
|
||||
"@influxdata/influxdb-client": "^1.33.2",
|
||||
"@influxdata/influxdb-client-apis": "^1.35.0",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "mikrotik-manager-backend",
|
||||
"version": "0.14.1-beta",
|
||||
"version": "0.15.0-beta",
|
||||
"description": "Mikrotik Network Management Platform - Backend API",
|
||||
"main": "dist/index.js",
|
||||
"scripts": {
|
||||
|
||||
@@ -45,20 +45,27 @@ router.get('/timeseries', async (req: Request, res: Response) => {
|
||||
from(bucket: "${bucket}")
|
||||
|> range(start: -${range})
|
||||
|> filter(fn: (r) => r._measurement == "client_traffic")
|
||||
|> filter(fn: (r) => r._field == "bytes")
|
||||
|> group(columns: ["direction"])
|
||||
|> filter(fn: (r) => r._field == "bytes" or r._field == "packets")
|
||||
|> group(columns: ["direction", "_field"])
|
||||
|> aggregateWindow(every: ${every}, fn: sum, createEmpty: false)
|
||||
`;
|
||||
|
||||
const pivoted: Record<string, { time: string; upload: number; download: number }> = {};
|
||||
type Point = { time: string; upload: number; download: number; uploadPackets: number; downloadPackets: number };
|
||||
const pivoted: Record<string, Point> = {};
|
||||
try {
|
||||
await queryApi.collectRows(fluxQuery, (row, tableMeta) => {
|
||||
const time = tableMeta.get(row, '_time') as string;
|
||||
const direction = tableMeta.get(row, 'direction') as string;
|
||||
const field = tableMeta.get(row, '_field') as string;
|
||||
const value = Number(tableMeta.get(row, '_value')) || 0;
|
||||
if (!pivoted[time]) pivoted[time] = { time, upload: 0, download: 0 };
|
||||
if (direction === 'upload') pivoted[time].upload += value;
|
||||
else if (direction === 'download') pivoted[time].download += value;
|
||||
if (!pivoted[time]) pivoted[time] = { time, upload: 0, download: 0, uploadPackets: 0, downloadPackets: 0 };
|
||||
if (field === 'packets') {
|
||||
if (direction === 'upload') pivoted[time].uploadPackets += value;
|
||||
else if (direction === 'download') pivoted[time].downloadPackets += value;
|
||||
} else {
|
||||
if (direction === 'upload') pivoted[time].upload += value;
|
||||
else if (direction === 'download') pivoted[time].download += value;
|
||||
}
|
||||
});
|
||||
} catch {
|
||||
// No data yet
|
||||
@@ -149,24 +156,31 @@ router.get('/apps', async (req: Request, res: Response) => {
|
||||
from(bucket: "${bucket}")
|
||||
|> range(start: -${range})
|
||||
|> filter(fn: (r) => r._measurement == "client_traffic")
|
||||
|> filter(fn: (r) => r._field == "bytes")
|
||||
|> filter(fn: (r) => r._field == "bytes" or r._field == "packets")
|
||||
${macFilter}
|
||||
|> group(columns: ["app"])
|
||||
|> group(columns: ["app", "_field"])
|
||||
|> sum()
|
||||
`;
|
||||
|
||||
const apps: { app: string; bytes: number }[] = [];
|
||||
const byApp = new Map<string, { bytes: number; packets: number }>();
|
||||
try {
|
||||
await queryApi.collectRows(fluxQuery, (row, tableMeta) => {
|
||||
apps.push({
|
||||
app: tableMeta.get(row, 'app') as string,
|
||||
bytes: Number(tableMeta.get(row, '_value')) || 0,
|
||||
});
|
||||
const app = tableMeta.get(row, 'app') as string;
|
||||
const field = tableMeta.get(row, '_field') as string;
|
||||
const value = Number(tableMeta.get(row, '_value')) || 0;
|
||||
let entry = byApp.get(app);
|
||||
if (!entry) {
|
||||
entry = { bytes: 0, packets: 0 };
|
||||
byApp.set(app, entry);
|
||||
}
|
||||
if (field === 'packets') entry.packets += value;
|
||||
else entry.bytes += value;
|
||||
});
|
||||
} catch {
|
||||
// No data yet
|
||||
}
|
||||
|
||||
const apps = Array.from(byApp.entries()).map(([app, e]) => ({ app, bytes: e.bytes, packets: e.packets }));
|
||||
res.json(apps.sort((a, b) => b.bytes - a.bytes));
|
||||
});
|
||||
|
||||
@@ -206,23 +220,30 @@ router.get('/client/:mac', async (req: Request, res: Response) => {
|
||||
from(bucket: "${bucket}")
|
||||
|> range(start: -${range})
|
||||
|> filter(fn: (r) => r._measurement == "client_traffic")
|
||||
|> filter(fn: (r) => r._field == "bytes")
|
||||
|> filter(fn: (r) => r._field == "bytes" or r._field == "packets")
|
||||
|> filter(fn: (r) => r.mac == "${mac}")
|
||||
|> group(columns: ["app"])
|
||||
|> group(columns: ["app", "_field"])
|
||||
|> sum()
|
||||
`;
|
||||
|
||||
const apps: { app: string; bytes: number }[] = [];
|
||||
const byApp = new Map<string, { bytes: number; packets: number }>();
|
||||
try {
|
||||
await queryApi.collectRows(appsFlux, (row, tableMeta) => {
|
||||
apps.push({
|
||||
app: tableMeta.get(row, 'app') as string,
|
||||
bytes: Number(tableMeta.get(row, '_value')) || 0,
|
||||
});
|
||||
const app = tableMeta.get(row, 'app') as string;
|
||||
const field = tableMeta.get(row, '_field') as string;
|
||||
const value = Number(tableMeta.get(row, '_value')) || 0;
|
||||
let entry = byApp.get(app);
|
||||
if (!entry) {
|
||||
entry = { bytes: 0, packets: 0 };
|
||||
byApp.set(app, entry);
|
||||
}
|
||||
if (field === 'packets') entry.packets += value;
|
||||
else entry.bytes += value;
|
||||
});
|
||||
} catch {
|
||||
// No data yet
|
||||
}
|
||||
const apps = Array.from(byApp.entries()).map(([app, e]) => ({ app, bytes: e.bytes, packets: e.packets }));
|
||||
|
||||
res.json({
|
||||
series: Object.values(pivoted).sort((a, b) => a.time.localeCompare(b.time)),
|
||||
|
||||
Generated
+2
-2
@@ -1,12 +1,12 @@
|
||||
{
|
||||
"name": "mikrotik-manager-frontend",
|
||||
"version": "0.14.1-beta",
|
||||
"version": "0.15.0-beta",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "mikrotik-manager-frontend",
|
||||
"version": "0.14.1-beta",
|
||||
"version": "0.15.0-beta",
|
||||
"dependencies": {
|
||||
"@tanstack/react-query": "^5.17.1",
|
||||
"@types/leaflet": "^1.9.21",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "mikrotik-manager-frontend",
|
||||
"version": "0.14.1-beta",
|
||||
"version": "0.15.0-beta",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
|
||||
@@ -6,8 +6,8 @@ import {
|
||||
AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer,
|
||||
PieChart, Pie, Cell, Legend,
|
||||
} from 'recharts';
|
||||
import { Activity, ArrowDown, ArrowUp, BarChart3, Settings2 } from 'lucide-react';
|
||||
import { format, parseISO } from 'date-fns';
|
||||
import { Activity, ArrowDown, ArrowUp, BarChart3, Router as RouterIcon, Settings2, AlertTriangle } from 'lucide-react';
|
||||
import { format, parseISO, formatDistanceToNow } from 'date-fns';
|
||||
import clsx from 'clsx';
|
||||
import { trafficApi } from '../services/api';
|
||||
|
||||
@@ -28,6 +28,13 @@ function formatBytes(bytes: number): string {
|
||||
return `${(bytes / 1024 ** 4).toFixed(2)} TB`;
|
||||
}
|
||||
|
||||
function formatCount(n: number): string {
|
||||
if (n < 1000) return `${n}`;
|
||||
if (n < 1_000_000) return `${(n / 1000).toFixed(1)}K`;
|
||||
if (n < 1_000_000_000) return `${(n / 1_000_000).toFixed(1)}M`;
|
||||
return `${(n / 1_000_000_000).toFixed(2)}B`;
|
||||
}
|
||||
|
||||
function timeFormatter(range: Range) {
|
||||
return (t: string) => {
|
||||
try {
|
||||
@@ -67,6 +74,12 @@ export default function TrafficAnalyticsPage() {
|
||||
refetchInterval: 60_000,
|
||||
});
|
||||
|
||||
const { data: status } = useQuery({
|
||||
queryKey: ['traffic-status'],
|
||||
queryFn: () => trafficApi.status().then(r => r.data),
|
||||
refetchInterval: 30_000,
|
||||
});
|
||||
|
||||
const isLoading = seriesLoading || clientsLoading || appsLoading;
|
||||
const hasData = series.length > 0 || topClients.length > 0 || apps.length > 0;
|
||||
|
||||
@@ -75,6 +88,12 @@ export default function TrafficAnalyticsPage() {
|
||||
const totalAppBytes = apps.reduce((s, a) => s + a.bytes, 0);
|
||||
const maxClientBytes = topClients[0]?.total_bytes || 1;
|
||||
|
||||
// Collector data-health: how much of the received traffic we could attribute
|
||||
const exporters = [...(status?.exporters || [])].sort((a, b) => b.flows - a.flows);
|
||||
const pktReceived = status?.packetsReceived || 0;
|
||||
const pktUnattributed = status?.packetsFromUnknownExporter || 0;
|
||||
const attributionRate = pktReceived > 0 ? ((pktReceived - pktUnattributed) / pktReceived) * 100 : 0;
|
||||
|
||||
// Donut: top 8 categories, rest folded into "Other"
|
||||
const donutData = (() => {
|
||||
const top = apps.slice(0, 8);
|
||||
@@ -178,7 +197,30 @@ export default function TrafficAnalyticsPage() {
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
{/* Inbound packets chart */}
|
||||
<div className="card p-5">
|
||||
<h2 className="text-sm font-semibold text-gray-700 dark:text-slate-200 mb-4">Inbound Packets</h2>
|
||||
<ResponsiveContainer width="100%" height={220}>
|
||||
<AreaChart data={series}>
|
||||
<defs>
|
||||
<linearGradient id="pktIn" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="5%" stopColor="#10b981" stopOpacity={0.35} />
|
||||
<stop offset="95%" stopColor="#10b981" stopOpacity={0} />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<CartesianGrid strokeDasharray="3 3" className="stroke-gray-200 dark:stroke-slate-700" />
|
||||
<XAxis dataKey="time" tickFormatter={timeFormatter(range)} tick={{ fontSize: 11 }} stroke="currentColor" />
|
||||
<YAxis tickFormatter={v => formatCount(v)} tick={{ fontSize: 11 }} width={55} stroke="currentColor" />
|
||||
<Tooltip
|
||||
labelFormatter={t => { try { return format(parseISO(String(t)), 'MMM d, HH:mm'); } catch { return String(t); } }}
|
||||
formatter={(value: number) => [`${formatCount(value)} pkts`, 'Inbound']}
|
||||
/>
|
||||
<Area type="monotone" dataKey="downloadPackets" stroke="#10b981" fill="url(#pktIn)" strokeWidth={2} />
|
||||
</AreaChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6 items-start">
|
||||
{/* Top talkers */}
|
||||
<div className="card overflow-hidden">
|
||||
<div className="px-5 py-3 border-b border-gray-200 dark:border-slate-700 flex items-center gap-2">
|
||||
@@ -194,8 +236,8 @@ export default function TrafficAnalyticsPage() {
|
||||
return (
|
||||
<div key={c.mac}
|
||||
onClick={() => isReal && navigate(`/clients/${encodeURIComponent(c.mac)}`)}
|
||||
className={clsx('px-5 py-3', isReal && 'cursor-pointer hover:bg-blue-50 dark:hover:bg-slate-700/40 transition-colors')}>
|
||||
<div className="flex items-center justify-between mb-1.5">
|
||||
className={clsx('px-5 py-2', isReal && 'cursor-pointer hover:bg-blue-50 dark:hover:bg-slate-700/40 transition-colors')}>
|
||||
<div className="flex items-center justify-between mb-1">
|
||||
<div className="min-w-0">
|
||||
<span className="text-sm font-medium text-gray-900 dark:text-white truncate">{clientLabel(c)}</span>
|
||||
{isReal && (
|
||||
@@ -207,7 +249,7 @@ export default function TrafficAnalyticsPage() {
|
||||
<div className="h-1.5 rounded-full bg-gray-100 dark:bg-slate-700 overflow-hidden">
|
||||
<div className="h-full rounded-full bg-blue-500" style={{ width: `${Math.max(2, (c.total_bytes / maxClientBytes) * 100)}%` }} />
|
||||
</div>
|
||||
<div className="mt-1 flex gap-3 text-xs text-gray-400 dark:text-slate-500">
|
||||
<div className="mt-0.5 flex gap-3 text-xs text-gray-400 dark:text-slate-500">
|
||||
<span className="inline-flex items-center gap-0.5"><ArrowDown className="w-3 h-3" />{formatBytes(c.download_bytes)}</span>
|
||||
<span className="inline-flex items-center gap-0.5"><ArrowUp className="w-3 h-3" />{formatBytes(c.upload_bytes)}</span>
|
||||
</div>
|
||||
@@ -218,6 +260,8 @@ export default function TrafficAnalyticsPage() {
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Right column: protocol breakdown + data health, stacked to align with Top Talkers */}
|
||||
<div className="space-y-6">
|
||||
{/* App categories */}
|
||||
<div className="card overflow-hidden">
|
||||
<div className="px-5 py-3 border-b border-gray-200 dark:border-slate-700 flex items-center gap-2">
|
||||
@@ -227,23 +271,37 @@ export default function TrafficAnalyticsPage() {
|
||||
{apps.length === 0
|
||||
? <div className="p-6 text-center text-sm text-gray-400 dark:text-slate-500">No application data recorded.</div>
|
||||
: (
|
||||
<div className="p-5">
|
||||
<ResponsiveContainer width="100%" height={220}>
|
||||
<PieChart>
|
||||
<Pie data={donutData} dataKey="bytes" nameKey="app" innerRadius={55} outerRadius={85} paddingAngle={2}>
|
||||
{donutData.map((entry, i) => (
|
||||
<Cell key={entry.app} fill={APP_COLORS[i % APP_COLORS.length]} />
|
||||
))}
|
||||
</Pie>
|
||||
<Tooltip formatter={(value: number, name: string) => [formatBytes(value), name]} />
|
||||
</PieChart>
|
||||
</ResponsiveContainer>
|
||||
<div className="mt-2 space-y-1.5">
|
||||
{apps.slice(0, 10).map((a, i) => (
|
||||
<div className="p-5 flex flex-col sm:flex-row sm:items-center gap-5">
|
||||
{/* Donut — grows to fill the available space */}
|
||||
<div className="relative w-full sm:w-1/2 flex-shrink-0">
|
||||
<ResponsiveContainer width="100%" height={260}>
|
||||
<PieChart>
|
||||
<Pie data={donutData} dataKey="bytes" nameKey="app" innerRadius="58%" outerRadius="92%" paddingAngle={1.5} stroke="none">
|
||||
{donutData.map((entry, i) => (
|
||||
<Cell key={entry.app} fill={APP_COLORS[i % APP_COLORS.length]} />
|
||||
))}
|
||||
</Pie>
|
||||
<Tooltip
|
||||
formatter={(value: number, name: string) => [
|
||||
`${formatBytes(value)}${totalAppBytes > 0 ? ` · ${((value / totalAppBytes) * 100).toFixed(1)}%` : ''}`,
|
||||
name,
|
||||
]}
|
||||
/>
|
||||
</PieChart>
|
||||
</ResponsiveContainer>
|
||||
{/* Center label */}
|
||||
<div className="absolute inset-0 flex flex-col items-center justify-center pointer-events-none">
|
||||
<span className="text-[11px] uppercase tracking-wide text-gray-400 dark:text-slate-500">Total</span>
|
||||
<span className="text-base font-bold text-gray-900 dark:text-white">{formatBytes(totalAppBytes)}</span>
|
||||
</div>
|
||||
</div>
|
||||
{/* Legend — uses the vertical space beside the donut */}
|
||||
<div className="flex-1 min-w-0 space-y-1.5">
|
||||
{apps.slice(0, 12).map((a, i) => (
|
||||
<div key={a.app} className="flex items-center gap-2 text-sm">
|
||||
<span className="w-2.5 h-2.5 rounded-sm flex-shrink-0" style={{ backgroundColor: APP_COLORS[i % APP_COLORS.length] }} />
|
||||
<span className="text-gray-700 dark:text-slate-300 flex-1 truncate">{a.app}</span>
|
||||
<span className="text-gray-500 dark:text-slate-400 text-xs">
|
||||
<span className="text-gray-500 dark:text-slate-400 text-xs w-12 text-right">
|
||||
{totalAppBytes > 0 ? `${((a.bytes / totalAppBytes) * 100).toFixed(1)}%` : ''}
|
||||
</span>
|
||||
<span className="font-medium text-gray-900 dark:text-white w-20 text-right">{formatBytes(a.bytes)}</span>
|
||||
@@ -253,6 +311,84 @@ export default function TrafficAnalyticsPage() {
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Flow sources & data health */}
|
||||
<div className="card overflow-hidden">
|
||||
<div className="px-5 py-3 border-b border-gray-200 dark:border-slate-700 flex items-center justify-between gap-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<RouterIcon className="w-4 h-4 text-cyan-500" />
|
||||
<h2 className="text-sm font-semibold text-gray-700 dark:text-slate-200">Flow Sources & Data Health</h2>
|
||||
</div>
|
||||
<span className={clsx('inline-flex items-center gap-1.5 px-2 py-0.5 rounded-full text-xs font-medium',
|
||||
status?.listening
|
||||
? 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400'
|
||||
: 'bg-gray-100 text-gray-500 dark:bg-slate-700 dark:text-slate-400')}>
|
||||
<span className={clsx('w-1.5 h-1.5 rounded-full', status?.listening ? 'bg-emerald-500' : 'bg-gray-400')} />
|
||||
{status?.listening ? `Listening :${status.port}` : 'Collector stopped'}
|
||||
</span>
|
||||
</div>
|
||||
<div className="p-5 space-y-4">
|
||||
{/* Health summary */}
|
||||
<div className="grid grid-cols-2 sm:grid-cols-4 gap-4">
|
||||
<div>
|
||||
<div className="text-xs text-gray-400 dark:text-slate-500">Packets received</div>
|
||||
<div className="text-base font-bold text-gray-900 dark:text-white">{formatCount(pktReceived)}</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-xs text-gray-400 dark:text-slate-500">Flows attributed</div>
|
||||
<div className="text-base font-bold text-gray-900 dark:text-white">{formatCount(status?.flowsAttributed || 0)}</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-xs text-gray-400 dark:text-slate-500">Attribution rate</div>
|
||||
<div className={clsx('text-base font-bold',
|
||||
attributionRate >= 90 ? 'text-emerald-600 dark:text-emerald-400'
|
||||
: attributionRate >= 60 ? 'text-amber-600 dark:text-amber-400'
|
||||
: 'text-red-600 dark:text-red-400')}>
|
||||
{pktReceived > 0 ? `${attributionRate.toFixed(0)}%` : '—'}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-xs text-gray-400 dark:text-slate-500">Exporting devices</div>
|
||||
<div className="text-base font-bold text-gray-900 dark:text-white">{exporters.length}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Low-attribution hint */}
|
||||
{pktReceived > 0 && attributionRate < 90 && (
|
||||
<div className="flex items-start gap-2 text-xs text-amber-700 dark:text-amber-400 bg-amber-50 dark:bg-amber-900/20 rounded-lg px-3 py-2">
|
||||
<AlertTriangle className="w-3.5 h-3.5 mt-0.5 flex-shrink-0" />
|
||||
<span>
|
||||
{formatCount(pktUnattributed)} packets came from an unrecognized exporter (often NAT in the path).
|
||||
Their traffic is still counted but may not map to the right device.
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Per-exporter rows */}
|
||||
{exporters.length === 0
|
||||
? <div className="text-sm text-gray-400 dark:text-slate-500">No routers have exported flows yet. <Link to="/network-services/netflow" className="text-blue-600 dark:text-blue-400 hover:underline">Configure NetFlow export →</Link></div>
|
||||
: (
|
||||
<div className="divide-y divide-gray-100 dark:divide-slate-800 -mb-1">
|
||||
{exporters.map(e => (
|
||||
<div key={e.deviceId} className="flex items-center justify-between py-2 gap-3">
|
||||
<div className="min-w-0 flex items-center gap-2">
|
||||
<RouterIcon className="w-3.5 h-3.5 text-gray-400 dark:text-slate-500 flex-shrink-0" />
|
||||
<span className="text-sm text-gray-700 dark:text-slate-200 truncate">{e.deviceName}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-4 flex-shrink-0 text-xs text-gray-500 dark:text-slate-400">
|
||||
<span>{formatCount(e.flows)} flows</span>
|
||||
<span>{formatCount(e.packets)} pkts</span>
|
||||
<span className="w-24 text-right text-gray-400 dark:text-slate-500">
|
||||
{e.lastSeen ? `${formatDistanceToNow(parseISO(e.lastSeen))} ago` : 'never'}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
@@ -849,7 +849,7 @@ export interface NetflowDeviceState {
|
||||
|
||||
// ─── Traffic Analytics (NetFlow) ──────────────────────────────────────────────
|
||||
|
||||
export interface ClientTrafficPoint { time: string; upload: number; download: number }
|
||||
export interface ClientTrafficPoint { time: string; upload: number; download: number; uploadPackets?: number; downloadPackets?: number }
|
||||
export interface TrafficTopClient {
|
||||
mac: string;
|
||||
upload_bytes: number;
|
||||
@@ -860,7 +860,7 @@ export interface TrafficTopClient {
|
||||
vendor: string | null;
|
||||
ip_address: string | null;
|
||||
}
|
||||
export interface TrafficApp { app: string; bytes: number }
|
||||
export interface TrafficApp { app: string; bytes: number; packets?: number }
|
||||
export interface TrafficCollectorStats {
|
||||
listening: boolean;
|
||||
port: number;
|
||||
|
||||
@@ -1 +1 @@
|
||||
export const APP_VERSION = 'v0.14.1 Beta';
|
||||
export const APP_VERSION = 'v0.15.0 Beta';
|
||||
|
||||
Reference in New Issue
Block a user