From: Michael Tremer <michael.tremer@ipfire.org>
Date: Wed, 16 Apr 2025 13:59:04 +0000 (+0000)
Subject: log stream: Implement auto-scroll
X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=1edae58d88f65fe8ac4fc13d51bf51378cf356a5;p=pbs.git

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 ce20eff7..a1a9cba2 100644
--- 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 c6fbbe33..e000f974 100644
--- 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;
 	});
 });