Merge branch 'dev' into feature-ai

src-ui/src/app/components/common/system-status-dialog/system-status-dialog.component.html

@@ -254,6 +254,18 @@
                   <h6><ng-container i18n>Error</ng-container>:</h6> <span class="font-monospace small">{{status.tasks.sanity_check_error}}</span>
                 }
               </ng-template>
+              <dt i18n>WebSocket Connection</dt>
+              <dd>
+                <span class="btn btn-sm pe-none align-items-center btn-dark text-uppercase small">
+                  @if (status.websocket_connected === 'OK') {
+                    <ng-container i18n>OK</ng-container>
+                    <i-bs name="check-circle-fill" class="text-primary ms-2 lh-1"></i-bs>
+                  } @else {
+                    <ng-container i18n>Error</ng-container>
+                    <i-bs name="exclamation-triangle-fill" class="text-danger ms-2 lh-1"></i-bs>
+                  }
+                </span>
+              </dd>
               @if (aiEnabled) {
                 <dt i18n>AI Index</dt>
                 <dd class="d-flex align-items-center">

src-ui/src/app/components/common/system-status-dialog/system-status-dialog.component.spec.ts

@@ -24,7 +24,7 @@ import {
 } from '@angular/core/testing'
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
 import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
-import { of, throwError } from 'rxjs'
+import { Subject, of, throwError } from 'rxjs'
 import { PaperlessTaskName } from 'src/app/data/paperless-task'
 import {
   InstallType,
@@ -34,6 +34,7 @@ import {
 import { SystemStatusService } from 'src/app/services/system-status.service'
 import { TasksService } from 'src/app/services/tasks.service'
 import { ToastService } from 'src/app/services/toast.service'
+import { WebsocketStatusService } from 'src/app/services/websocket-status.service'
 import { SystemStatusDialogComponent } from './system-status-dialog.component'
 
 const status: SystemStatus = {
@@ -80,6 +81,8 @@ describe('SystemStatusDialogComponent', () => {
   let tasksService: TasksService
   let systemStatusService: SystemStatusService
   let toastService: ToastService
+  let websocketStatusService: WebsocketStatusService
+  let websocketSubject: Subject<boolean> = new Subject<boolean>()
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
@@ -101,6 +104,12 @@ describe('SystemStatusDialogComponent', () => {
     tasksService = TestBed.inject(TasksService)
     systemStatusService = TestBed.inject(SystemStatusService)
     toastService = TestBed.inject(ToastService)
+    websocketStatusService = TestBed.inject(WebsocketStatusService)
+    jest
+      .spyOn(websocketStatusService, 'onConnectionStatus')
+      .mockImplementation(() => {
+        return websocketSubject.asObservable()
+      })
     fixture.detectChanges()
   })
 
@@ -171,4 +180,19 @@ describe('SystemStatusDialogComponent', () => {
     component.ngOnInit()
     expect(component.versionMismatch).toBeFalsy()
   })
+
+  it('should update websocket connection status', () => {
+    websocketSubject.next(true)
+    expect(component.status.websocket_connected).toEqual(
+      SystemStatusItemStatus.OK
+    )
+    websocketSubject.next(false)
+    expect(component.status.websocket_connected).toEqual(
+      SystemStatusItemStatus.ERROR
+    )
+    websocketSubject.next(true)
+    expect(component.status.websocket_connected).toEqual(
+      SystemStatusItemStatus.OK
+    )
+  })
 })

src-ui/src/app/components/common/system-status-dialog/system-status-dialog.component.ts

@@ -1,5 +1,5 @@
 import { Clipboard, ClipboardModule } from '@angular/cdk/clipboard'
-import { Component, OnInit, inject } from '@angular/core'
+import { Component, OnDestroy, OnInit, inject } from '@angular/core'
 import {
   NgbActiveModal,
   NgbModalModule,
@@ -7,6 +7,7 @@ import {
   NgbProgressbarModule,
 } from '@ng-bootstrap/ng-bootstrap'
 import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
+import { Subject, takeUntil } from 'rxjs'
 import { PaperlessTaskName } from 'src/app/data/paperless-task'
 import {
   SystemStatus,
@@ -20,6 +21,7 @@ import { SettingsService } from 'src/app/services/settings.service'
 import { SystemStatusService } from 'src/app/services/system-status.service'
 import { TasksService } from 'src/app/services/tasks.service'
 import { ToastService } from 'src/app/services/toast.service'
+import { WebsocketStatusService } from 'src/app/services/websocket-status.service'
 import { environment } from 'src/environments/environment'
 
 @Component({
@@ -36,13 +38,14 @@ import { environment } from 'src/environments/environment'
     NgxBootstrapIconsModule,
   ],
 })
-export class SystemStatusDialogComponent implements OnInit {
+export class SystemStatusDialogComponent implements OnInit, OnDestroy {
   activeModal = inject(NgbActiveModal)
   private clipboard = inject(Clipboard)
   private systemStatusService = inject(SystemStatusService)
   private tasksService = inject(TasksService)
   private toastService = inject(ToastService)
   private permissionsService = inject(PermissionsService)
+  private websocketStatusService = inject(WebsocketStatusService)
   private settingsService = inject(SettingsService)
 
   public SystemStatusItemStatus = SystemStatusItemStatus
@@ -54,6 +57,7 @@ export class SystemStatusDialogComponent implements OnInit {
   public copied: boolean = false
 
   private runningTasks: Set<PaperlessTaskName> = new Set()
+  private unsubscribeNotifier: Subject<any> = new Subject()
 
   get currentUserIsSuperUser(): boolean {
     return this.permissionsService.isSuperUser()
@@ -72,6 +76,17 @@ export class SystemStatusDialogComponent implements OnInit {
     if (this.versionMismatch) {
       this.status.pngx_version = `${this.status.pngx_version} (frontend: ${this.frontendVersion})`
     }
+    this.status.websocket_connected = this.websocketStatusService.isConnected()
+      ? SystemStatusItemStatus.OK
+      : SystemStatusItemStatus.ERROR
+    this.websocketStatusService
+      .onConnectionStatus()
+      .pipe(takeUntil(this.unsubscribeNotifier))
+      .subscribe((connected) => {
+        this.status.websocket_connected = connected
+          ? SystemStatusItemStatus.OK
+          : SystemStatusItemStatus.ERROR
+      })
   }
 
   public close() {
@@ -104,7 +119,7 @@ export class SystemStatusDialogComponent implements OnInit {
         this.runningTasks.delete(taskName)
         this.systemStatusService.get().subscribe({
           next: (status) => {
-            this.status = status
+            Object.assign(this.status, status)
           },
         })
       },
@@ -117,4 +132,9 @@ export class SystemStatusDialogComponent implements OnInit {
       },
     })
   }
+
+  ngOnDestroy(): void {
+    this.unsubscribeNotifier.next(this)
+    this.unsubscribeNotifier.complete()
+  }
 }