SSR module: live progress bar for cache warming

The Cache warming row of the VITEC SSR module now shows a Bootstrap progress bar with a running counter instead of asking for a reload. New ajax route vitec_ssr_health (SsrController::healthJson) returns the node /__health JSON; ssr-warm-progress.js polls it every 2 s while a warm run is active and every 15 s otherwise (pauses in background tabs) and also refreshes the Cache: N pages / M MB line. The health fetch moved into SsrController::fetchHealth, shared by indexAction and the ajax route; its error text is English now. Verified live in the backend: bar, counter and cache line advance during a run.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>

packages/vitec/Resources/Private/Templates/Ssr/Index.html

@@ -24,7 +24,7 @@
                             <span class="badge badge-success">running</span> {health.responseMs} ms<br>
                             Release <strong>{health.release.release}</strong>
                             (commit {health.release.commit})<br>
-                            Cache: {health.cachedPages} pages / {health.cacheMB} MB
+                            <span id="ssr-cache-line">Cache: {health.cachedPages} pages / {health.cacheMB} MB</span>
                         </f:then>
                         <f:else>
                             <span class="badge badge-danger">not reachable</span> {healthError}
@@ -34,13 +34,17 @@
             </tr>
             <tr>
                 <th>Cache warming</th>
-                <td>
+                <td id="ssr-warm-status" data-running="{f:if(condition: health.warming.running, then: '1', else: '0')}">
+                    <div class="progress" id="ssr-warm-progress" style="height:16px;margin-bottom:6px;{f:if(condition: health.warming.running, else: 'display:none')}">
+                        <div class="progress-bar progress-bar-striped progress-bar-animated bg-info" id="ssr-warm-bar" role="progressbar" style="width:0%;min-width:3em">0 %</div>
+                    </div>
+                    <div id="ssr-warm-text">
                     <f:if condition="{health.warming.running}">
                         <f:then>
                             <span class="badge badge-info">running</span>
                             {health.warming.done} of {health.warming.queued} pages rendered
                             ({health.warming.skipped} still fresh, {health.warming.failed} failed)
-                            <br><small>Reload this module to follow the progress.</small>
+                            <br><small class="text-muted">Live — updates every 2 seconds.</small>
                         </f:then>
                         <f:else>
                             <f:if condition="{health.warming.startedAt}">
@@ -57,6 +61,7 @@
                             </f:if>
                         </f:else>
                     </f:if>
+                    </div>
                 </td>
             </tr>
             <tr>

packages/vitec/Resources/Public/Javascript/ssr-warm-progress.js

@@ -0,0 +1,80 @@
+/**
+ * Live progress for the "Cache warming" row of the VITEC SSR module.
+ * Polls the vitec_ssr_health ajax route (GET /__health of the node):
+ * every 2 s while a warm run is active, every 15 s otherwise so runs
+ * started from the CLI or the context menu show up without a reload.
+ * Also refreshes the "Cache: N pages / M MB" line.
+ */
+import AjaxRequest from '@typo3/core/ajax/ajax-request.js';
+
+const cell = document.getElementById('ssr-warm-status');
+if (cell) {
+  const wrap = document.getElementById('ssr-warm-progress');
+  const bar = document.getElementById('ssr-warm-bar');
+  const text = document.getElementById('ssr-warm-text');
+  const cacheLine = document.getElementById('ssr-cache-line');
+  let timer = null;
+
+  const num = (v) => (typeof v === 'number' ? v : 0);
+
+  const render = (h) => {
+    const w = h.warming || {};
+    const queued = num(w.queued);
+    const handled = num(w.done) + num(w.skipped) + num(w.failed);
+    const pct = queued > 0 ? Math.min(100, Math.round((handled / queued) * 100)) : 0;
+    const failed = num(w.failed)
+      ? '<span class="badge badge-danger">' + num(w.failed) + ' failed</span>'
+      : '0 failed';
+
+    if (w.running) {
+      wrap.style.display = '';
+      bar.style.width = pct + '%';
+      bar.textContent = pct + ' %';
+      text.innerHTML = '<span class="badge badge-info">running</span> '
+        + handled + ' of ' + queued + ' pages ('
+        + num(w.done) + ' rendered, ' + num(w.skipped) + ' still fresh, ' + failed + ')'
+        + '<br><small class="text-muted">Live - updates every 2 seconds.</small>';
+    } else if (w.startedAt) {
+      wrap.style.display = 'none';
+      const finished = w.finishedAt
+        ? ' <small class="text-muted">finished ' + new Date(w.finishedAt).toLocaleTimeString() + '</small>'
+        : '';
+      text.innerHTML = 'Last run: ' + num(w.done) + ' of ' + queued + ' pages rendered ('
+        + num(w.skipped) + ' still fresh, ' + failed + ')'
+        + (w.aborted ? ' <span class="badge badge-warning">aborted by restart</span>' : '')
+        + finished;
+    } else {
+      wrap.style.display = 'none';
+      text.innerHTML = '<span class="text-muted">no run since the server started</span>';
+    }
+
+    if (cacheLine && typeof h.cachedPages === 'number') {
+      cacheLine.textContent = 'Cache: ' + h.cachedPages + ' pages / ' + num(h.cacheMB) + ' MB';
+    }
+    return !!w.running;
+  };
+
+  const schedule = (ms) => {
+    clearTimeout(timer);
+    timer = setTimeout(tick, ms);
+  };
+
+  const tick = () => {
+    new AjaxRequest(TYPO3.settings.ajaxUrls.vitec_ssr_health).get()
+      .then((response) => response.resolve())
+      .then((data) => {
+        const running = data && data.health ? render(data.health) : false;
+        schedule(running ? 2000 : 15000);
+      })
+      .catch(() => schedule(15000));
+  };
+
+  schedule(cell.dataset.running === '1' ? 1000 : 15000);
+  document.addEventListener('visibilitychange', () => {
+    if (document.hidden) {
+      clearTimeout(timer);
+    } else {
+      tick();
+    }
+  });
+}