PyObservability 0.0.3__py3-none-any.whl → 1.0.0__py3-none-any.whl

pyobservability/static/app.js

@@ -5,6 +5,43 @@
   // ------------------------------------------------------------
   const MAX_POINTS = 60;
   const targets = window.MONITOR_TARGETS || [];
+  const DEFAULT_PAGE_SIZE = 15;
+  const panelSpinners = {};
+
+  // ------------------------------------------------------------
+  // VISUAL SPINNERS
+  // ------------------------------------------------------------
+  function attachSpinners() {
+    // panels (charts/tables)
+    document.querySelectorAll(".panel").forEach(box => {
+      const overlay = document.createElement("div");
+      overlay.className = "loading-overlay";
+      overlay.innerHTML = `<div class="spinner"></div>`;
+      box.style.position = "relative";
+      box.appendChild(overlay);
+      panelSpinners[box.id || box.querySelector('table,canvas')?.id || Symbol()] = overlay;
+    });
+
+    // meta cards (system/static metrics)
+    document.querySelectorAll(".meta-card").forEach(card => {
+      const overlay = document.createElement("div");
+      overlay.className = "loading-overlay";
+      overlay.innerHTML = `<div class="spinner"></div>`;
+      card.style.position = "relative";
+      card.appendChild(overlay);
+      panelSpinners[card.querySelector(".meta-value")?.id || Symbol()] = overlay;
+    });
+  }
+
+  function showAllSpinners() {
+    Object.keys(panelSpinners).forEach(id => showSpinner(id));
+  }
+
+  function hideSpinners() {
+    document.querySelectorAll(".loading-overlay").forEach(x => {
+      x.classList.add("hidden");
+    });
+  }
 
   // ------------------------------------------------------------
   // DOM REFERENCES
@@ -12,8 +49,10 @@
   const nodeSelect = document.getElementById("node-select");
   const refreshBtn = document.getElementById("refresh-btn");
 
-  const ipEl = document.getElementById("ip");
-  const gpuEl = document.getElementById("gpu");
+  const systemEl = document.getElementById("system");
+  const ipEl = document.getElementById("ip-info");
+  const processorEl = document.getElementById("processor");
+
   const memEl = document.getElementById("memory");
   const diskEl = document.getElementById("disk");
   const loadEl = document.getElementById("cpuload");
@@ -24,18 +63,170 @@
 
   const coresGrid = document.getElementById("cores-grid");
 
+  const servicesTable = document.getElementById("services-table");
   const servicesTableBody = document.querySelector("#services-table tbody");
   const svcFilter = document.getElementById("svc-filter");
+  const svcGetAll = document.getElementById("get-all-services");
+
+  const processesTable = document.getElementById("processes-table");
+  const processesTableBody = processesTable.querySelector("tbody");
+  const procFilter = document.getElementById("proc-filter");
 
   const dockerTable = document.getElementById("docker-table");
   const dockerTableHead = dockerTable.querySelector("thead");
   const dockerTableBody = dockerTable.querySelector("tbody");
 
-  const disksTableBody = document.querySelector("#disks-table tbody");
-  const certsEl = document.getElementById("certificates");
+  const disksTable = document.getElementById("disks-table");
+  const disksTableHead = disksTable.querySelector("thead");
+  const disksTableBody = disksTable.querySelector("tbody");
+
+  const pyudiskTable = document.getElementById("pyudisk-table");
+  const pyudiskTableHead = pyudiskTable.querySelector("thead");
+  const pyudiskTableBody = pyudiskTable.querySelector("tbody");
+
+  const certsTable = document.getElementById("certificates-table");
+  const certsTableHead = certsTable.querySelector("thead");
+  const certsTableBody = certsTable.querySelector("tbody");
 
   const showCoresCheckbox = document.getElementById("show-cores");
 
