diff --git a/assets/components/ContainerTable.vue b/assets/components/ContainerTable.vue index 2964d200..8ff1f38c 100644 --- a/assets/components/ContainerTable.vue +++ b/assets/components/ContainerTable.vue @@ -28,7 +28,7 @@ {{ container.name }} - {{ container.host }} + {{ container.hostLabel }} {{ container.state }} @@ -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: { diff --git a/assets/components/FuzzySearchModal.vue b/assets/components/FuzzySearchModal.vue index 0827e88f..7f712536 100644 --- a/assets/components/FuzzySearchModal.vue +++ b/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, diff --git a/assets/components/LogViewer/ContainerTitle.vue b/assets/components/LogViewer/ContainerTitle.vue index 27b998e6..22e0d54d 100644 --- a/assets/components/LogViewer/ContainerTitle.vue +++ b/assets/components/LogViewer/ContainerTitle.vue @@ -3,7 +3,10 @@
- {{ container.name }}{{ + container.hostLabel + }}/{{ container.name }}{{ container.swarmId }}
{{ container.image.replace(/@sha.*/, "") }} diff --git a/assets/components/LogViewer/LogEventSource.spec.ts b/assets/components/LogViewer/LogEventSource.spec.ts index 405f0c56..d6a90ffc 100644 --- a/assets/components/LogViewer/LogEventSource.spec.ts +++ b/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" }] }, })); /** diff --git a/assets/models/Container.spec.ts b/assets/models/Container.spec.ts index 97b4340e..ffa6cb9f 100644 --- a/assets/models/Container.spec.ts +++ b/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 = [ [ diff --git a/assets/models/Container.ts b/assets/models/Container.ts index 7e7f2e43..2471f339 100644 --- a/assets/models/Container.ts +++ b/assets/models/Container.ts @@ -7,6 +7,16 @@ type Stat = Omit; 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, + ), +); + export class Container { private _stat: Ref; private readonly throttledStatHistory: UseThrottledRefHistoryReturn; @@ -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}`; }