From 01343b74bfbe0c1dc8dc1cea6ec47dc6da3228fe Mon Sep 17 00:00:00 2001
From: Amir Raminfar <findamir@gmail.com>
Date: Thu, 24 Apr 2025 12:12:53 -0700
Subject: [PATCH] feat: improves dropdowns for other containers (#3840)

---
 assets/components.d.ts                        |  1 +
 assets/components/ContainerDropdown.vue       | 24 ++++++
 .../ContainerViewer/ContainerTitle.vue        | 75 ++++++-------------
 .../components/GroupedViewer/GroupedLog.vue   |  8 +-
 .../MultiContainerLog.vue                     |  8 +-
 .../components/ServiceViewer/ServiceLog.vue   | 11 +--
 assets/components/StackViewer/StackLog.vue    | 13 +---
 7 files changed, 60 insertions(+), 80 deletions(-)
 create mode 100644 assets/components/ContainerDropdown.vue

diff --git a/assets/components.d.ts b/assets/components.d.ts
index 2ac014cc..31ab73a3 100644
--- a/assets/components.d.ts
+++ b/assets/components.d.ts
@@ -29,6 +29,7 @@ declare module 'vue' {
     'Cil:xCircle': typeof import('~icons/cil/x-circle')['default']
     ComplexLogItem: typeof import('./components/LogViewer/ComplexLogItem.vue')['default']
     ContainerActionsToolbar: typeof import('./components/ContainerViewer/ContainerActionsToolbar.vue')['default']
+    ContainerDropdown: typeof import('./components/ContainerDropdown.vue')['default']
     ContainerEventLogItem: typeof import('./components/LogViewer/ContainerEventLogItem.vue')['default']
     ContainerHealth: typeof import('./components/ContainerViewer/ContainerHealth.vue')['default']
     ContainerLog: typeof import('./components/ContainerViewer/ContainerLog.vue')['default']
diff --git a/assets/components/ContainerDropdown.vue b/assets/components/ContainerDropdown.vue
new file mode 100644
index 00000000..6992e960
--- /dev/null
+++ b/assets/components/ContainerDropdown.vue
@@ -0,0 +1,24 @@
+<template>
+  <div class="dropdown">
+    <button tabindex="0" role="button" class="btn btn-xs md:btn-sm"><slot /> <carbon:caret-down /></button>
+    <ul tabindex="0" class="dropdown-content menu rounded-box bg-base-100 shadow-sm">
+      <li v-for="other in containers">
+        <router-link :to="{ name: '/container/[id]', params: { id: other.id } }" class="text-nowrap">
+          <div
+            class="status data-[state=exited]:status-error data-[state=running]:status-success"
+            :data-state="other.state"
+          ></div>
+          {{ other.name }}
+          <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>
+</template>
+<script lang="ts" setup>
+import { type Container } from "@/models/Container";
+const { containers } = defineProps<{
+  containers: Container[];
+}>();
+</script>
diff --git a/assets/components/ContainerViewer/ContainerTitle.vue b/assets/components/ContainerViewer/ContainerTitle.vue
index e9aeff6f..d0784fb5 100644
--- a/assets/components/ContainerViewer/ContainerTitle.vue
+++ b/assets/components/ContainerViewer/ContainerTitle.vue
@@ -1,44 +1,45 @@
 <template>
-  <div class="@container flex flex-1 items-center gap-1.5 truncate md:gap-2">
+  <div class="@container flex flex-1 items-center gap-1.5 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 items-center text-sm">
-      <div class="breadcrumbs p-0 font-mono">
+      <div class="breadcrumbs overflow-x-visible p-0 font-mono">
         <ul>
           <li v-if="config.hosts.length > 1" class="font-thin max-md:hidden">
             {{ container.hostLabel }}
           </li>
           <li>
             <template v-if="otherContainers.length === 0">{{ container.name }}</template>
-            <div class="wrapper" ref="wrapper" v-else>
-              <button popovertarget="popover-container-list" class="btn btn-xs md:btn-sm anchor">
-                {{ 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 v-if="other.isSwarm">{{ other.swarmId }}</div>
-                    <div 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 v-else>
+              <div class="dropdown">
+                <button tabindex="0" role="button" class="btn btn-xs md:btn-sm">
+                  {{ container.name }} <carbon:caret-down />
+                </button>
+                <ul tabindex="0" class="dropdown-content menu rounded-box bg-base-100 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 v-if="other.isSwarm">{{ other.swarmId }}</div>
+                      <div 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>
             </div>
           </li>
         </ul>
       </div>
     </div>
     <ContainerHealth :health="container.health" v-if="container.health" />
-    <Tag class="hidden font-mono max-md:hidden @3xl:block" size="small">
+    <Tag class="hidden! font-mono @xl:block!" size="small">
       {{ container.image.replace(/@sha.*/, "") }}
     </Tag>
   </div>
@@ -66,34 +67,6 @@ const otherContainers = computed(() =>
     .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;
-  position: absolute;
-  top: anchor(bottom);
-  left: anchor(left);
-}
-</style>
+<style scoped></style>
diff --git a/assets/components/GroupedViewer/GroupedLog.vue b/assets/components/GroupedViewer/GroupedLog.vue
index 0005509d..8ab62bf0 100644
--- a/assets/components/GroupedViewer/GroupedLog.vue
+++ b/assets/components/GroupedViewer/GroupedLog.vue
@@ -2,11 +2,9 @@
   <ScrollableView :scrollable="scrollable" v-if="group.containers.length && ready">
     <template #header>
       <div class="mx-2 flex items-center gap-2 md:ml-4">
-        <div class="@container flex flex-1 items-center gap-1.5 truncate md:gap-2">
-          <div class="inline-flex font-mono text-sm">
-            <div class="font-semibold">{{ $t("label.container", group.containers.length) }}</div>
-          </div>
-        </div>
+        <ContainerDropdown :containers="group.containers">
+          {{ $t("label.container", group.containers.length) }}
+        </ContainerDropdown>
         <MultiContainerStat class="ml-auto" :containers="group.containers" />
         <MultiContainerActionToolbar class="max-md:hidden" @clear="viewer?.clear()" />
       </div>
diff --git a/assets/components/MultiContainerViewer/MultiContainerLog.vue b/assets/components/MultiContainerViewer/MultiContainerLog.vue
index e4eca078..cd64c2b2 100644
--- a/assets/components/MultiContainerViewer/MultiContainerLog.vue
+++ b/assets/components/MultiContainerViewer/MultiContainerLog.vue
@@ -2,12 +2,8 @@
   <ScrollableView :scrollable="scrollable" v-if="containers.length && ready">
     <template #header>
       <div class="mx-2 flex items-center gap-2 md:ml-4">
-        <div class="@container flex flex-1 items-center gap-1.5 truncate md:gap-2">
-          <octicon:container-24 />
-          <div class="inline-flex font-mono text-sm">
-            <div class="font-semibold">{{ containers.length }} containers</div>
-          </div>
-        </div>
+        <octicon:container-24 />
+        <ContainerDropdown :containers="containers">{{ $t("label.container", containers.length) }}</ContainerDropdown>
         <MultiContainerStat class="ml-auto" :containers="containers" />
         <MultiContainerActionToolbar class="max-md:hidden" @clear="viewer?.clear()" />
       </div>
diff --git a/assets/components/ServiceViewer/ServiceLog.vue b/assets/components/ServiceViewer/ServiceLog.vue
index 78ec8c17..c5a41362 100644
--- a/assets/components/ServiceViewer/ServiceLog.vue
+++ b/assets/components/ServiceViewer/ServiceLog.vue
@@ -2,15 +2,8 @@
   <ScrollableView :scrollable="scrollable" v-if="service.name">
     <template #header>
       <div class="mx-2 flex items-center gap-2 md:ml-4">
-        <div class="@container flex flex-1 items-center gap-1.5 truncate md:gap-2">
-          <ph:stack-simple />
-          <div class="inline-flex font-mono text-sm">
-            <div class="font-semibold">{{ service.name }}</div>
-          </div>
-          <Tag class="hidden font-mono max-md:hidden @3xl:block" size="small">
-            {{ $t("label.container", service.containers.length) }}
-          </Tag>
-        </div>
+        <ph:stack-simple />
+        <ContainerDropdown :containers="service.containers">{{ service.name }}</ContainerDropdown>
         <MultiContainerStat class="ml-auto" :containers="service.containers" />
         <MultiContainerActionToolbar class="max-md:hidden" @clear="viewer?.clear()" />
       </div>
diff --git a/assets/components/StackViewer/StackLog.vue b/assets/components/StackViewer/StackLog.vue
index 1078cc17..7f2a8700 100644
--- a/assets/components/StackViewer/StackLog.vue
+++ b/assets/components/StackViewer/StackLog.vue
@@ -2,17 +2,12 @@
   <ScrollableView :scrollable="scrollable" v-if="stack.name">
     <template #header>
       <div class="mx-2 flex items-center gap-2 md:ml-4">
-        <div class="@container flex flex-1 items-center gap-1.5 truncate md:gap-2">
+        <div class="@container flex flex-1 items-center gap-1.5 md:gap-2">
           <ph:stack />
-          <div class="inline-flex font-mono text-sm">
-            <div class="font-semibold">{{ stack.name }}</div>
-          </div>
-          <Tag class="hidden font-mono max-md:hidden @3xl:block" size="small">
+          <div class="font-mono text-sm font-semibold">{{ stack.name }}</div>
+          <ContainerDropdown :containers="stack.containers">
             {{ $t("label.container", stack.containers.length) }}
-          </Tag>
-          <Tag class="hidden font-mono max-md:hidden @3xl:block" size="small">
-            {{ $t("label.service", stack.services.length) }}
-          </Tag>
+          </ContainerDropdown>
         </div>
         <MultiContainerStat class="ml-auto" :containers="stack.containers" />
         <MultiContainerActionToolbar class="max-md:hidden" @clear="viewer?.clear()" />