Add live log buffering support and endpoint; enhance log display functionality.

Software/MainBoard/rust/src_webpack/src/log.ts

@@ -1,19 +1,38 @@
 import { Controller } from "./main";
-import {LogArray, LogLocalisation} from "./api";
+import {LiveLogResponse, LogArray, LogLocalisation} from "./api";
+
+const LIVE_LOG_POLL_INTERVAL_MS = 2000;
 
 export class LogView {
   private readonly logpanel: HTMLElement;
-  private readonly loadLog: HTMLButtonElement;
+  private readonly livelogpanel: HTMLElement;
+  private readonly accordionHeader: HTMLElement;
   loglocale: LogLocalisation | undefined;
 
+  private liveLogNextSeq: number | undefined = undefined;
+  private liveLogTimer: ReturnType<typeof setTimeout> | undefined = undefined;
+  private structuredLogLoaded = false;
+
   constructor(controller: Controller) {
     (document.getElementById("logview") as HTMLElement).innerHTML = require('./log.html') as string;
-    this.logpanel = document.getElementById("logpanel") as HTMLElement
-    this.loadLog = document.getElementById("loadLog") as HTMLButtonElement
+    this.logpanel = document.getElementById("logpanel") as HTMLElement;
+    this.livelogpanel = document.getElementById("livelogpanel") as HTMLElement;
+    this.accordionHeader = document.getElementById("logAccordionHeader") as HTMLElement;
 
-    this.loadLog.onclick = () => {
-      controller.loadLog();
-    }
+    this.accordionHeader.onclick = () => {
+      const isOpen = this.logpanel.style.display !== "none";
+      if (isOpen) {
+        this.logpanel.style.display = "none";
+        this.accordionHeader.classList.remove("open");
+      } else {
+        this.logpanel.style.display = "";
+        this.accordionHeader.classList.add("open");
+        if (!this.structuredLogLoaded) {
+          this.structuredLogLoaded = true;
+          controller.loadLog();
+        }
+      }
+    };
   }
 
   setLogLocalisation(loglocale: LogLocalisation) {
@@ -21,10 +40,10 @@ export class LogView {
   }
 
   setLog(logs: LogArray) {
-    this.logpanel.textContent = ""
+    this.logpanel.textContent = "";
     logs.forEach(entry => {
       let message = this.loglocale!![entry.message_id];
-      let template = message.message
+      let template = message.message;
       template = template.replace("${number_a}", entry.a.toString());
       template = template.replace("${number_b}", entry.b.toString());
       template = template.replace("${txt_short}", entry.txt_short.toString());
@@ -32,15 +51,67 @@ export class LogView {
 
       let ts = new Date(entry.timestamp);
 
-      let div = document.createElement("div")
-      let timestampDiv = document.createElement("div")
-      let messageDiv = document.createElement("div")
+      let div = document.createElement("div");
+      let timestampDiv = document.createElement("div");
+      let messageDiv = document.createElement("div");
       timestampDiv.innerText = ts.toISOString();
       messageDiv.innerText = template;
-      div.appendChild(timestampDiv)
-      div.appendChild(messageDiv)
-      this.logpanel.appendChild(div)
-    }
-    )
+      div.appendChild(timestampDiv);
+      div.appendChild(messageDiv);
+      this.logpanel.appendChild(div);
+    });
   }
-}
+
+  startLivePoll(publicUrl: string) {
+    if (this.liveLogTimer !== undefined) {
+      return;
+    }
+    const poll = async () => {
+      try {
+        const url = this.liveLogNextSeq !== undefined
+          ? `${publicUrl}/live_log?after=${this.liveLogNextSeq}`
+          : `${publicUrl}/live_log`;
+        const response = await fetch(url);
+        const data = await response.json() as LiveLogResponse;
+        this.appendLiveLog(data);
+      } catch (_e) {
+        // network error — silently ignore, will retry next interval
+      }
+      this.liveLogTimer = setTimeout(poll, LIVE_LOG_POLL_INTERVAL_MS);
+    };
+    // Kick off immediately
+    this.liveLogTimer = setTimeout(poll, 0);
+  }
+
+  stopLivePoll() {
+    if (this.liveLogTimer !== undefined) {
+      clearTimeout(this.liveLogTimer);
+      this.liveLogTimer = undefined;
+    }
+  }
+
+  private appendLiveLog(data: LiveLogResponse) {
+    const panel = this.livelogpanel;
+    const wasAtBottom = panel.scrollHeight - panel.scrollTop <= panel.clientHeight + 4;
+
+    if (data.dropped) {
+      const marker = document.createElement("div");
+      marker.className = "livelog-dropped";
+      marker.textContent = "[..]";
+      panel.appendChild(marker);
+    }
+
+    for (const entry of data.entries) {
+      const line = document.createElement("div");
+      line.textContent = entry.text;
+      panel.appendChild(line);
+    }
+
+    this.liveLogNextSeq = data.next_seq;
+
+    // Auto-scroll to bottom only if user was already at the bottom
+    if (wasAtBottom) {
+      panel.scrollTop = panel.scrollHeight;
+    }
+  }
+}