chore(refactor): create docker health component

assets/components.d.ts

@@ -17,6 +17,7 @@ declare module '@vue/runtime-core' {
     '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']
+    ContainerHealth: typeof import('./components/LogViewer/ContainerHealth.vue')['default']
     ContainerStat: typeof import('./components/LogViewer/ContainerStat.vue')['default']
     ContainerTitle: typeof import('./components/LogViewer/ContainerTitle.vue')['default']
     DateTime: typeof import('./components/DateTime.vue')['default']

assets/components/LogViewer/ContainerHealth.vue

@@ -0,0 +1,27 @@
+<template>
+  <div class="icon is-small health" :health="health" v-if="health" :title="health">
+    <cil:check-circle v-if="health == 'healthy'" />
+    <cil:x-circle v-else-if="health == 'unhealthy'" />
+    <cil:circle v-else />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ContainerHealth } from "@/types/Container";
+
+defineProps<{
+  health: ContainerHealth;
+}>();
+</script>
+
+<style lang="scss" scoped>
+.health {
+  &[health="unhealthy"] {
+    color: var(--red-color);
+  }
+
+  &[health="healthy"] {
+    color: var(--green-color);
+  }
+}
+</style>

assets/components/LogViewer/ContainerTitle.vue

@@ -1,14 +1,12 @@
 <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>
+    <div class="column is-narrow" v-if="container.health">
+      <container-health :health="container.health"></container-health>
+    </div>
+    <div class="column is-ellipsis">
       {{ container.name }}<span v-if="container.isSwarm">.{{ container.swarmId }}</span>
       <span class="tag is-dark">{{ container.image.replace(/@sha.*/, "") }}</span>
-    </span>
+    </div>
   </div>
 </template>
 
@@ -23,14 +21,4 @@ const container = inject("container") as ComputedRef<Container>;
 .icon {
   vertical-align: middle;
 }
-
-.health {
-  &[health="unhealthy"] {
-    color: var(--red-color);
-  }
-
-  &[health="healthy"] {
-    color: var(--green-color);
-  }
-}
 </style>

assets/components/SideMenu.vue

@@ -78,11 +78,7 @@
                   <cil:columns />
                 </div>
 
-                <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>
+                <container-health :health="item.health"></container-health>
               </div>
             </div>
           </router-link>
@@ -99,7 +95,7 @@
             </div>
             <div>
               <span class="has-text-weight-light"> MEM </span>
-              <span class="has-text-weight-semibold"> {{ item.getLastStat().snapshot.memory }} </span>
+              <span class="has-text-weight-semibold"> {{ formatBytes(item.getLastStat().snapshot.memoryUsage) }} </span>
             </div>
           </template>
         </popup>
@@ -169,15 +165,6 @@ li.exited a {
   color: #777;
 }
 
-.health {
-  &[health="unhealthy"] {
-    color: var(--red-color);
-  }
-
-  &[health="healthy"] {
-    color: var(--green-color);
-  }
-}
 .icons {
   column-gap: 0.35em;
   align-items: baseline;