Systemstatus visual updates (#3561)

* remove total counts

* resolve helper conflict

* update view

* add whitespace and remove active counts

* change percentage message

* add whitespace to erb file

apps/dashboard/app/helpers/system_status_helper.rb

@@ -6,37 +6,24 @@ def title(cluster)
     "#{cluster.metadata.title.titleize} Cluster Status"
   end
 
-  def percent(value, total)
-    "#{(value.to_f / total * 100).round 2}%"
-  end
-
-  def generic_status(active, total, name)
-    free = number_with_delimiter(total - active)
-    "#{name} Active: #{number_with_delimiter(active)}/#{number_with_delimiter(total)} (#{free} Free)"
-  end
-
-  def node_status(cluster_info)
-    generic_status(cluster_info.active_nodes, cluster_info.total_nodes, 'Nodes')
-  end
-
-  def node_pct(cluster_info)
-    percent(cluster_info.active_nodes, cluster_info.total_nodes)
-  end
-
-  def processor_status(cluster_info)
-    generic_status(cluster_info.active_processors, cluster_info.total_processors, 'Processors')
+  def status_hash(name, active, total)
+    {
+      message: "#{name} Available: #{number_with_delimiter(total - active)}",
+      percent: percent(active, total)
+    }
   end
 
-  def processor_pct(cluster_info)
-    percent(cluster_info.active_processors, cluster_info.total_processors)
+  def components_status(job_adapter)
+    cluster_info = job_adapter.cluster_info
+    [
+      status_hash('Nodes', cluster_info.active_nodes, cluster_info.total_nodes),
+      status_hash('Processors', cluster_info.active_processors, cluster_info.total_processors),
+      status_hash('GPUs', cluster_info.active_gpus, cluster_info.total_gpus)
+    ]
   end
 
-  def gpu_status(cluster_info)
-    generic_status(cluster_info.active_gpus, cluster_info.total_gpus, 'GPUs')
-  end
-
-  def gpu_pct(cluster_info)
-    percent(cluster_info.active_gpus, cluster_info.total_gpus)
+  def percent(value, total)
+    "#{(value.to_f / total * 100).round 2}%"
   end
 
   def active_jobs(job_adapter)

apps/dashboard/app/views/system_status/index.turbo_stream.erb

@@ -2,31 +2,39 @@
   <template>
     <% Configuration.job_clusters.each do |c| %>
       <% job_adapter = c.job_adapter %>
-      <% cluster_info = job_adapter.cluster_info %>
-      <div class="col-sm-6 col-xs-12 p-2">
-        <div class="col border rounded p-2 text-center">
+      <div class="col-sm-6 col-xs-12">
+        <div class="col border rounded text-center p-2 m-2">
+          
           <div class="h4"><strong><%= title(c) %></strong></div>
-          <div><%= node_status(cluster_info) %></div>
-          <div class="progress">
-            <div class="progress-bar" role="progressbar" style="width: <%= node_pct(cluster_info) %>"><%= node_pct(cluster_info) %></div>
-          </div>
-          <div><%= processor_status(cluster_info) %></div> 
-          <div class="progress">
-            <div class="progress-bar" role="progressbar" style="width: <%= processor_pct(cluster_info) %>"><%= processor_pct(cluster_info) %></div>
-          </div>
-          <div><%= gpu_status(cluster_info) %></div>
-          <div class="progress">
-            <div class="progress-bar" role="progressbar" style="width: <%= gpu_pct(cluster_info) %>"><%= gpu_pct(cluster_info) %></div>
-          </div>
-          <div class="h4 mt-2 pt-2 border-top">Jobs</div>
-          <div><%= active_job_status(job_adapter) %></div>
-          <div class="progress">
-            <div class="progress-bar" role="progressbar" style="width: <%= active_job_pct(job_adapter) %>"><%= active_job_pct(job_adapter) %></div>
-          </div>
-          <div><%= queued_job_status(job_adapter) %></div>
-          <div class="progress">
-            <div class="progress-bar" role="progressbar" style="width: <%= queued_job_pct(job_adapter) %>"><%= queued_job_pct(job_adapter) %></div>
+
+          <% components_status(job_adapter).each do |current_status| %>
+            <div class="container py-2">
+              <div><%= current_status[:message] %></div>
+
+              <div class="progress">
+                <div class="progress-bar" role="progressbar" style="width: <%= current_status[:percent] %>"><%= current_status[:percent] %> in use</div>
+              </div>
+            </div>
+          <% end %>
+
+          <div class="col">
+            <table class="table mb-0">
+              <thead>
+                <tr>
+                  <th scope="col" class="border-top-0">Jobs Running</th>
+                  <th scope="col" class="border-top-0">Jobs Queued</th>
+                </tr>
+              </thead>
+
+              <tbody>
+                <tr>
+                  <td><%= active_jobs(job_adapter) %></td>
+                  <td><%= queued_jobs(job_adapter) %></td>
+                </tr>
+              </tbody>
+            </table>
           </div>
+
         </div>
       </div>
     <% end %>