1029 lines
52 KiB
JavaScript
1029 lines
52 KiB
JavaScript
'use strict';
|
||
/* labdeck frontend: vanilla JS, no build step. */
|
||
|
||
// ------------------------------------------------------------------ utils
|
||
const $ = (s, r = document) => r.querySelector(s);
|
||
const enc = new TextEncoder();
|
||
const VIEWS = [['dashboard', 'dashboard'], ['hosts', 'hosts'], ['terminals', 'terminals'], ['events', 'events'], ['settings', 'settings']];
|
||
const THEMES = [['slate', '#ff9e3d'], ['amber', '#ffb000'], ['green', '#4dff8f'], ['paper', '#b4540a']];
|
||
const BLOCKS = '▁▂▃▄▅▆▇█';
|
||
|
||
function h(tag, attrs, ...kids) {
|
||
const el = document.createElement(tag);
|
||
for (const [k, v] of Object.entries(attrs || {})) {
|
||
if (v == null || v === false) continue;
|
||
if (k === 'class') el.className = v;
|
||
else if (k === 'on') for (const [ev, fn] of Object.entries(v)) el.addEventListener(ev, fn);
|
||
else if (k === 'for') el.htmlFor = v;
|
||
else if (k === 'style' || k.startsWith('data-') || k.startsWith('aria-')) el.setAttribute(k, v === true ? '' : v);
|
||
else if (k in el) el[k] = v;
|
||
else el.setAttribute(k, v === true ? '' : v);
|
||
}
|
||
for (const kid of kids.flat(Infinity)) {
|
||
if (kid == null || kid === false) continue;
|
||
el.append(kid.nodeType ? kid : document.createTextNode(String(kid)));
|
||
}
|
||
return el;
|
||
}
|
||
|
||
async function api(method, path, body) {
|
||
const opt = { method, headers: { 'X-Requested-With': 'labdeck' } };
|
||
if (body !== undefined) {
|
||
opt.headers['Content-Type'] = 'application/json';
|
||
opt.body = JSON.stringify(body);
|
||
}
|
||
const r = await fetch(path, opt);
|
||
let data = null;
|
||
try { data = await r.json(); } catch { /* no body */ }
|
||
if (r.status === 401 && !path.startsWith('/api/auth/')) {
|
||
location.reload();
|
||
throw new Error('session expired');
|
||
}
|
||
if (!r.ok) throw new Error((data && data.error) || `HTTP ${r.status}`);
|
||
return data;
|
||
}
|
||
|
||
function toast(msg, isErr) {
|
||
const t = h('div', { class: 'toast' + (isErr ? ' err' : ''), role: isErr ? 'alert' : 'status' }, msg);
|
||
$('#toasts').append(t);
|
||
setTimeout(() => t.remove(), isErr ? 7000 : 3500);
|
||
}
|
||
const fail = e => toast(e.message || String(e), true);
|
||
|
||
function dur(s) {
|
||
s = Math.max(0, Math.floor(s));
|
||
if (s < 90) return s + 's';
|
||
if (s < 5400) return Math.floor(s / 60) + 'm';
|
||
if (s < 172800) return Math.floor(s / 3600) + 'h ' + Math.floor((s % 3600) / 60) + 'm';
|
||
return Math.floor(s / 86400) + 'd ' + Math.floor((s % 86400) / 3600) + 'h';
|
||
}
|
||
const now = () => Math.floor(Date.now() / 1000);
|
||
const ago = ts => (ts ? dur(now() - ts) + ' ago' : 'never');
|
||
const fmtTime = ts => new Date(ts * 1000).toLocaleString();
|
||
|
||
// ------------------------------------------------------------------ state
|
||
const S = {
|
||
ready: false, view: 'dashboard', version: '',
|
||
services: [], hosts: [], snippets: [], events: [],
|
||
filter: '', hostFilter: '', open: new Set(), hist: {},
|
||
sessions: [], active: null, svcSig: '', pollTimer: null,
|
||
};
|
||
|
||
function applyTheme(t) {
|
||
if (!t) { try { t = localStorage.getItem('labdeck-theme'); } catch { /* ignore */ } }
|
||
if (!THEMES.some(x => x[0] === t)) t = 'slate';
|
||
document.documentElement.setAttribute('data-theme', t);
|
||
try { localStorage.setItem('labdeck-theme', t); } catch { /* ignore */ }
|
||
for (const s of S.sessions) if (s.term) s.term.options.theme = xtermTheme();
|
||
}
|
||
const currentTheme = () => document.documentElement.getAttribute('data-theme');
|
||
|
||
// ------------------------------------------------------------------ boot / auth
|
||
async function boot() {
|
||
applyTheme();
|
||
let st;
|
||
try { st = await api('GET', '/api/auth/state'); } catch (e) {
|
||
$('#app').textContent = 'Cannot reach the labdeck server: ' + e.message;
|
||
return;
|
||
}
|
||
S.version = st.version;
|
||
if (!st.initialized) return renderAuth('setup');
|
||
if (!st.authenticated) return renderAuth('login');
|
||
startApp();
|
||
}
|
||
|
||
function renderAuth(mode) {
|
||
const setup = mode === 'setup';
|
||
const pw = h('input', { type: 'password', id: 'pw', autocomplete: setup ? 'new-password' : 'current-password', autofocus: true });
|
||
const pw2 = setup ? h('input', { type: 'password', id: 'pw2', autocomplete: 'new-password' }) : null;
|
||
const err = h('div', { class: 'err', role: 'alert' });
|
||
const btn = h('button', { class: 'btn primary', type: 'submit' }, setup ? 'Create vault' : 'Unlock');
|
||
const form = h('form', {
|
||
on: {
|
||
submit: async e => {
|
||
e.preventDefault();
|
||
err.textContent = '';
|
||
if (setup) {
|
||
if (pw.value.length < 10) { err.textContent = 'Use at least 10 characters.'; return; }
|
||
if (pw.value !== pw2.value) { err.textContent = 'The two passwords do not match.'; return; }
|
||
}
|
||
btn.disabled = true;
|
||
btn.textContent = 'Deriving key...';
|
||
try {
|
||
await api('POST', setup ? '/api/auth/setup' : '/api/auth/login', { password: pw.value });
|
||
startApp();
|
||
} catch (ex) {
|
||
err.textContent = ex.message;
|
||
btn.disabled = false;
|
||
btn.textContent = setup ? 'Create vault' : 'Unlock';
|
||
pw.select();
|
||
}
|
||
},
|
||
},
|
||
},
|
||
h('label', null, h('span', null, 'master password'), pw),
|
||
setup ? h('label', null, h('span', null, 'repeat password'), pw2) : null,
|
||
err,
|
||
btn,
|
||
);
|
||
$('#app').replaceChildren(h('div', { class: 'login' },
|
||
h('h1', null, 'lab', h('b', null, 'deck'), ' ' + S.version),
|
||
h('p', null, setup
|
||
? 'First start. Choose a master password. It encrypts every SSH password and key stored here, and it cannot be recovered if you lose it.'
|
||
: 'Enter the master password to unlock the vault.'),
|
||
form));
|
||
}
|
||
|
||
async function startApp() {
|
||
buildShell();
|
||
S.ready = true;
|
||
await Promise.all([loadServices(), loadHosts(), loadSnippets()]).catch(fail);
|
||
const v = (location.hash || '').slice(1);
|
||
setView(VIEWS.some(x => x[0] === v) ? v : 'dashboard');
|
||
S.pollTimer = setInterval(() => { loadServices().catch(() => {}); }, 5000);
|
||
setInterval(tickClock, 1000);
|
||
updateStatus();
|
||
}
|
||
|
||
// ------------------------------------------------------------------ shell
|
||
function buildShell() {
|
||
const tabs = h('nav', { class: 'tabs', id: 'tabs', 'aria-label': 'Views' });
|
||
VIEWS.forEach(([id, label], i) => {
|
||
tabs.append(h('button', { 'data-view': id, on: { click: () => setView(id) } },
|
||
h('kbd', null, 'alt+' + (i + 1)), label, id === 'terminals' ? h('span', { class: 'count', id: 'termcount' }) : null));
|
||
});
|
||
const panes = h('div', { class: 'panes', id: 'panes' });
|
||
$('#app').replaceChildren(
|
||
h('header', { class: 'top' },
|
||
h('div', { class: 'brand' }, 'lab', h('b', null, 'deck')),
|
||
tabs,
|
||
h('div', { class: 'tools' },
|
||
h('button', { class: 'btn ghost sm', title: 'Command palette (Ctrl+K or Alt+K)', on: { click: () => openPalette() } }, 'commands'),
|
||
h('button', { class: 'btn ghost sm', title: 'Lock the vault and log out', on: { click: lock } }, 'lock')),
|
||
),
|
||
h('main', null,
|
||
h('div', { id: 'page' }),
|
||
h('div', { id: 'termview' }, h('div', { class: 'termbar', id: 'termbar' }), panes)),
|
||
h('footer', { class: 'status', id: 'status' }),
|
||
);
|
||
new ResizeObserver(() => fitActive()).observe(panes);
|
||
}
|
||
|
||
async function lock() {
|
||
if (S.sessions.some(s => s.status === 'connected')
|
||
&& !(await confirmBox('Open SSH sessions will be closed. Lock anyway?', 'Lock'))) return;
|
||
try { await api('POST', '/api/auth/logout'); } catch { /* ignore */ }
|
||
location.reload();
|
||
}
|
||
|
||
function setView(v) {
|
||
S.view = v;
|
||
history.replaceState(null, '', '#' + v);
|
||
document.querySelectorAll('#tabs button').forEach(b => b.classList.toggle('on', b.dataset.view === v));
|
||
const page = $('#page'), tv = $('#termview');
|
||
tv.classList.toggle('show', v === 'terminals');
|
||
page.classList.toggle('hidden', v === 'terminals');
|
||
if (v === 'terminals') { renderTerminals(); return; }
|
||
page.scrollTop = 0;
|
||
({ dashboard: buildDashboard, hosts: buildHosts, events: buildEvents, settings: buildSettings })[v]();
|
||
}
|
||
|
||
// ------------------------------------------------------------------ data loading
|
||
async function loadServices() {
|
||
const d = await api('GET', '/api/services');
|
||
const sig = JSON.stringify(d);
|
||
S.services = d;
|
||
if (sig !== S.svcSig) {
|
||
S.svcSig = sig;
|
||
if (S.view === 'dashboard') updateDashboard();
|
||
updateStatus();
|
||
}
|
||
}
|
||
async function loadHosts() { S.hosts = await api('GET', '/api/hosts'); }
|
||
async function loadSnippets() { S.snippets = await api('GET', '/api/snippets'); }
|
||
|
||
// ------------------------------------------------------------------ status bar
|
||
function updateStatus() {
|
||
const el = $('#status');
|
||
if (!el) return;
|
||
const act = S.services.filter(s => s.enabled);
|
||
const up = act.filter(s => s.live.status === 'up').length;
|
||
const down = act.filter(s => s.live.status === 'down').length;
|
||
const lat = act.map(s => s.live.latency_ms).filter(x => x != null && x >= 0);
|
||
const avg = lat.length ? Math.round(lat.reduce((a, b) => a + b, 0) / lat.length) : null;
|
||
const n = S.sessions.filter(s => s.status === 'connected').length;
|
||
el.replaceChildren(...[
|
||
h('span', { class: 'up' }, '● ' + up + ' up'),
|
||
h('span', { class: down ? 'down' : 'dim' }, (down ? '● ' : '○ ') + down + ' down'),
|
||
avg != null ? h('span', { class: 'hide-s' }, 'avg ' + avg + ' ms') : null,
|
||
h('span', { class: 'grow' }),
|
||
n ? h('span', { class: 'hide-s' }, n + ' ssh session' + (n > 1 ? 's' : '')) : null,
|
||
h('span', { class: 'hide-s' }, 'vault unlocked'),
|
||
h('span', { id: 'clock' }, new Date().toLocaleTimeString()),
|
||
].filter(Boolean));
|
||
const tc = $('#termcount');
|
||
if (tc) tc.textContent = S.sessions.length ? String(S.sessions.length) : '';
|
||
document.title = down ? `(${down} down) labdeck` : 'labdeck';
|
||
}
|
||
function tickClock() { const c = $('#clock'); if (c) c.textContent = new Date().toLocaleTimeString(); }
|
||
|
||
// ------------------------------------------------------------------ modal / confirm
|
||
const modals = [];
|
||
function openModal(title, bodyNodes, footerNodes, opts = {}) {
|
||
const prev = document.activeElement;
|
||
const box = h('div', { class: 'modal', role: 'dialog', 'aria-modal': 'true', 'aria-label': title, style: opts.wide ? 'max-width:760px' : null },
|
||
h('header', null, h('h3', null, title), h('button', { class: 'btn ghost sm', type: 'button', 'aria-label': 'Close', on: { click: closeModal } }, 'esc')),
|
||
bodyNodes,
|
||
footerNodes);
|
||
const ov = h('div', { class: 'overlay', on: { mousedown: e => { if (e.target === ov) closeModal(); } } }, box);
|
||
document.body.append(ov);
|
||
modals.push({ ov, prev });
|
||
const first = box.querySelector('input:not([type=hidden]), textarea, select');
|
||
if (first) first.focus();
|
||
return ov;
|
||
}
|
||
function closeModal() {
|
||
const m = modals.pop();
|
||
if (!m) return;
|
||
m.ov.remove();
|
||
if (m.prev && m.prev.focus && document.contains(m.prev)) m.prev.focus();
|
||
}
|
||
function confirmBox(message, okLabel = 'Confirm') {
|
||
return new Promise(res => {
|
||
let done = false, ov = null;
|
||
const finish = v => {
|
||
if (done) return;
|
||
done = true;
|
||
if (ov && document.contains(ov)) closeModal();
|
||
res(v);
|
||
};
|
||
const ok = h('button', { class: 'btn primary', type: 'button', on: { click: () => finish(true) } }, okLabel);
|
||
ov = openModal('Please confirm',
|
||
h('div', { class: 'body' }, h('div', null, message)),
|
||
h('footer', null, h('button', { class: 'btn', type: 'button', on: { click: () => finish(false) } }, 'Cancel'), ok));
|
||
ok.focus();
|
||
// closed from outside (Escape, click on the backdrop): resolve as "no"
|
||
const mo = new MutationObserver(() => { if (!document.contains(ov)) { mo.disconnect(); finish(false); } });
|
||
mo.observe(document.body, { childList: true });
|
||
});
|
||
}
|
||
|
||
/** fields: array of field specs, or arrays of specs (rendered side by side). */
|
||
function formModal({ title, fields, values, submitLabel = 'Save', onSubmit, extra = [], wide }) {
|
||
const inputs = {};
|
||
const rows = [];
|
||
const err = h('div', { class: 'form-error', role: 'alert' });
|
||
|
||
function build(f) {
|
||
const id = 'f_' + f.key;
|
||
let input;
|
||
const v = values[f.key];
|
||
if (f.type === 'select') {
|
||
input = h('select', { id }, f.options.map(([val, lab]) => h('option', { value: String(val), selected: String(v ?? '') === String(val) }, lab)));
|
||
} else if (f.type === 'textarea') {
|
||
input = h('textarea', { id, rows: f.rows || 3, placeholder: f.placeholder || '', spellcheck: false, value: v ?? '' });
|
||
} else if (f.type === 'checkbox') {
|
||
input = h('input', { id, type: 'checkbox', checked: !!v });
|
||
} else {
|
||
input = h('input', { id, type: f.type || 'text', placeholder: f.placeholder || '', value: v ?? '', autocomplete: f.type === 'password' ? 'new-password' : 'off', spellcheck: false });
|
||
}
|
||
inputs[f.key] = { input, spec: f };
|
||
const extraEl = f.file ? h('div', null, h('label', { class: 'btn sm' }, 'Load from file',
|
||
h('input', { type: 'file', class: 'hidden', on: { change: async e => { const file = e.target.files[0]; if (file) { input.value = await file.text(); update(); } } } }))) : null;
|
||
const root = f.type === 'checkbox'
|
||
? h('div', { class: 'field check' }, input, h('label', { for: id }, f.label), f.hint ? h('span', { class: 'hint' }, f.hint) : null)
|
||
: h('div', { class: 'field' }, h('label', { for: id }, f.label), input, extraEl, f.hint ? h('div', { class: 'hint' }, f.hint) : null);
|
||
inputs[f.key].root = root;
|
||
return root;
|
||
}
|
||
for (const f of fields) {
|
||
if (Array.isArray(f)) rows.push(h('div', { class: 'grid2' }, f.map(build)));
|
||
else rows.push(build(f));
|
||
}
|
||
|
||
function read() {
|
||
const out = {};
|
||
for (const [k, { input, spec }] of Object.entries(inputs)) {
|
||
if (spec.type === 'checkbox') out[k] = input.checked;
|
||
else if (spec.type === 'number') out[k] = Number(input.value) || 0;
|
||
else if (spec.parse === 'int-or-null') out[k] = input.value === '' ? null : Number(input.value);
|
||
else out[k] = input.value;
|
||
}
|
||
return out;
|
||
}
|
||
let opts_onChange = null;
|
||
function update() {
|
||
const cur = read();
|
||
for (const { root, spec } of Object.values(inputs)) {
|
||
const vis = spec.show ? spec.show(cur) : true;
|
||
root.classList.toggle('hidden', !vis);
|
||
// a hidden grid cell must not leave an empty row behind
|
||
}
|
||
for (const r of rows) {
|
||
if (r.classList.contains('grid2')) r.classList.toggle('hidden', [...r.children].every(c => c.classList.contains('hidden')));
|
||
}
|
||
if (opts_onChange) opts_onChange(cur, inputs);
|
||
}
|
||
const save = h('button', { class: 'btn primary', type: 'submit' }, submitLabel);
|
||
const form = h('form', {
|
||
on: {
|
||
input: update, change: update,
|
||
submit: async e => {
|
||
e.preventDefault();
|
||
err.textContent = '';
|
||
save.disabled = true;
|
||
try { await onSubmit(read()); closeModal(); } catch (ex) { err.textContent = ex.message; save.disabled = false; }
|
||
},
|
||
},
|
||
}, h('div', { class: 'body' }, rows, err),
|
||
h('footer', null, h('div', { class: 'grow' }, extra), h('button', { class: 'btn', type: 'button', on: { click: closeModal } }, 'Cancel'), save));
|
||
openModal(title, form, null, { wide });
|
||
update();
|
||
const first = form.querySelector('input:not([type=hidden]):not(.hidden), textarea, select');
|
||
if (first) first.focus();
|
||
return { update, inputs, setOnChange: fn => { opts_onChange = fn; } };
|
||
}
|
||
|
||
// ------------------------------------------------------------------ dashboard
|
||
function buildDashboard() {
|
||
const filter = h('input', {
|
||
type: 'search', id: 'filter', placeholder: 'filter services ( / )', value: S.filter, 'aria-label': 'Filter services',
|
||
on: { input: e => { S.filter = e.target.value; updateDashboard(); } },
|
||
});
|
||
$('#page').replaceChildren(
|
||
h('div', { class: 'prompt' }, h('span', { class: 'ps1' }, 'labdeck', h('i', null, ':'), '~', h('i', null, '$')), h('span', null, 'watch services'), h('span', { class: 'cursor' })),
|
||
h('div', { class: 'summary', id: 'summary' }),
|
||
h('div', { class: 'toolbar' }, filter,
|
||
h('button', { class: 'btn', on: { click: () => editService(null) } }, 'Add service'),
|
||
h('button', { class: 'btn', on: { click: checkAll } }, 'Check all now')),
|
||
h('div', { id: 'list' }));
|
||
updateDashboard();
|
||
}
|
||
|
||
function svcClass(s) {
|
||
const l = s.live || {};
|
||
if (!s.enabled || l.status === 'paused') return 's-paused';
|
||
if (l.status === 'up') return l.fails > 0 ? 's-retry' : 's-up';
|
||
if (l.status === 'down') return 's-down';
|
||
return 's-unk';
|
||
}
|
||
|
||
function sparkNodes(arr) {
|
||
if (!arr || !arr.length) return h('span', { class: 'dim' }, 'waiting for data');
|
||
const vals = arr.filter(v => v != null);
|
||
const max = Math.max(1, ...vals);
|
||
const out = [];
|
||
const pad = 30 - arr.length;
|
||
if (pad > 0) out.push(h('span', { class: 'dim' }, '·'.repeat(pad)));
|
||
let run = '';
|
||
const flush = () => { if (run) { out.push(h('span', { class: 'ok' }, run)); run = ''; } };
|
||
for (const v of arr) {
|
||
if (v == null) { flush(); out.push(h('span', { class: 'x' }, '×')); }
|
||
else run += BLOCKS[Math.min(7, Math.floor((v / max) * 7.999))];
|
||
}
|
||
flush();
|
||
return out;
|
||
}
|
||
|
||
function updateDashboard() {
|
||
const list = $('#list');
|
||
if (!list || S.view !== 'dashboard') return;
|
||
const focusId = document.activeElement && document.activeElement.dataset ? document.activeElement.dataset.id : null;
|
||
|
||
const q = S.filter.trim().toLowerCase();
|
||
const items = S.services.filter(s => !q || (s.name + ' ' + s.address + ' ' + s.grp + ' ' + s.kind).toLowerCase().includes(q));
|
||
|
||
const act = S.services.filter(s => s.enabled);
|
||
const cnt = k => act.filter(s => s.live.status === k).length;
|
||
const sum = $('#summary');
|
||
sum.replaceChildren(
|
||
h('span', { class: 'up' }, cnt('up') + ' up'),
|
||
h('span', { class: cnt('down') ? 'down' : 'dim' }, cnt('down') + ' down'),
|
||
h('span', { class: 'dim' }, cnt('unknown') + ' pending'),
|
||
h('span', { class: 'dim' }, (S.services.length - act.length) + ' paused'));
|
||
|
||
if (!S.services.length) {
|
||
list.replaceChildren(h('div', { class: 'empty' },
|
||
h('p', null, 'No services yet. Add a web address, a host:port, or a hostname to start health checks.'),
|
||
h('button', { class: 'btn primary', on: { click: () => editService(null) } }, 'Add your first service')));
|
||
return;
|
||
}
|
||
if (!items.length) { list.replaceChildren(h('div', { class: 'empty' }, 'Nothing matches "' + S.filter + '".')); return; }
|
||
|
||
const groups = new Map();
|
||
for (const s of items) {
|
||
const g = s.grp || 'ungrouped';
|
||
if (!groups.has(g)) groups.set(g, []);
|
||
groups.get(g).push(s);
|
||
}
|
||
const frag = [];
|
||
for (const [g, arr] of groups) {
|
||
frag.push(h('section', { class: 'group' }, h('h2', null, g), arr.map(svcBlock)));
|
||
}
|
||
list.replaceChildren(...frag);
|
||
if (focusId) { const el = list.querySelector(`[data-id="${focusId}"]`); if (el) el.focus(); }
|
||
for (const id of S.open) refreshHist(id);
|
||
}
|
||
|
||
function statusText(s) {
|
||
const l = s.live;
|
||
if (!s.enabled || l.status === 'paused') return 'paused';
|
||
if (l.status === 'up') return 'up ' + dur(now() - l.since);
|
||
if (l.status === 'down') return 'down ' + dur(now() - l.since);
|
||
return 'pending';
|
||
}
|
||
|
||
function svcBlock(s) {
|
||
const l = s.live;
|
||
const isOpen = S.open.has(s.id);
|
||
const toggle = () => { isOpen ? S.open.delete(s.id) : S.open.add(s.id); updateDashboard(); };
|
||
const lat = l.status === 'up' && l.latency_ms != null ? l.latency_ms + ' ms' : '-';
|
||
const up = s.uptime_24h;
|
||
const upCls = up == null ? 'dim' : up >= 99 ? 'up' : up >= 95 ? 'warn' : 'down';
|
||
const tls = l.tls_days != null && l.tls_days <= 14
|
||
? h('span', { class: l.tls_days <= 7 ? 'down' : 'warn' }, ' tls ' + Math.max(0, l.tls_days) + 'd') : null;
|
||
const host = s.host_id ? S.hosts.find(x => x.id === s.host_id) : null;
|
||
const row = h('div', {
|
||
class: `svc ${svcClass(s)}${isOpen ? ' open' : ''}`, tabindex: 0, role: 'button', 'aria-expanded': String(isOpen), 'data-id': s.id,
|
||
on: { click: toggle, keydown: e => { if (e.target === row && (e.key === 'Enter' || e.key === ' ')) { e.preventDefault(); toggle(); } } },
|
||
},
|
||
h('span', { class: 'led', 'aria-hidden': 'true' }, !s.enabled ? '○' : '●'),
|
||
h('span', { class: 'name trunc' }, s.name),
|
||
h('span', { class: 'addr trunc' }, s.address, tls),
|
||
h('span', { class: 'right' }, lat),
|
||
h('span', { class: 'right ' + upCls }, up == null ? '-' : up.toFixed(up >= 99.95 ? 0 : 1) + '%'),
|
||
h('span', { class: 'spark', 'aria-hidden': 'true' }, sparkNodes(s.spark)),
|
||
h('span', { class: 'since dim' }, statusText(s)),
|
||
h('span', { class: 'acts', on: { click: e => e.stopPropagation() } },
|
||
h('button', { class: 'btn sm', title: 'Run the check now', on: { click: () => checkNow(s.id) } }, 'check'),
|
||
host ? h('button', { class: 'btn sm', title: 'Open SSH terminal on ' + host.name, on: { click: () => connectHost(host) } }, 'ssh') : null,
|
||
h('button', { class: 'btn sm', on: { click: () => editService(s) } }, 'edit')),
|
||
);
|
||
if (!isOpen) return row;
|
||
|
||
const dl = h('dl', null);
|
||
const add = (k, v) => { if (v != null && v !== '') dl.append(h('dt', null, k), h('dd', null, v)); };
|
||
add('status', statusText(s) + (l.fails ? ` (${l.fails} failed check${l.fails > 1 ? 's' : ''} in a row)` : ''));
|
||
add('last check', l.last_check ? ago(l.last_check) + (l.code ? ` (HTTP ${l.code})` : '') : 'not yet');
|
||
if (l.error) dl.append(h('dt', null, 'error'), h('dd', { class: 'down' }, l.error));
|
||
const isHttp = s.kind === 'http';
|
||
add('target', isHttp ? h('a', { href: /^https?:\/\//.test(s.address) ? s.address : 'http://' + s.address, target: '_blank', rel: 'noopener noreferrer' }, s.address) : `${s.kind} ${s.address}`);
|
||
add('schedule', `every ${s.interval_s}s, timeout ${s.timeout_s}s, down after ${s.down_after} failure${s.down_after > 1 ? 's' : ''}`);
|
||
if (isHttp) add('expects', 'status ' + s.expect + (s.keyword ? `, body contains "${s.keyword}"` : '') + (s.verify_tls ? '' : ', certificate not verified'));
|
||
if (l.tls_days != null) add('certificate', (l.tls_days >= 0 ? `expires in ${l.tls_days} days` : `expired ${-l.tls_days} days ago`));
|
||
if (host) add('ssh host', host.name);
|
||
add('notes', s.notes);
|
||
const strip = h('div', { class: 'strip', id: 'strip-' + s.id, 'aria-label': 'Last 24 hours' });
|
||
drawStrip(strip, S.hist[s.id]);
|
||
const detail = h('div', { class: 'detail' }, dl, strip,
|
||
h('div', { class: 'strip-legend' }, h('span', null, '24h ago'), h('span', null, 'now')));
|
||
return h('div', null, row, detail);
|
||
}
|
||
|
||
async function refreshHist(id) {
|
||
const c = S.hist[id];
|
||
if (c && now() - c.at < 30) return;
|
||
try {
|
||
const d = await api('GET', `/api/services/${id}/history?hours=24`);
|
||
S.hist[id] = { at: now(), points: d.points };
|
||
const el = $('#strip-' + id);
|
||
if (el) drawStrip(el, S.hist[id]);
|
||
} catch { /* ignore */ }
|
||
}
|
||
|
||
function drawStrip(el, hist) {
|
||
const N = 96, span = 86400, t0 = now() - span;
|
||
const buckets = Array.from({ length: N }, () => ({ ok: 0, bad: 0 }));
|
||
if (hist) for (const [ts, ok] of hist.points) {
|
||
const i = Math.min(N - 1, Math.max(0, Math.floor(((ts - t0) / span) * N)));
|
||
ok ? buckets[i].ok++ : buckets[i].bad++;
|
||
}
|
||
el.replaceChildren(...buckets.map((b, i) => {
|
||
const total = b.ok + b.bad;
|
||
const cls = !total ? '' : b.bad === 0 ? 'g' : b.bad / total > 0.5 ? 'r' : 'y';
|
||
const label = new Date((t0 + (i * span) / N) * 1000).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
|
||
return h('i', { class: cls, title: total ? `${label}: ${b.ok} ok, ${b.bad} failed` : label + ': no data' });
|
||
}));
|
||
}
|
||
|
||
async function checkNow(id) {
|
||
try {
|
||
const out = await api('POST', `/api/services/${id}/check`);
|
||
const i = S.services.findIndex(s => s.id === id);
|
||
if (i >= 0) S.services[i] = out;
|
||
S.svcSig = '';
|
||
delete S.hist[id];
|
||
updateDashboard();
|
||
updateStatus();
|
||
} catch (e) { fail(e); }
|
||
}
|
||
async function checkAll() {
|
||
try {
|
||
const r = await api('POST', '/api/check-all');
|
||
toast(`Running ${r.started} check${r.started === 1 ? '' : 's'}.`);
|
||
setTimeout(() => loadServices().catch(() => {}), 1500);
|
||
} catch (e) { fail(e); }
|
||
}
|
||
|
||
function editService(s) {
|
||
const isNew = !s;
|
||
const v = s ? { ...s } : { kind: 'http', interval_s: 30, timeout_s: 5, expect: '200-399', verify_tls: true, down_after: 2, enabled: true };
|
||
const hostOpts = [['', 'none'], ...S.hosts.map(x => [x.id, `${x.name} (${x.username}@${x.address})`])];
|
||
const ph = { http: 'https://nas.lan:5001 or 192.168.1.10:8080', tcp: '192.168.1.10:22', ping: '192.168.1.1' };
|
||
const fm = formModal({
|
||
title: isNew ? 'Add service' : 'Edit service',
|
||
values: v, wide: true,
|
||
submitLabel: isNew ? 'Add service' : 'Save changes',
|
||
fields: [
|
||
[{ key: 'name', label: 'Name', placeholder: 'Gitea' }, { key: 'grp', label: 'Group', placeholder: 'infrastructure' }],
|
||
[{ key: 'kind', label: 'Check type', type: 'select', options: [['http', 'HTTP(S) request'], ['tcp', 'TCP port'], ['ping', 'Ping']] },
|
||
{ key: 'address', label: 'Address', placeholder: ph[v.kind] }],
|
||
[{ key: 'interval_s', label: 'Check every (seconds)', type: 'number' }, { key: 'timeout_s', label: 'Timeout (seconds)', type: 'number' }],
|
||
[{ key: 'expect', label: 'Accepted status codes', placeholder: '200-399', show: x => x.kind === 'http', hint: 'For example 200, 200-299 or 200,204,301-302.' },
|
||
{ key: 'down_after', label: 'Mark as down after N failures', type: 'number' }],
|
||
{ key: 'keyword', label: 'Page must contain (optional)', show: x => x.kind === 'http', placeholder: 'Sign in' },
|
||
{ key: 'verify_tls', label: 'Verify TLS certificate', type: 'checkbox', show: x => x.kind === 'http', hint: 'Turn off for self-signed certificates.' },
|
||
{ key: 'host_id', label: 'Linked SSH host', type: 'select', options: hostOpts, parse: 'int-or-null', hint: 'Adds an ssh button to this service.' },
|
||
{ key: 'notes', label: 'Notes', type: 'textarea', rows: 2 },
|
||
{ key: 'enabled', label: 'Run checks for this service', type: 'checkbox' },
|
||
],
|
||
onSubmit: async x => {
|
||
const body = { ...x, host_id: x.host_id };
|
||
if (isNew) await api('POST', '/api/services', body); else await api('PUT', '/api/services/' + s.id, body);
|
||
toast(isNew ? 'Service added.' : 'Changes saved.');
|
||
await loadServices();
|
||
},
|
||
extra: isNew ? [] : [h('button', {
|
||
class: 'btn danger', type: 'button', on: {
|
||
click: async () => {
|
||
if (!(await confirmBox(`Delete "${s.name}" and its check history?`, 'Delete'))) return;
|
||
try { await api('DELETE', '/api/services/' + s.id); closeModal(); toast('Service deleted.'); S.open.delete(s.id); await loadServices(); } catch (e) { fail(e); }
|
||
},
|
||
},
|
||
}, 'Delete')],
|
||
});
|
||
// keep the address placeholder in sync with the check type
|
||
fm.setOnChange((cur, inputs) => { inputs.address.input.placeholder = ph[cur.kind] || ''; });
|
||
}
|
||
|
||
// ------------------------------------------------------------------ hosts
|
||
function buildHosts() {
|
||
$('#page').replaceChildren(
|
||
h('div', { class: 'prompt' }, h('span', { class: 'ps1' }, 'labdeck', h('i', null, ':'), '~', h('i', null, '$')), h('span', null, 'ssh --list'), h('span', { class: 'cursor' })),
|
||
h('div', { class: 'summary dim' }, 'Passwords and keys are encrypted with your master password. Enter or double-click opens a terminal.'),
|
||
h('div', { class: 'toolbar' },
|
||
h('input', { type: 'search', id: 'filter', placeholder: 'filter hosts ( / )', value: S.hostFilter, 'aria-label': 'Filter hosts', on: { input: e => { S.hostFilter = e.target.value; updateHosts(); } } }),
|
||
h('button', { class: 'btn', on: { click: () => editHost(null) } }, 'Add host')),
|
||
h('div', { id: 'list' }));
|
||
updateHosts();
|
||
}
|
||
|
||
function updateHosts() {
|
||
const list = $('#list');
|
||
if (!list) return;
|
||
const q = S.hostFilter.trim().toLowerCase();
|
||
const items = S.hosts.filter(x => !q || (x.name + ' ' + x.address + ' ' + x.grp + ' ' + x.username).toLowerCase().includes(q));
|
||
if (!S.hosts.length) {
|
||
list.replaceChildren(h('div', { class: 'empty' }, h('p', null, 'No SSH hosts yet. Save one and it opens in a terminal tab with one click.'),
|
||
h('button', { class: 'btn primary', on: { click: () => editHost(null) } }, 'Add your first host')));
|
||
return;
|
||
}
|
||
const t = h('table', { class: 't' },
|
||
h('thead', null, h('tr', null, ['name', 'login', 'group', 'auth', 'host key', 'last used', ''].map(x => h('th', null, x)))),
|
||
h('tbody', null, items.map(x => {
|
||
const open = S.sessions.filter(s => s.host.id === x.id && s.status !== 'closed').length;
|
||
return h('tr', {
|
||
class: 'row', tabindex: 0, 'data-id': x.id,
|
||
on: { dblclick: () => connectHost(x), keydown: e => { if (e.key === 'Enter' && e.target.tagName === 'TR') connectHost(x); } },
|
||
},
|
||
h('td', null, h('b', null, x.name), open ? h('span', { class: 'up' }, ` ● ${open}`) : null),
|
||
h('td', { class: 'dim' }, `${x.username}@${x.address}` + (x.port !== 22 ? ':' + x.port : '')),
|
||
h('td', { class: 'dim' }, x.grp || '-'),
|
||
h('td', { class: 'dim' }, x.auth === 'key' ? 'private key' : 'password'),
|
||
h('td', { class: x.host_key ? 'dim' : 'warn', title: x.host_key }, x.host_key ? 'trusted' : 'not seen yet'),
|
||
h('td', { class: 'dim' }, x.last_connected ? ago(x.last_connected) : 'never'),
|
||
h('td', { class: 'acts' },
|
||
h('button', { class: 'btn sm primary', on: { click: () => connectHost(x) } }, 'Connect'), ' ',
|
||
h('button', { class: 'btn sm', on: { click: () => editHost(x) } }, 'Edit')));
|
||
})));
|
||
list.replaceChildren(t);
|
||
}
|
||
|
||
function editHost(x) {
|
||
const isNew = !x;
|
||
const v = x ? { ...x, secret_pw: '', secret_key: '', passphrase: '' } : { port: 22, auth: 'password', secret_pw: '', secret_key: '', passphrase: '' };
|
||
const keepHint = isNew ? null : 'Leave empty to keep the stored one.';
|
||
formModal({
|
||
title: isNew ? 'Add SSH host' : 'Edit SSH host',
|
||
values: v, wide: true, submitLabel: isNew ? 'Save host' : 'Save changes',
|
||
fields: [
|
||
[{ key: 'name', label: 'Name', placeholder: 'nas' }, { key: 'grp', label: 'Group', placeholder: 'servers' }],
|
||
[{ key: 'address', label: 'Host or IP', placeholder: '192.168.1.10' }, { key: 'port', label: 'Port', type: 'number' }],
|
||
[{ key: 'username', label: 'User' }, { key: 'auth', label: 'Authentication', type: 'select', options: [['password', 'Password'], ['key', 'Private key']] }],
|
||
{ key: 'secret_pw', label: 'Password', type: 'password', show: c => c.auth === 'password', hint: keepHint },
|
||
{ key: 'secret_key', label: 'Private key (PEM / OpenSSH)', type: 'textarea', rows: 5, file: true, show: c => c.auth === 'key', placeholder: '-----BEGIN OPENSSH PRIVATE KEY-----', hint: keepHint },
|
||
{ key: 'passphrase', label: 'Key passphrase (if the key has one)', type: 'password', show: c => c.auth === 'key' },
|
||
{ key: 'startup', label: 'Run after login (optional)', placeholder: 'tmux new -A -s main', hint: 'Sent to the shell right after connecting.' },
|
||
{ key: 'notes', label: 'Notes', type: 'textarea', rows: 2 },
|
||
],
|
||
onSubmit: async c => {
|
||
const body = {
|
||
name: c.name, grp: c.grp, address: c.address, port: c.port || 22, username: c.username, auth: c.auth,
|
||
startup: c.startup, notes: c.notes,
|
||
secret: c.auth === 'key' ? c.secret_key : c.secret_pw,
|
||
passphrase: c.auth === 'key' ? c.passphrase : '',
|
||
};
|
||
if (isNew) await api('POST', '/api/hosts', body); else await api('PUT', '/api/hosts/' + x.id, body);
|
||
toast(isNew ? 'Host saved.' : 'Changes saved.');
|
||
await loadHosts();
|
||
if (S.view === 'hosts') updateHosts();
|
||
},
|
||
extra: isNew ? [] : [
|
||
h('button', {
|
||
class: 'btn danger', type: 'button', on: {
|
||
click: async () => {
|
||
if (!(await confirmBox(`Delete host "${x.name}" and its stored credentials?`, 'Delete'))) return;
|
||
try { await api('DELETE', '/api/hosts/' + x.id); closeModal(); toast('Host deleted.'); await loadHosts(); if (S.view === 'hosts') updateHosts(); } catch (e) { fail(e); }
|
||
},
|
||
},
|
||
}, 'Delete'),
|
||
x.host_key ? h('button', {
|
||
class: 'btn', type: 'button', title: x.host_key, on: {
|
||
click: async () => {
|
||
try { await api('POST', `/api/hosts/${x.id}/forget-key`); closeModal(); toast('Host key forgotten. The next connection trusts the key it sees.'); await loadHosts(); if (S.view === 'hosts') updateHosts(); } catch (e) { fail(e); }
|
||
},
|
||
},
|
||
}, 'Forget host key') : null,
|
||
],
|
||
});
|
||
}
|
||
|
||
// ------------------------------------------------------------------ terminals
|
||
function xtermTheme() {
|
||
const cs = getComputedStyle(document.documentElement);
|
||
const g = n => cs.getPropertyValue(n).trim();
|
||
return {
|
||
background: g('--bg'), foreground: g('--fg'), cursor: g('--accent'), cursorAccent: g('--bg'),
|
||
selectionBackground: g('--sel2'),
|
||
black: g('--bg3'), red: g('--down'), green: g('--up'), yellow: g('--warn'), blue: g('--blue'), magenta: g('--mag'), cyan: g('--cyan'), white: g('--fg'),
|
||
brightBlack: g('--dim'), brightRed: g('--down'), brightGreen: g('--up'), brightYellow: g('--warn'), brightBlue: g('--blue'), brightMagenta: g('--mag'), brightCyan: g('--cyan'), brightWhite: g('--fg'),
|
||
};
|
||
}
|
||
|
||
function connectHost(host) {
|
||
const same = S.sessions.filter(s => s.host.id === host.id).length;
|
||
const key = 's' + Date.now() + Math.random().toString(36).slice(2, 6);
|
||
const el = h('div', { class: 'pane', id: 'pane-' + key });
|
||
const Term = window.Terminal;
|
||
const Fit = window.FitAddon && window.FitAddon.FitAddon;
|
||
const Links = window.WebLinksAddon && window.WebLinksAddon.WebLinksAddon;
|
||
if (!Term || !Fit) { toast('Terminal library failed to load.', true); return; }
|
||
const term = new Term({
|
||
fontFamily: getComputedStyle(document.body).fontFamily, fontSize: 14, cursorBlink: true, scrollback: 10000,
|
||
theme: xtermTheme(), allowProposedApi: true,
|
||
});
|
||
const fit = new Fit();
|
||
term.loadAddon(fit);
|
||
if (Links) term.loadAddon(new Links());
|
||
const s = { key, host, title: host.name + (same ? ` (${same + 1})` : ''), el, term, fit, ws: null, status: 'connecting', opened: false };
|
||
term.onData(d => {
|
||
if (s.ws && s.ws.readyState === 1) s.ws.send(enc.encode(d));
|
||
else if ((s.status === 'closed' || s.status === 'error') && d === '\r') openSocket(s);
|
||
});
|
||
term.onResize(({ cols, rows }) => {
|
||
if (s.ws && s.ws.readyState === 1) s.ws.send(JSON.stringify({ t: 'resize', cols, rows }));
|
||
});
|
||
term.attachCustomKeyEventHandler(e => {
|
||
if (e.type !== 'keydown') return true;
|
||
if (e.altKey && !e.ctrlKey && e.key.toLowerCase() === 'k') { openPalette(); return false; }
|
||
if (e.altKey && !e.ctrlKey && /^[1-5]$/.test(e.key)) { setView(VIEWS[Number(e.key) - 1][0]); return false; }
|
||
return true;
|
||
});
|
||
S.sessions.push(s);
|
||
S.active = key;
|
||
$('#panes').append(el);
|
||
setView('terminals');
|
||
}
|
||
|
||
function renderTerminals() {
|
||
const bar = $('#termbar');
|
||
bar.replaceChildren(
|
||
...S.sessions.map(s => h('div', {
|
||
class: 'tab' + (s.key === S.active ? ' on' : ''), role: 'tab', 'aria-selected': String(s.key === S.active),
|
||
on: { click: () => { S.active = s.key; renderTerminals(); }, auxclick: e => { if (e.button === 1) closeSession(s.key); } },
|
||
},
|
||
h('span', { class: 'dot ' + s.status, 'aria-hidden': 'true' }, '●'),
|
||
h('span', null, s.title),
|
||
h('button', { title: 'Close session', 'aria-label': 'Close ' + s.title, on: { click: e => { e.stopPropagation(); closeSession(s.key); } } }, '×'))),
|
||
h('div', { class: 'spacer' }),
|
||
h('div', { class: 'tools' },
|
||
h('button', { class: 'btn sm', title: 'Run a saved command in this terminal', on: { click: () => openPalette({ only: 'snippet' }) } }, 'snippets'),
|
||
h('button', { class: 'btn sm', title: 'Open another host', on: { click: () => openPalette({ only: 'host' }) } }, 'new session')));
|
||
for (const s of S.sessions) s.el.classList.toggle('on', s.key === S.active);
|
||
let empty = $('#term-empty');
|
||
if (!S.sessions.length) {
|
||
if (!empty) {
|
||
empty = h('div', { class: 'term-empty', id: 'term-empty' },
|
||
h('div', null, 'No open sessions.'),
|
||
S.hosts.length ? h('div', { class: 'hostlist' }, S.hosts.map(x => h('button', { on: { click: () => connectHost(x) } }, `${x.name} `, h('span', { class: 'dim' }, `${x.username}@${x.address}`)))) :
|
||
h('div', { class: 'hostlist' }, h('button', { on: { click: () => editHost(null) } }, 'Add a host first')));
|
||
$('#panes').append(empty);
|
||
}
|
||
} else if (empty) empty.remove();
|
||
updateStatus();
|
||
requestAnimationFrame(() => {
|
||
const s = activeSession();
|
||
if (!s) return;
|
||
if (!s.opened) {
|
||
s.term.open(s.el);
|
||
s.opened = true;
|
||
fitSession(s);
|
||
openSocket(s);
|
||
} else fitSession(s);
|
||
s.term.focus();
|
||
});
|
||
}
|
||
|
||
const activeSession = () => S.sessions.find(s => s.key === S.active);
|
||
function fitSession(s) { try { if (s && s.opened && s.el.offsetParent !== null) s.fit.fit(); } catch { /* not visible yet */ } }
|
||
function fitActive() { fitSession(activeSession()); }
|
||
addEventListener('resize', () => fitActive());
|
||
|
||
async function openSocket(s) {
|
||
const t = s.term;
|
||
s.status = 'connecting';
|
||
renderTermbarOnly();
|
||
let ticket;
|
||
try { ticket = (await api('POST', '/api/ws-ticket')).ticket; } catch (e) {
|
||
t.writeln('\x1b[31m' + e.message + '\x1b[0m');
|
||
s.status = 'error'; renderTermbarOnly();
|
||
return;
|
||
}
|
||
const proto = location.protocol === 'https:' ? 'wss' : 'ws';
|
||
const ws = new WebSocket(`${proto}://${location.host}/ws/term/${s.host.id}?ticket=${encodeURIComponent(ticket)}&cols=${t.cols}&rows=${t.rows}`);
|
||
ws.binaryType = 'arraybuffer';
|
||
s.ws = ws;
|
||
let gotCtl = false;
|
||
ws.onmessage = ev => {
|
||
if (typeof ev.data !== 'string') { t.write(new Uint8Array(ev.data)); return; }
|
||
let m; try { m = JSON.parse(ev.data); } catch { return; }
|
||
gotCtl = true;
|
||
const line = (c, txt) => t.write(`\r\n\x1b[${c}m${txt.replace(/\r?\n/g, '\r\n')}\x1b[0m`);
|
||
if (m.t === 'info') line('2', '# ' + m.msg);
|
||
else if (m.t === 'error') { s.status = 'error'; line('31', m.msg); t.write('\r\n\x1b[2m# press Enter to reconnect\x1b[0m\r\n'); }
|
||
else if (m.t === 'closed') { s.status = 'closed'; line('2', '# ' + m.msg + ' - press Enter to reconnect'); t.write('\r\n'); }
|
||
else if (m.t === 'ready') { s.status = 'connected'; t.write('\r\n'); fitSession(s); if (s.ws === ws && ws.readyState === 1) ws.send(JSON.stringify({ t: 'resize', cols: t.cols, rows: t.rows })); }
|
||
renderTermbarOnly();
|
||
};
|
||
ws.onclose = () => {
|
||
if (s.ws !== ws) return;
|
||
if (s.status === 'connected' || s.status === 'connecting') {
|
||
s.status = 'closed';
|
||
t.write('\r\n\x1b[2m# connection lost' + (gotCtl ? '' : ' before the session started') + ' - press Enter to reconnect\x1b[0m\r\n');
|
||
}
|
||
renderTermbarOnly();
|
||
if (S.view === 'hosts') updateHosts();
|
||
};
|
||
ws.onerror = () => { /* onclose follows */ };
|
||
}
|
||
|
||
function renderTermbarOnly() {
|
||
document.querySelectorAll('#termbar .tab').forEach((tab, i) => {
|
||
const s = S.sessions[i];
|
||
const d = tab.querySelector('.dot');
|
||
if (s && d) d.className = 'dot ' + s.status;
|
||
});
|
||
updateStatus();
|
||
}
|
||
|
||
function closeSession(key) {
|
||
const i = S.sessions.findIndex(s => s.key === key);
|
||
if (i < 0) return;
|
||
const s = S.sessions[i];
|
||
try { if (s.ws) { s.ws.onclose = null; s.ws.close(); } } catch { /* ignore */ }
|
||
try { s.term.dispose(); } catch { /* ignore */ }
|
||
s.el.remove();
|
||
S.sessions.splice(i, 1);
|
||
if (S.active === key) S.active = S.sessions.length ? S.sessions[Math.min(i, S.sessions.length - 1)].key : null;
|
||
renderTerminals();
|
||
}
|
||
|
||
function runSnippet(sn) {
|
||
const s = activeSession();
|
||
if (S.view !== 'terminals' || !s || s.status !== 'connected' || !s.ws) { toast('Open a connected terminal first.', true); return; }
|
||
s.ws.send(enc.encode(sn.command.replace(/\r?\n/g, '\n') + '\n'));
|
||
s.term.focus();
|
||
}
|
||
|
||
addEventListener('beforeunload', e => {
|
||
if (S.sessions.some(s => s.status === 'connected')) { e.preventDefault(); e.returnValue = ''; }
|
||
});
|
||
|
||
// ------------------------------------------------------------------ events
|
||
async function buildEvents() {
|
||
const body = h('div', { id: 'list' });
|
||
$('#page').replaceChildren(
|
||
h('div', { class: 'prompt' }, h('span', { class: 'ps1' }, 'labdeck', h('i', null, ':'), '~', h('i', null, '$')), h('span', null, 'tail events'), h('span', { class: 'cursor' })),
|
||
h('div', { class: 'summary dim' }, 'Outages, recoveries, certificate warnings and SSH sessions.'),
|
||
h('div', { class: 'toolbar' }, h('button', { class: 'btn', on: { click: buildEvents } }, 'Refresh')),
|
||
body);
|
||
try {
|
||
const ev = await api('GET', '/api/events?limit=300');
|
||
if (!ev.length) { body.replaceChildren(h('div', { class: 'empty' }, 'Nothing has happened yet.')); return; }
|
||
body.replaceChildren(h('table', { class: 't' },
|
||
h('thead', null, h('tr', null, ['time', 'type', 'event', 'details'].map(x => h('th', null, x)))),
|
||
h('tbody', null, ev.map(e => h('tr', { class: 'row' },
|
||
h('td', { class: 'dim', style: 'white-space:nowrap' }, fmtTime(e.ts)),
|
||
h('td', null, h('span', { class: 'chip ' + e.kind }, e.kind.replace('_', ' '))),
|
||
h('td', null, e.title),
|
||
h('td', { class: 'dim' }, e.detail))))));
|
||
} catch (e) { fail(e); }
|
||
}
|
||
|
||
// ------------------------------------------------------------------ settings
|
||
async function buildSettings() {
|
||
const page = $('#page');
|
||
let st = { webhook_url: '', webhook_kind: 'json' };
|
||
try { st = await api('GET', '/api/settings'); await loadSnippets(); } catch (e) { fail(e); }
|
||
|
||
const themeBtns = h('div', { class: 'themes' }, THEMES.map(([id, c]) => h('button', {
|
||
class: 'btn' + (currentTheme() === id ? ' primary' : ''), on: { click: () => { applyTheme(id); buildSettings(); } },
|
||
}, h('span', { class: 'sw', style: 'background:' + c }), id)));
|
||
|
||
const kind = h('select', { id: 'wk' }, [['json', 'Generic JSON'], ['discord', 'Discord'], ['telegram', 'Telegram'], ['slack', 'Slack'], ['ntfy', 'ntfy']]
|
||
.map(([v, l]) => h('option', { value: v, selected: st.webhook_kind === v }, l)));
|
||
const HOOK_HELP = {
|
||
json: ['https://example.com/hook', 'POSTs {title, message, status, time, source} as JSON.'],
|
||
discord: ['https://discord.com/api/webhooks/<id>/<token>', 'Discord: channel settings > Integrations > Webhooks > New Webhook > Copy Webhook URL.'],
|
||
telegram: ['https://api.telegram.org/bot<TOKEN>/sendMessage?chat_id=<CHAT_ID>', 'Telegram: create a bot with @BotFather for the token, send the bot a message, then find your chat id via https://api.telegram.org/bot<TOKEN>/getUpdates (result > message > chat > id). Groups have negative ids.'],
|
||
slack: ['https://hooks.slack.com/services/T000/B000/XXXX', 'Slack: create an Incoming Webhook app and copy its URL.'],
|
||
ntfy: ['https://ntfy.sh/my-homelab-alerts', 'ntfy: the full topic URL.'],
|
||
};
|
||
const url = h('input', { type: 'text', id: 'wu', value: st.webhook_url, placeholder: HOOK_HELP[st.webhook_kind]?.[0] || '', spellcheck: false });
|
||
const hookHelp = h('p', { class: 'dim' }, HOOK_HELP[st.webhook_kind]?.[1] || '');
|
||
kind.addEventListener('change', () => { url.placeholder = HOOK_HELP[kind.value][0]; hookHelp.textContent = HOOK_HELP[kind.value][1]; });
|
||
const saveHook = async () => { await api('PUT', '/api/settings', { webhook_url: url.value, webhook_kind: kind.value }); };
|
||
|
||
const snipList = h('div', null, S.snippets.length ? S.snippets.map(sn => h('div', { class: 'row' },
|
||
h('b', null, sn.name), h('span', { class: 'dim trunc grow' }, sn.command.split('\n')[0]),
|
||
h('button', { class: 'btn sm', on: { click: () => editSnippet(sn) } }, 'Edit'))) : h('p', null, 'No snippets yet.'));
|
||
|
||
const importIn = h('input', {
|
||
type: 'file', accept: 'application/json,.json', class: 'hidden', on: {
|
||
change: async e => {
|
||
const f = e.target.files[0]; if (!f) return;
|
||
try {
|
||
const r = await api('POST', '/api/import', JSON.parse(await f.text()));
|
||
toast(`Imported ${r.services} services, ${r.hosts} hosts, ${r.snippets} snippets.`);
|
||
await Promise.all([loadServices(), loadHosts(), loadSnippets()]);
|
||
buildSettings();
|
||
} catch (ex) { fail(ex); }
|
||
e.target.value = '';
|
||
},
|
||
},
|
||
});
|
||
|
||
page.replaceChildren(
|
||
h('div', { class: 'prompt' }, h('span', { class: 'ps1' }, 'labdeck', h('i', null, ':'), '~', h('i', null, '$')), h('span', null, 'config'), h('span', { class: 'cursor' })),
|
||
h('div', { class: 'summary dim' }, 'labdeck ' + S.version),
|
||
h('section', { class: 'section' }, h('h2', null, 'Appearance'), themeBtns),
|
||
h('section', { class: 'section' }, h('h2', null, 'Alerts'),
|
||
h('p', null, 'Get a message when a service goes down or recovers, or when a certificate is about to expire.'),
|
||
h('div', { class: 'row' }, h('div', { style: 'width:180px' }, kind), h('div', { class: 'grow' }, url)),
|
||
hookHelp,
|
||
h('div', { class: 'row' },
|
||
h('button', { class: 'btn primary', on: { click: async () => { try { await saveHook(); toast('Alert settings saved.'); } catch (e) { fail(e); } } } }, 'Save'),
|
||
h('button', { class: 'btn', on: { click: async () => { try { await saveHook(); await api('POST', '/api/settings/test-webhook'); toast('Test message sent.'); } catch (e) { fail(e); } } } }, 'Send test message'))),
|
||
h('section', { class: 'section' }, h('h2', null, 'Snippets'),
|
||
h('p', null, 'Saved commands. In a terminal, pick one from the snippets button or the command palette and it is typed into the shell.'),
|
||
snipList,
|
||
h('button', { class: 'btn', on: { click: () => editSnippet(null) } }, 'Add snippet')),
|
||
h('section', { class: 'section' }, h('h2', null, 'Security'),
|
||
h('p', null, 'Changing the master password re-encrypts all stored SSH credentials.'),
|
||
h('div', { class: 'row' },
|
||
h('button', { class: 'btn', on: { click: changePassword } }, 'Change master password'),
|
||
h('button', { class: 'btn', on: { click: lock } }, 'Lock now'))),
|
||
h('section', { class: 'section' }, h('h2', null, 'Backup'),
|
||
h('p', null, 'The export contains services, hosts (without passwords or keys), snippets and alert settings.'),
|
||
h('div', { class: 'row' },
|
||
h('a', { class: 'btn', href: '/api/export', download: 'labdeck-export.json' }, 'Export configuration'),
|
||
h('button', { class: 'btn', on: { click: () => importIn.click() } }, 'Import configuration'), importIn),
|
||
h('p', null, 'The database file in the data directory also holds everything, with credentials encrypted.')),
|
||
);
|
||
}
|
||
|
||
function editSnippet(sn) {
|
||
const isNew = !sn;
|
||
formModal({
|
||
title: isNew ? 'Add snippet' : 'Edit snippet', values: sn ? { ...sn } : {}, submitLabel: isNew ? 'Add snippet' : 'Save changes',
|
||
fields: [
|
||
{ key: 'name', label: 'Name', placeholder: 'Docker status' },
|
||
{ key: 'command', label: 'Command', type: 'textarea', rows: 4, placeholder: 'docker ps --format "table {{.Names}}\\t{{.Status}}"', hint: 'Typed into the terminal followed by Enter.' },
|
||
],
|
||
onSubmit: async c => {
|
||
if (isNew) await api('POST', '/api/snippets', c); else await api('PUT', '/api/snippets/' + sn.id, c);
|
||
await loadSnippets();
|
||
if (S.view === 'settings') buildSettings();
|
||
},
|
||
extra: isNew ? [] : [h('button', {
|
||
class: 'btn danger', type: 'button', on: {
|
||
click: async () => {
|
||
try { await api('DELETE', '/api/snippets/' + sn.id); closeModal(); await loadSnippets(); if (S.view === 'settings') buildSettings(); } catch (e) { fail(e); }
|
||
},
|
||
},
|
||
}, 'Delete')],
|
||
});
|
||
}
|
||
|
||
function changePassword() {
|
||
formModal({
|
||
title: 'Change master password', values: {}, submitLabel: 'Change password',
|
||
fields: [
|
||
{ key: 'old', label: 'Current password', type: 'password' },
|
||
{ key: 'neu', label: 'New password (at least 10 characters)', type: 'password' },
|
||
{ key: 'neu2', label: 'Repeat new password', type: 'password' },
|
||
],
|
||
onSubmit: async c => {
|
||
if (c.neu !== c.neu2) throw new Error('The new passwords do not match.');
|
||
await api('POST', '/api/account/password', { old: c.old, new: c.neu });
|
||
toast('Master password changed.');
|
||
},
|
||
});
|
||
}
|
||
|
||
// ------------------------------------------------------------------ command palette
|
||
function paletteItems(only) {
|
||
const items = [];
|
||
const act = S.view === 'terminals' ? activeSession() : null;
|
||
if (!only || only === 'host') for (const x of S.hosts) items.push({ label: 'ssh ' + x.name, hint: `${x.username}@${x.address}`, kind: 'host', run: () => connectHost(x) });
|
||
if (!only || only === 'snippet') for (const sn of S.snippets) items.push({ label: 'run ' + sn.name, hint: sn.command.split('\n')[0].slice(0, 50), kind: 'snippet', run: () => runSnippet(sn) });
|
||
if (only) return items;
|
||
for (const [i, [id, label]] of VIEWS.entries()) items.push({ label: 'go to ' + label, hint: 'alt+' + (i + 1), kind: 'view', run: () => setView(id) });
|
||
items.push(
|
||
{ label: 'add service', hint: '', kind: 'action', run: () => editService(null) },
|
||
{ label: 'add ssh host', hint: '', kind: 'action', run: () => editHost(null) },
|
||
{ label: 'check all services now', hint: '', kind: 'action', run: checkAll },
|
||
{ label: 'lock vault', hint: '', kind: 'action', run: lock });
|
||
for (const [t] of THEMES) items.push({ label: 'theme ' + t, hint: '', kind: 'action', run: () => { applyTheme(t); if (S.view === 'settings') buildSettings(); } });
|
||
for (const s of S.services) {
|
||
items.push({ label: 'check ' + s.name, hint: s.live.status, kind: 'service', run: () => checkNow(s.id) });
|
||
if (s.kind === 'http') items.push({ label: 'open ' + s.name, hint: s.address, kind: 'service', run: () => window.open(/^https?:\/\//.test(s.address) ? s.address : 'http://' + s.address, '_blank', 'noopener,noreferrer') });
|
||
if (s.host_id) { const x = S.hosts.find(q => q.id === s.host_id); if (x) items.push({ label: 'ssh ' + x.name + ' (from ' + s.name + ')', hint: '', kind: 'service', run: () => connectHost(x) }); }
|
||
}
|
||
void act;
|
||
return items;
|
||
}
|
||
|
||
function openPalette(opts = {}) {
|
||
if (modals.length) return;
|
||
const all = paletteItems(opts.only);
|
||
let sel = 0, shown = [];
|
||
const input = h('input', { type: 'text', placeholder: opts.only === 'snippet' ? 'run a snippet...' : opts.only === 'host' ? 'connect to...' : 'type a command...', 'aria-label': 'Command', spellcheck: false });
|
||
const ul = h('ul', { role: 'listbox' });
|
||
const box = h('div', { class: 'palette' }, input, ul);
|
||
const ov = h('div', { class: 'overlay', on: { mousedown: e => { if (e.target === ov) closeModal(); } } }, box);
|
||
const prev = document.activeElement;
|
||
document.body.append(ov);
|
||
modals.push({ ov, prev });
|
||
|
||
function render() {
|
||
const toks = input.value.toLowerCase().split(/\s+/).filter(Boolean);
|
||
shown = all.map(it => {
|
||
const hay = (it.label + ' ' + it.hint).toLowerCase();
|
||
if (!toks.every(t => hay.includes(t))) return null;
|
||
return { it, score: (it.label.toLowerCase().startsWith(toks[0] || '') ? 0 : 1) + hay.indexOf(toks[0] || '') / 1000 };
|
||
}).filter(Boolean).sort((a, b) => a.score - b.score).slice(0, 40).map(x => x.it);
|
||
sel = Math.min(sel, Math.max(0, shown.length - 1));
|
||
ul.replaceChildren(...(shown.length ? shown.map((it, i) => h('li', {
|
||
class: i === sel ? 'on' : '', role: 'option', 'aria-selected': String(i === sel),
|
||
on: { click: () => choose(it), mousemove: () => { if (sel !== i) { sel = i; render(); } } },
|
||
}, h('span', null, it.label), h('span', { class: 'hint' }, it.hint))) : [h('li', { class: 'none' }, 'No match.')]));
|
||
const on = ul.querySelector('.on'); if (on) on.scrollIntoView({ block: 'nearest' });
|
||
}
|
||
function choose(it) { closeModal(); setTimeout(() => it.run(), 0); }
|
||
input.addEventListener('input', () => { sel = 0; render(); });
|
||
input.addEventListener('keydown', e => {
|
||
if (e.key === 'ArrowDown') { e.preventDefault(); sel = Math.min(shown.length - 1, sel + 1); render(); }
|
||
else if (e.key === 'ArrowUp') { e.preventDefault(); sel = Math.max(0, sel - 1); render(); }
|
||
else if (e.key === 'Enter') { e.preventDefault(); if (shown[sel]) choose(shown[sel]); }
|
||
});
|
||
render();
|
||
input.focus();
|
||
}
|
||
|
||
// ------------------------------------------------------------------ global keys
|
||
addEventListener('keydown', e => {
|
||
if (!S.ready) return;
|
||
if (e.key === 'Escape' && modals.length) { e.preventDefault(); closeModal(); return; }
|
||
const tag = document.activeElement && document.activeElement.tagName;
|
||
const inField = tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT';
|
||
const inTerm = document.activeElement && document.activeElement.classList.contains('xterm-helper-textarea');
|
||
if (((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 'k' && !inTerm) || (e.altKey && e.key.toLowerCase() === 'k')) { e.preventDefault(); openPalette(); return; }
|
||
if (e.altKey && !e.ctrlKey && /^[1-5]$/.test(e.key)) { e.preventDefault(); if (!modals.length) setView(VIEWS[Number(e.key) - 1][0]); return; }
|
||
if (e.key === '/' && !inField && !modals.length && (S.view === 'dashboard' || S.view === 'hosts')) {
|
||
const f = $('#filter'); if (f) { e.preventDefault(); f.focus(); f.select(); }
|
||
}
|
||
});
|
||
|
||
boot();
|