shadcn.io is not affiliated with official shadcn/ui
Firewall Packet Tester Success Block for Solid
A confirmation panel for applied firewall rules: a native table of four rules in priority order beside a packet tester where a port and a source decide which rule matches, first match wins, and the matching row is marked.
Installation
Overview
Show what a new set of firewall rules does with this confirmation panel for Solid with Ark UI. It is the panel Moatby, a cloud firewall, shows once rules are applied to a group of servers: a header with one action, the Shine Button that opens the logs, over one framed card ruled by Guides. The first band says what happened and gives three facts. The second is split: at the start a native table of the four rules in priority order (SSH from the office range, HTTPS from anywhere, the database from the app subnet, then deny everything else), with an outline Badge for each action; at the end a packet tester with two Native Selects, a port and where the packet comes from. It says which rule decides, because the first rule that matches wins, and marks that row. For firewalls, security groups and any list of rules that are read from the top.
FAQ
What stays in the page, and how do I wire it for real?
Nothing was applied to a real firewall. The rules, the sources and the ports are typed in RULES, SOURCES and PORTS, and the tester only reads those four rules. To wire it, replace them with the rules you applied and the sources your customers choose, or run the tester against your own evaluation function.
How is the matching decided?
decidingRule walks the rules from the first down and stops at the first one whose port and source both cover the packet; the last rule covers everything, so there is always an answer. A source is inside a block when its address, read as a number, falls between the block's first and last address (IPv4 only). All the addresses are from the documentation ranges, such as 198.51.100.0/24.
What happens when I change a select?
The verdict ("Allowed by rule 2", "Denied by the default rule") and the sentence under it change at once, the matching row of the table gets a solid tint and a bar at its start (and is marked as the current row for assistive technology), and the polite status message says what was tested and the result. The panel never changes height.
Is the table accessible?
It is a native table with a caption, column headers and the rule number as each row's header, on all four bases (React Aria's own table is a keyboard grid, so this one stays a plain table). The action is a word, "Allow" or "Deny", never a color.