Add unified operations realtime dashboard
- add /portal/ws/operations WebSocket snapshot endpoint
- add shared operations-live.js with reconnect and operations:snapshot events
- update Operations, Jobs, and Workers pages to use realtime snapshots
- keep job detail live logs on dedicated /ws/jobs/{job_id}/logs endpoint
- add Jobs and Workers pagination/filtering
- remove old page auto-refresh behavior from jobs/deployments
- normalize main navigation labels
- move New App CTA from menu to Apps page
- add backup download action for admins
- add Workers pages and operations dashboard data helpers
This commit is contained in:
JiriUhlir
@@ -0,0 +1,164 @@
|
||||
(() => {
|
||||
if (window.AppFactoryOperationsLive) {
|
||||
return;
|
||||
}
|
||||
|
||||
const state = {
|
||||
socket: null,
|
||||
reconnectTimer: null,
|
||||
reconnectDelay: 1500,
|
||||
};
|
||||
|
||||
const escapeHtml = (value) => String(value ?? "")
|
||||
.replaceAll("&", "&")
|
||||
.replaceAll("<", "<")
|
||||
.replaceAll(">", ">")
|
||||
.replaceAll('"', """)
|
||||
.replaceAll("'", "'");
|
||||
|
||||
const statusBadge = (status) => {
|
||||
const value = String(status || "");
|
||||
const normalized = value.toLowerCase();
|
||||
let className = "pill pill-muted";
|
||||
if (["success", "ok", "succeeded", "done", "deployed", "completed"].includes(normalized)) {
|
||||
className = "pill pill-success";
|
||||
} else if (["queued", "running", "pending", "in_progress", "starting", "cancelled_requested"].includes(normalized)) {
|
||||
className = "pill pill-warning";
|
||||
} else if (["failed", "failure", "error", "cancelled", "canceled"].includes(normalized)) {
|
||||
className = "pill pill-danger";
|
||||
}
|
||||
return `<span class="${className}">${escapeHtml(value)}</span>`;
|
||||
};
|
||||
|
||||
const workerBadge = (online) => online
|
||||
? '<span class="pill pill-success">ONLINE</span>'
|
||||
: '<span class="pill pill-danger">OFFLINE</span>';
|
||||
|
||||
const setText = (selector, value) => {
|
||||
document.querySelectorAll(selector).forEach((el) => {
|
||||
el.textContent = value ?? 0;
|
||||
});
|
||||
};
|
||||
|
||||
const renderJobs = (jobs) => {
|
||||
const rows = (jobs || []).map((job) => `
|
||||
<tr>
|
||||
<td><strong><a href="/portal/jobs/${escapeHtml(job.id)}">#${escapeHtml(job.id)}</a></strong></td>
|
||||
<td>${statusBadge(job.status)}</td>
|
||||
<td>${escapeHtml(job.type)}</td>
|
||||
<td>${escapeHtml(job.target_type)}: <strong>${escapeHtml(job.target_id)}</strong></td>
|
||||
<td>${escapeHtml(job.source)}</td>
|
||||
<td>${escapeHtml(job.created_at)}</td>
|
||||
</tr>
|
||||
`).join("");
|
||||
return rows || '<tr><td colspan="6">Zatím nejsou evidované žádné joby.</td></tr>';
|
||||
};
|
||||
|
||||
const renderWorkers = (workers) => {
|
||||
const rows = (workers || []).map((worker) => {
|
||||
const currentJob = worker.current_job_id === null || worker.current_job_id === undefined
|
||||
? ""
|
||||
: `<a href="/portal/jobs/${escapeHtml(worker.current_job_id)}">#${escapeHtml(worker.current_job_id)}</a>`;
|
||||
return `
|
||||
<tr data-worker-id="${escapeHtml(worker.id)}">
|
||||
<td><strong><a href="/portal/workers/${encodeURIComponent(worker.id || "")}">${escapeHtml(worker.id)}</a></strong></td>
|
||||
<td data-worker-field="status">${workerBadge(Boolean(worker.online))}<br><span class="muted">${escapeHtml(worker.status)}</span></td>
|
||||
<td data-worker-field="last_seen_at">${escapeHtml(worker.last_seen_at)}</td>
|
||||
<td data-worker-field="current_job">${currentJob}</td>
|
||||
<td>${escapeHtml(worker.started_at)}</td>
|
||||
<td class="actions-cell"><a class="btn" href="/portal/workers/${encodeURIComponent(worker.id || "")}">Detail</a></td>
|
||||
</tr>
|
||||
`;
|
||||
}).join("");
|
||||
return rows || '<tr><td colspan="6">Zatím nejsou evidovaní žádní workeři.</td></tr>';
|
||||
};
|
||||
|
||||
const renderDeployments = (deployments) => {
|
||||
const rows = (deployments || []).map((deployment) => `
|
||||
<tr>
|
||||
<td><strong><a href="/portal/deployments/${escapeHtml(deployment.id)}">#${escapeHtml(deployment.id)}</a></strong></td>
|
||||
<td><a href="/portal/apps/${encodeURIComponent(deployment.app_id || "")}">${escapeHtml(deployment.app_id)}</a></td>
|
||||
<td>${escapeHtml(deployment.kind)}</td>
|
||||
<td>${statusBadge(deployment.status)}</td>
|
||||
<td>${escapeHtml(deployment.trigger_source)}</td>
|
||||
<td>${escapeHtml(deployment.started_at)}</td>
|
||||
<td>${escapeHtml(deployment.finished_at)}</td>
|
||||
</tr>
|
||||
`).join("");
|
||||
return rows || '<tr><td colspan="7">Zatím nejsou evidovaná žádná nasazení.</td></tr>';
|
||||
};
|
||||
|
||||
const renderAudit = (events) => {
|
||||
const rows = (events || []).map((event) => `
|
||||
<tr>
|
||||
<td>${escapeHtml(event.created_at)}</td>
|
||||
<td>${escapeHtml(event.username)}</td>
|
||||
<td><span class="pill pill-muted">${escapeHtml(event.action)}</span></td>
|
||||
<td>${escapeHtml(event.target_type)}</td>
|
||||
<td>${escapeHtml(event.target_id)}</td>
|
||||
<td>${escapeHtml(event.source)}</td>
|
||||
</tr>
|
||||
`).join("");
|
||||
return rows || '<tr><td colspan="6">Zatím nejsou evidované žádné auditní události.</td></tr>';
|
||||
};
|
||||
|
||||
const renderSnapshot = (snapshot) => {
|
||||
setText("[data-live-count='jobs.queued']", snapshot.jobs?.queued);
|
||||
setText("[data-live-count='jobs.running']", snapshot.jobs?.running);
|
||||
setText("[data-live-count='jobs.failed_24h']", snapshot.jobs?.failed_24h);
|
||||
setText("[data-live-count='jobs.success_24h']", snapshot.jobs?.success_24h);
|
||||
setText("[data-live-count='workers.online']", snapshot.workers?.online);
|
||||
setText("[data-live-count='workers.offline']", snapshot.workers?.offline);
|
||||
setText("[data-live-count='workers.total']", (snapshot.workers?.online || 0) + (snapshot.workers?.offline || 0));
|
||||
setText("[data-live-count='deployments.running']", snapshot.deployments?.running);
|
||||
setText("[data-live-count='deployments.failed_24h']", snapshot.deployments?.failed_24h);
|
||||
setText("[data-live-count='deployments.success_24h']", snapshot.deployments?.success_24h);
|
||||
|
||||
document.querySelectorAll("[data-live-table='jobs.recent']").forEach((el) => { el.innerHTML = renderJobs(snapshot.jobs?.recent); });
|
||||
document.querySelectorAll("[data-live-table='workers.recent']").forEach((el) => { el.innerHTML = renderWorkers(snapshot.workers?.recent); });
|
||||
document.querySelectorAll("[data-live-table='deployments.recent']").forEach((el) => { el.innerHTML = renderDeployments(snapshot.deployments?.recent); });
|
||||
document.querySelectorAll("[data-live-table='audit.recent']").forEach((el) => { el.innerHTML = renderAudit(snapshot.audit?.recent); });
|
||||
|
||||
(snapshot.workers?.recent || []).forEach((worker) => {
|
||||
const row = Array.from(document.querySelectorAll("tr[data-worker-id]"))
|
||||
.find((item) => item.dataset.workerId === String(worker.id || ""));
|
||||
if (!row) {
|
||||
return;
|
||||
}
|
||||
const currentJob = worker.current_job_id === null || worker.current_job_id === undefined
|
||||
? ""
|
||||
: `<a href="/portal/jobs/${escapeHtml(worker.current_job_id)}">#${escapeHtml(worker.current_job_id)}</a>`;
|
||||
const statusCell = row.querySelector("[data-worker-field='status']");
|
||||
const lastSeenCell = row.querySelector("[data-worker-field='last_seen_at']");
|
||||
const currentJobCell = row.querySelector("[data-worker-field='current_job']");
|
||||
if (statusCell) statusCell.innerHTML = `${workerBadge(Boolean(worker.online))}<br><span class="muted">${escapeHtml(worker.status)}</span>`;
|
||||
if (lastSeenCell) lastSeenCell.textContent = worker.last_seen_at || "";
|
||||
if (currentJobCell) currentJobCell.innerHTML = currentJob;
|
||||
});
|
||||
};
|
||||
|
||||
const connect = () => {
|
||||
clearTimeout(state.reconnectTimer);
|
||||
const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
|
||||
state.socket = new WebSocket(`${protocol}//${window.location.host}/portal/ws/operations`);
|
||||
|
||||
state.socket.addEventListener("message", (event) => {
|
||||
const snapshot = JSON.parse(event.data);
|
||||
if (snapshot.type !== "operations.snapshot") {
|
||||
return;
|
||||
}
|
||||
window.dispatchEvent(new CustomEvent("operations:snapshot", { detail: snapshot }));
|
||||
renderSnapshot(snapshot);
|
||||
});
|
||||
|
||||
state.socket.addEventListener("close", () => {
|
||||
state.reconnectTimer = setTimeout(connect, state.reconnectDelay);
|
||||
});
|
||||
state.socket.addEventListener("error", () => {
|
||||
state.socket.close();
|
||||
});
|
||||
};
|
||||
|
||||
window.AppFactoryOperationsLive = { connect };
|
||||
connect();
|
||||
})();
|
||||
Reference in New Issue
Block a user