feat(web-ng): improve Flows tab in Device Details #1085

New issue

Open

opened 2026-03-28 04:31:31 +00:00 by mfreeman451 · 0 comments

mfreeman451 commented

2026-03-28 04:31:31 +00:00

Owner

Imported from GitHub.

Original GitHub issue: #2967
Original author: @mfreeman451
Original URL: https://github.com/carverauto/serviceradar/issues/2967
Original created: 2026-03-01T06:51:07Z

A Time-Series "Traffic Profile" Chart (Top)
Right under the "Flows (21 rows)" header and before the table, you need a time-series graph representing the query range (last_24h).
What it is: An area chart showing bandwidth (Bits per Second) or packet rate (Packets per Second) over time.
Why: If the device experienced a massive traffic spike at 3:00 AM, the table won't show that easily. A graph makes anomalies instantly visible.
Interaction: Allow users to click and drag a box on this chart to zoom in, which should automatically update the global search query to that narrower time window.
A Row of "Top N" Summary Widgets (Middle)
Between the time-series chart and the raw table, add a row of 3 or 4 small summary widgets. These aggregate the data shown in the table:
Top Talkers (Source IPs): A horizontal bar chart showing the top 5 IPs generating traffic.
Top Destinations: A horizontal bar chart of the top 5 receiving IPs.
Top Ports/Protocols: A pie chart or bar chart showing the breakdown (e.g., 80% HTTPS, 10% SNMP, 10% SSH).
UI Tip: Make these widgets clickable. If I click the bar for 192.168.2.22 in the Top Talkers widget, it should instantly append source:"192.168.2.22" to your search bar and filter the view.
Enhancements to the Raw Table (Bottom)
The table is great, but you can make it much more scannable with a few tweaks:
Inline Context/DNS Resolution: You have 192.168.2.22 and 216.17.46.98. If your system knows the hostnames for these (either via reverse DNS, integration with a local inventory, or the identity tab), display the hostname with the IP slightly grayed out underneath it.
Data Bars for Bytes/Packets: In the Bytes and Packets columns, render a subtle horizontal background bar representing the relative size of that flow compared to the largest flow in the current view. This instantly draws the eye to the "elephant flows."
Interfaces: NetFlow records usually contain input_snmp and output_snmp interface IDs. It would be highly valuable to show which interface on the Ubiquiti router this traffic traversed.
Quick Filters / Faceting (Sidebar or Sub-header)
You have a powerful search bar (in:flows device_id:...), but users love point-and-click.
Add a visual filtering sidebar on the left (or dropdowns at the top) that parses the available data.
For example: showing checkboxes for Protocols (TCP, UDP), Directions (ingress, egress), and Known Services (HTTP, SNMP).
Summary of the Ideal Layout for this Tab:
Search Bar (Already there, looks great).
Traffic Chart (Bandwidth over the last 24h).
3 Mini-Charts (Top Source, Top Dest, Top Port).
Flows Table (Your current table, but with visual data bars for the Bytes column and quick-action filters).

Imported from GitHub. Original GitHub issue: #2967 Original author: @mfreeman451 Original URL: https://github.com/carverauto/serviceradar/issues/2967 Original created: 2026-03-01T06:51:07Z --- 1. A Time-Series "Traffic Profile" Chart (Top) Right under the "Flows (21 rows)" header and before the table, you need a time-series graph representing the query range (last_24h). What it is: An area chart showing bandwidth (Bits per Second) or packet rate (Packets per Second) over time. Why: If the device experienced a massive traffic spike at 3:00 AM, the table won't show that easily. A graph makes anomalies instantly visible. Interaction: Allow users to click and drag a box on this chart to zoom in, which should automatically update the global search query to that narrower time window. 2. A Row of "Top N" Summary Widgets (Middle) Between the time-series chart and the raw table, add a row of 3 or 4 small summary widgets. These aggregate the data shown in the table: Top Talkers (Source IPs): A horizontal bar chart showing the top 5 IPs generating traffic. Top Destinations: A horizontal bar chart of the top 5 receiving IPs. Top Ports/Protocols: A pie chart or bar chart showing the breakdown (e.g., 80% HTTPS, 10% SNMP, 10% SSH). UI Tip: Make these widgets clickable. If I click the bar for 192.168.2.22 in the Top Talkers widget, it should instantly append source:"192.168.2.22" to your search bar and filter the view. 3. Enhancements to the Raw Table (Bottom) The table is great, but you can make it much more scannable with a few tweaks: Inline Context/DNS Resolution: You have 192.168.2.22 and 216.17.46.98. If your system knows the hostnames for these (either via reverse DNS, integration with a local inventory, or the identity tab), display the hostname with the IP slightly grayed out underneath it. Data Bars for Bytes/Packets: In the Bytes and Packets columns, render a subtle horizontal background bar representing the relative size of that flow compared to the largest flow in the current view. This instantly draws the eye to the "elephant flows." Interfaces: NetFlow records usually contain input_snmp and output_snmp interface IDs. It would be highly valuable to show which interface on the Ubiquiti router this traffic traversed. 4. Quick Filters / Faceting (Sidebar or Sub-header) You have a powerful search bar (in:flows device_id:...), but users love point-and-click. Add a visual filtering sidebar on the left (or dropdowns at the top) that parses the available data. For example: showing checkboxes for Protocols (TCP, UDP), Directions (ingress, egress), and Known Services (HTTP, SNMP). Summary of the Ideal Layout for this Tab: Search Bar (Already there, looks great). Traffic Chart (Bandwidth over the last 24h). 3 Mini-Charts (Top Source, Top Dest, Top Port). Flows Table (Your current table, but with visual data bars for the Bytes column and quick-action filters).

Rows
Columns