feat: adds new menu for custom groups (#3573)

Author: amir20

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']

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>

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 },

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>

assets/pages/container/[id].vue

@@ -78,5 +78,5 @@ watchEffect(() => {
 </script>
 <route lang="yaml">
 meta:
-  containerMode: true
+  menu: host
 </route>

assets/pages/group/[name].vue

@@ -22,5 +22,5 @@ watchEffect(() => {
 </script>
 <route lang="yaml">
 meta:
-  swarmMode: true
+  menu: group
 </route>

assets/pages/host/[id].vue

@@ -26,5 +26,5 @@ watchEffect(() => {
 </script>
 <route lang="yaml">
 meta:
-  containerMode: true
+  menu: host
 </route>

assets/pages/merged/[ids].vue

@@ -22,5 +22,5 @@ watchEffect(() => {
 </script>
 <route lang="yaml">
 meta:
-  containerMode: true
+  menu: host
 </route>

assets/pages/service/[name].vue

@@ -28,5 +28,5 @@ watchEffect(() => {
 </script>
 <route lang="yaml">
 meta:
-  swarmMode: true
+  menu: swarm
 </route>

assets/pages/stack/[name].vue

@@ -28,5 +28,5 @@ watchEffect(() => {
 </script>
 <route lang="yaml">
 meta:
-  swarmMode: true
+  menu: swarm
 </route>