@andrian.yablonskyy/thub-coordinator 1.0.36 → 1.0.38

package/public/js/live.js

@@ -0,0 +1,287 @@
+/**
+ * @file        packages/coordinator/public/js/live.js
+ * @description Dashboard live updates: listens to GET /live and, when the page's topics change, re-fetches the page and swaps its [data-live] regions
+ *
+ * @author      Andrian Yablonskyy
+ * @copyright   Copyright (c) 2026 Andrian Yablonskyy. All rights reserved.
+ *
+ * This file is part of TestHub and is proprietary and confidential.
+ * Unauthorized copying, modification, distribution, or use of this file,
+ * via any medium, is strictly prohibited without prior written permission
+ * from AdSystem.PRO.
+ */
+
+'use strict';
+
+// README §10 "Live updates". The stream only says which topics changed; the
+// data comes from re-fetching this very URL (same filters, search, paging and
+// templates) with X-Thub-Live: 1, which the server treats as passive — it
+// doesn't extend the session's idle timeout. Only [data-live] regions are
+// replaced, and never while someone is using them.
+(function (){
+  const topics = (document.body.dataset.liveTopics || '').split(/\s+/).filter(Boolean),
+    indicator = document.getElementById('thub-live');
+  if (!topics.length || !window.EventSource || !window.DOMParser){
+    return;
+  }
+
+  const MIN_GAP_MS = 2000, // at most one re-fetch per 2 s per tab
+    RETRY_BLOCKED_MS = 2000,
+    RECONNECT_MS = 5000,
+    // One stream per browser, not per tab (browsers allow only 6 connections
+    // per site over HTTP/1.1): the tab holding the lock opens it and relays
+    // what it hears to the others.
+    channel = 'BroadcastChannel' in window ? new BroadcastChannel('thub-live') : null;
+  let dirty = false,
+    fetching = false,
+    streamStatus = null, // set only in the tab holding the stream
+    ended = false,
+    lastFetch = 0,
+    lastUpdate = Date.now(),
+    timer = null;
+
+  // --- status indicator (navbar) -----------------------------------------
+  const LABELS = {
+    connecting: ['Live', 'Connecting to live updates…'],
+    live: ['Live', 'Live updates on'],
+    paused: ['Paused', 'Live updates paused while you edit — they resume when you’re done'],
+    offline: ['Offline', 'Coordinator unreachable — reconnecting…'],
+    ended: ['Session ended', 'Your session ended — reload the page to sign in again']
+  };
+  let state = 'connecting';
+  function setState(next){
+    state = next;
+    if (!indicator){
+      return;
+    }
+    const [label, title] = LABELS[next];
+    indicator.dataset.state = next;
+    indicator.querySelector('.thub-live-label').textContent = label;
+    indicator.title = next === 'live' ? `${title} · updated ${ago()}` : title;
+  }
+  function ago(){
+    const s = Math.round((Date.now() - lastUpdate) / 1000);
+    return s < 5 ? 'just now' : s < 90 ? `${s} s ago` : `${Math.round(s / 60)} min ago`;
+  }
+  if (indicator){
+    indicator.addEventListener('mouseenter', () => setState(state));
+    indicator.addEventListener('click', () => {
+      if (ended){
+        window.location.reload();
+      }
+    });
+  }
+
+  // --- deciding when a region may be replaced ----------------------------
+  // Everything waits while a confirmation is open: it submits a form that
+  // may sit in a region, and must not lose it.
+  function globallyBlocked(){
+    return Boolean(document.querySelector('#thub-confirm-modal.show, #remove-resource-modal.show, .thub-overlay'));
+  }
+  // A region waits while it's in use: a field or form in it has focus (not
+  // just a row — focus returns to the row after its resource card closes),
+  // an open collapse with fields (inline rename), a dropdown, or a modal
+  // inside it (agent Edit).
+  function regionBusy(region){
+    const active = document.activeElement,
+      editing = active && region.contains(active) &&
+        (active.matches('input, select, textarea, [contenteditable]') || active.closest('form'));
+    return Boolean(editing) || Boolean(region.querySelector(
+      '.collapse.show :is(input, select, textarea), .collapsing, .dropdown-menu.show, .modal.show'
+    ));
+  }
+
+  // --- applying a fresh copy of the page ---------------------------------
+  function disposeTooltips(root){
+    root.querySelectorAll('[data-bs-toggle="tooltip"]').forEach((el) => bootstrap.Tooltip.getInstance(el)?.dispose());
+  }
+
+  function apply(doc){
+    // Resources added or removed: their card modals (with the config tabs'
+    // own scripts) exist only on a full page load.
+    const cards = (d) => [...d.querySelectorAll('.thub-resource-card')].map((m) => m.id).sort().join(','),
+      structureChanged = cards(document) !== cards(doc);
+    if (structureChanged && !document.querySelector('.modal.show')){
+      window.location.reload();
+      return true;
+    }
+    let deferred = false;
+    document.querySelectorAll('[data-live]').forEach((region) => {
+      const fresh = doc.querySelector(`[data-live="${CSS.escape(region.dataset.live)}"]`);
+      if (!fresh || fresh.innerHTML === region.innerHTML){
+        return;
+      }
+      if (regionBusy(region)){
+        deferred = true;
+        return;
+      }
+      disposeTooltips(region);
+      region.innerHTML = fresh.innerHTML;
+    });
+    return !deferred;
+  }
+
+  async function refresh(){
+    timer = null;
+    if (ended || fetching){
+      return;
+    }
+    if (document.hidden){
+      dirty = true; // caught up on visibilitychange
+      return;
+    }
+    if (globallyBlocked()){
+      dirty = true;
+      setState('paused');
+      schedule(RETRY_BLOCKED_MS);
+      return;
+    }
+    fetching = true;
+    dirty = false;
+    lastFetch = Date.now();
+    try {
+      const res = await fetch(window.location.href, {
+        headers: { 'X-Thub-Live': '1' },
+        credentials: 'same-origin',
+        cache: 'no-store',
+        redirect: 'manual'
+      });
+      if (res.type === 'opaqueredirect' || res.status === 401 || res.status === 403){
+        sessionEnded();
+        return;
+      }
+      if (!res.ok){
+        throw new Error(`HTTP ${res.status}`);
+      }
+      const doc = new DOMParser().parseFromString(await res.text(), 'text/html');
+      if (apply(doc)){
+        lastUpdate = Date.now();
+        setState('live');
+      }
+      else {
+        // Something was in use: try again shortly, until it's free.
+        dirty = true;
+        setState('paused');
+        schedule(RETRY_BLOCKED_MS);
+      }
+    }
+    catch {
+      dirty = true;
+      setState('offline');
+      schedule(RECONNECT_MS);
+    }
+    finally {
+      fetching = false;
+    }
+  }
+
+  function schedule(delay){
+    if (ended || timer){
+      return;
+    }
+    const wait = Math.max(delay ?? 0, lastFetch + MIN_GAP_MS - Date.now());
+    timer = setTimeout(refresh, Math.max(0, wait));
+  }
+
+  document.addEventListener('visibilitychange', () => {
+    if (!document.hidden && dirty){
+      schedule(0);
+    }
+  });
+  // Leaving a field or closing a modal may be what a deferred update waits for.
+  document.addEventListener('focusout', () => dirty && schedule(300));
+  document.addEventListener('hidden.bs.modal', () => dirty && schedule(300));
+  document.addEventListener('hidden.bs.collapse', () => dirty && schedule(300));
+
+  function sessionEnded(){
+    ended = true;
+    clearTimeout(timer);
+    setState('ended');
+  }
+
+  // --- messages (from our own stream, or relayed from the tab holding it) -
+  function onMessage(msg){
+    if (msg.type === 'changed' && msg.topics.some((t) => topics.includes(t))){
+      schedule(0);
+    }
+    else if (msg.type === 'resync'){
+      schedule(0); // (re)connected: whatever happened meanwhile, catch up
+    }
+    else if (msg.type === 'status' && !ended && state !== 'paused'){
+      setState(msg.status);
+    }
+    else if (msg.type === 'session-ended'){
+      sessionEnded();
+    }
+    else if (msg.type === 'status-request' && streamStatus){
+      channel.postMessage({ type: 'status', status: streamStatus }); // a tab opened later asks
+    }
+  }
+  function broadcast(msg){
+    if (msg.type === 'status'){
+      streamStatus = msg.status;
+    }
+    channel?.postMessage(msg);
+    onMessage(msg);
+  }
+  if (channel){
+    channel.onmessage = (e) => onMessage(e.data);
+    channel.postMessage({ type: 'status-request' });
+  }
+
+  // --- the stream (only in the tab that holds the lock) ------------------
+  // Resolves when this tab should give the stream up for good: session ended.
+  function runStream(){
+    return new Promise((resolve) => {
+      let connectedBefore = false,
+        source = null;
+      function connect(){
+        source = new EventSource('/live');
+        source.addEventListener('hello', () => {
+          broadcast({ type: 'status', status: 'live' });
+          if (connectedBefore){
+            broadcast({ type: 'resync' });
+          }
+          connectedBefore = true;
+        });
+        source.addEventListener('changed', (e) => broadcast({ type: 'changed', topics: JSON.parse(e.data).topics }));
+        source.addEventListener('session-ended', () => {
+          source.close();
+          broadcast({ type: 'session-ended' });
+          resolve();
+        });
+        source.onerror = async () => {
+          if (source.readyState !== EventSource.CLOSED){
+            broadcast({ type: 'status', status: 'offline' }); // EventSource retries by itself
+            return;
+          }
+          // Closed for good (an HTTP error, e.g. 401 or a proxy's 502 during
+          // a restart): signed out, or just down for now?
+          broadcast({ type: 'status', status: 'offline' });
+          try {
+            const res = await fetch('/live', { method: 'HEAD', redirect: 'manual', credentials: 'same-origin', headers: { 'X-Thub-Live': '1' } });
+            if (res.type === 'opaqueredirect' || res.status === 401 || res.status === 403){
+              broadcast({ type: 'session-ended' });
+              resolve();
+              return;
+            }
+          }
+          catch {
+            // unreachable: retry below
+          }
+          setTimeout(connect, RECONNECT_MS);
+        };
+      }
+      connect();
+    });
+  }
+
+  if (navigator.locks && channel){
+    // Held until the stream ends for good; if this tab closes, the browser
+    // releases it and the next waiting tab takes over.
+    navigator.locks.request('thub-live-stream', runStream);
+  }
+  else {
+    runStream();
+  }
+})();

