Flows page: refactor using latest netifyd engine

[Tbaile]

Scope

• Implement a Network Traffic Flow Table to visualize real-time and historical network connections.
• The table will be used under network monitoring sections to display detailed flow information.
• Each entry represents a unique connection or flow captured by the engine.

---

Table Overview

Columns:

Column	Description
Application	Name or identifier of the application generating or receiving the traffic.
Protocol	Transport protocol used (e.g., TCP, UDP, ICMP).
Source (IP:Port)	Source IP address and port of the connection.
Destination (IP/Domain:Port)	Destination IP or domain and port (use domain if resolved by the engine).
Initiator	Indicates who initiated the connection: Firewall (local) or Outside (remote).
Duration	Connection lifespan (HH:MM:SS format).
Instant Download / Upload	Real-time transfer rates (e.g., Mbps or KB/s).
Total Download / Upload	Cumulative transferred data for the connection.
Info	Generic field for connection-specific data (e.g., TLS version, policy rule, user, etc.).

---

User Actions

Main Actions

• Filter flows by Application, Protocol, IP, or Initiator.
• Search connections by domain or IP.
• Sort by any column (ascending/descending).
• Paginate results to handle large datasets efficiently.
• Refresh / Auto-refresh control (top right corner):
  • Dropdown to select refresh interval: 5s, 10s, 30s, 60s.
  • Option to pause updates (manual refresh mode).
  • Visual indicator of last refresh time.

---

Example Table Entry

Application	Protocol	Source	Destination	Initiator	Duration	Inst. DL	Inst. UL	Total DL	Total UL	Info
Spotify	QUIC	192.168.1.10:443	example.com:443	Firewall	00:10:32	3.2 Mbps	150 Kbps	200 MB	8 MB	TLS 1.3, HTTP/2

---

POC example:

[AmaLuci]

Mockups ready for review on Figma

[andre8244]

Not sure about:

• the page description
• stopping the data refresh on hover

Aside from this LGTM ✔️