tuandClaude Opus 4.7
cdfb6d4ecd
Initial-bootstrap failure stopped the poll interval from ever starting, and even once running, refresh() never reset the indicator back to 'polling' on success — so a single upstream blip pinned the plugin in an error state until the user reloaded the page. refresh() now loads namespaces on demand (absorbs bootstrap), the interval is started unconditionally on show(), and every successful poll flips the indicator back to green. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
570 lines
23 KiB
JavaScript
570 lines
23 KiB
JavaScript
// ── Oumta Dashboard plugin ──
|
|
//
|
|
// Fullscreen view that consumes the Oumta Go backend (`oumta-dashboard`).
|
|
// The browser talks to /api/dashboard/* same-origin; the hyprcrd PHP
|
|
// backend forwards to the real upstream (see OUMTA_DASHBOARD_URL in
|
|
// config.php). Keeps CORS out of the browser and lets the dashboard
|
|
// live on a private network reachable only by the hyprcrd container.
|
|
|
|
const h = window.hyprcrd;
|
|
const $ = id => document.getElementById(id);
|
|
|
|
const CONFIG = {
|
|
proxyPrefix: '/api/dashboard',
|
|
pollIntervalSec: 15,
|
|
};
|
|
|
|
const state = {
|
|
namespaces: [], // [{ id, label, namespace }]
|
|
activeNamespace: null,
|
|
activeView: 'overview',
|
|
liveMode: 'polling', // 'live' | 'polling' | 'error' | 'off'
|
|
pollHandle: null,
|
|
sseHandle: null,
|
|
data: { overview: null, workloads: [], timeline: [], scopeWorkload: null },
|
|
timelineFilter: new Set(), // empty = all events; else any-of workloadIds (multi-select pills)
|
|
};
|
|
|
|
// ── Central API surface ─────────────────────────────────────────
|
|
//
|
|
// Every backend call routes through `api()` against the same-origin
|
|
// proxy prefix; the active namespace (if any) is attached as a
|
|
// `namespace` query parameter. Auth / bearer tokens live server-side
|
|
// in config.php, so nothing sensitive ships to the browser. Response
|
|
// shapes are defined by the Go backend in
|
|
// `internal/httpapi/contracts.go`.
|
|
|
|
async function api(path, opts = {}) {
|
|
const url = new URL(CONFIG.proxyPrefix + path, window.location.origin);
|
|
if (!url.searchParams.has('namespace') && state.activeNamespace) {
|
|
url.searchParams.set('namespace', state.activeNamespace.namespace);
|
|
}
|
|
const res = await fetch(url, opts);
|
|
if (!res.ok) throw new Error(`${res.status}: ${await res.text()}`);
|
|
return res.json();
|
|
}
|
|
|
|
// ── Fullscreen overlay show/hide ─────────────────────────────────
|
|
|
|
const overlay = $('oumta-overlay');
|
|
|
|
function isOpen() {
|
|
return overlay?.classList.contains('open');
|
|
}
|
|
function show() {
|
|
if (!overlay) return;
|
|
overlay.classList.add('open');
|
|
// Always kick off polling — refresh() self-heals: it loads namespaces
|
|
// if they aren't there yet, and the interval keeps retrying even if
|
|
// the initial poll fails. Previously an initial bootstrap failure
|
|
// stopped the loop entirely and required a page reload to recover.
|
|
refresh();
|
|
startLive();
|
|
}
|
|
function hide() {
|
|
if (!overlay) return;
|
|
overlay.classList.remove('open');
|
|
stopLive();
|
|
}
|
|
function toggle() {
|
|
isOpen() ? hide() : show();
|
|
}
|
|
window._oumtaToggle = toggle;
|
|
|
|
function renderNamespaceTabs() {
|
|
const host = $('oumta-ns-tabs');
|
|
if (!host) return;
|
|
host.innerHTML = state.namespaces.map(n => `
|
|
<button class="oumta-ns-tab ${state.activeNamespace?.id === n.id ? 'active' : ''}" data-ns="${n.id}">
|
|
${n.label}
|
|
</button>
|
|
`).join('');
|
|
host.querySelectorAll('.oumta-ns-tab').forEach(btn => {
|
|
btn.addEventListener('click', () => {
|
|
const ns = state.namespaces.find(x => x.id === btn.dataset.ns);
|
|
if (ns && ns.id !== state.activeNamespace?.id) {
|
|
state.activeNamespace = ns;
|
|
renderNamespaceTabs();
|
|
refresh();
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
// ── View switching ────────────────────────────────────────────
|
|
|
|
document.addEventListener('click', e => {
|
|
const tab = e.target.closest('.oumta-view-tab');
|
|
if (!tab || !overlay.contains(tab)) return;
|
|
switchView(tab.dataset.view);
|
|
});
|
|
|
|
function switchView(view) {
|
|
state.activeView = view;
|
|
document.querySelectorAll('.oumta-view-tab').forEach(b =>
|
|
b.classList.toggle('active', b.dataset.view === view));
|
|
document.querySelectorAll('.oumta-view').forEach(s =>
|
|
s.classList.toggle('hidden', s.dataset.view !== view));
|
|
// Reset workload-scoped timeline when leaving timeline view
|
|
if (view !== 'timeline') state.data.scopeWorkload = null;
|
|
renderTimeline();
|
|
}
|
|
|
|
// ── Refresh all data for the active namespace ──────────────────
|
|
//
|
|
// Self-healing: if namespaces aren't loaded yet (e.g. initial poll
|
|
// failed), fetch them first; if upstream is down, leave state as
|
|
// 'error' and let the next interval tick try again. On any successful
|
|
// poll we flip back to 'polling' so the indicator recovers without a
|
|
// page reload.
|
|
|
|
async function refresh() {
|
|
try {
|
|
if (!state.activeNamespace) {
|
|
const res = await api('/api/namespaces');
|
|
state.namespaces = res.items || [];
|
|
state.activeNamespace = state.namespaces[0] || null;
|
|
renderNamespaceTabs();
|
|
}
|
|
if (!state.activeNamespace) {
|
|
// Namespaces endpoint returned empty — nothing to poll yet.
|
|
// Stay in 'polling' so we keep retrying on the interval.
|
|
setLive('polling');
|
|
return;
|
|
}
|
|
const [ov, wl, tl] = await Promise.all([
|
|
api('/api/cluster/overview'),
|
|
api('/api/workloads'),
|
|
api('/api/timeline'),
|
|
]);
|
|
state.data.overview = ov;
|
|
state.data.workloads = wl.items || [];
|
|
state.data.timeline = tl.items || [];
|
|
renderAll();
|
|
setLive('polling');
|
|
} catch (e) {
|
|
setLive('error', e.message);
|
|
}
|
|
}
|
|
|
|
// ── Renderers ─────────────────────────────────────────────────
|
|
|
|
function renderAll() {
|
|
renderOverview();
|
|
renderWorkloads();
|
|
renderTimeline();
|
|
const genAt = state.data.overview?.updatedAtUtc;
|
|
const el = $('oumta-generated-at');
|
|
if (el && genAt) el.textContent = 'last import: ' + formatTime(genAt);
|
|
}
|
|
|
|
function renderOverview() {
|
|
const o = state.data.overview;
|
|
const wl = state.data.workloads || [];
|
|
if (!o) return;
|
|
|
|
// Values that come directly from the Go overview endpoint [REAL].
|
|
const clusterCard = $('oumta-cluster-card');
|
|
const clusterState = o.clusterState || 'unknown';
|
|
clusterCard.dataset.state = clusterState;
|
|
clusterCard.classList.toggle('oumta-fail', clusterState === 'down');
|
|
$('oumta-cluster-state').textContent = clusterState;
|
|
$('oumta-cluster-updated').textContent = o.updatedAtUtc ? 'as of ' + formatTime(o.updatedAtUtc) : 'no data';
|
|
$('oumta-workloads-up').textContent = o.workloadsUp ?? '—';
|
|
$('oumta-workloads-down').textContent = o.workloadsDown ?? '—';
|
|
$('oumta-last-import').textContent = o.updatedAtUtc ? formatTime(o.updatedAtUtc) : '—';
|
|
|
|
// Any workload down → the "workloads down" tile becomes an alarm tile.
|
|
const downCard = $('oumta-workloads-down').closest('.oumta-card');
|
|
if (downCard) downCard.classList.toggle('oumta-fail', (o.workloadsDown ?? 0) > 0);
|
|
|
|
// Values derived client-side from the workloads list — the overview
|
|
// endpoint doesn't carry these today. If the backend later adds
|
|
// `incidents` / `attention` fields, prefer those over the derivation.
|
|
const attention = wl.filter(w => w.state !== 'healthy')
|
|
.sort((a, b) => rankState(a.state) - rankState(b.state));
|
|
$('oumta-incidents').textContent = attention.length || '—';
|
|
const incCard = $('oumta-incidents').closest('.oumta-card');
|
|
if (incCard) incCard.classList.toggle('oumta-fail', attention.length > 0);
|
|
|
|
const list = $('oumta-attention-list');
|
|
if (!attention.length) {
|
|
list.innerHTML = '<div class="oumta-empty">Nothing currently flagged.</div>';
|
|
return;
|
|
}
|
|
list.innerHTML = attention.map(a => `
|
|
<div class="oumta-attention-row" data-wlid="${escapeAttr(a.workloadId)}">
|
|
<span class="oumta-attention-state" data-state="${a.state}">${a.state}</span>
|
|
<span class="oumta-attention-name">${escapeHtml(a.name)}</span>
|
|
<span class="oumta-attention-ns">${escapeHtml(a.namespace)}</span>
|
|
<span class="oumta-attention-reason">${escapeHtml(a.lastReason || '')}</span>
|
|
</div>
|
|
`).join('');
|
|
list.querySelectorAll('.oumta-attention-row').forEach(row => {
|
|
row.addEventListener('click', () => openWorkload(row.dataset.wlid));
|
|
});
|
|
}
|
|
|
|
// Severity order for the attention list: worst first.
|
|
function rankState(s) {
|
|
return { unavailable: 0, degraded: 1, healthy: 2 }[s] ?? 9;
|
|
}
|
|
|
|
function renderWorkloads() {
|
|
const search = ($('oumta-wl-search').value || '').toLowerCase();
|
|
const filterState = $('oumta-wl-status').value;
|
|
const body = $('oumta-wl-body');
|
|
const rows = (state.data.workloads || []).filter(w => {
|
|
if (search && !w.name.toLowerCase().includes(search)) return false;
|
|
if (filterState && w.state !== filterState) return false;
|
|
return true;
|
|
});
|
|
if (!rows.length) {
|
|
body.innerHTML = '<tr><td colspan="8" class="oumta-empty">No workloads match.</td></tr>';
|
|
return;
|
|
}
|
|
body.innerHTML = rows.map(w => `
|
|
<tr data-wlid="${escapeAttr(w.workloadId)}">
|
|
<td>${escapeHtml(w.name)}</td>
|
|
<td>${escapeHtml(w.namespace)}</td>
|
|
<td class="wl-state-${w.state}">${w.state}</td>
|
|
<td>${w.replicasReady}/${w.replicasDesired}</td>
|
|
<td>${escapeHtml(w.cpu)}</td>
|
|
<td>${escapeHtml(w.memory)}</td>
|
|
<td>${escapeHtml(w.image)}</td>
|
|
<td>${escapeHtml(w.lastReason)}</td>
|
|
</tr>
|
|
`).join('');
|
|
body.querySelectorAll('tr').forEach(tr => {
|
|
tr.addEventListener('click', () => openWorkload(tr.dataset.wlid));
|
|
});
|
|
}
|
|
|
|
// ── Timeline helpers ──────────────────────────────────────────
|
|
|
|
const TL_CLUSTER_WINDOW_MS = 60_000; // events within 60s collapse into one entry
|
|
const TL_SEV_RANK = { error: 5, warning: 4, recovered: 3, image: 2, info: 1 };
|
|
const TL_MONTHS = ['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC'];
|
|
|
|
/** Normalise an event's severity. Two post-hoc classifications matter:
|
|
* "-> healthy" transitions are recoveries, and ImageRolled reasons are
|
|
* real image pushes (vs. plain revision bumps which are just info). */
|
|
function eventSev(e) {
|
|
const isRecovery = typeof e.message === 'string' && e.message.endsWith('-> healthy');
|
|
const isImageRoll = e.reason === 'ImageRolled';
|
|
if (isRecovery) return 'recovered';
|
|
if (isImageRoll) return 'image';
|
|
return e.severity || 'info';
|
|
}
|
|
|
|
/** Workload short-name for the filter pill (strip namespace prefix). */
|
|
function workloadShort(id) {
|
|
if (!id) return '?';
|
|
const parts = id.split('/');
|
|
return parts[parts.length - 1] || id;
|
|
}
|
|
|
|
/** Greedy clustering: walk events (assumed newest-first) and start a new
|
|
* cluster whenever the gap exceeds the tolerance window. */
|
|
function clusterEvents(events) {
|
|
const clusters = [];
|
|
let current = null;
|
|
for (const e of events) {
|
|
const ts = Date.parse(e.timestamp);
|
|
if (!current || isNaN(ts) || Math.abs(current.anchorTs - ts) > TL_CLUSTER_WINDOW_MS) {
|
|
current = { anchorTs: ts, ts: e.timestamp, events: [e] };
|
|
clusters.push(current);
|
|
} else {
|
|
current.events.push(e);
|
|
}
|
|
}
|
|
return clusters;
|
|
}
|
|
|
|
function dominantSev(events) {
|
|
let best = null;
|
|
for (const e of events) {
|
|
const sev = eventSev(e);
|
|
if (!best || TL_SEV_RANK[sev] > TL_SEV_RANK[best]) best = sev;
|
|
}
|
|
return best || 'info';
|
|
}
|
|
|
|
function sameDay(a, b) {
|
|
const da = new Date(a), db = new Date(b);
|
|
return da.getFullYear() === db.getFullYear()
|
|
&& da.getMonth() === db.getMonth()
|
|
&& da.getDate() === db.getDate();
|
|
}
|
|
|
|
function formatTimeShort(iso) {
|
|
const d = new Date(iso);
|
|
if (isNaN(d.getTime())) return iso;
|
|
const now = new Date();
|
|
if (Math.abs(now - d) < 60_000) return 'just now';
|
|
const hh = String(d.getHours()).padStart(2, '0');
|
|
const mm = String(d.getMinutes()).padStart(2, '0');
|
|
return `${hh}:${mm}`;
|
|
}
|
|
|
|
function renderTimeline() {
|
|
const scope = state.data.scopeWorkload;
|
|
const scopeEl = $('oumta-timeline-scope');
|
|
const backEl = $('oumta-timeline-back');
|
|
if (scope) {
|
|
scopeEl.textContent = 'events for ' + scope;
|
|
backEl.classList.remove('hidden');
|
|
} else {
|
|
const n = state.timelineFilter.size;
|
|
scopeEl.textContent = n === 0 ? 'all events' : `filtered · ${n}`;
|
|
backEl.classList.add('hidden');
|
|
}
|
|
const filter = state.timelineFilter;
|
|
const events = state.data.timeline.filter(e => {
|
|
if (scope) return e.workloadId === scope;
|
|
if (filter.size === 0) return true;
|
|
return filter.has(e.workloadId);
|
|
});
|
|
renderTimelineFilters();
|
|
|
|
const body = $('oumta-timeline-body');
|
|
if (!events.length) {
|
|
body.innerHTML = '<div class="oumta-empty">No events.</div>';
|
|
return;
|
|
}
|
|
const clusters = clusterEvents(events);
|
|
|
|
let lastDate = null;
|
|
body.innerHTML = clusters.map(cluster => {
|
|
const sev = dominantSev(cluster.events);
|
|
const showDate = !lastDate || !sameDay(lastDate, cluster.ts);
|
|
lastDate = cluster.ts;
|
|
const d = new Date(cluster.ts);
|
|
const badge = showDate
|
|
? `<div class="oumta-tl-date" title="${escapeAttr(d.toDateString())}">
|
|
<span class="day">${d.getDate()}</span>
|
|
<span class="mon">${TL_MONTHS[d.getMonth()]}</span>
|
|
</div>`
|
|
: '';
|
|
const left = `
|
|
${badge}
|
|
<div class="oumta-tl-row">
|
|
<span class="oumta-tl-time">${escapeHtml(formatTimeShort(cluster.ts))}</span>
|
|
<span class="oumta-tl-dot" data-sev="${sev}"></span>
|
|
</div>`;
|
|
const right = `
|
|
<div class="oumta-tl-right">
|
|
${cluster.events.map(e => {
|
|
const esev = eventSev(e);
|
|
const wid = e.workloadId || '';
|
|
return `
|
|
<div class="oumta-tl-event">
|
|
<div class="oumta-tl-event-head">
|
|
<span class="oumta-tl-severity" data-sev="${esev}">${esev}</span>
|
|
<span class="oumta-tl-workload" data-wlid="${escapeAttr(wid)}" title="filter by this workload">${escapeHtml(workloadShort(wid))}</span>
|
|
<span class="oumta-tl-reason">${escapeHtml(e.reason || '')}</span>
|
|
</div>
|
|
<div class="oumta-tl-message">${escapeHtml(e.message || '')}</div>
|
|
</div>
|
|
`;
|
|
}).join('')}
|
|
</div>`;
|
|
return `<div class="oumta-timeline-entry">${left}${right}</div>`;
|
|
}).join('');
|
|
|
|
// Tapping a workload name inside an event toggles it in the filter set.
|
|
body.querySelectorAll('.oumta-tl-workload').forEach(el => {
|
|
el.addEventListener('click', () => toggleTimelineFilter(el.dataset.wlid));
|
|
});
|
|
}
|
|
|
|
/** Toggle a workload in the multi-select filter set. Passing an empty
|
|
* value clears the set (the "all" pill). */
|
|
function toggleTimelineFilter(workloadId) {
|
|
const set = state.timelineFilter;
|
|
if (!workloadId) { set.clear(); }
|
|
else if (set.has(workloadId)) { set.delete(workloadId); }
|
|
else { set.add(workloadId); }
|
|
renderTimeline();
|
|
}
|
|
|
|
/** Render the workload quick-pick bar. "all" + distinct workloads seen in
|
|
* the current timeline, capped at N inline pills — overflow collapses
|
|
* into a dropdown. Deduplicated by workloadId, ranked by most recent
|
|
* event so the pills you care about stay visible. */
|
|
function renderTimelineFilters() {
|
|
const host = $('oumta-timeline-filters');
|
|
if (!host) return;
|
|
// In workload-detail scope (opened via a card click) the filter bar is
|
|
// redundant — we're already showing one workload's events.
|
|
if (state.data.scopeWorkload) { host.innerHTML = ''; return; }
|
|
|
|
const seen = new Map(); // workloadId -> earliest-seen index (= recency)
|
|
state.data.timeline.forEach((e, i) => {
|
|
if (e.workloadId && !seen.has(e.workloadId)) seen.set(e.workloadId, i);
|
|
});
|
|
const workloads = [...seen.keys()];
|
|
if (!workloads.length) { host.innerHTML = ''; return; }
|
|
|
|
const INLINE_LIMIT = 6;
|
|
const inline = workloads.slice(0, INLINE_LIMIT);
|
|
const overflow = workloads.slice(INLINE_LIMIT);
|
|
const active = state.timelineFilter; // Set<workloadId>
|
|
|
|
const pill = (id, label, isActive) =>
|
|
`<button class="oumta-tl-pill${isActive ? ' active' : ''}" data-wlid="${escapeAttr(id)}">${escapeHtml(label)}</button>`;
|
|
|
|
// "all" is active whenever the filter set is empty; picking it clears
|
|
// the set. The individual pills toggle their workload in the set so
|
|
// multiple filters can stack (any-of match).
|
|
const overflowActiveCount = overflow.reduce((n, id) => n + (active.has(id) ? 1 : 0), 0);
|
|
host.innerHTML = [
|
|
pill('', 'all', active.size === 0),
|
|
...inline.map(id => pill(id, workloadShort(id), active.has(id))),
|
|
overflow.length ? `
|
|
<div class="oumta-tl-more">
|
|
<button class="oumta-tl-pill${overflowActiveCount ? ' active' : ''}" data-tl-more="1">+${overflow.length} more${overflowActiveCount ? ` (${overflowActiveCount})` : ''}<i class="ph ph-caret-down" style="font-size:10px;margin-left:4px;"></i></button>
|
|
<div class="oumta-tl-more-menu hidden">
|
|
${overflow.map(id => `<button class="${active.has(id) ? 'active' : ''}" data-wlid="${escapeAttr(id)}">${escapeHtml(workloadShort(id))}</button>`).join('')}
|
|
</div>
|
|
</div>` : '',
|
|
].filter(Boolean).join('');
|
|
|
|
host.querySelectorAll('.oumta-tl-pill[data-wlid]').forEach(btn => {
|
|
btn.addEventListener('click', () => toggleTimelineFilter(btn.dataset.wlid || ''));
|
|
});
|
|
const moreBtn = host.querySelector('[data-tl-more]');
|
|
const moreMenu = host.querySelector('.oumta-tl-more-menu');
|
|
if (moreBtn && moreMenu) {
|
|
moreBtn.addEventListener('click', (e) => {
|
|
e.stopPropagation();
|
|
moreMenu.classList.toggle('hidden');
|
|
});
|
|
// Overflow picks don't close the menu — multi-select UX relies on
|
|
// being able to tick several without the menu collapsing every time.
|
|
moreMenu.querySelectorAll('button[data-wlid]').forEach(btn => {
|
|
btn.addEventListener('click', (e) => {
|
|
e.stopPropagation();
|
|
toggleTimelineFilter(btn.dataset.wlid || '');
|
|
});
|
|
});
|
|
document.addEventListener('click', (e) => {
|
|
if (!moreMenu.contains(e.target) && e.target !== moreBtn) moreMenu.classList.add('hidden');
|
|
}, { once: true });
|
|
}
|
|
}
|
|
|
|
// ── Workload → detail-as-timeline navigation ──────────────────
|
|
|
|
async function openWorkload(workloadId) {
|
|
state.data.scopeWorkload = workloadId;
|
|
const [nsSlug, name] = workloadId.replace('deployment/', '').split('/');
|
|
// Pull workload-scoped timeline — this REPLACES the generic one for rendering.
|
|
try {
|
|
const res = await api(`/api/workloads/${nsSlug}/${name}/timeline`);
|
|
state.data.timeline = res.items || [];
|
|
} catch (e) { setLive('error', e.message); }
|
|
switchView('timeline');
|
|
}
|
|
|
|
$('oumta-timeline-back')?.addEventListener('click', () => {
|
|
state.data.scopeWorkload = null;
|
|
// Restore the global timeline
|
|
api('/api/timeline').then(r => {
|
|
state.data.timeline = r.items || [];
|
|
renderTimeline();
|
|
}).catch(e => setLive('error', e.message));
|
|
});
|
|
|
|
// ── Polling loop ──────────────────────────────────────────────
|
|
//
|
|
// SSE intentionally unsupported: the PHP proxy buffers whole responses,
|
|
// so streaming through it would pin an Apache worker per client. If we
|
|
// ever want live events, bypass the proxy and talk to the Go backend's
|
|
// WebSocket / SSE endpoint directly — browsers don't enforce CORS on
|
|
// WS, and SSE would need a short-lived signed URL from the proxy.
|
|
|
|
function startLive() {
|
|
stopLive();
|
|
startPolling();
|
|
}
|
|
function stopLive() {
|
|
if (state.pollHandle) { clearInterval(state.pollHandle); state.pollHandle = null; }
|
|
if (state.sseHandle) { state.sseHandle.close(); state.sseHandle = null; }
|
|
setLive('off');
|
|
}
|
|
function startPolling() {
|
|
const ms = (CONFIG.pollIntervalSec || 15) * 1000;
|
|
state.pollHandle = setInterval(refresh, ms);
|
|
setLive('polling');
|
|
}
|
|
|
|
function setLive(mode, detail = '') {
|
|
state.liveMode = mode;
|
|
const el = $('oumta-live-indicator');
|
|
const lbl = $('oumta-live-label');
|
|
if (el) el.dataset.state = mode;
|
|
if (lbl) {
|
|
lbl.textContent = ({
|
|
live: 'live',
|
|
polling: 'polling',
|
|
error: 'error' + (detail ? ' — ' + detail : ''),
|
|
off: 'off',
|
|
})[mode] || mode;
|
|
}
|
|
}
|
|
|
|
// ── Header buttons ───────────────────────────────────────────
|
|
|
|
$('oumta-close')?.addEventListener('click', hide);
|
|
$('oumta-refresh')?.addEventListener('click', refresh);
|
|
$('oumta-wl-search')?.addEventListener('input', renderWorkloads);
|
|
$('oumta-wl-status')?.addEventListener('change', renderWorkloads);
|
|
$('oumta-wl-timerange')?.addEventListener('change', () => {
|
|
// TODO(api): forward to /api/workloads?since=<ISO> once the backend accepts it.
|
|
renderWorkloads();
|
|
});
|
|
|
|
// ESC to close
|
|
window.addEventListener('keydown', e => {
|
|
if (e.key === 'Escape' && isOpen()) {
|
|
e.preventDefault(); e.stopPropagation();
|
|
hide();
|
|
}
|
|
}, { capture: true });
|
|
|
|
// ── Inject header button into hyprcrd top bar ────────────────
|
|
|
|
function injectHeaderButton() {
|
|
const tasksBtn = document.getElementById('tasks-btn');
|
|
if (!tasksBtn || document.getElementById('oumta-btn')) return;
|
|
const btn = document.createElement('button');
|
|
btn.id = 'oumta-btn';
|
|
btn.className = 'flex items-center gap-2 px-2.5 py-1.5 text-xs border border-t-border text-t-muted hover:border-t-accent hover:text-t-accent transition-colors';
|
|
btn.innerHTML = '<i class="ph ph-gauge text-sm"></i><span class="font-pixel text-[10px]">Oumta</span>';
|
|
btn.addEventListener('click', toggle);
|
|
tasksBtn.parentNode.insertBefore(btn, tasksBtn);
|
|
}
|
|
if (document.readyState === 'loading') {
|
|
document.addEventListener('DOMContentLoaded', injectHeaderButton);
|
|
} else {
|
|
injectHeaderButton();
|
|
}
|
|
|
|
// ── Helpers ─────────────────────────────────────────────────
|
|
|
|
function escapeHtml(s) {
|
|
return String(s ?? '').replace(/[&<>"']/g, c => ({'&':'&','<':'<','>':'>','"':'"',"'":'''}[c]));
|
|
}
|
|
function escapeAttr(s) { return escapeHtml(s); }
|
|
function formatTime(iso) {
|
|
try {
|
|
const d = new Date(iso);
|
|
return d.toLocaleString();
|
|
} catch { return iso; }
|
|
}
|
|
|
|
// ── Boot ────────────────────────────────────────────────────
|
|
|
|
h?.registerPlugin?.({ name: 'oumta-dashboard', version: '0.1.0' });
|