@andrian.yablonskyy/thub-coordinator 1.0.37 → 1.0.39

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

@@ -1,6 +1,6 @@
 /**
  * @file        packages/coordinator/public/js/log-viewer.js
- * @description Dashboard: streams or fetches a job's log output into the log viewer pane
+ * @description Dashboard: a job's log in the log viewer pane — loaded from its end, earlier lines as you scroll up, live lines streamed
  *
  * @author      Andrian Yablonskyy
  * @copyright   Copyright (c) 2026 Andrian Yablonskyy. All rights reserved.
@@ -21,7 +21,11 @@
   const jobId = pre.dataset.jobId,
     jobActive = pre.dataset.jobActive === 'true',
     filter = document.getElementById('stream-filter'),
-    lines = [],
+    info = document.getElementById('log-info'),
+    loadAllButton = document.getElementById('log-load-all'),
+    PAGE = 1000, // lines per page (routes.js LOG_PAGE)
+    PAGE_ALL = 5000, // per request when loading everything
+    NEAR_TOP_PX = 150,
     // Same dd/mm/yyyy HH:MM:SS, 24-hour format and profile time zone as
     // every server-rendered date (thub-common formatDateTime).
     timeFormat = new Intl.DateTimeFormat('en-GB', {
@@ -35,6 +39,16 @@
       hourCycle: 'h23'
     });
 
+  // What's loaded, oldest first: a window ending at the log's end. `firstSeq`
+  // is where the next earlier page ends; `total` counts every line the job
+  // has (loaded or not), live lines included.
+  let lines = [],
+    firstSeq = null,
+    hasMore = false,
+    total = 0,
+    lastSeq = 0, // newest log line we have (for the live stream to follow on)
+    loading = false;
+
   function fmtTime(iso){
     const d = new Date(iso);
     if (Number.isNaN(d.getTime())){
@@ -44,54 +58,284 @@
     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;
+  const number = (n) => n.toLocaleString('en-GB');
+
+  function updateInfo(){
+    const logLines = lines.filter((l) => l.seq !== undefined).length;
+    if (loading){
+      info.textContent = 'Loading earlier lines…';
+    }
+    else if (!total){
+      info.textContent = jobActive ? 'No output yet.' : 'This job produced no output.';
+    }
+    else if (hasMore){
+      info.textContent = `Showing the last ${number(logLines)} of ${number(total)} lines — scroll up for earlier ones.`;
+    }
+    else {
+      info.textContent = `All ${number(total)} lines.`;
+    }
+    loadAllButton.hidden = !hasMore || loading;
   }
 
-  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
-  // reload. (Opening a stream here used to trigger an auto-reload once it
-  // immediately got the job's "end" event, which reloaded the page, which
-  // re-opened the stream, which reloaded again — an infinite loop for
-  // anyone viewing a finished job.)
-  if (!jobActive){
-    fetch(`/jobs/${jobId}/logs`)
-      .then((r) => r.json())
-      .then(({ lines: fetched }) => {
-        lines.push(...fetched);
-        render();
-      })
-      .catch(() => {});
-    return;
+  // Search (views/mixins/log-viewer.pug): case-insensitive, literal text,
+  // over the loaded lines. 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]);
   }
 
-  const source = new EventSource(`/jobs/${jobId}/stream`);
-  source.addEventListener('log', (e) => {
-    lines.push(JSON.parse(e.data));
-    render();
+  function showCurrent(scroll){
+    hits.forEach((el, i) => el.classList.toggle('current', i === current));
+    if (current >= 0){
+      count.textContent = `${current + 1} / ${hits.length}${hasMore ? ' loaded' : ''}`;
+      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);
+  }
+
+  // `mode` says what changed, and so where the view should stay:
+  //   reset   — first load, a new search or filter: the end (or first match)
+  //   live    — a streamed line: follow the end only if the reader is there
+  //   prepend — earlier lines loaded above: keep the same lines in view
+  function render(mode = 'reset'){
+    const wanted = filter.value,
+      query = search.value.trim(),
+      atBottom = pre.scrollHeight - pre.scrollTop - pre.clientHeight < 30,
+      fromBottom = pre.scrollHeight - pre.scrollTop,
+      scrollTop = pre.scrollTop,
+      hitsBefore = hits.length,
+      shown = lines
+        .filter((l) => !wanted || l.stream === wanted)
+        .map((l) => `[${fmtTime(l.ts)}] [${l.stream}] ${l.line}`);
+
+    function place(){
+      if (mode === 'prepend'){
+        pre.scrollTop = pre.scrollHeight - fromBottom;
+      }
+      else if (mode === 'reset' || atBottom){
+        pre.scrollTop = pre.scrollHeight;
+      }
+      else {
+        pre.scrollTop = scrollTop;
+      }
+    }
+
+    updateInfo();
+    if (!query){
+      pre.textContent = shown.join('\n');
+      hits = [];
+      current = -1;
+      count.hidden = true;
+      prev.disabled = next.disabled = true;
+      place();
+      fillIfShort();
+      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)));
+      }
+    }
+    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 = hasMore ? 'No matches in loaded lines' : 'No matches';
+      place();
+      fillIfShort();
+      return;
+    }
+    if (mode === 'reset'){
+      current = 0;
+      showCurrent(true);
+    }
+    else {
+      // Earlier lines add their matches in front: the same match moves down.
+      current = mode === 'prepend' ? current + (hits.length - hitsBefore) : current;
+      current = Math.min(Math.max(current, 0), hits.length - 1);
+      showCurrent(false);
+      place();
+    }
+    fillIfShort();
+  }
+
+  // Streamed lines can arrive in bursts: render at most once per frame.
+  function renderLive(){
+    if (queued){
+      return;
+    }
+    queued = true;
+    requestAnimationFrame(() => {
+      queued = false;
+      render('live');
+    });
+  }
+
+  // --- loading pages ------------------------------------------------------
+  async function fetchPage(before, limit){
+    const qs = new URLSearchParams({ limit: String(limit) });
+    if (before){
+      qs.set('before', String(before));
+    }
+    const res = await fetch(`/jobs/${encodeURIComponent(jobId)}/logs?${qs}`, { cache: 'no-store' });
+    if (!res.ok){
+      throw new Error(`HTTP ${res.status}`);
+    }
+    return res.json();
+  }
+
+  function absorb(page, where){
+    const fetched = page.lines;
+    if (fetched.length){
+      firstSeq = fetched[0].seq;
+    }
+    lines = where === 'prepend' ? [...fetched, ...lines] : fetched;
+    if (where !== 'prepend' && fetched.length){
+      lastSeq = fetched.at(-1).seq;
+    }
+    hasMore = page.hasMore;
+    total = Math.max(total, page.total);
+  }
+
+  async function loadEarlier(limit = PAGE){
+    if (loading || !hasMore){
+      return;
+    }
+    loading = true;
+    updateInfo();
+    try {
+      absorb(await fetchPage(firstSeq, limit), 'prepend');
+    }
+    catch {
+      info.textContent = 'Couldn’t load earlier lines — scroll up to try again.';
+      loading = false;
+      return;
+    }
+    loading = false;
+    render('prepend');
+  }
+
+  async function loadAll(){
+    while (hasMore && !loading){
+      await loadEarlier(PAGE_ALL);
+    }
+  }
+
+  // A filter or "only matching lines" can leave too little to scroll: keep
+  // loading earlier pages until there's something to scroll, or nothing left.
+  function fillIfShort(){
+    if (hasMore && !loading && pre.scrollHeight <= pre.clientHeight + NEAR_TOP_PX){
+      loadEarlier();
+    }
+  }
+
+  pre.addEventListener('scroll', () => {
+    if (pre.scrollTop < NEAR_TOP_PX){
+      loadEarlier();
+    }
+  }, { passive: true });
+  loadAllButton.addEventListener('click', loadAll);
+
+  let typing;
+  search.addEventListener('input', () => {
+    clearTimeout(typing);
+    typing = setTimeout(() => render(), 150);
   });
-  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();
+  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();
+    }
   });
-  source.addEventListener('end', (e) => {
-    const { state } = JSON.parse(e.data);
-    lines.push({ ts: new Date().toISOString(), stream: 'state', line: `job finished: ${state}` });
+  prev.addEventListener('click', () => step(-1));
+  next.addEventListener('click', () => step(1));
+  onlyMatching.addEventListener('change', () => render());
+  filter.addEventListener('change', () => render());
+
+  // --- start: the end of the log, then (active job) live lines after it ----
+  (async () => {
+    try {
+      absorb(await fetchPage(null, PAGE), 'replace');
+    }
+    catch {
+      info.textContent = 'Couldn’t load the log — reload the page to try again.';
+      return;
+    }
     render();
-    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.
-    setTimeout(() => window.location.reload(), 1500);
-  });
-  source.onerror = () => {
-    // EventSource auto-reconnects; nothing to do here.
-  };
+
+    // Already finished when the page loaded: the output will never change
+    // again — no EventSource, no live connection. (Opening a stream here used
+    // to reload the page on its immediate "end" event, forever.)
+    if (!jobActive){
+      return;
+    }
+    // Live lines start right after what's loaded; on a reconnect the
+    // browser resumes from the last one it got (Last-Event-ID).
+    const source = new EventSource(`/jobs/${encodeURIComponent(jobId)}/stream?after=${lastSeq}`);
+    source.addEventListener('log', (e) => {
+      const seq = Number(e.lastEventId) || undefined;
+      if (seq && seq <= lastSeq){
+        return; // already have it
+      }
+      lastSeq = seq ?? lastSeq;
+      lines.push({ ...JSON.parse(e.data), seq });
+      total += 1;
+      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 : ''}` });
+      renderLive();
+    });
+    source.addEventListener('end', (e) => {
+      const { state } = JSON.parse(e.data);
+      lines.push({ ts: new Date().toISOString(), stream: 'state', line: `job finished: ${state}` });
+      renderLive();
+      source.close();
+      // The job was active when we opened this page and just finished —
+      // reload once to pick up the now-final badge and details.
+      setTimeout(() => window.location.reload(), 1500);
+    });
+    source.onerror = () => {
+      // EventSource auto-reconnects; nothing to do here.
+    };
+  })();
 })();

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();
       }
-    });
+    }
   });
 })();