Merge pull request #1020 from paperless-ngx/feature-frontend-task-queue

Feature: frontend task queue

src-ui/cypress/e2e/tasks/tasks.cy.ts

@@ -0,0 +1,60 @@
+describe('tasks', () => {
+  beforeEach(() => {
+    this.dismissedTasks = new Set<number>()
+
+    cy.fixture('tasks/tasks.json').then((tasksViewsJson) => {
+      // acknowledge tasks POST
+      cy.intercept(
+        'POST',
+        'http://localhost:8000/api/acknowledge_tasks/',
+        (req) => {
+          req.body['tasks'].forEach((t) => this.dismissedTasks.add(t)) // store this for later
+          req.reply({ result: 'OK' })
+        }
+      )
+
+      cy.intercept('GET', 'http://localhost:8000/api/tasks/', (req) => {
+        let response = [...tasksViewsJson]
+        if (this.dismissedTasks.size) {
+          response = response.filter((t) => {
+            return !this.dismissedTasks.has(t.id)
+          })
+        }
+
+        req.reply(response)
+      }).as('tasks')
+    })
+
+    cy.visit('/tasks')
+    cy.wait('@tasks')
+  })
+
+  it('should show a list of dismissable tasks in tabs', () => {
+    cy.get('tbody').find('tr:visible').its('length').should('eq', 10) // double because collapsible result tr
+    cy.wait(500) // stabilizes the test, for some reason...
+    cy.get('tbody')
+      .find('button:visible')
+      .contains('Dismiss')
+      .first()
+      .click()
+      .wait('@tasks')
+      .wait(2000)
+      .then(() => {
+        cy.get('tbody').find('tr:visible').its('length').should('eq', 8) // double because collapsible result tr
+      })
+  })
+
+  it('should allow toggling all tasks in list and warn on dismiss', () => {
+    cy.get('thead').find('input[type="checkbox"]').first().click()
+    cy.get('body').find('button').contains('Dismiss selected').first().click()
+    cy.contains('Confirm')
+    cy.get('.modal')
+      .contains('button', 'Dismiss')
+      .click()
+      .wait('@tasks')
+      .wait(2000)
+      .then(() => {
+        cy.get('tbody').find('tr:visible').should('not.exist')
+      })
+  })
+})

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

@@ -13,6 +13,7 @@ import { NotFoundComponent } from './components/not-found/not-found.component'
 import { DocumentAsnComponent } from './components/document-asn/document-asn.component'
 import { DirtyFormGuard } from './guards/dirty-form.guard'
 import { StoragePathListComponent } from './components/manage/storage-path-list/storage-path-list.component'
+import { TasksComponent } from './components/manage/tasks/tasks.component'
 
 const routes: Routes = [
   { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
@@ -35,6 +36,7 @@ const routes: Routes = [
         component: SettingsComponent,
         canDeactivate: [DirtyFormGuard],
       },
+      { path: 'tasks', component: TasksComponent },
     ],
   },
 

src-ui/src/app/app.component.ts

@@ -7,6 +7,7 @@ import { ConsumerStatusService } from './services/consumer-status.service'
 import { ToastService } from './services/toast.service'
 import { NgxFileDropEntry } from 'ngx-file-drop'
 import { UploadDocumentsService } from './services/upload-documents.service'
