Add comprehensive console logging to debug real-time job updates

This commit is contained in:
nmemmert committed 2025-11-07 10:28:35 -05:00
1 parent 1e39888e29
commit ce34482373
1 file changed
+40 -10
+40 -10
View File
@@ -1229,22 +1229,30 @@ def jobs():
} }
function updateJobs() { function updateJobs() {
console.log('[updateJobs] Starting update...');
fetch('/api/jobs', { credentials: 'same-origin' }) fetch('/api/jobs', { credentials: 'same-origin' })
.then(response => response.json()) .then(response => {
console.log('[updateJobs] Response received:', response.status);
if (!response.ok) {
throw new Error(`HTTP ${response.status}`);
}
return response.json();
})
.then(data => { .then(data => {
console.log('Job update received:', data); console.log('[updateJobs] Job data received:', data);
const jobs = Object.entries(data); const jobs = Object.entries(data);
console.log('[updateJobs] Number of jobs:', jobs.length);
// Check for job completions // Check for job completions
let hasNewCompletion = false; let hasNewCompletion = false;
if (jobs.length > 0) { if (jobs.length > 0) {
jobs.forEach(([jobId, job]) => { jobs.forEach(([jobId, job]) => {
console.log(`Job ${jobId}: status=${job.status}, progress=${job.progress || 'none'}`); console.log(`[updateJobs] Job ${jobId}: status=${job.status}, progress=${job.progress || 'none'}`);
// Check if job just completed // Check if job just completed
if (job.status === 'completed' && previousJobStatuses[jobId] === 'processing') { if (job.status === 'completed' && previousJobStatuses[jobId] === 'processing') {
hasNewCompletion = true; hasNewCompletion = true;
console.log(`Job ${jobId} just completed!`); console.log(`[updateJobs] Job ${jobId} just completed!`);
} }
// Update previous status // Update previous status
@@ -1254,25 +1262,30 @@ def jobs():
// Redirect to completed jobs if a job just finished // Redirect to completed jobs if a job just finished
if (hasNewCompletion) { if (hasNewCompletion) {
console.log('Redirecting to completed jobs page...'); console.log('[updateJobs] Redirecting to completed jobs page...');
setTimeout(() => { setTimeout(() => {
window.location.href = '/completed-jobs'; window.location.href = '/completed-jobs';
}, 500); // Small delay to show completion briefly }, 500); // Small delay to show completion briefly
return; // Stop processing to avoid UI updates during redirect return; // Stop processing to avoid UI updates during redirect
} }
console.log('[updateJobs] Starting DOM manipulation...');
// Find the container where jobs are rendered // Find the container where jobs are rendered
const body = document.body; const body = document.body;
const existingJobs = body.querySelectorAll('.job'); const existingJobs = body.querySelectorAll('.job');
console.log(`Found ${existingJobs.length} existing job elements`); console.log(`[updateJobs] Found ${existingJobs.length} existing job elements`);
// Remove existing job elements // Remove existing job elements
existingJobs.forEach(job => job.remove()); existingJobs.forEach(job => {
console.log('[updateJobs] Removing job element');
job.remove();
});
// Remove existing "No jobs yet" messages // Remove existing "No jobs yet" messages
const noJobsMsgs = body.querySelectorAll('p'); const noJobsMsgs = body.querySelectorAll('p');
noJobsMsgs.forEach(p => { noJobsMsgs.forEach(p => {
if (p.textContent.includes('No jobs yet')) { if (p.textContent.includes('No jobs yet')) {
console.log('[updateJobs] Removing "no jobs" message');
p.remove(); p.remove();
} }
}); });
@@ -1280,13 +1293,16 @@ def jobs():
// Find where to insert new jobs (after nav-links div) // Find where to insert new jobs (after nav-links div)
const navLinks = body.querySelector('.nav-links'); const navLinks = body.querySelector('.nav-links');
const scriptTag = body.querySelector('script'); const scriptTag = body.querySelector('script');
console.log('[updateJobs] navLinks found:', !!navLinks, 'scriptTag found:', !!scriptTag);
// Add updated job elements // Add updated job elements
const jobEntries = Object.entries(data); const jobEntries = Object.entries(data);
console.log(`Rendering ${jobEntries.length} jobs`); console.log(`[updateJobs] Rendering ${jobEntries.length} jobs`);
if (jobEntries.length > 0) { if (jobEntries.length > 0) {
jobEntries.forEach(([jobId, job]) => { jobEntries.forEach(([jobId, job]) => {
console.log(`[updateJobs] Creating element for job ${jobId}`);
try {
const jobDiv = document.createElement('div'); const jobDiv = document.createElement('div');
jobDiv.className = 'job'; jobDiv.className = 'job';
jobDiv.innerHTML = ` jobDiv.innerHTML = `
@@ -1333,14 +1349,21 @@ def jobs():
</div> </div>
` : ''} ` : ''}
`; `;
console.log(`[updateJobs] HTML created for job ${jobId}`);
// Insert job before the script tag // Insert job before the script tag
if (scriptTag) { if (scriptTag) {
body.insertBefore(jobDiv, scriptTag); body.insertBefore(jobDiv, scriptTag);
} else { } else {
body.appendChild(jobDiv); body.appendChild(jobDiv);
} }
console.log(`[updateJobs] Job ${jobId} element inserted into DOM`);
} catch (err) {
console.error(`[updateJobs] Error creating job element for ${jobId}:`, err);
}
}); });
} else { } else {
console.log('[updateJobs] No jobs to render, showing "no jobs" message');
const noJobsMsg = document.createElement('p'); const noJobsMsg = document.createElement('p');
noJobsMsg.innerHTML = 'No jobs yet. <a href="/">Upload some files</a> to get started.'; noJobsMsg.innerHTML = 'No jobs yet. <a href="/">Upload some files</a> to get started.';
if (scriptTag) { if (scriptTag) {
@@ -1349,14 +1372,21 @@ def jobs():
body.appendChild(noJobsMsg); body.appendChild(noJobsMsg);
} }
} }
console.log('[updateJobs] Update complete!');
}) })
.catch(error => console.error('Error updating jobs:', error)); .catch(error => {
console.error('[updateJobs] Error updating jobs:', error);
console.error('[updateJobs] Error stack:', error.stack);
});
} }
console.log('[Init] Setting up job update interval...');
// Update jobs every 1 second // Update jobs every 1 second
setInterval(updateJobs, 1000); const updateInterval = setInterval(updateJobs, 1000);
console.log('[Init] Update interval set, ID:', updateInterval);
// Initialize previous job statuses // Initialize previous job statuses
console.log('[Init] Running initial job update...');
updateJobs(); // Run once immediately to populate initial statuses updateJobs(); // Run once immediately to populate initial statuses
</script> </script>
</body> </body>