frontend: reduce DOM node creation on very fast logstreams and cap to 1k loglines

frontend/src/components/LogsViewer.vue

@@ -18,9 +18,7 @@
       </TopBar>
     </template>
     <template #body>
-      <div v-for="line of logLines" class="log-line">
-        <span class="time">{{ line.time || '[no timestamp]&nbsp;' }}</span> <span v-html="line.html"></span>
-      </div>
+      <div ref="linesContainer"></div>
       <div class="bottom-spacer"></div>
     </template>
   </MainLayout>
@@ -135,14 +133,33 @@ export default {
 
     this.downloadUrl = this.logsModel.getDownloadUrl();
 
+    const maxLines = 1000;
+    let lines = 0;
+    let newLogLines = [];
+
+    const tmp = document.getElementsByClassName('pankow-main-layout-body')[0];
+    setInterval(() => {
+      newLogLines = newLogLines.slice(-maxLines)
+
+      for (let line of newLogLines) {
+        if (lines < maxLines) ++lines;
+        else this.$refs.linesContainer.removeChild(this.$refs.linesContainer.firstChild);
+
+        // this.logLines.push({ time, html});
+        const logLine = document.createElement('div');
+        logLine.className = 'log-line';
+        logLine.innerHTML = `<span class="time">${line.time || '[no timestamp]&nbsp;' }</span> <span>${line.html}</span>`;
+        this.$refs.linesContainer.appendChild(logLine);
+
+        const autoScroll = tmp.scrollTop > (tmp.scrollHeight - tmp.clientHeight - 34);
+        if (autoScroll) setTimeout(() => tmp.scrollTop = tmp.scrollHeight, 1);
+      }
+
+      newLogLines = [];
+    }, 500);
+
     this.logsModel.stream((time, html) => {
-      this.logLines.push({ time, html});
-
-      const tmp = document.getElementsByClassName('pankow-main-layout-body')[0];
-      if (!tmp) return;
-
-      const autoScroll = tmp.scrollTop > (tmp.scrollHeight - tmp.clientHeight - 34);
-      if (autoScroll) setTimeout(() => tmp.scrollTop = tmp.scrollHeight, 1);
+      newLogLines.push({ time, html });
     }, function (error) {
       console.error('Failed to start log stream:', error);
     })