log.js RawHistoryFolder

1// log.js: the live log of a running job (page /<repo>/actions/runs/<id>/job/<id>).
2// The lines arrive as "ci-log" events (internal/adapters/web/actions.go,
3// logStream), each one the <li> of the lines of a batch, and are appended to the
4// list. The browser reconnects by itself with Last-Event-ID, the number of the
5// next line; "ci-end" closes the feed when the job is over. The page follows the
6// log (scrolls to its end) only while the reader is at the end already. A piece
7// that continues a line begun in an earlier batch (data-cont) is joined to the
8// last line of the list.
9window.ermiteLog = (() => {
10  const nearEnd = () => window.innerHeight + window.scrollY >= document.body.scrollHeight - 80;
11
12  // follow starts the feed of the box (#job-log) and returns the EventSource,
13  // or null when the box is not a running job's.
14  function follow(box) {
15    if (!box || !box.hasAttribute('data-follow') || !box.dataset.stream || !window.EventSource) return null;
16    const list = box.querySelector('ol.log');
17    if (!list) return null;
18    const es = new window.EventSource(box.dataset.stream + '?from=' + encodeURIComponent(box.dataset.next || '0'));
19    es.addEventListener('ci-log', (e) => {
20      const t = document.createElement('template');
21      t.innerHTML = e.data;
22      const atEnd = nearEnd();
23      for (const line of [...t.content.children]) {
24        const last = list.children[list.children.length - 1];
25        if (line.hasAttribute('data-cont') && last) {
26          const text = line.querySelector('.t');
27          const into = last.querySelector('.t');
28          if (text && into) into.textContent += text.textContent;
29        } else {
30          list.append(line);
31        }
32      }
33      if (atEnd) window.scrollTo(0, document.body.scrollHeight);
34    });
35    es.addEventListener('ci-end', () => es.close());
36    es.onerror = () => { if (es.readyState === window.EventSource.CLOSED) es.close(); };
37    return es;
38  }
39
40  return { follow };
41})();
42
43document.addEventListener('DOMContentLoaded', () => window.ermiteLog.follow(document.getElementById('job-log')));