From 0add5aab0ecb69911a9312f6b1691e37163d9378 Mon Sep 17 00:00:00 2001
From: shamoon <4887959+shamoon@users.noreply.github.com>
Date: Fri, 14 Feb 2025 09:39:37 -0800
Subject: [PATCH] Styling, celery url

---
 src-ui/messages.xlf                           |  42 ++--
 .../admin/settings/settings.component.spec.ts |   2 +
 .../system-status-dialog.component.html       | 195 +++++++++++-------
 .../system-status-dialog.component.scss       |   3 +
 .../system-status-dialog.component.spec.ts    |   2 +
 src-ui/src/app/data/system-status.ts          |   2 +
 src-ui/src/theme.scss                         |  22 +-
 src/documents/views.py                        |  13 +-
 8 files changed, 179 insertions(+), 102 deletions(-)

diff --git a/src-ui/messages.xlf b/src-ui/messages.xlf
index 6b2b8ec34..29b0236f0 100644
--- a/src-ui/messages.xlf
+++ b/src-ui/messages.xlf
@@ -4099,6 +4099,18 @@
           <context context-type="sourcefile">src/app/components/common/edit-dialog/workflow-edit-dialog/workflow-edit-dialog.component.html</context>
           <context context-type="linenumber">111</context>
         </context-group>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/app/components/common/system-status-dialog/system-status-dialog.component.html</context>
+          <context context-type="linenumber">165</context>
+        </context-group>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/app/components/common/system-status-dialog/system-status-dialog.component.html</context>
+          <context context-type="linenumber">189</context>
+        </context-group>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/app/components/common/system-status-dialog/system-status-dialog.component.html</context>
+          <context context-type="linenumber">213</context>
+        </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/common/toast/toast.component.html</context>
           <context context-type="linenumber">30</context>
@@ -5548,7 +5560,7 @@
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/common/system-status-dialog/system-status-dialog.component.html</context>
-          <context context-type="linenumber">188</context>
+          <context context-type="linenumber">231</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/manage/mail/mail.component.html</context>
@@ -5943,98 +5955,98 @@
         <source>Migration Status</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/common/system-status-dialog/system-status-dialog.component.html</context>
-          <context context-type="linenumber">56</context>
+          <context context-type="linenumber">65</context>
         </context-group>
       </trans-unit>
       <trans-unit id="7489316373554112115" datatype="html">
         <source>Up to date</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/common/system-status-dialog/system-status-dialog.component.html</context>
-          <context context-type="linenumber">59</context>
+          <context context-type="linenumber">69</context>
         </context-group>
       </trans-unit>
       <trans-unit id="7881311375431899727" datatype="html">
         <source>Latest Migration</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/common/system-status-dialog/system-status-dialog.component.html</context>
-          <context context-type="linenumber">64</context>
+          <context context-type="linenumber">74</context>
         </context-group>
       </trans-unit>
       <trans-unit id="4632965004151576238" datatype="html">
         <source>Pending Migrations</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/common/system-status-dialog/system-status-dialog.component.html</context>
-          <context context-type="linenumber">66</context>
+          <context context-type="linenumber">76</context>
         </context-group>
       </trans-unit>
       <trans-unit id="2790343143501919450" datatype="html">
         <source>Tasks Queue</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/common/system-status-dialog/system-status-dialog.component.html</context>
-          <context context-type="linenumber">83</context>
+          <context context-type="linenumber">94</context>
         </context-group>
       </trans-unit>
       <trans-unit id="6911698235105017958" datatype="html">
         <source>Redis Status</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/common/system-status-dialog/system-status-dialog.component.html</context>
-          <context context-type="linenumber">87</context>
+          <context context-type="linenumber">98</context>
         </context-group>
       </trans-unit>
       <trans-unit id="5349496739889768589" datatype="html">
         <source>Celery Status</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/common/system-status-dialog/system-status-dialog.component.html</context>
-          <context context-type="linenumber">96</context>
+          <context context-type="linenumber">116</context>
         </context-group>
       </trans-unit>
       <trans-unit id="2041675390931385838" datatype="html">
         <source>Health</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/common/system-status-dialog/system-status-dialog.component.html</context>
