firewall api and FE

frontend/src/api/apiClient.ts

@@ -1,5 +1,6 @@
 // src/apiClient.ts
 import axios from "axios";
+import { RulesetModel } from "../types/firewall";
 import {
   BridgeCreateRequest,
   BridgeInfo,
@@ -8,6 +9,7 @@ import {
   InterfaceInfo,
   RouteInfo,
 } from "../types/network";
+import { EnableRequest, ScriptInfo } from "../types/scripting";
 import {
   SnifferStatusResponse,
 } from "../types/sniffer";
@@ -36,30 +38,6 @@ api.interceptors.response.use(
   }
 );
 
-/**
- * Local lightweight types for a few endpoints where a dedicated project type
- * wasn't imported above. If you already have these in your codebase, replace
- * these with imports instead.
- */
-export type RawCmdRequest = {
-  cmd: string;
-};
-
-export type RulesetOut = {
-  ruleset: string;
-};
-
-export type ScriptInfo = {
-  name: string;
-  path: string;
-};
-
-export type EnableRequest = {
-  qnum: number;
-  service_name?: string | null;
-  extra_args?: string | null;
-  enable_at_boot?: boolean | null;
-};
 
 /* -------------------------
    Basic endpoints
@@ -150,33 +128,30 @@ export const fetchPackets = async (limit = 100): Promise<any> => {
    Firewall
    ------------------------- */
 
