From 63a0d544e44039aef4d784a95cebc975d4f94e89 Mon Sep 17 00:00:00 2001
From: Amir Raminfar <findamir@gmail.com>
Date: Thu, 6 Apr 2023 09:50:44 -0700
Subject: [PATCH] Adds tooltip to healthcheck. Fixes #2104 (#2110)

---
 assets/components.d.ts                        |  2 ++
 .../components/LogViewer/ContainerTitle.vue   | 21 ++++++++++++++++++-
 assets/components/SideMenu.vue                | 21 ++++++++++---------
 3 files changed, 33 insertions(+), 11 deletions(-)

diff --git a/assets/components.d.ts b/assets/components.d.ts
index 8a79b43d..69d50e31 100644
--- a/assets/components.d.ts
+++ b/assets/components.d.ts
@@ -11,8 +11,10 @@ declare module '@vue/runtime-core' {
   export interface GlobalComponents {
     'Carbon:caretDown': typeof import('~icons/carbon/caret-down')['default']
     'Cil:checkCircle': typeof import('~icons/cil/check-circle')['default']
+    'Cil:circle': typeof import('~icons/cil/circle')['default']
     'Cil:columns': typeof import('~icons/cil/columns')['default']
     'Cil:findInPage': typeof import('~icons/cil/find-in-page')['default']
+    'Cil:xCircle': typeof import('~icons/cil/x-circle')['default']
     ComplexLogItem: typeof import('./components/LogViewer/ComplexLogItem.vue')['default']
     ContainerStat: typeof import('./components/LogViewer/ContainerStat.vue')['default']
     ContainerTitle: typeof import('./components/LogViewer/ContainerTitle.vue')['default']
diff --git a/assets/components/LogViewer/ContainerTitle.vue b/assets/components/LogViewer/ContainerTitle.vue
index c5c4904f..3d8a82a6 100644
--- a/assets/components/LogViewer/ContainerTitle.vue
+++ b/assets/components/LogViewer/ContainerTitle.vue
@@ -1,6 +1,11 @@
 <template>
   <div class="columns is-marginless has-text-weight-bold is-family-monospace">
     <span class="column is-ellipsis">
+      <span class="icon is-small health" :health="container.health" v-if="container.health" :title="container.health">
+        <cil:check-circle v-if="container.health == 'healthy'" />
+        <cil:x-circle v-else-if="container.health == 'unhealthy'" />
+        <cil:circle v-else />
+      </span>
       {{ container.name }}
       <span class="tag is-dark">{{ container.image.replace(/@sha.*/, "") }}</span>
     </span>
@@ -14,4 +19,18 @@ import { type ComputedRef } from "vue";
 const container = inject("container") as ComputedRef<Container>;
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.icon {
+  vertical-align: middle;
+}
+
+.health {
+  &[health="unhealthy"] {
+    color: var(--red-color);
+  }
+
+  &[health="healthy"] {
+    color: var(--green-color);
+  }
+}
+</style>
diff --git a/assets/components/SideMenu.vue b/assets/components/SideMenu.vue
index 027ab2e6..a1c2638c 100644
--- a/assets/components/SideMenu.vue
+++ b/assets/components/SideMenu.vue
@@ -67,18 +67,20 @@
               {{ item.name }}
             </div>
             <div class="is-flex-shrink-1 is-flex icons">
-              <span
+              <div
                 class="icon is-small pin"
                 @click.stop.prevent="store.appendActiveContainer(item)"
                 v-show="!activeContainersById[item.id]"
                 :title="$t('tooltip.pin-column')"
               >
                 <cil:columns />
-              </span>
+              </div>
 
-              <span class="icon is-small health" :health="item.health" v-if="item.health">
-                <cil:check-circle />
-              </span>
+              <div class="icon is-small health" :health="item.health" v-if="item.health" :title="item.health">
+                <cil:check-circle v-if="item.health == 'healthy'" />
+                <cil:x-circle v-else-if="item.health == 'unhealthy'" />
+                <cil:circle v-else />
+              </div>
             </div>
           </div>
         </router-link>
@@ -142,7 +144,10 @@ li.exited a {
     color: var(--green-color);
   }
 }
-
+.icons {
+  column-gap: 0.35em;
+  align-items: baseline;
+}
 a {
   .pin {
     display: none;
@@ -156,10 +161,6 @@ a {
     .pin {
       display: block;
     }
-
-    .health {
-      display: none;
-    }
   }
 }
 </style>