josh
0b350f3b28
Syncs patchmon field on instances by querying the Patchmon hosts API and matching hostnames. API token masked as REDACTED in responses. seedJobs now uses INSERT OR IGNORE so new jobs are seeded on existing installs without re-running the full seed. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
552 lines
25 KiB
JavaScript
552 lines
25 KiB
JavaScript
// Module-level UI state
|
|
let editingVmid = null;
|
|
let currentVmid = null;
|
|
let toastTimer = null;
|
|
|
|
// ── Timezone ──────────────────────────────────────────────────────────────────
|
|
|
|
const TIMEZONES = [
|
|
{ label: 'UTC', tz: 'UTC' },
|
|
{ label: 'Hawaii (HST)', tz: 'Pacific/Honolulu' },
|
|
{ label: 'Alaska (AKT)', tz: 'America/Anchorage' },
|
|
{ label: 'Pacific (PT)', tz: 'America/Los_Angeles' },
|
|
{ label: 'Mountain (MT)', tz: 'America/Denver' },
|
|
{ label: 'Central (CT)', tz: 'America/Chicago' },
|
|
{ label: 'Eastern (ET)', tz: 'America/New_York' },
|
|
{ label: 'Atlantic (AT)', tz: 'America/Halifax' },
|
|
{ label: 'London (GMT/BST)', tz: 'Europe/London' },
|
|
{ label: 'Paris / Berlin (CET)', tz: 'Europe/Paris' },
|
|
{ label: 'Helsinki (EET)', tz: 'Europe/Helsinki' },
|
|
{ label: 'Istanbul (TRT)', tz: 'Europe/Istanbul' },
|
|
{ label: 'Dubai (GST)', tz: 'Asia/Dubai' },
|
|
{ label: 'India (IST)', tz: 'Asia/Kolkata' },
|
|
{ label: 'Singapore (SGT)', tz: 'Asia/Singapore' },
|
|
{ label: 'China (CST)', tz: 'Asia/Shanghai' },
|
|
{ label: 'Japan / Korea (JST/KST)', tz: 'Asia/Tokyo' },
|
|
{ label: 'Sydney (AEST)', tz: 'Australia/Sydney' },
|
|
{ label: 'Auckland (NZST)', tz: 'Pacific/Auckland' },
|
|
];
|
|
|
|
function getTimezone() {
|
|
return localStorage.getItem('catalyst_tz') || 'UTC';
|
|
}
|
|
|
|
// ── Helpers ───────────────────────────────────────────────────────────────────
|
|
|
|
function esc(str) {
|
|
const d = document.createElement('div');
|
|
d.textContent = (str == null) ? '' : String(str);
|
|
return d.innerHTML;
|
|
}
|
|
|
|
// SQLite datetime('now') → 'YYYY-MM-DD HH:MM:SS' (UTC, no timezone marker).
|
|
// Appending 'Z' tells JS to parse it as UTC rather than local time.
|
|
function parseUtc(d) {
|
|
if (typeof d !== 'string') return new Date(d);
|
|
const hasZone = d.endsWith('Z') || /[+-]\d{2}:\d{2}$/.test(d);
|
|
return new Date(hasZone ? d : d.replace(' ', 'T') + 'Z');
|
|
}
|
|
|
|
function fmtDate(d) {
|
|
if (!d) return '—';
|
|
try {
|
|
return parseUtc(d).toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric', timeZone: getTimezone() });
|
|
} catch (e) { return d; }
|
|
}
|
|
|
|
function fmtDateFull(d) {
|
|
if (!d) return '—';
|
|
try {
|
|
return parseUtc(d).toLocaleString('en-US', { year: 'numeric', month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit', timeZone: getTimezone(), timeZoneName: 'short' });
|
|
} catch (e) { return d; }
|
|
}
|
|
|
|
// ── Dashboard ─────────────────────────────────────────────────────────────────
|
|
|
|
async function renderDashboard() {
|
|
const all = await getInstances();
|
|
document.getElementById('nav-count').textContent = `${all.length} instance${all.length !== 1 ? 's' : ''}`;
|
|
|
|
const states = {};
|
|
all.forEach(i => { states[i.state] = (states[i.state] || 0) + 1; });
|
|
|
|
document.getElementById('stats-bar').innerHTML = `
|
|
<div class="stat-cell"><div class="stat-label">total</div><div class="stat-value accent">${all.length}</div></div>
|
|
<div class="stat-cell"><div class="stat-label">deployed</div><div class="stat-value">${states['deployed'] || 0}</div></div>
|
|
<div class="stat-cell"><div class="stat-label">testing</div><div class="stat-value amber">${states['testing'] || 0}</div></div>
|
|
<div class="stat-cell"><div class="stat-label">degraded</div><div class="stat-value red">${states['degraded'] || 0}</div></div>
|
|
`;
|
|
|
|
await populateStackFilter();
|
|
await filterInstances();
|
|
}
|
|
|
|
async function populateStackFilter() {
|
|
const select = document.getElementById('filter-stack');
|
|
const current = select.value;
|
|
select.innerHTML = '<option value="">all stacks</option>';
|
|
const stacks = await getDistinctStacks();
|
|
stacks.forEach(s => {
|
|
const opt = document.createElement('option');
|
|
opt.value = s;
|
|
opt.textContent = s;
|
|
if (s === current) opt.selected = true;
|
|
select.appendChild(opt);
|
|
});
|
|
}
|
|
|
|
async function filterInstances() {
|
|
const search = document.getElementById('search-input').value;
|
|
const state = document.getElementById('filter-state').value;
|
|
const stack = document.getElementById('filter-stack').value;
|
|
const instances = await getInstances({ search, state, stack });
|
|
const grid = document.getElementById('instance-grid');
|
|
|
|
if (!instances.length) {
|
|
grid.innerHTML = `<div class="empty-state"><div class="empty-icon">⊘</div><p>no instances match the current filters</p></div>`;
|
|
return;
|
|
}
|
|
|
|
grid.innerHTML = instances.map(inst => {
|
|
const dots = CARD_SERVICES.map(s =>
|
|
`<div class="svc-dot ${inst[s] ? 'on' : ''}" title="${s}"></div>`
|
|
).join('');
|
|
const activeCount = CARD_SERVICES.filter(s => inst[s]).length;
|
|
return `
|
|
<div class="instance-card state-${esc(inst.state)}" onclick="navigate('instance', ${inst.vmid})">
|
|
<div class="card-top">
|
|
<div>
|
|
<div class="card-name">${esc(inst.name)}</div>
|
|
<div class="card-vmid">vmid: ${inst.vmid}</div>
|
|
</div>
|
|
<div style="display:flex;flex-direction:column;align-items:flex-end;gap:5px">
|
|
<div class="badge ${esc(inst.state)}">${esc(inst.state)}</div>
|
|
<div class="badge ${esc(inst.stack)}">${esc(inst.stack)}</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-services">
|
|
${dots}
|
|
<span class="svc-label">${activeCount} service${activeCount !== 1 ? 's' : ''} active</span>
|
|
</div>
|
|
${inst.tailscale_ip ? `<div class="card-ip">ts: <span>${esc(inst.tailscale_ip)}</span></div>` : ''}
|
|
</div>`;
|
|
}).join('');
|
|
}
|
|
|
|
// ── Detail Page ───────────────────────────────────────────────────────────────
|
|
|
|
const BOOL_FIELDS = ['atlas','argus','semaphore','patchmon','tailscale','andromeda','hardware_acceleration'];
|
|
|
|
const FIELD_LABELS = {
|
|
name: 'name',
|
|
state: 'state',
|
|
stack: 'stack',
|
|
vmid: 'vmid',
|
|
tailscale_ip: 'tailscale ip',
|
|
atlas: 'atlas',
|
|
argus: 'argus',
|
|
semaphore: 'semaphore',
|
|
patchmon: 'patchmon',
|
|
tailscale: 'tailscale',
|
|
andromeda: 'andromeda',
|
|
hardware_acceleration: 'hw acceleration',
|
|
};
|
|
|
|
function stateClass(field, val) {
|
|
if (field !== 'state') return '';
|
|
return { deployed: 'tl-deployed', testing: 'tl-testing', degraded: 'tl-degraded' }[val] ?? '';
|
|
}
|
|
|
|
function fmtHistVal(field, val) {
|
|
if (val == null || val === '') return '—';
|
|
if (BOOL_FIELDS.includes(field)) return val === '1' ? 'on' : 'off';
|
|
return esc(val);
|
|
}
|
|
|
|
async function renderDetailPage(vmid) {
|
|
const [inst, history, all] = await Promise.all([getInstance(vmid), getInstanceHistory(vmid), getInstances()]);
|
|
if (!inst) { navigate('dashboard'); return; }
|
|
currentVmid = vmid;
|
|
document.getElementById('nav-count').textContent = `${all.length} instance${all.length !== 1 ? 's' : ''}`;
|
|
|
|
document.getElementById('detail-vmid-crumb').textContent = vmid;
|
|
document.getElementById('detail-name').textContent = inst.name;
|
|
document.getElementById('detail-vmid-sub').textContent = inst.vmid;
|
|
document.getElementById('detail-created-sub').textContent = fmtDate(inst.created_at);
|
|
|
|
document.getElementById('detail-identity').innerHTML = `
|
|
<div class="kv-row"><span class="kv-key">name</span><span class="kv-val highlight">${esc(inst.name)}</span></div>
|
|
<div class="kv-row"><span class="kv-key">state</span><span class="kv-val"><span class="badge ${esc(inst.state)}">${esc(inst.state)}</span></span></div>
|
|
<div class="kv-row"><span class="kv-key">stack</span><span class="kv-val"><span class="badge ${esc(inst.stack)}">${esc(inst.stack) || '—'}</span></span></div>
|
|
<div class="kv-row"><span class="kv-key">vmid</span><span class="kv-val highlight">${inst.vmid}</span></div>
|
|
`;
|
|
|
|
document.getElementById('detail-network').innerHTML = `
|
|
<div class="kv-row"><span class="kv-key">tailscale ip</span><span class="kv-val highlight">${esc(inst.tailscale_ip) || '—'}</span></div>
|
|
<div class="kv-row"><span class="kv-key">tailscale</span><span class="kv-val ${inst.tailscale ? 'on' : 'off'}">${inst.tailscale ? 'enabled' : 'disabled'}</span></div>
|
|
`;
|
|
|
|
document.getElementById('detail-services').innerHTML = [
|
|
...DETAIL_SERVICES.map(s => ({ key: s, label: s })),
|
|
{ key: 'hardware_acceleration', label: 'hw acceleration' },
|
|
].map(({ key, label }) => `
|
|
<div class="svc-item">
|
|
<span class="svc-name">${esc(label)}</span>
|
|
<span class="svc-status ${inst[key] ? 'on' : 'off'}">${inst[key] ? 'enabled' : 'disabled'}</span>
|
|
</div>
|
|
`).join('');
|
|
|
|
document.getElementById('detail-timestamps').innerHTML = history.length
|
|
? history.map(e => {
|
|
if (e.field === 'created') return `
|
|
<div class="tl-item tl-created">
|
|
<span class="tl-event">instance created</span>
|
|
<span class="tl-time">${fmtDateFull(e.changed_at)}</span>
|
|
</div>`;
|
|
const label = FIELD_LABELS[e.field] ?? esc(e.field);
|
|
const newCls = (e.field === 'state' || e.field === 'stack')
|
|
? `badge ${esc(e.new_value)}`
|
|
: `tl-new ${stateClass(e.field, e.new_value)}`;
|
|
return `
|
|
<div class="tl-item">
|
|
<div class="tl-event">
|
|
<span class="tl-label">${label}</span>
|
|
<span class="tl-sep">·</span>
|
|
<span class="tl-old">${fmtHistVal(e.field, e.old_value)}</span>
|
|
<span class="tl-arrow">→</span>
|
|
<span class="${newCls}">${fmtHistVal(e.field, e.new_value)}</span>
|
|
</div>
|
|
<span class="tl-time">${fmtDateFull(e.changed_at)}</span>
|
|
</div>`;
|
|
}).join('')
|
|
: '<div class="tl-empty">no history yet</div>';
|
|
|
|
document.getElementById('detail-edit-btn').onclick = () => openEditModal(inst.vmid);
|
|
document.getElementById('detail-delete-btn').onclick = () => confirmDeleteDialog(inst);
|
|
}
|
|
|
|
// ── Modal ─────────────────────────────────────────────────────────────────────
|
|
|
|
function openNewModal() {
|
|
editingVmid = null;
|
|
document.getElementById('modal-title').textContent = 'new instance';
|
|
clearForm();
|
|
document.getElementById('instance-modal').classList.add('open');
|
|
}
|
|
|
|
async function openEditModal(vmid) {
|
|
const inst = await getInstance(vmid);
|
|
if (!inst) return;
|
|
editingVmid = inst.vmid;
|
|
document.getElementById('modal-title').textContent = `edit / ${inst.name}`;
|
|
document.getElementById('f-name').value = inst.name;
|
|
document.getElementById('f-vmid').value = inst.vmid;
|
|
document.getElementById('f-state').value = inst.state;
|
|
document.getElementById('f-stack').value = inst.stack;
|
|
document.getElementById('f-tailscale-ip').value = inst.tailscale_ip;
|
|
document.getElementById('f-atlas').checked = !!inst.atlas;
|
|
document.getElementById('f-argus').checked = !!inst.argus;
|
|
document.getElementById('f-semaphore').checked = !!inst.semaphore;
|
|
document.getElementById('f-patchmon').checked = !!inst.patchmon;
|
|
document.getElementById('f-tailscale').checked = !!inst.tailscale;
|
|
document.getElementById('f-andromeda').checked = !!inst.andromeda;
|
|
document.getElementById('f-hardware-accel').checked = !!inst.hardware_acceleration;
|
|
document.getElementById('instance-modal').classList.add('open');
|
|
}
|
|
|
|
function closeModal() {
|
|
document.getElementById('instance-modal').classList.remove('open');
|
|
}
|
|
|
|
function clearForm() {
|
|
document.getElementById('f-name').value = '';
|
|
document.getElementById('f-vmid').value = '';
|
|
document.getElementById('f-tailscale-ip').value = '';
|
|
document.getElementById('f-state').value = 'deployed';
|
|
document.getElementById('f-stack').value = 'production';
|
|
['f-atlas', 'f-argus', 'f-semaphore', 'f-patchmon', 'f-tailscale', 'f-andromeda', 'f-hardware-accel']
|
|
.forEach(id => { document.getElementById(id).checked = false; });
|
|
}
|
|
|
|
async function saveInstance() {
|
|
const name = document.getElementById('f-name').value.trim();
|
|
const vmid = parseInt(document.getElementById('f-vmid').value, 10);
|
|
const state = document.getElementById('f-state').value;
|
|
const stack = document.getElementById('f-stack').value;
|
|
|
|
if (!name) { showToast('name is required', 'error'); return; }
|
|
if (!vmid || vmid < 1) { showToast('a valid vmid is required', 'error'); return; }
|
|
|
|
const data = {
|
|
name, state, stack, vmid,
|
|
tailscale_ip: document.getElementById('f-tailscale-ip').value.trim(),
|
|
atlas: +document.getElementById('f-atlas').checked,
|
|
argus: +document.getElementById('f-argus').checked,
|
|
semaphore: +document.getElementById('f-semaphore').checked,
|
|
patchmon: +document.getElementById('f-patchmon').checked,
|
|
tailscale: +document.getElementById('f-tailscale').checked,
|
|
andromeda: +document.getElementById('f-andromeda').checked,
|
|
hardware_acceleration: +document.getElementById('f-hardware-accel').checked,
|
|
};
|
|
|
|
const result = editingVmid
|
|
? await updateInstance(editingVmid, data)
|
|
: await createInstance(data);
|
|
|
|
if (!result.ok) { showToast(result.error, 'error'); return; }
|
|
|
|
showToast(`${name} ${editingVmid ? 'updated' : 'created'}`, 'success');
|
|
closeModal();
|
|
|
|
if (currentVmid && document.getElementById('page-detail').classList.contains('active')) {
|
|
await renderDetailPage(vmid);
|
|
} else {
|
|
await renderDashboard();
|
|
}
|
|
}
|
|
|
|
// ── Confirm Dialog ────────────────────────────────────────────────────────────
|
|
|
|
function confirmDeleteDialog(inst) {
|
|
if (inst.stack !== 'development') {
|
|
showToast(`demote ${inst.name} to development before deleting`, 'error');
|
|
return;
|
|
}
|
|
document.getElementById('confirm-title').textContent = `delete ${inst.name}?`;
|
|
document.getElementById('confirm-msg').textContent =
|
|
`This will permanently remove instance "${inst.name}" (vmid: ${inst.vmid}) from Catalyst. This action cannot be undone.`;
|
|
document.getElementById('confirm-ok').onclick = () => doDelete(inst.vmid, inst.name);
|
|
document.getElementById('confirm-overlay').classList.add('open');
|
|
}
|
|
|
|
function closeConfirm() {
|
|
document.getElementById('confirm-overlay').classList.remove('open');
|
|
}
|
|
|
|
async function doDelete(vmid, name) {
|
|
closeConfirm();
|
|
await deleteInstance(vmid);
|
|
showToast(`${name} deleted`, 'success');
|
|
navigate('dashboard');
|
|
}
|
|
|
|
// ── Toast ─────────────────────────────────────────────────────────────────────
|
|
|
|
function showToast(msg, type = 'success') {
|
|
const t = document.getElementById('toast');
|
|
document.getElementById('toast-msg').textContent = msg;
|
|
t.className = `toast ${type} show`;
|
|
clearTimeout(toastTimer);
|
|
toastTimer = setTimeout(() => t.classList.remove('show'), 3000);
|
|
}
|
|
|
|
// ── Settings Modal ────────────────────────────────────────────────────────────
|
|
|
|
function openSettingsModal() {
|
|
const sel = document.getElementById('tz-select');
|
|
if (!sel.options.length) {
|
|
for (const { label, tz } of TIMEZONES) {
|
|
const opt = document.createElement('option');
|
|
opt.value = tz;
|
|
opt.textContent = label;
|
|
sel.appendChild(opt);
|
|
}
|
|
}
|
|
sel.value = getTimezone();
|
|
document.getElementById('settings-modal').classList.add('open');
|
|
}
|
|
|
|
function closeSettingsModal() {
|
|
document.getElementById('settings-modal').classList.remove('open');
|
|
document.getElementById('import-file').value = '';
|
|
}
|
|
|
|
async function exportDB() {
|
|
const res = await fetch('/api/export');
|
|
const blob = await res.blob();
|
|
const url = URL.createObjectURL(blob);
|
|
const a = document.createElement('a');
|
|
a.href = url;
|
|
a.download = `catalyst-backup-${new Date().toISOString().slice(0, 10)}.json`;
|
|
a.click();
|
|
URL.revokeObjectURL(url);
|
|
}
|
|
|
|
async function importDB() {
|
|
const file = document.getElementById('import-file').files[0];
|
|
if (!file) { showToast('Select a backup file first', 'error'); return; }
|
|
document.getElementById('confirm-title').textContent = 'Replace all instances?';
|
|
document.getElementById('confirm-msg').textContent =
|
|
`This will delete all current instances and replace them with the contents of "${file.name}". This cannot be undone.`;
|
|
document.getElementById('confirm-overlay').classList.add('open');
|
|
document.getElementById('confirm-ok').onclick = async () => {
|
|
closeConfirm();
|
|
try {
|
|
const { instances, history = [] } = JSON.parse(await file.text());
|
|
const res = await fetch('/api/import', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ instances, history }),
|
|
});
|
|
const data = await res.json();
|
|
if (!res.ok) { showToast(data.error ?? 'Import failed', 'error'); return; }
|
|
showToast(`Imported ${data.imported} instance${data.imported !== 1 ? 's' : ''}`, 'success');
|
|
closeSettingsModal();
|
|
renderDashboard();
|
|
} catch {
|
|
showToast('Invalid backup file', 'error');
|
|
}
|
|
};
|
|
}
|
|
|
|
// ── Keyboard / backdrop ───────────────────────────────────────────────────────
|
|
|
|
document.addEventListener('keydown', e => {
|
|
if (e.key !== 'Escape') return;
|
|
if (document.getElementById('instance-modal').classList.contains('open')) { closeModal(); return; }
|
|
if (document.getElementById('confirm-overlay').classList.contains('open')) { closeConfirm(); return; }
|
|
if (document.getElementById('settings-modal').classList.contains('open')) { closeSettingsModal(); return; }
|
|
});
|
|
|
|
document.getElementById('instance-modal').addEventListener('click', e => {
|
|
if (e.target === document.getElementById('instance-modal')) closeModal();
|
|
});
|
|
document.getElementById('confirm-overlay').addEventListener('click', e => {
|
|
if (e.target === document.getElementById('confirm-overlay')) closeConfirm();
|
|
});
|
|
document.getElementById('settings-modal').addEventListener('click', e => {
|
|
if (e.target === document.getElementById('settings-modal')) closeSettingsModal();
|
|
});
|
|
|
|
document.getElementById('tz-select').addEventListener('change', e => {
|
|
localStorage.setItem('catalyst_tz', e.target.value);
|
|
const m = window.location.pathname.match(/^\/instance\/(\d+)/);
|
|
if (m) renderDetailPage(parseInt(m[1], 10));
|
|
else renderDashboard();
|
|
});
|
|
|
|
// ── Jobs Page ─────────────────────────────────────────────────────────────────
|
|
|
|
async function renderJobsPage() {
|
|
const jobs = await fetch('/api/jobs').then(r => r.json());
|
|
_updateJobsNavDot(jobs);
|
|
document.getElementById('jobs-list').innerHTML = jobs.length
|
|
? jobs.map(j => `
|
|
<div class="job-item" id="job-item-${j.id}" onclick="loadJobDetail(${j.id})">
|
|
<span class="job-dot job-dot--${j.last_status ?? 'none'}"></span>
|
|
<span class="job-item-name">${esc(j.name)}</span>
|
|
</div>`).join('')
|
|
: '<div class="jobs-placeholder">No jobs</div>';
|
|
if (jobs.length) loadJobDetail(jobs[0].id);
|
|
}
|
|
|
|
async function loadJobDetail(jobId) {
|
|
document.querySelectorAll('.job-item').forEach(el => el.classList.remove('active'));
|
|
document.getElementById(`job-item-${jobId}`)?.classList.add('active');
|
|
const job = await fetch(`/api/jobs/${jobId}`).then(r => r.json());
|
|
const cfg = job.config ?? {};
|
|
document.getElementById('jobs-detail').innerHTML = `
|
|
<div class="jobs-detail-hd">
|
|
<div class="jobs-detail-title">${esc(job.name)}</div>
|
|
<div class="jobs-detail-desc">${esc(job.description)}</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label" style="display:flex;align-items:center;gap:8px;cursor:pointer">
|
|
<input type="checkbox" id="job-enabled" ${job.enabled ? 'checked' : ''}
|
|
style="accent-color:var(--accent);width:13px;height:13px">
|
|
Enable scheduled runs
|
|
</label>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label" for="job-schedule">Poll interval (minutes)</label>
|
|
<input class="form-input" id="job-schedule" type="number" min="1" value="${job.schedule}" style="max-width:100px">
|
|
</div>
|
|
${_renderJobConfigFields(job.key, cfg)}
|
|
<div class="job-actions">
|
|
<button class="btn btn-secondary" onclick="saveJobDetail(${job.id})">Save</button>
|
|
<button class="btn btn-secondary" id="job-run-btn" onclick="runJobNow(${job.id})">Run Now</button>
|
|
</div>
|
|
<div class="detail-section-title" style="margin:28px 0 10px">Run History</div>
|
|
${_renderRunList(job.runs)}
|
|
`;
|
|
}
|
|
|
|
function _renderJobConfigFields(key, cfg) {
|
|
if (key === 'tailscale_sync') return `
|
|
<div class="form-group">
|
|
<label class="form-label" for="job-cfg-tailnet">Tailnet</label>
|
|
<input class="form-input" id="job-cfg-tailnet" type="text"
|
|
placeholder="e.g. Tt3Btpm6D921CNTRL" value="${esc(cfg.tailnet ?? '')}">
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label" for="job-cfg-api-key">API Key</label>
|
|
<input class="form-input" id="job-cfg-api-key" type="password"
|
|
placeholder="tskey-api-…" value="${esc(cfg.api_key ?? '')}">
|
|
</div>`;
|
|
if (key === 'patchmon_sync') return `
|
|
<div class="form-group">
|
|
<label class="form-label" for="job-cfg-api-url">API URL</label>
|
|
<input class="form-input" id="job-cfg-api-url" type="text"
|
|
placeholder="http://patchmon:3000/api/v1/api/hosts" value="${esc(cfg.api_url ?? '')}">
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label" for="job-cfg-api-token">API Token (Basic)</label>
|
|
<input class="form-input" id="job-cfg-api-token" type="password"
|
|
placeholder="Basic token…" value="${esc(cfg.api_token ?? '')}">
|
|
</div>`;
|
|
return '';
|
|
}
|
|
|
|
function _renderRunList(runs) {
|
|
if (!runs?.length) return '<div class="run-empty">No runs yet</div>';
|
|
return `<div class="run-list">${runs.map(r => `
|
|
<div class="run-item">
|
|
<span class="job-dot job-dot--${r.status}"></span>
|
|
<span class="run-time">${fmtDateFull(r.started_at)}</span>
|
|
<span class="run-status">${esc(r.status)}</span>
|
|
<span class="run-result">${esc(r.result)}</span>
|
|
</div>`).join('')}</div>`;
|
|
}
|
|
|
|
async function saveJobDetail(jobId) {
|
|
const enabled = document.getElementById('job-enabled').checked;
|
|
const schedule = document.getElementById('job-schedule').value;
|
|
const cfg = {};
|
|
const tailnet = document.getElementById('job-cfg-tailnet');
|
|
const apiKey = document.getElementById('job-cfg-api-key');
|
|
const apiUrl = document.getElementById('job-cfg-api-url');
|
|
const apiToken = document.getElementById('job-cfg-api-token');
|
|
if (tailnet) cfg.tailnet = tailnet.value.trim();
|
|
if (apiKey) cfg.api_key = apiKey.value;
|
|
if (apiUrl) cfg.api_url = apiUrl.value.trim();
|
|
if (apiToken) cfg.api_token = apiToken.value;
|
|
const res = await fetch(`/api/jobs/${jobId}`, {
|
|
method: 'PUT',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ enabled, schedule: parseInt(schedule, 10), config: cfg }),
|
|
});
|
|
if (res.ok) { showToast('Job saved', 'success'); loadJobDetail(jobId); }
|
|
else { showToast('Failed to save', 'error'); }
|
|
}
|
|
|
|
async function runJobNow(jobId) {
|
|
const btn = document.getElementById('job-run-btn');
|
|
btn.disabled = true;
|
|
btn.textContent = 'Running…';
|
|
try {
|
|
const res = await fetch(`/api/jobs/${jobId}/run`, { method: 'POST' });
|
|
const data = await res.json();
|
|
if (res.ok) { showToast(`Done — ${data.summary}`, 'success'); loadJobDetail(jobId); }
|
|
else { showToast(data.error ?? 'Run failed', 'error'); }
|
|
} catch { showToast('Run failed', 'error'); }
|
|
finally { btn.disabled = false; btn.textContent = 'Run Now'; }
|
|
}
|
|
|
|
function _updateJobsNavDot(jobs) {
|
|
const dot = document.getElementById('nav-jobs-dot');
|
|
const cls = jobs.some(j => j.last_status === 'error') ? 'error'
|
|
: jobs.some(j => j.last_status === 'success') ? 'success'
|
|
: 'none';
|
|
dot.className = `nav-job-dot nav-job-dot--${cls}`;
|
|
}
|