fix: add abolity to stop following logs

kitproj · Jan 16, 2025 · 3d30b6e · 3d30b6e
1 parent a2f2a71
commit 3d30b6e
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 13 deletions.
diff --git a/internal/index.html b/internal/index.html
@@ -42,8 +42,9 @@
         <text id="status" x="4" y="14" font-size="14" fill="#bbb">...</text>
     </svg>
 </div>
-<iframe id="logs" onload="this.contentWindow.scrollTo(0, this.contentWindow.document.body.scrollHeight)"></iframe>
-
+<iframe id="logs" src='data:text/html,<p>Click on a node to see logs</p>'
+        onload="this.contentWindow.scrollTo(0, this.contentWindow.document.body.scrollHeight);"></iframe>
+<label><input type="checkbox" id="follow" checked>Follow</label>
 
 <script id="js">
     // Create a new directed graph
@@ -58,6 +59,11 @@
     const svg = d3.select("svg"),
         inner = svg.append("g");
 
+    const container = document.getElementById('container');
+    const status = document.getElementById('status');
+    const logs = document.getElementById("logs");
+    const follow = document.getElementById("follow");
+
     // icons are svgs, keyed by phase
     // all have a 16x circle behind the icon  with a suitable color (e.g. red for failed)
     // the icon is centered in the circle, and is a <path/>
@@ -79,7 +85,6 @@
 
     const renderGraph = () => render(inner, g);
 
-
     // get the graph from the server at /dag
     fetch('/dag')
         .then(response => response.json())
@@ -118,8 +123,8 @@
                 // start the event stream
                 const eventSource = new EventSource('/events');
 
-                eventSource.onopen = () => document.getElementById('status').textContent = '';
-                eventSource.onerror = () => document.getElementById('status').textContent = 'disconnected';
+                eventSource.onopen = () => status.textContent = '';
+                eventSource.onerror = () => status.textContent = 'disconnected';
 
                 eventSource.onmessage = (event) => {
                     const node = JSON.parse(event.data);
@@ -146,15 +151,22 @@
             }
         );
 
-    setInterval(() => document.getElementById("logs").onload(), 1000);
+    setInterval(() => {
+        if (follow.checked && !logs.src.startsWith('data:')) {
+            // update the src causing a reload, and also scroll to the bottom
+            const x = logs.src;
+            logs.src = '';
+            logs.src = x;
+        }
+    }, 3000);
 
     const resize = () => {
         const innerWidth = window.innerWidth - 16;
-        const innerHeight = window.innerHeight - 16;
-        document.getElementById('container').style.width = innerWidth + 'px';
-        document.getElementById('container').style.height = innerHeight / 2 + 'px';
-        document.getElementById('logs').style.width = innerWidth + 'px';
-        document.getElementById('logs').style.height = innerHeight / 2 + 'px';
+        const innerHeight = window.innerHeight - 48;
+        container.style.width = innerWidth + 'px';
+        container.style.height = innerHeight / 2 + 'px';
+        logs.style.width = innerWidth + 'px';
+        logs.style.height = innerHeight / 2 + 'px';
     }
 
     window.addEventListener('resize', resize);

diff --git a/internal/server.go b/internal/server.go
@@ -92,7 +92,6 @@ func StartServer(ctx context.Context, port int, wg *sync.WaitGroup, dag DAG[*Tas
 	mux.HandleFunc("/logs/{task}", func(w http.ResponseWriter, r *http.Request) {
 		task := r.PathValue("task")
 		logFile := dag.Nodes[task].logFile
-		w.Header().Set("Refresh", "3")
 		http.ServeFile(w, r, logFile)
 	})
 

diff --git a/tasks.yaml b/tasks.yaml
@@ -45,7 +45,7 @@ tasks:
   logs:
     sh: |
         set -eux
-        for i in {1..100}; do
+        for i in {1..1000}; do
           echo "hello $i"
           sleep 1
         done