+  // ------------------------------------------------------------
+  // PAGINATION HELPERS
+  // ------------------------------------------------------------
+  function createPaginatedTable(tableEl, headEl, bodyEl, pageSize = DEFAULT_PAGE_SIZE) {
+    const info = document.createElement("div");
+    info.className = "pagination-info";
+    tableEl.insertAdjacentElement("beforebegin", info);
+
+    const state = {
+      data: [],
+      page: 1,
+      pageSize
+    };
+
+    const pagination = document.createElement("div");
+    pagination.className = "pagination";
+    tableEl.insertAdjacentElement("afterend", pagination);
+
+    function render() {
+      const rows = state.data;
+      const pages = Math.ceil(rows.length / state.pageSize) || 1;
+      state.page = Math.max(1, Math.min(state.page, pages));
+
+      const start = (state.page - 1) * state.pageSize;
+      const chunk = rows.slice(start, start + state.pageSize);
+
+      info.textContent =
+        `Showing ${start + 1} to ${Math.min(start + state.pageSize, rows.length)} of ${rows.length} entries`;
+
+      bodyEl.innerHTML = "";
+      chunk.forEach(r => bodyEl.insertAdjacentHTML("beforeend", r));
+
+      renderPagination(pages);
+    }
+
+    function renderPagination(pages) {
+      pagination.innerHTML = "";
+
+      const makeBtn = (txt, cb, active = false, disabled = false) => {
+        const b = document.createElement("button");
+        b.textContent = txt;
+        if (active) b.classList.add("active");
+        if (disabled) {
+          b.disabled = true;
+          b.style.opacity = "0.5";
+          b.style.cursor = "default";
+        }
+        b.onclick = disabled ? null : cb;
+        pagination.appendChild(b);
+      };
+
+      // --- Previous ---
+      makeBtn("Previous", () => { state.page--; render(); }, false, state.page === 1);
+
+      const maxVisible = 5;
+
+      if (pages <= maxVisible + 2) {
+        // Show all
+        for (let p = 1; p <= pages; p++) {
+          makeBtn(p, () => { state.page = p; render(); }, p === state.page);
+        }
+      } else {
+        // Big list → use ellipsis
+        const showLeft = 3;
+        const showRight = 3;
+
+        if (state.page <= showLeft) {
+          // First pages
+          for (let p = 1; p <= showLeft + 1; p++) {
+            makeBtn(p, () => { state.page = p; render(); }, p === state.page);
+          }
+          addEllipsis();
+          makeBtn(pages, () => { state.page = pages; render(); });
+        } else if (state.page >= pages - showRight + 1) {
+          // Last pages
+          makeBtn(1, () => { state.page = 1; render(); });
+          addEllipsis();
+          for (let p = pages - showRight; p <= pages; p++) {
+            makeBtn(p, () => { state.page = p; render(); }, p === state.page);
+          }
+        } else {
+          // Middle
+          makeBtn(1, () => { state.page = 1; render(); });
+          addEllipsis();
+          for (let p = state.page - 1; p <= state.page + 1; p++) {
+            makeBtn(p, () => { state.page = p; render(); }, p === state.page);
+          }
+          addEllipsis();
+          makeBtn(pages, () => { state.page = pages; render(); });
+        }
+      }
+
+      // --- Next ---
+      makeBtn("Next", () => { state.page++; render(); }, false, state.page === pages);
+
+      function addEllipsis() {
+        const e = document.createElement("span");
+        e.textContent = "…";
+        e.style.padding = "4px 6px";
+        pagination.appendChild(e);
+      }
+    }
+
+    function setData(arr, columns) {
+      if (JSON.stringify(state.data) === JSON.stringify(arr)) {
+        return; // do not re-render if data didn't change
+      }
+      headEl.innerHTML = "<tr>" + columns.map(c => `<th>${c}</th>`).join("") + "</tr>";
+      state.data = arr.map(row => {
+        return "<tr>" + columns.map(c => `<td>${row[c] ?? ""}</td>`).join("") + "</tr>";
+      });
+      render();
+    }
+
+    return { setData };
+  }
+
+  // Instances for each table
+  const PAG_SERVICES = createPaginatedTable(
+    servicesTable, servicesTable.querySelector("thead"), servicesTableBody, 5
+  );
+  const PAG_PROCESSES = createPaginatedTable(
+    processesTable, processesTable.querySelector("thead"), processesTableBody
+  );
+  const PAG_DOCKER = createPaginatedTable(
+    dockerTable, dockerTableHead, dockerTableBody
+  );
+  const PAG_DISKS = createPaginatedTable(
+    disksTable, disksTableHead, disksTableBody
+  );
+  const PAG_PYUDISK = createPaginatedTable(
+    pyudiskTable, pyudiskTableHead, pyudiskTableBody
+  );
+  const PAG_CERTS = createPaginatedTable(
+    certsTable, certsTableHead, certsTableBody
+  );
+
   // ------------------------------------------------------------
   // CHART HELPERS
   // ------------------------------------------------------------