package/public/js/log-viewer.js

@@ -44,16 +44,128 @@
     return `${p.day}/${p.month}/${p.year} ${p.hour}:${p.minute}:${p.second}`;
   }
 
-  function render(){
-    const wanted = filter.value;
-    pre.textContent = lines
-      .filter((l) => !wanted || l.stream === wanted)
-      .map((l) => `[${fmtTime(l.ts)}] [${l.stream}] ${l.line}`)
-      .join('\n');
-    pre.scrollTop = pre.scrollHeight;
+  // Search (views/mixins/log-viewer.pug): case-insensitive, literal text.
+  // Matches are <mark>ed; `current` is the one the arrows step to.
+  const search = document.getElementById('log-search'),
+    onlyMatching = document.getElementById('log-search-only'),
+    count = document.getElementById('log-search-count'),
+    prev = document.getElementById('log-search-prev'),
+    next = document.getElementById('log-search-next');
+  let hits = [],
+    current = -1,
+    queued = false;
+
+  function escapeHtml(s){
+    return s.replace(/[&<>]/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;' })[c]);
+  }
+
+  function showCurrent(scroll){
+    hits.forEach((el, i) => el.classList.toggle('current', i === current));
+    if (current >= 0){
+      count.textContent = `${current + 1} / ${hits.length}`;
+      if (scroll){
+        const el = hits[current];
+        pre.scrollTop = el.offsetTop - pre.clientHeight / 2;
+      }
+    }
+  }
+
+  function step(delta){
+    if (!hits.length){
+      return;
+    }
+    current = (current + delta + hits.length) % hits.length;
+    showCurrent(true);
+  }
+
+  // `live`: re-rendered for a newly streamed line — keep the reader's place
+  // while searching; without a search, follow the end of the log as before.
+  function render({ live = false } = {}){
+    const wanted = filter.value,
+      query = search.value.trim(),
+      shown = lines
+        .filter((l) => !wanted || l.stream === wanted)
+        .map((l) => `[${fmtTime(l.ts)}] [${l.stream}] ${l.line}`);
+
+    if (!query){
+      pre.textContent = shown.join('\n');
+      hits = [];
+      current = -1;
+      count.hidden = true;
+      prev.disabled = next.disabled = true;
+      pre.scrollTop = pre.scrollHeight;
+      return;
+    }
+
+    const re = new RegExp(query.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'), 'gi'),
+      out = [];
+    for (const text of shown){
+      let last = 0,
+        html = '',
+        m;
+      re.lastIndex = 0;
+      while ((m = re.exec(text))){
+        html += `${escapeHtml(text.slice(last, m.index))}<mark class="thub-log-hit">${escapeHtml(m[0])}</mark>`;
+        last = m.index + m[0].length;
+      }
+      if (last || !onlyMatching.checked){
+        out.push(html + escapeHtml(text.slice(last)));
+      }
+    }
+    const scrollTop = pre.scrollTop;
+    pre.innerHTML = out.join('\n');
+    hits = [...pre.querySelectorAll('mark.thub-log-hit')];
+    count.hidden = false;
+    count.classList.toggle('text-danger', !hits.length);
+    prev.disabled = next.disabled = hits.length < 2;
+    if (!hits.length){
+      current = -1;
+      count.textContent = 'No matches';
+      return;
+    }
+    if (live){
+      current = Math.min(Math.max(current, 0), hits.length - 1);
+      showCurrent(false);
+      pre.scrollTop = scrollTop;
+    }
+    else {
+      current = 0;
+      showCurrent(true);
+    }
+  }
+
+  // Streamed lines can arrive in bursts: render at most once per frame.
+  function renderLive(){
+    if (queued){
+      return;
+    }
+    queued = true;
+    requestAnimationFrame(() => {
+      queued = false;
+      render({ live: true });
+    });
   }
 
-  filter.addEventListener('change', render);
+  let typing;
+  search.addEventListener('input', () => {
+    clearTimeout(typing);
+    typing = setTimeout(() => render(), 150);
+  });
+  search.addEventListener('keydown', (e) => {
+    if (e.key === 'Enter'){
+      e.preventDefault();
+      step(e.shiftKey ? -1 : 1);
+    }
+    else if (e.key === 'Escape' && search.value){
+      e.preventDefault();
+      search.value = '';
+      render();
+    }
+  });
+  prev.addEventListener('click', () => step(-1));
+  next.addEventListener('click', () => step(1));
+  onlyMatching.addEventListener('change', () => render());
+  filter.addEventListener('change', () => render());
 
   // Already finished when the page loaded: the output will never change
   // again, so just fetch it once — no EventSource, no live connection, no
@@ -75,17 +187,17 @@
   const source = new EventSource(`/jobs/${jobId}/stream`);
   source.addEventListener('log', (e) => {
     lines.push(JSON.parse(e.data));
-    render();
+    renderLive();
   });
   source.addEventListener('state', (e) => {
     const { state, resource } = JSON.parse(e.data);
     lines.push({ ts: new Date().toISOString(), stream: 'state', line: `-> ${state}${resource ? ' on ' + resource : ''}` });
-    render();
+    renderLive();
   });
   source.addEventListener('end', (e) => {
     const { state } = JSON.parse(e.data);
     lines.push({ ts: new Date().toISOString(), stream: 'state', line: `job finished: ${state}` });
-    render();
+    renderLive();
     source.close();
     // The job was active when we opened this page and just finished —
     // reload once to pick up the now-final badge/artifacts list.

package/public/js/remove-resource.js

@@ -20,8 +20,10 @@
   }
   const field = (name) => modalEl.querySelector(`[data-field="${name}"]`);
 
-  document.querySelectorAll('[data-remove-resource]').forEach((btn) => {
-    btn.addEventListener('click', () => {
+  // Delegated, so buttons swapped in by live updates (live.js) work.
+  document.addEventListener('click', (e) => {
+    const btn = e.target.closest('[data-remove-resource]');
+    if (btn){
       const { removeResource: id, removeName: name, removeJob: job, removeReturn: returnTo } = btn.dataset;
       field('name').textContent = name;
       field('job').textContent = job;
@@ -40,6 +42,6 @@
       else {
         bootstrap.Modal.getOrCreateInstance(modalEl).show();
       }
-    });
+    }
   });
 })();

package/public/js/resource-card.js

@@ -21,18 +21,19 @@
     }
   }
 
-  document.querySelectorAll('[data-resource-card]').forEach((el) => {
-    el.addEventListener('click', (e) => {
-      // The Resources table's own action buttons stay plain actions.
-      if (!e.target.closest('form, button, a, input')){
-        open(el);
-      }
-    });
-    el.addEventListener('keydown', (e) => {
-      if ((e.key === 'Enter' || e.key === ' ') && e.target === el){
-        e.preventDefault();
-        open(el);
-      }
-    });
+  // Delegated, so rows and cards swapped in by live updates (live.js) work.
+  document.addEventListener('click', (e) => {
+    const el = e.target.closest('[data-resource-card]');
+    // The Resources table's own action buttons stay plain actions.
+    if (el && !e.target.closest('form, button, a, input')){
+      open(el);
+    }
+  });
+  document.addEventListener('keydown', (e) => {
+    const el = e.target.closest?.('[data-resource-card]');
+    if (el && (e.key === 'Enter' || e.key === ' ') && e.target === el){
+      e.preventDefault();
+      open(el);
+    }
   });
 })();

package/public/js/tooltips.js

@@ -13,6 +13,8 @@
 
 'use strict';
 
+// Delegated (one instance per element, created on first hover/focus), so
+// content swapped in by live updates (public/js/live.js) gets tooltips too.
 (function (){
-  document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach((el) => new bootstrap.Tooltip(el));
+  new bootstrap.Tooltip(document.body, { selector: '[data-bs-toggle="tooltip"]' });
 })();

package/src/server.js

@@ -37,6 +37,7 @@ const path = require('node:path'),
   { createCleanupService } = require('./services/cleanup'),
   { startDevMode } = require('./dev/virtual'),
   { createUpdatesService } = require('./services/updates'),
+  { createLiveService } = require('./services/live'),
 
   { createAgentRouter } = require('./api/agent'),
   { createResourceRouter } = require('./api/resource'),
@@ -58,7 +59,8 @@ function buildServices(config){
     heartbeatMonitor = createHeartbeatMonitor(db, { bus, events, registry, jobs, config }),
     retention = createRetentionService(db, { bus, logs, artifacts, config }),
     cleanup = createCleanupService(db, { jobs, config }),
-    updates = createUpdatesService({ config });
+    updates = createUpdatesService({ config }),
+    live = createLiveService(db, { bus, updates });
 
   jobs.reconcileOnStartup();
   updates.start();
@@ -86,7 +88,8 @@ function buildServices(config){
     heartbeatMonitor,
     retention,
     cleanup,
-    updates
+    updates,
+    live
   };
 }
 
@@ -127,6 +130,21 @@ function createApp(config, services){
       cookie: { httpOnly: true, sameSite: 'lax' }
     })
   );
