feat: groups containers by stack or compose when possible (#2893)

assets/components/LogViewer/ComplexLogItem.vue

@@ -16,7 +16,7 @@
     </div>
     <div>
       <ul class="fields cursor-pointer space-x-4" :class="{ expanded }">
-        <li v-for="(value, name) in validValues">
+        <li v-for="(value, name) in validValues" :key="name">
           <span class="text-light">{{ name }}=</span><span class="font-bold" v-if="value === null">&lt;null&gt;</span>
           <template v-else-if="Array.isArray(value)">
             <span class="font-bold" v-html="markSearch(JSON.stringify(value))"> </span>

assets/components/LogViewer/FieldList.vue

@@ -1,6 +1,6 @@
 <template>
   <ul v-if="expanded" ref="root" class="ml-8">
-    <li v-for="(value, name) in fields">
+    <li v-for="(value, name) in fields" :key="name">
       <template v-if="isObject(value)">
         <span class="text-light">{{ name }}=</span>
         <field-list

assets/components/SideMenu.vue

@@ -8,9 +8,10 @@
         </li>
       </ul>
     </div>
+
     <transition :name="sessionHost ? 'slide-left' : 'slide-right'" mode="out-in">
       <ul class="menu p-0" v-if="!sessionHost">
-        <li v-for="host in hosts">
+        <li v-for="host in hosts" :key="host.id">
           <a @click.prevent="setHost(host.id)" :class="{ 'pointer-events-none text-base-content/50': !host.available }">
             <ph:computer-tower />
             {{ host.name }}
@@ -18,42 +19,44 @@
           </a>
         </li>
       </ul>
-      <transition-group tag="ul" name="list" class="containers menu p-0 [&_li.menu-title]:px-0" v-else>
-        <li
-          v-for="item in menuItems"
-          :key="isContainer(item) ? item.id : item.keyLabel"
-          :class="isContainer(item) ? item.state : 'menu-title'"
-          :data-testid="isContainer(item) ? null : item.keyLabel"
-        >
-          <popup v-if="isContainer(item)">
-            <router-link
-              :to="{ name: 'container-id', params: { id: item.id } }"
-              active-class="active-primary"
-              @click.alt.stop.prevent="store.appendActiveContainer(item)"
-              :title="item.name"
-            >
-              <div class="truncate">
-                {{ item.name }}<span class="font-light opacity-70" v-if="item.isSwarm">{{ item.swarmId }}</span>
-              </div>
-              <container-health :health="item.health"></container-health>
-              <span
-                class="pin"
-                @click.stop.prevent="store.appendActiveContainer(item)"
-                v-show="!activeContainersById[item.id]"
-                :title="$t('tooltip.pin-column')"
-              >
-                <cil:columns />
-              </span>
-            </router-link>
-            <template #content>
-              <container-popup :container="item"></container-popup>
-            </template>
-          </popup>
-          <template v-else>
-            {{ $t(item.keyLabel) }}
-          </template>
+      <ul class="containers menu p-0 [&_li.menu-title]:px-0" v-else>
+        <li v-for="{ label, containers, icon } in menuItems" :key="label">
+          <details open>
+            <summary class="font-light text-base-content/80">
+              <component :is="icon" />
+              {{ label.startsWith("label.") ? $t(label) : label }}
+            </summary>
+            <ul>
+              <li v-for="item in containers" :class="item.state" :key="item.id">
+                <popup>
+                  <router-link
+                    :to="{ name: 'container-id', params: { id: item.id } }"
+                    active-class="active-primary"
+                    @click.alt.stop.prevent="store.appendActiveContainer(item)"
+                    :title="item.name"
+                  >
+                    <div class="truncate">
+                      {{ item.name }}<span class="font-light opacity-70" v-if="item.isSwarm">{{ item.swarmId }}</span>
+                    </div>
+                    <container-health :health="item.health"></container-health>
+                    <span
+                      class="pin"
+                      @click.stop.prevent="store.appendActiveContainer(item)"
+                      v-show="!activeContainersById[item.id]"
+                      :title="$t('tooltip.pin-column')"
+                    >
+                      <cil:columns />
+                    </span>
+                  </router-link>
+                  <template #content>
+                    <container-popup :container="item"></container-popup>
+                  </template>
+                </popup>
+              </li>
+            </ul>
+          </details>
         </li>
-      </transition-group>
+      </ul>
     </transition>
   </div>
   <div role="status" class="flex animate-pulse flex-col gap-4" v-else>
@@ -66,6 +69,13 @@
 import { Container } from "@/models/Container";
 import { sessionHost } from "@/composable/storage";
 
+// @ts-ignore
+import Pin from "~icons/ph/map-pin-simple";
+// @ts-ignore
+import Stack from "~icons/ph/stack";
+// @ts-ignore
+import Containers from "~icons/octicon/container-24";
+
 const store = useContainerStore();
 
 const { activeContainers, visibleContainers, ready } = storeToRefs(store);
@@ -75,7 +85,7 @@ function setHost(host: string | null) {
   sessionHost.value = host;
 }
 
-const debouncedIds = debouncedRef(pinnedContainers, 200);
+const debouncedPinnedContainers = debouncedRef(pinnedContainers, 200);
 const sortedContainers = computed(() =>
   visibleContainers.value
     .filter((c) => c.host === sessionHost.value)
@@ -90,32 +100,39 @@ const sortedContainers = computed(() =>
     }),
 );
 