@@ -59,20 +250,9 @@
         ]
       },
       options: {
-        animation: false,
-        responsive: true,
-        maintainAspectRatio: false,
-        spanGaps: false,
-        scales: {
-          x: { display: false },
-          y: {
-            beginAtZero: true,
-            suggestedMax: 100
-          }
-        },
-        plugins: {
-          legend: { display: false }
-        }
+        animation: false, responsive: true, maintainAspectRatio: false,
+        scales: { x: { display: false }, y: { beginAtZero: true, suggestedMax: 100 }},
+        plugins: { legend: { display: false } }
       }
     });
   }
@@ -98,7 +278,6 @@
         responsive: false,
         interaction: false,
         events: [],
-        spanGaps: false,
         plugins: { legend: { display: false } },
         scales: {
           x: { display: false },
@@ -109,11 +288,11 @@
   }
 
   const cpuAvgChart = makeMainChart(cpuAvgCtx, "CPU Avg");
-  const memChart    = makeMainChart(memCtx,    "Memory %");
-  const loadChart   = makeMainChart(loadCtx,   "CPU Load");
+  const memChart    = makeMainChart(memCtx, "Memory %");
+  const loadChart   = makeMainChart(loadCtx, "CPU Load");
 
   // ------------------------------------------------------------
-  // CORE SPARKLINE STATE
+  // CORE CHARTS
   // ------------------------------------------------------------
   const coreMini = {};
 
