Nth redesign of the funkos dashboard

Caddyfile

@@ -12,4 +12,13 @@ http://localhost:8888 {
   handle_path /admin/* {
     reverse_proxy /* http://127.0.0.1:3000
   }
-}
+
+
+      handle_path /faaso/hello/* {
+        reverse_proxy /* http://faaso-hello-8t3u59:3000 http://faaso-hello-5epnbg:3000 http://faaso-hello-zt5j6g:3000 {
+          health_uri /ping
+          fail_duration 30s
+        }
+      }
+      
+}

public/index.html

@@ -23,9 +23,7 @@
       <thead>
         <tr>
           <th>Name</th>
-          <th>Scale</th>
-          <th>Containers</th>
-          <th>Images</th>
+          <th>Instances</th>
           <th>Actions</th>
         </tr>
       </thead>

src/daemon/funko.cr

@@ -79,14 +79,14 @@ module Funko
   get "/funkos/" do |env|
     funkos = Funko.from_docker
     funkos.sort! { |a, b| a.name <=> b.name }
-    result = [] of Hash(String, String)
+    result = [] of Hash(String, String | Array(Docr::Types::ContainerSummary))
 
     funkos.each do |funko|
       result << {
-        "name"       => funko.name,
-        "scale"      => funko.scale.to_s,
-        "containers" => funko.containers.size.to_s,
-        "images"     => funko.images.size.to_s,
+        "name"         => funko.name,
+        "scale"        => funko.scale.to_s,
+        "containers"   => funko.containers,
+        "latest_image" => funko.latest_image,
       }
     end
 

src/funko.cr

@@ -178,12 +178,16 @@ module Funko
       end
     end
 
+    def latest_image
+      image_history.first
+    end
+
     # Get all running containers related to this funko
-    def containers
+    def containers : Array(Docr::Types::ContainerSummary)
       docker_api = Docr::API.new(Docr::Client.new)
       docker_api.containers.list(all: true).select { |container|
         container.@names.any?(&.starts_with?("/faaso-#{name}-")) &&
-        container.@state == "running"
+          container.@state == "running"
       }
     end
 

src/views/funkos.ecr

@@ -1,13 +1,42 @@
 <%- result.each do |f| -%>
 <tr hx-indicator="#spinner-<%= f["name"] %>">
-  <td><%= f["name"] %></td>
-  <td><%= f["scale"] %></td>
-  <td><%= f["containers"] %></td>
-  <td><%= f["images"] %></td>
+  <td>
+    <%= f["name"] %>
+    <img id="spinner-<%= f["name"] %>" src="bars.svg"  class="htmx-indicator">
+  </td>
+  <td>
+    <table>
+      <thead>
+        <th>ID</th>
+        <th>Current?</th>
+        <th>Actions</th>
+      </thead>
+      <tbody>
+        <%- f["containers"].as(Array(Docr::Types::ContainerSummary)).each do |c| -%>
+          <tr>
+            <td><tt><%= c.@names[0].split("-")[-1] %></tt></td>
+            <td>
+              <%- if c.image_id == f["latest_image"] -%>
+                <span style="color:green;""> 🟢</span>
+              <%- else -%>
+                <span style="color:red;""> 🟢</span>
+              <%- end -%>
+            </td>
+            <td>
+              <button hx-target="#terminal" hx-get="funkos/<%= f["name"] %>/terminal/logs/">Logs</button>
+              <button hx-target="#terminal" hx-get="funkos/<%= f["name"] %>/terminal/shell/">Shell</button>
+            </td>
+          </tr>
+        <%- end -%>
+      </tbody>
+      </p>
+  </td>
+      
+    </table>
   <td>
   <%- if f["name"] == "proxy" -%>
   <%- else -%>
-    <%- if f["scale"].to_i > 0 -%>
+    <%- if f["scale"].as(String).to_i > 0 -%>
       <button disabled hx-get="funkos/<%= f["name"] %>/start">Start</button>
       <button hx-get="funkos/<%= f["name"] %>/stop" hx-on:htmx:after-request="update_funkos()">Stop</button>
     <%- else -%>
@@ -15,10 +44,7 @@
       <button disabled hx-get="funkos/<%= f["name"] %>/stop" hx-on:htmx:after-request="update_funkos()">Stop</button>
     <%- end -%>
       <button hx-get="funkos/<%= f["name"] %>/restart" hx-on:htmx:after-request="update_funkos()">Restart</button>
-      <button hx-target="#terminal" hx-get="funkos/<%= f["name"] %>/terminal/logs/">Logs</button>
-      <button hx-target="#terminal" hx-get="funkos/<%= f["name"] %>/terminal/shell/">Shell</button>
   <%- end -%>
-   <img id="spinner-<%= f["name"] %>" src="bars.svg"  class="htmx-indicator">
   </td>
 </tr>
 <%- end -%>