1 files changed, 32 insertions, 17 deletions

diff --git a/static/modules/sbbuilder.js b/static/modules/sbbuilder.js
index 16745cb..56802a9 100644
--- a/static/modules/sbbuilder.js
+++ b/static/modules/sbbuilder.js
@@ -5,39 +5,54 @@ function chipClass(status) {
   return "muted";
 }
 
+function when(ts) {
+  if (!ts) return "";
+  return new Date(ts * 1000).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
+}
+
+function summary(jobs) {
+  const running = jobs.filter((j) => ["running", "busy", "starting"].includes(j.status)).length;
+  const failed = jobs.filter((j) => ["failed", "lost", "killed"].includes(j.status)).length;
+  const parts = [];
+  if (running) parts.push(`${running} running`);
+  if (failed) parts.push(`${failed} failed`);
+  if (!parts.length) parts.push(jobs.length ? `${jobs.length} recent` : "idle");
+  return parts.join(" · ");
+}
+
 export default {
-  title: "Builds",
+  title: "Build VM",
   interval: 5,
 
   mount(el) {
-    const box = document.createElement("div");
-    box.className = "sbb";
-    el.append(box);
+    el.innerHTML = `<div class="sbb-summary muted"></div><div class="sbb-list"></div>`;
   },
 
   update(state, el) {
-    const box = el.querySelector(".sbb");
-    box.textContent = "";
+    const sum = el.querySelector(".sbb-summary");
+    const list = el.querySelector(".sbb-list");
     if (state.offline) {
-      box.textContent = "build VM unreachable";
+      sum.textContent = "";
+      list.textContent = "build VM unreachable";
       return;
     }
     const jobs = state.jobs ?? [];
-    if (!jobs.length) {
-      box.textContent = "No jobs";
-      return;
-    }
+    sum.textContent = summary(jobs);
+    list.textContent = "";
     for (const job of jobs.slice(0, 8)) {
       const row = document.createElement("div");
-      row.className = "row";
-      const id = document.createElement("span");
-      id.className = "num id";
-      id.textContent = job.id;
+      row.className = "row job";
+      const kind = document.createElement("span");
+      kind.className = "kind";
+      kind.textContent = job.kind || "job";
+      const time = document.createElement("span");
+      time.className = "muted num";
+      time.textContent = when(job.created);
       const status = document.createElement("span");
       status.className = chipClass(job.status);
       status.textContent = job.status;
-      row.append(id, status);
-      box.append(row);
+      row.append(kind, time, status);
+      list.append(row);
     }
   },
 };