From 86c7bf63108be3757965e949b49b186c756eeb35 Mon Sep 17 00:00:00 2001
From: shamoon <4887959+shamoon@users.noreply.github.com>
Date: Tue, 13 Feb 2024 22:01:22 -0800
Subject: [PATCH] Add warning for stale index / classifier

---
 .../admin/settings/settings.component.spec.ts    |  4 ++--
 .../system-status-dialog.component.html          | 16 ++++++++++++----
 .../system-status-dialog.component.spec.ts       | 11 +++++++++--
 .../system-status-dialog.component.ts            |  6 ++++++
 src-ui/src/app/data/system-status.ts             |  4 ++--
 5 files changed, 31 insertions(+), 10 deletions(-)

diff --git a/src-ui/src/app/components/admin/settings/settings.component.spec.ts b/src-ui/src/app/components/admin/settings/settings.component.spec.ts
index 4c336a754..56c065bd8 100644
--- a/src-ui/src/app/components/admin/settings/settings.component.spec.ts
+++ b/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,
       },
     }
diff --git a/src-ui/src/app/components/common/system-status-dialog/system-status-dialog.component.html b/src-ui/src/app/components/common/system-status-dialog/system-status-dialog.component.html
index 8edfbc9c1..d63a1f039 100644
--- a/src-ui/src/app/components/common/system-status-dialog/system-status-dialog.component.html
+++ b/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>
diff --git a/src-ui/src/app/components/common/system-status-dialog/system-status-dialog.component.spec.ts b/src-ui/src/app/components/common/system-status-dialog/system-status-dialog.component.spec.ts
index 72dc5e7e4..8aa159edf 100644
--- a/src-ui/src/app/components/common/system-status-dialog/system-status-dialog.component.spec.ts
+++ b/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()
+  })
 })
diff --git a/src-ui/src/app/components/common/system-status-dialog/system-status-dialog.component.ts b/src-ui/src/app/components/common/system-status-dialog/system-status-dialog.component.ts
index f0d3372c6..ae391c529 100644
--- a/src-ui/src/app/components/common/system-status-dialog/system-status-dialog.component.ts
+++ b/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
+  }
 }
diff --git a/src-ui/src/app/data/system-status.ts b/src-ui/src/app/data/system-status.ts
index 6b131ce1c..fac697961 100644
--- a/src-ui/src/app/data/system-status.ts
+++ b/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
   }
 }