80 lines
3.1 KiB
JavaScript
80 lines
3.1 KiB
JavaScript
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';
|
|
|
|
const logTabs = [
|
|
{ key: 'journal', label: 'Journal', url: '/api/logs/journal' },
|
|
{ key: 'nginx-access', label: 'Nginx Access', url: '/api/logs/nginx/access' },
|
|
{ key: 'nginx-error', label: 'Nginx Error', url: '/api/logs/nginx/error' },
|
|
{ key: 'dnsmasq', label: 'Dnsmasq', url: '/api/logs/dnsmasq' },
|
|
{ key: 'app', label: 'App', url: '/api/logs/app' },
|
|
];
|
|
|
|
|
|
async function fetchLog(state, url) {
|
|
state.loading = true;
|
|
state.error = null;
|
|
try {
|
|
const res = await fetch(url);
|
|
const text = await res.text();
|
|
state.lines = text.split('\n').filter(l => l.length > 0);
|
|
} catch (e) {
|
|
state.error = String(e);
|
|
}
|
|
state.loading = false;
|
|
}
|
|
|
|
export default definePage({
|
|
init() {
|
|
return { activeTab: 'journal', lines: [], loading: false, error: null };
|
|
},
|
|
subscribe: [],
|
|
async load(state) {
|
|
const tab = logTabs.find(t => t.key === state.activeTab) || logTabs[0];
|
|
await fetchLog(state, tab.url);
|
|
},
|
|
onUnmount(state) {
|
|
state.lines = [];
|
|
},
|
|
render(state) {
|
|
const tab = logTabs.find(t => t.key === state.activeTab) || logTabs[0];
|
|
|
|
const lineVnodes = state.lines.map((line, i) =>
|
|
h('div', { class: 'log-line', key: i }, esc(line))
|
|
);
|
|
|
|
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))
|
|
),
|
|
h('div', { class: 'card', key: 'log-card' },
|
|
h('div', { class: 'card-header' },
|
|
h('span', null, tab.label),
|
|
h('button', {
|
|
class: 'btn btn-sm btn-outline',
|
|
style: 'float:right;',
|
|
'on:click': async () => {
|
|
await fetchLog(state, tab.url);
|
|
},
|
|
}, '\u21BB')
|
|
),
|
|
h('div', { class: 'card-body log-body' },
|
|
state.loading
|
|
? h('div', { class: 'loading' }, 'Loading...')
|
|
: state.error
|
|
? h('div', { class: 'error-msg' }, state.error)
|
|
: lineVnodes.length > 0
|
|
? h('pre', null, lineVnodes)
|
|
: h('div', { class: 'text-muted text-sm' }, 'No log lines available')
|
|
)
|
|
),
|
|
];
|
|
},
|
|
});
|