feat: adds a new drop down to jump to same name containers (#3510)

Author: amir20

assets/auto-imports.d.ts

@@ -476,7 +476,6 @@ declare module 'vue' {
     readonly onBeforeUpdate: UnwrapRef<typeof import('vue')['onBeforeUpdate']>
     readonly onClickOutside: UnwrapRef<typeof import('@vueuse/core')['onClickOutside']>
     readonly onDeactivated: UnwrapRef<typeof import('vue')['onDeactivated']>
-    readonly onElementRemoval: UnwrapRef<typeof import('@vueuse/core')['onElementRemoval']>
     readonly onErrorCaptured: UnwrapRef<typeof import('vue')['onErrorCaptured']>
     readonly onKeyStroke: UnwrapRef<typeof import('@vueuse/core')['onKeyStroke']>
     readonly onLongPress: UnwrapRef<typeof import('@vueuse/core')['onLongPress']>
@@ -671,7 +670,6 @@ declare module 'vue' {
     readonly usePreferredDark: UnwrapRef<typeof import('@vueuse/core')['usePreferredDark']>
     readonly usePreferredLanguages: UnwrapRef<typeof import('@vueuse/core')['usePreferredLanguages']>
     readonly usePreferredReducedMotion: UnwrapRef<typeof import('@vueuse/core')['usePreferredReducedMotion']>
-    readonly usePreferredReducedTransparency: UnwrapRef<typeof import('@vueuse/core')['usePreferredReducedTransparency']>
     readonly usePrevious: UnwrapRef<typeof import('@vueuse/core')['usePrevious']>
     readonly useProfileStorage: UnwrapRef<typeof import('./composable/profileStorage')['useProfileStorage']>
     readonly useRafFn: UnwrapRef<typeof import('@vueuse/core')['useRafFn']>
@@ -680,7 +678,6 @@ declare module 'vue' {
     readonly useResizeObserver: UnwrapRef<typeof import('@vueuse/core')['useResizeObserver']>
     readonly useRoute: UnwrapRef<typeof import('vue-router')['useRoute']>
     readonly useRouter: UnwrapRef<typeof import('vue-router')['useRouter']>
-    readonly useSSRWidth: UnwrapRef<typeof import('@vueuse/core')['useSSRWidth']>
     readonly useScreenOrientation: UnwrapRef<typeof import('@vueuse/core')['useScreenOrientation']>
     readonly useScreenSafeArea: UnwrapRef<typeof import('@vueuse/core')['useScreenSafeArea']>
     readonly useScriptTag: UnwrapRef<typeof import('@vueuse/core')['useScriptTag']>

assets/components/ContainerViewer/ContainerLog.vue

@@ -3,7 +3,11 @@
     <template #header v-if="showTitle">
       <div class="@container mx-2 flex items-center gap-2 md:ml-4">
         <ContainerTitle :container="container" />
-        <MultiContainerStat class="ml-auto lg:hidden lg:@3xl:flex" :containers="[container]" />
+        <MultiContainerStat
+          class="ml-auto lg:hidden lg:@3xl:flex"
+          :containers="[container]"
+          v-if="container.state === 'running'"
+        />
 
         <ContainerActionsToolbar @clear="viewer?.clear()" class="mobile-hidden" :container="container" />
         <a class="btn btn-circle btn-xs" @click="close()" v-if="closable">

assets/components/ContainerViewer/ContainerTitle.vue

@@ -1,20 +1,38 @@
 <template>
-  <div class="@container flex flex-1 gap-1.5 truncate md:gap-2">
+  <div class="@container flex flex-1 items-center gap-1.5 truncate md:gap-2">
     <label class="swap swap-rotate size-4">
       <input type="checkbox" v-model="pinned" />
       <carbon:star-filled class="swap-on text-secondary" />
       <carbon:star class="swap-off" />
     </label>
-    <div class="inline-flex font-mono text-sm">
-      <div v-if="config.hosts.length > 1" class="mobile-hidden font-thin">
-        {{ container.hostLabel }}<span class="mx-2">/</span>
-      </div>
-      <div class="font-semibold">{{ container.name }}</div>
-      <div
-        class="mobile-hidden max-w-[1.5em] truncate transition-[max-width] hover:max-w-[400px]"
-        v-if="container.isSwarm"
-      >
-        .{{ container.swarmId }}
+    <div class="inline-flex items-center text-sm">
+      <div class="breadcrumbs p-0">
+        <ul>
+          <li v-if="config.hosts.length > 1" class="mobile-hidden font-thin">
+            {{ container.hostLabel }}
+          </li>
+          <li>
+            <div class="wrapper" ref="wrapper">
+              <button popovertarget="popover-container-list" class="btn btn-xs md:btn-sm anchor font-mono">
+                {{ container.name }} <carbon:caret-down />
+              </button>
+              <ul popover id="popover-container-list" class="dropdown menu rounded-box bg-base-100 tethered shadow-sm">
+                <li v-for="other in otherContainers">
+                  <router-link :to="{ name: '/container/[id]', params: { id: other.id } }">
+                    <div
+                      class="status data-[state=exited]:status-error data-[state=running]:status-success"
+                      :data-state="other.state"
+                    ></div>
+                    <div class="font-mono" v-if="other.isSwarm">{{ other.swarmId }}</div>
+                    <div class="font-mono" v-else>{{ other.name }}</div>
+                    <div v-if="other.state === 'running'">running</div>
+                    <DistanceTime :date="other.created" strict class="text-base-content/70 text-xs" v-else />
+                  </router-link>
+                </li>
+              </ul>
+            </div>
+          </li>
+        </ul>
       </div>
     </div>
     <ContainerHealth :health="container.health" v-if="container.health" />
@@ -38,4 +56,41 @@ const pinned = computed({
     }
   },
 });
+const store = useContainerStore();
+const { containers: allContainers } = storeToRefs(store);
+
+const otherContainers = computed(() =>
+  [...allContainers.value.filter((c) => c.name === container.name && c.id !== container.id)].sort(
+    (a, b) => +b.created - +a.created,
+  ),
+);
+const wrapper = useTemplateRef("wrapper");
+
+onMounted(async () => {
+  if (!("anchorName" in document.documentElement.style)) {
+    // @ts-ignore
+    const module = await import("@oddbird/css-anchor-positioning/fn");
+    // @ts-ignore
+    await module.default([wrapper.value]);
+  }
+});
 </script>
+
+<style scoped>
+/* https://github.com/oddbird/css-anchor-positioning/issues/282 */
+.wrapper {
+  anchor-scope: --anchor;
+}
+
+.anchor {
+  anchor-name: --anchor;
+}
+
+.tethered {
+  margin: 0;
+  padding: 0;
+  position-anchor: --anchor;
+  top: anchor(bottom);
+  left: anchor(left);
+}
+</style>

assets/components/HostMenu.vue

@@ -83,7 +83,7 @@
                     class="group auto-cols-[auto_max-content_max-content]"
                   >
                     <div class="truncate">
-                      {{ item.name }}<span class="font-light opacity-70" v-if="item.isSwarm">.{{ item.swarmId }}</span>
+                      {{ item.name }}
                     </div>
                     <ContainerHealth :health="item.health" />
                     <span

assets/main.ts

@@ -6,5 +6,4 @@ const app = createApp(App);
 Object.values(import.meta.glob<{ install: (app: VueApp) => void }>("./modules/*.ts", { eager: true })).forEach((i) =>
   i.install?.(app),
 );
-
 app.mount("#app");

package.json

@@ -39,6 +39,7 @@
     "@iconify-json/octicon": "^1.2.2",
     "@iconify-json/ph": "^1.2.2",
     "@intlify/unplugin-vue-i18n": "^6.0.3",
+    "@oddbird/css-anchor-positioning": "^0.4.0",
     "@tailwindcss/typography": "^0.5.15",
     "@tailwindcss/vite": "4.0.0-beta.8",
     "@vueuse/components": "^12.3.0",