-const groupedContainers = computed(() =>
-  sortedContainers.value.reduce(
-    (acc, item) => {
-      if (debouncedIds.value.has(item.name)) {
-        acc.pinned.push(item);
-      } else {
-        acc.unpinned.push(item);
-      }
-      return acc;
-    },
-    { pinned: [] as Container[], unpinned: [] as Container[] },
-  ),
-);
-
-function isContainer(item: any): item is Container {
-  return item.hasOwnProperty("image");
-}
-
 const menuItems = computed(() => {
-  const pinnedLabel = { keyLabel: "label.pinned" };
-  const allLabel = { keyLabel: showAllContainers.value ? "label.all-containers" : "label.running-containers" };
-  if (groupedContainers.value.pinned.length > 0) {
-    return [pinnedLabel, ...groupedContainers.value.pinned, allLabel, ...groupedContainers.value.unpinned];
-  } else {
-    return [allLabel, ...groupedContainers.value.unpinned];
+  const namespaced: Record<string, Container[]> = {};
+  const pinned = [];
+  const singular = [];
+
+  for (const item of sortedContainers.value) {
+    const namespace = item.labels["com.docker.stack.namespace"] ?? item.labels["com.docker.compose.project"];
+    if (debouncedPinnedContainers.value.has(item.name)) {
+      pinned.push(item);
+    } else if (namespace) {
+      namespaced[namespace] ||= [];
+      namespaced[namespace].push(item);
+    } else {
+      singular.push(item);
+    }
   }
+
+  const items = [];
+  if (pinned.length) {
+    items.push({ label: "label.pinned", containers: pinned, icon: Pin });
+  }
+  for (const [label, containers] of Object.entries(namespaced).sort(([a], [b]) => a.localeCompare(b))) {
+    items.push({ label, containers, icon: Stack });
+  }
+  if (singular.length) {
+    items.push({
+      label: showAllContainers.value ? "label.all-containers" : "label.running-containers",
+      containers: singular,
+      icon: Containers,
+    });
+  }
+
+  return items;
 });
 
 const activeContainersById = computed(() =>

assets/components/SidePanel.vue

@@ -12,15 +12,16 @@
       </small>
     </h1>
 
-    <a
+    <button
       class="input input-sm mt-4 inline-flex cursor-pointer items-center gap-2 font-light hover:border-primary"
       @click="$emit('search')"
       :title="$t('tooltip.search')"
+      data-testid="search"
     >
       <mdi:magnify />
-      Search
-      <key-shortcut char="k"></key-shortcut>
-    </a>
+      {{ $t("placeholder.search") }}
+      <key-shortcut char="k" class="text-base-content/70"></key-shortcut>
+    </button>
 
     <side-menu class="mt-4"></side-menu>
   </aside>

e2e/default.spec.ts

@@ -34,6 +34,6 @@ test.describe("es locale", () => {
   test.use({ locale: "es" });
 
   test("translated text", async ({ page }) => {
-    await expect(page.getByTestId("label.running-containers")).toHaveText("Contenedores en ejecución");
+    await expect(page.getByTestId("search")).toContainText("Buscar");
   });
 });

e2e/simple.spec.ts

@@ -5,5 +5,5 @@ test("simple authentication", async ({ page }) => {
   await page.locator('input[name="username"]').fill("admin");
   await page.locator('input[name="password"]').fill("password");
   await page.locator('button[type="submit"]').click();
-  await expect(page.getByTestId("label.running-containers")).toHaveText("Running Containers");
+  await expect(page.getByTestId("settings")).toBeVisible();
 });

locales/de.yml

@@ -62,6 +62,7 @@ button:
   settings: Einstellungen
 placeholder:
   search-containers: Suche Container (⌘ + k, ⌃k)
+  search: Suche
 settings:
   display: Anzeige
   locale: Sprache überschreiben

locales/en.yml

@@ -65,6 +65,7 @@ button:
   settings: Settings
 placeholder:
   search-containers: Search containers (⌘ + k, ⌃k)
+  search: Search
 settings:
   display: Display
   locale: Override language

locales/es.yml

@@ -62,6 +62,7 @@ button:
   settings: Configuración
 placeholder:
   search-containers: Buscar contenedores (⌘ + K, CTRL + K)
+  search: Buscar
 settings:
   display: Vista
   locale: Sobrescribir idioma

locales/fr.yml

@@ -64,6 +64,7 @@ button:
   settings: Paramètres
 placeholder:
   search-containers: Recherche de conteneurs (⌘ + k, ⌃k)
+  search: Recherche
 settings:
   display: Afficher
   locale: Langue de remplacement

locales/it.yml

@@ -62,6 +62,7 @@ button:
   settings: Configurazione
 placeholder:
   search-containers: Ricerca container (⌘ + k, ⌃k)
+  search: Cerca
 settings:
   display: Visualizza
   locale: Sovrascrivi Linguaggio

locales/pr.yml

@@ -58,6 +58,7 @@ button:
   settings: Configurações
 placeholder:
   search-containers: Pesquisar contentores (⌘ + K, CTRL + K)
+  search: Pesquisa
 settings:
   display: Visão
   locale: Localidade

locales/ru.yml

@@ -58,6 +58,7 @@ button:
   settings: Настройки
 placeholder:
   search-containers: Поиск контейнеров (⌘ + k, ⌃k)
+  search: Поиск
 settings:
   display: Вид
   locale: Язык

locales/zh-tw.yml

@@ -41,6 +41,7 @@ button:
   settings: 設定
 placeholder:
   search-containers: 查詢容器 (⌘ + k, ⌃k)
+  search: 查詢
 settings:
   display: 顯示
   locale: 覆寫語言

locales/zh.yml

@@ -58,6 +58,7 @@ button:
   settings: 设置
 placeholder:
   search-containers: 搜索容器 (⌘ + k, ⌃k)
+  search: 搜索
 settings:
   display: 显示
   locale: 覆盖语言