+import { TasksService } from './services/tasks.service'
 
 @Component({
   selector: 'app-root',
@@ -27,7 +28,8 @@ export class AppComponent implements OnInit, OnDestroy {
     private consumerStatusService: ConsumerStatusService,
     private toastService: ToastService,
     private router: Router,
-    private uploadDocumentsService: UploadDocumentsService
+    private uploadDocumentsService: UploadDocumentsService,
+    private tasksService: TasksService
   ) {
     let anyWindow = window as any
     anyWindow.pdfWorkerSrc = 'assets/js/pdf.worker.min.js'
@@ -65,6 +67,7 @@ export class AppComponent implements OnInit, OnDestroy {
     this.successSubscription = this.consumerStatusService
       .onDocumentConsumptionFinished()
       .subscribe((status) => {
+        this.tasksService.reload()
         if (
           this.showNotification(SETTINGS_KEYS.NOTIFICATIONS_CONSUMER_SUCCESS)
         ) {
@@ -83,6 +86,7 @@ export class AppComponent implements OnInit, OnDestroy {
     this.failedSubscription = this.consumerStatusService
       .onDocumentConsumptionFailed()
       .subscribe((status) => {
+        this.tasksService.reload()
         if (
           this.showNotification(SETTINGS_KEYS.NOTIFICATIONS_CONSUMER_FAILED)
         ) {
@@ -95,6 +99,7 @@ export class AppComponent implements OnInit, OnDestroy {
     this.newDocumentSubscription = this.consumerStatusService
       .onDocumentDetected()
       .subscribe((status) => {
+        this.tasksService.reload()
         if (
           this.showNotification(
             SETTINGS_KEYS.NOTIFICATIONS_CONSUMER_NEW_DOCUMENT

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

@@ -90,6 +90,7 @@ import localeZh from '@angular/common/locales/zh'
 import { StoragePathListComponent } from './components/manage/storage-path-list/storage-path-list.component'
 import { StoragePathEditDialogComponent } from './components/common/edit-dialog/storage-path-edit-dialog/storage-path-edit-dialog.component'
 import { SettingsService } from './services/settings.service'
+import { TasksComponent } from './components/manage/tasks/tasks.component'
 
 registerLocaleData(localeBe)
 registerLocaleData(localeCs)
@@ -171,6 +172,7 @@ function initializeApp(settings: SettingsService) {
     DateComponent,
     ColorComponent,
     DocumentAsnComponent,
+    TasksComponent,
   ],
   imports: [
     BrowserModule,

src-ui/src/app/components/app-frame/app-frame.component.html

@@ -141,6 +141,13 @@
               </svg>&nbsp;<ng-container i18n>Storage paths</ng-container>
             </a>
           </li>
+          <li class="nav-item">
+            <a class="nav-link" routerLink="tasks" routerLinkActive="active" (click)="closeMenu()">
+              <svg class="sidebaricon" fill="currentColor">
+                <use xlink:href="assets/bootstrap-icons.svg#list-task"/>
+              </svg>&nbsp;<ng-container i18n>File Tasks<ng-container *ngIf="tasksService.failedFileTasks.length > 0"><span class="badge bg-danger ms-2">{{tasksService.failedFileTasks.length}}</span></ng-container></ng-container>
+            </a>
+          </li>
           <li class="nav-item">
             <a class="nav-link" routerLink="logs" routerLinkActive="active" (click)="closeMenu()">
               <svg class="sidebaricon" fill="currentColor">

src-ui/src/app/components/app-frame/app-frame.component.ts

@@ -1,7 +1,7 @@
 import { Component } from '@angular/core'
 import { FormControl } from '@angular/forms'
 import { ActivatedRoute, Router, Params } from '@angular/router'
-import { from, Observable, Subscription, BehaviorSubject } from 'rxjs'
+import { from, Observable } from 'rxjs'
 import {
   debounceTime,
   distinctUntilChanged,
@@ -15,7 +15,6 @@ import { SavedViewService } from 'src/app/services/rest/saved-view.service'
 import { SearchService } from 'src/app/services/rest/search.service'
 import { environment } from 'src/environments/environment'
 import { DocumentDetailComponent } from '../document-detail/document-detail.component'
-import { Meta } from '@angular/platform-browser'
 import { DocumentListViewService } from 'src/app/services/document-list-view.service'
 import { FILTER_FULLTEXT_QUERY } from 'src/app/data/filter-rule-type'
 import {
@@ -23,6 +22,7 @@ import {
   AppRemoteVersion,
 } from 'src/app/services/rest/remote-version.service'
 import { SettingsService } from 'src/app/services/settings.service'
+import { TasksService } from 'src/app/services/tasks.service'
 
 @Component({
   selector: 'app-app-frame',
@@ -38,13 +38,15 @@ export class AppFrameComponent {
     public savedViewService: SavedViewService,
     private remoteVersionService: RemoteVersionService,
     private list: DocumentListViewService,
-    public settingsService: SettingsService
+    public settingsService: SettingsService,
+    public tasksService: TasksService
   ) {
     this.remoteVersionService
       .checkForUpdates()
       .subscribe((appRemoteVersion: AppRemoteVersion) => {
         this.appRemoteVersion = appRemoteVersion
       })
+    tasksService.reload()
   }
 
   versionString = `${environment.appTitle} ${environment.version}`

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

@@ -0,0 +1,120 @@
+<app-page-header title="File Tasks" i18n-title>
+  <div class="btn-toolbar col col-md-auto">
+    <button class="btn btn-sm btn-outline-secondary me-2" (click)="clearSelection()" [hidden]="selectedTasks.size == 0">
+      <svg class="sidebaricon" fill="currentColor">
+        <use xlink:href="assets/bootstrap-icons.svg#x"/>
+      </svg>&nbsp;<ng-container i18n>Clear selection</ng-container>
+    </button>
+    <button class="btn btn-sm btn-outline-primary me-4" (click)="dismissTasks()" [disabled]="tasksService.total == 0">
+      <svg class="sidebaricon" fill="currentColor">
+        <use xlink:href="assets/bootstrap-icons.svg#check2-all"/>
+      </svg>&nbsp;<ng-container i18n>{{dismissButtonText}}</ng-container>
+    </button>
+    <button class="btn btn-sm btn-outline-primary" (click)="tasksService.reload()">
+      <svg *ngIf="!tasksService.loading" class="sidebaricon" fill="currentColor">
+        <use xlink:href="assets/bootstrap-icons.svg#arrow-clockwise"/>
+      </svg>
+      <ng-container *ngIf="tasksService.loading">
+        <div class="spinner-border spinner-border-sm fw-normal" role="status"></div>
+        <div class="visually-hidden" i18n>Loading...</div>
+      </ng-container>&nbsp;<ng-container i18n>Refresh</ng-container>
+    </button>
+  </div>
+</app-page-header>
+
+<ng-container *ngIf="!tasksService.completedFileTasks && tasksService.loading">
+  <div class="spinner-border spinner-border-sm fw-normal ms-2 me-auto" role="status"></div>
+  <div class="visually-hidden" i18n>Loading...</div>
+</ng-container>
+
+<ng-template let-tasks="tasks" #tasksTemplate>
+  <table class="table table-striped align-middle border shadow-sm">
+    <thead>
+      <tr>
+        <th scope="col">
+          <div class="form-check">
+            <input type="checkbox" class="form-check-input" id="all-tasks" [disabled]="currentTasks.length == 0" (click)="toggleAll($event); $event.stopPropagation();">
+            <label class="form-check-label" for="all-tasks"></label>
+          </div>
+        </th>
+        <th scope="col" i18n>Name</th>
+        <th scope="col" class="d-none d-lg-table-cell" i18n>Created</th>
+        <th scope="col" class="d-none d-lg-table-cell" *ngIf="activeTab != 'started' && activeTab != 'queued'" i18n>Results</th>
+        <th scope="col" class="d-table-cell d-lg-none" i18n>Info</th>
+        <th scope="col" i18n>Actions</th>
+      </tr>
+    </thead>
+    <tbody>
+      <ng-container *ngFor="let task of tasks">
+      <tr (click)="toggleSelected(task, $event); $event.stopPropagation();">
+        <th>
+          <div class="form-check">
+            <input type="checkbox" class="form-check-input" id="task{{task.id}}" [checked]="selectedTasks.has(task.id)" (click)="toggleSelected(task, $event); $event.stopPropagation();">
+            <label class="form-check-label" for="task{{task.id}}"></label>
+          </div>
+        </th>
+        <td class="overflow-auto">{{ task.name }}</td>
+        <td class="d-none d-lg-table-cell">{{ task.created | customDate:'short' }}</td>
+        <td class="d-none d-lg-table-cell" *ngIf="activeTab != 'incomplete'">
+          <div *ngIf="task.result.length > 50" class="result" (click)="expandTask(task); $event.stopPropagation();"
+            [ngbPopover]="resultPopover" popoverClass="shadow small mobile" triggers="mouseenter:mouseleave" container="body">
+            <span class="small d-none d-md-inline-block font-monospace text-muted">{{ task.result | slice:0:50 }}&hellip;</span>
+          </div>
+          <span *ngIf="task.result.length <= 50" class="small d-none d-md-inline-block font-monospace text-muted">{{ task.result }}</span>
+          <ng-template #resultPopover>
+            <pre class="small mb-0">{{ task.result | slice:0:300 }}<ng-container *ngIf="task.result.length > 300">&hellip;</ng-container></pre>
+            <ng-container *ngIf="task.result.length > 300"><br/><em>(<ng-container i18n>click for full output</ng-container>)</em></ng-container>
+          </ng-template>
+        </td>
+        <td class="d-lg-none">
+          <button class="btn btn-link" (click)="expandTask(task); $event.stopPropagation();">
+            <svg fill="currentColor" class="" width="1.2em" height="1.2em" style="vertical-align: text-top;" viewBox="0 0 16 16">
+              <use xlink:href="assets/bootstrap-icons.svg#info-circle" />
+            </svg>
+          </button>
+        </td>
+        <td scope="row">
+          <button class="btn btn-sm btn-outline-secondary" (click)="dismissTask(task); $event.stopPropagation();">
+            <svg class="sidebaricon" fill="currentColor">
+              <use xlink:href="assets/bootstrap-icons.svg#check"/>
+            </svg>&nbsp;<ng-container i18n>Dismiss</ng-container>
+          </button>
+        </td>
+      </tr>
+      <tr>
+        <td class="p-0" [class.border-0]="expandedTask != task.id" colspan="5">
+          <pre #collapse="ngbCollapse" [ngbCollapse]="expandedTask !== task.id" class="small mb-0"><div class="small p-1 p-lg-3 ms-lg-3">{{ task.result }}</div></pre>
+        </td>
+      </tr>
+      </ng-container>
+    </tbody>
+  </table>
+</ng-template>
+
+<ul ngbNav #nav="ngbNav" [(activeId)]="activeTab" class="nav-tabs">
+  <li ngbNavItem="failed">
+    <a ngbNavLink i18n>Failed&nbsp;<span *ngIf="tasksService.failedFileTasks.length > 0" class="badge bg-danger ms-1">{{tasksService.failedFileTasks.length}}</span></a>
+    <ng-template ngbNavContent>
+      <ng-container [ngTemplateOutlet]="tasksTemplate" [ngTemplateOutletContext]="{tasks:tasksService.failedFileTasks}"></ng-container>
+    </ng-template>
+  </li>
+  <li ngbNavItem="completed">
+    <a ngbNavLink i18n>Complete&nbsp;<span *ngIf="tasksService.completedFileTasks.length > 0" class="badge bg-secondary ms-1">{{tasksService.completedFileTasks.length}}</span></a>
+    <ng-template ngbNavContent>
+      <ng-container [ngTemplateOutlet]="tasksTemplate" [ngTemplateOutletContext]="{tasks:tasksService.completedFileTasks}"></ng-container>
+    </ng-template>
+  </li>
+  <li ngbNavItem="started">
+    <a ngbNavLink i18n>Started&nbsp;<span *ngIf="tasksService.startedFileTasks.length > 0" class="badge bg-secondary ms-1">{{tasksService.startedFileTasks.length}}</span></a>
+    <ng-template ngbNavContent>
+      <ng-container [ngTemplateOutlet]="tasksTemplate" [ngTemplateOutletContext]="{tasks:tasksService.startedFileTasks}"></ng-container>
+    </ng-template>
+  </li>
+  <li ngbNavItem="queued">
+    <a ngbNavLink i18n>Queued&nbsp;<span *ngIf="tasksService.queuedFileTasks.length > 0" class="badge bg-secondary ms-1">{{tasksService.queuedFileTasks.length}}</span></a>
+    <ng-template ngbNavContent>
+      <ng-container [ngTemplateOutlet]="tasksTemplate" [ngTemplateOutletContext]="{tasks:tasksService.queuedFileTasks}"></ng-container>
+    </ng-template>
+  </li>
+</ul>
+<div [ngbNavOutlet]="nav"></div>

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

@@ -0,0 +1,22 @@
+::ng-deep .popover {
+    max-width: 350px;
+
+    pre {
+        white-space: pre-wrap;
+        word-break: break-word;
+    }
+}
+
+pre {
+    white-space: pre-wrap;
+    word-break: break-word;
+}
+
+.result {
+    cursor: pointer;
+}
+
+.btn .spinner-border-sm {
+    width: 0.8rem;
+    height: 0.8rem;
+}

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

@@ -0,0 +1,109 @@
+import { Component, OnInit, OnDestroy } from '@angular/core'
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
+import { takeUntil, Subject, first } from 'rxjs'
+import { PaperlessTask } from 'src/app/data/paperless-task'
+import { TasksService } from 'src/app/services/tasks.service'
+import { ConfirmDialogComponent } from '../../common/confirm-dialog/confirm-dialog.component'
+
+@Component({
+  selector: 'app-tasks',
+  templateUrl: './tasks.component.html',
+  styleUrls: ['./tasks.component.scss'],
+})
+export class TasksComponent implements OnInit, OnDestroy {
+  public activeTab: string
+  public selectedTasks: Set<number> = new Set()
+  private unsubscribeNotifer = new Subject()
+  public expandedTask: number
+
+  get dismissButtonText(): string {
+    return this.selectedTasks.size > 0
+      ? $localize`Dismiss selected`
+      : $localize`Dismiss all`
+  }
+
+  constructor(
+    public tasksService: TasksService,
+    private modalService: NgbModal
+  ) {}
+
+  ngOnInit() {
+    this.tasksService.reload()
+  }
+
+  ngOnDestroy() {
+    this.unsubscribeNotifer.next(true)
+  }
+
+  dismissTask(task: PaperlessTask) {
+    this.dismissTasks(task)
+  }
+
+  dismissTasks(task: PaperlessTask = undefined) {
+    let tasks = task ? new Set([task.id]) : this.selectedTasks
+    if (!task && this.selectedTasks.size == 0)
+      tasks = new Set(this.tasksService.allFileTasks.map((t) => t.id))
+    if (tasks.size > 1) {
+      let modal = this.modalService.open(ConfirmDialogComponent, {
+        backdrop: 'static',
+      })
+      modal.componentInstance.title = $localize`Confirm Dismiss All`
+      modal.componentInstance.messageBold =
+        $localize`Dismiss all` + ` ${tasks.size} ` + $localize`tasks?`
+      modal.componentInstance.btnClass = 'btn-warning'
+      modal.componentInstance.btnCaption = $localize`Dismiss`
+      modal.componentInstance.confirmClicked.pipe(first()).subscribe(() => {
+        modal.componentInstance.buttonsEnabled = false
+        modal.close()
+        this.tasksService.dismissTasks(tasks)
+        this.selectedTasks.clear()
+      })
+    } else {
+      this.tasksService.dismissTasks(tasks)
+      this.selectedTasks.clear()
+    }
+  }
+
+  expandTask(task: PaperlessTask) {
+    this.expandedTask = this.expandedTask == task.id ? undefined : task.id
+  }
+
+  toggleSelected(task: PaperlessTask) {
+    this.selectedTasks.has(task.id)
+      ? this.selectedTasks.delete(task.id)
+      : this.selectedTasks.add(task.id)
+  }
+
+  get currentTasks(): PaperlessTask[] {
+    let tasks: PaperlessTask[]
+    switch (this.activeTab) {
+      case 'queued':
+        tasks = this.tasksService.queuedFileTasks
+        break
+      case 'started':
+        tasks = this.tasksService.startedFileTasks
+        break
+      case 'completed':
+        tasks = this.tasksService.completedFileTasks
+        break
+      case 'failed':
+        tasks = this.tasksService.failedFileTasks
+        break
+      default:
+        break
+    }
+    return tasks
+  }
+
+  toggleAll(event: PointerEvent) {
+    if ((event.target as HTMLInputElement).checked) {
+      this.selectedTasks = new Set(this.currentTasks.map((t) => t.id))
+    } else {
+      this.clearSelection()
+    }
+  }
+
+  clearSelection() {
+    this.selectedTasks.clear()
+  }
+}

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

@@ -0,0 +1,32 @@
+import { ObjectWithId } from './object-with-id'
+
+export enum PaperlessTaskType {
+  // just file tasks, for now
+  File = 'file',
+}
+
+export enum PaperlessTaskStatus {
+  Queued = 'queued',
+  Started = 'started',
+  Complete = 'complete',
+  Failed = 'failed',
+  Unknown = 'unknown',
+}
+
+export interface PaperlessTask extends ObjectWithId {
+  type: PaperlessTaskType
+
+  status: PaperlessTaskStatus
+
+  acknowledged: boolean
+
+  task_id: string
+
+  name: string
+
+  created: Date
+
+  started?: Date
+
+  result: string
+}

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

@@ -0,0 +1,71 @@
+import { HttpClient } from '@angular/common/http'
+import { Injectable } from '@angular/core'
+import { first, map } from 'rxjs/operators'
+import {
+  PaperlessTask,
+  PaperlessTaskStatus,
+  PaperlessTaskType,
+} from 'src/app/data/paperless-task'
+import { environment } from 'src/environments/environment'
+
+@Injectable({
+  providedIn: 'root',
+})
+export class TasksService {
+  private baseUrl: string = environment.apiBaseUrl
+
+  loading: boolean
+
+  private fileTasks: PaperlessTask[] = []
+
+  public get total(): number {
+    return this.fileTasks?.length
+  }
+
+  public get allFileTasks(): PaperlessTask[] {
+    return this.fileTasks.slice(0)
+  }
+
+  public get queuedFileTasks(): PaperlessTask[] {
+    return this.fileTasks.filter((t) => t.status == PaperlessTaskStatus.Queued)
+  }
+
+  public get startedFileTasks(): PaperlessTask[] {
+    return this.fileTasks.filter((t) => t.status == PaperlessTaskStatus.Started)
+  }
+
+  public get completedFileTasks(): PaperlessTask[] {
+    return this.fileTasks.filter(
+      (t) => t.status == PaperlessTaskStatus.Complete
+    )
+  }
+
+  public get failedFileTasks(): PaperlessTask[] {
+    return this.fileTasks.filter((t) => t.status == PaperlessTaskStatus.Failed)
+  }
+
+  constructor(private http: HttpClient) {}
+
+  public reload() {
+    this.loading = true
+
+    this.http
+      .get<PaperlessTask[]>(`${this.baseUrl}tasks/`)
+      .pipe(first())
+      .subscribe((r) => {
+        this.fileTasks = r.filter((t) => t.type == PaperlessTaskType.File) // they're all File tasks, for now
+        this.loading = false
+      })
+  }
+
+  public dismissTasks(task_ids: Set<number>) {
+    this.http
+      .post(`${this.baseUrl}acknowledge_tasks/`, {
+        tasks: [...task_ids],
+      })
+      .pipe(first())
+      .subscribe((r) => {
+        this.reload()
+      })
+  }
+}