Audit log UI

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

@@ -119,6 +119,7 @@ import { NgxFilesizeModule } from 'ngx-filesize'
 import { RotateConfirmDialogComponent } from './components/common/confirm-dialog/rotate-confirm-dialog/rotate-confirm-dialog.component'
 import { MergeConfirmDialogComponent } from './components/common/confirm-dialog/merge-confirm-dialog/merge-confirm-dialog.component'
 import { SplitConfirmDialogComponent } from './components/common/confirm-dialog/split-confirm-dialog/split-confirm-dialog.component'
+import { AuditLogComponent } from './components/audit-log/audit-log.component'
 import {
   airplane,
   archive,
@@ -472,6 +473,7 @@ function initializeApp(settings: SettingsService) {
     RotateConfirmDialogComponent,
     MergeConfirmDialogComponent,
     SplitConfirmDialogComponent,
+    AuditLogComponent,
   ],
   imports: [
     BrowserModule,

src-ui/src/app/components/audit-log/audit-log.component.html

@@ -0,0 +1,50 @@
+<ul class="list-group list-group-">
+    @for (entry of entries; track entry.id) {
+        <li class="list-group-item">
+            <div class="d-flex justify-content-between align-items-center">
+                <div>
+                    {{ entry.timestamp | customDate:'longDate' }}
+                    {{ entry.timestamp | date:'shortTime' }}
+                    @if (entry.actor) {
+                        <span class="ms-3 fst-italic">{{ entry.actor.username }}</span>
+                    } @else {
+                        <span class="ms-3 fst-italic">System</span>
+                    }
+                    <span class="badge bg-secondary ms-3">{{ entry.action | titlecase }}</span>
+                </div>
+                <button type="button" class="ml-auto btn btn-link" (click)="toggleEntry(entry)">
+                    <i-bs class="me-2" name="info-circle"></i-bs>
+                    <ng-container i18n>Details</ng-container>
+                </button>
+            </div>
+            <div #collapse="ngbCollapse" [ngbCollapse]="!openEntries.has(entry.id)">
+                <table class="table table-borderless m-0 ms-2">
+                    <thead>
+                        <tr>
+                            <th i18n>Field</th>
+                            <th i18n>Change</th>
+                        </tr>
+                    <tbody>
+                        @for (change of entry.changes | keyvalue; track change.key) {
+                            @if (change.value["type"] === 'm2m') {
+                                <tr>
+                                    <td>{{ change.key | titlecase }}:</td>
+                                    <td>
+                                        {{ change.value["operation"] | titlecase }}
+                                        <span class="fst-italic">{{ change.value["objects"].join(', ') }}</span>
+                                    </td>
+                                </tr>
+                            }
+                            @else if (change.key !== 'modified') {
+                                <tr>
+                                    <td>{{ change.key | titlecase }}:</td>
+                                    <td>{{ change.value[1] }}</td>
+                                </tr>
+                            }
+                        }
+                    </tbody>
+                </table>
+            </div>
+        </li>
+    }
+</ul>

src-ui/src/app/components/audit-log/audit-log.component.scss

@@ -0,0 +1,3 @@
+table {
+    transition: all 0.3s ease;
+}

src-ui/src/app/components/audit-log/audit-log.component.spec.ts

@@ -0,0 +1,77 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+
+import { AuditLogComponent } from './audit-log.component'
+import { DocumentService } from 'src/app/services/rest/document.service'
+import { of } from 'rxjs'
+import { AuditLogAction } from 'src/app/data/auditlog-entry'
+import { HttpClientTestingModule } from '@angular/common/http/testing'
+import { CustomDatePipe } from 'src/app/pipes/custom-date.pipe'
+import { DatePipe } from '@angular/common'
+import { NgbCollapseModule } from '@ng-bootstrap/ng-bootstrap'
+import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
+
+describe('AuditLogComponent', () => {
+  let component: AuditLogComponent
+  let fixture: ComponentFixture<AuditLogComponent>
+  let documentService: DocumentService
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [AuditLogComponent, CustomDatePipe],
+      providers: [DatePipe],
+      imports: [
+        HttpClientTestingModule,
+        NgbCollapseModule,
+        NgxBootstrapIconsModule.pick(allIcons),
+      ],
+    }).compileComponents()
+
+    fixture = TestBed.createComponent(AuditLogComponent)
+    documentService = TestBed.inject(DocumentService)
+    component = fixture.componentInstance
+  })
+
+  it('should get audit log entries on init', () => {
+    const getAuditLogSpy = jest.spyOn(documentService, 'getAuditLog')
+    getAuditLogSpy.mockReturnValue(
+      of([
+        {
+          id: 1,
+          actor: {
+            id: 1,
+            username: 'user1',
+          },
+          action: AuditLogAction.Create,
+          timestamp: '2021-01-01T00:00:00Z',
+          remote_addr: '1.2.3.4',
+          changes: {
+            title: ['old title', 'new title'],
+          },
+        },
+      ])
+    )
+    component.documentId = 1
+    fixture.detectChanges()
+    expect(getAuditLogSpy).toHaveBeenCalledWith(1)
+  })
+
+  it('should toggle entry', () => {
+    const entry = {
+      id: 1,
+      actor: {
+        id: 1,
+        username: 'user1',
+      },
+      action: AuditLogAction.Create,
+      timestamp: '2021-01-01T00:00:00Z',
+      remote_addr: '1.2.3.4',
+      changes: {
+        title: ['old title', 'new title'],
+      },
+    }
+    component.toggleEntry(entry)
+    expect(component.openEntries.has(1)).toBe(true)
+    component.toggleEntry(entry)
+    expect(component.openEntries.has(1)).toBe(false)
+  })
+})

