diff --git a/frontend/src/components/LogsViewer.vue b/frontend/src/components/LogsViewer.vue index 71f9a1b4d..5fcb9e282 100644 --- a/frontend/src/components/LogsViewer.vue +++ b/frontend/src/components/LogsViewer.vue @@ -18,9 +18,7 @@ @@ -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 = `${line.time || '[no timestamp] ' } ${line.html}`; + 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); }) diff --git a/frontend/src/models/LogsModel.js b/frontend/src/models/LogsModel.js index d4d9625b6..7915c9a18 100644 --- a/frontend/src/models/LogsModel.js +++ b/frontend/src/models/LogsModel.js @@ -28,7 +28,7 @@ function ab2str(buf) { } export function create(origin, accessToken, type, id) { - const INITIAL_STREAM_LINES = 100; + const INITIAL_STREAM_LINES = 1000; let eventSource = null;