-          <context context-type="linenumber">113</context>
+          <context context-type="linenumber">142</context>
         </context-group>
       </trans-unit>
       <trans-unit id="31377277941774469" datatype="html">
         <source>Search Index</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/common/system-status-dialog/system-status-dialog.component.html</context>
-          <context context-type="linenumber">117</context>
+          <context context-type="linenumber">146</context>
         </context-group>
       </trans-unit>
       <trans-unit id="4089509911694721896" datatype="html">
         <source>Last Updated</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/common/system-status-dialog/system-status-dialog.component.html</context>
-          <context context-type="linenumber">131</context>
+          <context context-type="linenumber">163</context>
         </context-group>
       </trans-unit>
       <trans-unit id="46628344485199198" datatype="html">
         <source>Classifier</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/common/system-status-dialog/system-status-dialog.component.html</context>
-          <context context-type="linenumber">133</context>
+          <context context-type="linenumber">168</context>
         </context-group>
       </trans-unit>
       <trans-unit id="6096684179126491743" datatype="html">
         <source>Last Trained</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/common/system-status-dialog/system-status-dialog.component.html</context>
-          <context context-type="linenumber">151</context>
+          <context context-type="linenumber">187</context>
         </context-group>
       </trans-unit>
       <trans-unit id="6427836860962380759" datatype="html">
         <source>Sanity Checker</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/common/system-status-dialog/system-status-dialog.component.html</context>
-          <context context-type="linenumber">153</context>
+          <context context-type="linenumber">192</context>
         </context-group>
       </trans-unit>
       <trans-unit id="6578747070254776938" datatype="html">
         <source>Last Run</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/common/system-status-dialog/system-status-dialog.component.html</context>