src-ui/src/app/components/audit-log/audit-log.component.ts

@@ -0,0 +1,43 @@
+import { Component, Input, OnInit } from '@angular/core'
+import { AuditLogEntry } from 'src/app/data/auditlog-entry'
+import { DocumentService } from 'src/app/services/rest/document.service'
+
+@Component({
+  selector: 'pngx-audit-log',
+  templateUrl: './audit-log.component.html',
+  styleUrl: './audit-log.component.scss',
+})
+export class AuditLogComponent implements OnInit {
+  _documentId: number
+  @Input()
+  set documentId(id: number) {
+    this._documentId = id
+    this.ngOnInit()
+  }
+
+  public loading: boolean = true
+  public entries: AuditLogEntry[] = []
+  public openEntries: Set<number> = new Set()
+
+  constructor(private documentService: DocumentService) {}
+
+  ngOnInit(): void {
+    if (this._documentId) {
+      this.loading = true
+      this.documentService
+        .getAuditLog(this._documentId)
+        .subscribe((auditLogEntries) => {
+          this.entries = auditLogEntries
+          this.loading = false
+        })
+    }
+  }
+
+  toggleEntry(entry: AuditLogEntry) {
+    if (this.openEntries.has(entry.id)) {
+      this.openEntries.delete(entry.id)
+    } else {
+      this.openEntries.add(entry.id)
+    }
+  }
+}

src-ui/src/app/components/document-detail/document-detail.component.html

@@ -285,6 +285,15 @@
           </li>
         }
 
+        <li *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.AuditLogEntry }" [ngbNavItem]="DocumentDetailNavIDs.History">
+          <a ngbNavLink i18n>History</a>
+          <ng-template ngbNavContent>
+            <div class="mb-3">
+              <pngx-audit-log [documentId]="documentId"></pngx-audit-log>
+            </div>
+          </ng-template>
+        </li>
+
         @if (showPermissions) {
           <li [ngbNavItem]="DocumentDetailNavIDs.Permissions">
             <a ngbNavLink i18n>Permissions</a>

src-ui/src/app/components/document-detail/document-detail.component.ts

@@ -77,6 +77,7 @@ enum DocumentDetailNavIDs {
   Preview = 4,
   Notes = 5,
   Permissions = 6,
+  History = 7,
 }
 
 enum ContentRenderType {

src-ui/src/app/data/auditlog-entry.ts

@@ -0,0 +1,16 @@
+import { User } from './user'
+
+export enum AuditLogAction {
+  Create = 'create',
+  Update = 'update',
+  Delete = 'delete',
+}
+
+export interface AuditLogEntry {
+  id: number
+  timestamp: string
+  action: AuditLogAction
+  changes: any
+  remote_addr: string
+  actor?: User
+}

src-ui/src/app/services/permissions.service.ts

@@ -19,6 +19,7 @@ export enum PermissionType {
   PaperlessTask = '%s_paperlesstask',
   AppConfig = '%s_applicationconfiguration',
   UISettings = '%s_uisettings',
+  AuditLogEntry = '%s_logentry',
   Note = '%s_note',
   MailAccount = '%s_mailaccount',
   MailRule = '%s_mailrule',

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

@@ -266,6 +266,13 @@ describe(`DocumentService`, () => {
     )
     expect(req.request.body.remove_inbox_tags).toEqual(true)
   })
+
+  it('should call appropriate api endpoint for getting audit log', () => {
+    subscription = service.getAuditLog(documents[0].id).subscribe()
+    const req = httpTestingController.expectOne(
+      `${environment.apiBaseUrl}${endpoint}/${documents[0].id}/audit/`
+    )
+  })
 })
 
 afterEach(() => {

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

@@ -20,6 +20,7 @@ import {
 } from '../permissions.service'
 import { SettingsService } from '../settings.service'
 import { SETTINGS, SETTINGS_KEYS } from 'src/app/data/ui-settings'
+import { AuditLogEntry } from 'src/app/data/auditlog-entry'
 
 export const DOCUMENT_SORT_FIELDS = [
   { field: 'archive_serial_number', name: $localize`ASN` },
@@ -222,6 +223,10 @@ export class DocumentService extends AbstractPaperlessService<Document> {
     )
   }
 
+  getAuditLog(id: number): Observable<AuditLogEntry[]> {
+    return this.http.get<AuditLogEntry[]>(this.getResourceUrl(id, 'audit'))
+  }
+
   bulkDownload(
     ids: number[],
     content = 'both',