Merge pull request #41 from unity-sds/log_autoscroll

Autoscrolls logs in UI
unity-sds · Nov 7, 2024 · 8ed6681 · 8ed6681
2 parents 232ffdd + 2158e9b
commit 8ed6681
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 2 deletions.
diff --git a/src/components/ApplicationPanelItem.svelte b/src/components/ApplicationPanelItem.svelte
@@ -136,6 +136,17 @@
     }
     dispatch('refreshApplicationList');
   }
+
+  let logsDiv: HTMLElement;
+  function scrollLogsToBottom() {
+    if (logsDiv) {
+      logsDiv.scrollIntoView({ behavior: 'smooth', block: 'end' });
+    }
+  }
+
+  $: if (logs) {
+    setTimeout(scrollLogsToBottom, 0);
+  }
 </script>
 
 <div class="lg:w-1/3 md:w-1/2 mb-4" style="flex: 0 0 auto">
@@ -239,7 +250,7 @@
   </h2>
 
   {#if logs}
-    <pre>
+    <pre bind:this={logsDiv}>
   {logs}
 </pre>
   {/if}

diff --git a/src/routes/install/+page.svelte b/src/routes/install/+page.svelte
@@ -104,6 +104,19 @@
 
   let showLogs = false;
   let logs: string;
+  let logsDiv: HTMLElement;
+
+  function scrollLogsToBottom() {
+    if (logsDiv) {
+      logsDiv.scrollIntoView({ behavior: 'smooth', block: 'end' });
+    }
+  }
+
+  $: if (logs) {
+    // Wait for DOM update
+    setTimeout(scrollLogsToBottom, 0);
+  }
+
   let logInterval: any = null;
 
   async function getLogs() {
@@ -224,7 +237,7 @@
     {#if showLogs && logs}
       <div style="margin-top:10px">
         <hr />
-        <pre>
+        <pre bind:this={logsDiv}>
       {logs}
     </pre>
       </div>