Add warning for stale index / classifier

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

@@ -410,10 +410,10 @@ describe('SettingsComponent', () => {
           'Error 61 connecting to localhost:6379. Connection refused.',
         celery_status: SystemStatusItemStatus.ERROR,
         index_status: SystemStatusItemStatus.OK,
-        index_last_modified: new Date(),
+        index_last_modified: new Date().toISOString(),
         index_error: null,
         classifier_status: SystemStatusItemStatus.OK,
-        classifier_last_modified: new Date(),
+        classifier_last_modified: new Date().toISOString(),
         classifier_error: null,
       },
     }

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

@@ -106,25 +106,33 @@
               <dd>
                 {{status.tasks.index_status}}
                 @if (status.tasks.index_status === 'OK') {
-                  <i-bs name="check-circle-fill" class="text-success ms-1" [ngbPopover]="indexStatus" triggers="mouseenter:mouseleave"></i-bs>
+                  @if (isStale(status.tasks.index_last_modified)) {
+                    <i-bs name="exclamation-triangle-fill" class="text-warning ms-1" [ngbPopover]="indexStatus" triggers="mouseenter:mouseleave"></i-bs>
+                  } @else {
+                    <i-bs name="check-circle-fill" class="text-success ms-1" [ngbPopover]="indexStatus" triggers="mouseenter:mouseleave"></i-bs>
+                  }
                 } @else {
                   <i-bs name="exclamation-triangle-fill" class="text-danger ms-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}}</span>
+                <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 Status</dt>
               <dd>
                 {{status.tasks.classifier_status}}
                 @if (status.tasks.classifier_status === 'OK') {
-                  <i-bs name="check-circle-fill" class="text-success ms-1" [ngbPopover]="classifierStatus" triggers="mouseenter:mouseleave"></i-bs>
+                  @if (isStale(status.tasks.classifier_last_modified)) {
+                    <i-bs name="exclamation-triangle-fill" class="text-warning ms-1" [ngbPopover]="classifierStatus" triggers="mouseenter:mouseleave"></i-bs>
+                  } @else {
+                    <i-bs name="check-circle-fill" class="text-success ms-1" [ngbPopover]="classifierStatus" triggers="mouseenter:mouseleave"></i-bs>
+                  }
                 } @else {
                   <i-bs name="exclamation-triangle-fill" class="text-danger ms-1" ngbPopover="{{status.tasks.classifier_error}}" triggers="mouseenter:mouseleave"></i-bs>
                 }
               </dd>
               <ng-template #classifierStatus>
-                <h6><ng-container i18n>Last Updated</ng-container>:</h6> <span class="font-monospace small">{{status.tasks.classifier_last_modified}}</span>
+                <h6><ng-container i18n>Last Updated</ng-container>:</h6> <span class="font-monospace small">{{status.tasks.classifier_last_modified | customDate:'medium'}}</span>
               </ng-template>
             </dl>
           </div>

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

@@ -42,10 +42,10 @@ const status: SystemStatus = {
     redis_error: 'Error 61 connecting to localhost:6379. Connection refused.',
     celery_status: SystemStatusItemStatus.ERROR,
     index_status: SystemStatusItemStatus.OK,
-    index_last_modified: new Date(),
+    index_last_modified: new Date().toISOString(),
     index_error: null,
     classifier_status: SystemStatusItemStatus.OK,
-    classifier_last_modified: new Date(),
+    classifier_last_modified: new Date().toISOString(),
     classifier_error: null,
   },
 }
@@ -93,4 +93,11 @@ describe('SystemStatusDialogComponent', () => {
     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

@@ -30,4 +30,10 @@ export class SystemStatusDialogComponent {
       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

@@ -32,10 +32,10 @@ export interface SystemStatus {
     redis_error: string
     celery_status: SystemStatusItemStatus
     index_status: SystemStatusItemStatus
-    index_last_modified: Date
+    index_last_modified: string // ISO date string
     index_error: string
     classifier_status: SystemStatusItemStatus
-    classifier_last_modified: Date
+    classifier_last_modified: string // ISO date string
     classifier_error: string
   }
 }