Automatically scroll log ouput

src-ui/src/app/components/manage/logs/logs.component.html

@@ -11,7 +11,7 @@
 
 <div [ngbNavOutlet]="nav" class="mt-2"></div>
 
-<div class="bg-dark p-3 text-light text-monospace log-container">
+<div class="bg-dark p-3 text-light text-monospace log-container" #logContainer>
   <p
     class="m-0 p-0 log-entry-{{getLogLevel(log)}}"
     *ngFor="let log of logs">{{log}}</p>

src-ui/src/app/components/manage/logs/logs.component.ts

@@ -1,4 +1,4 @@
-import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
+import { Component, ElementRef, AfterViewChecked, ViewChild } from '@angular/core';
 import { LogService } from 'src/app/services/rest/log.service';
 
 @Component({
@@ -6,7 +6,7 @@ import { LogService } from 'src/app/services/rest/log.service';
   templateUrl: './logs.component.html',
   styleUrls: ['./logs.component.scss']
 })
-export class LogsComponent implements OnInit {
+export class LogsComponent implements AfterViewChecked {
 
   constructor(private logService: LogService) { }
 
@@ -16,6 +16,8 @@ export class LogsComponent implements OnInit {
 
   activeLog: string
 
+  @ViewChild('logContainer') logContainer: ElementRef
+
   ngOnInit(): void {
     this.logService.list().subscribe(result => {
       this.logFiles = result
@@ -26,9 +28,14 @@ export class LogsComponent implements OnInit {
     })
   }
 
+  ngAfterViewChecked() {
+    this.scrollToBottom();
+  }
+
   reloadLogs() {
     this.logService.get(this.activeLog).subscribe(result => {
       this.logs = result
+      this.scrollToBottom()
     }, error => {
       this.logs = []
     })
@@ -48,4 +55,12 @@ export class LogsComponent implements OnInit {
     }
   }
 
+  scrollToBottom(): void {
+    this.logContainer?.nativeElement.scroll({
+      top: this.logContainer.nativeElement.scrollHeight,
+      left: 0,
+      behavior: 'auto'
+    });
+  }
+
 }