NetworkRules

Code

import { NetworkRules, type FirewallRule } from "@fadymondy/nasaq/web";declare const firewall: FirewallRule[];declare const api: { applyFirewall(rules: FirewallRule[]): Promise<void> };export const Network = () => <NetworkRules firewall={firewall} onApplyFirewall={(rules) => api.applyFirewall(rules)} />;

Server Tools · beta

Live examples and controls: NetworkRules in the lab.

InstallCopy Anchor Link

npx shadcn@latest add https://docs.nasaqui.com/r/network-rules.json

Edit the firewall and HTTP rules of a server. Rules run top to bottom and the first match wins, so order matters; each row can be edited, moved up or down, or removed (from the row menu or right-click). Nothing is sent until Apply: changes are staged, added and changed rows are marked, removed rows stay visible struck through with Undo, and Discard drops the lot. A warning shows when a rule would deny SSH before an allow. It has no backend: onApplyFirewall receives the whole staged list and you pass the new firewall back.

When to useCopy Anchor Link

• A server or site security page.
• Anywhere rules are an ordered list that should only go live when the user says so.

When not to useCopy Anchor Link

• Rules with conditions and actions (if this, then that): use RuleBuilder.
• A live traffic log: use LogViewer.

ImportCopy Anchor Link

import { NetworkRules } from "@fadymondy/nasaq/web";
// inside this monorepo: "@nasaq/web"

Quick startCopy Anchor Link

import { NetworkRules, type FirewallRule } from "@fadymondy/nasaq/web";

declare const firewall: FirewallRule[];
declare const api: { applyFirewall(rules: FirewallRule[]): Promise<void> };

export const Network = () => <NetworkRules firewall={firewall} onApplyFirewall={(rules) => api.applyFirewall(rules)} />;

AnatomyCopy Anchor Link

NetworkRules                 data-slot="network-rules"
├─ Tabs                      Firewall, HTTP rules (only when `http` is given)
├─ DataTable                 #, action, protocol and port, source, note, state; row menu: Edit, Move up, Move down, Remove / Undo
├─ Add rule                  opens the rule Dialog
├─ lockout Alert             when an SSH deny comes before an allow
└─ apply bar                 "N changes staged", Discard, Apply changes

APICopy Anchor Link

NetworkRules: every div prop except children, plus:

Helpers (pure, tested): isValidCidr, isValidPort, validateFirewallRule, validateHttpRule, diffRules(applied, staged, removedIds), rulesToApply, lockoutRisk, formatProtocolPort.

ExamplesCopy Anchor Link

Firewall only

import { NetworkRules } from "@fadymondy/nasaq/web";

export const FirewallOnly = () => (
  <NetworkRules
    firewall={[{ id: "1", action: "allow", protocol: "tcp", port: "443", source: "any" }]}
    onApplyFirewall={async () => {}}
  />
);

AccessibilityCopy Anchor Link

• Rows are a real table with sorted headers; the row actions are also reachable from a button in the row, not only right-click.
• State (added, changed, removed) is text as well as colour. The apply bar is a live region.
• Fields are labelled and invalid ones are described by their message.

RTL & i18nCopy Anchor Link

• English and Arabic strings follow the Nasaq locale. Ports, addresses and CIDR blocks stay left to right. Arrows and columns mirror.

Styling & tokensCopy Anchor Link

• Built on DataTable, Tabs, Dialog, Badge, Alert and --nq-* tokens. Target [data-slot="network-rules"].

Do / Don'tCopy Anchor Link

• Do put the SSH allow above any broad deny.
• Do apply as one list: partial applies can lock you out.
• Don't render a stored password back into the form.
• Don't apply without the staged count showing what will change.

RelatedCopy Anchor Link

• server-card
• proxy-hosts
• data-table

LabCopy Anchor Link

https://docs.nasaqui.com/?path=/docs/components-server-tools-network-rules--docs