105 lines
4.9 KiB
JavaScript
105 lines
4.9 KiB
JavaScript
import { html, PageHeader, Badge, Empty, ConfirmDelete, renderGuard, enc, esc, $val, definePage, getModel, MultiSelectModal, QuickModal } from '/static/hoover/index.js?v=8';
|
|
|
|
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',
|
|
},
|
|
refresh: 'firewall',
|
|
});
|
|
|
|
export default definePage({
|
|
init() {
|
|
return {
|
|
firewall: getModel('firewall'),
|
|
};
|
|
},
|
|
render(state) {
|
|
const guard = renderGuard(state.firewall, 'Zones', 'Firewall zones', state.firewall.data?.zones);
|
|
if (guard) return guard;
|
|
|
|
const zones = state.firewall.data?.zones?.available || [];
|
|
const activeZones = state.firewall.data?.zones?.active || {};
|
|
const zoneDetails = {};
|
|
for (const name of zones) {
|
|
const activeIfaces = activeZones[name];
|
|
zoneDetails[name] = { interfaces: Array.isArray(activeIfaces) ? activeIfaces : [] };
|
|
}
|
|
|
|
const zoneCards = Object.entries(zoneDetails).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 html`<div class="card" key=${name} style="position:relative">
|
|
<div style="display:flex;justify-content:space-between;align-items:flex-start">
|
|
<div>
|
|
<h3 style="font-size:16px;color:var(--accent)">${name}</h3>
|
|
<div class="text-muted text-sm" style="margin-bottom:10px">
|
|
${z.target ? 'Target: ' + esc(z.target) : ''}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="text-sm mb-4">
|
|
<div class="text-muted" style="margin-bottom:4px">Interfaces</div>
|
|
${ifacesArr.length
|
|
? ifacesArr.map(i => html`<${Badge} text=${esc(i)} />`)
|
|
: html`<span class="text-muted">None</span>`}
|
|
</div>
|
|
<div class="text-sm mb-4">
|
|
<div class="text-muted" style="margin-bottom:4px">Services</div>
|
|
${svcsArr.length
|
|
? svcsArr.map(s => html`<${Badge} text=${esc(s)} variant="success" />`)
|
|
: html`<span class="text-muted">None</span>`}
|
|
</div>
|
|
<div style="display:flex;gap:6px">
|
|
<button class="btn btn-sm btn-outline"
|
|
onClick=${() => MultiSelectModal({
|
|
title: 'Interfaces: ' + name,
|
|
url: '/api/firewall/zones/' + enc(name) + '/interfaces',
|
|
options: state.firewall.data?.interfaces || [],
|
|
selected: ifacesArr,
|
|
fieldKey: 'interfaces',
|
|
successMsg: 'Interfaces updated',
|
|
refresh: 'firewall',
|
|
})()}>Interfaces</button>
|
|
<button class="btn btn-sm btn-outline"
|
|
onClick=${() => MultiSelectModal({
|
|
title: 'Services: ' + name,
|
|
url: '/api/firewall/zones/' + enc(name) + '/services',
|
|
options: state.firewall.data?.services || [],
|
|
selected: svcsArr,
|
|
fieldKey: 'services',
|
|
successMsg: 'Services updated',
|
|
refresh: 'firewall',
|
|
})()}>Services</button>
|
|
<${ConfirmDelete}
|
|
url=${'/api/firewall/zones/' + enc(name)}
|
|
message=${'Delete zone ' + name + '?'}
|
|
success=${'Zone ' + name + ' deleted'}
|
|
refresh="firewall"
|
|
label="Delete" />
|
|
</div>
|
|
</div>`;
|
|
});
|
|
|
|
return [
|
|
PageHeader({
|
|
title: 'Zones',
|
|
subtitle: 'Firewall zones',
|
|
actions: html`<button class="btn btn-primary"
|
|
onClick=${() => addZone()}>Add Zone</button>`,
|
|
}),
|
|
zoneCards.length
|
|
? html`<div class="card-grid">${zoneCards}</div>`
|
|
: Empty({ text: 'No zones configured. Add a zone to get started.' }),
|
|
];
|
|
},
|
|
});
|