mteehan/vacuum-wall
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: modernize frontend with hoover framework components and docs

Browse Source 
- 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:
Mike Teehan
2026-06-21 04:29:27 +00:00
parent b8f20e99d9
commit 633505e7dc
29 changed files with 2558 additions and 1414 deletions
Download Patch File Download Diff File Expand all files Collapse all files
webui/static/pages/logs.js
+56 -34
View File
@@ -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')
),