48 lines
2.1 KiB
JavaScript
48 lines
2.1 KiB
JavaScript
const elements = {
|
|
health: document.querySelector("#health"),
|
|
payloadCount: document.querySelector("#payloadCount"),
|
|
apiCount: document.querySelector("#apiCount"),
|
|
serverCount: document.querySelector("#serverCount"),
|
|
activity: document.querySelector("#activity"),
|
|
payloads: document.querySelector("#payloads"),
|
|
refresh: document.querySelector("#refresh"),
|
|
};
|
|
|
|
function escapeHtml(value) {
|
|
return String(value).replace(/[&<>'"]/g, (character) => ({
|
|
"&": "&", "<": "<", ">": ">", "'": "'", '"': """,
|
|
})[character]);
|
|
}
|
|
|
|
async function refresh() {
|
|
try {
|
|
const [healthResponse, payloadResponse, activityResponse] = await Promise.all([
|
|
fetch("/api/health"), fetch("/api/payloads"), fetch("/api/activity"),
|
|
]);
|
|
if (![healthResponse, payloadResponse, activityResponse].every((response) => response.ok)) {
|
|
throw new Error("Serveren returnerede en fejl");
|
|
}
|
|
const [health, payloads, activity] = await Promise.all([
|
|
healthResponse.json(), payloadResponse.json(), activityResponse.json(),
|
|
]);
|
|
elements.health.textContent = "API online";
|
|
elements.health.className = "status online";
|
|
elements.payloadCount.textContent = payloads.length;
|
|
elements.apiCount.textContent = activity.filter((event) => event.source === "api").length;
|
|
elements.serverCount.textContent = activity.filter((event) => event.source === "server").length;
|
|
elements.payloads.textContent = JSON.stringify(payloads, null, 2);
|
|
elements.activity.innerHTML = activity.slice(0, 30).map((event) => `
|
|
<div class="event">
|
|
<span class="source">${escapeHtml(event.source)}</span>
|
|
<span class="time">${new Date(event.timestamp).toLocaleTimeString("da-DK")}</span>
|
|
<span class="detail"><strong>${escapeHtml(event.action)}</strong> ${escapeHtml(JSON.stringify(event.detail))}</span>
|
|
</div>`).join("") || "<p>Ingen hændelser endnu.</p>";
|
|
} catch (error) {
|
|
elements.health.textContent = "Server offline";
|
|
elements.health.className = "status";
|
|
}
|
|
}
|
|
|
|
elements.refresh.addEventListener("click", refresh);
|
|
refresh();
|
|
setInterval(refresh, 3000);
|