shadcn.io is not affiliated with official shadcn/ui
Firewall Packet Tester Success Block for React
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 React with Base 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.
Related
- Pro
IP Allowlist Settings
Sign-in and securityAn IP allowlist settings panel with an enforcement switch and a lockout guard that says whether your own address is covered, a rules table, and an add form that parses IPv4 and IPv6 ranges and names the rule that already covers a new one.
- Pro
Audit Scorecard Success
Saves and updatesA confirmation page for a finished control review: a ring of the checks that passed worked out from six control families, each family as a row of cells (filled for a pass, hollow for a check that did not), a short list of findings and dates, and a real one-page PDF summary to download.
- Pro
Load Balancer Routing Success
Domains and networkA confirmation window for a new load balancer: the routing drawn top-down from clients through the balancer to three zones of backend dots, the entry hostname with a copy button, and a zone picker that lists the chosen zone's four backends with their addresses.
- Pro
SSO Test and Enforce Success
Security and accessA single sign-on confirmation inside an app panel: the connection's metadata with real copy buttons, a Test sign-in that passes locally and unlocks a Require SSO for everyone switch, and an alert dialog that confirms it.
- Pro
DNS Propagation Success
Domains and networkA confirmation panel for a saved DNS record: the record as four monospace cells with a copy button for its zone-file line, eight resolvers each Live or Pending with a bar and a count, and a Check again button that moves the next two resolvers to Live until the record has propagated.
- Pro
Compliance Controls Settings
Privacy and consentA policy review window: a rail of six sample policies grouped Overdue, Due soon and Current, and a pane with owner, cadence, the next review worked out from a typed date and who has acknowledged.