Add health status check (#58)

* set Health value to Status if existent

Check if Health has any value and save it to be displayed.
If Health is empty, continue as normal.

* add healthy and unhealthy status to be displayed

Check if status is either Running or Healthy to set span class to bg-primary,
and check if status is Unhealthy to set span class to bg-danger.

* Add lint to workflow

* Fix lint

---------

Co-authored-by: Thales <[email protected]>
Co-authored-by: Louis Lam <[email protected]>

Author: 3 people

.github/workflows/ci.yml

@@ -48,5 +48,7 @@ jobs:
       - name: Install dependencies
         run: pnpm install
 
+      - name: Lint
+        run: pnpm run lint
       # more things can be add later like tests etc..
-      
+

backend/stack.ts

@@ -351,7 +351,11 @@ export class Stack {
         for (let line of lines) {
             try {
                 let obj = JSON.parse(line);
-                statusList.set(obj.Service, obj.State);
+                if (obj.Health === "") {
+                    statusList.set(obj.Service, obj.State);
+                } else {
+                    statusList.set(obj.Service, obj.Health);
+                }
             } catch (e) {
             }
         }

frontend/src/components/Container.vue

@@ -179,8 +179,10 @@ export default defineComponent({
         },
 
         bgStyle() {
-            if (this.status === "running") {
+            if (this.status === "running" || this.status === "healthy") {
                 return "bg-primary";
+            } else if (this.status === "unhealthy") {
+                return "bg-danger";
             } else {
                 return "bg-secondary";
             }