A desktop-first React dashboard for exploring directed network traffic in real time and replaying recent history.
- Live WebSocket updates with connected, reconnecting, and stale-data states.
- Directed Host and Rack views with stable layouts and traffic-intensity filtering.
- A paginated 40-minute history replay with playback and timeline controls.
- Hover and pinned edge inspection with TCP/UDP block and byte charts.
- Resizable pinned inspectors with dynamic axes and exact values on chart hover.
For Redis, backend, and simulator or real-telemetry startup, see the eCenter setup guide.
- Node.js and npm
- The traffic-monitoring backend running on the same machine at
http://localhost:8080
From this frontend repository's root, install dependencies and start the Vite development server:
npm install
npm run devOpen the local URL printed by the development server. Vite proxies /ws, /edge, and /history to localhost:8080. This setup runs the frontend and backend on the same machine, so the existing fixed proxy needs no changes.
| Interaction | Result |
|---|---|
| Select Live or History | Switch between current traffic and the replay timeline. |
| Select Host view or Rack view | Change between directed host connections and aggregated rack traffic. |
| Select a legend range | Show only edges within that traffic-intensity range. |
| Hover an edge | Open a temporary traffic preview. |
| Click an edge | Pin its inspector for chart interaction and resizing. |
| Hover a chart | Show the nearest time bin with exact TCP and UDP values. |
History loads in pages and preserves the live WebSocket connection. Use the timeline, step controls, or playback button to inspect the available 40-minute range.
- Backend data contract describes WebSocket messages and the
/edgeand/historyAPIs. - Graph behavior defines graph layout, filtering, inspection, and replay behavior.
The frontend uses React, TypeScript, Vite, and Cytoscape.js.
npm test
npm run build
npm run lint