118 lines
4.1 KiB
JavaScript
118 lines
4.1 KiB
JavaScript
'use strict';
|
|
|
|
const states = ['queued', 'running', 'delivered', 'dead'];
|
|
const pollInterval = 750;
|
|
const byId = (id) => document.getElementById(id);
|
|
let lastRequest;
|
|
let sending = false;
|
|
|
|
function element(tag, value) {
|
|
const node = document.createElement(tag);
|
|
node.textContent = value;
|
|
return node;
|
|
}
|
|
|
|
function renderList(id, items, toRow, emptyMessage) {
|
|
byId(id).replaceChildren(...(items.length ? items.map(toRow) : [element('li', emptyMessage)]));
|
|
}
|
|
|
|
function renderPipeline({ queued = 0, running = 0, delivered = 0, dead = 0 }) {
|
|
byId('pipeline-queued').textContent = `${queued} waiting`;
|
|
byId('pipeline-running').textContent = `${running} active / 2 workers`;
|
|
byId('pipeline-outcome').textContent = `${delivered} delivered / ${dead} dead-lettered`;
|
|
byId('pipeline').dataset.active = String(running > 0);
|
|
}
|
|
|
|
function render(state) {
|
|
const latest = state.events[0];
|
|
byId('backend-event').textContent = latest
|
|
? `${latest.job_id.slice(0, 8)} · ${latest.message}`
|
|
: 'No queue events yet.';
|
|
renderPipeline(state.counts);
|
|
byId('metrics').replaceChildren(...states.map((name) => {
|
|
const cell = element('div', '');
|
|
cell.dataset.state = name;
|
|
cell.append(element('dt', name), element('dd', state.counts[name] ?? 0));
|
|
return cell;
|
|
}));
|
|
renderList('jobs', state.jobs, (job) => {
|
|
const row = element('li', '');
|
|
row.dataset.state = job.state;
|
|
row.append(
|
|
element('strong', `${job.scenario} · ${job.state}`),
|
|
element('small', `${job.id.slice(0, 8)} / attempt ${job.attempts}`),
|
|
);
|
|
return row;
|
|
}, 'No jobs yet.');
|
|
renderList('events', state.events, (event) => {
|
|
const row = element('li', '');
|
|
row.append(
|
|
element('strong', event.message),
|
|
element('small', `${new Date(event.at * 1000).toLocaleTimeString()} / ${event.job_id.slice(0, 8)}`),
|
|
);
|
|
return row;
|
|
}, 'No events yet.');
|
|
}
|
|
|
|
async function poll() {
|
|
const connection = byId('connection');
|
|
let online = false;
|
|
try {
|
|
const response = await fetch('/api/state');
|
|
if (!response.ok) throw new Error('Queue unavailable');
|
|
render(await response.json());
|
|
online = true;
|
|
} catch {
|
|
byId('pipeline').dataset.active = 'false';
|
|
byId('backend-event').textContent = 'Queue data unavailable.';
|
|
} finally {
|
|
if (connection.dataset.online !== String(online)) {
|
|
connection.textContent = online ? 'Queue connected' : 'Queue disconnected';
|
|
connection.dataset.online = String(online);
|
|
}
|
|
setTimeout(poll, pollInterval);
|
|
}
|
|
}
|
|
|
|
async function submit(request, button) {
|
|
if (sending) return;
|
|
sending = true;
|
|
const inspector = byId('backend-request');
|
|
inspector.textContent = 'Sending request…';
|
|
let responseSummary = 'No API response available.';
|
|
try {
|
|
if (!window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
|
|
button.animate?.([
|
|
{ transform: 'scale(.96)', boxShadow: '0 0 0 0 #bd93f9aa' },
|
|
{ transform: 'scale(1)', boxShadow: '0 0 0 8px #bd93f900' },
|
|
], { duration: 320, easing: 'ease-out' });
|
|
}
|
|
const response = await fetch('/api/jobs', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(request),
|
|
});
|
|
responseSummary = `HTTP ${response.status} · Response was not valid JSON.`;
|
|
const result = await response.json();
|
|
responseSummary = `HTTP ${response.status} · ${JSON.stringify(result)}`;
|
|
if (!response.ok) throw new Error(result.error || 'Request failed.');
|
|
lastRequest = request;
|
|
byId('repeat').disabled = false;
|
|
byId('status').textContent = `${result.created ? 'Queued job' : 'Reused job'} ${result.id.slice(0, 8)}.`;
|
|
} catch (error) {
|
|
byId('status').textContent = error.message;
|
|
} finally {
|
|
inspector.textContent = responseSummary;
|
|
sending = false;
|
|
}
|
|
}
|
|
|
|
for (const button of document.querySelectorAll('[data-scenario]')) {
|
|
button.addEventListener('click', () => {
|
|
const request = { key: crypto.randomUUID(), scenario: button.dataset.scenario };
|
|
submit(request, button);
|
|
});
|
|
}
|
|
byId('repeat').addEventListener('click', (event) => submit(lastRequest, event.currentTarget));
|
|
poll();
|