feat: supports grouping containers always (#4272)

Author: amir20

assets/auto-imports.d.ts

@@ -56,6 +56,7 @@ declare global {
   const getCurrentWatcher: typeof import('vue').getCurrentWatcher
   const getDeep: typeof import('./utils/index').getDeep
   const globalShowPopup: typeof import('./composable/popup').globalShowPopup
+  const groupContainers: typeof import('./stores/settings').groupContainers
   const h: typeof import('vue').h
   const hashCode: typeof import('./utils/index').hashCode
   const hourStyle: typeof import('./stores/settings').hourStyle
@@ -456,6 +457,7 @@ declare module 'vue' {
     readonly getCurrentWatcher: UnwrapRef<typeof import('vue')['getCurrentWatcher']>
     readonly getDeep: UnwrapRef<typeof import('./utils/index')['getDeep']>
     readonly globalShowPopup: UnwrapRef<typeof import('./composable/popup')['globalShowPopup']>
+    readonly groupContainers: UnwrapRef<typeof import('./stores/settings')['groupContainers']>
     readonly h: UnwrapRef<typeof import('vue')['h']>
     readonly hashCode: UnwrapRef<typeof import('./utils/index')['hashCode']>
     readonly hourStyle: UnwrapRef<typeof import('./stores/settings')['hourStyle']>

assets/components/HostMenu.vue

@@ -121,7 +121,7 @@
 <script lang="ts" setup>
 import { Container } from "@/models/Container";
 import { sessionHost } from "@/composable/storage";
-import { showAllContainers } from "@/stores/settings";
+import { showAllContainers, groupContainers } from "@/stores/settings";
 
 // @ts-ignore
 import Pin from "~icons/ph/map-pin-simple";
@@ -198,10 +198,15 @@ const menuItems = computed(() => {
     items.push({ label: "label.pinned", containers: pinned, icon: Pin });
   }
   for (const [label, containers] of Object.entries(namespaced).sort(([a], [b]) => a.localeCompare(b))) {
-    if (containers.length > 1) {
+    const shouldGroup =
+      groupContainers.value === "always" || (groupContainers.value === "at-least-2" && containers.length > 1);
+
+    if (shouldGroup) {
       items.push({ label, containers, icon: Stack });
     } else {
-      singular.push(containers[0]);
+      for (const container of containers) {
+        singular.push(container);
+      }
     }
   }
 

assets/pages/settings.vue

@@ -158,6 +158,21 @@
           />
         </template>
       </LabeledInput>
+      <LabeledInput>
+        <template #label>
+          {{ $t("settings.group-containers") }}
+        </template>
+        <template #input>
+          <DropdownMenu
+            v-model="groupContainers"
+            :options="[
+              { label: 'Always', value: 'always' },
+              { label: 'At least 2', value: 'at-least-2' },
+              { label: 'Never', value: 'never' },
+            ]"
+          />
+        </template>
+      </LabeledInput>
 
       <Toggle v-model="search">
         {{ $t("settings.search") }} <key-shortcut char="f" class="align-top"></key-shortcut>
@@ -185,6 +200,7 @@ import {
   smallerScrollbars,
   softWrap,
   locale,
+  groupContainers,
 } from "@/stores/settings";
 
 import { availableLocales, i18n } from "@/modules/i18n";

assets/stores/settings.ts

@@ -16,6 +16,7 @@ export type Settings = {
   collapseNav: boolean;
   automaticRedirect: "instant" | "delayed" | "none";
   locale: string;
+  groupContainers: "always" | "at-least-2" | "never";
 };
 export const DEFAULT_SETTINGS: Settings = {
   search: true,
@@ -33,6 +34,7 @@ export const DEFAULT_SETTINGS: Settings = {
   collapseNav: false,
   automaticRedirect: "delayed",
   locale: "",
+  groupContainers: "at-least-2",
 };
 
 export const settings = useProfileStorage("settings", DEFAULT_SETTINGS);
@@ -61,4 +63,5 @@ export const {
   search,
   locale,
   automaticRedirect,
+  groupContainers,
 } = toRefs(settings.value);

internal/profile/disk.go

@@ -35,6 +35,7 @@ type Settings struct {
 	HourStyle         string  `json:"hourStyle,omitempty"`
 	DateLocale        string  `json:"dateLocale,omitempty"`
 	Locale            string  `json:"locale"`
+	GroupContainers   string  `json:"groupContainers,omitempty"`
 }
 
 type Profile struct {

locales/da.yml

@@ -95,6 +95,7 @@ settings:
   color-scheme: Farve skema
   options: Muligheder
   show-stopped-containers: Vis stoppet containere
+  group-containers: Gruppér containere efter namespace
   about: Omkring
   search: Aktiver søgning med Dozzle ved brug af
   using-version: Du bruger <a href="https://dozzle.dev/" target="_blank" rel="noreferrer noopener">Dozzle</a> {version}.

locales/de.yml

@@ -95,6 +95,7 @@ settings:
   color-scheme: Farbschema
   options: Optionen
   show-stopped-containers: Zeige gestoppte Container
+  group-containers: Container nach Namespace gruppieren
   about: Über
   search: Aktiviere die Suche mit Dozzle mit
   using-version: Du verwendest <a href="https://dozzle.dev/" target="_blank" rel="noreferrer noopener">Dozzle</a> {version}.

locales/en.yml

@@ -100,6 +100,7 @@ settings:
   color-scheme: Color scheme
   options: Options
   show-stopped-containers: Show stopped containers
+  group-containers: Group containers by namespace
   about: About
   search: Enable searching with Dozzle using
   using-version: You are using <a href="https://dozzle.dev/" target="_blank" rel="noreferrer noopener">Dozzle</a> {version}.

locales/es.yml

@@ -95,6 +95,7 @@ settings:
   color-scheme: Esquema de colores
   options: Opciones
   show-stopped-containers: Mostrar contenedores parados
+  group-containers: Agrupar contenedores por namespace
   about: Acerca de
   search: Activar la búsqueda con Dozzle mediante
   using-version: Estás usando <a href="https://dozzle.dev/" target="_blank" rel="noreferrer noopener">Dozzle</a> {version}.

locales/fr.yml

@@ -95,6 +95,7 @@ settings:
   color-scheme: Schéma de couleurs
   options: Options
   show-stopped-containers: Afficher les conteneurs arrêtés
+  group-containers: Regrouper les conteneurs par namespace
   about: A propos de
   search: Activer la recherche avec Dozzle en utilisant
   using-version: Vous utilisez <a href="https://dozzle.dev/" target="_blank" rel="noreferrer noopener">Dozzle</a> {version}.