Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: tasks modal in full jobs table #194

Merged
merged 1 commit into from
Dec 16, 2024
Merged

feat: tasks modal in full jobs table #194

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
60 changes: 59 additions & 1 deletion src/aind_data_transfer_service/templates/job_status.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,9 @@
height: 100%;
}
}
.modal-body {
height: calc(100vh - 100px);
}
</style>
</head>
<body>
Expand Down Expand Up @@ -134,6 +137,24 @@ <h4 class="mb-2">Jobs Submitted: <span id="jobs-iframe-total-entries"></h4>
</tr>
</thead>
</table>
<!-- modal for displaying tasks per job from full jobs table -->
<div class="modal fade" id="tasks-modal-full" tabindex="-1" aria-labelledby="tasks-modal-full-label" aria-hidden="true">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<div class="modal-header p-2">
<div class="modal-title fw-bold" id="tasks-modal-full-label" style="font-size: small">
<span id="modal-title-job-name" class="me-2"></span>
<span id="modal-title-job-id" class="me-2"></span>
<span id="modal-title-job-state" class="badge"></span>
</div>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body p-2">
<iframe id="tasks-iframe" class="w-100 h-100" src=""></iframe>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
Expand Down Expand Up @@ -178,6 +199,16 @@ <h4 class="mb-2">Jobs Submitted: <span id="jobs-iframe-total-entries"></h4>
execution_date_lte: today.endOf('day').toISOString(),
};
updateJobStatusTable(initialParams);

// tasks modal for full jobs table
var tasksModal = document.getElementById('tasks-modal-full');
tasksModal.addEventListener('show.bs.modal', function (event) {
var sourceData = event.relatedTarget?.dataset;
updateJobTasksModal(sourceData?.jobId, sourceData?.jobName, sourceData?.jobState);
})
tasksModal.addEventListener('hidden.bs.modal', function (event) {
updateJobTasksModal(null, null, null);
})
});
// FULL JOBS TABLE -----------------------------------------------
// Helper functions for custom column rendering
Expand All @@ -196,7 +227,7 @@ <h4 class="mb-2">Jobs Submitted: <span id="jobs-iframe-total-entries"></h4>
}
function renderTasksButton(data, type, row) {
if (type == 'display') {
return (`<button type="button" class="btn btn-outline-primary btn-sm" data-bs-toggle="modal" data-bs-target="#tasks-modal" data-job-id="${data}" data-job-name="${row.name}" data-job-state="${row.job_state}">
return (`<button type="button" class="btn btn-outline-primary btn-sm" data-bs-toggle="modal" data-bs-target="#tasks-modal-full" data-job-id="${data}" data-job-name="${row.name}" data-job-state="${row.job_state}">
<i class="bi bi-box-arrow-up-right" title="View tasks and logs"></i>
</button>`);
}
Expand Down Expand Up @@ -247,6 +278,33 @@ <h4 class="mb-2">Jobs Submitted: <span id="jobs-iframe-total-entries"></h4>
},
});
}
// Modal for tasks per job from full jobs table
function updateJobTasksModal(jobId, jobName, jobState) {
// Update the modal header with the job id and name
document.getElementById('modal-title-job-id').textContent = `(${jobId})`;
document.getElementById('modal-title-job-name').textContent = jobName;
var modalTitleJobState = document.getElementById('modal-title-job-state');
modalTitleJobState.textContent = jobState;
if (jobState) {
modalTitleJobState.classList.add(
jobState === 'success' ? 'bg-success'
: jobState === 'failed' ? 'bg-danger'
: jobState === 'running' ? 'bg-info'
: 'bg-secondary'
);
} else {
modalTitleJobState.classList.value = 'badge';
}
// Update the iframe src with the job id
var tasksIframe = document.getElementById('tasks-iframe');
if (jobId) {
var url = new URL("{{ url_for('job_tasks_table') }}");
url.searchParams.append('dag_run_id', jobId);
tasksIframe.src = url;
} else {
tasksIframe.src = "";
}
}
// EVENT HANDLERS ------------------------------------------------
function updateJobStatusTable(newParams) {
Object.entries(newParams).forEach(([key, value]) => {
Expand Down
Loading