Active Connections Age Monitoring Block for React

Edit BUCKETS: each has a label, the count of connections of each protocol (mix) and its six longest-lived connections with their age in seconds, the protocol and the bytes sent. A bucket's count is the sum of its mix, the total, the bar widths, the protocol shares (adding up to exactly 100) and the header sentence are all worked out from them, so nothing is typed twice.

Counts span two orders of magnitude, so a plain scale would hide the 189 connections between ten minutes and an hour. A bar's width is ln(1 + count) / ln(1 + biggest), which keeps small buckets visible; the counts beside them are exact.

No. The counts, peers and ages are typed examples and the panel says it is a snapshot; nothing is connected or counted. In your app read the buckets from your gateway's connection table.

The buckets are a radio group: Tab enters it, the arrow keys move the choice and the list below follows, and a polite status line names the bucket and its longest connection. The list always has six rows, so choosing does not change the frame's height.

The bars take the full width with their labels and counts, the connections become a list under them (peer and protocol on one line, age and bytes under), and the side cell comes last.