-          <context context-type="linenumber">171</context>
+          <context context-type="linenumber">211</context>
         </context-group>
       </trans-unit>
       <trans-unit id="6732151329960766506" datatype="html">
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 3ab7f250b..7d43d08f9 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
@@ -303,6 +303,8 @@ describe('SettingsComponent', () => {
         redis_error:
           'Error 61 connecting to localhost:6379. Connection refused.',
         celery_status: SystemStatusItemStatus.ERROR,
+        celery_url: 'celery@localhost',
+        celery_error: 'Error connecting to celery@localhost',
         index_status: SystemStatusItemStatus.OK,
         index_last_modified: new Date().toISOString(),
         index_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 c7e3e729c..c87f80f43 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
@@ -45,33 +45,44 @@
               <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 i18n>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>
+              <dd>
+                <div class="badge text-uppercase bg-info text-dark" [ngbPopover]="databaseStatus" triggers="mouseenter:mouseleave">
+                  {{status.database.status}}
+                  @if (status.database.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>
+                  }
+                </div>
+                <ng-template #databaseStatus>
+                  @if (status.database.status === 'OK') {
+                    {{status.database.url}}
+                  } @else {
+                    {{status.database.url}}: {{status.database.error}}
                   }
                 </ng-template>
               </dd>
+              <dt i18n>Migration Status</dt>
+              <dd>
+                <div class="badge text-uppercase bg-info text-dark" [ngbPopover]="migrationStatus" triggers="mouseenter:mouseleave">
+                  @if (status.database.migration_status.unapplied_migrations.length === 0) {
+                    <ng-container i18n>Up to date</ng-container><i-bs name="check-circle-fill" class="text-primary ms-2 lh-1"></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"></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>
+                </div>
+              </dd>
             </dl>
           </div>
         </div>
@@ -85,22 +96,40 @@
           <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>
+                <div class="badge text-uppercase bg-info text-dark" [ngbPopover]="redisStatus" triggers="mouseenter:mouseleave">
+                  {{status.tasks.redis_status}}
+                  @if (status.tasks.redis_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>
+                  }
+                </div>
+                <ng-template #redisStatus>
+                  @if (status.tasks.redis_status === 'OK') {
+                    {{status.tasks.redis_url}}
+                  } @else {
+                    {{status.tasks.redis_url}}: {{status.tasks.redis_error}}
+                  }
+                </ng-template>
               </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>
+                <div class="badge text-uppercase bg-info text-dark" [ngbPopover]="celeryStatus" triggers="mouseenter:mouseleave">
+                  {{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>
+                  }
+                </div>
+                <ng-template #celeryStatus>
+                  @if (status.tasks.celery_status === 'OK') {
+                    {{status.tasks.celery_url}}
+                  } @else {
+                    {{status.tasks.celery_error}}
+                  }
+                </ng-template>
               </dd>
             </dl>
           </div>
@@ -115,60 +144,74 @@
           <div class="card-body">
             <dl class="card-text">
               <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>
+              <dd>
+                <div class="badge text-uppercase bg-info text-dark" [ngbPopover]="indexStatus" triggers="mouseenter:mouseleave">
+                  {{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"></i-bs>
+                    } @else {
+                      <i-bs name="check-circle-fill" class="text-primary ms-2 lh-1"></i-bs>
+                    }
                   } @else {
-                    <i-bs name="check-circle-fill" class="text-primary ms-2 lh-1" [ngbPopover]="indexStatus" triggers="mouseenter:mouseleave"></i-bs>
+                    <i-bs name="exclamation-triangle-fill" class="text-danger ms-2 lh-1"></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>
-                }
+                </div>
               </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>
+                @if (status.tasks.index_status === 'OK') {
+                  <h6><ng-container i18n>Last Updated</ng-container>:</h6> <span class="font-monospace small">{{status.tasks.index_last_modified | customDate:'medium'}}</span>
+                } @else {
+                  <h6><ng-container i18n>Error</ng-container>:</h6> <span class="font-monospace small">{{status.tasks.index_error}}</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>
+              <dd>
+                <div class="badge text-uppercase bg-info text-dark" [ngbPopover]="classifierStatus" triggers="mouseenter:mouseleave">
+                  {{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"></i-bs>
+                    } @else {
+                      <i-bs name="check-circle-fill" class="text-primary ms-2 lh-1"></i-bs>
+                    }
                   } @else {
-                    <i-bs name="check-circle-fill" class="text-primary ms-2 lh-1" [ngbPopover]="classifierStatus" triggers="mouseenter:mouseleave"></i-bs>
+                    <i-bs name="exclamation-triangle-fill" class="ms-2 lh-1"
+                    [class.text-danger]="status.tasks.classifier_status === SystemStatusItemStatus.ERROR"
+                    [class.text-warning]="status.tasks.classifier_status === SystemStatusItemStatus.WARNING"></i-bs>
                   }
-                } @else {
-                  <i-bs name="exclamation-triangle-fill" class="ms-2 lh-1"
-                  [class.text-danger]="status.tasks.classifier_status === SystemStatusItemStatus.ERROR"
-                  [class.text-warning]="status.tasks.classifier_status === SystemStatusItemStatus.WARNING"
-                  ngbPopover="{{status.tasks.classifier_error}}"
-                  triggers="mouseenter:mouseleave"></i-bs>
-                }
+                </div>
               </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>
+                @if (status.tasks.classifier_status === 'OK') {
+                  <h6><ng-container i18n>Last Trained</ng-container>:</h6> <span class="font-monospace small">{{status.tasks.classifier_last_trained | customDate:'medium'}}</span>
+                } @else {
+                  <h6><ng-container i18n>Error</ng-container>:</h6> <span class="font-monospace small">{{status.tasks.classifier_error}}</span>
+                }
               </ng-template>
               <dt i18n>Sanity Checker</dt>
-              <dd class="d-flex align-items-center">
-                {{status.tasks.sanity_check_status}}
-                @if (status.tasks.sanity_check_status === 'OK') {
-                  @if (isStale(status.tasks.sanity_check_last_run)) {
-                    <i-bs name="exclamation-triangle-fill" class="text-warning ms-2 lh-1" [ngbPopover]="sanityCheckerStatus" triggers="mouseenter:mouseleave"></i-bs>
+              <dd>
+                <div class="badge text-uppercase bg-info text-dark" [ngbPopover]="sanityCheckerStatus" triggers="mouseenter:mouseleave">
+                  {{status.tasks.sanity_check_status}}
+                  @if (status.tasks.sanity_check_status === 'OK') {
+                    @if (isStale(status.tasks.sanity_check_last_run)) {
+                      <i-bs name="exclamation-triangle-fill" class="text-warning ms-2 lh-1"></i-bs>
+                    } @else {
+                      <i-bs name="check-circle-fill" class="text-primary ms-2 lh-1"></i-bs>
+                    }
                   } @else {
-                    <i-bs name="check-circle-fill" class="text-primary ms-2 lh-1" [ngbPopover]="sanityCheckerStatus" triggers="mouseenter:mouseleave"></i-bs>
+                    <i-bs name="exclamation-triangle-fill" class="ms-2 lh-1"
+                    [class.text-danger]="status.tasks.sanity_check_status === SystemStatusItemStatus.ERROR"
+                    [class.text-warning]="status.tasks.sanity_check_status === SystemStatusItemStatus.WARNING"></i-bs>
                   }
-                } @else {
-                  <i-bs name="exclamation-triangle-fill" class="ms-2 lh-1"
-                  [class.text-danger]="status.tasks.sanity_check_status === SystemStatusItemStatus.ERROR"
-                  [class.text-warning]="status.tasks.sanity_check_status === SystemStatusItemStatus.WARNING"
-                  ngbPopover="{{status.tasks.sanity_check_error}}"
-                  triggers="mouseenter:mouseleave"></i-bs>
-                }
+                </div>
               </dd>
               <ng-template #sanityCheckerStatus>
-                <h6><ng-container i18n>Last Run</ng-container>:</h6> <span class="font-monospace small">{{status.tasks.sanity_check_last_run | customDate:'medium'}}</span>
+                @if (status.tasks.sanity_check_status === 'OK') {
+                  <h6><ng-container i18n>Last Run</ng-container>:</h6> <span class="font-monospace small">{{status.tasks.sanity_check_last_run | customDate:'medium'}}</span>
+                } @else {
+                  <h6><ng-container i18n>Error</ng-container>:</h6> <span class="font-monospace small">{{status.tasks.sanity_check_error}}</span>
+                }
               </ng-template>
             </dl>
           </div>
diff --git a/src-ui/src/app/components/common/system-status-dialog/system-status-dialog.component.scss b/src-ui/src/app/components/common/system-status-dialog/system-status-dialog.component.scss
index e69de29bb..bce9204a5 100644
--- a/src-ui/src/app/components/common/system-status-dialog/system-status-dialog.component.scss
+++ b/src-ui/src/app/components/common/system-status-dialog/system-status-dialog.component.scss
@@ -0,0 +1,3 @@
+.border-primary {
+  --bs-border-color: var(--bs-primary);
+}
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 af76a53f5..0dd08c732 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
@@ -36,6 +36,8 @@ const status: SystemStatus = {
     redis_status: SystemStatusItemStatus.ERROR,
     redis_error: 'Error 61 connecting to localhost:6379. Connection refused.',
     celery_status: SystemStatusItemStatus.ERROR,
+    celery_url: 'celery@localhost',
+    celery_error: 'Error connecting to celery@localhost',
     index_status: SystemStatusItemStatus.OK,
     index_last_modified: new Date().toISOString(),
     index_error: null,
diff --git a/src-ui/src/app/data/system-status.ts b/src-ui/src/app/data/system-status.ts
index 146208bad..698382154 100644
--- a/src-ui/src/app/data/system-status.ts
+++ b/src-ui/src/app/data/system-status.ts
@@ -32,6 +32,8 @@ export interface SystemStatus {
     redis_status: SystemStatusItemStatus
     redis_error: string
     celery_status: SystemStatusItemStatus
+    celery_url: string
+    celery_error: string
     index_status: SystemStatusItemStatus
     index_last_modified: string // ISO date string
     index_error: string
diff --git a/src-ui/src/theme.scss b/src-ui/src/theme.scss
index fc8c13d3b..cfceb5602 100644
--- a/src-ui/src/theme.scss
+++ b/src-ui/src/theme.scss
@@ -21,10 +21,12 @@
   --pngx-success-darken-10: hsl(152, 69%, 11%); // based on success #198754
   --pngx-bg-alt: #fff;
   --pngx-bg-darker: var(--bs-gray-100);
-  --pngx-bg-alt2: var(--bs-gray-200);
+  --pngx-bg-alt2: var(--bs-gray-200); // #e9ecef
   --pngx-bg-disabled: #f7f7f7;
   --pngx-focus-alpha: 0.3;
   --pngx-toast-max-width: 360px;
+  --bs-info: var(--pngx-bg-alt2);
+  --bs-info-rgb: 233, 236, 239;
   @media screen and (min-width: 1024px) {
     --pngx-toast-max-width: 450px;
   }
@@ -71,8 +73,15 @@ $form-check-radio-checked-bg-image-dark: url("data:image/svg+xml,<svg xmlns='htt
 }
 
 @mixin dark-mode {
-  --bs-body-color: #{$text-color-dark-bg};
   --pngx-body-color-accent: #{$text-color-dark-bg-accent};
+  --pngx-bg-alt: #242529;
+  --pngx-bg-alt2: #232323;
+  --pngx-bg-darker: #101216;
+  --pngx-bg-disabled: var(--pngx-bg-alt);
+  --pngx-focus-alpha: 0.6;
+  --pngx-primary-faded: var(--pngx-primary-darken-15);
+  --pngx-primary-text-contrast: var(--bs-body-color);
+  --bs-body-color: #{$text-color-dark-bg};
   --bs-secondary-color: #6c757d;
   --bs-danger: #b71631;
   --bs-danger-rgb: 183, 22, 49;
@@ -80,15 +89,10 @@ $form-check-radio-checked-bg-image-dark: url("data:image/svg+xml,<svg xmlns='htt
   --bs-body-bg-rgb: 22, 22, 24;
   --bs-light: #1c1c1f;
   --bs-light-rgb: 28, 28, 31;
+  --bs-info: var(--pngx-bg-alt);
+  --bs-info-rgb: 36, 36, 39;
   --bs-border-color: #47494f;
-  --pngx-bg-alt2: #232323;
-  --pngx-bg-darker: #101216;
   --bs-tertiary-bg: var(--pngx-bg-darker);
-  --pngx-bg-alt: #242529;
-  --pngx-bg-disabled: var(--pngx-bg-alt);
-  --pngx-focus-alpha: 0.6;
-  --pngx-primary-faded: var(--pngx-primary-darken-15);
-  --pngx-primary-text-contrast: var(--bs-body-color);
   --bs-dark-border-subtle: var(--pngx-bg-darker);
   --bs-border-color-translucent: rgba(0, 0, 0, .175); // override bs
 
diff --git a/src/documents/views.py b/src/documents/views.py
index 67041a4ac..fe3ac837f 100644
--- a/src/documents/views.py
+++ b/src/documents/views.py
@@ -2636,13 +2636,20 @@ class SystemStatusView(PassUserMixin):
                 )
                 redis_error = "Error connecting to redis, check logs for more detail."
 
+        celery_error = None
+        celery_url = None
         try:
             celery_ping = celery_app.control.inspect().ping()
-            first_worker_ping = celery_ping[next(iter(celery_ping.keys()))]
+            celery_url = next(iter(celery_ping.keys()))
+            first_worker_ping = celery_ping[celery_url]
             if first_worker_ping["ok"] == "pong":
                 celery_active = "OK"
-        except Exception:
+        except Exception as e:
             celery_active = "ERROR"
+            logger.exception(
+                f"System status detected a possible problem while connecting to celery: {e}",
+            )
+            celery_error = "Error connecting to celery, check logs for more detail."
 
         index_error = None
         try:
@@ -2723,6 +2730,8 @@ class SystemStatusView(PassUserMixin):
                     "redis_status": redis_status,
                     "redis_error": redis_error,
                     "celery_status": celery_active,
+                    "celery_url": celery_url,
+                    "celery_error": celery_error,
                     "index_status": index_status,
                     "index_last_modified": index_last_modified,
                     "index_error": index_error,