enhance the projects#show page with list of active jobs

apps/dashboard/app/assets/stylesheets/projects.scss

@@ -26,3 +26,15 @@
 .job-info .job-info-description{
   display: block;
 }
+
+.list-toggler[aria-expanded="false"] span::after {
+  content: "▲";
+  font-size: 1.4em;
+  float: right;
+}
+
+.list-toggler[aria-expanded="true"] span::after {
+  content: "▼";
+  font-size: 1.4em;
+  float: right;
+}

apps/dashboard/app/javascript/projects.js

@@ -40,7 +40,7 @@ function pollForJobInfo(element) {
       element.innerHTML = jobInfoDiv(jobId, state);
       if(state !== 'completed') {
         // keep going
-        setTimeout(pollForJobInfo, 10000, element);
+        setTimeout(pollForJobInfo, 30000, element);
       }
     })
     .catch((error) => {
@@ -49,7 +49,7 @@ function pollForJobInfo(element) {
 }
 
 function jobInfoDiv(jobId, state, stateTitle='', stateDescription='') {
-  return `<div class="job-info">
+  return `<div class="job-info justify-content-center d-grid">
             <span class="mr-2">${jobId}</span>
             <span class="job-info-title badge ${cssBadgeForState(state)}" title="${stateTitle}">${state.toUpperCase()}</span>
             <span class="job-info-description text-muted">${stateDescription}</span>

apps/dashboard/app/models/launcher.rb

@@ -202,6 +202,26 @@ def most_recent_job_cluster
     most_recent_job['cluster']
   end
 
+  def active_jobs
+    @active_jobs ||= jobs.map do |job|
+      adapter = adapter(job['cluster'].to_sym).job_adapter
+      adapter.info(job['id'])
+    end.reject do |job|
+      job.status == :completed
+    end
+  end
+
+  def job_cluster(id)
+    job = jobs.select { |job| job['id'] == id }.first
+    return nil if job.nil?
+
+    job['cluster']
+  end
+
+  def jobs
+    @jobs ||= YAML.safe_load(File.read(job_log_file.to_s)).to_a
+  end
+
   def create_default_script
     return false if Launcher.scripts?(project_dir) || default_script_path.exist?
 
@@ -295,23 +315,19 @@ def cached_values
   end
 
   def most_recent_job
-    job_data.sort_by do |data|
+    jobs.sort_by do |data|
       data['submit_time']
     end.reverse.first.to_h
   end
 
   def update_job_log(job_id, cluster)
-    new_job_data = job_data + [{
+    new_jobs = jobs + [{
       'id'          => job_id,
       'submit_time' => Time.now.to_i,
       'cluster'     => cluster.to_s
     }]
 
-    File.write(job_log_file.to_s, new_job_data.to_yaml)
-  end
-
-  def job_data
-    @job_data ||= YAML.safe_load(File.read(job_log_file.to_s)).to_a
+    File.write(job_log_file.to_s, new_jobs.to_yaml)
   end
 
   def job_log_file

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

@@ -4,6 +4,8 @@
   disabled_class = disabled ? 'disabled' : ''
   edit_title = "#{t('dashboard.edit')} launcher #{launcher.title}"
   delete_title = "#{t('dashboard.delete')} launcher #{launcher.title}"
+  active_job_list_id = "active_job_list_#{launcher.id}"
+  active_job_list_button_id = "active_job_button_#{launcher.id}"
 -%>
 
 <div class='card'>
@@ -62,8 +64,28 @@
       </div>
     </div>
 
-    <div class="row">
-      <%= launcher.most_recent_job_id %>
+    <div class="row mt-2">
+      <div class="col-4">
+        <div class="list-group">
+          <a id="<%= active_job_list_button_id %>" class="btn btn-success list-toggler"
+            data-toggle="collapse" data-target="#<%= active_job_list_id %>"
+            aria-expanded="true" aria-controls="<%= active_job_list_id %>">
+            <span>Active Jobs</span>
+          </a>
+
+          <div id="<%= active_job_list_id %>" >
+          <%- launcher.active_jobs.each do |job| -%>
+            <a class="list-group-item list-group-item list-group-item-action justify-content-center"
+              data-job-poller="true"
+              data-job-cluster="<%= launcher.job_cluster(job.id) %>"
+              data-job-id="<%= job.id %>"
+            >
+              <%= job.id %>
+            </a>
+            <%- end -%>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </div>

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

@@ -25,7 +25,7 @@
 </div>
 
 <div class="row mb-3">
-  <div class="col-4">
+  <div class="col-2">
     <div class="list-group" id="launcher_list" role="tablist">
 
       <%- @scripts.each_with_index do |script, index| -%>