From 11753f22d126a48da5d7de8d99e14113862ce738 Mon Sep 17 00:00:00 2001
From: Helen Lin <helen.lin@alleninstitute.org>
Date: Fri, 13 Dec 2024 15:57:41 -0800
Subject: [PATCH] feat: tasks modal in full jobs table

---
 .../templates/job_status.html                 | 60 ++++++++++++++++++-
 1 file changed, 59 insertions(+), 1 deletion(-)
diff --git a/src/aind_data_transfer_service/templates/job_status.html b/src/aind_data_transfer_service/templates/job_status.html
index b65b647..dcf1373 100644
--- a/src/aind_data_transfer_service/templates/job_status.html
+++ b/src/aind_data_transfer_service/templates/job_status.html
@@ -29,6 +29,9 @@
                 height: 100%;
             }
         }
+        .modal-body {
+            height: calc(100vh - 100px);
+        }
     </style>
 </head>
 <body>
@@ -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>
@@ -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
@@ -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>`);
             }
@@ -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]) => {
