From e6ae8c4b235492cf812889464698b3447178b354 Mon Sep 17 00:00:00 2001
From: Audiobuzz <audiobuzz@gmail.com>
Date: Fri, 10 Jul 2026 06:22:33 +0000
Subject: [PATCH] fleet-manager UI: auto-refresh the selected host's metric
 graphs

The Monitor tab polled /api/hosts every 10s (roster + host-detail refresh) but
only fetched a host's metric series on click, so the tmpfs/cpu/temp graphs went
stale until you re-selected. Extract loadMetrics() and call it from the same 10s
tick when a host is selected, so the graphs stay live.
---
 .../fleet-manager/ui/src/pages/Monitor.svelte | 22 ++++++++++++++-----
 1 file changed, 17 insertions(+), 5 deletions(-)

diff --git a/serving/fleet-manager/ui/src/pages/Monitor.svelte b/serving/fleet-manager/ui/src/pages/Monitor.svelte
index 4a34a47..be7d2cb 100644
--- a/serving/fleet-manager/ui/src/pages/Monitor.svelte
+++ b/serving/fleet-manager/ui/src/pages/Monitor.svelte
@@ -22,12 +22,11 @@
     }
   }
 
-  async function select(h) {
-    selected = h
+  async function loadMetrics(serial) {
     metricsErr = ''
     for (const f of Object.keys(metrics)) {
       try {
-        const d = await api.get(`/api/hosts/${h.identity.cert_serial}/metrics?field=${f}&range=6h`)
+        const d = await api.get(`/api/hosts/${serial}/metrics?field=${f}&range=6h`)
         metrics[f] = d.points || []
       } catch (e) {
         metrics[f] = []
@@ -36,6 +35,19 @@
     }
   }
 
+  async function select(h) {
+    selected = h
+    await loadMetrics(h.identity.cert_serial)
+  }
+
+  // One tick: refresh the roster (+ host-detail via the re-point in load()) and,
+  // if a host is selected, its metric series too — so the graphs stay live
+  // without re-clicking.
+  async function refresh() {
+    await load()
+    if (selected) await loadMetrics(selected.identity.cert_serial)
+  }
+
   function drift(h) {
     const run = h.version?.image_version
     const want = h.desired?.target_version
@@ -43,8 +55,8 @@
   }
 
   $effect(() => {
-    load()
-    const id = setInterval(load, 10000)
+    refresh()
+    const id = setInterval(refresh, 10000)
     return () => clearInterval(id)
   })
 </script>