rework of the log viewer

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

@@ -1,27 +1,18 @@
 <app-page-header title="Logs" i18n-title>
 
-  <div ngbDropdown class="btn-group">
-    <button class="btn btn-outline-primary btn-sm" id="dropdownBasic1" ngbDropdownToggle>
-      <svg class="toolbaricon" fill="currentColor">
-        <use xlink:href="assets/bootstrap-icons.svg#funnel" />
-      </svg>&nbsp;<ng-container i18n>Filter</ng-container>
-
-
-    </button>
-    <div ngbDropdownMenu aria-labelledby="dropdownBasic1">
-      <button *ngFor="let f of getLevels()" ngbDropdownItem (click)="setLevel(f.id)"
-        [class.active]="level == f.id">{{f.name}}</button>
-    </div>
-  </div>
-
 </app-page-header>
 
-<div class="bg-dark p-3 mb-3 text-light text-monospace" infiniteScroll (scrolled)="onScroll()">
+
+<ul ngbNav #nav="ngbNav" [(activeId)]="activeLog" (activeIdChange)="reloadLogs()" class="nav-tabs">
+  <li *ngFor="let logFile of logFiles" [ngbNavItem]="logFile">
+    <a ngbNavLink>{{logFile}}.log</a>
+  </li>
+</ul>
+
+<div [ngbNavOutlet]="nav" class="mt-2"></div>
+
+<div #logContainer class="bg-dark p-3 mb-3 text-light text-monospace log-container">
   <p
-    class="m-0 p-0 log-entry-{{log.level}}"
-    *ngFor="let log of logs">
-      {{log.created | customDate:'short'}}
-      {{getLevelText(log.level)}}
-      {{log.message}}
-  </p>
+    class="m-0 p-0 log-entry-{{getLogLevel(log)}}"
+    *ngFor="let log of logs" style="white-space: pre;">{{log}}</p>
 </div>

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

@@ -14,3 +14,11 @@
   color: lightcoral !important;
   font-weight: bold;
 }
+
+.log-container {
+
+  overflow: scroll;
+
+  height: calc(100vh - 190px);
+  top: 70px;
+}

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

@@ -1,5 +1,4 @@
-import { Component, OnInit } from '@angular/core';
-import { LOG_LEVELS, LOG_LEVEL_INFO, PaperlessLog } from 'src/app/data/paperless-log';
+import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
 import { LogService } from 'src/app/services/rest/log.service';
 
 @Component({
@@ -11,38 +10,42 @@ export class LogsComponent implements OnInit {
 
   constructor(private logService: LogService) { }
 
-  logs: PaperlessLog[] = []
-  level: number = LOG_LEVEL_INFO
+  @ViewChild('logContainer') private logContainer: ElementRef
+
+  logs: string[] = []
+
+  logFiles: string[] = []
+
+  activeLog: string
 
   ngOnInit(): void {
-    this.reload()
-  }
-
-  reload() {
-    this.logService.list(1, 50, 'created', true, {'level__gte': this.level}).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 = new Date(this.logs[this.logs.length-1].created).toISOString()
-    }
-    this.logService.list(1, 25, 'created', true, {'created__lt': lastCreated, 'level__gte': this.level}).subscribe(result => {
-      this.logs.push(...result.results)
+    this.logService.list().subscribe(result => {
+      this.logFiles = result
+      if (this.logFiles.length > 0) {
+        this.activeLog = this.logFiles[0]
+        this.reloadLogs()
+      }
     })
   }
 
-  getLevels() {
-    return LOG_LEVELS
+  reloadLogs() {
+    this.logService.get(this.activeLog).subscribe(result => {
+      this.logs = result
+    })
   }
 
-  setLevel(id) {
-    this.level = id
-    this.reload()
+  getLogLevel(log: string) {
+    if (log.indexOf("[DEBUG]") != -1) {
+      return 10
+    } else if (log.indexOf("[WARNING]") != -1) {
+      return 30
+    } else if (log.indexOf("[ERROR]") != -1) {
+      return 40
+    } else if (log.indexOf("[CRITICAL]") != -1) {
+      return 50
+    } else {
+      return 20
+    }
   }
 
 }

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

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

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

@@ -1,14 +1,21 @@
 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';
+import { Observable } from 'rxjs';
+import { environment } from 'src/environments/environment';
 
 @Injectable({
   providedIn: 'root'
 })
-export class LogService extends AbstractPaperlessService<PaperlessLog> {
+export class LogService {
 
-  constructor(http: HttpClient) {
-    super(http, 'logs')
+  constructor(private http: HttpClient) {
+  }
+
+  list(): Observable<string[]> {
+    return this.http.get<string[]>(`${environment.apiBaseUrl}logs/`)
+  }
+
+  get(id: string): Observable<string[]> {
+    return this.http.get<string[]>(`${environment.apiBaseUrl}logs/${id}/`)
   }
 }