log streaming: Slightly improve visual appearance

Signed-off-by: Michael Tremer <michael.tremer@ipfire.org>

diff --git a/src/scss/site.scss b/src/scss/site.scss
index a1a9cba2a94fd6382af02dcebce3c359e46ac66a..61869920815ed38f14a92b0f27178c91ead5fd56 100644 (file)
--- 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 e000f974df30db61400e1c79432dec3524f383ea..0c5720eeb608d3dd9db012b272da691d233a07a5 100644 (file)
--- 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) {