add a simple log viewer to the front end

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

@@ -0,0 +1,12 @@
+.log-entry-30 {
+  color: yellow !important;
+}
+
+.log-entry-40 {
+  color: red !important;
+}
+
+.log-entry-50 {
+  color: lightcoral !important;
+  font-weight: bold;
+}

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

@@ -1,2 +1,14 @@
 <app-page-header title="Logs">
-</app-page-header>
+</app-page-header>
+
+<div class="bg-dark p-3 mb-3" infiniteScroll (scrolled)="onScroll()">
+  <p
+    class="text-light text-monospace m-0 p-0 log-entry-{{log.level}}"
+    *ngFor="let log of logs">
+    {{log.group}}
+    {{log.created | date:'short'}}
+    {{getLevelText(log.level)}}
+    {{log.message}}
+    <a *ngIf="log.group" [routerLink]="" (click)="applyGroup(log.group)">(similar items)</a>
+  </p>
+</div>

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

@@ -1,4 +1,7 @@
 import { Component, OnInit } from '@angular/core';
+import { kMaxLength } from 'buffer';
+import { LOG_LEVELS, PaperlessLog } from 'src/app/data/paperless-log';
+import { LogService } from 'src/app/services/rest/log.service';
 
 @Component({
   selector: 'app-logs',
@@ -7,9 +10,26 @@ import { Component, OnInit } from '@angular/core';
 })
 export class LogsComponent implements OnInit {
 
-  constructor() { }
+  constructor(private logService: LogService) { }
+
+  logs: PaperlessLog[] = []
 
   ngOnInit(): void {
+    this.logService.list(1, 50).subscribe(result => this.logs = result.results)
+  }
+
+  getLevelText(level: number) {
+    return LOG_LEVELS.find(l => l.id == level)?.name
+  }
+
+  onScroll() {
+    let lastCreated = null
+    if (this.logs.length > 0) {
+      lastCreated = this.logs[this.logs.length-1].created
+    }
+    this.logService.list(1, 25, null, {'created__lt': lastCreated}).subscribe(result => {
+      this.logs.push(...result.results)
+    })
   }
 
 }