-export const listFirewallRules = async (): Promise<RulesetOut> => {
-  const res = await api.get<RulesetOut>("/firewall/rules");
+/**
+ * GET /firewall/rules
+ * Returns: { ruleset: RulesetModel | string | null }
+ * - If the server returns a raw textual fallback (string), the caller should handle it.
+ */
+export const fetchRuleset = async (): Promise<{ ruleset: RulesetModel | string | null }> => {
+  const res = await api.get<{ ruleset: RulesetModel | string | null }>("/firewall/rules");
   return res.data;
 };
 
-export const createFirewallRuleText = async (req: RawCmdRequest): Promise<any> => {
-  // Executes textual nft command, returns raw stdout (201 expected per spec)
-  const res = await api.post("/firewall/rules", req);
-  return res.data;
-};
-
-export const deleteFirewallRule = async (
+/**
+ * DELETE /firewall/rules/{handle}?family=...&table=...&chain=...
+ * On success the backend returns 204 No Content. This function resolves to void.
+ */
+export const deleteRule = async (
   handle: number,
-  options?: { family?: string; table?: string; chain?: string }
+  family: string,
+  table: string,
+  chain: string
 ): Promise<void> => {
-  // returns 204 on success (no content)
-  const params: Record<string, any> = {};
-  if (options?.family) params.family = options.family;
-  if (options?.table) params.table = options.table;
-  if (options?.chain) params.chain = options.chain;
-
-  await api.delete(`/firewall/rules/${handle}`, { params });
-};
-
-export const execFirewallRaw = async (req: RawCmdRequest): Promise<any> => {
-  // Execute arbitrary textual nft command and return {rc, stdout, stderr}
-  const res = await api.post("/firewall/raw", req);
+  const res = await api.delete(`/firewall/rules/${encodeURIComponent(String(handle))}`, {
+    params: { family, table, chain },
+  });
+  // axios resolves non-2xx as reject; server uses 204 No Content so nothing to return
   return res.data;
 };
 

frontend/src/pages/Firewall.tsx

@@ -0,0 +1,239 @@
+// src/components/RulesView.tsx
+import { DeleteOutlined, EyeOutlined, ReloadOutlined } from '@ant-design/icons';
+import { Button, Card, Collapse, Drawer, Empty, Popconfirm, Space, Spin, Table, Typography, message } from 'antd';
+import type { ColumnsType } from 'antd/es/table';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { deleteRule, fetchRuleset } from '../api/apiClient';
+import { ChainOut, RulesetModel, TableOut } from '../types/firewall';
+
+const { Panel } = Collapse;
+const { Paragraph, Text } = Typography;
+
+interface RuleRow {
+  key: string;
+  handle?: number | null;
+  text: string;
+  expr: any;
+  comment?: string | null;
+  position?: any;
+  // context for delete
+  family: string;
+  table: string;
+  chain: string;
+}
+
+/**
+ * Render rules inside an antd Table. The UI layout:
+ * - Collapse per table (title = family:name)
+ * - Inside each table -> collapse per chain (only chains that have rules)
+ * - Each chain shows a Table of rules with delete and inspect actions
+ */
+export const RulesView: React.FC<{ apiBase?: string }> = ({ apiBase = '' }) => {
+  const [loading, setLoading] = useState(false);
+  const [ruleset, setRuleset] = useState<RulesetModel | null>(null);
+  const [rawFallback, setRawFallback] = useState<string | null>(null);
+  const [exprDrawerVisible, setExprDrawerVisible] = useState(false);
+  const [exprForView, setExprForView] = useState<any>(null);
+  const [selectedRuleContext, setSelectedRuleContext] = useState<{
+    family: string;
+    table: string;
+    chain: string;
+    handle?: number | null;
+  } | null>(null);
+
+  const fetchRules = useCallback(async () => {
+    setLoading(true);
+    try {
+      const data = await fetchRuleset();
+      if (!data || data.ruleset === null) {
+        setRuleset({ tables: [] });
+        setRawFallback(null);
+      } else if (typeof data.ruleset === 'string') {
+        // fallback textual ruleset
+        setRawFallback(data.ruleset);
+        setRuleset({ tables: [] });
+      } else {
+        setRuleset(data.ruleset as RulesetModel);
+        setRawFallback(null);
+      }
+    } catch (err: any) {
+      message.error(`Failed to load ruleset: ${err?.message ?? err}`);
+      setRuleset({ tables: [] });
+      setRawFallback(null);
+    } finally {
+      setLoading(false);
+    }
+  }, [apiBase]);
+
+  useEffect(() => {
+    fetchRules();
+  }, [fetchRules]);
+
+  const onDelete = useCallback(
+    async (row: RuleRow) => {
+      if (!row.handle) {
+        message.error('Rule has no handle and cannot be deleted via API.');
+        return;
+      }
+      setLoading(true);
+      try {
+        await deleteRule(row.handle, row.family, row.table, row.chain);
+        message.success('Rule deleted');
+        await fetchRules();
+      } catch (err: any) {
+        message.error(`Delete failed: ${err?.message ?? err}`);
+      } finally {
+        setLoading(false);
+      }
+    },
+    [apiBase, fetchRules],
+  );
+
+  const openExprViewer = useCallback((expr: any) => {
+    setExprForView(expr);
+    setExprDrawerVisible(true);
+  }, []);
+
+  const closeExprViewer = useCallback(() => {
+    setExprForView(null);
+    setExprDrawerVisible(false);
+  }, []);
+
+  // columns for rule table
+  const columns: ColumnsType<RuleRow> = useMemo(
+    () => [
+      {
+        title: 'Handle',
+        dataIndex: 'handle',
+        key: 'handle',
+        width: 100,
+        render: (val) => val ?? '-',
+      },
+      {
+        title: 'Rule',
+        dataIndex: 'text',
+        key: 'text',
+        render: (txt: string, rec: RuleRow) => (
+          <Paragraph copyable={{ text: txt }} style={{ margin: 0 }}>
+            {txt}
+          </Paragraph>
+        ),
+      },
+      {
+        title: 'Comment',
+        dataIndex: 'comment',
+        key: 'comment',
+        width: 200,
+        render: (c) => (c ? <Text>{c}</Text> : null),
+      },
+      {
+        title: 'Actions',
+        key: 'actions',
+        width: 160,
+        align: 'right',
+        render: (_, rec) => (
+          <Space>
+            <Button type="default" icon={<EyeOutlined />} size="small" onClick={() => openExprViewer(rec.expr)}>
+              View
+            </Button>
+            <Popconfirm title="Delete this rule?" onConfirm={() => onDelete(rec)} okText="Delete" cancelText="Cancel">
+              <Button danger icon={<DeleteOutlined />} size="small">
+                Delete
+              </Button>
+            </Popconfirm>
+          </Space>
+        ),
+      },
+    ],
+    [onDelete, openExprViewer],
+  );
+
+  // flatten rules for each chain into a table datasource
+  const renderChainTable = (table: TableOut, chain: ChainOut) => {
+    const data: RuleRow[] = chain.rules.map((r, idx) => ({
+      key: `${table.family}:${table.name}:${chain.name}:${String(r.handle ?? idx)}`,
+      handle: r.handle ?? null,
+      text: r.text,
+      expr: r.expr,
+      comment: r.comment ?? null,
+      position: r.position,
+      family: table.family,
+      table: table.name,
+      chain: chain.name,
+    }));
+
+    return (
+      <Table columns={columns} dataSource={data} pagination={{ pageSize: 8 }} size="small" rowKey={(rec) => rec.key} />
+    );
+  };
+
+  // UI when JSON is not available
+  if (!loading && rawFallback) {
+    return (
+      <Card>
+        <Space direction="vertical" style={{ width: '100%' }}>
+          <Text strong>Ruleset (raw)</Text>
+          <Paragraph style={{ whiteSpace: 'pre-wrap', fontFamily: 'monospace' }}>{rawFallback}</Paragraph>
+          <Button icon={<ReloadOutlined />} onClick={() => fetchRules()}>
+            Refresh
+          </Button>
+        </Space>
+      </Card>
+    );
+  }
+
+  return (
+    <Card
+      title="Firewall rules"
+      extra={
+        <Space>
+          <Button icon={<ReloadOutlined />} onClick={() => fetchRules()} loading={loading}>
+            Refresh
+          </Button>
+        </Space>
+      }
+    >
+      {loading ? (
+        <div style={{ textAlign: 'center', padding: 40 }}>
+          <Spin size="large" />
+        </div>
+      ) : ruleset && ruleset.tables.length > 0 ? (
+        <Collapse accordion>
+          {ruleset.tables.map((t) => {
+            // only show chains that have rules
+            const chainsWithRules = t.chains.filter((c) => c.rules && c.rules.length > 0);
+            if (chainsWithRules.length === 0) return null;
+            return (
+              <Panel header={`${t.family}:${t.name}`} key={`${t.family}:${t.name}`}>
+                <Collapse>
+                  {chainsWithRules.map((c) => (
+                    <Panel header={`${c.name} — ${c.rules.length} rule(s)`} key={`${t.family}:${t.name}:${c.name}`}>
+                      {renderChainTable(t, c)}
+                    </Panel>
+                  ))}
+                </Collapse>
+              </Panel>
+            );
+          })}
+        </Collapse>
+      ) : (
+        <Empty description="No rules found" />
+      )}
+
+      <Drawer
+        title="Rule expression (JSON)"
+        placement="right"
+        width={640}
+        onClose={closeExprViewer}
+        open={exprDrawerVisible}
+      >
+        <Paragraph>
+          <Text strong>Expression (raw JSON)</Text>
+        </Paragraph>
+        <pre style={{ whiteSpace: 'pre-wrap' }}>{JSON.stringify(exprForView, null, 2)}</pre>
+      </Drawer>
+    </Card>
+  );
+};
+
+export default RulesView;

frontend/src/types/firewall.ts

@@ -0,0 +1,24 @@
+export type Expr = any; // raw nft expr JSON (opaque to frontend)
+
+export interface RuleOut {
+  handle?: number | null;
+  expr: Expr;
+  text: string;
+  position?: any;
+  comment?: string | null;
+}
+
+export interface ChainOut {
+  name: string;
+  rules: RuleOut[];
+}
+
+export interface TableOut {
+  family: string;
+  name: string;
+  chains: ChainOut[];
+}
+
+export interface RulesetModel {
+  tables: TableOut[];
+}

frontend/src/types/scripting.ts

@@ -0,0 +1,11 @@
+export type ScriptInfo = {
+  name: string;
+  path: string;
+};
+
+export type EnableRequest = {
+  qnum: number;
+  service_name?: string | null;
+  extra_args?: string | null;
+  enable_at_boot?: boolean | null;
+};