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

import { h, PageHeader, Badge, ConfirmDelete, Tabs, Table, ServiceStatus, renderGuard, esc, enc, $val, apiFetch, toast, definePage, refactorLoad, ActionButton, ActionGroup, QuickModal } from '/static/hoover/index.js?v=6';

const addRange = QuickModal({
    title: 'Add DHCP Range',
    fields: [
        { label: 'Interface (optional)', id: 'r-iface', placeholder: 'Leave empty for global' },
        { label: 'Start IP', id: 'r-start', placeholder: '192.168.1.100' },
        { label: 'End IP', id: 'r-end', placeholder: '192.168.1.200' },
        { label: 'Lease Time', id: 'r-lease', placeholder: '12h' },
    ],
    submit: {
        url: '/api/dhcp/ranges',
        body: () => ({
            interface: ($val('r-iface') || '').trim() || undefined,
            start: ($val('r-start') || '').trim(),
            end: ($val('r-end') || '').trim(),
            lease_time: ($val('r-lease') || '').trim() || '12h',
        }),
        validate: (b) => !b.start || !b.end ? 'Start and end are required' : null,
        successMsg: 'Range added',
    },
    reload: (s) => load(s),
});

const addLease = QuickModal({
    title: 'Add Static Lease',
    fields: [
        { label: 'MAC', id: 'l-mac', placeholder: 'aa:bb:cc:dd:ee:ff' },
        { label: 'IP', id: 'l-ip', placeholder: '192.168.1.50' },
        { label: 'Hostname (optional)', id: 'l-host', placeholder: 'device-name' },
    ],
    submit: {
        url: '/api/dhcp/static-lease',
        body: () => ({
            mac: ($val('l-mac') || '').trim(),
            ip: ($val('l-ip') || '').trim(),
            hostname: ($val('l-host') || '').trim() || undefined,
        }),
        validate: (b) => !b.mac || !b.ip ? 'MAC and IP are required' : null,
        successMsg: 'Lease added',
    },
    reload: (s) => load(s),
});

const addDns = QuickModal({
    title: 'Add DNS Record',
    fields: [
        { label: 'Name', id: 'd-name', placeholder: 'host.local' },
        { label: 'Address', id: 'd-addr', placeholder: '192.168.1.10' },
    ],
    submit: {
        url: '/api/dhcp/dns-record',
        body: () => ({ name: ($val('d-name') || '').trim(), address: ($val('d-addr') || '').trim() }),
        validate: (b) => !b.name || !b.address ? 'Name and address are required' : null,
        successMsg: 'DNS record added',
    },
    reload: (s) => load(s),
});

async function load(state, abortController, entry) {
    await refactorLoad(state,
        s => Object.keys(s.config || {}).length,
        async (s, sig, isAborted) => {
            const [cfgR, stR, lsR] = await Promise.allSettled([
                apiFetch('/api/dhcp/config', { signal: sig }),
                apiFetch('/api/dhcp/status', { signal: sig }),
                apiFetch('/api/dhcp/leases', { signal: sig }),
            ]);
            if (isAborted()) return;
            const errors = [];
            if (cfgR.status === 'rejected') errors.push(cfgR.reason?.message || 'Failed');
            else if (!cfgR.value.ok) errors.push(cfgR.value.error || 'Failed');
            if (stR.status === 'rejected') errors.push(stR.reason?.message || 'Failed');
            else if (!stR.value.ok) errors.push(stR.value.error || 'Failed');
            if (lsR.status === 'rejected') errors.push(lsR.reason?.message || 'Failed');
            else if (!lsR.value.ok) errors.push(lsR.value.error || 'Failed');
            if (errors.length) {
                s.error = errors[0];
                return;
            }
            s.config = cfgR.value.data || {};
            s.status = stR.value.data || {};
            s.leases = lsR.value.data || [];
        },
        { entry, abortController },
    );
}

