fix(orb-ui) On backends card, add state colors (#2529)

orb-community · Jul 26, 2023 · d4fff74 · d4fff74
1 parent c1abb8d
commit d4fff74
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 2 deletions.
diff --git a/ui/src/app/shared/components/orb/agent/agent-backends/agent-backends.component.html b/ui/src/app/shared/components/orb/agent/agent-backends/agent-backends.component.html
@@ -6,8 +6,8 @@
           tabTitle="{{backend.key}}">
           <p><label>Version:</label> {{backend.value.version}}</p>
           <ng-container *ngIf="agent?.last_hb_data?.backend_state">
-            <p><label>State</label> {{agent.last_hb_data.backend_state[backend.key].state}}</p>
-            <p><label>Last Restart</label> {{agent.last_hb_data.backend_state[backend.key].last_restart_ts | date:'full'}}</p>
+            <p><label>State:</label> <span class="orb-service-{{agent.last_hb_data.backend_state[backend.key].state}}"> {{agent.last_hb_data.backend_state[backend.key].state}} </span></p>
+            <p><label>Last Restart:</label> {{agent.last_hb_data.backend_state[backend.key].last_restart_ts | date:'full'}}</p>
             <div *ngIf="agent.last_hb_data.backend_state[backend.key].error">
               <p class="error"><label>Error:</label> {{ agent.last_hb_data.backend_state[backend.key].error }} </p>
             </div>

diff --git a/ui/src/app/shared/components/orb/agent/agent-backends/agent-backends.component.scss b/ui/src/app/shared/components/orb/agent/agent-backends/agent-backends.component.scss
@@ -64,6 +64,20 @@ nb-card {
     }
   }
 }
+.orb-service- {
+  &running {
+    color: #6fcf97;
+  }
+  &unknown {
+    color: #f2994a;
+  }
+  &backend_error, &agent_error {
+    color: #df316f;
+  }
+  &offline {
+    color: #969fb9;
+  }
+}
 
 ::ng-deep {