pm - completed and active jobs

apps/dashboard/app/javascript/projects.js

@@ -36,28 +36,58 @@ function pollForJobInfo(element) {
       // html open as well.
       const currentData = element.querySelector(`#${element.id}_data`);
       let currentlyOpen = false;
+      const responseElement = stringToHtml(html);
 
       if(currentData != null) {
         currentlyOpen = currentData.classList.contains('show');
       }
 
+      // if it's currently open keep it open.
       if(currentlyOpen) {
-        const responseElement = new DOMParser().parseFromString(html, "text/xml");
         const dataDiv = responseElement.querySelector(`#${element.id}_data`);
         dataDiv.classList.add('show');
-        html = (new XMLSerializer()).serializeToString(responseElement);
       }
 
-      replaceHTML(element.id, html)
+      const jobStatus = responseElement.dataset['jobStatus'];
+      if(jobStatus === 'completed') {
+        moveCompletedPanel(element.id, responseElement.outerHTML);
+      } else {
+        replaceHTML(element.id, responseElement.outerHTML);
+      }
+
+      return jobStatus;
+    })
+    .then((status) => {
+      if(status != 'completed') {
+        setTimeout(pollForJobInfo, 30000, element);
+      }
     })
-    .then(setTimeout(pollForJobInfo, 30000, element))
     .catch((err) => {
       console.log('Cannot not retrive job details due to error:');
       console.log(err);
     });
 }
 
+function stringToHtml(html) {
+  const template = document.createElement('template');
+  template.innerHTML = html.trim();
+  return template.content.firstChild;
+}
 
+function moveCompletedPanel(id, newHTML) {
+  const oldElement = document.getElementById(id);
+  if(oldElement !== null) {
+    oldElement.remove();
+  }
+
+  const div = document.createElement('div');
+  div.id = id;
+
+  const row = document.getElementById('completed_jobs');
+  row.appendChild(div);
+
+  replaceHTML(id, newHTML);
+}
 
 function updateProjectSize(element) {
   const UNDETERMINED = 'Undetermined Size';

apps/dashboard/app/models/project.rb

@@ -201,6 +201,14 @@ def jobs
     Project.jobs(directory)
   end
 
+  def active_jobs
+    jobs.reject(&:completed?)
+  end
+
+  def completed_jobs
+    jobs.select(&:completed?)
+  end
+
   def job(job_id, cluster)
     cached_job = jobs.detect { |j| j.id == job_id && j.cluster == cluster }
     return cached_job if cached_job.completed?

apps/dashboard/app/views/projects/_job_details.turbo_stream.erb

@@ -3,24 +3,8 @@
   id = "job_#{job.cluster}_#{job.id}"
 -%>
 
-<turbo-stream action="replace" target="<%= id %>">
+<turbo-stream action="replace" target="<%= id %>" data-job-status="<%= job.status %>">
   <template>
-    <button class="badge <%= status_class(job.status.to_s) %> rounded-pill border-0 btn" type="button" data-bs-toggle="collapse" data-bs-target="#<%= id %>_data">
-      <span>
-        <%= job.id %> <%= status_text(job.status.to_s) %>
-      </span>
-    </button>
-    <div class="collapse col-md-4" id="<%= id %>_data">
-      <div class="card card-body">
-        <table class="table table-bordered table-sm m-0 mb-2">
-          <% job.to_human_display.each do |name, value| %>
-            <tr>
-              <td><strong><%= name %></strong></td>
-              <td><%= value %></td>
-            </tr>
-          <% end %>
-        </table>
-      </div>
-    </div>
-    </template>
+    <%= render(partial: 'job_details_content', locals: { job: job }, :formats=>[:html]) %>
+  </template>
 </turbo-stream>

apps/dashboard/app/views/projects/_job_details_content.html.erb

@@ -0,0 +1,24 @@
+
+<%- 
+  id = "job_#{job.cluster}_#{job.id}"
+-%>
+
+<div>
+  <button class="badge <%= status_class(job.status.to_s) %> rounded-pill border-0 btn" type="button" data-bs-toggle="collapse" data-bs-target="#<%= id %>_data">
+    <span>
+      <%= job.id %> <%= status_text(job.status.to_s) %>
+    </span>
+  </button>
+  <div class="collapse col-md-4" id="<%= id %>_data">
+    <div class="card card-body">
+      <table class="table table-bordered table-sm m-0 mb-2">
+        <% job.to_human_display.each do |name, value| %>
+          <tr>
+            <td><strong><%= name %></strong></td>
+            <td><%= value %></td>
+          </tr>
+        <% end %>
+      </table>
+    </div>
+  </div>
+</div>

apps/dashboard/app/views/projects/show.html.erb

@@ -57,7 +57,17 @@
     </div>
   </div>
   <div class="col-md-8">
-    <%= render(partial: 'job_details', collection: @project.jobs, as: :job) %>
+    <div class="row">
+      <h2 class="h3 d-flex justify-content-center">Active Jobs</h2>
+      <%= render(partial: 'job_details', collection: @project.active_jobs, as: :job) %>
+    </div>
+
+    <div class="row">
+      <h2 class="h3 d-flex justify-content-center">Completed Jobs</h2>
+      <div id="completed_jobs">
+        <%= render(partial: 'job_details_content', collection: @project.completed_jobs, as: :job) %>
+      </div>
+    </div>
   </div>
 </div>
 <% unless @project.readme_path.nil? %>