diff --git a/app/assets/javascripts/socketio.js b/app/assets/javascripts/socketio.js index 5d1491f64..8f4b2002f 100644 --- a/app/assets/javascripts/socketio.js +++ b/app/assets/javascripts/socketio.js @@ -1,15 +1,74 @@ -const socket = io('http://localhost:6011'); -const jobId = document.querySelector("[data-job-id]").dataset.jobId; +function debounce(func, wait) { + let timeout; + return function (...args) { + clearTimeout(timeout); + timeout = setTimeout(() => func.apply(this, args), wait); + }; +} +document.addEventListener("DOMContentLoaded", function () { + const isJobPage = window.location.pathname.includes("/jobs/"); + if (!isJobPage) return; - socket.on('connect', () => { - console.log('✅ Connected to server'); + const jobId = document.querySelector("[data-job-id]")?.dataset?.jobId; + if (!jobId) return; + + const socket = io("http://localhost:6011"); + + socket.on("connect", () => { + console.log("Connected to Socket.IO server"); + socket.emit("join", { room: `job-${jobId}` }); + console.log("join", { room: `job-${jobId}` }); }); - socket.on('job_update', (data) => { - console.log('📡 Received job update:', data); + window.addEventListener("beforeunload", () => { + socket.emit("leave", { room: `job-${jobId}` }); + }); - if (data.job_id === jobId) { - document.getElementById('status').innerText = `Job ${data.job_id}: ${data.status}`; + const debouncedUpdate = debounce((data) => { + updateAllJobSections(); + }, 1000); + + socket.on("job_updated", (data) => { + if (data.job_id !== jobId) return; + debouncedUpdate(data); + }); + + function updateAllJobSections() { + const resourceEl = document.querySelector('[data-socket-update="status"]'); + const url = resourceEl?.dataset?.resource; + + if (!url) { + console.warn("No resource URL found for job updates"); + return; } - }); + + fetch(url) + .then((res) => res.json()) + .then(({ status, counts, notifications }) => { + const sections = { + status: document.querySelector('[data-socket-update="status"]'), + counts: document.querySelector('[data-socket-update="counts"]'), + notifications: document.querySelector('[data-socket-update="notifications"]'), + }; + + if (status && sections.status) { + sections.status.innerHTML = status; + console.log("status partial updated"); + } + if (counts && sections.counts) { + sections.counts.innerHTML = counts; + console.log("counts partial updated"); + } + if (notifications && sections.notifications) { + sections.notifications.innerHTML = notifications; + console.log("notifications partial updated"); + } + }) + .catch((err) => { + console.error("Error fetching job update partials:", err); + }); + } + + +}); diff --git a/app/templates/views/jobs/job.html b/app/templates/views/jobs/job.html index 59c4cef91..62d084907 100644 --- a/app/templates/views/jobs/job.html +++ b/app/templates/views/jobs/job.html @@ -9,35 +9,22 @@ {% endblock %} {% block maincolumn_content %} -{{ socket_block(partials, job_id, "status") }} -