export default definePage({
    init() {
        return { config: {}, status: {}, leases: [], activeTab: 'ranges' };
    },
    subscribe: ['dnsmasq'],
    load,
    render(state) {
        const guard = renderGuard(state, 'DHCP & DNS', null, state.leases);
        if (guard) return guard;

        const cfg = state.config || {};
        const ranges = cfg.ranges || [];
        const staticLeases = cfg.static_leases || [];
        const dnsRecords = cfg.dns_records || [];
        const statusUp = state.status || {};

        const rangesRows = ranges.map((r, i) => h('tr', { key: (r.interface || '_g') + '-' + r.start + '-' + r.end },
            h('td', null, r.interface || '(global)'),
            h('td', null, esc(r.start)),
            h('td', null, esc(r.end)),
            h('td', null, esc(r.lease_time || '12h')),
            h('td', null,
                ConfirmDelete({
                    url: '/api/dhcp/ranges',
                    message: 'Remove range ' + r.start + ' - ' + r.end + '?',
                    body: { interface: r.interface || '', start: r.start, end: r.end },
                    success: 'Range removed',
                    reload: () => load(state),
                }),
            ),
        ));

        const leaseRows = staticLeases.map((l, i) => h('tr', { key: l.mac },
            h('td', null, esc(l.mac)),
            h('td', null, esc(l.ip)),
            h('td', null, l.hostname || '-'),
            h('td', null,
                ConfirmDelete({
                    url: '/api/dhcp/static-lease/' + enc(l.mac),
                    message: 'Remove lease ' + l.mac + '?',
                    success: 'Lease removed',
                    reload: () => load(state),
                }),
            ),
        ));

        const dnsRows = dnsRecords.map((rec, i) => h('tr', { key: rec.name },
            h('td', null, h('strong', null, esc(rec.name || 'unnamed'))),
            h('td', { class: 'text-sm' }, esc(rec.address || '-')),
            h('td', null,
                ConfirmDelete({
                    url: '/api/dhcp/dns-record/' + enc(rec.name || ''),
                    message: 'Remove DNS record ' + (rec.name || 'unnamed') + '?',
                    success: 'Record removed',
                    reload: () => load(state),
                }),
            ),
        ));

        const tabNames = ['ranges', 'leases', 'dns', 'active'];
        const actions = ActionGroup(
            h('button', { class: 'btn btn-primary', 'on:click': () => addRange(state) }, 'Add Range'),
            h('button', { class: 'btn btn-outline', 'on:click': () => addLease(state) }, 'Static Lease'),
            h('button', { class: 'btn btn-outline', 'on:click': () => addDns(state) }, 'DNS Record'),
            ActionButton({
                url: '/api/dhcp/apply',
                successMsg: 'dnsmasq applied',
                label: 'Apply',
                reload: () => load(state),
            }),
        );

        return [
            PageHeader({ title: 'DHCP & DNS', subtitle: 'Dnsmasq management', actions }),
            ServiceStatus({ state: statusUp.state || 'down', label: 'Dnsmasq' }),
            Tabs({ state, tabs: tabNames }),
            state.activeTab === 'ranges'
                ? Table({ columns: ['Interface', 'Start', 'End', 'Lease', 'Action'], rows: rangesRows, emptyText: 'No DHCP ranges' }) : null,
            state.activeTab === 'leases'
                ? Table({ columns: ['MAC', 'IP', 'Hostname', 'Action'], rows: leaseRows, emptyText: 'No static leases' }) : null,
            state.activeTab === 'dns'
                ? Table({ columns: ['Name', 'Address', 'Action'], rows: dnsRows, emptyText: 'No custom DNS records' }) : null,
            state.activeTab === 'active'
                ? Table({ columns: ['MAC', 'IP', 'Hostname', 'Expires'], rows: (state.leases || []).map((l, i) => h('tr', { key: l.mac || i },
                        h('td', null, esc(l.mac || '-')),
                        h('td', null, esc(l.ip || '-')),
                        h('td', null, esc(l.hostname || '-')),
                        h('td', null, esc(l.expires || '-')),
                    )), emptyText: 'No active leases' }) : null,
        ];
    },
});