Merge pull request #778 from shamoon/fix/issue-774-775

Fix extra scrollbar on log container, auto scroll logs to bottom
This commit is contained in:
Jonas Winkler 2021-03-16 17:29:07 +01:00 committed by GitHub
commit b331e3388f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 18 additions and 4 deletions

View File

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

View File

@ -17,7 +17,7 @@
.log-container { .log-container {
overflow-y: scroll; overflow-y: scroll;
height: calc(100vh - 190px); height: calc(100vh - 200px);
top: 70px; top: 70px;
p { p {

View File

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