add a simple log viewer to the front end

src-ui/src/app/app.module.ts

@@ -37,6 +37,7 @@ import { TextComponent } from './components/common/input/text/text.component';
 import { SelectComponent } from './components/common/input/select/select.component';
 import { CheckComponent } from './components/common/input/check/check.component';
 import { SaveViewConfigDialogComponent } from './components/document-list/save-view-config-dialog/save-view-config-dialog.component';
+import { InfiniteScrollModule } from 'ngx-infinite-scroll';
 
 @NgModule({
   declarations: [
@@ -77,7 +78,8 @@ import { SaveViewConfigDialogComponent } from './components/document-list/save-v
     HttpClientModule,
     FormsModule,
     ReactiveFormsModule,
-    NgxFileDropModule
+    NgxFileDropModule,
+    InfiniteScrollModule
   ],
   providers: [
     DatePipe,

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)
+    })
   }
 
 }

src-ui/src/app/data/paperless-log.ts

@@ -1,2 +1,27 @@
+export const DEBUG = 10
+export const INFO = 20
+export const WARNING = 30
+export const ERROR = 40
+export const CRITICAL = 50
+
+export const LOG_LEVELS = [
+  {id: DEBUG, name: "DEBUG"},
+  {id: INFO, name: "INFO"},
+  {id: WARNING, name: "WARNING"},
+  {id: ERROR, name: "ERROR"},
+  {id: CRITICAL, name: "CRITICAL"}
+]
+
 export interface PaperlessLog {
+
+  id?: number
+
+  group?: string
+
+  message?: string
+
+  created?: Date
+
+  level?: number
+
 }

src-ui/src/app/services/rest/log.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { LogService } from './log.service';
+
+describe('LogService', () => {
+  let service: LogService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(LogService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src-ui/src/app/services/rest/log.service.ts

@@ -0,0 +1,14 @@
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { PaperlessLog } from 'src/app/data/paperless-log';
+import { AbstractPaperlessService } from './abstract-paperless-service';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class LogService extends AbstractPaperlessService<PaperlessLog> {
+
+  constructor(http: HttpClient) {
+    super(http, 'logs')
+  }
+}