@@ -125,6 +304,7 @@
       <canvas width="120" height="40"></canvas>
       <div class="value">—</div>
     `;
+    wrapper.style.display = showCoresCheckbox.checked ? "block" : "none";
     coresGrid.appendChild(wrapper);
 
     const canvas = wrapper.querySelector("canvas");
@@ -152,234 +332,224 @@
   // ------------------------------------------------------------
   // RESET UI
   // ------------------------------------------------------------
+  function resetTables() {
+    // Clear all table data immediately
+    PAG_SERVICES.setData([], []);
+    PAG_PROCESSES.setData([], []);
+    PAG_DOCKER.setData([], []);
+    PAG_DISKS.setData([], []);
+    PAG_PYUDISK.setData([], []);
+    PAG_CERTS.setData([], []);
+  }
+
   function resetUI() {
-    // Pre-fill charts with right-anchored null buffers
+    firstMessage = true;
+    hideSpinners();
     const EMPTY_DATA = Array(MAX_POINTS).fill(null);
     const EMPTY_LABELS = Array(MAX_POINTS).fill("");
 
-    function resetChart(chart) {
+    const resetChart = chart => {
       chart.data.labels = [...EMPTY_LABELS];
       chart.data.datasets[0].data = [...EMPTY_DATA];
       chart.update();
-    }
+    };
 
-    // Reset main charts (CPU Avg, Memory %, CPU Load)
     resetChart(cpuAvgChart);
     resetChart(memChart);
     resetChart(loadChart);
 
-    // Remove all per-core mini charts
     for (const name of Object.keys(coreMini)) {
       try { coreMini[name].chart.destroy(); } catch {}
       coreMini[name].el.remove();
       delete coreMini[name];
     }
 
-    // Reset static UI fields
+    systemEl.textContent = "-";
     ipEl.textContent = "—";
-    gpuEl.textContent = "—";
+    processorEl.textContent = "—";
     memEl.textContent = "—";
     diskEl.textContent = "—";
     loadEl.textContent = "—";
-
-    servicesTableBody.innerHTML = "";
-    dockerTableHead.innerHTML = "";
-    dockerTableBody.innerHTML = "";
-    disksTableBody.innerHTML = "";
-    certsEl.textContent = "—";
   }
 
   // ------------------------------------------------------------
-  // HELPERS
+  // MISC HELPERS
   // ------------------------------------------------------------
   function pushPoint(chart, value) {
     const ts = new Date().toLocaleTimeString();
     chart.data.labels.push(ts);
     chart.data.datasets[0].data.push(isFinite(value) ? Number(value) : NaN);
-
     if (chart.data.labels.length > MAX_POINTS) {
       chart.data.labels.shift();
       chart.data.datasets[0].data.shift();
     }
-
     chart.update("none");
   }
 
-  function num(x) {
-    const n = Number(x);
-    return Number.isFinite(n) ? n : null;
-  }
-
-  function formatStringOrObject(x) {
+  function num(x) { const n = Number(x); return Number.isFinite(n) ? n : null; }
+  const round2 = x => Number(x).toFixed(2);
+  const formatBytes = x => {
     if (x == null) return "—";
-    if (typeof x === "string" || typeof x === "number") return x;
-    return Object.entries(x)
-      .map(([k,v]) => `${k}: ${v}`)
-      .join("\n");
+    const u = ["B","KB","MB","GB","TB"];
+    let i = 0, n = Number(x);
+    while (n > 1024 && i < u.length-1) { n/=1024; i++; }
+    return n.toFixed(2) + " " + u[i];
+  };
+  const objectToString = (...vals) => {
+    for (const v of vals) {
+      if (v && typeof v === "object")
+        return Object.entries(v).map(([a,b])=>`${a}: ${b}`).join("<br>");
+      if (v != null) return v;
+    }
+    return "—";
+  };
+
+  function showSpinner(panelOrTableId) {
+    const overlay = panelSpinners[panelOrTableId];
+    if (overlay) overlay.classList.remove("hidden");
   }
 
-  function round2(x) {
-    const n = Number(x);
-    return Number.isFinite(n) ? n.toFixed(2) : "—";
+  function hideSpinner(panelOrTableId) {
+    const overlay = panelSpinners[panelOrTableId];
+    if (overlay) overlay.classList.add("hidden");
   }
 
   // ------------------------------------------------------------
-  // METRICS HANDLER
+  // HANDLE METRICS
   // ------------------------------------------------------------
+  let firstMessage = true;
+
   function handleMetrics(list) {
+    if (firstMessage) {
+      hideSpinners();
+      firstMessage = false;
+    }
+
     const now = new Date().toLocaleTimeString();
 
     for (const host of list) {
       if (host.base_url !== selectedBase) continue;
       const m = host.metrics || {};
 
-      // ------------------- BASIC INFO -------------------
-      ipEl.textContent = m.ip?.ip || m.ip || "—";
-      gpuEl.textContent = formatStringOrObject(m.gpu ?? m.cpu ?? "—");
-      if (m.disk) {
-        const total = m.disk.total ?? "—";
-        const used  = m.disk.used ?? "—";
-        const free  = m.disk.free ?? "—";
-        diskEl.textContent = `Total: ${total}\nUsed: ${used}\nFree: ${free}`;
-      } else {
-        diskEl.textContent = "NO DATA";
+      // ------------ Static fields ------------
+      systemEl.textContent =
+        `Node: ${m.node || "-"}\n` +
+        `OS: ${m.system || "-"}\n` +
+        `Architecture: ${m.architecture || "-"}\n\n` +
+        `CPU Cores: ${m.cores || "-"}\n` +
+        `Up Time: ${m.uptime || "-"}\n`;
+
+      if (m.ip_info)
+        ipEl.textContent =
+          `Private: ${m.ip_info.private || "-"}\n\n` +
+          `Public: ${m.ip_info.public || "-"}`;
+
+      processorEl.textContent =
+        `CPU: ${m.cpu_name || "-"}\n\n` +
+        `GPU: ${m.gpu_name || "-"}`;
+
+      if (m.disk_info && m.disk_info[0]) {
+        const d = m.disk_info[0];
+        diskEl.textContent =
+          `Total: ${formatBytes(d.total)}\n` +
+          `Used: ${formatBytes(d.used)}\n` +
+          `Free: ${formatBytes(d.free)}`;
       }
 
-      // ------------------- MEMORY -------------------
-      if (m.memory) {
-        const used = m.memory.ram_used || m.memory.used || "";
-        const percent = m.memory.ram_usage ?? m.memory.usage ?? m.memory.percent ?? "—";
-        const totalMem = m.memory.ram_total ?? m.memory.total ?? "—";
-        memEl.textContent = `Total: ${totalMem}\nUsed: ${used}\nPercent: ${percent}%`;
-        pushPoint(memChart, num(percent));
-      } else {
-        memEl.textContent = "NO DATA"
+      if (m.memory_info) {
+        memEl.textContent =
+          `Total: ${formatBytes(m.memory_info.total)}\n` +
+          `Used: ${formatBytes(m.memory_info.used)}\n` +
+          `Percent: ${round2(m.memory_info.percent)}%`;
+        pushPoint(memChart, num(m.memory_info.percent));
       }
 
-      // ------------------- CPU -------------------
+      // ------------ CPU ------------
       let avg = null;
-
-      if (m.cpu) {
-        const detail = m.cpu.detail || m.cpu;
-
-        if (typeof detail === "object") {
-          const names = Object.keys(detail);
-          pruneOldCores(names);
-
-          const values = [];
-
-          for (const [core, val] of Object.entries(detail)) {
-            const v = num(val);
-            values.push(v);
-
-            const c = getCoreChart(core);
-            c.chart.data.labels.push(now);
-            c.chart.data.datasets[0].data.push(v ?? 0);
-
-            if (c.chart.data.labels.length > MAX_POINTS) {
-              c.chart.data.labels.shift();
-              c.chart.data.datasets[0].data.shift();
-            }
-
-            c.chart.update("none");
-            c.valEl.textContent = `${(v ?? 0).toFixed(1)}%`;
+      if (m.cpu_usage) {
+        const values = m.cpu_usage.map(num);
+        avg = values.reduce((a,b)=>a+(b||0),0) / values.length;
+        pruneOldCores(values.map((_,i)=>"cpu"+(i+1)));
+
+        values.forEach((v,i)=>{
+          const core = getCoreChart("cpu"+(i+1));
+
+          core.chart.data.labels.push(now);
+          core.chart.data.datasets[0].data.push(v||0);
+          if (core.chart.data.labels.length > MAX_POINTS) {
+            core.chart.data.labels.shift();
+            core.chart.data.datasets[0].data.shift();
           }
-
-          avg = values.reduce((a, b) => a + (b ?? 0), 0) / values.length;
-        }
-        else if (typeof detail === "number") {
-          avg = detail;
-        }
+          core.chart.update({ lazy: true });
+          core.valEl.textContent = `${(v||0).toFixed(1)}%`;
+        });
       }
-
       if (avg != null) pushPoint(cpuAvgChart, avg);
 
-      // ------------------- CPU LOAD -------------------
-      if (m.cpu_load) {
-        const load = m.cpu_load.detail || m.cpu_load;
-        if (typeof load === "object") {
-          const m1  = load.m1 ?? load[0];
-          const m5  = load.m5 ?? load[1];
-          const m15 = load.m15 ?? load[2];
-
-          loadEl.textContent = `${round2(m1)} / ${round2(m5)} / ${round2(m15)}`;
-          pushPoint(loadChart, num(m1) ?? 0);
-        } else {
-          loadEl.textContent = load;
-          pushPoint(loadChart, num(load));
-        }
-      } else {
-        loadEl.textContent = "NO DATA"
+      // ------------ LOAD ------------
+      if (m.load_averages) {
+        const la = m.load_averages;
+        loadEl.textContent =
+          `${round2(la.m1)} / ${round2(la.m5)} / ${round2(la.m15)}`;
+        pushPoint(loadChart, num(la.m1));
       }
 
-      // ------------------- SERVICES -------------------
-      if (Array.isArray(m.services)) {
-        const filter = svcFilter.value.trim().toLowerCase();
-        servicesTableBody.innerHTML = "";
-
-        for (const s of m.services) {
-          const name = s.pname || s.label || s.name || "";
-
-          if (filter && !name.toLowerCase().includes(filter)) continue;
-
-          const tr = document.createElement("tr");
-          tr.innerHTML = `
-            <td>${s.pid ?? s.PID ?? ""}</td>
-            <td>${name}</td>
-            <td>${s.status ?? "—"}</td>
-            <td>${s.cpu ? JSON.stringify(s.cpu) : "—"}</td>
-            <td>${s.memory ? (s.memory.rss || s.memory.pfaults || JSON.stringify(s.memory)) : "—"}</td>
-          `;
-          servicesTableBody.appendChild(tr);
-        }
-      } else {
-        servicesTableBody.innerHTML = `<tr><td colspan="5">NO DATA</td></tr>`;
+      // ------------ SERVICES (paginated) ------------
+      const services = (m.service_stats || m.services || []).filter(s =>
+        (s.pname || s.Name || "").toLowerCase().includes(
+          svcFilter.value.trim().toLowerCase()
+        )
+      );
+      if (services.length) {
+        const columns = ["PID","Name","Status","CPU","Memory","Threads","Open Files"];
+        const cleaned = services.map(s => ({
+          PID: s.PID ?? s.pid ?? "",
+          Name: s.pname ?? s.Name ?? s.name ?? "",
+          Status: s.Status ?? s.active ?? s.status ?? s.Active ?? "—",
+          CPU: objectToString(s.CPU, s.cpu),
+          Memory: objectToString(s.Memory, s.memory),
+          Threads: s.Threads ?? s.threads ?? "—",
+          "Open Files": s["Open Files"] ?? s.open_files ?? "—"
+        }));
+        PAG_SERVICES.setData(cleaned, columns);
+        hideSpinner("services-table");
       }
 
-      // ------------------- DOCKER -------------------
-      const dockerList = m.docker_stats;
+      // ------------ PROCESSES (paginated) ------------
+      const processes = (m.process_stats || []).filter(p =>
+        (p.Name || "").toLowerCase().includes(
+          procFilter.value.trim().toLowerCase()
+        )
+      );
+      if (processes.length) {
+        const columns = ["PID","Name","Status","CPU","Memory","Uptime","Threads","Open Files"];
+        PAG_PROCESSES.setData(processes, columns);
+        hideSpinner("processes-table");
+      }
 
-      dockerTableHead.innerHTML = "";
-      dockerTableBody.innerHTML = "";
+      // ------------ DOCKER, DISKS, PYUDISK, CERTIFICATES ------------
+      if (m.docker_stats) {
+        const cols = Object.keys(m.docker_stats[0] || {});
+        PAG_DOCKER.setData(m.docker_stats, cols);
+        hideSpinner("docker-table");
+      }
 
-      if (!Array.isArray(dockerList) || dockerList.length === 0) {
-        dockerTableBody.innerHTML = `<tr><td colspan="10">NO DATA</td></tr>`;
-      } else {
-        // Create header
-        const columns = Object.keys(dockerList[0]);
-        dockerTableHead.innerHTML =
-          "<tr>" + columns.map(c => `<th>${c}</th>`).join("") + "</tr>";
-
-        // Create rows
-        dockerList.forEach(c => {
-          const row = "<tr>" +
-            columns.map(col => `<td>${c[col] ?? ""}</td>`).join("") +
-            "</tr>";
-          dockerTableBody.insertAdjacentHTML("beforeend", row);
-        });
+      if (m.disks_info) {
+        const cols = Object.keys(m.disks_info[0] || {});
+        PAG_DISKS.setData(m.disks_info, cols);
+        hideSpinner("disks-table");
       }
 
-      // ------------------- DISKS -------------------
-      if (Array.isArray(m.disks)) {
-        disksTableBody.innerHTML = "";
-        for (const d of m.disks) {
-          const tr = document.createElement("tr");
-          tr.innerHTML = `
-            <td>${d.name || d.device_id || ""}</td>
-            <td>${d.size || d.total || ""}</td>
-            <td>${(d.mountpoints || []).join(", ")}</td>
-          `;
-          disksTableBody.appendChild(tr);
-        }
-      } else {
-        disksTableBody.innerHTML = `<tr><td colspan="3">NO DATA</td></tr>`;
+      if (m.pyudisk_stats) {
+        const cols = Object.keys(m.pyudisk_stats[0] || {});
+        PAG_PYUDISK.setData(m.pyudisk_stats, cols);
+        hideSpinner("pyudisk-table");
       }
 
-      // ------------------- CERTIFICATES -------------------
       if (m.certificates) {
-        certsEl.textContent = JSON.stringify(m.certificates, null, 2);
-      } else {
-        certsEl.textContent = "NO DATA"
+        const cols = Object.keys(m.certificates[0] || {});
+        PAG_CERTS.setData(m.certificates, cols);
+        hideSpinner("certificates-table");
       }
     }
   }
@@ -394,22 +564,26 @@
     nodeSelect.appendChild(opt);
   });
 
-  let selectedBase =
-    nodeSelect.value || (targets[0] && targets[0].base_url);
+  let selectedBase = nodeSelect.value || (targets[0] && targets[0].base_url);
   nodeSelect.value = selectedBase;
 
   nodeSelect.addEventListener("change", () => {
     selectedBase = nodeSelect.value;
     resetUI();
+    resetTables();
+    showAllSpinners();
+    ws.send(JSON.stringify({ type: "select_target", base_url: selectedBase }));
   });
 
+  svcGetAll.addEventListener("change", () => {
+    ws.send(JSON.stringify({ type: "update_flags", all_services: svcGetAll.checked }));
+  })
+
   refreshBtn.addEventListener("click", resetUI);
 
   showCoresCheckbox.addEventListener("change", () => {
     const visible = showCoresCheckbox.checked;
-    Object.values(coreMini).forEach(c => {
-      c.el.style.display = visible ? "block" : "none";
-    });
+    Object.values(coreMini).forEach(c => c.el.style.display = visible ? "block" : "none");
   });
 
   // ------------------------------------------------------------
@@ -418,10 +592,15 @@
   const protocol = location.protocol === "https:" ? "wss" : "ws";
   const ws = new WebSocket(`${protocol}://${location.host}/ws`);
 
+  ws.onopen = () => {
+    ws.send(JSON.stringify({ type: "select_target", base_url: selectedBase }));
+  };
+
   ws.onmessage = evt => {
     try {
       const msg = JSON.parse(evt.data);
       if (msg.type === "metrics") handleMetrics(msg.data);
+      if (msg.type === "error") alert(msg.message);
     } catch (err) {
       console.error("WS parse error:", err);
     }
@@ -430,5 +609,7 @@
   // ------------------------------------------------------------
   // INIT
   // ------------------------------------------------------------
-  resetUI();
+  attachSpinners();
+  resetUI();           // reset UI, keep spinners visible
+  showAllSpinners();   // show spinners until first metrics arrive
 })();