From 147e619f57688b27416266d97150fc4eb8c0a17b Mon Sep 17 00:00:00 2001 From: Michael Tremer Date: Wed, 16 Apr 2025 14:55:46 +0000 Subject: [PATCH] log streaming: Slightly improve visual appearance Signed-off-by: Michael Tremer --- src/scss/site.scss | 22 +++++++++++----------- src/static/js/pbs.js | 6 +++++- 2 files changed, 16 insertions(+), 12 deletions(-) diff --git a/src/scss/site.scss b/src/scss/site.scss index a1a9cba2..61869920 100644 --- a/src/scss/site.scss +++ b/src/scss/site.scss @@ -109,18 +109,20 @@ html, body { // Use the code font font-family: dv.$family-code; - // Break loglines like a terminal would - overflow-wrap: break-word; + // This thing has to be some fixed height and I have no idea how to make it + // fill its entire space and still allow the scroll events to happen. + height: 40rem; - height: 100vh; + // Scroll whenever we have reached the maximum height overflow-y: auto; + overflow-x: hidden; - // Keep any whitespace - white-space: pre; + // Break loglines like a terminal would + white-space: pre-wrap; + word-wrap: break-word; .DEBUG { - background-color: iv.$grey; - color: bulmaFindColorInvert(iv.$grey); + color: iv.$grey; } .INFO { @@ -128,13 +130,11 @@ html, body { } .WARNING { - background-color: dv.$warning; - color: bulmaFindColorInvert(dv.$warning); + color: dv.$warning; } .ERROR { - background-color: dv.$danger; - color: bulmaFindColorInvert(dv.$danger); + color: dv.$danger; } &.is-small { diff --git a/src/static/js/pbs.js b/src/static/js/pbs.js index e000f974..0c5720ee 100644 --- a/src/static/js/pbs.js +++ b/src/static/js/pbs.js @@ -260,6 +260,10 @@ document.querySelectorAll(".jobs-log-stream").forEach((log) => { // Try to connect to the stream const stream = new WebSocket(url); + // Lines + const lines = document.createElement("ul"); + log.appendChild(lines); + stream.addEventListener("message", (event) => { // Parse message as JSON const data = JSON.parse(event.data); @@ -281,7 +285,7 @@ document.querySelectorAll(".jobs-log-stream").forEach((log) => { line.textContent = data.message; // Append it to the log window - log.appendChild(line); + lines.appendChild(line); // Scroll to the bottom if (autoscroll) { -- 2.47.2