From 4aabe7a5149eff71d07dc30c711f7df6341a5f58 Mon Sep 17 00:00:00 2001
From: Jeff Ohrstrom <johrstrom@osc.edu>
Date: Tue, 27 Aug 2024 13:43:02 -0400
Subject: [PATCH 1/3] dont requery for completed jobs

---
 apps/dashboard/app/javascript/projects.js     | 19 +++++++++++++++----
 .../projects/_job_details.turbo_stream.erb    |  2 +-
 2 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/apps/dashboard/app/javascript/projects.js b/apps/dashboard/app/javascript/projects.js
index a4e13866ef..a154420881 100644
--- a/apps/dashboard/app/javascript/projects.js
+++ b/apps/dashboard/app/javascript/projects.js
@@ -36,27 +36,38 @@ 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'];
+      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 updateProjectSize(element) {
diff --git a/apps/dashboard/app/views/projects/_job_details.turbo_stream.erb b/apps/dashboard/app/views/projects/_job_details.turbo_stream.erb
index 30d7bb1fb3..7711147da5 100644
--- a/apps/dashboard/app/views/projects/_job_details.turbo_stream.erb
+++ b/apps/dashboard/app/views/projects/_job_details.turbo_stream.erb
@@ -3,7 +3,7 @@
   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>

From 5e7423af2ff8f3fc4d60ee27f530c779e1abd655 Mon Sep 17 00:00:00 2001
From: Jeff Ohrstrom <johrstrom@osc.edu>
Date: Tue, 27 Aug 2024 16:02:10 -0400
Subject: [PATCH 2/3] separate sections for completed and active jobs

---
 apps/dashboard/app/javascript/projects.js     | 21 ++++++++++++++++++-
 .../app/views/projects/show.html.erb          | 10 ++++++++-
 2 files changed, 29 insertions(+), 2 deletions(-)

diff --git a/apps/dashboard/app/javascript/projects.js b/apps/dashboard/app/javascript/projects.js
index a154420881..649577122d 100644
--- a/apps/dashboard/app/javascript/projects.js
+++ b/apps/dashboard/app/javascript/projects.js
@@ -49,7 +49,12 @@ function pollForJobInfo(element) {
       }
 
       const jobStatus = responseElement.dataset['jobStatus'];
-      replaceHTML(element.id, responseElement.outerHTML);
+      if(jobStatus === 'completed') {
+        moveCompletedPanel(element.id, responseElement.outerHTML);
+      } else {
+        replaceHTML(element.id, responseElement.outerHTML);
+      }
+
       return jobStatus;
     })
     .then((status) => {
@@ -69,6 +74,20 @@ function stringToHtml(html) {
   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';
diff --git a/apps/dashboard/app/views/projects/show.html.erb b/apps/dashboard/app/views/projects/show.html.erb
index 9ea4765224..a12951f845 100644
--- a/apps/dashboard/app/views/projects/show.html.erb
+++ b/apps/dashboard/app/views/projects/show.html.erb
@@ -57,7 +57,15 @@
     </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.jobs, as: :job) %>
+    </div>
+
+    <div class="row">
+      <h2 class="h3 d-flex justify-content-center">Completed Jobs</h2>
+      <div id="completed_jobs"></div>
+    </div>
   </div>
 </div>
 <% unless @project.readme_path.nil? %>

From 2db72395c24d355aa7238d167be45eadc390257b Mon Sep 17 00:00:00 2001
From: Jeff Ohrstrom <johrstrom@osc.edu>
Date: Wed, 28 Aug 2024 10:16:14 -0400
Subject: [PATCH 3/3] render completed jobs on first page load

---
 apps/dashboard/app/models/project.rb          |  8 +++++++
 .../projects/_job_details.turbo_stream.erb    | 20 ++--------------
 .../projects/_job_details_content.html.erb    | 24 +++++++++++++++++++
 .../app/views/projects/show.html.erb          |  6 +++--
 4 files changed, 38 insertions(+), 20 deletions(-)
 create mode 100644 apps/dashboard/app/views/projects/_job_details_content.html.erb

diff --git a/apps/dashboard/app/models/project.rb b/apps/dashboard/app/models/project.rb
index 4179cbc517..2834fda087 100644
--- a/apps/dashboard/app/models/project.rb
+++ b/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?
diff --git a/apps/dashboard/app/views/projects/_job_details.turbo_stream.erb b/apps/dashboard/app/views/projects/_job_details.turbo_stream.erb
index 7711147da5..b85c80f7b8 100644
--- a/apps/dashboard/app/views/projects/_job_details.turbo_stream.erb
+++ b/apps/dashboard/app/views/projects/_job_details.turbo_stream.erb
@@ -5,22 +5,6 @@
 
 <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>
diff --git a/apps/dashboard/app/views/projects/_job_details_content.html.erb b/apps/dashboard/app/views/projects/_job_details_content.html.erb
new file mode 100644
index 0000000000..44163aad77
--- /dev/null
+++ b/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>
diff --git a/apps/dashboard/app/views/projects/show.html.erb b/apps/dashboard/app/views/projects/show.html.erb
index a12951f845..b44b9fc472 100644
--- a/apps/dashboard/app/views/projects/show.html.erb
+++ b/apps/dashboard/app/views/projects/show.html.erb
@@ -59,12 +59,14 @@
   <div class="col-md-8">
     <div class="row">
       <h2 class="h3 d-flex justify-content-center">Active Jobs</h2>
-      <%= render(partial: 'job_details', collection: @project.jobs, as: :job) %>
+      <%= 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"></div>
+      <div id="completed_jobs">
+        <%= render(partial: 'job_details_content', collection: @project.completed_jobs, as: :job) %>
+      </div>
     </div>
   </div>
 </div>