// Ops Alerts panel: firing/pending Grafana alert rules (`devdesk attach --alerts`), // the Proxmox guest or node each is about (CT id, the node it runs on now), and // an "Ask Claude" button that starts an investigation in a session of its own // (devdesk#39). import { el } from './dom.js'; import { slugify } from './protocol.js'; const SEVERITY = { critical: 'lt-chip-critical', warning: 'lt-chip-warn', }; function age(iso) { const t = Date.parse(iso || ''); if (Number.isNaN(t)) return ''; const s = Math.max(0, (Date.now() - t) / 1000); if (s < 3600) return `${Math.max(1, Math.floor(s / 60))}m`; if (s < 86400) return `${Math.floor(s / 3600)}h`; return `${Math.floor(s / 86400)}d`; } // "CT 110 draupnir · monitor-02 · stopped", "node compute-storage-01". function targetLabel(t) { if (t.kind === 'unknown') return null; const what = t.kind === 'node' ? `node ${t.name}` : `${t.kind.toUpperCase()} ${t.id} ${t.name}`; const parts = [what, t.kind === 'node' ? null : t.node, t.status === 'running' || t.status === 'online' ? null : t.status]; return parts.filter(Boolean).join(' · ') + (t.by === 'name' ? ' (by name)' : ''); } function targetTitle(t) { const how = t.kind === 'ct' ? `ssh ${t.node} pct exec ${t.id} -- …` : t.kind === 'vm' ? `ssh ${t.node} qm guest exec ${t.id} -- …` : `ssh ${t.name}`; const note = t.by === 'name' ? '\nMatched by name, not by IP (the guest has not been seen running with this IP).' : t.ip_seen ? '\nIts IP when it was last seen running.' : ''; return `${how}${t.ha ? `\nHA state: ${t.ha}` : ''}${note}`; } export const alertSession = (alert) => slugify(`alert-${alert.name}`).toLowerCase().slice(0, 48) || 'alert'; export function renderAlerts(root, data) { const list = root.querySelector('.dd-alert-list'); const note = root.querySelector('.dd-alerts-note'); const count = root.querySelector('.dd-alert-count'); const alerts = data?.alerts ?? []; count.textContent = alerts.length ? String(alerts.length) : ''; count.className = `lt-badge lt-badge-sm dd-alert-count${alerts.some((a) => a.severity === 'critical') ? ' lt-badge-p1' : alerts.length ? ' lt-badge-p2' : ''}`; if (!data) { root.dataset.state = 'empty'; list.replaceChildren(el('li', { class: 'dd-empty' }, 'Loading…')); note.textContent = ''; return; } if (!data.configured) { root.dataset.state = 'empty'; list.replaceChildren(el('li', { class: 'dd-empty' }, 'Grafana is not configured.')); note.textContent = 'Set DEVDESK_GRAFANA_URL and a token file in /etc/devdesk/env.local.'; return; } root.dataset.state = 'live'; note.textContent = data.error ? `Grafana unreachable: ${data.error}` : ''; if (!alerts.length) { list.replaceChildren(el('li', { class: 'dd-all-clear' }, el('span', { class: 'lt-dot lt-dot-up' }), data.error ? 'No data' : 'All clear: nothing firing')); return; } list.replaceChildren(...alerts.map((a) => el('li', { class: `dd-alert is-${a.state}` }, el('div', { class: 'dd-alert-head' }, el('span', { class: `lt-chip ${SEVERITY[a.severity] || 'lt-chip-info'}` }, a.state === 'pending' ? 'pending' : (a.severity || 'alert')), el('a', { class: 'dd-alert-name', href: a.url, target: '_blank', rel: 'noopener', title: `${a.folder} / ${a.group}` }, a.name), el('span', { class: 'dd-muted dd-alert-age' }, age(a.since))), a.instances?.length ? el('div', { class: 'dd-muted dd-alert-instances' }, a.instances.join(' · ')) : null, ...(a.targets ?? []).map((t) => { const label = targetLabel(t); return label ? el('div', { class: `dd-alert-where${t.by === 'name' ? ' is-guess' : ''}`, title: targetTitle(t) }, label) : null; }), a.summary ? el('div', { class: 'dd-alert-summary' }, a.summary) : null, el('div', { class: 'dd-ask-row' }, el('button', { type: 'button', class: 'lt-btn lt-btn-sm dd-ask', 'data-investigate': a.uid, 'data-session': alertSession(a), title: `Start Claude in a new session (${alertSession(a)}) on this alert, with the rule, the query and where it runs (CT id, node)`, }, 'Ask Claude'))))); }