Add comprehensive console logging to debug real-time job updates
This commit is contained in:
1 parent
1e39888e29
commit
ce34482373
1 file changed
+40
-10
+40
-10
@@ -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>
|
||||||
|
|||||||
Reference in new issue
Block a user