refactor: modernize frontend with hoover framework components and docs
- Add quick modal, table, service status, and confirmation dialog components - Refactor all pages (certs, dhcp, proxy, etc.) to use new component patterns - Introduce refactor load utility and render guard for consistent UX - Add hoover documentation and update AGENTS.md, architecture, overview
This commit is contained in:
+45
-97
@@ -1,4 +1,4 @@
|
||||
import { h, PageHeader, Badge, StatusDot, Empty, Card, esc, enc, att_esc, $val, apiFetch, toast, dismissToast, openModal, closeModal, formModal, definePage, hComp, connect, reactive, requestUpdate, Link, createRouter, ToastContainer, render, parseZones } from '/static/hoover/index.js';
|
||||
import { h, PageHeader, Badge, Empty, Table, renderGuard, esc, enc, $val, apiFetch, toast, openModal, closeModal, formModal, definePage, refactorLoad, ActionCell, certStatusBadge, poll } from '/static/hoover/index.js?v=6';
|
||||
|
||||
function issueCertModal(state) {
|
||||
openModal((inner, idx) => {
|
||||
@@ -13,14 +13,10 @@ function issueCertModal(state) {
|
||||
label: 'Issue', cls: 'btn-primary', action: 's', handler: async () => {
|
||||
const domain = ($val('ic-domain') || '').trim();
|
||||
if (!domain) { toast('Domain is required', 'error'); return; }
|
||||
const body = {
|
||||
domain,
|
||||
email: ($val('ic-email') || '').trim() || undefined,
|
||||
};
|
||||
const body = { domain, email: ($val('ic-email') || '').trim() || undefined };
|
||||
const resp = await apiFetch('/api/certs/issue/start', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(body),
|
||||
body,
|
||||
});
|
||||
if (resp.ok) {
|
||||
toast('Issuance started for ' + domain, 'success');
|
||||
@@ -38,103 +34,63 @@ function issueCertModal(state) {
|
||||
}
|
||||
|
||||
async function pollCertIssue(rid, state) {
|
||||
let done = false;
|
||||
const timer = setInterval(async () => {
|
||||
if (done) return clearInterval(timer);
|
||||
const r = await apiFetch('/api/certs/issue/' + enc(rid));
|
||||
if (r.ok && r.data) {
|
||||
if (r.data.status === 'completed') {
|
||||
done = true;
|
||||
clearInterval(timer);
|
||||
toast('Certificate issued for ' + (r.data.domain || rid), 'success');
|
||||
await load(state);
|
||||
} else if (r.data.status === 'failed') {
|
||||
done = true;
|
||||
clearInterval(timer);
|
||||
toast('Issuance failed: ' + (r.data.error || 'unknown'), 'error');
|
||||
}
|
||||
}
|
||||
}, 2000);
|
||||
poll({
|
||||
url: '/api/certs/issue/' + enc(rid),
|
||||
successKey: (d) => d.status === 'completed',
|
||||
onErrorKey: (d) => d.status === 'failed',
|
||||
onComplete: (d) => {
|
||||
toast('Certificate issued for ' + (d.domain || rid), 'success');
|
||||
load(state);
|
||||
},
|
||||
onError: (d) => {
|
||||
toast('Issuance failed: ' + (d?.error || 'unknown'), 'error');
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
async function load(state, abortController, entry) {
|
||||
if (state.certs?.length) state.refreshing = true;
|
||||
else state.loading = true;
|
||||
try {
|
||||
const myId = entry ? entry.requestId : 0;
|
||||
const sig = abortController?.signal;
|
||||
const r = await apiFetch('/api/certs/list', { signal: sig });
|
||||
if (abortController?.signal.aborted || (entry && entry.requestId !== myId)) return;
|
||||
if (r.ok) state.certs = r.data || [];
|
||||
else state.error = r.error;
|
||||
} catch (e) {
|
||||
if (abortController?.signal.aborted) return;
|
||||
state.error = String(e);
|
||||
}
|
||||
state.loading = false;
|
||||
state.refreshing = false;
|
||||
await refactorLoad(state,
|
||||
s => s.certs?.length,
|
||||
async (s, sig, isAborted) => {
|
||||
const r = await apiFetch('/api/certs/list', { signal: sig });
|
||||
if (isAborted()) return;
|
||||
if (r.ok) s.certs = r.data || [];
|
||||
else s.error = r.error;
|
||||
},
|
||||
{ entry, abortController },
|
||||
);
|
||||
}
|
||||
|
||||
export default definePage({
|
||||
init() {
|
||||
return { certs: [], loading: true, refreshing: false, error: null };
|
||||
return { certs: [] };
|
||||
},
|
||||
subscribe: ['acme'],
|
||||
load,
|
||||
render(state) {
|
||||
if (state.loading && !state.refreshing) {
|
||||
return [
|
||||
PageHeader({ title: 'Certificates' }),
|
||||
h('div', { class: 'card', key: 'loading' },
|
||||
h('div', { class: 'card-body loading' }, state.refreshing ? 'Refreshing...' : 'Loading...'),
|
||||
),
|
||||
];
|
||||
}
|
||||
|
||||
if (state.error) {
|
||||
return [
|
||||
PageHeader({ title: 'Certificates' }),
|
||||
h('div', { class: 'card', key: 'error' },
|
||||
h('div', { class: 'card-body error-msg' }, state.error),
|
||||
),
|
||||
];
|
||||
}
|
||||
const guard = renderGuard(state, 'Certificates', 'ACME certificate management', state.certs);
|
||||
if (guard) return guard;
|
||||
|
||||
const rows = state.certs.map(c => {
|
||||
const days = c.days_remaining;
|
||||
let badge;
|
||||
if (c.expired || (days !== undefined && days <= 0)) {
|
||||
badge = Badge({ text: 'Expired', variant: 'danger' });
|
||||
} else if (days !== undefined && days <= 30) {
|
||||
badge = Badge({ text: days + 'd left', variant: 'warning' });
|
||||
} else {
|
||||
badge = Badge({ text: days !== undefined ? days + 'd left' : 'N/A', variant: 'success' });
|
||||
}
|
||||
const badge = certStatusBadge({ expired: c.expired, daysRemaining: c.days_remaining });
|
||||
|
||||
return h('tr', { key: c.domain },
|
||||
h('td', null, h('strong', null, esc(c.domain || 'unknown'))),
|
||||
h('td', { class: 'text-sm' }, esc(c.issuer || '-')),
|
||||
h('td', null, esc(c.expiry || 'N/A')),
|
||||
h('td', null, badge),
|
||||
h('td', null,
|
||||
h('button', { class: 'btn btn-sm btn-outline', style: 'margin-right:4px;',
|
||||
'on:click': async () => {
|
||||
const resp = await apiFetch('/api/certs/' + enc(c.domain) + '/renew', { method: 'POST' });
|
||||
if (resp.ok) toast('Renewal started for ' + c.domain, 'success');
|
||||
else toast(resp.error || 'Failed', 'error');
|
||||
}}, 'Renew'),
|
||||
h('button', { class: 'btn btn-sm btn-danger',
|
||||
'on:click': async () => {
|
||||
if (!confirm('Remove certificate for ' + c.domain + '?')) return;
|
||||
const resp = await apiFetch('/api/certs/' + enc(c.domain), { method: 'DELETE' });
|
||||
if (resp.ok) {
|
||||
toast('Certificate removed', 'success');
|
||||
await load(state);
|
||||
} else {
|
||||
toast(resp.error || 'Failed', 'error');
|
||||
}
|
||||
}}, 'Remove'),
|
||||
),
|
||||
ActionCell({
|
||||
editLabel: 'Renew',
|
||||
editClick: async () => {
|
||||
const resp = await apiFetch('/api/certs/' + enc(c.domain) + '/renew', { method: 'POST' });
|
||||
if (resp.ok) toast('Renewal started for ' + c.domain, 'success');
|
||||
else toast(resp.error || 'Failed', 'error');
|
||||
},
|
||||
removeUrl: '/api/certs/' + enc(c.domain),
|
||||
removeMessage: 'Remove certificate for ' + c.domain + '?',
|
||||
removeSuccess: 'Certificate removed',
|
||||
removeReload: () => load(state),
|
||||
}),
|
||||
);
|
||||
});
|
||||
|
||||
@@ -146,18 +102,10 @@ export default definePage({
|
||||
'on:click': () => issueCertModal(state) }, 'Issue Certificate'),
|
||||
}),
|
||||
rows.length
|
||||
? h('div', { class: 'card' }, h('table', { class: 'table' },
|
||||
h('thead', null,
|
||||
h('tr', null,
|
||||
h('th', null, 'Domain'),
|
||||
h('th', null, 'Issuer'),
|
||||
h('th', null, 'Expiry'),
|
||||
h('th', null, 'Status'),
|
||||
h('th', { style: 'width:120px;' }, 'Actions'),
|
||||
),
|
||||
),
|
||||
h('tbody', null, ...rows),
|
||||
))
|
||||
? Table({
|
||||
columns: ['Domain', 'Issuer', 'Expiry', 'Status', 'Actions'],
|
||||
rows,
|
||||
})
|
||||
: Empty({ text: 'No certificates found. Issue a certificate to get started.' }),
|
||||
];
|
||||
},
|
||||
|
||||
@@ -1,55 +1,27 @@
|
||||
import { h, PageHeader, Badge, StatusDot, Empty, Card, esc, enc, att_esc, $val, apiFetch, toast, dismissToast, openModal, closeModal, formModal, definePage, hComp, connect, reactive, requestUpdate, Link, createRouter, ToastContainer, render, parseZones } from '/static/hoover/index.js';
|
||||
import { h, PageHeader, apiFetch, definePage, renderGuard, refactorLoad, ServiceStatus, StatCard } from '/static/hoover/index.js?v=6';
|
||||
|
||||
export default definePage({
|
||||
init() {
|
||||
return { data: null, loading: true, refreshing: false, error: null };
|
||||
return { data: null };
|
||||
},
|
||||
subscribe: ['*'],
|
||||
subscribe: ['firewall', 'dnsmasq', 'wireguard', 'acme', 'networkd'],
|
||||
async load(state, abortController, entry) {
|
||||
const myId = entry ? entry.requestId : 0;
|
||||
if (state.data) state.refreshing = true;
|
||||
else state.loading = true;
|
||||
try {
|
||||
const res = await apiFetch('/api/status/all', { signal: abortController?.signal });
|
||||
if (abortController?.signal.aborted || entry.requestId !== myId) return;
|
||||
if (res.ok) state.data = res.data;
|
||||
else state.error = res.error;
|
||||
} catch (e) {
|
||||
if (abortController?.signal.aborted) return;
|
||||
state.error = String(e);
|
||||
}
|
||||
state.loading = false;
|
||||
state.refreshing = false;
|
||||
await refactorLoad(state,
|
||||
s => s.data,
|
||||
async (s, sig, isAborted) => {
|
||||
const res = await apiFetch('/api/status/all', { signal: sig });
|
||||
if (isAborted()) return;
|
||||
if (res.ok) s.data = res.data;
|
||||
else s.error = res.error;
|
||||
},
|
||||
{ entry, abortController },
|
||||
);
|
||||
},
|
||||
render(state) {
|
||||
if (state.loading && !state.refreshing) {
|
||||
return [
|
||||
PageHeader({ title: 'Dashboard', subtitle: 'System overview' }),
|
||||
h('div', { class: 'card', key: 'loading' },
|
||||
h('div', { class: 'card-body loading' }, state.refreshing ? 'Refreshing...' : 'Loading...'),
|
||||
),
|
||||
];
|
||||
}
|
||||
|
||||
if (state.error) {
|
||||
return [
|
||||
PageHeader({ title: 'Dashboard', subtitle: 'System overview' }),
|
||||
h('div', { class: 'card', key: 'error' },
|
||||
h('div', { class: 'card-body error-msg' }, state.error),
|
||||
),
|
||||
];
|
||||
}
|
||||
const guard = renderGuard(state, 'Dashboard', 'System overview', state.data);
|
||||
if (guard) return guard;
|
||||
|
||||
const d = state.data;
|
||||
if (!d) {
|
||||
return [
|
||||
PageHeader({ title: 'Dashboard', subtitle: 'System overview' }),
|
||||
h('div', { class: 'card', key: 'no-data' },
|
||||
h('div', { class: 'card-body loading' }, 'No data available'),
|
||||
),
|
||||
];
|
||||
}
|
||||
|
||||
const fwZones = (d.firewall?.zones) || {};
|
||||
const net = d.net || {};
|
||||
const nCount = Object.keys(net).length;
|
||||
@@ -58,49 +30,39 @@ export default definePage({
|
||||
const certs = d.certs || [];
|
||||
const certW = certs.filter(c => c.expired || c.days_remaining <= 30);
|
||||
const dmsk = d.dnsmasq?.status || {};
|
||||
const dmskUp = dmsk.state === 'up';
|
||||
const wUp = (d.wg?.state || 'down') === 'up';
|
||||
const wP = (d.wg || {}).peers || [];
|
||||
|
||||
return [
|
||||
PageHeader({ title: 'Dashboard', subtitle: 'System overview' }),
|
||||
h('div', { class: 'grid grid-4' },
|
||||
h('div', { class: 'stat-card' },
|
||||
h('div', { class: 'label' }, 'Active Zones'),
|
||||
h('div', { class: 'value' }, Object.keys(fwZones).length),
|
||||
h('div', { class: 'meta' }, Object.keys(fwZones).join(', ') || 'None'),
|
||||
),
|
||||
h('div', { class: 'stat-card' },
|
||||
h('div', { class: 'label' }, 'Interfaces Up'),
|
||||
h('div', { class: 'value' }, upC + '/' + nCount),
|
||||
h('div', { class: 'meta' }, upI.map(i => i.name).join(', ') || 'None up'),
|
||||
),
|
||||
h('div', { class: 'stat-card' },
|
||||
h('div', { class: 'label' }, 'WireGuard'),
|
||||
h('div', { class: 'value' }, String(d.wg?.state || 'unknown')),
|
||||
h('div', { class: 'meta' }, wP.length + ' peers'),
|
||||
),
|
||||
h('div', { class: 'stat-card' },
|
||||
h('div', { class: 'label' }, 'Certificates'),
|
||||
h('div', { class: 'value' }, certs.length),
|
||||
h('div', { class: 'meta' }, certW.length + ' expiring/expired'),
|
||||
),
|
||||
StatCard({
|
||||
label: 'Active Zones',
|
||||
value: Object.keys(fwZones).length,
|
||||
meta: Object.keys(fwZones).join(', ') || 'None',
|
||||
}),
|
||||
StatCard({
|
||||
label: 'Interfaces Up',
|
||||
value: upC + '/' + nCount,
|
||||
meta: upI.map(i => i.name).join(', ') || 'None up',
|
||||
}),
|
||||
StatCard({
|
||||
label: 'WireGuard',
|
||||
value: String(d.wg?.state || 'unknown'),
|
||||
meta: wP.length + ' peers',
|
||||
}),
|
||||
StatCard({
|
||||
label: 'Certificates',
|
||||
value: certs.length,
|
||||
meta: certW.length + ' expiring/expired',
|
||||
}),
|
||||
),
|
||||
h('div', { class: 'grid grid-2' },
|
||||
h('div', { class: 'card' },
|
||||
h('div', { class: 'card-header' }, 'Services'),
|
||||
h('div', { class: 'card-body' },
|
||||
h('ul', { class: 'service-list' },
|
||||
h('li', null,
|
||||
StatusDot({ status: dmskUp ? 'success' : 'danger' }),
|
||||
' Dnsmasq ',
|
||||
Badge({ text: dmsk.state || 'down', variant: dmskUp ? 'success' : 'danger' }),
|
||||
),
|
||||
h('li', null,
|
||||
StatusDot({ status: wUp ? 'success' : 'danger' }),
|
||||
' WireGuard ',
|
||||
Badge({ text: String(d.wg?.state || 'down'), variant: wUp ? 'success' : 'danger' }),
|
||||
),
|
||||
h('li', null, ServiceStatus({ state: dmsk.state || 'down', label: 'Dnsmasq' })),
|
||||
h('li', null, ServiceStatus({ state: d.wg?.state || 'down', label: 'WireGuard' })),
|
||||
),
|
||||
),
|
||||
),
|
||||
|
||||
+127
-282
@@ -1,335 +1,180 @@
|
||||
import { h, PageHeader, Badge, StatusDot, Empty, Card, esc, enc, att_esc, $val, apiFetch, toast, dismissToast, openModal, closeModal, formModal, definePage, hComp, connect, reactive, requestUpdate, Link, createRouter, ToastContainer, render, parseZones } from '/static/hoover/index.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';
|
||||
|
||||
function addRangeModal(state) {
|
||||
openModal((inner, idx) => {
|
||||
formModal(inner, 'Add DHCP Range',
|
||||
[
|
||||
{ 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' },
|
||||
],
|
||||
[
|
||||
{ label: 'Cancel', cls: 'btn-outline', action: 'c', handler: () => closeModal(idx) },
|
||||
{
|
||||
label: 'Add', cls: 'btn-primary', action: 's', handler: async () => {
|
||||
const body = {
|
||||
interface: ($val('r-iface') || '').trim() || undefined,
|
||||
start: ($val('r-start') || '').trim(),
|
||||
end: ($val('r-end') || '').trim(),
|
||||
lease_time: ($val('r-lease') || '').trim() || '12h',
|
||||
};
|
||||
if (!body.start || !body.end) {
|
||||
toast('Start and end are required', 'error');
|
||||
return;
|
||||
}
|
||||
const resp = await apiFetch('/api/dhcp/ranges', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(body),
|
||||
});
|
||||
if (resp.ok) {
|
||||
toast('Range added', 'success');
|
||||
closeModal(idx);
|
||||
await load(state);
|
||||
} else {
|
||||
toast(resp.error || 'Failed', 'error');
|
||||
}
|
||||
},
|
||||
},
|
||||
],
|
||||
);
|
||||
});
|
||||
}
|
||||
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),
|
||||
});
|
||||
|
||||
function addLeaseModal(state) {
|
||||
openModal((inner, idx) => {
|
||||
formModal(inner, 'Add Static Lease',
|
||||
[
|
||||
{ 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' },
|
||||
],
|
||||
[
|
||||
{ label: 'Cancel', cls: 'btn-outline', action: 'c', handler: () => closeModal(idx) },
|
||||
{
|
||||
label: 'Add', cls: 'btn-primary', action: 's', handler: async () => {
|
||||
const body = {
|
||||
mac: ($val('l-mac') || '').trim(),
|
||||
ip: ($val('l-ip') || '').trim(),
|
||||
hostname: ($val('l-host') || '').trim() || undefined,
|
||||
};
|
||||
if (!body.mac || !body.ip) {
|
||||
toast('MAC and IP are required', 'error');
|
||||
return;
|
||||
}
|
||||
const resp = await apiFetch('/api/dhcp/static-lease', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(body),
|
||||
});
|
||||
if (resp.ok) {
|
||||
toast('Lease added', 'success');
|
||||
closeModal(idx);
|
||||
await load(state);
|
||||
} else {
|
||||
toast(resp.error || 'Failed', 'error');
|
||||
}
|
||||
},
|
||||
},
|
||||
],
|
||||
);
|
||||
});
|
||||
}
|
||||
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),
|
||||
});
|
||||
|
||||
function addDnsModal(state) {
|
||||
openModal((inner, idx) => {
|
||||
formModal(inner, 'Add DNS Record',
|
||||
[
|
||||
{ label: 'Name', id: 'd-name', placeholder: 'host.local' },
|
||||
{ label: 'Address', id: 'd-addr', placeholder: '192.168.1.10' },
|
||||
],
|
||||
[
|
||||
{ label: 'Cancel', cls: 'btn-outline', action: 'c', handler: () => closeModal(idx) },
|
||||
{
|
||||
label: 'Add', cls: 'btn-primary', action: 's', handler: async () => {
|
||||
const body = {
|
||||
name: ($val('d-name') || '').trim(),
|
||||
address: ($val('d-addr') || '').trim(),
|
||||
};
|
||||
if (!body.name || !body.address) {
|
||||
toast('Name and address are required', 'error');
|
||||
return;
|
||||
}
|
||||
const resp = await apiFetch('/api/dhcp/dns-record', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(body),
|
||||
});
|
||||
if (resp.ok) {
|
||||
toast('DNS record added', 'success');
|
||||
closeModal(idx);
|
||||
await load(state);
|
||||
} else {
|
||||
toast(resp.error || 'Failed', 'error');
|
||||
}
|
||||
},
|
||||
},
|
||||
],
|
||||
);
|
||||
});
|
||||
}
|
||||
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) {
|
||||
if (Object.keys(state.config || {}).length) state.refreshing = true;
|
||||
else state.loading = true;
|
||||
try {
|
||||
const myId = entry ? entry.requestId : 0;
|
||||
const sig = abortController?.signal;
|
||||
const cfgR = await apiFetch('/api/dhcp/config', { signal: sig });
|
||||
if (abortController?.signal.aborted || (entry && entry.requestId !== myId)) return;
|
||||
if (cfgR.ok) state.config = cfgR.data || {};
|
||||
const stR = await apiFetch('/api/dhcp/status', { signal: sig });
|
||||
if (abortController?.signal.aborted || (entry && entry.requestId !== myId)) return;
|
||||
if (stR.ok) state.status = stR.data || {};
|
||||
const lsR = await apiFetch('/api/dhcp/leases', { signal: sig });
|
||||
if (abortController?.signal.aborted || (entry && entry.requestId !== myId)) return;
|
||||
if (lsR.ok) state.leases = lsR.data || [];
|
||||
} catch (e) {
|
||||
if (abortController?.signal.aborted) return;
|
||||
state.error = String(e);
|
||||
}
|
||||
state.loading = false;
|
||||
state.refreshing = false;
|
||||
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: [], loading: true, refreshing: false, error: null, activeTab: 'ranges' };
|
||||
return { config: {}, status: {}, leases: [], activeTab: 'ranges' };
|
||||
},
|
||||
subscribe: ['dnsmasq'],
|
||||
load,
|
||||
render(state) {
|
||||
if (state.loading && !state.refreshing) {
|
||||
return [
|
||||
PageHeader({ title: 'DHCP & DNS' }),
|
||||
h('div', { class: 'card', key: 'loading' },
|
||||
h('div', { class: 'card-body loading' }, state.refreshing ? 'Refreshing...' : 'Loading...'),
|
||||
),
|
||||
];
|
||||
}
|
||||
|
||||
if (state.error) {
|
||||
return [
|
||||
PageHeader({ title: 'DHCP & DNS' }),
|
||||
h('div', { class: 'card', key: 'error' },
|
||||
h('div', { class: 'card-body error-msg' }, state.error),
|
||||
),
|
||||
];
|
||||
}
|
||||
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 isUp = statusUp.state === 'up';
|
||||
|
||||
const rangesRows = ranges.map((r, i) => h('tr', { key: i },
|
||||
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,
|
||||
h('button', { class: 'btn btn-sm btn-danger',
|
||||
'on:click': async () => {
|
||||
if (!confirm('Remove range ' + r.start + ' - ' + r.end + '?')) return;
|
||||
const resp = await apiFetch('/api/dhcp/ranges', {
|
||||
method: 'DELETE',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ interface: r.interface || '', start: r.start, end: r.end }),
|
||||
});
|
||||
if (resp.ok) {
|
||||
toast('Range removed', 'success');
|
||||
await load(state);
|
||||
} else {
|
||||
toast(resp.error || 'Failed', 'error');
|
||||
}
|
||||
}}, 'Remove'),
|
||||
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: i },
|
||||
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,
|
||||
h('button', { class: 'btn btn-sm btn-danger',
|
||||
'on:click': async () => {
|
||||
if (!confirm('Remove lease ' + l.mac + '?')) return;
|
||||
const resp = await apiFetch('/api/dhcp/static-lease/' + enc(l.mac), { method: 'DELETE' });
|
||||
if (resp.ok) {
|
||||
toast('Lease removed', 'success');
|
||||
await load(state);
|
||||
} else {
|
||||
toast(resp.error || 'Failed', 'error');
|
||||
}
|
||||
}}, 'Remove'),
|
||||
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: i },
|
||||
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,
|
||||
h('button', { class: 'btn btn-sm btn-danger',
|
||||
'on:click': async () => {
|
||||
if (!confirm('Remove DNS record ' + (rec.name || 'unnamed') + '?')) return;
|
||||
const resp = await apiFetch('/api/dhcp/dns-record/' + enc(rec.name || ''), { method: 'DELETE' });
|
||||
if (resp.ok) {
|
||||
toast('Record removed', 'success');
|
||||
await load(state);
|
||||
} else {
|
||||
toast(resp.error || 'Failed', 'error');
|
||||
}
|
||||
}}, 'Remove'),
|
||||
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 = h('div', { style: 'display:flex;gap:8px;' },
|
||||
h('button', { class: 'btn btn-primary', 'on:click': () => addRangeModal(state) }, 'Add Range'),
|
||||
h('button', { class: 'btn btn-outline', 'on:click': () => addLeaseModal(state) }, 'Static Lease'),
|
||||
h('button', { class: 'btn btn-outline', 'on:click': () => addDnsModal(state) }, 'DNS Record'),
|
||||
h('button', { class: 'btn btn-outline',
|
||||
'on:click': async () => {
|
||||
const resp = await apiFetch('/api/dhcp/apply', { method: 'POST' });
|
||||
if (resp.ok) toast('dnsmasq applied', 'success');
|
||||
else toast(resp.error || 'Failed', 'error');
|
||||
}}, 'Apply'),
|
||||
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 }),
|
||||
h('div', null,
|
||||
StatusDot({ status: isUp ? 'success' : 'danger' }),
|
||||
' Dnsmasq ',
|
||||
Badge({ text: statusUp.state || 'unknown', variant: isUp ? 'success' : 'danger' }),
|
||||
),
|
||||
h('div', { class: 'tabs' },
|
||||
tabNames.map(t => h('span', {
|
||||
class: 'tab ' + (state.activeTab === t ? 'active' : ''),
|
||||
'on:click': () => { state.activeTab = t; },
|
||||
style: 'cursor:pointer;',
|
||||
}, t.charAt(0).toUpperCase() + t.slice(1))),
|
||||
),
|
||||
ServiceStatus({ state: statusUp.state || 'down', label: 'Dnsmasq' }),
|
||||
Tabs({ state, tabs: tabNames }),
|
||||
state.activeTab === 'ranges'
|
||||
? h('div', { class: 'card' }, h('table', { class: 'table' },
|
||||
h('thead', null,
|
||||
h('tr', null,
|
||||
h('th', null, 'Interface'),
|
||||
h('th', null, 'Start'),
|
||||
h('th', null, 'End'),
|
||||
h('th', null, 'Lease'),
|
||||
h('th', { style: 'width:80px;' }, 'Action'),
|
||||
),
|
||||
),
|
||||
h('tbody', null,
|
||||
...(rangesRows.length ? rangesRows : [
|
||||
h('tr', null, h('td', { colspan: 5, class: 'text-muted text-sm' }, 'No DHCP ranges')),
|
||||
]),
|
||||
),
|
||||
)) : null,
|
||||
? Table({ columns: ['Interface', 'Start', 'End', 'Lease', 'Action'], rows: rangesRows, emptyText: 'No DHCP ranges' }) : null,
|
||||
state.activeTab === 'leases'
|
||||
? h('div', { class: 'card' }, h('table', { class: 'table' },
|
||||
h('thead', null,
|
||||
h('tr', null,
|
||||
h('th', null, 'MAC'),
|
||||
h('th', null, 'IP'),
|
||||
h('th', null, 'Hostname'),
|
||||
h('th', { style: 'width:80px;' }, 'Action'),
|
||||
),
|
||||
),
|
||||
h('tbody', null,
|
||||
...(leaseRows.length ? leaseRows : [
|
||||
h('tr', null, h('td', { colspan: 4, class: 'text-muted text-sm' }, 'No static leases')),
|
||||
]),
|
||||
),
|
||||
)) : null,
|
||||
? Table({ columns: ['MAC', 'IP', 'Hostname', 'Action'], rows: leaseRows, emptyText: 'No static leases' }) : null,
|
||||
state.activeTab === 'dns'
|
||||
? h('div', { class: 'card' }, h('table', { class: 'table' },
|
||||
h('thead', null,
|
||||
h('tr', null,
|
||||
h('th', null, 'Name'),
|
||||
h('th', null, 'Address'),
|
||||
h('th', { style: 'width:80px;' }, 'Action'),
|
||||
),
|
||||
),
|
||||
h('tbody', null,
|
||||
...(dnsRows.length ? dnsRows : [
|
||||
h('tr', null, h('td', { colspan: 3, class: 'text-muted text-sm' }, 'No custom DNS records')),
|
||||
]),
|
||||
),
|
||||
)) : null,
|
||||
? Table({ columns: ['Name', 'Address', 'Action'], rows: dnsRows, emptyText: 'No custom DNS records' }) : null,
|
||||
state.activeTab === 'active'
|
||||
? h('div', { class: 'card' }, h('table', { class: 'table' },
|
||||
h('thead', null,
|
||||
h('tr', null,
|
||||
h('th', null, 'MAC'),
|
||||
h('th', null, 'IP'),
|
||||
h('th', null, 'Hostname'),
|
||||
h('th', null, 'Expires'),
|
||||
),
|
||||
),
|
||||
h('tbody', null,
|
||||
(state.leases || []).map((l, i) => h('tr', { key: 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 || '-')),
|
||||
)),
|
||||
),
|
||||
)) : null,
|
||||
? 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,
|
||||
];
|
||||
},
|
||||
});
|
||||
|
||||
@@ -1,10 +1,9 @@
|
||||
import { h, PageHeader, Badge, StatusDot, Empty, Card, esc, enc, att_esc, $val, apiFetch, toast, dismissToast, openModal, closeModal, formModal, definePage, hComp, connect, reactive, requestUpdate, Link, createRouter, ToastContainer, render, parseZones } from '/static/hoover/index.js';
|
||||
import { h, PageHeader, Table, renderGuard, enc, $val, apiFetch, toast, definePage, refactorLoad, StatusText, QuickModal, ZoneSelect } from '/static/hoover/index.js?v=6';
|
||||
|
||||
async function changeZone(name, zone, state) {
|
||||
const r = await apiFetch('/api/firewall/zones/' + enc(zone) + '/interfaces', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ interfaces: [name] }),
|
||||
body: { interfaces: [name] },
|
||||
});
|
||||
if (r.ok) {
|
||||
toast(name + ' \u2192 ' + zone, 'success');
|
||||
@@ -14,126 +13,87 @@ async function changeZone(name, zone, state) {
|
||||
}
|
||||
}
|
||||
|
||||
function cfgModal(name, state) {
|
||||
openModal((inner, idx) => {
|
||||
formModal(inner, 'Config: ' + name,
|
||||
[
|
||||
{ label: 'Addresses (comma-separated)', id: 'cfg-addrs', placeholder: '192.168.1.1/24' },
|
||||
{ label: 'Gateway', id: 'cfg-gw' },
|
||||
{ label: 'DNS (comma-separated)', id: 'cfg-dns', placeholder: '1.1.1.1, 8.8.8.8' },
|
||||
],
|
||||
[
|
||||
{ label: 'Cancel', cls: 'btn-outline', action: 'c', handler: () => closeModal(idx) },
|
||||
{
|
||||
label: 'Save', cls: 'btn-primary', action: 's', handler: async () => {
|
||||
const body = {
|
||||
addresses: ($val('cfg-addrs') || '').split(',').map(s => s.trim()).filter(Boolean),
|
||||
gateway: ($val('cfg-gw') || '').trim() || undefined,
|
||||
dns: ($val('cfg-dns') || '').split(',').map(s => s.trim()).filter(Boolean),
|
||||
};
|
||||
const r = await apiFetch('/api/network/interfaces/' + enc(name), {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(body),
|
||||
});
|
||||
if (r.ok) {
|
||||
toast('Config saved', 'success');
|
||||
closeModal(idx);
|
||||
await load(state);
|
||||
} else {
|
||||
toast(r.error || 'Failed', 'error');
|
||||
}
|
||||
},
|
||||
},
|
||||
],
|
||||
);
|
||||
});
|
||||
}
|
||||
const cfgModalFn = QuickModal({
|
||||
title: (d) => 'Config: ' + d.name,
|
||||
fields: (d) => {
|
||||
const cfg = d.config || {};
|
||||
return [
|
||||
{ label: 'Addresses (comma-separated)', id: 'cfg-addrs', value: (cfg.addresses || []).join(', '), placeholder: '192.168.1.1/24' },
|
||||
{ label: 'Gateway', id: 'cfg-gw', value: cfg.gateway || '' },
|
||||
{ label: 'DNS (comma-separated)', id: 'cfg-dns', value: (cfg.dns || []).join(', '), placeholder: '1.1.1.1, 8.8.8.8' },
|
||||
];
|
||||
},
|
||||
submit: {
|
||||
url: (d) => '/api/network/interfaces/' + enc(d.name),
|
||||
body: () => ({
|
||||
addresses: ($val('cfg-addrs') || '').split(',').map(s => s.trim()).filter(Boolean),
|
||||
gateway: ($val('cfg-gw') || '').trim() || undefined,
|
||||
dns: ($val('cfg-dns') || '').split(',').map(s => s.trim()).filter(Boolean),
|
||||
}),
|
||||
successMsg: 'Config saved',
|
||||
},
|
||||
reload: (s) => load(s),
|
||||
});
|
||||
|
||||
async function load(state, abortController, entry) {
|
||||
if (state.ifaces?.length) state.refreshing = true;
|
||||
else state.loading = true;
|
||||
try {
|
||||
const myId = entry ? entry.requestId : 0;
|
||||
const sig = abortController?.signal;
|
||||
const [fw, net] = await Promise.all([
|
||||
apiFetch('/api/firewall/zones', { signal: sig }),
|
||||
apiFetch('/api/network/interfaces', { signal: sig }),
|
||||
]);
|
||||
if (abortController?.signal.aborted || (entry && entry.requestId !== myId)) return;
|
||||
// Extract zone names from available zones (for the dropdown)
|
||||
state.zones = fw.ok ? (fw.data?.available || []) : [];
|
||||
if (net.ok) {
|
||||
// Build reverse zone map: interface name → zone name, from active zones
|
||||
const ifaceZone = {};
|
||||
for (const [zoneName, ifaces] of Object.entries(fw.data?.active || {})) {
|
||||
for (const name of (ifaces || [])) ifaceZone[name] = zoneName;
|
||||
await refactorLoad(state,
|
||||
s => s.ifaces?.length,
|
||||
async (s, sig, isAborted) => {
|
||||
const [fw, net] = await Promise.all([
|
||||
apiFetch('/api/firewall/zones', { signal: sig }),
|
||||
apiFetch('/api/network/interfaces', { signal: sig }),
|
||||
]);
|
||||
if (isAborted()) return;
|
||||
if (fw.ok) s.zones = fw.data?.available || [];
|
||||
else s.error = fw.error;
|
||||
if (net.ok) {
|
||||
const ifaceZone = {};
|
||||
for (const [zoneName, ifaces] of Object.entries(fw.data?.active || {})) {
|
||||
for (const name of (ifaces || [])) ifaceZone[name] = zoneName;
|
||||
}
|
||||
const ifacesObj = net.data?.interfaces || {};
|
||||
s.ifaces = Object.entries(ifacesObj).map(([name, entry]) => ({
|
||||
name,
|
||||
mac: entry?.runtime?.mac || null,
|
||||
ips: [...(entry?.config?.addresses || []), ...(entry?.runtime?.addresses || [])],
|
||||
state: (entry?.runtime?.state || '').startsWith('routable') || (entry?.runtime?.state || '').startsWith('carrier') ? 'up' : 'down',
|
||||
zone: ifaceZone[name] || null,
|
||||
config: entry?.config || {},
|
||||
}));
|
||||
} else if (!s.error) {
|
||||
s.error = net.error;
|
||||
}
|
||||
// Transform { interfaces: { name: { config, runtime } }, timestamp }
|
||||
// → array of { name, mac, ips, state, zone }
|
||||
const ifacesObj = net.data?.interfaces || {};
|
||||
state.ifaces = Object.entries(ifacesObj).map(([name, entry]) => ({
|
||||
name,
|
||||
mac: entry?.runtime?.mac || null,
|
||||
ips: [...(entry?.config?.addresses || []), ...(entry?.runtime?.addresses || [])],
|
||||
state: (entry?.runtime?.state || '').startsWith('routable') || (entry?.runtime?.state || '').startsWith('carrier') ? 'up' : 'down',
|
||||
zone: ifaceZone[name] || null,
|
||||
}));
|
||||
} else {
|
||||
state.error = net.error;
|
||||
}
|
||||
} catch (e) {
|
||||
if (abortController?.signal.aborted) return;
|
||||
state.error = String(e);
|
||||
}
|
||||
state.loading = false;
|
||||
state.refreshing = false;
|
||||
},
|
||||
{ entry, abortController },
|
||||
);
|
||||
}
|
||||
|
||||
export default definePage({
|
||||
init() {
|
||||
return { ifaces: [], zones: [], loading: true, refreshing: false, error: null };
|
||||
return { ifaces: [], zones: [] };
|
||||
},
|
||||
subscribe: ['firewall', 'networkd'],
|
||||
load,
|
||||
render(state) {
|
||||
if (state.loading && !state.refreshing) {
|
||||
return [
|
||||
PageHeader({ title: 'Interfaces' }),
|
||||
h('div', { class: 'card', key: 'loading' },
|
||||
h('div', { class: 'card-body loading' }, state.refreshing ? 'Refreshing...' : 'Loading...'),
|
||||
),
|
||||
];
|
||||
}
|
||||
|
||||
if (state.error) {
|
||||
return [
|
||||
PageHeader({ title: 'Interfaces' }),
|
||||
h('div', { class: 'card', key: 'error' },
|
||||
h('div', { class: 'card-body error-msg' }, state.error),
|
||||
),
|
||||
];
|
||||
}
|
||||
const guard = renderGuard(state, 'Interfaces', 'Network interface management', state.ifaces.length);
|
||||
if (guard) return guard;
|
||||
|
||||
const rows = state.ifaces.map(iface => {
|
||||
return h('tr', { key: iface.name },
|
||||
h('td', null, h('strong', null, iface.name)),
|
||||
h('td', { class: 'text-muted' }, String(iface.mac || 'N/A')),
|
||||
h('td', null, (iface.ips || []).join(', ') || 'N/A'),
|
||||
h('td', null, StatusText({ status: iface.state })),
|
||||
h('td', null,
|
||||
StatusDot({ status: iface.state }),
|
||||
' ' + (iface.state === 'up' ? 'Up' : 'Down'),
|
||||
),
|
||||
h('td', null,
|
||||
h('select', {
|
||||
'on:change': (e) => changeZone(iface.name, e.target.value, state),
|
||||
}, state.zones.map(z =>
|
||||
h('option', { value: z, selected: z === iface.zone }, z),
|
||||
)),
|
||||
ZoneSelect({
|
||||
zones: state.zones,
|
||||
value: iface.zone,
|
||||
onChange: (z) => changeZone(iface.name, z, state),
|
||||
}),
|
||||
h('button', {
|
||||
class: 'btn btn-sm btn-outline',
|
||||
style: 'margin-left:8px',
|
||||
'on:click': () => cfgModal(iface.name, state),
|
||||
'on:click': () => cfgModalFn(iface),
|
||||
}, 'Config'),
|
||||
),
|
||||
);
|
||||
@@ -141,26 +101,11 @@ export default definePage({
|
||||
|
||||
return [
|
||||
PageHeader({ title: 'Interfaces', subtitle: 'Network interface management' }),
|
||||
h('div', { class: 'card' },
|
||||
h('table', { class: 'table' },
|
||||
h('thead', null,
|
||||
h('tr', null,
|
||||
h('th', null, 'Name'),
|
||||
h('th', null, 'MAC'),
|
||||
h('th', null, 'IPs'),
|
||||
h('th', null, 'State'),
|
||||
h('th', null, 'Zone / Actions'),
|
||||
),
|
||||
),
|
||||
h('tbody', null,
|
||||
...(rows.length ? rows : [
|
||||
h('tr', null,
|
||||
h('td', { colspan: 5, class: 'text-muted text-sm' }, 'No interfaces found'),
|
||||
),
|
||||
]),
|
||||
),
|
||||
),
|
||||
),
|
||||
Table({
|
||||
columns: ['Name', 'MAC', 'IPs', 'State', 'Zone / Actions'],
|
||||
rows,
|
||||
emptyText: 'No interfaces found',
|
||||
}),
|
||||
];
|
||||
},
|
||||
});
|
||||
|
||||
+56
-34
@@ -1,4 +1,4 @@
|
||||
import { h, PageHeader, Badge, StatusDot, Empty, Card, esc, enc, att_esc, $val, apiFetch, toast, dismissToast, openModal, closeModal, formModal, definePage, hComp, connect, reactive, requestUpdate, Link, createRouter, ToastContainer, render, parseZones } from '/static/hoover/index.js';
|
||||
import { h, PageHeader, Tabs, esc, definePage, refactorLoad } from '/static/hoover/index.js?v=6';
|
||||
|
||||
const logTabs = [
|
||||
{ key: 'journal', label: 'Journal', url: '/api/logs/journal' },
|
||||
@@ -8,38 +8,33 @@ const logTabs = [
|
||||
{ key: 'app', label: 'App', url: '/api/logs/app' },
|
||||
];
|
||||
|
||||
|
||||
async function fetchLog(state, url, signal) {
|
||||
state.loading = true;
|
||||
state.error = null;
|
||||
try {
|
||||
const res = await fetch(url, { signal });
|
||||
if (signal?.aborted) return;
|
||||
const text = await res.text();
|
||||
if (signal?.aborted) return;
|
||||
state.lines = text.split('\n').filter(l => l.length > 0);
|
||||
} catch (e) {
|
||||
if (signal?.aborted) return;
|
||||
state.error = String(e);
|
||||
}
|
||||
state.loading = false;
|
||||
state.refreshing = false;
|
||||
if (signal?.aborted) return;
|
||||
const res = await fetch(url, { signal });
|
||||
if (signal?.aborted) return;
|
||||
if (!res.ok) throw new Error(`HTTP ${res.status}`);
|
||||
const text = await res.text();
|
||||
if (signal?.aborted) return;
|
||||
state.lines = text.split('\n').filter(l => l.length > 0);
|
||||
}
|
||||
|
||||
export default definePage({
|
||||
init() {
|
||||
return { activeTab: 'journal', lines: [], loading: false, refreshing: false, error: null };
|
||||
return { activeTab: 'journal', lines: [], loading: false, _abortCtrl: null };
|
||||
},
|
||||
subscribe: [],
|
||||
async load(state, abortController, entry) {
|
||||
if (state.lines?.length) state.refreshing = true;
|
||||
else state.loading = true;
|
||||
const myId = entry ? entry.requestId : 0;
|
||||
const tab = logTabs.find(t => t.key === state.activeTab) || logTabs[0];
|
||||
await fetchLog(state, tab.url, abortController?.signal);
|
||||
if (abortController?.signal.aborted || (entry && entry.requestId !== myId)) return;
|
||||
await refactorLoad(state,
|
||||
s => s.lines?.length,
|
||||
async (s, sig, isAborted) => {
|
||||
const tab = logTabs.find(t => t.key === s.activeTab) || logTabs[0];
|
||||
await fetchLog(s, tab.url, sig);
|
||||
},
|
||||
{ entry, abortController },
|
||||
);
|
||||
},
|
||||
onUnmount(state) {
|
||||
state._abortCtrl?.abort();
|
||||
state.lines = [];
|
||||
},
|
||||
render(state) {
|
||||
@@ -51,16 +46,32 @@ export default definePage({
|
||||
|
||||
return [
|
||||
PageHeader({ title: 'Logs', subtitle: 'System & service logs' }),
|
||||
h('div', { class: 'tabs', key: 'log-tabs' },
|
||||
logTabs.map(t => h('span', {
|
||||
class: 'tab ' + (state.activeTab === t.key ? 'active' : ''),
|
||||
'on:click': async () => {
|
||||
state.activeTab = t.key;
|
||||
await fetchLog(state, t.url);
|
||||
},
|
||||
style: 'cursor:pointer;',
|
||||
}, t.label))
|
||||
),
|
||||
Tabs({
|
||||
state,
|
||||
tabs: logTabs.map(t => t.key),
|
||||
formatLabel: (k) => {
|
||||
const tab = logTabs.find(t => t.key === k);
|
||||
return tab ? tab.label : k.charAt(0).toUpperCase() + k.slice(1);
|
||||
},
|
||||
onTabClick: async (key) => {
|
||||
const tab = logTabs.find(t => t.key === key);
|
||||
if (!tab) return;
|
||||
state._abortCtrl?.abort();
|
||||
const ctrl = new AbortController();
|
||||
state._abortCtrl = ctrl;
|
||||
const tabs = state.lines?.length ? state : null;
|
||||
state.refreshing = !!tabs;
|
||||
if (!tabs) state.loading = true;
|
||||
state.error = null;
|
||||
try {
|
||||
await fetchLog(state, tab.url, ctrl.signal);
|
||||
} catch (e) {
|
||||
if (!ctrl.signal.aborted) state.error = String(e);
|
||||
}
|
||||
state.loading = false;
|
||||
state.refreshing = false;
|
||||
},
|
||||
}),
|
||||
h('div', { class: 'card', key: 'log-card' },
|
||||
h('div', { class: 'card-header' },
|
||||
h('span', null, tab.label),
|
||||
@@ -68,7 +79,18 @@ export default definePage({
|
||||
class: 'btn btn-sm btn-outline',
|
||||
style: 'float:right;',
|
||||
'on:click': async () => {
|
||||
await fetchLog(state, tab.url);
|
||||
state._abortCtrl?.abort();
|
||||
const ctrl = new AbortController();
|
||||
state._abortCtrl = ctrl;
|
||||
state.refreshing = true;
|
||||
state.error = null;
|
||||
try {
|
||||
await fetchLog(state, tab.url, ctrl.signal);
|
||||
} catch (e) {
|
||||
if (!ctrl.signal.aborted) state.error = String(e);
|
||||
}
|
||||
state.loading = false;
|
||||
state.refreshing = false;
|
||||
},
|
||||
}, '\u21BB')
|
||||
),
|
||||
|
||||
+116
-148
@@ -1,117 +1,101 @@
|
||||
import { h, PageHeader, Badge, StatusDot, Empty, Card, esc, enc, att_esc, $val, apiFetch, toast, dismissToast, openModal, closeModal, formModal, definePage, hComp, connect, reactive, requestUpdate, Link, createRouter, ToastContainer, render, parseZones } from '/static/hoover/index.js';
|
||||
import { h, PageHeader, Badge, StatusDot, Card, Table, renderGuard, enc, $val, apiFetch, toast, definePage, refactorLoad, ActionButton, DataTableSection, SectionTitle, ActionGroup, QuickModal, ConfirmDelete, ZoneSelect } from '/static/hoover/index.js?v=6';
|
||||
|
||||
function addFwdModal(zones, state) {
|
||||
openModal((inner, idx) => {
|
||||
formModal(inner, 'Add Port Forward',
|
||||
[
|
||||
{ label: 'Zone', id: 'fwd-zone', tag: 'select', options: zones.map(z => [z, z === zones[0]]) },
|
||||
{ label: 'Port', id: 'fwd-port', type: 'number' },
|
||||
{ label: 'Protocol', id: 'fwd-proto', placeholder: 'tcp or udp' },
|
||||
{ label: 'To Address', id: 'fwd-toaddr', placeholder: '192.168.1.100' },
|
||||
{ label: 'To Port (optional)', id: 'fwd-toport', type: 'number' },
|
||||
],
|
||||
[
|
||||
{ label: 'Cancel', cls: 'btn-outline', action: 'c', handler: () => closeModal(idx) },
|
||||
{
|
||||
label: 'Add', cls: 'btn-primary', action: 's', handler: async () => {
|
||||
const body = {
|
||||
zone: $val('fwd-zone'),
|
||||
port: parseInt($val('fwd-port')),
|
||||
proto: ($val('fwd-proto') || 'tcp').trim(),
|
||||
toaddr: ($val('fwd-toaddr') || '').trim() || undefined,
|
||||
toport: $val('fwd-toport') ? parseInt($val('fwd-toport')) : undefined,
|
||||
};
|
||||
if (!body.zone || !body.port || !body.proto) {
|
||||
toast('Zone, port, and proto are required', 'error');
|
||||
return;
|
||||
}
|
||||
const r = await apiFetch('/api/firewall/forward-port', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(body),
|
||||
});
|
||||
if (r.ok) {
|
||||
toast('Forward rule added', 'success');
|
||||
closeModal(idx);
|
||||
await load(state);
|
||||
} else {
|
||||
toast(r.error || 'Failed', 'error');
|
||||
}
|
||||
},
|
||||
},
|
||||
],
|
||||
);
|
||||
});
|
||||
}
|
||||
const addFwd = QuickModal({
|
||||
title: 'Add Port Forward',
|
||||
fields: (d) => [
|
||||
{ label: 'Zone', id: 'fwd-zone', tag: 'select', options: d.zones },
|
||||
{ label: 'Port', id: 'fwd-port', type: 'number' },
|
||||
{ label: 'Protocol', id: 'fwd-proto', placeholder: 'tcp or udp' },
|
||||
{ label: 'To Address', id: 'fwd-toaddr', placeholder: '192.168.1.100' },
|
||||
{ label: 'To Port (optional)', id: 'fwd-toport', type: 'number' },
|
||||
],
|
||||
submit: {
|
||||
url: '/api/firewall/forward-port',
|
||||
body: (s) => ({
|
||||
zone: $val('fwd-zone'),
|
||||
port: parseInt($val('fwd-port')),
|
||||
proto: ($val('fwd-proto') || 'tcp').trim(),
|
||||
toaddr: ($val('fwd-toaddr') || '').trim() || undefined,
|
||||
toport: $val('fwd-toport') ? parseInt($val('fwd-toport')) : undefined,
|
||||
}),
|
||||
validate: (b) => !b.zone || !b.port || !b.proto ? 'Zone, port, and proto are required' : null,
|
||||
successMsg: 'Forward rule added',
|
||||
},
|
||||
reload: (s) => load(s._s),
|
||||
});
|
||||
|
||||
async function load(state, abortController, entry) {
|
||||
if (Object.keys(state.config || {}).length) state.refreshing = true;
|
||||
else state.loading = true;
|
||||
try {
|
||||
const myId = entry ? entry.requestId : 0;
|
||||
const sig = abortController?.signal;
|
||||
const r = await apiFetch('/api/firewall/config', { signal: sig });
|
||||
if (abortController?.signal.aborted || (entry && entry.requestId !== myId)) return;
|
||||
if (r.ok) state.config = r.data || {};
|
||||
const zr = await apiFetch('/api/firewall/zones', { signal: sig });
|
||||
if (abortController?.signal.aborted || (entry && entry.requestId !== myId)) return;
|
||||
if (zr.ok) state.activeZones = Object.keys(zr.data?.active || {});
|
||||
} catch (e) {
|
||||
if (abortController?.signal.aborted) return;
|
||||
state.error = String(e);
|
||||
}
|
||||
state.loading = false;
|
||||
state.refreshing = false;
|
||||
await refactorLoad(state,
|
||||
s => Object.keys(s.config || {}).length,
|
||||
async (s, sig, isAborted) => {
|
||||
const r = await apiFetch('/api/firewall/config', { signal: sig });
|
||||
if (isAborted()) return;
|
||||
if (r.ok) s.config = r.data || {};
|
||||
else s.error = r.error;
|
||||
const zr = await apiFetch('/api/firewall/zones', { signal: sig });
|
||||
if (isAborted()) return;
|
||||
if (zr.ok) s.activeZones = Object.keys(zr.data?.active || {});
|
||||
else if (!s.error) s.error = zr.error;
|
||||
const sr = await apiFetch('/api/firewall/state', { signal: sig });
|
||||
if (isAborted()) return;
|
||||
if (sr.ok) s.stateData = sr.data;
|
||||
},
|
||||
{ entry, abortController },
|
||||
);
|
||||
}
|
||||
|
||||
export default definePage({
|
||||
init() {
|
||||
return { config: {}, activeZones: [], loading: true, refreshing: false, error: null };
|
||||
return { config: {}, activeZones: [], stateData: null };
|
||||
},
|
||||
subscribe: ['firewall'],
|
||||
load,
|
||||
render(state) {
|
||||
if (state.loading && !state.refreshing) {
|
||||
return [
|
||||
PageHeader({ title: 'NAT', subtitle: 'Masquerade & port forwarding' }),
|
||||
h('div', { class: 'card', key: 'loading' },
|
||||
h('div', { class: 'card-body loading' }, state.refreshing ? 'Refreshing...' : 'Loading...'),
|
||||
),
|
||||
];
|
||||
}
|
||||
|
||||
if (state.error) {
|
||||
return [
|
||||
PageHeader({ title: 'NAT' }),
|
||||
h('div', { class: 'card', key: 'error' },
|
||||
h('div', { class: 'card-body error-msg' }, state.error),
|
||||
),
|
||||
];
|
||||
}
|
||||
const guard = renderGuard(state, 'NAT', 'Masquerade & port forwarding', state.config);
|
||||
if (guard) return guard;
|
||||
|
||||
const cfg = state.config || {};
|
||||
const zoneData = cfg.zones || {};
|
||||
|
||||
const sIface = (state.stateData || {}).interfaces || [];
|
||||
const masqZones = new Set(
|
||||
Object.entries(zoneData)
|
||||
.filter(([, zcfg]) => !!zcfg.masquerade)
|
||||
.map(([z]) => z)
|
||||
);
|
||||
const wanIface = sIface.filter((i) => i.zone && masqZones.has(i.zone));
|
||||
const lanIface = sIface.filter((i) => i.zone && !masqZones.has(i.zone));
|
||||
|
||||
const ifaceRows = (ifaces) =>
|
||||
ifaces.map((iface) =>
|
||||
h('tr', { key: 'ii-' + iface.name },
|
||||
h('td', null,
|
||||
h('div', { class: 'd-flex align-items-center gap-2' },
|
||||
StatusDot({ status: iface.state === 'UP' ? 'up' : 'down' }),
|
||||
h('strong', null, iface.name),
|
||||
),
|
||||
),
|
||||
h('td', null, (iface.ips || []).join(', ') || h('span', { class: 'text-muted' }, '—')),
|
||||
h('td', null, (iface.ipv6 || []).join(', ') || h('span', { class: 'text-muted' }, '—')),
|
||||
h('td', null, iface.mac || h('span', { class: 'text-muted' }, '—')),
|
||||
h('td', null, Badge({ text: iface.zone || '—', variant: 'secondary' })),
|
||||
)
|
||||
);
|
||||
|
||||
const masqRows = Object.entries(zoneData).map(([zone, zcfg]) => {
|
||||
const masq = !!zcfg.masquerade;
|
||||
return h('tr', { key: 'm-' + zone },
|
||||
h('td', null, h('strong', null, zone)),
|
||||
h('td', null, Badge({ text: masq ? 'Enabled' : 'Disabled', variant: masq ? 'success' : 'info' })),
|
||||
h('td', null,
|
||||
h('button', { class: 'btn btn-sm btn-outline',
|
||||
'on:click': async () => {
|
||||
const r = await apiFetch('/api/firewall/masquerade', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ zone, enable: !masq }),
|
||||
});
|
||||
if (r.ok) {
|
||||
toast('Masquerade ' + (masq ? 'disabled' : 'enabled') + ' on ' + zone, 'success');
|
||||
await load(state);
|
||||
} else {
|
||||
toast(r.error || 'Failed', 'error');
|
||||
}
|
||||
}}, masq ? 'Disable' : 'Enable'),
|
||||
ActionButton({
|
||||
url: '/api/firewall/masquerade',
|
||||
cls: 'btn btn-sm btn-outline',
|
||||
labelOn: 'Disable', labelOff: 'Enable', condition: masq,
|
||||
body: () => ({ zone, enable: !masq }),
|
||||
successMsg: 'Masquerade ' + (masq ? 'disabled' : 'enabled') + ' on ' + zone,
|
||||
reload: () => load(state),
|
||||
}),
|
||||
),
|
||||
);
|
||||
});
|
||||
@@ -120,25 +104,21 @@ export default definePage({
|
||||
Object.entries(zoneData).forEach(([zone, zcfg]) => {
|
||||
const forwards = zcfg.forward_ports || [];
|
||||
forwards.forEach((fwd, i) => {
|
||||
const port = fwd.port;
|
||||
const proto = fwd['proxy-protocol'] || fwd.proto;
|
||||
fwRows.push(h('tr', { key: 'f-' + zone + '-' + i },
|
||||
h('td', null, h('strong', null, zone)),
|
||||
h('td', null, Badge({ text: fwd['proxy-protocol'] || fwd.proto || 'tcp', variant: 'info' })),
|
||||
h('td', null, fwd.port),
|
||||
h('td', null, Badge({ text: proto || 'tcp', variant: 'info' })),
|
||||
h('td', null, port),
|
||||
h('td', null, fwd['to-addr'] || fwd.toaddr || '-'),
|
||||
h('td', null, fwd['to-port'] || fwd.toport || '-'),
|
||||
h('td', null,
|
||||
h('button', { class: 'btn btn-sm btn-danger',
|
||||
'on:click': async () => {
|
||||
const port = fwd.port, proto = fwd['proxy-protocol'] || fwd.proto;
|
||||
if (!confirm('Remove forward ' + zone + ':' + port + '/' + proto + '?')) return;
|
||||
const r = await apiFetch('/api/firewall/forward-port/' + enc(zone) + '/' + port + '/' + enc(proto), { method: 'DELETE' });
|
||||
if (r.ok) {
|
||||
toast('Rule removed', 'success');
|
||||
await load(state);
|
||||
} else {
|
||||
toast(r.error || 'Failed', 'error');
|
||||
}
|
||||
}}, 'Remove'),
|
||||
ConfirmDelete({
|
||||
url: '/api/firewall/forward-port/' + enc(zone) + '/' + port + '/' + enc(proto),
|
||||
message: 'Remove forward ' + zone + ':' + port + '/' + proto + '?',
|
||||
success: 'Rule removed',
|
||||
reload: () => load(state),
|
||||
}),
|
||||
),
|
||||
));
|
||||
});
|
||||
@@ -146,49 +126,37 @@ export default definePage({
|
||||
|
||||
return [
|
||||
PageHeader({ title: 'NAT', subtitle: 'Masquerade & port forwarding' }),
|
||||
h('h3', { class: 'section-title' }, 'Masquerade'),
|
||||
h('div', { class: 'card' },
|
||||
h('table', { class: 'table' },
|
||||
h('thead', null,
|
||||
h('tr', null,
|
||||
h('th', null, 'Zone'),
|
||||
h('th', null, 'Status'),
|
||||
h('th', { style: 'width:100px;' }, 'Action'),
|
||||
),
|
||||
),
|
||||
h('tbody', null,
|
||||
...(masqRows.length ? masqRows : [
|
||||
h('tr', null, h('td', { colspan: 3, class: 'text-muted' }, 'No zones')),
|
||||
]),
|
||||
),
|
||||
),
|
||||
),
|
||||
h('h3', { class: 'section-title' }, 'Port Forwarding'),
|
||||
h('div', { class: 'card' },
|
||||
h('div', { style: 'padding:0.75rem;', class: 'flex' },
|
||||
DataTableSection({
|
||||
title: 'WAN / External',
|
||||
columns: ['Interface', 'IPv4', 'IPv6', 'MAC', 'Zone'],
|
||||
rows: ifaceRows(wanIface),
|
||||
emptyText: 'No WAN interfaces with masquerade enabled',
|
||||
}),
|
||||
DataTableSection({
|
||||
title: 'Internal / LAN',
|
||||
columns: ['Interface', 'IPv4', 'IPv6', 'MAC', 'Zone'],
|
||||
rows: ifaceRows(lanIface),
|
||||
emptyText: 'No internal interfaces',
|
||||
}),
|
||||
DataTableSection({
|
||||
title: 'Masquerade',
|
||||
columns: ['Zone', 'Status', 'Action'],
|
||||
rows: masqRows,
|
||||
emptyText: 'No zones',
|
||||
}),
|
||||
SectionTitle({ title: 'Port Forwarding' }),
|
||||
Card({ children: [
|
||||
ActionGroup(
|
||||
h('button', { class: 'btn btn-sm btn-primary',
|
||||
'on:click': () => addFwdModal(state.activeZones, state) }, 'Add Forward'),
|
||||
'on:click': () => addFwd({ zones: state.activeZones, _s: state }) }, 'Add Forward'),
|
||||
),
|
||||
h('table', { class: 'table' },
|
||||
h('thead', null,
|
||||
h('tr', null,
|
||||
h('th', null, 'Zone'),
|
||||
h('th', null, 'Proto'),
|
||||
h('th', null, 'Port'),
|
||||
h('th', null, 'To Addr'),
|
||||
h('th', null, 'To Port'),
|
||||
h('th', { style: 'width:80px;' }, 'Action'),
|
||||
),
|
||||
),
|
||||
h('tbody', null,
|
||||
...(fwRows.length ? fwRows : [
|
||||
h('tr', null,
|
||||
h('td', { colspan: 6, class: 'text-muted text-sm' }, 'No port forwarding rules'),
|
||||
),
|
||||
]),
|
||||
),
|
||||
),
|
||||
),
|
||||
Table({
|
||||
columns: ['Zone', 'Proto', 'Port', 'To Addr', 'To Port', 'Action'],
|
||||
rows: fwRows,
|
||||
emptyText: 'No port forwarding rules',
|
||||
wrapCard: false,
|
||||
}),
|
||||
]}),
|
||||
];
|
||||
},
|
||||
});
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { h, PageHeader, Badge, StatusDot, Empty, Card, esc, enc, att_esc, $val, apiFetch, toast, dismissToast, openModal, closeModal, formModal, definePage, hComp, connect, reactive, requestUpdate, Link, createRouter, ToastContainer, render, parseZones } from '/static/hoover/index.js';
|
||||
import { h, PageHeader, definePage } from '/static/hoover/index.js?v=6';
|
||||
|
||||
export default definePage({
|
||||
init() {
|
||||
|
||||
+89
-162
@@ -1,143 +1,85 @@
|
||||
import { h, PageHeader, Badge, StatusDot, Empty, Card, esc, enc, att_esc, $val, apiFetch, toast, dismissToast, openModal, closeModal, formModal, definePage, hComp, connect, reactive, requestUpdate, Link, createRouter, ToastContainer, render, parseZones } from '/static/hoover/index.js';
|
||||
import { h, PageHeader, Badge, Empty, Table, renderGuard, esc, enc, $val, apiFetch, toast, definePage, refactorLoad, ActionButton, ActionCell, certStatusBadge, ActionGroup, QuickModal } from '/static/hoover/index.js?v=6';
|
||||
|
||||
function addDomainModal(state) {
|
||||
openModal((inner, idx) => {
|
||||
formModal(inner, 'Add Proxy Domain',
|
||||
[
|
||||
{ label: 'Domain', id: 'p-domain', placeholder: 'example.com' },
|
||||
{ label: 'Backend Host', id: 'p-host', placeholder: '192.168.1.10' },
|
||||
{ label: 'Backend Port', id: 'p-port', type: 'number', placeholder: '8080' },
|
||||
{ label: 'Protocol', id: 'p-proto', placeholder: 'http or https' },
|
||||
{ label: 'Cert (optional)', id: 'p-cert', placeholder: 'acme' },
|
||||
],
|
||||
[
|
||||
{ label: 'Cancel', cls: 'btn-outline', action: 'c', handler: () => closeModal(idx) },
|
||||
{
|
||||
label: 'Add', cls: 'btn-primary', action: 's', handler: async () => {
|
||||
const body = {
|
||||
domain: ($val('p-domain') || '').trim(),
|
||||
backend_host: ($val('p-host') || '').trim(),
|
||||
backend_port: parseInt($val('p-port')),
|
||||
backend_proto: ($val('p-proto') || 'http').trim() || 'http',
|
||||
cert: ($val('p-cert') || '').trim() || undefined,
|
||||
};
|
||||
if (!body.domain || !body.backend_host || !body.backend_port) {
|
||||
toast('Domain, host, and port are required', 'error');
|
||||
return;
|
||||
}
|
||||
const resp = await apiFetch('/api/proxy/domains', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(body),
|
||||
});
|
||||
if (resp.ok) {
|
||||
toast('Domain added', 'success');
|
||||
closeModal(idx);
|
||||
await load(state);
|
||||
} else {
|
||||
toast(resp.error || 'Failed', 'error');
|
||||
}
|
||||
},
|
||||
},
|
||||
],
|
||||
);
|
||||
});
|
||||
}
|
||||
const addDomain = QuickModal({
|
||||
title: 'Add Proxy Domain',
|
||||
fields: [
|
||||
{ label: 'Domain', id: 'p-domain', placeholder: 'example.com' },
|
||||
{ label: 'Backend Host', id: 'p-host', placeholder: '192.168.1.10' },
|
||||
{ label: 'Backend Port', id: 'p-port', type: 'number', placeholder: '8080' },
|
||||
{ label: 'Protocol', id: 'p-proto', placeholder: 'http or https' },
|
||||
{ label: 'Cert (optional)', id: 'p-cert', placeholder: 'acme' },
|
||||
],
|
||||
submit: {
|
||||
url: '/api/proxy/domains',
|
||||
body: () => ({
|
||||
domain: ($val('p-domain') || '').trim(),
|
||||
backend_host: ($val('p-host') || '').trim(),
|
||||
backend_port: parseInt($val('p-port')),
|
||||
backend_proto: ($val('p-proto') || 'http').trim() || 'http',
|
||||
cert: ($val('p-cert') || '').trim() || undefined,
|
||||
}),
|
||||
validate: (b) => !b.domain || !b.backend_host || !b.backend_port ? 'Domain, host, and port are required' : null,
|
||||
successMsg: 'Domain added',
|
||||
},
|
||||
reload: (s) => load(s),
|
||||
});
|
||||
|
||||
function editDomainModal(domain, state) {
|
||||
openModal((inner, idx) => {
|
||||
formModal(inner, 'Edit: ' + domain.domain,
|
||||
[
|
||||
{ label: 'Backend Host', id: 'pe-host', value: domain.backend_host || '' },
|
||||
{ label: 'Backend Port', id: 'pe-port', type: 'number', value: domain.backend_port || '' },
|
||||
{ label: 'Protocol', id: 'pe-proto', value: domain.backend_proto || domain.protocol || 'http' },
|
||||
{ label: 'Cert (optional)', id: 'pe-cert', value: domain.cert || '' },
|
||||
],
|
||||
[
|
||||
{ label: 'Cancel', cls: 'btn-outline', action: 'c', handler: () => closeModal(idx) },
|
||||
{
|
||||
label: 'Save', cls: 'btn-primary', action: 's', handler: async () => {
|
||||
const body = {
|
||||
backend_host: ($val('pe-host') || '').trim(),
|
||||
backend_port: parseInt($val('pe-port')),
|
||||
backend_proto: ($val('pe-proto') || 'http').trim(),
|
||||
cert: ($val('pe-cert') || '').trim() || undefined,
|
||||
};
|
||||
const resp = await apiFetch('/api/proxy/domains/' + enc(domain.domain), {
|
||||
method: 'PUT',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(body),
|
||||
});
|
||||
if (resp.ok) {
|
||||
toast('Domain updated', 'success');
|
||||
closeModal(idx);
|
||||
await load(state);
|
||||
} else {
|
||||
toast(resp.error || 'Failed', 'error');
|
||||
}
|
||||
},
|
||||
},
|
||||
],
|
||||
);
|
||||
});
|
||||
}
|
||||
const editDomain = QuickModal({
|
||||
title: (d) => 'Edit: ' + d.domain,
|
||||
fields: (d) => [
|
||||
{ label: 'Backend Host', id: 'pe-host', value: d.backend_host || '' },
|
||||
{ label: 'Backend Port', id: 'pe-port', type: 'number', value: d.backend_port || '' },
|
||||
{ label: 'Protocol', id: 'pe-proto', value: d.backend_proto || d.protocol || 'http' },
|
||||
{ label: 'Cert (optional)', id: 'pe-cert', value: d.cert || '' },
|
||||
],
|
||||
submit: {
|
||||
url: (d) => '/api/proxy/domains/' + enc(d.domain),
|
||||
method: 'PUT',
|
||||
body: (d) => ({
|
||||
backend_host: ($val('pe-host') || '').trim(),
|
||||
backend_port: parseInt($val('pe-port')),
|
||||
backend_proto: ($val('pe-proto') || 'http').trim(),
|
||||
cert: ($val('pe-cert') || '').trim() || undefined,
|
||||
}),
|
||||
validate: (b) => !b.backend_host || !b.backend_port ? 'Host and port are required' : null,
|
||||
successMsg: 'Domain updated',
|
||||
},
|
||||
reload: (s) => load(s._s),
|
||||
});
|
||||
|
||||
async function load(state, abortController, entry) {
|
||||
if (state.domains?.length) state.refreshing = true;
|
||||
else state.loading = true;
|
||||
try {
|
||||
const myId = entry ? entry.requestId : 0;
|
||||
const sig = abortController?.signal;
|
||||
const domainsR = await apiFetch('/api/proxy/domains', { signal: sig });
|
||||
if (abortController?.signal.aborted || (entry && entry.requestId !== myId)) return;
|
||||
if (domainsR.ok) state.domains = domainsR.data || [];
|
||||
const certsR = await apiFetch('/api/certs/list', { signal: sig });
|
||||
if (abortController?.signal.aborted || (entry && entry.requestId !== myId)) return;
|
||||
if (certsR.ok) state.certs = certsR.data || [];
|
||||
} catch (e) {
|
||||
if (abortController?.signal.aborted) return;
|
||||
state.error = String(e);
|
||||
}
|
||||
state.loading = false;
|
||||
state.refreshing = false;
|
||||
await refactorLoad(state,
|
||||
s => s.domains?.length,
|
||||
async (s, sig, isAborted) => {
|
||||
const domainsR = await apiFetch('/api/proxy/domains', { signal: sig });
|
||||
if (isAborted()) return;
|
||||
if (domainsR.ok) s.domains = domainsR.data || [];
|
||||
else s.error = domainsR.error;
|
||||
const certsR = await apiFetch('/api/certs/list', { signal: sig });
|
||||
if (isAborted()) return;
|
||||
if (certsR.ok) s.certs = certsR.data || [];
|
||||
else if (!s.error) s.error = certsR.error;
|
||||
},
|
||||
{ entry, abortController },
|
||||
);
|
||||
}
|
||||
|
||||
export default definePage({
|
||||
init() {
|
||||
return { domains: [], certs: [], loading: true, refreshing: false, error: null };
|
||||
return { domains: [], certs: [] };
|
||||
},
|
||||
subscribe: ['nginx', 'acme'],
|
||||
load,
|
||||
render(state) {
|
||||
if (state.loading && !state.refreshing) {
|
||||
return [
|
||||
PageHeader({ title: 'Proxy' }),
|
||||
h('div', { class: 'card', key: 'loading' },
|
||||
h('div', { class: 'card-body loading' }, state.refreshing ? 'Refreshing...' : 'Loading...'),
|
||||
),
|
||||
];
|
||||
}
|
||||
|
||||
if (state.error) {
|
||||
return [
|
||||
PageHeader({ title: 'Proxy' }),
|
||||
h('div', { class: 'card', key: 'error' },
|
||||
h('div', { class: 'card-body error-msg' }, state.error),
|
||||
),
|
||||
];
|
||||
}
|
||||
const guard = renderGuard(state, 'Proxy', 'Nginx reverse proxy', state.domains);
|
||||
if (guard) return guard;
|
||||
|
||||
const rows = state.domains.map(d => {
|
||||
let certBadge = Badge({ text: 'No cert', variant: 'info' });
|
||||
if (d.cert_status === 'valid' || d.cert_status === 'active') {
|
||||
certBadge = Badge({ text: 'Valid', variant: 'success' });
|
||||
} else if (d.cert_status === 'expired' || (d.days_remaining !== undefined && d.days_remaining <= 0)) {
|
||||
certBadge = Badge({ text: 'Expired', variant: 'danger' });
|
||||
} else if (d.days_remaining !== undefined && d.days_remaining <= 30) {
|
||||
certBadge = Badge({ text: d.days_remaining + 'd', variant: 'warning' });
|
||||
} else if (d.days_remaining !== undefined) {
|
||||
certBadge = Badge({ text: d.days_remaining + 'd', variant: 'success' });
|
||||
}
|
||||
const certBadge = certStatusBadge({
|
||||
certStatus: d.cert_status,
|
||||
daysRemaining: d.days_remaining,
|
||||
expired: d.cert_status === 'expired',
|
||||
});
|
||||
|
||||
return h('tr', { key: d.domain },
|
||||
h('td', null, h('strong', null, esc(d.domain))),
|
||||
@@ -145,50 +87,35 @@ export default definePage({
|
||||
h('td', null, d.backend_port || '-'),
|
||||
h('td', null, Badge({ text: d.backend_proto || d.protocol || 'http', variant: 'info' })),
|
||||
h('td', null, certBadge),
|
||||
h('td', null,
|
||||
h('button', { class: 'btn btn-sm btn-outline', style: 'margin-right:4px;',
|
||||
'on:click': () => editDomainModal(d, state) }, 'Edit'),
|
||||
h('button', { class: 'btn btn-sm btn-danger',
|
||||
'on:click': async () => {
|
||||
if (!confirm('Remove proxy for ' + d.domain + '?')) return;
|
||||
const r = await apiFetch('/api/proxy/domains/' + enc(d.domain), { method: 'DELETE' });
|
||||
if (r.ok) {
|
||||
toast('Domain removed', 'success');
|
||||
await load(state);
|
||||
} else {
|
||||
toast(r.error || 'Failed', 'error');
|
||||
}
|
||||
}}, 'Delete'),
|
||||
),
|
||||
ActionCell({
|
||||
editLabel: 'Edit',
|
||||
editClick: () => editDomain({ ...d, _s: state }),
|
||||
removeUrl: '/api/proxy/domains/' + enc(d.domain),
|
||||
removeMessage: 'Remove proxy for ' + d.domain + '?',
|
||||
removeSuccess: 'Domain removed',
|
||||
removeReload: () => load(state),
|
||||
removeLabel: 'Delete',
|
||||
}),
|
||||
);
|
||||
});
|
||||
|
||||
const actions = h('div', { style: 'display:flex;gap:8px;' },
|
||||
h('button', { class: 'btn btn-primary', 'on:click': () => addDomainModal(state) }, 'Add Domain'),
|
||||
h('button', { class: 'btn btn-outline',
|
||||
'on:click': async () => {
|
||||
const resp = await apiFetch('/api/proxy/apply', { method: 'POST' });
|
||||
if (resp.ok) toast('Nginx applied & reloaded', 'success');
|
||||
else toast(resp.error || 'Failed', 'error');
|
||||
}}, 'Apply'),
|
||||
const actions = ActionGroup(
|
||||
h('button', { class: 'btn btn-primary', 'on:click': () => addDomain(state) }, 'Add Domain'),
|
||||
ActionButton({
|
||||
url: '/api/proxy/apply',
|
||||
successMsg: 'Nginx applied & reloaded',
|
||||
label: 'Apply',
|
||||
reload: () => load(state),
|
||||
}),
|
||||
);
|
||||
|
||||
return [
|
||||
PageHeader({ title: 'Proxy', subtitle: 'Nginx reverse proxy', actions }),
|
||||
rows.length
|
||||
? h('div', { class: 'card' }, h('table', { class: 'table' },
|
||||
h('thead', null,
|
||||
h('tr', null,
|
||||
h('th', null, 'Domain'),
|
||||
h('th', null, 'Backend Host'),
|
||||
h('th', null, 'Port'),
|
||||
h('th', null, 'Proto'),
|
||||
h('th', null, 'Cert'),
|
||||
h('th', { style: 'width:140px;' }, 'Actions'),
|
||||
),
|
||||
),
|
||||
h('tbody', null, ...rows),
|
||||
))
|
||||
? Table({
|
||||
columns: ['Domain', 'Backend Host', 'Port', 'Proto', 'Cert', 'Actions'],
|
||||
rows,
|
||||
})
|
||||
: Empty({ text: 'No proxy domains configured. Add a domain to start terminating SSL.' }),
|
||||
];
|
||||
},
|
||||
|
||||
+57
-106
@@ -1,83 +1,46 @@
|
||||
import { h, PageHeader, Badge, StatusDot, Empty, Card, esc, enc, att_esc, $val, apiFetch, toast, dismissToast, openModal, closeModal, formModal, definePage, hComp, connect, reactive, requestUpdate, Link, createRouter, ToastContainer, render, parseZones } from '/static/hoover/index.js';
|
||||
import { h, PageHeader, Empty, Card, ConfirmDelete, Table, renderGuard, esc, enc, $val, apiFetch, toast, definePage, refactorLoad, MonoText, QuickModal } from '/static/hoover/index.js?v=6';
|
||||
|
||||
function addRuleModal(zones, state) {
|
||||
openModal((inner, idx) => {
|
||||
formModal(inner, 'Add Rich Rule',
|
||||
[
|
||||
{ label: 'Zone', id: 'rule-zone', tag: 'select', options: zones.map(z => [z, z === zones[0]]) },
|
||||
{ label: 'Rule (XML)', id: 'rule-text', tag: 'textarea', placeholder: 'rule family="ipv4" source address="192.168.1.0/24" accept' },
|
||||
],
|
||||
[
|
||||
{ label: 'Cancel', cls: 'btn-outline', action: 'c', handler: () => closeModal(idx) },
|
||||
{
|
||||
label: 'Add', cls: 'btn-primary', action: 's', handler: async () => {
|
||||
const zone = $val('rule-zone');
|
||||
const rule = ($val('rule-text') || '').trim();
|
||||
if (!zone || !rule) { toast('Zone and rule are required', 'error'); return; }
|
||||
const r = await apiFetch('/api/firewall/rich-rules', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ zone, rule }),
|
||||
});
|
||||
if (r.ok) {
|
||||
toast('Rule added', 'success');
|
||||
closeModal(idx);
|
||||
await load(state);
|
||||
} else {
|
||||
toast(r.error || 'Failed', 'error');
|
||||
}
|
||||
},
|
||||
},
|
||||
],
|
||||
);
|
||||
});
|
||||
}
|
||||
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: (s) => ({ zone: $val('rule-zone'), rule: ($val('rule-text') || '').trim() }),
|
||||
validate: (b) => !b.zone || !b.rule ? 'Zone and rule are required' : null,
|
||||
successMsg: 'Rule added',
|
||||
},
|
||||
reload: (s) => load(s._s),
|
||||
});
|
||||
|
||||
async function load(state, abortController, entry) {
|
||||
if (Object.keys(state.config || {}).length) state.refreshing = true;
|
||||
else state.loading = true;
|
||||
try {
|
||||
const myId = entry ? entry.requestId : 0;
|
||||
const sig = abortController?.signal;
|
||||
const r = await apiFetch('/api/firewall/config', { signal: sig });
|
||||
if (abortController?.signal.aborted || (entry && entry.requestId !== myId)) return;
|
||||
if (r.ok) state.config = r.data || {};
|
||||
else state.error = r.error;
|
||||
const zr = await apiFetch('/api/firewall/zones', { signal: sig });
|
||||
if (abortController?.signal.aborted || (entry && entry.requestId !== myId)) return;
|
||||
if (zr.ok) state.zones = Object.keys(zr.data?.active || {});
|
||||
} catch (e) {
|
||||
if (abortController?.signal.aborted) return;
|
||||
state.error = String(e);
|
||||
}
|
||||
state.loading = false;
|
||||
state.refreshing = false;
|
||||
await refactorLoad(state,
|
||||
s => Object.keys(s.config || {}).length,
|
||||
async (s, sig, isAborted) => {
|
||||
const r = await apiFetch('/api/firewall/config', { signal: sig });
|
||||
if (isAborted()) return;
|
||||
if (r.ok) s.config = r.data || {};
|
||||
else s.error = r.error;
|
||||
const zr = await apiFetch('/api/firewall/zones', { signal: sig });
|
||||
if (isAborted()) return;
|
||||
if (zr.ok) s.zones = Object.keys(zr.data?.active || {});
|
||||
else if (!s.error) s.error = zr.error;
|
||||
},
|
||||
{ entry, abortController },
|
||||
);
|
||||
}
|
||||
|
||||
export default definePage({
|
||||
init() {
|
||||
return { config: {}, loading: true, refreshing: false, error: null, zones: [] };
|
||||
return { config: {}, zones: [] };
|
||||
},
|
||||
subscribe: ['firewall'],
|
||||
load,
|
||||
render(state) {
|
||||
if (state.loading && !state.refreshing) {
|
||||
return [
|
||||
PageHeader({ title: 'Rules', subtitle: 'Firewall rich rules' }),
|
||||
h('div', { class: 'card', key: 'loading' },
|
||||
h('div', { class: 'card-body loading' }, state.refreshing ? 'Refreshing...' : 'Loading...'),
|
||||
),
|
||||
];
|
||||
}
|
||||
|
||||
if (state.error) {
|
||||
return [
|
||||
PageHeader({ title: 'Rules' }),
|
||||
h('div', { class: 'card', key: 'error' },
|
||||
h('div', { class: 'card-body error-msg' }, state.error),
|
||||
),
|
||||
];
|
||||
}
|
||||
const guard = renderGuard(state, 'Rules', 'Firewall rich rules', state.config);
|
||||
if (guard) return guard;
|
||||
|
||||
const cfg = state.config || {};
|
||||
const zoneData = cfg.zones || {};
|
||||
@@ -88,43 +51,31 @@ export default definePage({
|
||||
});
|
||||
|
||||
const cards = Object.entries(zoneRules).map(([zone, rules]) => {
|
||||
return h('div', { class: 'card', key: zone },
|
||||
h('div', { class: 'card-header' }, 'Zone: ' + esc(zone)),
|
||||
h('div', { class: 'card-body' },
|
||||
h('table', { class: 'table' },
|
||||
h('thead', null,
|
||||
h('tr', null,
|
||||
h('th', null, '#'),
|
||||
h('th', null, 'Rule'),
|
||||
h('th', { style: 'width:80px;' }, 'Action'),
|
||||
return Card({
|
||||
header: 'Zone: ' + esc(zone),
|
||||
key: zone,
|
||||
children: [Table({
|
||||
columns: ['#', 'Rule', 'Action'],
|
||||
rows: (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 h('tr', { key: i },
|
||||
h('td', { class: 'text-muted' }, i + 1),
|
||||
h('td', { class: 'mono-text td-fullwidth' }, MonoText({ text: ruleText })),
|
||||
h('td', null,
|
||||
ConfirmDelete({
|
||||
url: '/api/firewall/rich-rules/' + enc(zone) + '/' + enc(ruleId || ''),
|
||||
message: 'Remove rule: ' + ruleText.substring(0, 40) + '...?',
|
||||
success: 'Rule removed',
|
||||
reload: () => load(state),
|
||||
}),
|
||||
),
|
||||
),
|
||||
h('tbody', null,
|
||||
(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 h('tr', { key: i },
|
||||
h('td', { class: 'text-muted' }, i + 1),
|
||||
h('td', { style: 'font-family:monospace;font-size:12px;word-break:break-all;' }, esc(ruleText)),
|
||||
h('td', null,
|
||||
h('button', { class: 'btn btn-sm btn-danger',
|
||||
'on:click': async () => {
|
||||
if (!confirm('Remove rule: ' + ruleText.substring(0, 40) + '...?')) return;
|
||||
const r = await apiFetch('/api/firewall/rich-rules/' + enc(zone) + '/' + enc(ruleId || ''), { method: 'DELETE' });
|
||||
if (r.ok) {
|
||||
toast('Rule removed', 'success');
|
||||
await load(state);
|
||||
} else {
|
||||
toast(r.error || 'Failed', 'error');
|
||||
}
|
||||
}}, 'Remove'),
|
||||
),
|
||||
);
|
||||
}),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
);
|
||||
}),
|
||||
emptyText: 'No rules',
|
||||
wrapCard: false,
|
||||
})],
|
||||
});
|
||||
});
|
||||
|
||||
return [
|
||||
@@ -132,7 +83,7 @@ export default definePage({
|
||||
title: 'Rules',
|
||||
subtitle: 'Firewall rich rules',
|
||||
actions: h('button', { class: 'btn btn-primary',
|
||||
'on:click': () => addRuleModal(state.zones, state) }, 'Add Rule'),
|
||||
'on:click': () => addRule({ zones: state.zones, _s: state }), }, 'Add Rule'),
|
||||
}),
|
||||
...(cards.length ? cards : [Empty({ text: 'No rich rules configured.' })]),
|
||||
];
|
||||
|
||||
+73
-148
@@ -1,43 +1,26 @@
|
||||
import { h, PageHeader, Badge, StatusDot, Empty, Card, esc, enc, att_esc, $val, apiFetch, toast, dismissToast, openModal, closeModal, formModal, definePage, hComp, connect, reactive, requestUpdate, Link, createRouter, ToastContainer, render, parseZones } from '/static/hoover/index.js';
|
||||
import { h, PageHeader, Badge, StatusDot, Empty, Table, ServiceStatus, renderGuard, esc, enc, $val, apiFetch, toast, openModal, closeModal, formModal, definePage, apiSubmit, refactorLoad, ActionButton, ActionCell, MonoText, ActionGroup, QuickModal, downloadBlob } from '/static/hoover/index.js?v=6';
|
||||
|
||||
function addPeerModal(state) {
|
||||
openModal((inner, idx) => {
|
||||
formModal(inner, 'Add WireGuard Peer',
|
||||
[
|
||||
{ label: 'Name', id: 'wg-name', placeholder: 'client-name' },
|
||||
{ label: 'Endpoint (optional)', id: 'wg-endpoint', placeholder: '1.2.3.4:51820' },
|
||||
{ label: 'Allowed IPs (optional)', id: 'wg-allowed', placeholder: '10.0.0.2/32' },
|
||||
{ label: 'Persistent Keepalive (optional)', id: 'wg-keepalive', type: 'number', placeholder: '25' },
|
||||
],
|
||||
[
|
||||
{ label: 'Cancel', cls: 'btn-outline', action: 'c', handler: () => closeModal(idx) },
|
||||
{
|
||||
label: 'Add', cls: 'btn-primary', action: 's', handler: async () => {
|
||||
const body = {
|
||||
name: ($val('wg-name') || '').trim(),
|
||||
endpoint: ($val('wg-endpoint') || '').trim() || undefined,
|
||||
allowed_ips: ($val('wg-allowed') || '').trim() ? [($val('wg-allowed') || '').trim()] : [],
|
||||
persistent_keepalive: $val('wg-keepalive') ? parseInt($val('wg-keepalive')) : undefined,
|
||||
};
|
||||
if (!body.name) { toast('Name is required', 'error'); return; }
|
||||
const resp = await apiFetch('/api/wireguard/peers', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(body),
|
||||
});
|
||||
if (resp.ok) {
|
||||
toast('Peer added', 'success');
|
||||
closeModal(idx);
|
||||
await load(state);
|
||||
} else {
|
||||
toast(resp.error || 'Failed', 'error');
|
||||
}
|
||||
},
|
||||
},
|
||||
],
|
||||
);
|
||||
});
|
||||
}
|
||||
const addPeer = QuickModal({
|
||||
title: 'Add WireGuard Peer',
|
||||
fields: [
|
||||
{ label: 'Name', id: 'wg-name', placeholder: 'client-name' },
|
||||
{ label: 'Endpoint (optional)', id: 'wg-endpoint', placeholder: '1.2.3.4:51820' },
|
||||
{ label: 'Allowed IPs (optional)', id: 'wg-allowed', placeholder: '10.0.0.2/32' },
|
||||
{ label: 'Persistent Keepalive (optional)', id: 'wg-keepalive', type: 'number', placeholder: '25' },
|
||||
],
|
||||
submit: {
|
||||
url: '/api/wireguard/peers',
|
||||
body: () => ({
|
||||
name: ($val('wg-name') || '').trim(),
|
||||
endpoint: ($val('wg-endpoint') || '').trim() || undefined,
|
||||
allowed_ips: ($val('wg-allowed') || '').trim() ? [($val('wg-allowed') || '').trim()] : [],
|
||||
persistent_keepalive: $val('wg-keepalive') ? parseInt($val('wg-keepalive')) : undefined,
|
||||
}),
|
||||
validate: (b) => !b.name ? 'Name is required' : null,
|
||||
successMsg: 'Peer added',
|
||||
},
|
||||
reload: (s) => load(s),
|
||||
});
|
||||
|
||||
function downloadConfigModal(peerName, config, state) {
|
||||
openModal((inner, idx) => {
|
||||
@@ -51,19 +34,10 @@ function downloadConfigModal(peerName, config, state) {
|
||||
if (!endpoint) { toast('Server endpoint is required', 'error'); return; }
|
||||
const resp = await apiFetch('/api/wireguard/generate-client', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ name: peerName, server_endpoint: endpoint }),
|
||||
body: { name: peerName, server_endpoint: endpoint },
|
||||
});
|
||||
if (resp.ok && resp.data?.config) {
|
||||
const blob = new Blob([resp.data.config], { type: 'text/plain' });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = peerName + '.conf';
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
document.body.removeChild(a);
|
||||
URL.revokeObjectURL(url);
|
||||
downloadBlob(new Blob([resp.data.config], { type: 'text/plain' }), peerName + '.conf');
|
||||
toast('Config downloaded', 'success');
|
||||
closeModal(idx);
|
||||
} else {
|
||||
@@ -77,52 +51,35 @@ function downloadConfigModal(peerName, config, state) {
|
||||
}
|
||||
|
||||
async function load(state, abortController, entry) {
|
||||
if (state.peers?.length) state.refreshing = true;
|
||||
else state.loading = true;
|
||||
try {
|
||||
const myId = entry ? entry.requestId : 0;
|
||||
const sig = abortController?.signal;
|
||||
const stR = await apiFetch('/api/wireguard/status', { signal: sig });
|
||||
if (abortController?.signal.aborted || (entry && entry.requestId !== myId)) return;
|
||||
if (stR.ok) state.status = stR.data || {};
|
||||
const pR = await apiFetch('/api/wireguard/peers', { signal: sig });
|
||||
if (abortController?.signal.aborted || (entry && entry.requestId !== myId)) return;
|
||||
if (pR.ok) state.peers = pR.data || [];
|
||||
const cfgR = await apiFetch('/api/wireguard/config', { signal: sig });
|
||||
if (abortController?.signal.aborted || (entry && entry.requestId !== myId)) return;
|
||||
if (cfgR.ok) state.config = cfgR.data || {};
|
||||
} catch (e) {
|
||||
if (abortController?.signal.aborted) return;
|
||||
state.error = String(e);
|
||||
}
|
||||
state.loading = false;
|
||||
state.refreshing = false;
|
||||
await refactorLoad(state,
|
||||
s => s.peers?.length,
|
||||
async (s, sig, isAborted) => {
|
||||
const stR = await apiFetch('/api/wireguard/status', { signal: sig });
|
||||
if (isAborted()) return;
|
||||
if (stR.ok) s.status = stR.data || {};
|
||||
else s.error = stR.error;
|
||||
const pR = await apiFetch('/api/wireguard/peers', { signal: sig });
|
||||
if (isAborted()) return;
|
||||
if (pR.ok) s.peers = pR.data || [];
|
||||
else if (!s.error) s.error = pR.error;
|
||||
const cfgR = await apiFetch('/api/wireguard/config', { signal: sig });
|
||||
if (isAborted()) return;
|
||||
if (cfgR.ok) s.config = cfgR.data || {};
|
||||
else if (!s.error) s.error = cfgR.error;
|
||||
},
|
||||
{ entry, abortController },
|
||||
);
|
||||
}
|
||||
|
||||
export default definePage({
|
||||
init() {
|
||||
return { status: {}, peers: [], config: {}, loading: true, refreshing: false, error: null };
|
||||
return { status: {}, peers: [], config: {} };
|
||||
},
|
||||
subscribe: ['wireguard'],
|
||||
load,
|
||||
render(state) {
|
||||
if (state.loading && !state.refreshing) {
|
||||
return [
|
||||
PageHeader({ title: 'WireGuard' }),
|
||||
h('div', { class: 'card', key: 'loading' },
|
||||
h('div', { class: 'card-body loading' }, state.refreshing ? 'Refreshing...' : 'Loading...'),
|
||||
),
|
||||
];
|
||||
}
|
||||
|
||||
if (state.error) {
|
||||
return [
|
||||
PageHeader({ title: 'WireGuard' }),
|
||||
h('div', { class: 'card', key: 'error' },
|
||||
h('div', { class: 'card-body error-msg' }, state.error),
|
||||
),
|
||||
];
|
||||
}
|
||||
const guard = renderGuard(state, 'WireGuard', 'Tunnel: ' + ((state.status || {}).state || 'unknown') + ', Listen: ' + ((state.config?.interface || {}).listen_port || '-'), state.peers);
|
||||
if (guard) return guard;
|
||||
|
||||
const st = state.status || {};
|
||||
const isUp = st.state === 'up';
|
||||
@@ -135,10 +92,7 @@ export default definePage({
|
||||
StatusDot({ status: hasHandshake ? 'success' : 'danger' }),
|
||||
h('strong', null, esc(p.name || 'unnamed')),
|
||||
),
|
||||
h('td', { style: 'font-family:monospace;font-size:11px;' },
|
||||
esc((p.public_key || 'N/A').substring(0, 20)) +
|
||||
(p.public_key && p.public_key.length > 20 ? '...' : ''),
|
||||
),
|
||||
h('td', null, MonoText({ text: p.public_key || 'N/A', maxLength: 20 })),
|
||||
h('td', { class: 'text-sm' }, esc(p.allowed_ips || '-')),
|
||||
h('td', { class: 'text-sm' }, esc(p.endpoint || '-')),
|
||||
h('td', { class: 'text-sm' }, esc(p.latest_handshake || 'Never')),
|
||||
@@ -147,46 +101,31 @@ export default definePage({
|
||||
h('br'),
|
||||
'Sent: ' + esc(p.transfer_sent || '0'),
|
||||
),
|
||||
h('td', null,
|
||||
h('button', { class: 'btn btn-sm btn-outline', style: 'margin-right:4px;',
|
||||
'on:click': () => downloadConfigModal(p.name, state.config, state) }, 'Config'),
|
||||
h('button', { class: 'btn btn-sm btn-danger',
|
||||
'on:click': async () => {
|
||||
if (!confirm('Remove peer ' + p.name + '?')) return;
|
||||
const resp = await apiFetch('/api/wireguard/peers/' + enc(p.name), { method: 'DELETE' });
|
||||
if (resp.ok) {
|
||||
toast('Peer removed', 'success');
|
||||
await load(state);
|
||||
} else {
|
||||
toast(resp.error || 'Failed', 'error');
|
||||
}
|
||||
}}, 'Remove'),
|
||||
),
|
||||
ActionCell({
|
||||
editLabel: 'Config',
|
||||
editClick: () => downloadConfigModal(p.name, state.config, state),
|
||||
removeUrl: '/api/wireguard/peers/' + enc(p.name),
|
||||
removeMessage: 'Remove peer ' + p.name + '?',
|
||||
removeSuccess: 'Peer removed',
|
||||
removeReload: () => load(state),
|
||||
}),
|
||||
);
|
||||
});
|
||||
|
||||
const actions = h('div', { style: 'display:flex;gap:8px;' },
|
||||
h('button', { class: 'btn btn-primary', 'on:click': () => addPeerModal(state) }, 'Add Peer'),
|
||||
h('button', { class: 'btn btn-outline',
|
||||
'on:click': async () => {
|
||||
const resp = await apiFetch('/api/wireguard/' + (isUp ? 'down' : 'up'), { method: 'POST' });
|
||||
if (resp.ok) {
|
||||
toast('Tunnel ' + (isUp ? 'stopped' : 'started'), 'success');
|
||||
await load(state);
|
||||
} else {
|
||||
toast(resp.error || 'Failed', 'error');
|
||||
}
|
||||
}}, isUp ? 'Stop' : 'Start'),
|
||||
h('button', { class: 'btn btn-outline',
|
||||
'on:click': async () => {
|
||||
const resp = await apiFetch('/api/wireguard/apply', { method: 'POST' });
|
||||
if (resp.ok) {
|
||||
toast('Config applied', 'success');
|
||||
await load(state);
|
||||
} else {
|
||||
toast(resp.error || 'Failed', 'error');
|
||||
}
|
||||
}}, 'Apply'),
|
||||
const actions = ActionGroup(
|
||||
h('button', { class: 'btn btn-primary', 'on:click': () => addPeer(state) }, 'Add Peer'),
|
||||
ActionButton({
|
||||
url: '/api/wireguard/' + (isUp ? 'down' : 'up'),
|
||||
labelOn: 'Stop', labelOff: 'Start', condition: isUp,
|
||||
successMsg: 'Tunnel ' + (isUp ? 'stopped' : 'started'),
|
||||
reload: () => load(state),
|
||||
}),
|
||||
ActionButton({
|
||||
url: '/api/wireguard/apply',
|
||||
successMsg: 'Config applied',
|
||||
label: 'Apply',
|
||||
reload: () => load(state),
|
||||
}),
|
||||
);
|
||||
|
||||
return [
|
||||
@@ -195,26 +134,12 @@ export default definePage({
|
||||
subtitle: 'Tunnel: ' + (st.state || 'unknown') + ', Listen: ' + listenPort,
|
||||
actions,
|
||||
}),
|
||||
h('div', null,
|
||||
StatusDot({ status: isUp ? 'success' : 'danger' }),
|
||||
' ',
|
||||
Badge({ text: st.state || 'down', variant: isUp ? 'success' : 'danger' }),
|
||||
),
|
||||
ServiceStatus({ state: st.state || 'down' }),
|
||||
peerRows.length
|
||||
? h('div', { class: 'card' }, h('table', { class: 'table' },
|
||||
h('thead', null,
|
||||
h('tr', null,
|
||||
h('th', null, 'Peer'),
|
||||
h('th', null, 'Public Key'),
|
||||
h('th', null, 'Allowed IPs'),
|
||||
h('th', null, 'Endpoint'),
|
||||
h('th', null, 'Handshake'),
|
||||
h('th', null, 'Transfer'),
|
||||
h('th', { style: 'width:120px;' }, 'Actions'),
|
||||
),
|
||||
),
|
||||
h('tbody', null, ...peerRows),
|
||||
))
|
||||
? Table({
|
||||
columns: ['Peer', 'Public Key', 'Allowed IPs', 'Endpoint', 'Handshake', 'Transfer', 'Actions'],
|
||||
rows: peerRows,
|
||||
})
|
||||
: Empty({ text: 'No peers configured. Add a peer above.' }),
|
||||
];
|
||||
},
|
||||
|
||||
+78
-167
@@ -1,142 +1,59 @@
|
||||
import { h, PageHeader, Badge, StatusDot, Empty, Card, esc, enc, att_esc, $val, apiFetch, toast, dismissToast, openModal, closeModal, formModal, definePage, hComp, connect, reactive, requestUpdate, Link, createRouter, ToastContainer, render, parseZones } from '/static/hoover/index.js';
|
||||
import { h, PageHeader, Badge, Empty, ConfirmDelete, renderGuard, enc, esc, $val, apiFetch, toast, definePage, refactorLoad, MultiSelectModal, QuickModal } from '/static/hoover/index.js?v=6';
|
||||
|
||||
function addZoneModal(state) {
|
||||
openModal((inner, idx) => {
|
||||
formModal(inner, 'Add Zone',
|
||||
[
|
||||
{ label: 'Zone name', id: 'zone-name', placeholder: 'e.g. internal' },
|
||||
{ label: 'Target', id: 'zone-target', placeholder: 'default (usually leave as default)' },
|
||||
],
|
||||
[
|
||||
{ label: 'Cancel', cls: 'btn-outline', action: 'c', handler: () => closeModal(idx) },
|
||||
{
|
||||
label: 'Create', cls: 'btn-primary', action: 's', handler: async () => {
|
||||
const name = ($val('zone-name') || '').trim();
|
||||
if (!name) { toast('Zone name required', 'error'); return; }
|
||||
const target = ($val('zone-target') || '').trim() || 'default';
|
||||
const r = await apiFetch('/api/firewall/zones', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ name, target }),
|
||||
});
|
||||
if (r.ok) {
|
||||
toast('Zone ' + name + ' created', 'success');
|
||||
closeModal(idx);
|
||||
await load(state);
|
||||
} else {
|
||||
toast(r.error || 'Failed', 'error');
|
||||
}
|
||||
},
|
||||
},
|
||||
],
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
function zoneIfaceModal(zoneName, state) {
|
||||
const zdata = state.zones?.[zoneName] || {};
|
||||
const current = Array.isArray(zdata.interfaces) ? zdata.interfaces : [];
|
||||
const allIfaces = Array.isArray(state.interfaces) ? state.interfaces : [];
|
||||
openModal((inner, idx) => {
|
||||
formModal(inner, 'Interfaces: ' + zoneName,
|
||||
[
|
||||
{
|
||||
label: 'Interfaces', id: 'z-iface-select', tag: 'select',
|
||||
options: allIfaces.map(i => [i, current.includes(i)]),
|
||||
},
|
||||
],
|
||||
[
|
||||
{ label: 'Cancel', cls: 'btn-outline', action: 'c', handler: () => closeModal(idx) },
|
||||
{
|
||||
label: 'Save', cls: 'btn-primary', action: 's', handler: async () => {
|
||||
const sel = document.getElementById('z-iface-select');
|
||||
const selected = Array.from(sel.selectedOptions).map(o => o.value);
|
||||
const r = await apiFetch('/api/firewall/zones/' + enc(zoneName) + '/interfaces', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ interfaces: selected }),
|
||||
});
|
||||
if (r.ok) {
|
||||
toast('Interfaces updated', 'success');
|
||||
closeModal(idx);
|
||||
await load(state);
|
||||
} else {
|
||||
toast(r.error || 'Failed', 'error');
|
||||
}
|
||||
},
|
||||
},
|
||||
],
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
function zoneSvcModal(zoneName, state) {
|
||||
const zdata = state.zones?.[zoneName] || {};
|
||||
const current = Array.isArray(zdata.services) ? zdata.services : [];
|
||||
const all = Array.isArray(state.services) ? state.services : [];
|
||||
openModal((inner, idx) => {
|
||||
formModal(inner, 'Services: ' + zoneName,
|
||||
[
|
||||
{
|
||||
label: 'Services', id: 'z-svc-select', tag: 'select',
|
||||
options: all.map(s => [s, current.includes(s)]),
|
||||
},
|
||||
],
|
||||
[
|
||||
{ label: 'Cancel', cls: 'btn-outline', action: 'c', handler: () => closeModal(idx) },
|
||||
{
|
||||
label: 'Save', cls: 'btn-primary', action: 's', handler: async () => {
|
||||
const sel = document.getElementById('z-svc-select');
|
||||
const selected = Array.from(sel.selectedOptions).map(o => o.value);
|
||||
const r = await apiFetch('/api/firewall/zones/' + enc(zoneName) + '/services', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ services: selected }),
|
||||
});
|
||||
if (r.ok) {
|
||||
toast('Services updated', 'success');
|
||||
closeModal(idx);
|
||||
await load(state);
|
||||
} else {
|
||||
toast(r.error || 'Failed', 'error');
|
||||
}
|
||||
},
|
||||
},
|
||||
],
|
||||
);
|
||||
});
|
||||
}
|
||||
const addZone = QuickModal({
|
||||
title: 'Add Zone',
|
||||
fields: [
|
||||
{ label: 'Zone name', id: 'zone-name', placeholder: 'e.g. internal' },
|
||||
{ label: 'Target', id: 'zone-target', placeholder: 'default (usually leave as default)' },
|
||||
],
|
||||
submit: {
|
||||
url: '/api/firewall/zones',
|
||||
body: () => ({ name: ($val('zone-name') || '').trim(), target: ($val('zone-target') || '').trim() || 'default' }),
|
||||
validate: (b) => !b.name ? 'Zone name required' : null,
|
||||
successMsg: 'Zone created',
|
||||
},
|
||||
reload: (s) => load(s),
|
||||
});
|
||||
|
||||
async function load(state, abortController, entry) {
|
||||
if (Object.keys(state.zones || {}).length) state.refreshing = true;
|
||||
else state.loading = true;
|
||||
try {
|
||||
const myId = entry ? entry.requestId : 0;
|
||||
const sig = abortController?.signal;
|
||||
const [zRes, svcRes, ifRes] = await Promise.all([
|
||||
apiFetch('/api/firewall/zones', { signal: sig }),
|
||||
apiFetch('/api/firewall/services', { signal: sig }),
|
||||
apiFetch('/api/firewall/interfaces', { signal: sig }),
|
||||
]);
|
||||
await refactorLoad(state,
|
||||
s => Object.keys(s.zones || {}).length,
|
||||
async (s, sig, isAborted) => {
|
||||
const [zRes, svcRes, ifRes] = await Promise.allSettled([
|
||||
apiFetch('/api/firewall/zones', { signal: sig }),
|
||||
apiFetch('/api/firewall/services', { signal: sig }),
|
||||
apiFetch('/api/firewall/interfaces', { signal: sig }),
|
||||
]);
|
||||
if (isAborted()) return;
|
||||
|
||||
if (abortController?.signal.aborted || (entry && entry.requestId !== myId)) return;
|
||||
const errors = [];
|
||||
if (zRes.status === 'rejected') errors.push(zRes.reason?.message || 'Failed');
|
||||
else if (!zRes.value.ok) errors.push(zRes.value.error || 'Failed');
|
||||
if (svcRes.status === 'rejected') errors.push(svcRes.reason?.message || 'Failed');
|
||||
else if (!svcRes.value.ok) errors.push(svcRes.value.error || 'Failed');
|
||||
if (ifRes.status === 'rejected') errors.push(ifRes.reason?.message || 'Failed');
|
||||
else if (!ifRes.value.ok) errors.push(ifRes.value.error || 'Failed');
|
||||
if (errors.length) {
|
||||
s.error = errors[0];
|
||||
return;
|
||||
}
|
||||
|
||||
if (zRes.ok) {
|
||||
const data = zRes.data || {};
|
||||
const data = zRes.value.data || {};
|
||||
const activeZones = data.active || {};
|
||||
const availableZones = data.available || [];
|
||||
|
||||
const detailPromises = availableZones.map(name =>
|
||||
apiFetch('/api/firewall/zones/' + enc(name), { signal: sig }).catch(() => null)
|
||||
apiFetch('/api/firewall/zones/' + enc(name), { signal: sig })
|
||||
);
|
||||
const detailResults = await Promise.all(detailPromises);
|
||||
const detailResults = await Promise.allSettled(detailPromises);
|
||||
|
||||
if (abortController?.signal.aborted || (entry && entry.requestId !== myId)) return;
|
||||
if (isAborted()) return;
|
||||
|
||||
const zones = {};
|
||||
for (let i = 0; i < availableZones.length; i++) {
|
||||
const name = availableZones[i];
|
||||
const detail = detailResults[i];
|
||||
const res = detailResults[i];
|
||||
const detail = res.status === 'fulfilled' ? res.value : null;
|
||||
if (detail && detail.ok) {
|
||||
zones[name] = detail.data;
|
||||
const activeIfaces = activeZones[name];
|
||||
@@ -145,43 +62,23 @@ async function load(state, abortController, entry) {
|
||||
}
|
||||
}
|
||||
}
|
||||
state.zones = zones;
|
||||
}
|
||||
|
||||
if (svcRes.ok) state.services = svcRes.data || [];
|
||||
if (ifRes.ok) state.interfaces = ifRes.data || [];
|
||||
} catch (e) {
|
||||
if (abortController?.signal.aborted) return;
|
||||
state.error = String(e);
|
||||
}
|
||||
state.loading = false;
|
||||
state.refreshing = false;
|
||||
s.zones = zones;
|
||||
s.services = svcRes.value.data || [];
|
||||
s.interfaces = ifRes.value.data || [];
|
||||
},
|
||||
{ entry, abortController },
|
||||
);
|
||||
}
|
||||
|
||||
export default definePage({
|
||||
init() {
|
||||
return { zones: {}, services: [], interfaces: [], loading: true, refreshing: false, error: null };
|
||||
return { zones: {}, services: [], interfaces: [] };
|
||||
},
|
||||
subscribe: ['firewall'],
|
||||
load,
|
||||
render(state) {
|
||||
if (state.loading && !state.refreshing) {
|
||||
return [
|
||||
PageHeader({ title: 'Zones', subtitle: 'Firewall zone management' }),
|
||||
h('div', { class: 'card', key: 'loading' },
|
||||
h('div', { class: 'card-body loading' }, state.refreshing ? 'Refreshing...' : 'Loading...'),
|
||||
),
|
||||
];
|
||||
}
|
||||
|
||||
if (state.error) {
|
||||
return [
|
||||
PageHeader({ title: 'Zones' }),
|
||||
h('div', { class: 'card', key: 'error' },
|
||||
h('div', { class: 'card-body error-msg' }, state.error),
|
||||
),
|
||||
];
|
||||
}
|
||||
const guard = renderGuard(state, 'Zones', 'Firewall zone management', Object.keys(state.zones || {}).length);
|
||||
if (guard) return guard;
|
||||
|
||||
const zoneCards = Object.entries(state.zones || []).map(([name, zdata]) => {
|
||||
const z = typeof zdata === 'object' ? zdata : {};
|
||||
@@ -210,20 +107,34 @@ export default definePage({
|
||||
),
|
||||
h('div', { style: 'display:flex;gap:6px;' },
|
||||
h('button', { class: 'btn btn-sm btn-outline',
|
||||
'on:click': () => zoneIfaceModal(name, state) }, 'Interfaces'),
|
||||
'on:click': () => MultiSelectModal({
|
||||
title: 'Interfaces: ' + name,
|
||||
url: '/api/firewall/zones/' + enc(name) + '/interfaces',
|
||||
options: state.interfaces,
|
||||
selected: ifacesArr,
|
||||
fieldKey: 'interfaces',
|
||||
successMsg: 'Interfaces updated',
|
||||
reload: () => load(state),
|
||||
})(),
|
||||
}, 'Interfaces'),
|
||||
h('button', { class: 'btn btn-sm btn-outline',
|
||||
'on:click': () => zoneSvcModal(name, state) }, 'Services'),
|
||||
h('button', { class: 'btn btn-sm btn-danger', style: 'margin-left:auto;',
|
||||
'on:click': async () => {
|
||||
if (!confirm('Delete zone ' + name + '?')) return;
|
||||
const r = await apiFetch('/api/firewall/zones/' + enc(name), { method: 'DELETE' });
|
||||
if (r.ok) {
|
||||
toast('Zone ' + name + ' deleted', 'success');
|
||||
await load(state);
|
||||
} else {
|
||||
toast(r.error || 'Failed', 'error');
|
||||
}
|
||||
}}, 'Delete'),
|
||||
'on:click': () => MultiSelectModal({
|
||||
title: 'Services: ' + name,
|
||||
url: '/api/firewall/zones/' + enc(name) + '/services',
|
||||
options: state.services,
|
||||
selected: svcsArr,
|
||||
fieldKey: 'services',
|
||||
successMsg: 'Services updated',
|
||||
reload: () => load(state),
|
||||
})(),
|
||||
}, 'Services'),
|
||||
ConfirmDelete({
|
||||
url: '/api/firewall/zones/' + enc(name),
|
||||
message: 'Delete zone ' + name + '?',
|
||||
success: 'Zone ' + name + ' deleted',
|
||||
reload: () => load(state),
|
||||
label: 'Delete',
|
||||
}),
|
||||
),
|
||||
);
|
||||
});
|
||||
@@ -233,7 +144,7 @@ export default definePage({
|
||||
title: 'Zones',
|
||||
subtitle: 'Firewall zones',
|
||||
actions: h('button', { class: 'btn btn-primary',
|
||||
'on:click': () => addZoneModal(state) }, 'Add Zone'),
|
||||
'on:click': () => addZone(state), }, 'Add Zone'),
|
||||
}),
|
||||
zoneCards.length
|
||||
? h('div', { class: 'card-grid' }, ...zoneCards)
|
||||
|
||||
Reference in New Issue
Block a user