+  // Background requests of the dashboard's live updates (public/js/live.js):
+  // the GET /live stream and the page re-fetches it triggers (header
+  // X-Thub-Live: 1). They must not count as activity — otherwise an open
+  // tab would keep the session alive forever and the idle timeout (§10.1)
+  // would never fire — so they don't extend it (`touch` is what `rolling`
+  // uses to push the expiry out) and web/routes.js leaves the session alone.
+  app.use((req, res, next) => {
+    if (req.session && (req.path === '/live' || req.get('X-Thub-Live') === '1')){
+      req.thubPassive = true;
+      req.session.touch = function (){
+        return this;
+      };
+    }
+    next();
+  });
   app.use(express.static(path.join(__dirname, '..', 'public')));
   app.use('/avatars', express.static(config.avatarsDir));
 

package/src/services/jobs.js

@@ -15,6 +15,7 @@
 
 const { validateJobSpec, maskEnv, JOB_STATES, ACTIVE_JOB_STATES, TERMINAL_JOB_STATES, RESOURCE_STATES } = require('@andrian.yablonskyy/thub-common'),
   { paginate } = require('./list-prefs'),
+  { parseTerms, likeClause } = require('./search'),
   // Named in spec errors: a field the Agent sends but this thub-common
   // doesn't know means the Coordinator needs an update.
   VERSIONS = `Coordinator v${require('../../package.json').version}, ` +
