From 9ba1a0f76a123235a6f483b4eac33f09b777a521 Mon Sep 17 00:00:00 2001
From: Amir Raminfar <findamir@gmail.com>
Date: Wed, 29 Mar 2023 08:58:12 -0700
Subject: [PATCH] Adds health status by parsing the label from status (#2099)

* Adds healthcheck to status in menu

* Fixes bug with crated

* Moves colors to vars

* Updates icons
---
 assets/components.d.ts                   |  4 ++
 assets/components/LogViewer/LogLevel.vue |  8 ++--
 assets/components/SideMenu.vue           | 52 ++++++++++++++++--------
 assets/models/Container.ts               |  7 ++--
 assets/pages/index.vue                   |  6 ++-
 assets/stores/container.ts               | 13 +++++-
 assets/styles.scss                       |  7 ++++
 assets/types/Container.d.ts              |  2 +
 docker/client.go                         | 11 +++++
 docker/types.go                          |  1 +
 web/events.go                            | 18 ++++++++
 11 files changed, 101 insertions(+), 28 deletions(-)

diff --git a/assets/components.d.ts b/assets/components.d.ts
index 82c7362d..1ed115b9 100644
--- a/assets/components.d.ts
+++ b/assets/components.d.ts
@@ -10,6 +10,10 @@ export {}
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
     CarbonCaretDown: typeof import('~icons/carbon/caret-down')['default']
+    'Cil:checkAlt': typeof import('~icons/cil/check-alt')['default']
+    'Cil:checkCircle': typeof import('~icons/cil/check-circle')['default']
+    'Cil:columns': typeof import('~icons/cil/columns')['default']
+    CilCheckAlt: typeof import('~icons/cil/check-alt')['default']
     CilColumns: typeof import('~icons/cil/columns')['default']
     CilFindInPage: typeof import('~icons/cil/find-in-page')['default']
     ComplexLogItem: typeof import('./components/LogViewer/ComplexLogItem.vue')['default']
diff --git a/assets/components/LogViewer/LogLevel.vue b/assets/components/LogViewer/LogLevel.vue
index f15d9f81..f96ebc3b 100644
--- a/assets/components/LogViewer/LogLevel.vue
+++ b/assets/components/LogViewer/LogLevel.vue
@@ -43,20 +43,20 @@ div {
 
   &.debug,
   &.trace {
-    background-color: #9c27b0;
+    background-color: var(--purple-color);
   }
 
   &.info {
-    background-color: #00b5ad;
+    background-color: var(--green-color);
   }
 
   &.error,
   &.fatal {
-    background-color: #f44336;
+    background-color: var(--red-color);
   }
 
   &.warn {
-    background-color: #ff9800;
+    background-color: var(--orange-color);
   }
 }
 </style>
diff --git a/assets/components/SideMenu.vue b/assets/components/SideMenu.vue
index b923f5a2..f068ff6f 100644
--- a/assets/components/SideMenu.vue
+++ b/assets/components/SideMenu.vue
@@ -66,14 +66,18 @@
             <div class="is-flex-grow-1 is-ellipsis">
               {{ item.name }}
             </div>
-            <div class="is-flex-shrink-1 column-icon">
+            <div class="is-flex-shrink-1 is-flex icons">
               <span
-                class="icon is-small"
+                class="icon is-small pin"
                 @click.stop.prevent="store.appendActiveContainer(item)"
                 v-show="!activeContainersById[item.id]"
                 :title="$t('tooltip.pin-column')"
               >
-                <cil-columns />
+                <cil:columns />
+              </span>
+
+              <span class="icon is-small health" :health="item.health" v-if="item.health">
+                <cil:check-circle />
               </span>
             </div>
           </div>
@@ -115,6 +119,12 @@ aside {
   }
 }
 
+.logo {
+  width: 122px;
+  height: 54px;
+  fill: var(--logo-color);
+}
+
 .loading {
   opacity: 0.5;
 }
@@ -123,27 +133,33 @@ li.exited a {
   color: #777;
 }
 
