jzzliu/relay-lab
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Simplify Relay Lab dashboard and retry handling

Browse Source
This commit is contained in:
jzzliu
2026-11-07 21:14:51 -07:00
parent c7298662a1
commit 9716886700
3 changed files with 34 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/app.js
+26 -19
View File
@@ -1,6 +1,7 @@
'use strict';
const states = ['queued', 'running', 'delivered', 'dead'];
const pollInterval = 750;
const byId = (id) => document.getElementById(id);
let lastRequest;
let sending = false;
@@ -15,16 +16,19 @@ 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.';
const { queued = 0, running = 0, delivered = 0, dead = 0 } = state.counts;
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);
renderPipeline(state.counts);
byId('metrics').replaceChildren(...states.map((name) => {
const cell = element('div', '');
cell.dataset.state = name;
@@ -66,45 +70,48 @@ async function poll() {
connection.textContent = online ? 'Queue connected' : 'Queue disconnected';
connection.dataset.online = String(online);
}
setTimeout(poll, 750);
setTimeout(poll, pollInterval);
}
}
async function submit(request, button) {
if (sending) return;
sending = true;
byId('backend-request').textContent = 'Sending request…';
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 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();
byId('backend-request').textContent = `HTTP ${response.status} · ${JSON.stringify(result)}`;
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) {
if (byId('backend-request').textContent === 'Sending request…') {
byId('backend-request').textContent = 'No API response available.';
}
byId('status').textContent = error.message;
} finally {
inspector.textContent = responseSummary;
sending = false;
}
}
for (const button of document.querySelectorAll('[data-scenario]')) {
button.addEventListener('click', () => submit({ key: crypto.randomUUID(), scenario: button.dataset.scenario }, button));
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();