@@ -87,16 +88,26 @@ function createJobsService(db, { bus, events, registry, artifacts, config }){
   // Dashboard /jobs (§10): one sorted page plus the total, both in SQL so a
   // long history never has to be loaded whole. `sort` is a list-prefs key.
   const PAGE_SORT_SQL = {
-    id: 'jobs.id',
-    source: 'jobs.source',
-    user: 'json_extract(jobs.spec, \'$.user\')',
-    state: 'jobs.state',
-    resource: 'COALESCE(r.name, jobs.resource_name)',
-    created: 'jobs.created_at',
-    duration: 'jobs.duration_sec'
-  };
-
-  function page({ state, source, sort = 'created', dir = 'desc', size = 25, page: pageNo = 1 } = {}){
+      id: 'jobs.id',
+      source: 'jobs.source',
+      user: 'json_extract(jobs.spec, \'$.user\')',
+      state: 'jobs.state',
+      resource: 'COALESCE(r.name, jobs.resource_name)',
+      created: 'jobs.created_at',
+      duration: 'jobs.duration_sec'
+    },
+
+    // What the Jobs page's search box (?q=) looks in. Named spec fields
+    // only — never the whole spec: while a job is active its `env` still
+    // holds the real --env values (§7.2), and a LIKE over them would let
+    // anyone who can see the list guess a secret one character at a time.
+    SEARCH_SQL = [
+      'jobs.id', 'jobs.state', 'jobs.source', 'jobs.message', 'r.name', 'jobs.resource_name', 'a.name',
+      ...['user', 'command', 'suite', 'image', 'git.url', 'git.ref', 'target.group', 'target.labels', 'downloads', 'args', 'meta']
+        .map((path) => `json_extract(jobs.spec, '$.${path}')`)
+    ];
+
+  function page({ state, source, q, sort = 'created', dir = 'desc', size = 25, page: pageNo = 1 } = {}){
     const where = [],
       params = [];
     if (state){
@@ -107,15 +118,21 @@ function createJobsService(db, { bus, events, registry, artifacts, config }){
       where.push('jobs.source = ?');
       params.push(source);
     }
+    const search = likeClause(SEARCH_SQL, parseTerms(q));
+    if (search.sql){
+      where.push(search.sql);
+      params.push(...search.params);
+    }
     const whereSql = where.length ? `WHERE ${where.join(' AND ')}` : '',
+      fromSql = 'FROM jobs LEFT JOIN resources r ON r.id = jobs.resource_id LEFT JOIN agents a ON a.id = jobs.agent_id',
       column = PAGE_SORT_SQL[sort] || PAGE_SORT_SQL.created,
       order = dir === 'asc' ? 'ASC' : 'DESC',
-      total = db.prepare(`SELECT COUNT(*) AS n FROM jobs ${whereSql}`).get(...params).n,
+      total = db.prepare(`SELECT COUNT(*) AS n ${fromSql} ${whereSql}`).get(...params).n,
       pagination = paginate(total, size, pageNo),
       // Empty values (no user, never ran, …) last either way; created_at
       // breaks ties so paging is stable.
       rows = db.prepare(
-        `SELECT jobs.* FROM jobs LEFT JOIN resources r ON r.id = jobs.resource_id ${whereSql}
+        `SELECT jobs.* ${fromSql} ${whereSql}
          ORDER BY ${column} IS NULL, ${column} ${order}, jobs.created_at DESC
          LIMIT ? OFFSET ?`
       ).all(...params, pagination.limit, pagination.offset);

package/src/services/list-prefs.js

@@ -30,6 +30,10 @@ const PAGE_SIZES = [10, 25, 50, 100, 'all'],
     resources: {
       sorts: ['name', 'type', 'version', 'status', 'heartbeat'],
       defaults: { size: DEFAULT_PAGE_SIZE, sort: 'name', dir: 'asc' }
+    },
+    agents: {
+      sorts: ['name', 'kind', 'version', 'created', 'used', 'status'],
+      defaults: { size: DEFAULT_PAGE_SIZE, sort: 'created', dir: 'desc' }
     }
   };