refactor: replace Jinja templates with static frontend pages
This commit is contained in:
@@ -0,0 +1,233 @@
|
||||
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';
|
||||
|
||||
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');
|
||||
}
|
||||
},
|
||||
},
|
||||
],
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
async function load(state) {
|
||||
try {
|
||||
const [zRes, svcRes, ifRes] = await Promise.all([
|
||||
apiFetch('/api/firewall/zones'),
|
||||
apiFetch('/api/firewall/services'),
|
||||
apiFetch('/api/firewall/interfaces'),
|
||||
]);
|
||||
|
||||
if (zRes.ok) {
|
||||
const data = zRes.data || {};
|
||||
const activeZones = data.active || {};
|
||||
const availableZones = data.available || [];
|
||||
|
||||
const detailPromises = availableZones.map(name =>
|
||||
apiFetch('/api/firewall/zones/' + enc(name)).catch(() => null)
|
||||
);
|
||||
const detailResults = await Promise.all(detailPromises);
|
||||
|
||||
const zones = {};
|
||||
for (let i = 0; i < availableZones.length; i++) {
|
||||
const name = availableZones[i];
|
||||
const detail = detailResults[i];
|
||||
if (detail && detail.ok) {
|
||||
zones[name] = detail.data;
|
||||
const activeIfaces = activeZones[name];
|
||||
if (Array.isArray(activeIfaces)) {
|
||||
zones[name].interfaces = activeIfaces;
|
||||
}
|
||||
}
|
||||
}
|
||||
state.zones = zones;
|
||||
}
|
||||
|
||||
if (svcRes.ok) state.services = svcRes.data || [];
|
||||
if (ifRes.ok) state.interfaces = ifRes.data || [];
|
||||
} catch (e) {
|
||||
state.error = String(e);
|
||||
}
|
||||
state.loading = false;
|
||||
}
|
||||
|
||||
export default definePage({
|
||||
init() {
|
||||
return { zones: {}, services: [], interfaces: [], loading: true, error: null };
|
||||
},
|
||||
subscribe: ['firewall'],
|
||||
load,
|
||||
render(state) {
|
||||
if (state.loading) {
|
||||
return [
|
||||
PageHeader({ title: 'Zones', subtitle: 'Firewall zone management' }),
|
||||
h('div', { class: 'card', key: 'loading' },
|
||||
h('div', { class: 'card-body loading' }, 'Loading...'),
|
||||
),
|
||||
];
|
||||
}
|
||||
|
||||
if (state.error) {
|
||||
return [
|
||||
PageHeader({ title: 'Zones' }),
|
||||
h('div', { class: 'card', key: 'error' },
|
||||
h('div', { class: 'card-body error-msg' }, state.error),
|
||||
),
|
||||
];
|
||||
}
|
||||
|
||||
const zoneCards = Object.entries(state.zones || []).map(([name, zdata]) => {
|
||||
const z = typeof zdata === 'object' ? zdata : {};
|
||||
const ifacesArr = Array.isArray(z.interfaces) ? z.interfaces : [];
|
||||
const svcsArr = Array.isArray(z.services) ? z.services : [];
|
||||
return h('div', { class: 'card', key: name, style: 'position:relative;' },
|
||||
h('div', { style: 'display:flex;justify-content:space-between;align-items:flex-start;' },
|
||||
h('div', null,
|
||||
h('h3', { style: 'font-size:16px;color:var(--accent);' }, name),
|
||||
h('div', { class: 'text-muted text-sm', style: 'margin-bottom:10px;' },
|
||||
z.target ? 'Target: ' + esc(z.target) : '',
|
||||
),
|
||||
),
|
||||
),
|
||||
h('div', { class: 'text-sm mb-4' },
|
||||
h('div', { class: 'text-muted', style: 'margin-bottom:4px;' }, 'Interfaces'),
|
||||
ifacesArr.length
|
||||
? ifacesArr.map(i => Badge({ text: esc(i) }))
|
||||
: h('span', { class: 'text-muted' }, 'None'),
|
||||
),
|
||||
h('div', { class: 'text-sm mb-4' },
|
||||
h('div', { class: 'text-muted', style: 'margin-bottom:4px;' }, 'Services'),
|
||||
svcsArr.length
|
||||
? svcsArr.map(s => Badge({ text: esc(s), variant: 'success' }))
|
||||
: h('span', { class: 'text-muted' }, 'None'),
|
||||
),
|
||||
h('div', { style: 'display:flex;gap:6px;' },
|
||||
h('button', { class: 'btn btn-sm btn-outline',
|
||||
'on:click': () => zoneIfaceModal(name, 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'),
|
||||
),
|
||||
);
|
||||
});
|
||||
|
||||
return [
|
||||
PageHeader({
|
||||
title: 'Zones',
|
||||
subtitle: 'Firewall zones',
|
||||
actions: h('button', { class: 'btn btn-primary',
|
||||
'on:click': () => addZoneModal(state) }, 'Add Zone'),
|
||||
}),
|
||||
zoneCards.length
|
||||
? h('div', { class: 'card-grid' }, ...zoneCards)
|
||||
: Empty({ text: 'No zones configured. Add a zone to get started.' }),
|
||||
];
|
||||
},
|
||||
});
|
||||
Reference in New Issue
Block a user