-.logo {
-  width: 122px;
-  height: 54px;
-  fill: var(--logo-color);
-}
-
-.menu-list li {
-  .column-icon {
-    visibility: hidden;
-
-    & > span {
-      vertical-align: middle;
-    }
+.health {
+  &[health="unhealthy"] {
+    color: var(--red-color);
   }
 
-  &:hover .column-icon {
-    visibility: visible;
+  &[health="healthy"] {
+    color: var(--green-color);
+  }
+}
+
+a {
+  .pin {
+    display: none;
 
     &:hover {
       color: var(--secondary-color);
     }
   }
+
+  &:hover {
+    .pin {
+      display: block;
+    }
+
+    .health {
+      display: none;
+    }
+  }
 }
 </style>
diff --git a/assets/models/Container.ts b/assets/models/Container.ts
index 0007b65a..865400f3 100644
--- a/assets/models/Container.ts
+++ b/assets/models/Container.ts
@@ -1,4 +1,4 @@
-import type { ContainerStat, ContainerState } from "@/types/Container";
+import type { ContainerHealth, ContainerStat, ContainerState } from "@/types/Container";
 import type { UseThrottledRefHistoryReturn } from "@vueuse/core";
 import { Ref } from "vue";
 
@@ -10,12 +10,13 @@ export class Container {
 
   constructor(
     public readonly id: string,
-    public readonly created: number,
+    public readonly created: Date,
     public readonly image: string,
     public readonly name: string,
     public readonly command: string,
     public status: string,
-    public state: ContainerState
+    public state: ContainerState,
+    public health?: ContainerHealth
   ) {
     this.stat = ref({ cpu: 0, memory: 0, memoryUsage: 0 });
     this.throttledStatHistory = useThrottledRefHistory(this.stat, { capacity: 300, deep: true, throttle: 1000 });
diff --git a/assets/pages/index.vue b/assets/pages/index.vue
index a22f7798..f0480a41 100644
--- a/assets/pages/index.vue
+++ b/assets/pages/index.vue
@@ -65,7 +65,7 @@
             <span class="name">{{ item.name }}</span>
 
             <div class="subtitle is-7 status">
-              <past-time :date="new Date(item.created * 1000)"></past-time>
+              <past-time :date="item.created"></past-time>
             </div>
           </router-link>
         </div>
@@ -147,17 +147,21 @@ function onEnter() {
 <style lang="scss" scoped>
 .panel {
   border: 1px solid var(--border-color);
+
   .panel-block,
   .panel-tabs {
     border-color: var(--border-color);
+
     .is-active {
       border-color: var(--border-hover-color);
     }
+
     .name {
       text-overflow: ellipsis;
       white-space: nowrap;
       overflow: hidden;
     }
+
     .status {
       margin-left: auto;
       white-space: nowrap;
diff --git a/assets/stores/container.ts b/assets/stores/container.ts
index 8d60f872..7195edbe 100644
--- a/assets/stores/container.ts
+++ b/assets/stores/container.ts
@@ -1,6 +1,6 @@
 import { acceptHMRUpdate, defineStore } from "pinia";
 import { Ref, UnwrapNestedRefs } from "vue";
-import type { ContainerJson, ContainerStat } from "@/types/Container";
+import type { ContainerHealth, ContainerJson, ContainerStat } from "@/types/Container";
 import { Container } from "@/models/Container";
 
 export const useContainerStore = defineStore("container", () => {
@@ -55,6 +55,14 @@ export const useContainerStore = defineStore("container", () => {
       }
     });
 
+    es.addEventListener("container-health", (e) => {
+      const event = JSON.parse((e as MessageEvent).data) as { actorId: string; health: ContainerHealth };
+      const container = allContainersById.value[event.actorId];
+      if (container) {
+        container.health = event.health;
+      }
+    });
+
     watchOnce(containers, () => (ready.value = true));
   }
 
@@ -64,9 +72,10 @@ export const useContainerStore = defineStore("container", () => {
       if (existing) {
         existing.status = c.status;
         existing.state = c.state;
+        existing.health = c.health;
         return existing;
       }
-      return new Container(c.id, c.created, c.image, c.name, c.command, c.status, c.state);
+      return new Container(c.id, new Date(c.created * 1000), c.image, c.name, c.command, c.status, c.state, c.health);
     });
   };
 
diff --git a/assets/styles.scss b/assets/styles.scss
index c69430fe..4770d055 100644
--- a/assets/styles.scss
+++ b/assets/styles.scss
@@ -97,6 +97,13 @@ $light-toolbar-color: rgba($grey-darker, 0.7);
   --text-light-color: #{$grey};
 }
 
+:root {
+  --green-color: #00b5ad;
+  --red-color: #f44336;
+  --purple-color: #9c27b0;
+  --orange-color: #ff9800;
+}
+
 [data-theme="dark"] {
   @include dark;
 }
diff --git a/assets/types/Container.d.ts b/assets/types/Container.d.ts
index 40f7df7e..cca3836b 100644
--- a/assets/types/Container.d.ts
+++ b/assets/types/Container.d.ts
@@ -13,6 +13,8 @@ export type ContainerJson = {
   readonly command: string;
   readonly status: string;
   readonly state: ContainerState;
+  readonly health?: ContainerHealth;
 };
 
 export type ContainerState = "created" | "running" | "exited" | "dead" | "paused" | "restarting";
+export type ContainerHealth = "healthy" | "unhealthy" | "starting";
diff --git a/docker/client.go b/docker/client.go
index 80445dce..e8817f4c 100644
--- a/docker/client.go
+++ b/docker/client.go
@@ -8,6 +8,7 @@ import (
 	"net/url"
 	"os"
 	"path/filepath"
+	"regexp"
 	"sort"
 	"strconv"
 	"strings"
@@ -162,6 +163,7 @@ func (d *dockerClient) ListContainers() ([]Container, error) {
 			Created: c.Created,
 			State:   c.State,
 			Status:  c.Status,
+			Health:  findBetweenParentheses(c.Status),
 		}
 		containers = append(containers, container)
 	}
@@ -316,3 +318,12 @@ func (d *dockerClient) ContainerLogsBetweenDates(ctx context.Context, id string,
 func (d *dockerClient) Ping(ctx context.Context) (types.Ping, error) {
 	return d.cli.Ping(ctx)
 }
+
+var PARENTHESIS_RE = regexp.MustCompile(`\(([^)]+)\)`)
+
+func findBetweenParentheses(s string) string {
+	if results := PARENTHESIS_RE.FindStringSubmatch(s); results != nil {
+		return results[1]
+	}
+	return ""
+}
diff --git a/docker/types.go b/docker/types.go
index 09ac77d9..e0308f65 100644
--- a/docker/types.go
+++ b/docker/types.go
@@ -13,6 +13,7 @@ type Container struct {
 	Created int64    `json:"created"`
 	State   string   `json:"state"`
 	Status  string   `json:"status"`
+	Health  string   `json:"health,omitempty"`
 }
 
 // ContainerStat represent stats instant for a container
diff --git a/web/events.go b/web/events.go
index ae2813e4..7574ed1b 100644
--- a/web/events.go
+++ b/web/events.go
@@ -82,7 +82,25 @@ func (h *handler) streamEvents(w http.ResponseWriter, r *http.Request) {
 				}
 
 				f.Flush()
+
+			case "health_status: healthy", "health_status: unhealthy":
+				log.Debugf("triggering docker health event: %v", event.Name)
+				healthy := "unhealthy"
+				if event.Name == "health_status: healthy" {
+					healthy = "healthy"
+				}
+				payload := map[string]string{
+					"actorId": event.ActorID,
+					"health":  healthy,
+				}
+				bytes, _ := json.Marshal(payload)
+				if _, err := fmt.Fprintf(w, "event: container-health\ndata: %s\n\n", string(bytes)); err != nil {
+					log.Errorf("error writing event to event stream: %v", err)
+					return
+				}
+				f.Flush()
 			default:
+				log.Tracef("ignoring docker event: %v", event.Name)
 				// do nothing
 			}
 		case <-ctx.Done():