2GT-RichandClaude Fable 5
b841eb6e7b
Adds Meraki-style traffic analytics powered by MikroTik Traffic Flow: Backend - Built-in NetFlow v9 + IPFIX collector (UDP 2055) with hand-rolled decoder, template caching, enterprise-field and IPv6 support - Flow attribution: client IP → MAC via the clients table, upload/download direction, NAT-duplicate records dropped - App classification by protocol/port (~25 categories: HTTPS, QUIC, DNS, SSH, Email, WireGuard, ...) - Deduplication: per-client best-exporter-per-window so flows crossing two managed routers are never double-counted - NAT-tolerant ingest: flows from sources matching no managed device (NAT / Tailscale subnet routers in path) are accepted as per-source unidentified exporters instead of silently dropped (netflow_accept_unknown setting) - Storage: InfluxDB client_traffic time-series (bounded cardinality via top-N fold) + Postgres client_traffic_daily rollups; daily retention purge - One-toggle device config push via RouterOS API (/ip traffic-flow + target) - New /api/traffic/* analytics endpoints + /api/network-services/netflow - docker-compose: NETFLOW_PORT (default 2055/udp) published on the backend Frontend - New Traffic page: fleet up/down chart, top talkers with client click-through, app-category donut, 1h–30d ranges - New NetFlow config page: collector settings, live ingest stats, per-device export toggles with health badges, NAT-source banner - Client detail: App Traffic card (auto-hides without data) - Clients page: sortable "Data (today)" column - Settings: NetFlow retention controls Includes 17 unit tests (decoder fixtures, dedup, attribution, classifier); verified end-to-end against live RouterOS devices. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
80 lines
4.1 KiB
TypeScript
80 lines
4.1 KiB
TypeScript
import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
|
|
import { useAuthStore } from './store/authStore';
|
|
import AppLayout from './components/layout/AppLayout';
|
|
import LoginPage from './pages/LoginPage';
|
|
import DashboardPage from './pages/DashboardPage';
|
|
import DevicesPage from './pages/DevicesPage';
|
|
import DeviceDetailPage from './pages/DeviceDetailPage';
|
|
import ClientsPage from './pages/ClientsPage';
|
|
import EventsPage from './pages/EventsPage';
|
|
import TopologyPage from './pages/TopologyPage';
|
|
import BackupsPage from './pages/BackupsPage';
|
|
import SettingsPage from './pages/SettingsPage';
|
|
import SwitchesOverviewPage from './pages/SwitchesOverviewPage';
|
|
import SwitchesSettingsPage from './pages/SwitchesSettingsPage';
|
|
import RoutersPage from './pages/RoutersPage';
|
|
import RouterSettingsPage from './pages/RouterSettingsPage';
|
|
import WirelessPage from './pages/WirelessPage';
|
|
import WirelessSettingsPage from './pages/WirelessSettingsPage';
|
|
import WirelessClientsPage from './pages/WirelessClientsPage';
|
|
import ClientDetailPage from './pages/ClientDetailPage';
|
|
import NetworkServicesOverviewPage from './pages/NetworkServicesOverviewPage';
|
|
import NetworkServicesDHCPPage from './pages/NetworkServicesDHCPPage';
|
|
import NetworkServicesDNSPage from './pages/NetworkServicesDNSPage';
|
|
import NetworkServicesNTPPage from './pages/NetworkServicesNTPPage';
|
|
import NetworkServicesWireGuardPage from './pages/NetworkServicesWireGuardPage';
|
|
import NetworkServicesSyslogPage from './pages/NetworkServicesSyslogPage';
|
|
import NetworkServicesNetflowPage from './pages/NetworkServicesNetflowPage';
|
|
import TrafficAnalyticsPage from './pages/TrafficAnalyticsPage';
|
|
|
|
function ProtectedRoute({ children }: { children: React.ReactNode }) {
|
|
const token = useAuthStore((s) => s.token);
|
|
if (!token) return <Navigate to="/login" replace />;
|
|
return <>{children}</>;
|
|
}
|
|
|
|
export default function App() {
|
|
return (
|
|
<BrowserRouter>
|
|
<Routes>
|
|
<Route path="/login" element={<LoginPage />} />
|
|
<Route
|
|
path="/"
|
|
element={
|
|
<ProtectedRoute>
|
|
<AppLayout />
|
|
</ProtectedRoute>
|
|
}
|
|
>
|
|
<Route index element={<Navigate to="/dashboard" replace />} />
|
|
<Route path="dashboard" element={<DashboardPage />} />
|
|
<Route path="devices" element={<DevicesPage />} />
|
|
<Route path="devices/:id" element={<DeviceDetailPage />} />
|
|
<Route path="clients" element={<ClientsPage />} />
|
|
<Route path="clients/:mac" element={<ClientDetailPage />} />
|
|
<Route path="events" element={<EventsPage />} />
|
|
<Route path="topology" element={<TopologyPage />} />
|
|
<Route path="backups" element={<BackupsPage />} />
|
|
<Route path="settings" element={<SettingsPage />} />
|
|
<Route path="switches" element={<SwitchesOverviewPage />} />
|
|
<Route path="switches/settings" element={<SwitchesSettingsPage />} />
|
|
<Route path="routers" element={<RoutersPage />} />
|
|
<Route path="routers/settings" element={<RouterSettingsPage />} />
|
|
<Route path="wireless" element={<WirelessPage />} />
|
|
<Route path="wireless/settings" element={<WirelessSettingsPage />} />
|
|
<Route path="wireless/clients" element={<WirelessClientsPage />} />
|
|
<Route path="network-services" element={<NetworkServicesOverviewPage />} />
|
|
<Route path="network-services/dhcp" element={<NetworkServicesDHCPPage />} />
|
|
<Route path="network-services/dns" element={<NetworkServicesDNSPage />} />
|
|
<Route path="network-services/ntp" element={<NetworkServicesNTPPage />} />
|
|
<Route path="network-services/wireguard" element={<NetworkServicesWireGuardPage />} />
|
|
<Route path="network-services/syslog" element={<NetworkServicesSyslogPage />} />
|
|
<Route path="network-services/netflow" element={<NetworkServicesNetflowPage />} />
|
|
<Route path="traffic" element={<TrafficAnalyticsPage />} />
|
|
</Route>
|
|
<Route path="*" element={<Navigate to="/dashboard" replace />} />
|
|
</Routes>
|
|
</BrowserRouter>
|
|
);
|
|
}
|