From 8fbbfaf043d6eb85fc37473af99771db8d37b986 Mon Sep 17 00:00:00 2001
From: Amir Raminfar <findamir@gmail.com>
Date: Sat, 25 Jan 2025 10:06:58 -0800
Subject: [PATCH] feat: adds new menu for custom groups (#3573)

---
 assets/components.d.ts          |  1 +
 assets/components/GroupMenu.vue | 29 +++++++++++++++++++++++++++++
 assets/components/SideMenu.vue  | 17 +++++++++--------
 assets/components/SwarmMenu.vue | 26 +-------------------------
 assets/pages/container/[id].vue |  2 +-
 assets/pages/group/[name].vue   |  2 +-
 assets/pages/host/[id].vue      |  2 +-
 assets/pages/merged/[ids].vue   |  2 +-
 assets/pages/service/[name].vue |  2 +-
 assets/pages/stack/[name].vue   |  2 +-
 locales/da.yml                  |  4 +++-
 locales/de.yml                  |  4 +++-
 locales/en.yml                  |  5 +++--
 locales/es.yml                  |  4 +++-
 locales/fr.yml                  |  4 +++-
 locales/it.yml                  |  5 ++++-
 locales/pl.yml                  |  4 +++-
 locales/pr.yml                  |  3 +++
 locales/ru.yml                  |  3 +++
 locales/tr.yml                  |  3 +++
 locales/zh-tw.yml               |  3 +++
 locales/zh.yml                  |  3 +++
 22 files changed, 83 insertions(+), 47 deletions(-)
 create mode 100644 assets/components/GroupMenu.vue

diff --git a/assets/components.d.ts b/assets/components.d.ts
index a014765c..3a069710 100644
--- a/assets/components.d.ts
+++ b/assets/components.d.ts
@@ -40,6 +40,7 @@ declare module 'vue' {
     EventSource: typeof import('./components/LogViewer/EventSource.vue')['default']
     FuzzySearchModal: typeof import('./components/FuzzySearchModal.vue')['default']
     GroupedLog: typeof import('./components/GroupedViewer/GroupedLog.vue')['default']
+    GroupMenu: typeof import('./components/GroupMenu.vue')['default']
     HostIcon: typeof import('./components/common/HostIcon.vue')['default']
     HostList: typeof import('./components/HostList.vue')['default']
     HostLog: typeof import('./components/HostViewer/HostLog.vue')['default']
diff --git a/assets/components/GroupMenu.vue b/assets/components/GroupMenu.vue
new file mode 100644
index 00000000..6542fbfb
--- /dev/null
+++ b/assets/components/GroupMenu.vue
@@ -0,0 +1,29 @@
+<template>
+  <ul class="menu w-full p-0 text-[0.95rem]">
+    <li v-if="customGroups.length > 0">
+      <details open>
+        <summary class="text-base-content/80 font-light">
+          <ph:bounding-box-fill />
+          {{ $t("label.group-menu") }}
+        </summary>
+        <ul>
+          <li v-for="group in customGroups" :key="group.name">
+            <router-link :to="{ name: '/group/[name]', params: { name: group.name } }" active-class="menu-active">
+              <ph:stack-simple />
+              <div class="truncate">
+                {{ group.name }}
+              </div>
+            </router-link>
+          </li>
+        </ul>
+      </details>
+    </li>
+  </ul>
+</template>
+
+<script lang="ts" setup>
+const store = useSwarmStore();
+
+const { customGroups } = storeToRefs(store);
+</script>
+<style scoped></style>
diff --git a/assets/components/SideMenu.vue b/assets/components/SideMenu.vue
index 57bf1bc9..53295122 100644
--- a/assets/components/SideMenu.vue
+++ b/assets/components/SideMenu.vue
@@ -1,10 +1,13 @@
 <template>
   <div v-if="ready" data-testid="side-menu" class="flex min-h-0 flex-col">
     <Carousel v-model="selectedCard" class="flex-1">
-      <CarouselItem title="Hosts and Containers" id="host">
+      <CarouselItem :title="$t('label.host-menu')" id="host">
         <HostMenu />
       </CarouselItem>
-      <CarouselItem title="Services and Stacks" v-if="services.length > 0" id="swarm">
+      <CarouselItem :title="$t('label.group-menu')" v-if="customGroups.length > 0" id="group">
+        <GroupMenu />
+      </CarouselItem>
+      <CarouselItem :title="$t('label.swarm-menu')" v-if="services.length > 0" id="swarm">
         <SwarmMenu />
       </CarouselItem>
     </Carousel>
@@ -20,16 +23,14 @@ const containerStore = useContainerStore();
 const { ready } = storeToRefs(containerStore);
 const route = useRoute();
 const swarmStore = useSwarmStore();
-const { services } = storeToRefs(swarmStore);
-const selectedCard = ref<"host" | "swarm">("host");
+const { services, customGroups } = storeToRefs(swarmStore);
+const selectedCard = ref<"host" | "swarm" | "group">("host");
 
 watch(
   route,
   () => {
-    if (route.meta.swarmMode) {
-      selectedCard.value = "swarm";
-    } else if (route.meta.containerMode) {
-      selectedCard.value = "host";
+    if (route.meta.menu && ["host", "swarm", "group"].includes(route.meta.menu as string)) {
+      selectedCard.value = route.meta.menu as "host" | "swarm" | "group";
     }
   },
   { immediate: true },
diff --git a/assets/components/SwarmMenu.vue b/assets/components/SwarmMenu.vue
index 29075e07..c89caedd 100644
--- a/assets/components/SwarmMenu.vue
+++ b/assets/components/SwarmMenu.vue
@@ -46,37 +46,13 @@
         </ul>
       </details>
     </li>
-
-    <li v-if="customGroups.length > 0">
-      <details open>
-        <summary class="text-base-content/80 font-light">
-          <ph:bounding-box-fill />
-          {{ $t("label.custom-groups") }}
-        </summary>
-        <ul>
-          <li v-for="group in customGroups" :key="group.name">
-            <router-link :to="{ name: '/group/[name]', params: { name: group.name } }" active-class="menu-active">
-              <ph:stack-simple />
-              <div class="truncate">
-                {{ group.name }}
-              </div>
-            </router-link>
-          </li>
-        </ul>
-      </details>
-    </li>
   </ul>
 </template>
 
 <script lang="ts" setup>
 const store = useSwarmStore();
 
-const { stacks, services, customGroups } = storeToRefs(store);
+const { stacks, services } = storeToRefs(store);
 
 const servicesWithoutStacks = computed(() => services.value.filter((service) => !service.stack));
 </script>
-<style scoped>
-.menu {
-  @apply text-[0.95rem];
-}
-</style>
diff --git a/assets/pages/container/[id].vue b/assets/pages/container/[id].vue
index d1f2864c..220d46c7 100644
--- a/assets/pages/container/[id].vue
+++ b/assets/pages/container/[id].vue
@@ -78,5 +78,5 @@ watchEffect(() => {
 </script>
 <route lang="yaml">
 meta:
-  containerMode: true
+  menu: host
 </route>
diff --git a/assets/pages/group/[name].vue b/assets/pages/group/[name].vue
index a5f09d66..12639509 100644
--- a/assets/pages/group/[name].vue
+++ b/assets/pages/group/[name].vue
@@ -22,5 +22,5 @@ watchEffect(() => {
 </script>
 <route lang="yaml">
 meta:
-  swarmMode: true
+  menu: group
 </route>
diff --git a/assets/pages/host/[id].vue b/assets/pages/host/[id].vue
index 4c46c594..045a8cac 100644
--- a/assets/pages/host/[id].vue
+++ b/assets/pages/host/[id].vue
@@ -26,5 +26,5 @@ watchEffect(() => {
 </script>
 <route lang="yaml">
 meta:
-  containerMode: true
+  menu: host
 </route>
diff --git a/assets/pages/merged/[ids].vue b/assets/pages/merged/[ids].vue
index 4f69f1e1..3fdcb882 100644
--- a/assets/pages/merged/[ids].vue
+++ b/assets/pages/merged/[ids].vue
@@ -22,5 +22,5 @@ watchEffect(() => {
 </script>
 <route lang="yaml">
 meta:
-  containerMode: true
+  menu: host
 </route>
diff --git a/assets/pages/service/[name].vue b/assets/pages/service/[name].vue
index 9641d841..3bcb65a2 100644
--- a/assets/pages/service/[name].vue
+++ b/assets/pages/service/[name].vue
@@ -28,5 +28,5 @@ watchEffect(() => {
 </script>
 <route lang="yaml">
 meta:
-  swarmMode: true
+  menu: swarm
 </route>
diff --git a/assets/pages/stack/[name].vue b/assets/pages/stack/[name].vue
index cbacae59..3f67b5da 100644
--- a/assets/pages/stack/[name].vue
+++ b/assets/pages/stack/[name].vue
@@ -28,5 +28,5 @@ watchEffect(() => {
 </script>
 <route lang="yaml">
 meta:
-  swarmMode: true
+  menu: swarm
 </route>
diff --git a/locales/da.yml b/locales/da.yml
index a45f44cb..5ddd8d61 100644
--- a/locales/da.yml
+++ b/locales/da.yml
@@ -34,7 +34,9 @@ label:
   per-page: Rækker per side
   swarm-mode: Swarm Tilstand
   services: Tjenester
-  custom-groups: Brugerdefinerede Grupper
+  host-menu: Værter og Containere
+  swarm-menu: Tjenester og Stacks
+  group-menu: Brugerdefinerede Grupper
 
 tooltip:
   search: Søg containere (⌘ + k, ⌃k)
diff --git a/locales/de.yml b/locales/de.yml
index 41012c5a..13034e61 100644
--- a/locales/de.yml
+++ b/locales/de.yml
@@ -30,7 +30,9 @@ label:
   swarm-mode: Swarm Modus
   services: Service
   running: Laufende
-  custom-groups: Benutzerdefinierte Gruppen
+  host-menu: Hosts und Container
+  swarm-menu: Services und Stacks
+  group-menu: Benutzerdefinierte Gruppen
   total-cpu-usage: Gesamte CPU Auslastung
   total-mem-usage: Gesamte Speicher Auslastung
   dozzle-version: Dozzle Version
diff --git a/locales/en.yml b/locales/en.yml
index c2ae70e2..061a4f1b 100644
--- a/locales/en.yml
+++ b/locales/en.yml
@@ -27,8 +27,9 @@ label:
   avg-mem: Avg. MEM (%)
   pinned: Pinned
   per-page: Rows per page
-  swarm-mode: Swarm Mode
-  custom-groups: Custom Groups
+  host-menu: Hosts and Containers
+  swarm-menu: Services and Stacks
+  group-menu: Custom Groups
 tooltip:
   search: Search containers (⌘ + k, ⌃k)
   pin-column: Pin as column
diff --git a/locales/es.yml b/locales/es.yml
index fb632ce2..5ed81e05 100644
--- a/locales/es.yml
+++ b/locales/es.yml
@@ -34,7 +34,9 @@ label:
   per-page: Filas por página
   swarm-mode: Modo Swarm
   services: Servicios
-  custom-groups: Grupos Personalizados
+  host-menu: Hosts y Contenedores
+  swarm-menu: Servicios y Stacks
+  group-menu: Grupos Personalizados
 tooltip:
   search: Buscar contenedores (⌘ + K, CTRL + K)
   pin-column: Anclar como columna
diff --git a/locales/fr.yml b/locales/fr.yml
index 8aeaa905..a47c2358 100644
--- a/locales/fr.yml
+++ b/locales/fr.yml
@@ -26,7 +26,9 @@ label:
   per-page: Colonnes par page
   swarm-mode: Mode Swarm
   services: Services
-  custom-groups: Groupes personnalisés
+  host-menu: Hôtes et Conteneurs
+  swarm-menu: Services et Stacks
+  group-menu: Groupes Personnalisés
 
 tooltip:
   search: Recherche de conteneurs (⌘ + k, ⌃k)
diff --git a/locales/it.yml b/locales/it.yml
index de1f008a..eb7318ee 100644
--- a/locales/it.yml
+++ b/locales/it.yml
@@ -29,6 +29,9 @@ label:
   avg-cpu: CPU (%)
   avg-mem: MEM (%)
   pinned: Spuntato
+  host-menu: Host e Container
+  swarm-menu: Servizi e Stack
+  group-menu: Gruppi Personalizzati
 tooltip:
   merge-services: Unisci tutti i servizi in una vista
   merge-containers: Unisci tutti i container in una vista
@@ -55,7 +58,7 @@ error:
         message: >-
           Dozzle ha trovato un container simile {containerId} in esecuzione sullo stesso
           host e passerà automaticamente ad esso a meno che non si faccia clic su 'Annulla'.
-  
+
     settings:
       log:
         preview: Questa è un'anteprima dei log
diff --git a/locales/pl.yml b/locales/pl.yml
index fa587325..f5da608c 100644
--- a/locales/pl.yml
+++ b/locales/pl.yml
@@ -29,7 +29,9 @@ label:
   avg-mem: Średnie zużycie pamięci (%)
   pinned: Przypięte
   per-page: Wierszy na strone
-
+  host-menu: Hosty i Kontenery
+  swarm-menu: Usługi i Stosy
+  group-menu: Grupy Niestandardowe
 tooltip:
   search: Przeszukaj kontenery (⌘ + k, ⌃k)
   pin-column: Przypnij jako kolumna
diff --git a/locales/pr.yml b/locales/pr.yml
index 3af956d1..158f0fd5 100644
--- a/locales/pr.yml
+++ b/locales/pr.yml
@@ -23,6 +23,9 @@ label:
   created: Criado
   avg-cpu: Média de CPU (%)
   avg-mem: Média de MEM (%)
+  host-menu: Anfitriões e Contentores
+  swarm-menu: Serviços e Stacks
+  group-menu: Grupos Personalizados
 tooltip:
   search: Pesquisar contentores (⌘ + K, CTRL + K)
   pin-column: Alfinete como coluna
diff --git a/locales/ru.yml b/locales/ru.yml
index 2df8a343..0b987140 100644
--- a/locales/ru.yml
+++ b/locales/ru.yml
@@ -25,6 +25,9 @@ label:
   created: Создан
   avg-cpu: средний процессор (%)
   avg-mem: средняя память (%)
+  host-menu: Хосты и Контейнеры
+  swarm-menu: Сервисы и Стеки
+  group-menu: Пользовательские Группы
 tooltip:
   search: Поиск контейнеров (⌘ + k, ⌃k)
   pin-column: Закрепить столбец
diff --git a/locales/tr.yml b/locales/tr.yml
index 0191ab42..5bde49a8 100644
--- a/locales/tr.yml
+++ b/locales/tr.yml
@@ -27,6 +27,9 @@ label:
   avg-cpu: Ort. CPU (%)
   avg-mem: Ort. Bellek (%)
   pinned: Sabitlenmiş
+  host-menu: Sunucular ve Konteynerler
+  swarm-menu: Servisler ve Yığınlar
+  group-menu: Özel Gruplar
 tooltip:
   search: Konteynerlerde ara (⌘ + k, ⌃k)
   pin-column: Sütun olarak sabitle
diff --git a/locales/zh-tw.yml b/locales/zh-tw.yml
index 18098970..45da9b61 100644
--- a/locales/zh-tw.yml
+++ b/locales/zh-tw.yml
@@ -33,6 +33,9 @@ label:
   swarm-mode: Swarm 模式
   services: 服務
   custom-groups: 自訂群組
+  host-menu: 主機和容器
+  swarm-menu: 服務和堆疊
+  group-menu: 自定義群組
 tooltip:
   search: 查詢容器 (⌘ + k, ⌃k)
   pin-column: 固定此列
diff --git a/locales/zh.yml b/locales/zh.yml
index bcccb38d..483f5c16 100644
--- a/locales/zh.yml
+++ b/locales/zh.yml
@@ -35,6 +35,9 @@ label:
   swarm-mode: 集群模式
   services: 服务
   custom-groups: 自定义组
+  host-menu: 主机和容器
+  swarm-menu: 服务和堆栈
+  group-menu: 自定义组
 tooltip:
   search: 搜索 (⌘ + k, ⌃k)
   pin-column: 固定为列