auto-refresh file tasks

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

@@ -1,5 +1,5 @@
 <pngx-page-header title="File Tasks" i18n-title>
-  <div class="btn-toolbar col col-md-auto">
+  <div class="btn-toolbar col col-md-auto align-items-center">
     <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"/>
@@ -10,15 +10,10 @@
         <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()">
+    <div class="form-check form-switch mb-0" (click)="toggleAutoRefresh()">
-      <svg *ngIf="!tasksService.loading" class="sidebaricon" fill="currentColor">
+      <input class="form-check-input" type="checkbox" role="switch" id="autoRefreshSwitch" [attr.checked]="autoRefreshInterval">
-        <use xlink:href="assets/bootstrap-icons.svg#arrow-clockwise"/>
+      <label class="form-check-label" for="autoRefreshSwitch" i18n>Auto refresh</label>
-      </svg>
+    </div>
-      <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>
 </pngx-page-header>
 

src-ui/src/app/components/admin/tasks/tasks.component.spec.ts

@@ -112,6 +112,7 @@ describe('TasksComponent', () => {
   let modalService: NgbModal
   let router: Router
   let httpTestingController: HttpTestingController
+  let reloadSpy
 
   beforeEach(async () => {
     TestBed.configureTestingModule({
@@ -141,11 +142,13 @@ describe('TasksComponent', () => {
     }).compileComponents()
 
     tasksService = TestBed.inject(TasksService)
+    reloadSpy = jest.spyOn(tasksService, 'reload')
     httpTestingController = TestBed.inject(HttpTestingController)
     modalService = TestBed.inject(NgbModal)
     router = TestBed.inject(Router)
     fixture = TestBed.createComponent(TasksComponent)
     component = fixture.componentInstance
+    jest.useFakeTimers()
     fixture.detectChanges()
     httpTestingController
       .expectOne(`${environment.apiBaseUrl}tasks/`)
@@ -164,7 +167,7 @@ describe('TasksComponent', () => {
       `Failed${currentTasksLength}`
     )
     expect(
-      fixture.debugElement.queryAll(By.css('input[type="checkbox"]'))
+      fixture.debugElement.queryAll(By.css('table input[type="checkbox"]'))
     ).toHaveLength(currentTasksLength + 1)
 
     currentTasksLength = tasks.filter(
@@ -245,7 +248,7 @@ describe('TasksComponent', () => {
 
   it('should support toggle all tasks', () => {
     const toggleCheck = fixture.debugElement.query(
-      By.css('input[type=checkbox]')
+      By.css('table input[type=checkbox]')
     )
     toggleCheck.nativeElement.dispatchEvent(new MouseEvent('click'))
     fixture.detectChanges()
@@ -269,4 +272,15 @@ describe('TasksComponent', () => {
       tasks[3].related_document,
     ])
   })
+
+  it('should auto refresh, allow toggle', () => {
+    expect(reloadSpy).toHaveBeenCalledTimes(1)
+    jest.advanceTimersByTime(5000)
+    expect(reloadSpy).toHaveBeenCalledTimes(2)
+
+    component.toggleAutoRefresh()
+    expect(component.autoRefreshInterval).toBeNull()
+    jest.advanceTimersByTime(6000)
+    expect(reloadSpy).toHaveBeenCalledTimes(2)
+  })
 })

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

@@ -23,6 +23,8 @@ export class TasksComponent
   public pageSize: number = 25
   public page: number = 1
 
+  public autoRefreshInterval: any
+
   get dismissButtonText(): string {
     return this.selectedTasks.size > 0
       ? $localize`Dismiss selected`
@@ -39,6 +41,7 @@ export class TasksComponent
 
   ngOnInit() {
     this.tasksService.reload()
+    this.toggleAutoRefresh()
   }
 
   ngOnDestroy() {
@@ -135,4 +138,15 @@ export class TasksComponent
         return $localize`failed`
     }
   }
+
+  toggleAutoRefresh(): void {
+    if (this.autoRefreshInterval) {
+      clearInterval(this.autoRefreshInterval)
+      this.autoRefreshInterval = null
+    } else {
+      this.autoRefreshInterval = setInterval(() => {
+        this.tasksService.reload()
+      }, 5000)
+    }
+  }
 }