feat: improves host labels and respects configurations for labels (#2369)

* feat: improves host labels and respects configurations for labels

* fixes tests

assets/components/ContainerTable.vue

@@ -28,7 +28,7 @@
             {{ container.name }}
           </router-link>
         </td>
-        <td v-if="isVisible('host')">{{ container.host }}</td>
+        <td v-if="isVisible('host')">{{ container.hostLabel }}</td>
         <td v-if="isVisible('state')">{{ container.state }}</td>
         <td v-if="isVisible('created')">
           <distance-time :date="container.created" strict :suffix="false"></distance-time>
@@ -69,7 +69,7 @@ const fields = {
   },
   host: {
     label: "label.host",
-    sortFunc: (a: Container, b: Container) => a.host.localeCompare(b.host) * direction.value,
+    sortFunc: (a: Container, b: Container) => a.hostLabel.localeCompare(b.hostLabel) * direction.value,
     mobileVisible: false,
   },
   state: {

assets/components/FuzzySearchModal.vue

@@ -50,7 +50,7 @@ const store = useContainerStore();
 const { containers } = storeToRefs(store);
 
 const list = computed(() => {
-  return containers.value.map(({ id, created, name, state, host }) => {
+  return containers.value.map(({ id, created, name, state, hostLabel: host }) => {
     return {
       id,
       created,

assets/components/LogViewer/ContainerTitle.vue

@@ -3,7 +3,10 @@
     <div class="column is-ellipsis">
       <container-health :health="container.health" v-if="container.health"></container-health>
       <div class="name">
-        <span>{{ container.name }}</span
+        <span v-if="config.hosts.length > 1" class="host has-text-weight-light is-hidden-mobile">{{
+          container.hostLabel
+        }}</span
+        ><span class="has-text-weight-light mx-2">/</span><span class="">{{ container.name }}</span
         ><span v-if="container.isSwarm" class="swarm-id is-ellipsis">{{ container.swarmId }}</span>
       </div>
       <tag class="is-hidden-mobile">{{ container.image.replace(/@sha.*/, "") }}</tag>

assets/components/LogViewer/LogEventSource.spec.ts

@@ -12,7 +12,7 @@ import { createRouter, createWebHistory } from "vue-router";
 
 vi.mock("@/stores/config", () => ({
   __esModule: true,
-  default: { base: "", hosts: ["localhost"] },
+  default: { base: "", hosts: [{ name: "localhost", id: "localhost" }] },
 }));
 
 /**

assets/models/Container.spec.ts

@@ -1,5 +1,11 @@
-import { describe, expect, test } from "vitest";
+import { describe, expect, test, vi } from "vitest";
 import { Container } from "./Container";
+
+vi.mock("@/stores/config", () => ({
+  __esModule: true,
+  default: { base: "", hosts: [{ name: "localhost", id: "localhost" }] },
+}));
+
 describe("Container", () => {
   const names = [
     [

assets/models/Container.ts

@@ -7,6 +7,16 @@ type Stat = Omit<ContainerStat, "id">;
 
 const SWARM_ID_REGEX = /(\.[a-z0-9]{25})+$/i;
 
+const hosts = computed(() =>
+  config.hosts.reduce(
+    (acc, item) => {
+      acc[item.id] = item;
+      return acc;
+    },
+    {} as Record<string, { name: string; id: string }>,
+  ),
+);
+
 export class Container {
   private _stat: Ref<Stat>;
   private readonly throttledStatHistory: UseThrottledRefHistoryReturn<Stat, Stat>;
@@ -49,6 +59,10 @@ export class Container {
     return unref(this._stat);
   }
 
+  get hostLabel() {
+    return hosts.value[this.host]?.name;
+  }
+
   get storageKey() {
     return `${stripVersion(this.image)}:${this.command}`;
   }