feat: supports grouping containers always (#4272)

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

locales/id.yml

@@ -103,6 +103,7 @@ settings:
   color-scheme: Skema warna
   options: Opsi
   show-stopped-containers: Tampilkan kontainer yang dihentikan
+  group-containers: Kelompokkan kontainer berdasarkan namespace
   about: Tentang
   search: Aktifkan pencarian dengan Dozzle menggunakan
   using-version: Anda menggunakan <a href="https://dozzle.dev/" target="_blank" rel="noreferrer noopener">Dozzle</a> {version}.

locales/it.yml

@@ -95,6 +95,7 @@ settings:
   color-scheme: Tema colori
   options: Opzioni
   show-stopped-containers: Visualizza i container arrestati
+  group-containers: Raggruppa i container per namespace
   about: Circa
   search: Abilita la ricerca attraverso Dozzle
   using-version: Stai utilizzando <a href="https://dozzle.dev/" target="_blank" rel="noreferrer noopener">Dozzle</a> {version}.

locales/ko.yml

@@ -98,6 +98,7 @@ settings:
   color-scheme: 색상 테마
   options: 옵션
   show-stopped-containers: 중지된 컨테이너 보기
+  group-containers: 네임스페이스별로 컨테이너 그룹화
   about: 정보
   search: Dozzle 검색 기능 사용
   using-version: <a href="https://dozzle.dev/" target="_blank" rel="noreferrer noopener">Dozzle</a> {version}을 사용하고 있습니다.

locales/nl.yml

@@ -96,6 +96,7 @@ settings:
   color-scheme: Kleurmodus
   options: Opties
   show-stopped-containers: Gestopte containers tonen
+  group-containers: Groepeer containers op namespace
   about: Over
   search: Doorzoeken inschakelen via Dozzle
   using-version: Je gebruikt <a href="https://dozzle.dev/" target="_blank" rel="noreferrer noopener">Dozzle</a> {version}.

locales/pl.yml

@@ -101,6 +101,7 @@ settings:
   color-scheme: Motyw
   options: Opcje
   show-stopped-containers: Pokaż zatrzymane kontenery
+  group-containers: Grupuj kontenery według przestrzeni nazw
   about: Informacje
   search: Włącz szukanie z dozzle
   using-version: Używasz <a href="https://dozzle.dev/" target="_blank" rel="noreferrer noopener">Dozzle</a> w wersji {version}.

locales/pr.yml

@@ -103,6 +103,7 @@ settings:
   options: Opções
   datetime-format: Formato de data e hora
   show-stopped-containers: Mostrar contentores parados
+  group-containers: Agrupar contentores por namespace
   about: Acerca de
   search: Habilitar a pesquisa com Dozzle usando
   using-version: Está a usar <a href="https://dozzle.dev/" target="_blank" rel="noreferrer noopener">Dozzle</a> {version}.

locales/pt.yml

@@ -95,6 +95,7 @@ settings:
   color-scheme: Esquema de cores
   options: Opções
   show-stopped-containers: Mostrar containers parados
+  group-containers: Agrupar containers por namespace
   about: Sobre
   search: Habilitar pesquisa com Dozzle usando
   using-version: Você está usando <a href="https://dozzle.dev/" target="_blank" rel="noreferrer noopener">Dozzle</a> {version}.

locales/ru.yml

@@ -95,6 +95,7 @@ settings:
   color-scheme: Цветовая схема
   options: Опции
   show-stopped-containers: Показывать остановленные контейнеры
+  group-containers: Группировать контейнеры по пространству имён
   about: Информация
   search: Включить поиск с помощью Dozzle, используя
   using-version: Вы используете <a href="https://dozzle.dev/" target="_blank" rel="noreferrer noopener">Dozzle</a> {version}.

locales/sl.yml

@@ -95,6 +95,7 @@ settings:
   color-scheme: Barvna shema
   options: Možnosti
   show-stopped-containers: Prikaži ustavljene zabojnike
+  group-containers: Združi zabojnike po imenskem prostoru
   about: O programu
   search: Omogočite iskanje z Dozzle z uporabo
   update-available: Nova različica je na voljo! Posodobi na <a href="{href}"

locales/tr.yml

@@ -104,6 +104,7 @@ settings:
   color-scheme: Renk düzeni
   options: Seçenekler
   show-stopped-containers: Durdurulan konteynerleri göster
+  group-containers: Konteynerleri ad alanına göre grupla
   about: Hakkında
   search: Dozzle kullanarak aramayı etkinleştir
   using-version: <a href="https://dozzle.dev/" target="_blank" rel="noreferrer noopener">Dozzle</a> {version} kullanıyorsunuz.

locales/zh-tw.yml

@@ -97,6 +97,7 @@ settings:
   color-scheme: 顏色設定
   options: 選項
   show-stopped-containers: 顯示已停止的容器
+  group-containers: 依命名空間分組容器
   about: 關於
   search: 啟用 Dozzle 搜尋功能
   using-version: 您目前使用的是 <a href="https://dozzle.dev/" target="_blank" rel="noreferrer noopener">Dozzle</a> {version}。

locales/zh.yml

@@ -95,6 +95,7 @@ settings:
   color-scheme: 颜色方案
   options: 选项
   show-stopped-containers: 显示已停止的容器
+  group-containers: 按命名空间分组容器
   about: 关于
   search: 使用Dozzle启用搜索
   using-version: 您正在使用<a href="https://dozzle.dev/" target="_blank" rel="noreferrer noopener">Dozzle</a> {version}。