log filtering

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

@@ -1,12 +1,26 @@
 <app-page-header title="Logs">
+
+  <div ngbDropdown class="btn-group">
+    <button class="btn btn-outline-secondary btn-sm" id="dropdownBasic1" ngbDropdownToggle>
+      <svg class="toolbaricon" fill="currentColor">
+        <use xlink:href="assets/bootstrap-icons.svg#funnel" />
+      </svg>
+      Filter
+    </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" infiniteScroll (scrolled)="onScroll()">
   <p
     class="text-light text-monospace m-0 p-0 log-entry-{{log.level}}"
     *ngFor="let log of logs">
-    {{log.created | date:'short'}}
+      {{log.created | date:'short'}}
-    {{getLevelText(log.level)}}
+      {{getLevelText(log.level)}}
-    {{log.message}}
+      {{log.message}}
   </p>
 </div>

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

@@ -1,6 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { kMaxLength } from 'buffer';
-import { LOG_LEVELS, PaperlessLog } from 'src/app/data/paperless-log';
+import { LOG_LEVELS, LOG_LEVEL_INFO, PaperlessLog } from 'src/app/data/paperless-log';
 import { LogService } from 'src/app/services/rest/log.service';
 
 @Component({
@@ -13,9 +13,14 @@ export class LogsComponent implements OnInit {
   constructor(private logService: LogService) { }
 
   logs: PaperlessLog[] = []
+  level: number = LOG_LEVEL_INFO
 
   ngOnInit(): void {
-    this.logService.list(1, 50).subscribe(result => this.logs = result.results)
+    this.reload()
+  }
+
+  reload() {
+    this.logService.list(1, 50, null, {'level__gte': this.level}).subscribe(result => this.logs = result.results)
   }
 
   getLevelText(level: number) {
@@ -27,9 +32,18 @@ export class LogsComponent implements OnInit {
     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.logService.list(1, 25, null, {'created__lt': lastCreated, 'level__gte': this.level}).subscribe(result => {
       this.logs.push(...result.results)
     })
   }
 
+  getLevels() {
+    return LOG_LEVELS
+  }
+
+  setLevel(id) {
+    this.level = id
+    this.reload()
+  }
+
 }

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

@@ -1,15 +1,15 @@
-export const DEBUG = 10
+export const LOG_LEVEL_DEBUG = 10
-export const INFO = 20
+export const LOG_LEVEL_INFO = 20
-export const WARNING = 30
+export const LOG_LEVEL_WARNING = 30
-export const ERROR = 40
+export const LOG_LEVEL_ERROR = 40
-export const CRITICAL = 50
+export const LOG_LEVEL_CRITICAL = 50
 
 export const LOG_LEVELS = [
-  {id: DEBUG, name: "DEBUG"},
+  {id: LOG_LEVEL_DEBUG, name: "DEBUG"},
-  {id: INFO, name: "INFO"},
+  {id: LOG_LEVEL_INFO, name: "INFO"},
-  {id: WARNING, name: "WARNING"},
+  {id: LOG_LEVEL_WARNING, name: "WARNING"},
-  {id: ERROR, name: "ERROR"},
+  {id: LOG_LEVEL_ERROR, name: "ERROR"},
-  {id: CRITICAL, name: "CRITICAL"}
+  {id: LOG_LEVEL_CRITICAL, name: "CRITICAL"}
 ]
 
 export interface PaperlessLog {