vacuum-wall/webui/static/pages/rules.js

import { html, PageHeader, Empty, Card, ConfirmDelete, Table, renderGuard, esc, enc, $val, apiFetch, toast, definePage, getModel, modelFetch, MonoText, QuickModal } from '/static/hoover/index.js';

const addRule = QuickModal({
    title: 'Add Rich Rule',
    fields: (d) => [
        { label: 'Zone', id: 'rule-zone', tag: 'select', options: d.zones },
        { label: 'Rule (XML)', id: 'rule-text', tag: 'textarea', placeholder: 'rule family="ipv4" source address="192.168.1.0/24" accept' },
    ],
    submit: {
        url: '/api/firewall/rich-rules',
        body: () => ({ zone: $val('rule-zone'), rule: ($val('rule-text') || '').trim() }),
        validate: (b) => !b.zone || !b.rule ? 'Zone and rule are required' : null,
        successMsg: 'Rule added',
    },
    refresh: 'firewall',
});

export default definePage({
    init() {
        return {
            firewall: getModel('firewall'),
        };
    },
    render(state) {
        const guard = renderGuard(state.firewall, 'Rules', 'Firewall rich rules', state.firewall.data?.config);
        if (guard) return guard;

        const cfg = state.firewall.data?.config || {};
        const zones = state.firewall.data?.zones?.available || [];
        const zoneData = cfg.zones || {};
        const zoneRules = {};
        Object.entries(zoneData).forEach(([zname, zcfg]) => {
            const rr = zcfg.rich_rules || [];
            if (rr.length) zoneRules[zname] = rr;
        });

        const cards = Object.entries(zoneRules).map(([zone, rules]) => {
            const ruleRows = (Array.isArray(rules) ? rules : []).map((entry, i) => {
                const ruleId = typeof entry === 'object' ? entry.id : null;
                const ruleText = typeof entry === 'object' ? (entry.rule || '') : String(entry);
                return html`<tr key=${i}>
                    <td class="text-muted">${i + 1}</td>
                    <td class="mono-text td-fullwidth"><${MonoText} text=${ruleText} /></td>
                    <td>
                        <${ConfirmDelete}
                            url=${'/api/firewall/rich-rules/' + enc(zone) + '/' + enc(ruleId || '')}
                            deleteKey=${zone + '-' + (ruleId || i)}
                            message=${'Remove rule: ' + ruleText.substring(0, 40) + '...?'}
                            success="Rule removed"
                            refresh="firewall" />
                    </td>
                </tr>`;
            });
            return Card({
                header: 'Zone: ' + esc(zone),
                key: zone,
                children: [Table({
                    columns: ['#', 'Rule', 'Action'],
                    rows: ruleRows,
                    emptyText: 'No rules',
                    wrapCard: false,
                })],
            });
        });

        return [
            PageHeader({
                title: 'Rules',
                subtitle: 'Firewall rich rules',
                actions: html`<button class="btn btn-primary"
                    onClick=${() => addRule({ zones })}>Add Rule</button>`,
            }),
            ...(cards.length ? cards : [Empty({ text: 'No rich rules configured.' })]),
        ];
    },
});