log stream: Implement auto-scroll

This patch also removes any dependencies to jQuery in this code.

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

diff --git a/src/scss/site.scss b/src/scss/site.scss
index ce20eff7e04dde0eba434bb8e3155f614358d164..a1a9cba2a94fd6382af02dcebce3c359e46ac66a 100644 (file)
--- a/src/scss/site.scss
+++ b/src/scss/site.scss
@@ -112,6 +112,9 @@ html, body {
        // Break loglines like a terminal would
        overflow-wrap: break-word;
 
+       height: 100vh;
+       overflow-y: auto;
+
        // Keep any whitespace
        white-space: pre;
 

diff --git a/src/static/js/pbs.js b/src/static/js/pbs.js
index c6fbbe33307fd50f0d5fccfa37f4bbf69fae09e9..e000f974df30db61400e1c79432dec3524f383ea 100644 (file)
--- a/src/static/js/pbs.js
+++ b/src/static/js/pbs.js
@@ -241,15 +241,15 @@ $(".builders-stats").each(function() {
 /*
  * Log Stream
  */
-$(".jobs-log-stream").each(function() {
+document.querySelectorAll(".jobs-log-stream").forEach((log) => {
        // Fetch the UUID of the job
-       const uuid = $(this).data("uuid");
+       const uuid = log.dataset.uuid;
 
        // Fetch the limit
-       const limit = $(this).data("limit");
+       const limit = log.dataset.limit;
 
-       // Find where we are appending lines to
-       const log = $(this);
+       // Automatically scroll to the bottom
+       var autoscroll = true;
 
        // Make the URL
        var url = "wss://" + window.location.host + "/api/v1/jobs/" + uuid + "/log/stream";
@@ -264,23 +264,34 @@ $(".jobs-log-stream").each(function() {
                // Parse message as JSON
                const data = JSON.parse(event.data);
 
-               console.log("Message from server: ", data);
+               console.debug("Message from server: ", data);
 
                // If there is a limit, reduce the number of rows first
-               while (limit > 0 && log.children().length >= limit) {
-                       log.children().first().remove();
+               while (limit > 0 && log.children.length >= limit) {
+                       log.removeChild(log.firstChild);
                }
 
                // Create a new line
-               var line = $("<li></li>");
+               var line = document.createElement("li");
 
                // Set the log level
-               line.addClass(data.level);
+               line.classList.add(data.level);
 
                // Set the content
-               line.text(data.message);
+               line.textContent = data.message;
 
                // Append it to the log window
-               log.append(line);
+               log.appendChild(line);
+
+               // Scroll to the bottom
+               if (autoscroll) {
+                       log.scrollTop = log.scrollHeight;
+               }
+       });
+
+       // Disable auto-scroll when the user scrolls away and enabled it again
+       // when the user scrolls to the bottom.
+       log.addEventListener("scroll", (event) => {
+               autoscroll = log.scrollTop + log.clientHeight >= log.scrollHeight - 50;
        });
 });