Feature: system status (#5743)

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

@@ -114,7 +114,10 @@ import { FileComponent } from './components/common/input/file/file.component'
 import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
 import { ConfirmButtonComponent } from './components/common/confirm-button/confirm-button.component'
 import { MonetaryComponent } from './components/common/input/monetary/monetary.component'
+import { SystemStatusDialogComponent } from './components/common/system-status-dialog/system-status-dialog.component'
+import { NgxFilesizeModule } from 'ngx-filesize'
 import {
+  airplane,
   archive,
   arrowCounterclockwise,
   arrowDown,
@@ -129,12 +132,14 @@ import {
   boxes,
   calendar,
   calendarEvent,
+  cardChecklist,
   caretDown,
   caretUp,
   chatLeftText,
   check,
   check2All,
   checkAll,
+  checkCircleFill,
   checkLg,
   chevronDoubleLeft,
   chevronDoubleRight,
@@ -148,7 +153,9 @@ import {
   doorOpen,
   download,
   envelope,
+  exclamationCircleFill,
   exclamationTriangle,
+  exclamationTriangleFill,
   eye,
   fileEarmark,
   fileEarmarkCheck,
@@ -200,6 +207,7 @@ import {
 } from 'ngx-bootstrap-icons'
 
 const icons = {
+  airplane,
   archive,
   arrowCounterclockwise,
   arrowDown,
@@ -214,12 +222,14 @@ const icons = {
   boxes,
   calendar,
   calendarEvent,
+  cardChecklist,
   caretDown,
   caretUp,
   chatLeftText,
   check,
   check2All,
   checkAll,
+  checkCircleFill,
   checkLg,
   chevronDoubleLeft,
   chevronDoubleRight,
@@ -233,7 +243,9 @@ const icons = {
   doorOpen,
   download,
   envelope,
+  exclamationCircleFill,
   exclamationTriangle,
+  exclamationTriangleFill,
   eye,
   fileEarmark,
   fileEarmarkCheck,
@@ -445,6 +457,7 @@ function initializeApp(settings: SettingsService) {
     FileComponent,
     ConfirmButtonComponent,
     MonetaryComponent,
+    SystemStatusDialogComponent,
   ],
   imports: [
     BrowserModule,
@@ -459,6 +472,7 @@ function initializeApp(settings: SettingsService) {
     TourNgBootstrapModule,
     DragDropModule,
     NgxBootstrapIconsModule.pick(icons),
+    NgxFilesizeModule,
   ],
   providers: [
     {

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

@@ -4,10 +4,31 @@
   info="Options to customize appearance, notifications, saved views and more. Settings apply to the <strong>current user only</strong>."
   i18n-info
   >
-  <button class="btn btn-sm btn-outline-primary" (click)="tourService.start()"><ng-container i18n>Start tour</ng-container></button>
+  <button class="btn btn-sm btn-outline-primary" (click)="tourService.start()">
+    <i-bs class="me-1" name="airplane"></i-bs>&nbsp;<ng-container i18n>Start tour</ng-container>
+  </button>
+  <button class="btn btn-sm btn-outline-primary position-relative ms-5" (click)="showSystemStatus()"
+    [disabled]="!systemStatus"
+    *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Admin }">
+    @if (!systemStatus) {
+      <div class="spinner-border spinner-border-sm me-1 h-75" role="status"></div>
+    } @else {
+      <i-bs class="me-2" name="card-checklist"></i-bs>
+      @if (systemStatusHasErrors) {
+        <span class="badge bg-body position-absolute top-0 start-100 translate-middle rounded-pill p-0">
+          <i-bs name="exclamation-circle-fill" class="text-danger" width="1.75em" height="1.75em"></i-bs>
+        </span>
+      } @else {
+        <span class="badge bg-body position-absolute top-0 start-100 translate-middle rounded-pill p-0">
+          <i-bs name="check-circle-fill" class="text-primary" width="1.75em" height="1.75em"></i-bs>
+        </span>
+      }
+    }
+    <ng-container i18n>System Status</ng-container>
+  </button>
   <a *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Admin }" class="btn btn-sm btn-primary ms-3" href="admin/" target="_blank">
     <ng-container i18n>Open Django Admin</ng-container>
-    <i-bs name="arrow-up-right"></i-bs>
+    &nbsp;<i-bs name="arrow-up-right"></i-bs>
   </a>
 </pngx-page-header>
 

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

@@ -9,6 +9,8 @@ import {
   NgbModule,
   NgbAlertModule,
   NgbNavLink,
+  NgbModal,
+  NgbModalModule,
 } from '@ng-bootstrap/ng-bootstrap'
 import { NgSelectModule } from '@ng-select/ng-select'
 import { of, throwError } from 'rxjs'
@@ -39,6 +41,13 @@ import { SettingsComponent } from './settings.component'
 import { IfOwnerDirective } from 'src/app/directives/if-owner.directive'
 import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
 import { ConfirmButtonComponent } from '../../common/confirm-button/confirm-button.component'
+import { SystemStatusDialogComponent } from '../../common/system-status-dialog/system-status-dialog.component'
+import { SystemStatusService } from 'src/app/services/system-status.service'
+import {
+  SystemStatus,
+  InstallType,
+  SystemStatusItemStatus,
+} from 'src/app/data/system-status'
 
 const savedViews = [
   { id: 1, name: 'view1', show_in_sidebar: true, show_on_dashboard: true },
@@ -65,6 +74,8 @@ describe('SettingsComponent', () => {
   let userService: UserService
   let permissionsService: PermissionsService
   let groupService: GroupService
+  let modalService: NgbModal
+  let systemStatusService: SystemStatusService
 
   beforeEach(async () => {
     TestBed.configureTestingModule({
@@ -96,6 +107,7 @@ describe('SettingsComponent', () => {
         NgbAlertModule,
         NgSelectModule,
         NgxBootstrapIconsModule.pick(allIcons),
+        NgbModalModule,
       ],
     }).compileComponents()
 
@@ -107,6 +119,8 @@ describe('SettingsComponent', () => {
     settingsService.currentUser = users[0]
     userService = TestBed.inject(UserService)
     permissionsService = TestBed.inject(PermissionsService)
+    modalService = TestBed.inject(NgbModal)
+    systemStatusService = TestBed.inject(SystemStatusService)
     jest.spyOn(permissionsService, 'currentUserCan').mockReturnValue(true)
     jest
       .spyOn(permissionsService, 'currentUserHasObjectPermissions')
@@ -372,4 +386,54 @@ describe('SettingsComponent', () => {
     fixture.detectChanges()
     expect(toastErrorSpy).toBeCalled()
   })
+
+  it('should load system status on initialize, show errors if needed', () => {
+    const status: SystemStatus = {
+      pngx_version: '2.4.3',
+      server_os: 'macOS-14.1.1-arm64-arm-64bit',
+      install_type: InstallType.BareMetal,
+      storage: { total: 494384795648, available: 13573525504 },
+      database: {
+        type: 'sqlite',
+        url: '/paperless-ngx/data/db.sqlite3',
+        status: SystemStatusItemStatus.ERROR,
+        error: null,
+        migration_status: {
+          latest_migration: 'socialaccount.0006_alter_socialaccount_extra_data',
+          unapplied_migrations: [],
+        },
+      },
+      tasks: {
+        redis_url: 'redis://localhost:6379',
+        redis_status: SystemStatusItemStatus.ERROR,
+        redis_error:
+          'Error 61 connecting to localhost:6379. Connection refused.',
+        celery_status: SystemStatusItemStatus.ERROR,
+        index_status: SystemStatusItemStatus.OK,
+        index_last_modified: new Date().toISOString(),
+        index_error: null,
+        classifier_status: SystemStatusItemStatus.OK,
+        classifier_last_trained: new Date().toISOString(),
+        classifier_error: null,
+      },
+    }
+    jest.spyOn(systemStatusService, 'get').mockReturnValue(of(status))
+    completeSetup()
+    expect(component['systemStatus']).toEqual(status) // private
+    expect(component.systemStatusHasErrors).toBeTruthy()
+    // coverage
+    component['systemStatus'].database.status = SystemStatusItemStatus.OK
+    component['systemStatus'].tasks.redis_status = SystemStatusItemStatus.OK
+    component['systemStatus'].tasks.celery_status = SystemStatusItemStatus.OK
+    expect(component.systemStatusHasErrors).toBeFalsy()
+  })
+
+  it('should open system status dialog', () => {
+    const modalOpenSpy = jest.spyOn(modalService, 'open')
+    completeSetup()
+    component.showSystemStatus()
+    expect(modalOpenSpy).toHaveBeenCalledWith(SystemStatusDialogComponent, {
+      size: 'xl',
+    })
+  })
 })

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

@@ -9,7 +9,11 @@ import {
 } from '@angular/core'
 import { FormGroup, FormControl } from '@angular/forms'
 import { ActivatedRoute, Router } from '@angular/router'
-import { NgbNavChangeEvent } from '@ng-bootstrap/ng-bootstrap'
+import {
+  NgbModal,
+  NgbModalRef,
+  NgbNavChangeEvent,
+} from '@ng-bootstrap/ng-bootstrap'
 import { DirtyComponent, dirtyCheck } from '@ngneat/dirty-check-forms'
 import { TourService } from 'ngx-ui-tour-ng-bootstrap'
 import {
@@ -40,6 +44,12 @@ import {
 } from 'src/app/services/settings.service'
 import { ToastService, Toast } from 'src/app/services/toast.service'
 import { ComponentWithPermissions } from '../../with-permissions/with-permissions.component'
+import { SystemStatusDialogComponent } from '../../common/system-status-dialog/system-status-dialog.component'
+import { SystemStatusService } from 'src/app/services/system-status.service'
+import {
+  SystemStatusItemStatus,
+  SystemStatus,
+} from 'src/app/data/system-status'
 
 enum SettingsNavIDs {
   General = 1,
@@ -111,6 +121,18 @@ export class SettingsComponent
   users: User[]
   groups: Group[]
 
+  private systemStatus: SystemStatus
+
+  get systemStatusHasErrors(): boolean {
+    return (
+      this.systemStatus.database.status === SystemStatusItemStatus.ERROR ||
+      this.systemStatus.tasks.redis_status === SystemStatusItemStatus.ERROR ||
+      this.systemStatus.tasks.celery_status === SystemStatusItemStatus.ERROR ||
+      this.systemStatus.tasks.index_status === SystemStatusItemStatus.ERROR ||
+      this.systemStatus.tasks.classifier_status === SystemStatusItemStatus.ERROR
+    )
+  }
+
   get computedDateLocale(): string {
     return (
       this.settingsForm.value.dateLocale ||
@@ -131,7 +153,9 @@ export class SettingsComponent
     private usersService: UserService,
     private groupsService: GroupService,
     private router: Router,
-    public permissionsService: PermissionsService
+    public permissionsService: PermissionsService,
+    private modalService: NgbModal,
+    private systemStatusService: SystemStatusService
   ) {
     super()
     this.settings.settingsSaved.subscribe(() => {
@@ -360,6 +384,17 @@ export class SettingsComponent
       // prevents loss of unsaved changes
       this.settingsForm.patchValue(currentFormValue)
     }
+
+    if (
+      this.permissionsService.currentUserCan(
+        PermissionAction.View,
+        PermissionType.Admin
+      )
+    ) {
+      this.systemStatusService.get().subscribe((status) => {
+        this.systemStatus = status
+      })
+    }
   }
 
   private emptyGroup(group: FormGroup) {
@@ -565,4 +600,14 @@ export class SettingsComponent
   clearThemeColor() {
     this.settingsForm.get('themeColor').patchValue('')
   }
+
+  showSystemStatus() {
+    const modal: NgbModalRef = this.modalService.open(
+      SystemStatusDialogComponent,
+      {
+        size: 'xl',
+      }
+    )
+    modal.componentInstance.status = this.systemStatus
+  }
 }

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

@@ -0,0 +1,154 @@
+<div class="modal-header">
+  <h5 class="modal-title" id="modal-basic-title" i18n>System Status</h5>
+  <button type="button" class="btn-close" aria-label="Close" (click)="close()"></button>
+</div>
+<div class="modal-body">
+  @if (!status) {
+    <div class="w-100 h-100 d-flex align-items-center justify-content-center">
+      <div>
+        <div class="spinner-border spinner-border-sm me-2" role="status"></div>
+        <ng-container i18n>Loading...</ng-container>
+      </div>
+    </div>
+  } @else {
+    <div class="row row-cols-1 row-cols-md-3 g-3">
+      <div class="col">
+        <div class="card bg-light h-100">
+          <div class="card-header">
+            <h5 class="card-title mb-0" i18n>Environment</h5>
+          </div>
+          <div class="card-body">
+            <dl class="card-text">
+              <dt i18n>Paperless-ngx Version</dt>
+              <dd>{{status.pngx_version}}</dd>
+              <dt i18n>Install Type</dt>
+              <dd>{{status.install_type}}</dd>
+              <dt i18n>Server OS</dt>
+              <dd>{{status.server_os}}</dd>
+              <dt i18n>Media Storage</dt>
+              <dd>
+                <ngb-progressbar style="height: 4px;" class="mt-2 mb-1" type="primary" [max]="status.storage.total" [value]="status.storage.total - status.storage.available"></ngb-progressbar>
+                <span class="small">{{status.storage.available | filesize}} <ng-container i18n>available</ng-container> ({{status.storage.total | filesize}} <ng-container i18n>total</ng-container>)</span>
+              </dd>
+            </dl>
+          </div>
+        </div>
+      </div>
+
+      <div class="col">
+        <div class="card bg-light h-100">
+          <div class="card-header">
+            <h5 class="card-title mb-0" i18n>Database</h5>
+          </div>
+          <div class="card-body">
+            <dl class="card-text">
+              <dt i18n>Type</dt>
+              <dd>{{status.database.type}}</dd>
+              <dt i18n>Status</dt>
+              <dd class="d-flex align-items-center">
+                {{status.database.status}}
+                @if (status.database.status === 'OK') {
+                  <i-bs name="check-circle-fill" class="text-primary ms-2 lh-1" ngbPopover="{{status.database.url}}" triggers="mouseenter:mouseleave"></i-bs>
+                } @else {
+                  <i-bs name="exclamation-triangle-fill" class="text-danger ms-2 lh-1" ngbPopover="{{status.database.url}}: {{status.database.error}}" triggers="mouseenter:mouseleave"></i-bs>
+                }
+              </dd>
+              <dt i18n>Migration Status</dt>
+              <dd class="d-flex align-items-center">
+                @if (status.database.migration_status.unapplied_migrations.length === 0) {
+                  <ng-container>Up to date</ng-container><i-bs name="check-circle-fill" class="text-primary ms-2 lh-1" [ngbPopover]="migrationStatus" triggers="mouseenter:mouseleave"></i-bs>
+                } @else {
+                  <ng-container>{{status.database.migration_status.unapplied_migrations.length}} Pending</ng-container><i-bs name="exclamation-triangle-fill" class="text-warning ms-2 lh-1" [ngbPopover]="migrationStatus" triggers="mouseenter:mouseleave"></i-bs>
+                }
+                <ng-template #migrationStatus>
+                  <h6><ng-container i18n>Latest Migration</ng-container>:</h6> <span class="font-monospace small">{{status.database.migration_status.latest_migration}}</span>
+                  @if (status.database.migration_status.unapplied_migrations.length > 0) {
+                    <h6 class="mt-3"><ng-container i18n>Pending Migrations</ng-container>:</h6>
+                    <ul>
+                      @for (migration of status.database.migration_status.unapplied_migrations; track migration) {
+                        <li class="font-monospace small">{{migration}}</li>
+                      }
+                    </ul>
+                  }
+                </ng-template>
+              </dd>
+            </dl>
+          </div>
+        </div>
+      </div>
+
+      <div class="col">
+        <div class="card bg-light h-100">
+          <div class="card-header">
+            <h5 class="card-title mb-0" i18n>Tasks</h5>
+          </div>
+          <div class="card-body">
+            <dl class="card-text">
+              <dt i18n>Redis Status</dt>
+              <dd class="d-flex align-items-center">
+                {{status.tasks.redis_status}}
+                @if (status.tasks.redis_status === 'OK') {
+                  <i-bs name="check-circle-fill" class="text-primary ms-2 lh-1" ngbPopover="{{status.tasks.redis_url}}" triggers="mouseenter:mouseleave"></i-bs>
+                } @else {
+                  <i-bs name="exclamation-triangle-fill" class="text-danger ms-2 lh-1" ngbPopover="{{status.tasks.redis_url}}: {{status.tasks.redis_error}}" triggers="mouseenter:mouseleave"></i-bs>
+                }
+              </dd>
+              <dt i18n>Celery Status</dt>
+              <dd class="d-flex align-items-center">
+                {{status.tasks.celery_status}}
+                @if (status.tasks.celery_status === 'OK') {
+                  <i-bs name="check-circle-fill" class="text-primary ms-2 lh-1"></i-bs>
+                } @else {
+                  <i-bs name="exclamation-triangle-fill" class="text-danger ms-2 lh-1"></i-bs>
+                }
+              </dd>
+              <dt i18n>Search Index</dt>
+              <dd class="d-flex align-items-center">
+                {{status.tasks.index_status}}
+                @if (status.tasks.index_status === 'OK') {
+                  @if (isStale(status.tasks.index_last_modified)) {
+                    <i-bs name="exclamation-triangle-fill" class="text-warning ms-2 lh-1" [ngbPopover]="indexStatus" triggers="mouseenter:mouseleave"></i-bs>
+                  } @else {
+                    <i-bs name="check-circle-fill" class="text-primary ms-2 lh-1" [ngbPopover]="indexStatus" triggers="mouseenter:mouseleave"></i-bs>
+                  }
+                } @else {
+                  <i-bs name="exclamation-triangle-fill" class="text-danger ms-2 lh-1" ngbPopover="{{status.tasks.index_error}}" triggers="mouseenter:mouseleave"></i-bs>
+                }
+              </dd>
+              <ng-template #indexStatus>
+                <h6><ng-container i18n>Last Updated</ng-container>:</h6> <span class="font-monospace small">{{status.tasks.index_last_modified | customDate:'medium'}}</span>
+              </ng-template>
+              <dt i18n>Classifier</dt>
+              <dd class="d-flex align-items-center">
+                {{status.tasks.classifier_status}}
+                @if (status.tasks.classifier_status === 'OK') {
+                  @if (isStale(status.tasks.classifier_last_trained)) {
+                    <i-bs name="exclamation-triangle-fill" class="text-warning ms-2 lh-1" [ngbPopover]="classifierStatus" triggers="mouseenter:mouseleave"></i-bs>
+                  } @else {
+                    <i-bs name="check-circle-fill" class="text-primary ms-2 lh-1" [ngbPopover]="classifierStatus" triggers="mouseenter:mouseleave"></i-bs>
+                  }
+                } @else {
+                  <i-bs name="exclamation-triangle-fill" class="text-danger ms-2 lh-1" ngbPopover="{{status.tasks.classifier_error}}" triggers="mouseenter:mouseleave"></i-bs>
+                }
+              </dd>
+              <ng-template #classifierStatus>
+                <h6><ng-container i18n>Last Trained</ng-container>:</h6> <span class="font-monospace small">{{status.tasks.classifier_last_trained | customDate:'medium'}}</span>
+              </ng-template>
+            </dl>
+          </div>
+        </div>
+      </div>
+    </div>
+  }
+</div>
+<div class="modal-footer">
+  <button class="btn btn-sm btn-outline-secondary" (click)="copy()">
+    @if (!copied) {
+      <i-bs name="clipboard-fill"></i-bs>&nbsp;
+    }
+    @if (copied) {
+      <i-bs name="clipboard-check-fill"></i-bs>&nbsp;
+    }
+    <ng-container i18n>Copy</ng-container>
+  </button>
+</div>

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

@@ -0,0 +1,103 @@
+import {
+  ComponentFixture,
+  TestBed,
+  fakeAsync,
+  tick,
+} from '@angular/core/testing'
+import {
+  NgbActiveModal,
+  NgbModalModule,
+  NgbPopoverModule,
+  NgbProgressbarModule,
+} from '@ng-bootstrap/ng-bootstrap'
+import { Clipboard, ClipboardModule } from '@angular/cdk/clipboard'
+import { SystemStatusDialogComponent } from './system-status-dialog.component'
+import {
+  SystemStatusItemStatus,
+  InstallType,
+  SystemStatus,
+} from 'src/app/data/system-status'
+import { HttpClientTestingModule } from '@angular/common/http/testing'
+import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
+import { NgxFilesizeModule } from 'ngx-filesize'
+
+const status: SystemStatus = {
+  pngx_version: '2.4.3',
+  server_os: 'macOS-14.1.1-arm64-arm-64bit',
+  install_type: InstallType.BareMetal,
+  storage: { total: 494384795648, available: 13573525504 },
+  database: {
+    type: 'sqlite',
+    url: '/paperless-ngx/data/db.sqlite3',
+    status: SystemStatusItemStatus.ERROR,
+    error: null,
+    migration_status: {
+      latest_migration: 'socialaccount.0006_alter_socialaccount_extra_data',
+      unapplied_migrations: [],
+    },
+  },
+  tasks: {
+    redis_url: 'redis://localhost:6379',
+    redis_status: SystemStatusItemStatus.ERROR,
+    redis_error: 'Error 61 connecting to localhost:6379. Connection refused.',
+    celery_status: SystemStatusItemStatus.ERROR,
+    index_status: SystemStatusItemStatus.OK,
+    index_last_modified: new Date().toISOString(),
+    index_error: null,
+    classifier_status: SystemStatusItemStatus.OK,
+    classifier_last_trained: new Date().toISOString(),
+    classifier_error: null,
+  },
+}
+
+describe('SystemStatusDialogComponent', () => {
+  let component: SystemStatusDialogComponent
+  let fixture: ComponentFixture<SystemStatusDialogComponent>
+  let clipboard: Clipboard
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [SystemStatusDialogComponent],
+      providers: [NgbActiveModal],
+      imports: [
+        NgbModalModule,
+        ClipboardModule,
+        HttpClientTestingModule,
+        NgxBootstrapIconsModule.pick(allIcons),
+        NgxFilesizeModule,
+        NgbPopoverModule,
+        NgbProgressbarModule,
+      ],
+    }).compileComponents()
+
+    fixture = TestBed.createComponent(SystemStatusDialogComponent)
+    component = fixture.componentInstance
+    component.status = status
+    clipboard = TestBed.inject(Clipboard)
+    fixture.detectChanges()
+  })
+
+  it('should close the active modal', () => {
+    const closeSpy = jest.spyOn(component.activeModal, 'close')
+    component.close()
+    expect(closeSpy).toHaveBeenCalled()
+  })
+
+  it('should copy the system status to clipboard', fakeAsync(() => {
+    jest.spyOn(clipboard, 'copy')
+    component.copy()
+    expect(clipboard.copy).toHaveBeenCalledWith(
+      JSON.stringify(component.status)
+    )
+    expect(component.copied).toBeTruthy()
+    tick(3000)
+    expect(component.copied).toBeFalsy()
+  }))
+
+  it('should calculate if date is stale', () => {
+    const date = new Date()
+    date.setHours(date.getHours() - 25)
+    expect(component.isStale(date.toISOString())).toBeTruthy()
+    expect(component.isStale(date.toISOString(), 26)).toBeFalsy()
+  })
+})

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

@@ -0,0 +1,39 @@
+import { Component, Input } from '@angular/core'
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { SystemStatus } from 'src/app/data/system-status'
+import { SystemStatusService } from 'src/app/services/system-status.service'
+import { Clipboard } from '@angular/cdk/clipboard'
+
+@Component({
+  selector: 'pngx-system-status-dialog',
+  templateUrl: './system-status-dialog.component.html',
+  styleUrl: './system-status-dialog.component.scss',
+})
+export class SystemStatusDialogComponent {
+  public status: SystemStatus
+
+  public copied: boolean = false
+
+  constructor(
+    public activeModal: NgbActiveModal,
+    private clipboard: Clipboard
+  ) {}
+
+  public close() {
+    this.activeModal.close()
+  }
+
+  public copy() {
+    this.clipboard.copy(JSON.stringify(this.status))
+    this.copied = true
+    setTimeout(() => {
+      this.copied = false
+    }, 3000)
+  }
+
+  public isStale(dateStr: string, hours: number = 24): boolean {
+    const date = new Date(dateStr)
+    const now = new Date()
+    return now.getTime() - date.getTime() > hours * 60 * 60 * 1000
+  }
+}

src-ui/src/app/data/system-status.ts

@@ -0,0 +1,41 @@
+export enum InstallType {
+  Containerized = 'containerized',
+  BareMetal = 'bare-metal',
+}
+
+export enum SystemStatusItemStatus {
+  OK = 'OK',
+  ERROR = 'ERROR',
+}
+
+export interface SystemStatus {
+  pngx_version: string
+  server_os: string
+  install_type: InstallType
+  storage: {
+    total: number
+    available: number
+  }
+  database: {
+    type: string
+    url: string
+    status: SystemStatusItemStatus
+    error?: string
+    migration_status: {
+      latest_migration: string
+      unapplied_migrations: string[]
+    }
+  }
+  tasks: {
+    redis_url: string
+    redis_status: SystemStatusItemStatus
+    redis_error: string
+    celery_status: SystemStatusItemStatus
+    index_status: SystemStatusItemStatus
+    index_last_modified: string // ISO date string
+    index_error: string
+    classifier_status: SystemStatusItemStatus
+    classifier_last_trained: string // ISO date string
+    classifier_error: string
+  }
+}

src-ui/src/app/services/system-status.service.spec.ts

@@ -0,0 +1,35 @@
+import { TestBed } from '@angular/core/testing'
+
+import { SystemStatusService } from './system-status.service'
+import {
+  HttpClientTestingModule,
+  HttpTestingController,
+} from '@angular/common/http/testing'
+import { environment } from 'src/environments/environment'
+
+describe('SystemStatusService', () => {
+  let httpTestingController: HttpTestingController
+  let service: SystemStatusService
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [SystemStatusService],
+      imports: [HttpClientTestingModule],
+    })
+
+    httpTestingController = TestBed.inject(HttpTestingController)
+    service = TestBed.inject(SystemStatusService)
+  })
+
+  afterEach(() => {
+    httpTestingController.verify()
+  })
+
+  it('calls get status endpoint', () => {
+    service.get().subscribe()
+    const req = httpTestingController.expectOne(
+      `${environment.apiBaseUrl}status/`
+    )
+    expect(req.request.method).toEqual('GET')
+  })
+})

src-ui/src/app/services/system-status.service.ts

@@ -0,0 +1,20 @@
+import { HttpClient } from '@angular/common/http'
+import { Injectable } from '@angular/core'
+import { Observable } from 'rxjs'
+import { SystemStatus } from '../data/system-status'
+import { environment } from 'src/environments/environment'
+
+@Injectable({
+  providedIn: 'root',
+})
+export class SystemStatusService {
+  private endpoint = 'status'
+
+  constructor(private http: HttpClient) {}
+
+  get(): Observable<SystemStatus> {
+    return this.http.get<SystemStatus>(
+      `${environment.apiBaseUrl}${this.endpoint}/`
+    )
+  }
+}