chore: release v7.0.2

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

.github/workflows/deploy.yml

@@ -29,9 +29,9 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Install Go
-        uses: actions/setup-go@v4
+        uses: actions/setup-go@v5
         with:
-          go-version: 1.21.x
+          go-version: 1.22.x
           check-latest: true
       - name: Checkout code
         uses: actions/checkout@v4
@@ -67,7 +67,7 @@ jobs:
             *.cache-to=type=gha,mode=max
       - name: Run Playwright tests
         run: docker compose up --exit-code-from playwright
-      - uses: actions/upload-artifact@v3
+      - uses: actions/upload-artifact@v4
         if: always()
         with:
           name: playwright-report
@@ -84,14 +84,14 @@ jobs:
         with:
           images: amir20/dozzle
       - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@f95db51fddba0c2d1ec667646a06c2ce06100226 # v3.0.0
+        uses: docker/setup-buildx-action@d70bba72b1f3fd22344832f00baa16ece964efeb # v3.3.0
       - name: Login to DockerHub
-        uses: docker/login-action@v3.0.0
+        uses: docker/login-action@v3.2.0
         with:
           username: ${{ secrets.DOCKER_USERNAME }}
           password: ${{ secrets.DOCKER_PASSWORD }}
       - name: Build and push
-        uses: docker/build-push-action@v5.1.0
+        uses: docker/build-push-action@v5.3.0
         with:
           push: true
           platforms: linux/amd64,linux/arm/v6,linux/arm/v7,linux/arm64/v8

.github/workflows/dev.yml

@@ -18,14 +18,14 @@ jobs:
         with:
           images: amir20/dozzle
       - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@f95db51fddba0c2d1ec667646a06c2ce06100226 # v3.0.0
+        uses: docker/setup-buildx-action@d70bba72b1f3fd22344832f00baa16ece964efeb # v3.3.0
       - name: Login to DockerHub
-        uses: docker/login-action@v3.0.0
+        uses: docker/login-action@v3.2.0
         with:
           username: ${{ secrets.DOCKER_USERNAME }}
           password: ${{ secrets.DOCKER_PASSWORD }}
       - name: Build and push
-        uses: docker/build-push-action@v5.1.0
+        uses: docker/build-push-action@v5.3.0
         with:
           push: true
           platforms: linux/amd64,linux/arm/v6,linux/arm/v7,linux/arm64/v8

.github/workflows/pages.yml

@@ -1,5 +1,3 @@
-# Sample workflow for building and deploying a VitePress site to GitHub Pages
-#
 name: Deploy VitePress site to Pages
 
 on:
@@ -36,7 +34,7 @@ jobs:
           node-version: latest
           cache: pnpm # or pnpm / yarn
       - name: Setup Pages
-        uses: actions/configure-pages@v3
+        uses: actions/configure-pages@v5
       - name: Install dependencies
         run: pnpm install
       - name: Build with VitePress
@@ -44,7 +42,7 @@ jobs:
           pnpm docs:build
           touch docs/.vitepress/dist/.nojekyll
       - name: Upload artifact
-        uses: actions/upload-pages-artifact@v2
+        uses: actions/upload-pages-artifact@v3
         with:
           path: docs/.vitepress/dist
 
@@ -59,4 +57,4 @@ jobs:
     steps:
       - name: Deploy to GitHub Pages
         id: deployment
-        uses: actions/deploy-pages@v2
+        uses: actions/deploy-pages@v4

.github/workflows/test.yml

@@ -52,14 +52,18 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Install Go
-        uses: actions/setup-go@v4
+        uses: actions/setup-go@v5
         with:
-          go-version: 1.21.x
+          go-version: 1.22.x
           check-latest: true
       - name: Checkout code
         uses: actions/checkout@v4
       - name: Run Go Tests with Coverage
         run: make test SKIP_ASSET=1
+      - name: Stactic checker
+        uses: dominikh/staticcheck-action@v1.3.1
+        with:
+          install-go: false
   int-test:
     name: Integration Tests
     timeout-minutes: 60
@@ -90,7 +94,7 @@ jobs:
             *.cache-to=type=gha,mode=max
       - name: Run Playwright tests
         run: docker compose up --exit-code-from playwright
-      - uses: actions/upload-artifact@v3
+      - uses: actions/upload-artifact@v4
         if: always()
         with:
           name: playwright-report

.gitignore

@@ -1,5 +1,5 @@
 certs
-data
+/data
 dist
 node_modules
 .cache

.reflex

@@ -1 +1 @@
--r '\.(go)$' -R 'node_modules' -G '\*\_test.go' -s -- go run main.go --level debug
+-r '\.(go)$' -R 'node_modules' -G '\*\_test.go' -s -- go run -race main.go --level debug

Dockerfile

@@ -1,5 +1,5 @@
 # Build assets
-FROM --platform=$BUILDPLATFORM node:21-alpine as node
+FROM --platform=$BUILDPLATFORM node:21.7.3-alpine as node
 
 RUN corepack enable
 
@@ -14,7 +14,7 @@ COPY package.json ./
 RUN pnpm install --offline --ignore-scripts --no-optional
 
 # Copy assets and translations to build
-COPY .* *.config.ts *.config.js *.config.cts ./
+COPY .* *.config.ts *.config.js *.config.cjs ./
 COPY assets ./assets
 COPY locales ./locales
 COPY public ./public
@@ -22,7 +22,7 @@ COPY public ./public
 # Build assets
 RUN pnpm build
 
-FROM --platform=$BUILDPLATFORM golang:1.21.4-alpine AS builder
+FROM --platform=$BUILDPLATFORM golang:1.22.3-alpine AS builder
 
 RUN apk add --no-cache ca-certificates && mkdir /dozzle
 

Makefile

@@ -15,7 +15,7 @@ fake_assets:
 
 .PHONY: test
 test: fake_assets
-	go test -cover ./...
+	go test -cover -race ./...
 
 .PHONY: build
 build: dist

README.md

@@ -31,7 +31,7 @@ Dozzle is a small container (4 MB compressed). Pull the latest release with:
 
 The simplest way to use dozzle is to run the docker container. Also, mount the Docker Unix socket with `--volume` to `/var/run/docker.sock`:
 
-    $ docker run --name dozzle -d --volume=/var/run/docker.sock:/var/run/docker.sock -p 8888:8080 amir20/dozzle:latest
+    $ docker run --name dozzle -d --volume=/var/run/docker.sock:/var/run/docker.sock:ro -p 8888:8080 amir20/dozzle:latest
 
 Dozzle will be available at [http://localhost:8888/](http://localhost:8888/).
 
@@ -43,9 +43,9 @@ Here is the Docker Compose file:
         container_name: dozzle
         image: amir20/dozzle:latest
         volumes:
-          - /var/run/docker.sock:/var/run/docker.sock
+          - /var/run/docker.sock:/var/run/docker.sock:ro
         ports:
-          - 8080:8080
+          - 8888:8080
 
 For advanced options like [authentication](https://dozzle.dev/guide/authentication), [remote hosts](https://dozzle.dev/guide/remote-hosts) or common [questions](https://dozzle.dev/guide/faq) see documentation at [dozzle.dev](https://dozzle.dev/guide/getting-started).
 
@@ -76,7 +76,7 @@ If it's not enabled please follow [this tutorial](https://github.com/containers/
 Once you have the podman remote socket you can run Dozzle on podman.
 
 ```
-podman run --volume=/run/user/1000/podman/podman.sock:/var/run/docker.sock -d -p 8080:8080 amir20/dozzle:latest
+podman run --volume=/run/user/1000/podman/podman.sock:/var/run/docker.sock:ro -d -p 8888:8080 amir20/dozzle:latest
 ```
 
 ## Security
@@ -93,19 +93,21 @@ If you do not want to be tracked at all, see the `--no-analytics` flag below.
 
 Dozzle follows the [12-factor](https://12factor.net/) model. Configurations can use the CLI flags or environment variables. The table below outlines all supported options and their respective env vars.
 
-| Flag             | Env Variable           | Default |
-| ---------------- | ---------------------- | ------- |
-| `--addr`         | `DOZZLE_ADDR`          | `:8080` |
-| `--base`         | `DOZZLE_BASE`          | `/`     |
-| `--hostname`     | `DOZZLE_HOSTNAME`      | `""`    |
-| `--level`        | `DOZZLE_LEVEL`         | `info`  |
-| `--filter`       | `DOZZLE_FILTER`        | `""`    |
-| `--username`     | `DOZZLE_USERNAME`      | `""`    |
-| `--password`     | `DOZZLE_PASSWORD`      | `""`    |
-| `--usernamefile` | `DOZZLE_USERNAME_FILE` | `""`    |
-| `--passwordfile` | `DOZZLE_PASSWORD_FILE` | `""`    |
-| `--no-analytics` | `DOZZLE_NO_ANALYTICS`  | false   |
-| `--remote-host`  | `DOZZLE_REMOTE_HOST`   |         |
+| Flag                        | Env Variable                     | Default        |
+| --------------------------- | -------------------------------- | -------------- |
+| `--addr`                    | `DOZZLE_ADDR`                    | `:8080`        |
+| `--base`                    | `DOZZLE_BASE`                    | `/`            |
+| `--hostname`                | `DOZZLE_HOSTNAME`                | `""`           |
+| `--level`                   | `DOZZLE_LEVEL`                   | `info`         |
+| `--auth-provider`           | `DOZZLE_AUTH_PROVIDER`           | `none`         |
+| `--auth-header-user`        | `DOZZLE_AUTH_HEADER_USER`        | `Remote-User`  |
+| `--auth-header-email`       | `DOZZLE_AUTH_HEADER_EMAIL`       | `Remote-Email` |
+| `--auth-header-name`        | `DOZZLE_AUTH_HEADER_NAME`        | `Remote-Name`  |
+| `--enable-actions`          | `DOZZLE_ENABLE_ACTIONS`          | false          |
+| `--wait-for-docker-seconds` | `DOZZLE_WAIT_FOR_DOCKER_SECONDS` | 0              |
+| `--filter`                  | `DOZZLE_FILTER`                  | `""`           |
+| `--no-analytics`            | `DOZZLE_NO_ANALYTICS`            | false          |
+| `--remote-host`             | `DOZZLE_REMOTE_HOST`             |                |
 
 ## Support
 

assets/App.vue

@@ -3,6 +3,7 @@
 </template>
 
 <script lang="ts" setup>
+const mode = useColorMode();
 watchEffect(() => {
   if (smallerScrollbars.value) {
     document.documentElement.classList.add("has-custom-scrollbars");
@@ -10,16 +11,11 @@ watchEffect(() => {
     document.documentElement.classList.remove("has-custom-scrollbars");
   }
 
-  switch (lightTheme.value) {
-    case "dark":
-      document.documentElement.setAttribute("data-theme", "dark");
-      break;
-    case "light":
-      document.documentElement.setAttribute("data-theme", "light");
-      break;
-    default:
-      document.documentElement.removeAttribute("data-theme");
+  let theme = lightTheme.value;
+  if (theme === "auto") {
+    theme = mode.value;
   }
+  document.documentElement.setAttribute("data-theme", theme);
 });
 </script>
 <style lang="postcss">

assets/auto-imports.d.ts

@@ -20,6 +20,7 @@ declare global {
   const autoResetRef: typeof import('@vueuse/core')['autoResetRef']
   const automaticRedirect: typeof import('./stores/settings')['automaticRedirect']
   const collapseNav: typeof import('./stores/settings')['collapseNav']
+  const compact: typeof import('./stores/settings')['compact']
   const computed: typeof import('vue')['computed']
   const computedAsync: typeof import('@vueuse/core')['computedAsync']
   const computedEager: typeof import('@vueuse/core')['computedEager']
@@ -40,6 +41,7 @@ declare global {
   const createTemplatePromise: typeof import('@vueuse/core')['createTemplatePromise']
   const createUnrefFn: typeof import('@vueuse/core')['createUnrefFn']
   const customRef: typeof import('vue')['customRef']
+  const dateLocale: typeof import('./stores/settings')['dateLocale']
   const debouncedRef: typeof import('@vueuse/core')['debouncedRef']
   const debouncedWatch: typeof import('@vueuse/core')['debouncedWatch']
   const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
@@ -56,6 +58,7 @@ declare global {
   const getDeep: typeof import('./utils/index')['getDeep']
   const globalShowPopup: typeof import('./composable/popup')['globalShowPopup']
   const h: typeof import('vue')['h']
+  const hashCode: typeof import('./utils/index')['hashCode']
   const hourStyle: typeof import('./stores/settings')['hourStyle']
   const ignorableWatch: typeof import('@vueuse/core')['ignorableWatch']
   const inject: typeof import('vue')['inject']
@@ -68,6 +71,8 @@ declare global {
   const isReadonly: typeof import('vue')['isReadonly']
   const isRef: typeof import('vue')['isRef']
   const lightTheme: typeof import('./stores/settings')['lightTheme']
+  const locale: typeof import('./stores/settings')['locale']
+  const loggingContextKey: typeof import('./composable/logContext')['loggingContextKey']
   const makeDestructurable: typeof import('@vueuse/core')['makeDestructurable']
   const mapActions: typeof import('pinia')['mapActions']
   const mapGetters: typeof import('pinia')['mapGetters']
@@ -97,11 +102,12 @@ declare global {
   const onUnmounted: typeof import('vue')['onUnmounted']
   const onUpdated: typeof import('vue')['onUpdated']
   const pausableWatch: typeof import('@vueuse/core')['pausableWatch']
-  const persistentVisibleKeys: typeof import('./composable/storage')['persistentVisibleKeys']
+  const persistentVisibleKeysForContainer: typeof import('./composable/storage')['persistentVisibleKeysForContainer']
   const pinnedContainers: typeof import('./composable/storage')['pinnedContainers']
   const provide: typeof import('vue')['provide']
   const provideContainerContext: typeof import('./composable/containerContext')['provideContainerContext']
   const provideLocal: typeof import('@vueuse/core')['provideLocal']
+  const provideLoggingContext: typeof import('./composable/logContext')['provideLoggingContext']
   const reactify: typeof import('@vueuse/core')['reactify']
   const reactifyObject: typeof import('@vueuse/core')['reactifyObject']
   const reactive: typeof import('vue')['reactive']
@@ -183,8 +189,10 @@ declare global {
   const useCloned: typeof import('@vueuse/core')['useCloned']
   const useColorMode: typeof import('@vueuse/core')['useColorMode']
   const useConfirmDialog: typeof import('@vueuse/core')['useConfirmDialog']
+  const useContainerActions: typeof import('./composable/containerActions')['useContainerActions']
   const useContainerContext: typeof import('./composable/containerContext')['useContainerContext']
   const useContainerStore: typeof import('./stores/container')['useContainerStore']
+  const useContainerStream: typeof import('./composable/eventStreams')['useContainerStream']
   const useCounter: typeof import('@vueuse/core')['useCounter']
   const useCssModule: typeof import('vue')['useCssModule']
   const useCssVar: typeof import('@vueuse/core')['useCssVar']
@@ -224,7 +232,9 @@ declare global {
   const useFullscreen: typeof import('@vueuse/core')['useFullscreen']
   const useGamepad: typeof import('@vueuse/core')['useGamepad']
   const useGeolocation: typeof import('@vueuse/core')['useGeolocation']
+  const useGroupedStream: typeof import('./composable/eventStreams')['useGroupedStream']
   const useHead: typeof import('@vueuse/head')['useHead']
+  const useHosts: typeof import('./stores/hosts')['useHosts']
   const useI18n: typeof import('vue-i18n')['useI18n']
   const useIdle: typeof import('@vueuse/core')['useIdle']
   const useImage: typeof import('@vueuse/core')['useImage']
@@ -236,13 +246,15 @@ declare global {
   const useLastChanged: typeof import('@vueuse/core')['useLastChanged']
   const useLink: typeof import('vue-router')['useLink']
   const useLocalStorage: typeof import('@vueuse/core')['useLocalStorage']
-  const useLogStream: typeof import('./composable/eventsource')['useLogStream']
+  const useLogSearchContext: typeof import('./composable/logSearchContext')['useLogSearchContext']
+  const useLoggingContext: typeof import('./composable/logContext')['useLoggingContext']
   const useMagicKeys: typeof import('@vueuse/core')['useMagicKeys']
   const useManualRefHistory: typeof import('@vueuse/core')['useManualRefHistory']
   const useMediaControls: typeof import('@vueuse/core')['useMediaControls']
   const useMediaQuery: typeof import('@vueuse/core')['useMediaQuery']
   const useMemoize: typeof import('@vueuse/core')['useMemoize']
   const useMemory: typeof import('@vueuse/core')['useMemory']
+  const useMergedStream: typeof import('./composable/eventStreams')['useMergedStream']
   const useMounted: typeof import('@vueuse/core')['useMounted']
   const useMouse: typeof import('@vueuse/core')['useMouse']
   const useMouseInElement: typeof import('@vueuse/core')['useMouseInElement']
@@ -259,6 +271,7 @@ declare global {
   const useParentElement: typeof import('@vueuse/core')['useParentElement']
   const usePerformanceObserver: typeof import('@vueuse/core')['usePerformanceObserver']
   const usePermission: typeof import('@vueuse/core')['usePermission']
+  const usePinnedLogsStore: typeof import('./stores/pinned')['usePinnedLogsStore']
   const usePointer: typeof import('@vueuse/core')['usePointer']
   const usePointerLock: typeof import('@vueuse/core')['usePointerLock']
   const usePointerSwipe: typeof import('@vueuse/core')['usePointerSwipe']
@@ -268,6 +281,7 @@ declare global {
   const usePreferredLanguages: typeof import('@vueuse/core')['usePreferredLanguages']
   const usePreferredReducedMotion: typeof import('@vueuse/core')['usePreferredReducedMotion']
   const usePrevious: typeof import('@vueuse/core')['usePrevious']
+  const useProfileStorage: typeof import('./composable/profileStorage')['useProfileStorage']
   const useRafFn: typeof import('@vueuse/core')['useRafFn']
   const useRefHistory: typeof import('@vueuse/core')['useRefHistory']
   const useReleases: typeof import('./stores/releases')['useReleases']
@@ -281,17 +295,21 @@ declare global {
   const useScrollLock: typeof import('@vueuse/core')['useScrollLock']
   const useSearchFilter: typeof import('./composable/search')['useSearchFilter']
   const useSeoMeta: typeof import('@vueuse/head')['useSeoMeta']
+  const useServiceStream: typeof import('./composable/eventStreams')['useServiceStream']
   const useSessionStorage: typeof import('@vueuse/core')['useSessionStorage']
   const useShare: typeof import('@vueuse/core')['useShare']
+  const useSimpleRefHistory: typeof import('./utils/index')['useSimpleRefHistory']
   const useSlots: typeof import('vue')['useSlots']
   const useSorted: typeof import('@vueuse/core')['useSorted']
   const useSpeechRecognition: typeof import('@vueuse/core')['useSpeechRecognition']
   const useSpeechSynthesis: typeof import('@vueuse/core')['useSpeechSynthesis']
+  const useStackStream: typeof import('./composable/eventStreams')['useStackStream']
   const useStepper: typeof import('@vueuse/core')['useStepper']
   const useStorage: typeof import('@vueuse/core')['useStorage']
   const useStorageAsync: typeof import('@vueuse/core')['useStorageAsync']
   const useStyleTag: typeof import('@vueuse/core')['useStyleTag']
   const useSupported: typeof import('@vueuse/core')['useSupported']
+  const useSwarmStore: typeof import('./stores/swarm')['useSwarmStore']
   const useSwipe: typeof import('@vueuse/core')['useSwipe']
   const useTemplateRefsList: typeof import('@vueuse/core')['useTemplateRefsList']
   const useTextDirection: typeof import('@vueuse/core')['useTextDirection']
@@ -348,10 +366,12 @@ declare global {
 declare global {
   // @ts-ignore
   export type { Component, ComponentPublicInstance, ComputedRef, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, VNode, WritableComputedRef } from 'vue'
+  import('vue')
 }
 // for vue template auto import
 import { UnwrapRef } from 'vue'
 declare module 'vue' {
+  interface GlobalComponents {}
   interface ComponentCustomProperties {
     readonly $$: UnwrapRef<typeof import('vue/macros')['$$']>
     readonly $: UnwrapRef<typeof import('vue/macros')['$']>
@@ -368,13 +388,13 @@ declare module 'vue' {
     readonly autoResetRef: UnwrapRef<typeof import('@vueuse/core')['autoResetRef']>
     readonly automaticRedirect: UnwrapRef<typeof import('./stores/settings')['automaticRedirect']>
     readonly collapseNav: UnwrapRef<typeof import('./stores/settings')['collapseNav']>
+    readonly compact: UnwrapRef<typeof import('./stores/settings')['compact']>
     readonly computed: UnwrapRef<typeof import('vue')['computed']>
     readonly computedAsync: UnwrapRef<typeof import('@vueuse/core')['computedAsync']>
     readonly computedEager: UnwrapRef<typeof import('@vueuse/core')['computedEager']>
     readonly computedInject: UnwrapRef<typeof import('@vueuse/core')['computedInject']>
     readonly computedWithControl: UnwrapRef<typeof import('@vueuse/core')['computedWithControl']>
     readonly config: UnwrapRef<typeof import('./stores/config')['default']>
-    readonly containerContext: UnwrapRef<typeof import('./composable/containerContext')['containerContext']>
     readonly controlledComputed: UnwrapRef<typeof import('@vueuse/core')['controlledComputed']>
     readonly controlledRef: UnwrapRef<typeof import('@vueuse/core')['controlledRef']>
     readonly createApp: UnwrapRef<typeof import('vue')['createApp']>
@@ -388,6 +408,7 @@ declare module 'vue' {
     readonly createTemplatePromise: UnwrapRef<typeof import('@vueuse/core')['createTemplatePromise']>
     readonly createUnrefFn: UnwrapRef<typeof import('@vueuse/core')['createUnrefFn']>
     readonly customRef: UnwrapRef<typeof import('vue')['customRef']>
+    readonly dateLocale: UnwrapRef<typeof import('./stores/settings')['dateLocale']>
     readonly debouncedRef: UnwrapRef<typeof import('@vueuse/core')['debouncedRef']>
     readonly debouncedWatch: UnwrapRef<typeof import('@vueuse/core')['debouncedWatch']>
     readonly defineAsyncComponent: UnwrapRef<typeof import('vue')['defineAsyncComponent']>
@@ -404,6 +425,7 @@ declare module 'vue' {
     readonly getDeep: UnwrapRef<typeof import('./utils/index')['getDeep']>
     readonly globalShowPopup: UnwrapRef<typeof import('./composable/popup')['globalShowPopup']>
     readonly h: UnwrapRef<typeof import('vue')['h']>
+    readonly hashCode: UnwrapRef<typeof import('./utils/index')['hashCode']>
     readonly hourStyle: UnwrapRef<typeof import('./stores/settings')['hourStyle']>
     readonly ignorableWatch: UnwrapRef<typeof import('@vueuse/core')['ignorableWatch']>
     readonly inject: UnwrapRef<typeof import('vue')['inject']>
@@ -416,6 +438,8 @@ declare module 'vue' {
     readonly isReadonly: UnwrapRef<typeof import('vue')['isReadonly']>
     readonly isRef: UnwrapRef<typeof import('vue')['isRef']>
     readonly lightTheme: UnwrapRef<typeof import('./stores/settings')['lightTheme']>
+    readonly locale: UnwrapRef<typeof import('./stores/settings')['locale']>
+    readonly loggingContextKey: UnwrapRef<typeof import('./composable/logContext')['loggingContextKey']>
     readonly makeDestructurable: UnwrapRef<typeof import('@vueuse/core')['makeDestructurable']>
     readonly mapActions: UnwrapRef<typeof import('pinia')['mapActions']>
     readonly mapGetters: UnwrapRef<typeof import('pinia')['mapGetters']>
@@ -445,11 +469,11 @@ declare module 'vue' {
     readonly onUnmounted: UnwrapRef<typeof import('vue')['onUnmounted']>
     readonly onUpdated: UnwrapRef<typeof import('vue')['onUpdated']>
     readonly pausableWatch: UnwrapRef<typeof import('@vueuse/core')['pausableWatch']>
-    readonly persistentVisibleKeys: UnwrapRef<typeof import('./composable/storage')['persistentVisibleKeys']>
+    readonly persistentVisibleKeysForContainer: UnwrapRef<typeof import('./composable/storage')['persistentVisibleKeysForContainer']>
     readonly pinnedContainers: UnwrapRef<typeof import('./composable/storage')['pinnedContainers']>
     readonly provide: UnwrapRef<typeof import('vue')['provide']>
-    readonly provideContainerContext: UnwrapRef<typeof import('./composable/containerContext')['provideContainerContext']>
     readonly provideLocal: UnwrapRef<typeof import('@vueuse/core')['provideLocal']>
+    readonly provideLoggingContext: UnwrapRef<typeof import('./composable/logContext')['provideLoggingContext']>
     readonly reactify: UnwrapRef<typeof import('@vueuse/core')['reactify']>
     readonly reactifyObject: UnwrapRef<typeof import('@vueuse/core')['reactifyObject']>
     readonly reactive: UnwrapRef<typeof import('vue')['reactive']>
@@ -531,8 +555,9 @@ declare module 'vue' {
     readonly useCloned: UnwrapRef<typeof import('@vueuse/core')['useCloned']>
     readonly useColorMode: UnwrapRef<typeof import('@vueuse/core')['useColorMode']>
     readonly useConfirmDialog: UnwrapRef<typeof import('@vueuse/core')['useConfirmDialog']>
-    readonly useContainerContext: UnwrapRef<typeof import('./composable/containerContext')['useContainerContext']>
+    readonly useContainerActions: UnwrapRef<typeof import('./composable/containerActions')['useContainerActions']>
     readonly useContainerStore: UnwrapRef<typeof import('./stores/container')['useContainerStore']>
+    readonly useContainerStream: UnwrapRef<typeof import('./composable/eventStreams')['useContainerStream']>
     readonly useCounter: UnwrapRef<typeof import('@vueuse/core')['useCounter']>
     readonly useCssModule: UnwrapRef<typeof import('vue')['useCssModule']>
     readonly useCssVar: UnwrapRef<typeof import('@vueuse/core')['useCssVar']>
@@ -572,7 +597,9 @@ declare module 'vue' {
     readonly useFullscreen: UnwrapRef<typeof import('@vueuse/core')['useFullscreen']>
     readonly useGamepad: UnwrapRef<typeof import('@vueuse/core')['useGamepad']>
     readonly useGeolocation: UnwrapRef<typeof import('@vueuse/core')['useGeolocation']>
+    readonly useGroupedStream: UnwrapRef<typeof import('./composable/eventStreams')['useGroupedStream']>
     readonly useHead: UnwrapRef<typeof import('@vueuse/head')['useHead']>
+    readonly useHosts: UnwrapRef<typeof import('./stores/hosts')['useHosts']>
     readonly useI18n: UnwrapRef<typeof import('vue-i18n')['useI18n']>
     readonly useIdle: UnwrapRef<typeof import('@vueuse/core')['useIdle']>
     readonly useImage: UnwrapRef<typeof import('@vueuse/core')['useImage']>
@@ -584,13 +611,15 @@ declare module 'vue' {
     readonly useLastChanged: UnwrapRef<typeof import('@vueuse/core')['useLastChanged']>
     readonly useLink: UnwrapRef<typeof import('vue-router')['useLink']>
     readonly useLocalStorage: UnwrapRef<typeof import('@vueuse/core')['useLocalStorage']>
-    readonly useLogStream: UnwrapRef<typeof import('./composable/eventsource')['useLogStream']>
+    readonly useLogSearchContext: UnwrapRef<typeof import('./composable/logSearchContext')['useLogSearchContext']>
+    readonly useLoggingContext: UnwrapRef<typeof import('./composable/logContext')['useLoggingContext']>
     readonly useMagicKeys: UnwrapRef<typeof import('@vueuse/core')['useMagicKeys']>
     readonly useManualRefHistory: UnwrapRef<typeof import('@vueuse/core')['useManualRefHistory']>
     readonly useMediaControls: UnwrapRef<typeof import('@vueuse/core')['useMediaControls']>
     readonly useMediaQuery: UnwrapRef<typeof import('@vueuse/core')['useMediaQuery']>
     readonly useMemoize: UnwrapRef<typeof import('@vueuse/core')['useMemoize']>
     readonly useMemory: UnwrapRef<typeof import('@vueuse/core')['useMemory']>
+    readonly useMergedStream: UnwrapRef<typeof import('./composable/eventStreams')['useMergedStream']>
     readonly useMounted: UnwrapRef<typeof import('@vueuse/core')['useMounted']>
     readonly useMouse: UnwrapRef<typeof import('@vueuse/core')['useMouse']>
     readonly useMouseInElement: UnwrapRef<typeof import('@vueuse/core')['useMouseInElement']>
@@ -607,6 +636,7 @@ declare module 'vue' {
     readonly useParentElement: UnwrapRef<typeof import('@vueuse/core')['useParentElement']>
     readonly usePerformanceObserver: UnwrapRef<typeof import('@vueuse/core')['usePerformanceObserver']>
     readonly usePermission: UnwrapRef<typeof import('@vueuse/core')['usePermission']>
+    readonly usePinnedLogsStore: UnwrapRef<typeof import('./stores/pinned')['usePinnedLogsStore']>
     readonly usePointer: UnwrapRef<typeof import('@vueuse/core')['usePointer']>
     readonly usePointerLock: UnwrapRef<typeof import('@vueuse/core')['usePointerLock']>
     readonly usePointerSwipe: UnwrapRef<typeof import('@vueuse/core')['usePointerSwipe']>
@@ -616,6 +646,7 @@ declare module 'vue' {
     readonly usePreferredLanguages: UnwrapRef<typeof import('@vueuse/core')['usePreferredLanguages']>
     readonly usePreferredReducedMotion: UnwrapRef<typeof import('@vueuse/core')['usePreferredReducedMotion']>
     readonly usePrevious: UnwrapRef<typeof import('@vueuse/core')['usePrevious']>
+    readonly useProfileStorage: UnwrapRef<typeof import('./composable/profileStorage')['useProfileStorage']>
     readonly useRafFn: UnwrapRef<typeof import('@vueuse/core')['useRafFn']>
     readonly useRefHistory: UnwrapRef<typeof import('@vueuse/core')['useRefHistory']>
     readonly useReleases: UnwrapRef<typeof import('./stores/releases')['useReleases']>
@@ -629,17 +660,21 @@ declare module 'vue' {
     readonly useScrollLock: UnwrapRef<typeof import('@vueuse/core')['useScrollLock']>
     readonly useSearchFilter: UnwrapRef<typeof import('./composable/search')['useSearchFilter']>
     readonly useSeoMeta: UnwrapRef<typeof import('@vueuse/head')['useSeoMeta']>
+    readonly useServiceStream: UnwrapRef<typeof import('./composable/eventStreams')['useServiceStream']>
     readonly useSessionStorage: UnwrapRef<typeof import('@vueuse/core')['useSessionStorage']>
     readonly useShare: UnwrapRef<typeof import('@vueuse/core')['useShare']>
+    readonly useSimpleRefHistory: UnwrapRef<typeof import('./utils/index')['useSimpleRefHistory']>
     readonly useSlots: UnwrapRef<typeof import('vue')['useSlots']>
     readonly useSorted: UnwrapRef<typeof import('@vueuse/core')['useSorted']>
     readonly useSpeechRecognition: UnwrapRef<typeof import('@vueuse/core')['useSpeechRecognition']>
     readonly useSpeechSynthesis: UnwrapRef<typeof import('@vueuse/core')['useSpeechSynthesis']>
+    readonly useStackStream: UnwrapRef<typeof import('./composable/eventStreams')['useStackStream']>
     readonly useStepper: UnwrapRef<typeof import('@vueuse/core')['useStepper']>
     readonly useStorage: UnwrapRef<typeof import('@vueuse/core')['useStorage']>
     readonly useStorageAsync: UnwrapRef<typeof import('@vueuse/core')['useStorageAsync']>
     readonly useStyleTag: UnwrapRef<typeof import('@vueuse/core')['useStyleTag']>
     readonly useSupported: UnwrapRef<typeof import('@vueuse/core')['useSupported']>
+    readonly useSwarmStore: UnwrapRef<typeof import('./stores/swarm')['useSwarmStore']>
     readonly useSwipe: UnwrapRef<typeof import('@vueuse/core')['useSwipe']>
     readonly useTemplateRefsList: UnwrapRef<typeof import('@vueuse/core')['useTemplateRefsList']>
     readonly useTextDirection: UnwrapRef<typeof import('@vueuse/core')['useTextDirection']>
@@ -694,6 +729,7 @@ declare module 'vue' {
   }
 }
 declare module '@vue/runtime-core' {
+  interface GlobalComponents {}
   interface ComponentCustomProperties {
     readonly $$: UnwrapRef<typeof import('vue/macros')['$$']>
     readonly $: UnwrapRef<typeof import('vue/macros')['$']>
@@ -710,13 +746,13 @@ declare module '@vue/runtime-core' {
     readonly autoResetRef: UnwrapRef<typeof import('@vueuse/core')['autoResetRef']>
     readonly automaticRedirect: UnwrapRef<typeof import('./stores/settings')['automaticRedirect']>
     readonly collapseNav: UnwrapRef<typeof import('./stores/settings')['collapseNav']>
+    readonly compact: UnwrapRef<typeof import('./stores/settings')['compact']>
     readonly computed: UnwrapRef<typeof import('vue')['computed']>
     readonly computedAsync: UnwrapRef<typeof import('@vueuse/core')['computedAsync']>
     readonly computedEager: UnwrapRef<typeof import('@vueuse/core')['computedEager']>
     readonly computedInject: UnwrapRef<typeof import('@vueuse/core')['computedInject']>
     readonly computedWithControl: UnwrapRef<typeof import('@vueuse/core')['computedWithControl']>
     readonly config: UnwrapRef<typeof import('./stores/config')['default']>
-    readonly containerContext: UnwrapRef<typeof import('./composable/containerContext')['containerContext']>
     readonly controlledComputed: UnwrapRef<typeof import('@vueuse/core')['controlledComputed']>
     readonly controlledRef: UnwrapRef<typeof import('@vueuse/core')['controlledRef']>
     readonly createApp: UnwrapRef<typeof import('vue')['createApp']>
@@ -730,6 +766,7 @@ declare module '@vue/runtime-core' {
     readonly createTemplatePromise: UnwrapRef<typeof import('@vueuse/core')['createTemplatePromise']>
     readonly createUnrefFn: UnwrapRef<typeof import('@vueuse/core')['createUnrefFn']>
     readonly customRef: UnwrapRef<typeof import('vue')['customRef']>
+    readonly dateLocale: UnwrapRef<typeof import('./stores/settings')['dateLocale']>
     readonly debouncedRef: UnwrapRef<typeof import('@vueuse/core')['debouncedRef']>
     readonly debouncedWatch: UnwrapRef<typeof import('@vueuse/core')['debouncedWatch']>
     readonly defineAsyncComponent: UnwrapRef<typeof import('vue')['defineAsyncComponent']>
@@ -746,6 +783,7 @@ declare module '@vue/runtime-core' {
     readonly getDeep: UnwrapRef<typeof import('./utils/index')['getDeep']>
     readonly globalShowPopup: UnwrapRef<typeof import('./composable/popup')['globalShowPopup']>
     readonly h: UnwrapRef<typeof import('vue')['h']>
+    readonly hashCode: UnwrapRef<typeof import('./utils/index')['hashCode']>
     readonly hourStyle: UnwrapRef<typeof import('./stores/settings')['hourStyle']>
     readonly ignorableWatch: UnwrapRef<typeof import('@vueuse/core')['ignorableWatch']>
     readonly inject: UnwrapRef<typeof import('vue')['inject']>
@@ -758,6 +796,8 @@ declare module '@vue/runtime-core' {
     readonly isReadonly: UnwrapRef<typeof import('vue')['isReadonly']>
     readonly isRef: UnwrapRef<typeof import('vue')['isRef']>
     readonly lightTheme: UnwrapRef<typeof import('./stores/settings')['lightTheme']>
+    readonly locale: UnwrapRef<typeof import('./stores/settings')['locale']>
+    readonly loggingContextKey: UnwrapRef<typeof import('./composable/logContext')['loggingContextKey']>
     readonly makeDestructurable: UnwrapRef<typeof import('@vueuse/core')['makeDestructurable']>
     readonly mapActions: UnwrapRef<typeof import('pinia')['mapActions']>
     readonly mapGetters: UnwrapRef<typeof import('pinia')['mapGetters']>
@@ -787,11 +827,11 @@ declare module '@vue/runtime-core' {
     readonly onUnmounted: UnwrapRef<typeof import('vue')['onUnmounted']>
     readonly onUpdated: UnwrapRef<typeof import('vue')['onUpdated']>
     readonly pausableWatch: UnwrapRef<typeof import('@vueuse/core')['pausableWatch']>
-    readonly persistentVisibleKeys: UnwrapRef<typeof import('./composable/storage')['persistentVisibleKeys']>
+    readonly persistentVisibleKeysForContainer: UnwrapRef<typeof import('./composable/storage')['persistentVisibleKeysForContainer']>
     readonly pinnedContainers: UnwrapRef<typeof import('./composable/storage')['pinnedContainers']>
     readonly provide: UnwrapRef<typeof import('vue')['provide']>
-    readonly provideContainerContext: UnwrapRef<typeof import('./composable/containerContext')['provideContainerContext']>
     readonly provideLocal: UnwrapRef<typeof import('@vueuse/core')['provideLocal']>
+    readonly provideLoggingContext: UnwrapRef<typeof import('./composable/logContext')['provideLoggingContext']>
     readonly reactify: UnwrapRef<typeof import('@vueuse/core')['reactify']>
     readonly reactifyObject: UnwrapRef<typeof import('@vueuse/core')['reactifyObject']>
     readonly reactive: UnwrapRef<typeof import('vue')['reactive']>
@@ -873,8 +913,9 @@ declare module '@vue/runtime-core' {
     readonly useCloned: UnwrapRef<typeof import('@vueuse/core')['useCloned']>
     readonly useColorMode: UnwrapRef<typeof import('@vueuse/core')['useColorMode']>
     readonly useConfirmDialog: UnwrapRef<typeof import('@vueuse/core')['useConfirmDialog']>
-    readonly useContainerContext: UnwrapRef<typeof import('./composable/containerContext')['useContainerContext']>
+    readonly useContainerActions: UnwrapRef<typeof import('./composable/containerActions')['useContainerActions']>
     readonly useContainerStore: UnwrapRef<typeof import('./stores/container')['useContainerStore']>
+    readonly useContainerStream: UnwrapRef<typeof import('./composable/eventStreams')['useContainerStream']>
     readonly useCounter: UnwrapRef<typeof import('@vueuse/core')['useCounter']>
     readonly useCssModule: UnwrapRef<typeof import('vue')['useCssModule']>
     readonly useCssVar: UnwrapRef<typeof import('@vueuse/core')['useCssVar']>
@@ -914,7 +955,9 @@ declare module '@vue/runtime-core' {
     readonly useFullscreen: UnwrapRef<typeof import('@vueuse/core')['useFullscreen']>
     readonly useGamepad: UnwrapRef<typeof import('@vueuse/core')['useGamepad']>
     readonly useGeolocation: UnwrapRef<typeof import('@vueuse/core')['useGeolocation']>
+    readonly useGroupedStream: UnwrapRef<typeof import('./composable/eventStreams')['useGroupedStream']>
     readonly useHead: UnwrapRef<typeof import('@vueuse/head')['useHead']>
+    readonly useHosts: UnwrapRef<typeof import('./stores/hosts')['useHosts']>
     readonly useI18n: UnwrapRef<typeof import('vue-i18n')['useI18n']>
     readonly useIdle: UnwrapRef<typeof import('@vueuse/core')['useIdle']>
     readonly useImage: UnwrapRef<typeof import('@vueuse/core')['useImage']>
@@ -926,13 +969,15 @@ declare module '@vue/runtime-core' {
     readonly useLastChanged: UnwrapRef<typeof import('@vueuse/core')['useLastChanged']>
     readonly useLink: UnwrapRef<typeof import('vue-router')['useLink']>
     readonly useLocalStorage: UnwrapRef<typeof import('@vueuse/core')['useLocalStorage']>
-    readonly useLogStream: UnwrapRef<typeof import('./composable/eventsource')['useLogStream']>
+    readonly useLogSearchContext: UnwrapRef<typeof import('./composable/logSearchContext')['useLogSearchContext']>
+    readonly useLoggingContext: UnwrapRef<typeof import('./composable/logContext')['useLoggingContext']>
     readonly useMagicKeys: UnwrapRef<typeof import('@vueuse/core')['useMagicKeys']>
     readonly useManualRefHistory: UnwrapRef<typeof import('@vueuse/core')['useManualRefHistory']>
     readonly useMediaControls: UnwrapRef<typeof import('@vueuse/core')['useMediaControls']>
     readonly useMediaQuery: UnwrapRef<typeof import('@vueuse/core')['useMediaQuery']>
     readonly useMemoize: UnwrapRef<typeof import('@vueuse/core')['useMemoize']>
     readonly useMemory: UnwrapRef<typeof import('@vueuse/core')['useMemory']>
+    readonly useMergedStream: UnwrapRef<typeof import('./composable/eventStreams')['useMergedStream']>
     readonly useMounted: UnwrapRef<typeof import('@vueuse/core')['useMounted']>
     readonly useMouse: UnwrapRef<typeof import('@vueuse/core')['useMouse']>
     readonly useMouseInElement: UnwrapRef<typeof import('@vueuse/core')['useMouseInElement']>
@@ -949,6 +994,7 @@ declare module '@vue/runtime-core' {
     readonly useParentElement: UnwrapRef<typeof import('@vueuse/core')['useParentElement']>
     readonly usePerformanceObserver: UnwrapRef<typeof import('@vueuse/core')['usePerformanceObserver']>
     readonly usePermission: UnwrapRef<typeof import('@vueuse/core')['usePermission']>
+    readonly usePinnedLogsStore: UnwrapRef<typeof import('./stores/pinned')['usePinnedLogsStore']>
     readonly usePointer: UnwrapRef<typeof import('@vueuse/core')['usePointer']>
     readonly usePointerLock: UnwrapRef<typeof import('@vueuse/core')['usePointerLock']>
     readonly usePointerSwipe: UnwrapRef<typeof import('@vueuse/core')['usePointerSwipe']>
@@ -958,6 +1004,7 @@ declare module '@vue/runtime-core' {
     readonly usePreferredLanguages: UnwrapRef<typeof import('@vueuse/core')['usePreferredLanguages']>
     readonly usePreferredReducedMotion: UnwrapRef<typeof import('@vueuse/core')['usePreferredReducedMotion']>
     readonly usePrevious: UnwrapRef<typeof import('@vueuse/core')['usePrevious']>
+    readonly useProfileStorage: UnwrapRef<typeof import('./composable/profileStorage')['useProfileStorage']>
     readonly useRafFn: UnwrapRef<typeof import('@vueuse/core')['useRafFn']>
     readonly useRefHistory: UnwrapRef<typeof import('@vueuse/core')['useRefHistory']>
     readonly useReleases: UnwrapRef<typeof import('./stores/releases')['useReleases']>
@@ -971,17 +1018,21 @@ declare module '@vue/runtime-core' {
     readonly useScrollLock: UnwrapRef<typeof import('@vueuse/core')['useScrollLock']>
     readonly useSearchFilter: UnwrapRef<typeof import('./composable/search')['useSearchFilter']>
     readonly useSeoMeta: UnwrapRef<typeof import('@vueuse/head')['useSeoMeta']>
+    readonly useServiceStream: UnwrapRef<typeof import('./composable/eventStreams')['useServiceStream']>
     readonly useSessionStorage: UnwrapRef<typeof import('@vueuse/core')['useSessionStorage']>
     readonly useShare: UnwrapRef<typeof import('@vueuse/core')['useShare']>
+    readonly useSimpleRefHistory: UnwrapRef<typeof import('./utils/index')['useSimpleRefHistory']>
     readonly useSlots: UnwrapRef<typeof import('vue')['useSlots']>
     readonly useSorted: UnwrapRef<typeof import('@vueuse/core')['useSorted']>
     readonly useSpeechRecognition: UnwrapRef<typeof import('@vueuse/core')['useSpeechRecognition']>
     readonly useSpeechSynthesis: UnwrapRef<typeof import('@vueuse/core')['useSpeechSynthesis']>
+    readonly useStackStream: UnwrapRef<typeof import('./composable/eventStreams')['useStackStream']>
     readonly useStepper: UnwrapRef<typeof import('@vueuse/core')['useStepper']>
     readonly useStorage: UnwrapRef<typeof import('@vueuse/core')['useStorage']>
     readonly useStorageAsync: UnwrapRef<typeof import('@vueuse/core')['useStorageAsync']>
     readonly useStyleTag: UnwrapRef<typeof import('@vueuse/core')['useStyleTag']>
     readonly useSupported: UnwrapRef<typeof import('@vueuse/core')['useSupported']>
+    readonly useSwarmStore: UnwrapRef<typeof import('./stores/swarm')['useSwarmStore']>
     readonly useSwipe: UnwrapRef<typeof import('@vueuse/core')['useSwipe']>
     readonly useTemplateRefsList: UnwrapRef<typeof import('@vueuse/core')['useTemplateRefsList']>
     readonly useTextDirection: UnwrapRef<typeof import('@vueuse/core')['useTextDirection']>

assets/components.d.ts

@@ -1,50 +1,60 @@
 /* eslint-disable */
-/* prettier-ignore */
 // @ts-nocheck
 // Generated by unplugin-vue-components
 // Read more: https://github.com/vuejs/core/pull/3399
 export {}
 
+/* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
-    BarChart: typeof import('./components/BarChart.vue')['default']
     'Carbon:caretDown': typeof import('~icons/carbon/caret-down')['default']
     'Carbon:circleSolid': typeof import('~icons/carbon/circle-solid')['default']
+    'Carbon:copyFile': typeof import('~icons/carbon/copy-file')['default']
     'Carbon:information': typeof import('~icons/carbon/information')['default']
     'Carbon:macShift': typeof import('~icons/carbon/mac-shift')['default']
+    'Carbon:play': typeof import('~icons/carbon/play')['default']
+    'Carbon:restart': typeof import('~icons/carbon/restart')['default']
+    'Carbon:searchLocate': typeof import('~icons/carbon/search-locate')['default']
     'Carbon:star': typeof import('~icons/carbon/star')['default']
     'Carbon:starFilled': typeof import('~icons/carbon/star-filled')['default']
+    'Carbon:stopFilledAlt': typeof import('~icons/carbon/stop-filled-alt')['default']
     'Carbon:warning': typeof import('~icons/carbon/warning')['default']
     'Cil:checkCircle': typeof import('~icons/cil/check-circle')['default']
     'Cil:circle': typeof import('~icons/cil/circle')['default']
     'Cil:columns': typeof import('~icons/cil/columns')['default']
     'Cil:xCircle': typeof import('~icons/cil/x-circle')['default']
     ComplexLogItem: typeof import('./components/LogViewer/ComplexLogItem.vue')['default']
-    ContainerHealth: typeof import('./components/LogViewer/ContainerHealth.vue')['default']
-    ContainerPopup: typeof import('./components/LogViewer/ContainerPopup.vue')['default']
-    ContainerStat: typeof import('./components/LogViewer/ContainerStat.vue')['default']
+    ContainerActionsToolbar: typeof import('./components/ContainerViewer/ContainerActionsToolbar.vue')['default']
+    ContainerHealth: typeof import('./components/ContainerViewer/ContainerHealth.vue')['default']
+    ContainerLog: typeof import('./components/ContainerViewer/ContainerLog.vue')['default']
+    ContainerName: typeof import('./components/LogViewer/ContainerName.vue')['default']
+    ContainerPopup: typeof import('./components/ContainerPopup.vue')['default']
     ContainerTable: typeof import('./components/ContainerTable.vue')['default']
-    ContainerTitle: typeof import('./components/LogViewer/ContainerTitle.vue')['default']
+    ContainerTitle: typeof import('./components/ContainerViewer/ContainerTitle.vue')['default']
     DateTime: typeof import('./components/common/DateTime.vue')['default']
     DistanceTime: typeof import('./components/common/DistanceTime.vue')['default']
     DockerEventLogItem: typeof import('./components/LogViewer/DockerEventLogItem.vue')['default']
     Dropdown: typeof import('./components/common/Dropdown.vue')['default']
     DropdownMenu: typeof import('./components/common/DropdownMenu.vue')['default']
+    EventSource: typeof import('./components/LogViewer/EventSource.vue')['default']
     FieldList: typeof import('./components/LogViewer/FieldList.vue')['default']
     FuzzySearchModal: typeof import('./components/FuzzySearchModal.vue')['default']
-    'Ic:sharpFindInPage': typeof import('~icons/ic/sharp-find-in-page')['default']
+    GroupedLog: typeof import('./components/GroupedViewer/GroupedLog.vue')['default']
+    HostList: typeof import('./components/HostList.vue')['default']
+    HostMenu: typeof import('./components/HostMenu.vue')['default']
     'Ic:sharpKeyboardReturn': typeof import('~icons/ic/sharp-keyboard-return')['default']
     InfiniteLoader: typeof import('./components/InfiniteLoader.vue')['default']
     KeyShortcut: typeof import('./components/common/KeyShortcut.vue')['default']
+    LabeledInput: typeof import('./components/common/LabeledInput.vue')['default']
     Links: typeof import('./components/Links.vue')['default']
-    LogActionsToolbar: typeof import('./components/LogViewer/LogActionsToolbar.vue')['default']
-    LogContainer: typeof import('./components/LogViewer/LogContainer.vue')['default']
     LogDate: typeof import('./components/LogViewer/LogDate.vue')['default']
-    LogEventSource: typeof import('./components/LogViewer/LogEventSource.vue')['default']
     LogLevel: typeof import('./components/LogViewer/LogLevel.vue')['default']
+    LogList: typeof import('./components/LogViewer/LogList.vue')['default']
+    LogMessageActions: typeof import('./components/LogViewer/LogMessageActions.vue')['default']
     LogStd: typeof import('./components/LogViewer/LogStd.vue')['default']
     LogViewer: typeof import('./components/LogViewer/LogViewer.vue')['default']
-    LogViewerWithSource: typeof import('./components/LogViewer/LogViewerWithSource.vue')['default']
+    'MaterialSymbols:collapseAllRounded': typeof import('~icons/material-symbols/collapse-all-rounded')['default']
+    'MaterialSymbols:expandAllRounded': typeof import('~icons/material-symbols/expand-all-rounded')['default']
     'Mdi:announcement': typeof import('~icons/mdi/announcement')['default']
     'Mdi:arrowUp': typeof import('~icons/mdi/arrow-up')['default']
     'Mdi:check': typeof import('~icons/mdi/check')['default']
@@ -55,16 +65,24 @@ declare module 'vue' {
     'Mdi:cog': typeof import('~icons/mdi/cog')['default']
     'Mdi:hamburgerMenu': typeof import('~icons/mdi/hamburger-menu')['default']
     'Mdi:keyboardEsc': typeof import('~icons/mdi/keyboard-esc')['default']
-    'Mdi:logout': typeof import('~icons/mdi/logout')['default']
     'Mdi:magnify': typeof import('~icons/mdi/magnify')['default']
     MobileMenu: typeof import('./components/common/MobileMenu.vue')['default']
+    MultiContainerLog: typeof import('./components/MultiContainerViewer/MultiContainerLog.vue')['default']
+    MultiContainerStat: typeof import('./components/LogViewer/MultiContainerStat.vue')['default']
     'Octicon:container24': typeof import('~icons/octicon/container24')['default']
     'Octicon:download24': typeof import('~icons/octicon/download24')['default']
     'Octicon:trash24': typeof import('~icons/octicon/trash24')['default']
     PageWithLinks: typeof import('./components/PageWithLinks.vue')['default']
+    'Ph:arrowsMerge': typeof import('~icons/ph/arrows-merge')['default']
+    'Ph:boundingBoxFill': typeof import('~icons/ph/bounding-box-fill')['default']
+    'Ph:circlesFour': typeof import('~icons/ph/circles-four')['default']
     'Ph:command': typeof import('~icons/ph/command')['default']
     'Ph:computerTower': typeof import('~icons/ph/computer-tower')['default']
     'Ph:controlBold': typeof import('~icons/ph/control-bold')['default']
+    'Ph:cpu': typeof import('~icons/ph/cpu')['default']
+    'Ph:memory': typeof import('~icons/ph/memory')['default']
+    'Ph:stack': typeof import('~icons/ph/stack')['default']
+    'Ph:stackSimple': typeof import('~icons/ph/stack-simple')['default']
     Popup: typeof import('./components/Popup.vue')['default']
     Releases: typeof import('./components/Releases.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
@@ -72,15 +90,20 @@ declare module 'vue' {
     ScrollableView: typeof import('./components/ScrollableView.vue')['default']
     ScrollProgress: typeof import('./components/ScrollProgress.vue')['default']
     Search: typeof import('./components/Search.vue')['default']
+    ServiceLog: typeof import('./components/ServiceViewer/ServiceLog.vue')['default']
     SideMenu: typeof import('./components/SideMenu.vue')['default']
     SidePanel: typeof import('./components/SidePanel.vue')['default']
     SimpleLogItem: typeof import('./components/LogViewer/SimpleLogItem.vue')['default']
     SkippedEntriesLogItem: typeof import('./components/LogViewer/SkippedEntriesLogItem.vue')['default']
+    SlideTransition: typeof import('./components/common/SlideTransition.vue')['default']
+    StackLog: typeof import('./components/StackViewer/StackLog.vue')['default']
     StatMonitor: typeof import('./components/LogViewer/StatMonitor.vue')['default']
     StatSparkline: typeof import('./components/LogViewer/StatSparkline.vue')['default']
+    SwarmMenu: typeof import('./components/SwarmMenu.vue')['default']
     Tag: typeof import('./components/common/Tag.vue')['default']
     TimedButton: typeof import('./components/common/TimedButton.vue')['default']
     Toggle: typeof import('./components/common/Toggle.vue')['default']
+    ViewerWithSource: typeof import('./components/LogViewer/ViewerWithSource.vue')['default']
     ZigZag: typeof import('./components/LogViewer/ZigZag.vue')['default']
   }
 }

assets/components/BarChart.vue

@@ -1,20 +0,0 @@
-<template>
-  <div class="relative">
-    <div class="bar h-7 origin-left rounded-br rounded-tr bg-primary transition-transform"></div>
-    <div class="absolute inset-0 flex flex-col justify-center px-2 text-sm">
-      <slot></slot>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-const { value } = defineProps<{ value: number }>();
-
-const minValue = computed(() => Math.min(value, 1));
-</script>
-
-<style scoped>
-.bar {
-  transform: scaleX(v-bind(minValue));
-}
-</style>

assets/components/ContainerPopup.vue

@@ -2,12 +2,12 @@
   <div>
     <span class="font-light capitalize"> RUNNING </span>
     <span class="font-semibold">
-      <distance-time :date="container.created" strict :suffix="false"></distance-time>
+      <DistanceTime :date="container.created" strict :suffix="false" />
     </span>
   </div>
   <div>
     <span class="font-light capitalize"> Load </span>
-    <span class="font-semibold"> {{ container.stat.cpu }}% </span>
+    <span class="font-semibold"> {{ container.stat.cpu.toFixed(2) }}% </span>
   </div>
   <div>
     <span class="font-light capitalize"> MEM </span>

assets/components/ContainerTable.vue

@@ -1,5 +1,49 @@
 !
 <template>
+  <div class="flex flex-row">
+    <div v-if="Object.keys(hosts).length > 1" class="flex-1">
+      <div role="tablist" class="tabs-boxed tabs block" v-if="Object.keys(hosts).length < 4">
+        <input
+          type="radio"
+          name="host"
+          role="tab"
+          class="tab !rounded"
+          aria-label="Show All"
+          v-model="selectedHost"
+          :value="null"
+        />
+        <input
+          type="radio"
+          name="host"
+          role="tab"
+          class="tab !rounded"
+          :aria-label="host.name"
+          v-for="host in hosts"
+          :value="host.id"
+          :key="host.id"
+          v-model="selectedHost"
+        />
+      </div>
+      <dropdown-menu
+        class="btn-sm"
+        v-model="selectedHost"
+        :options="[
+          { label: 'Show All', value: null },
+          ...Object.values(hosts).map((host) => ({ label: host.name, value: host.id })),
+        ]"
+        v-else
+      />
+    </div>
+    <div class="flex-1 text-right" v-show="containers.length > pageSizes[0]">
+      {{ $t("label.per-page") }}
+      <dropdown-menu
+        class="dropdown-left btn-xs md:btn-sm"
+        v-model="perPage"
+        :options="pageSizes.map((i) => ({ label: i.toLocaleString(), value: i }))"
+      />
+    </div>
+  </div>
+
   <table class="table table-lg bg-base">
     <thead>
       <tr :data-direction="direction > 0 ? 'asc' : 'desc'">
@@ -32,28 +76,34 @@
           <distance-time :date="container.created" strict :suffix="false"></distance-time>
         </td>
         <td v-if="isVisible('cpu')">
-          <bar-chart :value="container.movingAverage.cpu / 100">
-            {{ (container.movingAverage.cpu / 100).toLocaleString(undefined, { style: "percent" }) }}
-          </bar-chart>
+          <div class="flex flex-row items-center gap-1">
+            <progress
+              class="progress progress-primary"
+              :value="Math.min(container.movingAverage.cpu, 100)"
+              :max="100"
+            ></progress>
+            <span class="text-sm">{{ container.movingAverage.cpu.toFixed(0) }}%</span>
+          </div>
         </td>
         <td v-if="isVisible('mem')">
-          <bar-chart :value="container.movingAverage.memory / 100">
-            {{ (container.movingAverage.memory / 100).toLocaleString(undefined, { style: "percent" }) }}
-          </bar-chart>
+          <div class="flex flex-row items-center gap-1">
+            <progress class="progress progress-primary" :value="container.movingAverage.memory" max="100"></progress>
+            <span class="text-sm">{{ container.movingAverage.memory.toFixed(0) }}%</span>
+          </div>
         </td>
       </tr>
     </tbody>
   </table>
   <div class="p-4 text-center">
     <nav class="join" v-if="isPaginated">
-      <button
+      <input
+        class="btn btn-square join-item"
+        type="radio"
+        v-model="currentPage"
+        :aria-label="`${i}`"
+        :value="i"
         v-for="i in totalPages"
-        class="btn join-item"
-        :class="{ 'btn-primary': i === currentPage }"
-        @click="currentPage = i"
-      >
-        {{ i }}
-      </button>
+      />
     </nav>
   </div>
 </template>
@@ -62,6 +112,9 @@
 import { Container } from "@/models/Container";
 import { toRefs } from "@vueuse/core";
 
+const { hosts } = useHosts();
+const selectedHost = ref(null);
+
 const fields = {
   name: {
     label: "label.container-name",
@@ -95,32 +148,35 @@ const fields = {
   },
 };
 
-const { containers, perPage = 15 } = defineProps<{
+const { containers } = defineProps<{
   containers: Container[];
-  perPage?: number;
 }>();
 type keys = keyof typeof fields;
 
+const perPage = useStorage("DOZZLE_TABLE_PAGE_SIZE", 15);
+const pageSizes = [15, 30, 50, 100];
+
 const storage = useStorage<{ column: keys; direction: 1 | -1 }>("DOZZLE_TABLE_CONTAINERS_SORT", {
   column: "created",
   direction: -1,
 });
 const { column: sortField, direction } = toRefs(storage);
+const counter = useInterval(10000);
+const filteredContainers = computed(() =>
+  containers.filter((c) => selectedHost.value === null || c.host === selectedHost.value),
+);
 const sortedContainers = computedWithControl(
-  () => [containers.length, sortField.value, direction.value],
-  () => {
-    return containers.sort((a, b) => {
-      return fields[sortField.value].sortFunc(a, b);
-    });
-  },
+  () => [filteredContainers.value.length, sortField.value, direction.value, counter.value],
+  () => filteredContainers.value.sort((a, b) => fields[sortField.value].sortFunc(a, b)),
 );
 
-const totalPages = computed(() => Math.ceil(sortedContainers.value.length / perPage));
+const totalPages = computed(() => Math.ceil(sortedContainers.value.length / perPage.value));
 const isPaginated = computed(() => totalPages.value > 1);
 const currentPage = ref(1);
+watch(perPage, () => (currentPage.value = 1));
 const paginated = computed(() => {
-  const start = (currentPage.value - 1) * perPage;
-  const end = start + perPage;
+  const start = (currentPage.value - 1) * perPage.value;
+  const end = start + perPage.value;
 
   return sortedContainers.value.slice(start, end);
 });

assets/components/ContainerViewer/ContainerActionsToolbar.vue

@@ -0,0 +1,142 @@
+<template>
+  <div class="dropdown dropdown-end dropdown-hover">
+    <label tabindex="0" class="btn btn-ghost btn-sm gap-0.5 px-2">
+      <carbon:circle-solid class="w-2.5 text-red" v-if="streamConfig.stderr" />
+      <carbon:circle-solid class="w-2.5 text-blue" v-if="streamConfig.stdout" />
+    </label>
+    <ul tabindex="0" class="menu dropdown-content z-50 w-52 rounded-box bg-base p-1 shadow">
+      <li>
+        <a @click.prevent="clear()">
+          <octicon:trash-24 /> {{ $t("toolbar.clear") }}
+          <KeyShortcut char="k" :modifiers="['shift', 'meta']" />
+        </a>
+      </li>
+      <li>
+        <a :href="downloadUrl" download> <octicon:download-24 /> {{ $t("toolbar.download") }} </a>
+      </li>
+      <li>
+        <a @click.prevent="showSearch = true">
+          <mdi:magnify /> {{ $t("toolbar.search") }}
+          <KeyShortcut char="f" />
+        </a>
+      </li>
+      <li class="line"></li>
+      <li>
+        <a
+          @click="
+            streamConfig.stdout = true;
+            streamConfig.stderr = true;
+          "
+        >
+          <div class="flex size-4 gap-0.5">
+            <template v-if="streamConfig.stderr && streamConfig.stdout">
+              <carbon:circle-solid class="w-2 text-red" />
+              <carbon:circle-solid class="w-2 text-blue" />
+            </template>
+          </div>
+          {{ $t("toolbar.show-all") }}
+        </a>
+      </li>
+      <li>
+        <a
+          @click="
+            streamConfig.stdout = true;
+            streamConfig.stderr = false;
+          "
+        >
+          <div class="flex size-4 flex-col gap-1">
+            <carbon:circle-solid class="w-2 text-blue" v-if="!streamConfig.stderr && streamConfig.stdout" />
+          </div>
+          {{ $t("toolbar.show", { std: "STDOUT" }) }}
+        </a>
+      </li>
+      <li>
+        <a
+          @click="
+            streamConfig.stdout = false;
+            streamConfig.stderr = true;
+          "
+        >
+          <div class="flex size-4 flex-col gap-1">
+            <carbon:circle-solid class="w-2 text-red" v-if="streamConfig.stderr && !streamConfig.stdout" />
+          </div>
+          {{ $t("toolbar.show", { std: "STDERR" }) }}
+        </a>
+      </li>
+
+      <!-- Container Actions (Enabled via config) -->
+      <template v-if="enableActions">
+        <li class="line"></li>
+        <li>
+          <button
+            @click="stop()"
+            :disabled="actionStates.stop || actionStates.restart"
+            v-if="container.state == 'running'"
+          >
+            <carbon:stop-filled-alt /> {{ $t("toolbar.stop") }}
+          </button>
+
+          <button
+            @click="start()"
+            :disabled="actionStates.start || actionStates.restart"
+            v-if="container.state != 'running'"
+          >
+            <carbon:play /> {{ $t("toolbar.start") }}
+          </button>
+        </li>
+        <li>
+          <button @click="restart()" :disabled="disableRestart">
+            <carbon:restart
+              :class="{
+                'animate-spin': actionStates.restart,
+                'text-secondary': actionStates.restart,
+              }"
+            />
+            {{ $t("toolbar.restart") }}
+          </button>
+        </li>
+      </template>
+    </ul>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { Container } from "@/models/Container";
+
+const { showSearch } = useSearchFilter();
+const { enableActions } = config;
+
+const clear = defineEmit();
+
+const { streamConfig } = useLoggingContext();
+
+const { container } = defineProps<{ container: Container }>();
+
+const { actionStates, start, stop, restart } = useContainerActions(toRef(() => container));
+
+const downloadParams = computed(() =>
+  Object.entries(streamConfig)
+    .filter(([, value]) => value)
+    .reduce((acc, [key]) => ({ ...acc, [key]: "1" }), {}),
+);
+
+const downloadUrl = computed(() =>
+  withBase(
+    `/api/hosts/${container.host}/containers/${container.id}/logs/download?${new URLSearchParams(downloadParams.value).toString()}`,
+  ),
+);
+
+const disableRestart = computed(() => {
+  return actionStates.stop || actionStates.start || actionStates.restart;
+});
+</script>
+
+<style scoped lang="postcss">
+li.line {
+  @apply h-px bg-base-content/20;
+}
+
+a {
+  @apply whitespace-nowrap;
+}
+</style>

assets/components/ContainerViewer/ContainerHealth.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="inline-flex h-4 w-4" :health="health" v-if="health" :title="health">
+  <div class="inline-flex size-4" :health="health" v-if="health" :title="health">
     <cil:check-circle v-if="health == 'healthy'" />
     <cil:x-circle v-else-if="health == 'unhealthy'" />
     <cil:circle v-else />

assets/components/ContainerViewer/ContainerLog.vue

@@ -0,0 +1,52 @@
+<template>
+  <ScrollableView :scrollable="scrollable" v-if="container">
+    <template #header v-if="showTitle">
+      <div class="mx-2 flex items-center gap-2 md:ml-4">
+        <ContainerTitle :container="container" />
+        <MultiContainerStat class="ml-auto" :containers="[container]" />
+
+        <ContainerActionsToolbar @clear="viewer?.clear()" class="mobile-hidden" :container="container" />
+        <a class="btn btn-circle btn-xs" @click="close()" v-if="closable">
+          <mdi:close />
+        </a>
+      </div>
+    </template>
+    <template #default="{ setLoading }">
+      <ViewerWithSource
+        ref="viewer"
+        @loading-more="setLoading($event)"
+        :stream-source="useContainerStream"
+        :entity="container"
+        :visible-keys="visibleKeys"
+        :show-container-name="false"
+      />
+    </template>
+  </ScrollableView>
+</template>
+
+<script lang="ts" setup>
+import ViewerWithSource from "@/components/LogViewer/ViewerWithSource.vue";
+import { ComponentExposed } from "vue-component-type-helpers";
+
+const {
+  id,
+  showTitle = false,
+  scrollable = false,
+  closable = false,
+} = defineProps<{
+  id: string;
+  showTitle?: boolean;
+  scrollable?: boolean;
+  closable?: boolean;
+}>();
+
+const close = defineEmit();
+
+const store = useContainerStore();
+const container = store.currentContainer($$(id));
+const visibleKeys = persistentVisibleKeysForContainer(container);
+
+const viewer = ref<ComponentExposed<typeof ViewerWithSource>>();
+
+provideLoggingContext(toRef(() => [container.value]));
+</script>

assets/components/ContainerViewer/ContainerTitle.vue

@@ -1,6 +1,10 @@
 <template>
-  <div class="flex flex-1 items-center gap-2 truncate">
-    <container-health :health="container.health" v-if="container.health"></container-health>
+  <div class="flex flex-1 gap-1.5 truncate @container md:gap-2">
+    <label class="swap swap-rotate size-4">
+      <input type="checkbox" v-model="pinned" />
+      <carbon:star-filled class="swap-on text-secondary" />
+      <carbon:star class="swap-off" />
+    </label>
     <div class="inline-flex font-mono text-sm">
       <div v-if="config.hosts.length > 1" class="mobile-hidden font-thin">
         {{ container.hostLabel }}<span class="mx-2">/</span>
@@ -13,24 +17,24 @@
         {{ container.swarmId }}
       </div>
     </div>
-    <tag class="mobile-hidden font-mono" size="small">{{ container.image.replace(/@sha.*/, "") }}</tag>
-    <label class="swap swap-rotate">
-      <input type="checkbox" v-model="pinned" />
-      <carbon:star-filled class="swap-on text-secondary" />
-      <carbon:star class="swap-off" />
-    </label>
+    <ContainerHealth :health="container.health" v-if="container.health" />
+    <Tag class="mobile-hidden hidden font-mono @3xl:block" size="small">
+      {{ container.image.replace(/@sha.*/, "") }}
+    </Tag>
   </div>
 </template>
 
 <script lang="ts" setup>
-const { container } = useContainerContext();
+import { Container } from "@/models/Container";
+
+const { container } = defineProps<{ container: Container }>();
 const pinned = computed({
-  get: () => pinnedContainers.value.has(container.value.storageKey),
+  get: () => pinnedContainers.value.has(container.name),
   set: (value) => {
     if (value) {
-      pinnedContainers.value.add(container.value.storageKey);
+      pinnedContainers.value.add(container.name);
     } else {
-      pinnedContainers.value.delete(container.value.storageKey);
+      pinnedContainers.value.delete(container.name);
     }
   },
 });

assets/components/FuzzySearchModal.spec.ts

@@ -0,0 +1,79 @@
+import { createTestingPinia } from "@pinia/testing";
+import { mount } from "@vue/test-utils";
+
+import FuzzySearchModal from "./FuzzySearchModal.vue";
+
+import { Container } from "@/models/Container";
+import { beforeEach, describe, expect, test, vi } from "vitest";
+import { createI18n } from "vue-i18n";
+import { useRouter } from "vue-router";
+import { router } from "@/modules/router";
+
+// @ts-ignore
+import EventSource, { sources } from "eventsourcemock";
+
+vi.mock("vue-router");
+
+vi.mock("@/stores/config", () => ({
+  __esModule: true,
+  default: { base: "", hosts: [{ name: "localhost", id: "localhost" }] },
+  withBase: (path: string) => path,
+}));
+
+function createFuzzySearchModal() {
+  global.EventSource = EventSource;
+  const wrapper = mount(FuzzySearchModal, {
+    global: {
+      plugins: [
+        createI18n({}),
+        createTestingPinia({
+          createSpy: vi.fn,
+          initialState: {
+            container: {
+              containers: [
+                new Container("123", new Date(), "image", "test", "command", "host", {}, "status", "running", []),
+                new Container("345", new Date(), "image", "foo bar", "command", "host", {}, "status", "running", []),
+                new Container("567", new Date(), "image", "baz", "command", "host", {}, "status", "exited", []),
+              ],
+            },
+          },
+        }),
+      ],
+    },
+  });
+  return wrapper;
+}
+
+/**
+ * @vitest-environment jsdom
+ */
+describe("<FuzzySearchModal />", () => {
+  vi.mocked(useRouter).mockReturnValue({
+    ...router,
+    push: vi.fn(),
+  });
+
+  beforeEach(() => {
+    vi.mocked(useRouter().push).mockReset();
+  });
+  test("shows all", async () => {
+    const wrapper = createFuzzySearchModal();
+    expect(wrapper.findAll("li").length).toBe(3);
+  });
+
+  test("search for foo", async () => {
+    const wrapper = createFuzzySearchModal();
+    await wrapper.find("input").setValue("foo");
+    expect(wrapper.findAll("li").length).toBe(1);
+    expect(wrapper.find("ul [data-name]").html()).toMatchInlineSnapshot(
+      `"<span data-v-dc2e8c61="" data-name=""><mark>foo</mark> bar</span>"`,
+    );
+  });
+
+  test("choose baz", async () => {
+    const wrapper = createFuzzySearchModal();
+    await wrapper.find("input").setValue("baz");
+    await wrapper.find("input").trigger("keydown.enter");
+    expect(useRouter().push).toHaveBeenCalledWith({ name: "container-id", params: { id: "567" } });
+  });
+});

assets/components/FuzzySearchModal.vue

@@ -1,36 +1,43 @@
 <template>
   <div class="dropdown dropdown-open w-full">
     <div class="input input-primary flex h-auto items-center">
-      <mdi:magnify class="flex h-8 w-8" />
+      <mdi:magnify class="flex size-8" />
       <input
         tabindex="0"
-        class="input input-ghost input-lg flex-1 px-1"
+        class="input input-lg input-ghost flex-1 px-1"
         ref="input"
-        @keyup.down="selectedIndex = Math.min(selectedIndex + 1, data.length - 1)"
-        @keyup.up="selectedIndex = Math.max(selectedIndex - 1, 0)"
-        @keyup.enter.exact="selected(data[selectedIndex])"
-        @keyup.alt.enter="addColumn(data[selectedIndex])"
+        @keydown.down="selectedIndex = Math.min(selectedIndex + 1, data.length - 1)"
+        @keydown.up="selectedIndex = Math.max(selectedIndex - 1, 0)"
+        @keydown.enter.exact="selected(data[selectedIndex].item)"
+        @keydown.alt.enter="addColumn(data[selectedIndex])"
         v-model="query"
         :placeholder="$t('placeholder.search-containers')"
       />
       <mdi:keyboard-esc class="flex" />
     </div>
-    <ul tabindex="0" class="menu dropdown-content rounded-box !relative mt-2 w-full bg-base-lighter p-2">
-      <li v-for="(item, index) in data">
+    <ul tabindex="0" class="menu dropdown-content !relative mt-2 w-full rounded-box bg-base-lighter p-2">
+      <li v-for="(result, index) in data">
         <a
           class="grid auto-cols-max grid-cols-[min-content,auto] gap-2 py-4"
-          @click.prevent="selected(item)"
+          @click.prevent="selected(result.item)"
           @mouseenter="selectedIndex = index"
           :class="index === selectedIndex ? 'focus' : ''"
         >
-          <div :class="{ 'text-primary': item.state === 'running' }">
+          <div :class="{ 'text-primary': result.item.state === 'running' }">
             <octicon:container-24 />
           </div>
           <div class="truncate">
-            <span class="font-light">{{ item.host }}</span> / {{ item.name }}
+            <template v-if="config.hosts.length > 1">
+              <span class="font-light">{{ result.item.host }}</span> /
+            </template>
+            <span data-name v-html="matchedName(result)"></span>
           </div>
-          <distance-time :date="item.created" class="ml-auto text-xs font-light" />
-          <a @click.stop.prevent="addColumn(item)" :title="$t('tooltip.pin-column')" class="hover:text-secondary">
+          <DistanceTime :date="result.item.created" class="text-xs font-light" />
+          <a
+            @click.stop.prevent="addColumn(result.item)"
+            :title="$t('tooltip.pin-column')"
+            class="hover:text-secondary"
+          >
             <ic:sharp-keyboard-return v-if="index === selectedIndex" />
             <cil:columns v-else />
           </a>
@@ -42,8 +49,9 @@
 
 <script lang="ts" setup>
 import { useFuse } from "@vueuse/integrations/useFuse";
+import { type FuseResultMatch } from "fuse.js";
 
-const { maxResults: resultLimit = 5 } = defineProps<{
+const { maxResults = 5 } = defineProps<{
   maxResults?: number;
 }>();
 
@@ -54,48 +62,51 @@ const input = ref<HTMLInputElement>();
 const selectedIndex = ref(0);
 
 const router = useRouter();
-const store = useContainerStore();
-const { containers } = storeToRefs(store);
+const containerStore = useContainerStore();
+const pinnedStore = usePinnedLogsStore();
+const { containers } = storeToRefs(containerStore);
 
 const list = computed(() => {
-  return containers.value.map(({ id, created, name, state, hostLabel: host }) => {
+  return containers.value.map(({ id, created, name, state, labels, hostLabel: host }) => {
     return {
       id,
       created,
       name,
       state,
       host,
+      labels: Object.entries(labels).map(([_, value]) => value),
     };
   });
 });
 
 const { results } = useFuse(query, list, {
   fuseOptions: {
-    keys: ["name", "host"],
+    keys: ["name", "host", "labels"],
     includeScore: true,
     useExtendedSearch: true,
+    threshold: 0.3,
+    includeMatches: true,
   },
-  resultLimit,
+  resultLimit: 10,
   matchAllWhenSearchEmpty: true,
 });
 
 const data = computed(() => {
-  return results.value
+  return [...results.value]
     .sort((a, b) => {
       if (a.score === b.score) {
-        if (a.item.state === "running" && b.item.state !== "running") {
+        if (a.item.state === b.item.state) {
+          return b.item.created - a.item.created;
+        } else if (a.item.state === "running" && b.item.state !== "running") {
           return -1;
         } else {
           return 1;
         }
-      } else if (a.score && b.score) {
-        return a.score - b.score;
       } else {
-        return 0;
+        return a.score - b.score;
       }
     })
-    .map(({ item }) => item)
-    .slice(0, resultLimit);
+    .slice(0, maxResults);
 });
 
 watch(query, (data) => {
@@ -111,9 +122,35 @@ function selected({ id }: { id: string }) {
   close();
 }
 function addColumn(container: { id: string }) {
-  store.appendActiveContainer(container);
+  pinnedStore.pinContainer(container);
   close();
 }
+
+function matchedName({ item, matches = [] }: { item: { name: string }; matches?: FuseResultMatch[] }) {
+  const matched = matches.find((match) => match.key === "name");
+  if (matched) {
+    const { indices } = matched;
+    const result = [];
+    let lastIndex = 0;
+    for (const [start, end] of indices) {
+      result.push(item.name.slice(lastIndex, start));
+      result.push(`<mark>${item.name.slice(start, end + 1)}</mark>`);
+      lastIndex = end + 1;
+    }
+    result.push(item.name.slice(lastIndex));
+    return result.join("");
+  } else {
+    return item.name;
+  }
+}
 </script>
 
-<style scoped lang="postcss"></style>
+<style scoped lang="postcss">
+:deep(mark) {
+  @apply bg-transparent text-inherit underline underline-offset-2;
+}
+
+.menu a {
+  @apply transition-none duration-0;
+}
+</style>

assets/components/GroupedViewer/GroupedLog.vue

@@ -0,0 +1,46 @@
+<template>
+  <ScrollableView :scrollable="scrollable" v-if="group.containers.length && ready">
+    <template #header>
+      <div class="mx-2 flex items-center gap-2 md:ml-4">
+        <div class="flex flex-1 gap-1.5 truncate @container md:gap-2">
+          <div class="inline-flex font-mono text-sm">
+            <div class="font-semibold">{{ group.containers.length }} containers</div>
+          </div>
+        </div>
+        <MultiContainerStat class="ml-auto" :containers="group.containers" />
+      </div>
+    </template>
+    <template #default="{ setLoading }">
+      <ViewerWithSource
+        ref="viewer"
+        @loading-more="setLoading($event)"
+        :stream-source="useGroupedStream"
+        :entity="group"
+        :visible-keys="visibleKeys"
+        :show-container-name="true"
+      />
+    </template>
+  </ScrollableView>
+</template>
+
+<script lang="ts" setup>
+import ViewerWithSource from "@/components/LogViewer/ViewerWithSource.vue";
+import { GroupedContainers } from "@/models/Container";
+
+const { name, scrollable = false } = defineProps<{
+  name: string;
+  scrollable?: boolean;
+}>();
+
+const containerStore = useContainerStore();
+
+const { ready } = storeToRefs(containerStore);
+
+const swarmStore = useSwarmStore();
+const { customGroups } = storeToRefs(swarmStore);
+
+const group = computed(() => customGroups.value.find((g) => g.name === name) ?? new GroupedContainers("", []));
+
+const visibleKeys = ref<string[][]>([]);
+provideLoggingContext(toRef(() => group.value.containers));
+</script>

assets/components/HostList.vue

@@ -0,0 +1,99 @@
+<template>
+  <ul class="grid gap-4 md:grid-cols-[repeat(auto-fill,minmax(480px,1fr))]">
+    <li v-for="host in hosts" class="card bg-base-lighter">
+      <div class="card-body grid auto-cols-auto grid-flow-col justify-between gap-4">
+        <div class="overflow-hidden">
+          <div class="truncate text-xl font-semibold">
+            {{ host.name }} <span class="badge badge-error badge-xs p-1.5" v-if="!host.available">offline</span>
+          </div>
+          <ul class="flex flex-row gap-2 text-sm md:gap-4">
+            <li><ph:cpu class="inline-block" /> {{ host.nCPU }} <span class="mobile-hidden">CPUs</span></li>
+            <li>
+              <ph:memory class="inline-block" /> {{ formatBytes(host.memTotal) }}
+              <span class="mobile-hidden">total</span>
+            </li>
+          </ul>
+          <div class="text-sm">
+            <octicon:container-24 class="inline-block" /> {{ $t("label.container", hostContainers[host.id]?.length) }}
+          </div>
+        </div>
+
+        <div class="flex flex-row gap-4 md:gap-8" v-if="weightedStats[host.id]">
+          <div
+            class="radial-progress text-sm text-primary [--size:4rem] [--thickness:0.25em] md:text-[1rem] md:[--size:5rem]"
+            :style="`--value: ${Math.floor((weightedStats[host.id].weighted.totalCPU / (host.nCPU * 100)) * 100)};  `"
+            role="progressbar"
+          >
+            {{ weightedStats[host.id].weighted.totalCPU.toFixed(0) }}%
+          </div>
+          <div
+            class="radial-progress text-sm text-primary [--size:4rem] [--thickness:0.25em] md:text-[1rem] md:[--size:5rem]"
+            :style="`--value: ${(weightedStats[host.id].weighted.totalMem / host.memTotal) * 100};`"
+            role="progressbar"
+          >
+            {{ formatBytes(weightedStats[host.id].weighted.totalMem, 1) }}
+          </div>
+        </div>
+      </div>
+    </li>
+  </ul>
+</template>
+
+<script setup lang="ts">
+import { Container } from "@/models/Container";
+
+const containerStore = useContainerStore();
+const { containers } = storeToRefs(containerStore) as unknown as {
+  containers: Ref<Container[]>;
+};
+
+const runningContainers = computed(() => containers.value.filter((container) => container.state === "running"));
+
+const { hosts } = useHosts();
+const hostContainers = computed(() => {
+  const results: Record<string, Container[]> = {};
+  for (const container of runningContainers.value) {
+    if (!results[container.host]) {
+      results[container.host] = [];
+    }
+    results[container.host].push(container);
+  }
+  return results;
+});
+
+type TotalStat = {
+  totalCPU: number;
+  totalMem: number;
+};
+const weightedStats: Record<string, { mostRecent: TotalStat; weighted: TotalStat }> = {};
+const initWeightedStats = () => {
+  for (const [host, containers] of Object.entries(hostContainers.value)) {
+    const mostRecent = ref<TotalStat>({ totalCPU: 0, totalMem: 0 });
+    for (const container of containers) {
+      mostRecent.value.totalCPU += container.stat.cpu;
+      mostRecent.value.totalMem += container.stat.memoryUsage;
+    }
+    weightedStats[host] = reactive({ mostRecent, weighted: useExponentialMovingAverage(mostRecent) });
+  }
+};
+
+watchOnce(hostContainers, initWeightedStats);
+initWeightedStats();
+
+useIntervalFn(
+  () => {
+    for (const [host, containers] of Object.entries(hostContainers.value)) {
+      const stat = { totalCPU: 0, totalMem: 0 };
+      for (const container of containers) {
+        stat.totalCPU += container.stat.cpu;
+        stat.totalMem += container.stat.memoryUsage;
+      }
+      weightedStats[host].mostRecent = stat;
+    }
+  },
+  1000,
+  { immediate: true },
+);
+</script>
+
+<style scoped></style>

assets/components/HostMenu.vue

@@ -0,0 +1,176 @@
+<template>
+  <div class="breadcrumbs">
+    <ul>
+      <li><a @click.prevent="setHost(null)" class="link-primary">Hosts</a></li>
+      <li v-if="sessionHost && hosts[sessionHost]" class="cursor-default">
+        {{ hosts[sessionHost].name }}
+      </li>
+    </ul>
+  </div>
+
+  <SlideTransition :slide-right="!!sessionHost">
+    <template #left>
+      <ul class="menu p-0">
+        <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 }}
+            <span class="badge badge-error badge-xs p-1.5" v-if="!host.available">offline</span>
+          </a>
+        </li>
+      </ul>
+    </template>
+    <template #right>
+      <ul class="containers menu p-0 [&_li.menu-title]:px-0">
+        <li v-for="{ label, containers, icon } in menuItems" :key="label">
+          <!-- @vue-ignore -->
+          <details :open="!collapsedGroups.has(label)" @toggle="updateCollapsedGroups($event, label)">
+            <summary class="font-light text-base-content/80">
+              <component :is="icon" />
+              {{ label.startsWith("label.") ? $t(label) : label }}
+
+              <router-link
+                :to="{
+                  name: 'merged-name',
+                  query: { id: containers.map(({ id }) => id) },
+                  params: { name: label.replace('label.', '') },
+                }"
+                class="btn btn-square btn-outline btn-primary btn-xs"
+                active-class="btn-active"
+                title="Merge all containers into one view"
+              >
+                <ph:arrows-merge />
+              </router-link>
+            </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="pinnedStore.pinContainer(item)"
+                    :title="item.name"
+                    class="group auto-cols-[auto_max-content_max-content]"
+                  >
+                    <div class="truncate">
+                      {{ item.name }}<span class="font-light opacity-70" v-if="item.isSwarm">.{{ item.swarmId }}</span>
+                    </div>
+                    <ContainerHealth :health="item.health" />
+                    <span
+                      class="hidden hover:text-secondary group-hover:inline-block"
+                      @click.stop.prevent="pinnedStore.pinContainer(item)"
+                      v-show="!pinnedStore.isPinned(item)"
+                      :title="$t('tooltip.pin-column')"
+                    >
+                      <cil:columns />
+                    </span>
+                  </router-link>
+                  <template #content>
+                    <ContainerPopup :container="item" />
+                  </template>
+                </Popup>
+              </li>
+            </ul>
+          </details>
+        </li>
+      </ul>
+    </template>
+  </SlideTransition>
+</template>
+
+<script lang="ts" setup>
+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 containerStore = useContainerStore();
+const { visibleContainers } = storeToRefs(containerStore);
+
+const pinnedStore = usePinnedLogsStore();
+
+const { hosts } = useHosts();
+
+const setHost = (host: string | null) => (sessionHost.value = host);
+
+const collapsedGroups = useProfileStorage("collapsedGroups", new Set<string>());
+const updateCollapsedGroups = (event: Event, label: string) => {
+  const details = event.target as HTMLDetailsElement;
+  if (details.open) {
+    collapsedGroups.value.delete(label);
+  } else {
+    collapsedGroups.value.add(label);
+  }
+};
+
+const debouncedPinnedContainers = debouncedRef(pinnedContainers, 200);
+const sortedContainers = computed(() =>
+  visibleContainers.value.filter((c) => c.host === sessionHost.value).sort(sorter),
+);
+
+const sorter = (a: Container, b: Container) => {
+  if (a.state === "running" && b.state !== "running") {
+    return -1;
+  } else if (a.state !== "running" && b.state === "running") {
+    return 1;
+  } else {
+    return a.name.localeCompare(b.name);
+  }
+};
+
+const menuItems = computed(() => {
+  const namespaced: Record<string, Container[]> = {};
+  const pinned = [];
+  const singular = [];
+
+  for (const item of sortedContainers.value) {
+    const namespace = item.namespace;
+    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))) {
+    if (containers.length > 1) {
+      items.push({ label, containers, icon: Stack });
+    } else {
+      singular.push(containers[0]);
+    }
+  }
+
+  singular.sort(sorter);
+
+  if (singular.length) {
+    items.push({
+      label: showAllContainers.value ? "label.all-containers" : "label.running-containers",
+      containers: singular,
+      icon: Containers,
+    });
+  }
+
+  return items;
+});
+</script>
+<style scoped lang="postcss">
+.menu {
+  @apply text-[0.95rem];
+}
+
+li.exited {
+  @apply opacity-50;
+}
+</style>

assets/components/InfiniteLoader.vue

@@ -14,6 +14,7 @@ const isLoading = ref(false);
 const root = ref<HTMLElement>();
 
 const observer = new IntersectionObserver(async (entries) => {
+  // console.log(entries, entries[0].intersectionRatio);
   if (entries[0].intersectionRatio <= 0) return;
   if (onLoadMore && enabled) {
     const scrollingParent = root.value?.closest("[data-scrolling]") || document.documentElement;

assets/components/Links.vue

@@ -1,35 +1,35 @@
 <template>
   <div class="flex items-center justify-end gap-4">
-    <template v-if="config.pages">
-      <router-link
-        :to="{ name: 'content-id', params: { id: page.id } }"
-        :title="page.title"
-        v-for="page in config.pages"
-        :key="page.id"
-        class="link-primary"
-      >
-        {{ page.title }}
-      </router-link>
-    </template>
-
-    <dropdown class="dropdown-end" @closed="latestTag = latest?.tag ?? config.version">
+    <Dropdown class="dropdown-end" @closed="latestTag = latest?.tag ?? config.version">
       <template #trigger>
-        <mdi:announcement class="h-6 w-6 -rotate-12" />
+        <mdi:announcement class="size-6 -rotate-12" />
         <span
-          class="absolute right-px top-0 h-2 w-2 rounded-full bg-red"
+          class="absolute right-px top-0 size-2 rounded-full bg-red"
           v-if="hasUpdate && latestTag != latest?.tag"
         ></span>
       </template>
       <template #content>
         <div class="w-72">
-          <releases />
+          <Releases />
         </div>
       </template>
-    </dropdown>
+    </Dropdown>
+
+    <router-link
+      :to="{ name: 'settings' }"
+      :aria-label="$t('title.settings')"
+      data-testid="settings"
+      class="btn btn-circle btn-sm"
+    >
+      <mdi:cog class="size-6" />
+    </router-link>
 
     <dropdown class="dropdown-end" v-if="config.user">
       <template #trigger>
-        <img class="h-6 w-6 max-w-none rounded-full p-px ring-1 ring-base-content/60" :src="config.user.avatar" />
+        <img
+          class="size-6 max-w-none rounded-full p-px ring-1 ring-base-content/60"
+          :src="withBase('/api/profile/avatar')"
+        />
       </template>
       <template #content>
         <div class="p-2">
@@ -59,5 +59,5 @@ async function logout() {
 }
 
 const { hasUpdate, latest } = useReleases();
-const latestTag = useStorage("DOZZLE_LATEST_TAG", config.version);
+const latestTag = useProfileStorage("releaseSeen", config.version);
 </script>

assets/components/LogViewer/ComplexLogItem.vue

@@ -1,17 +1,25 @@
 <template>
-  <div class="flex gap-x-2">
+  <div class="group/item relative flex w-full gap-x-2" @click="expandToggle()">
+    <label class="swap swap-rotate invisible absolute -left-4 top-0.5 size-4 group-hover/item:visible">
+      <input type="checkbox" v-model="expanded" @click="expandToggle()" />
+      <material-symbols:expand-all-rounded class="swap-off text-secondary" />
+      <material-symbols:collapse-all-rounded class="swap-on text-secondary" />
+    </label>
+    <div v-if="showContainerName">
+      <ContainerName :id="logEntry.containerID" />
+    </div>
     <div v-if="showStd">
-      <log-std :std="logEntry.std"></log-std>
+      <LogStd :std="logEntry.std" />
     </div>
     <div v-if="showTimestamp">
-      <log-date :date="logEntry.date"></log-date>
+      <LogDate :date="logEntry.date" />
     </div>
     <div class="flex">
-      <log-level :level="logEntry.level"></log-level>
+      <LogLevel :level="logEntry.level" />
     </div>
     <div>
-      <ul class="fields cursor-pointer space-x-4" :class="{ expanded }" @click="expandToggle()">
-        <li v-for="(value, name) in validValues" class="inline-block">
+      <ul class="fields cursor-pointer space-x-4" :class="{ expanded }">
+        <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>
@@ -20,8 +28,13 @@
         </li>
         <li class="text-light" v-if="Object.keys(validValues).length === 0">all values are hidden</li>
       </ul>
-      <field-list :fields="logEntry.unfilteredMessage" :expanded="expanded" :visible-keys="visibleKeys"></field-list>
+      <FieldList :fields="logEntry.unfilteredMessage" :expanded="expanded" :visible-keys="visibleKeys" />
     </div>
+    <LogMessageActions
+      class="duration-250 absolute -right-1 opacity-0 transition-opacity delay-150 group-hover/entry:opacity-100"
+      :message="() => JSON.stringify(logEntry.message)"
+      :log-entry="logEntry"
+    />
   </div>
 </template>
 <script lang="ts" setup>
@@ -29,9 +42,10 @@ import { type ComplexLogEntry } from "@/models/LogEntry";
 
 const { markSearch } = useSearchFilter();
 
-const { logEntry } = defineProps<{
+const { logEntry, showContainerName = false } = defineProps<{
   logEntry: ComplexLogEntry;
   visibleKeys: string[][];
+  showContainerName?: boolean;
 }>();
 
 const [expanded, expandToggle] = useToggle();
@@ -45,19 +59,10 @@ const validValues = computed(() => {
 .text-light {
   @apply text-base-content/70;
 }
-.fields {
-  &:hover {
-    &::after {
-      content: "expand json";
-      @apply ml-2 inline-block text-secondary;
-      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
-    }
-  }
 
-  &.expanded:hover {
-    &::after {
-      content: "collapse json";
-    }
+.fields {
+  li {
+    @apply inline-flex;
   }
 }
 </style>

assets/components/LogViewer/ContainerName.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="grid w-40 overflow-hidden rounded text-center text-sm text-white">
+    <div class="random-color col-start-1 row-start-1 brightness-75"></div>
+    <div class="col-start-1 row-start-1 truncate px-2 brightness-100 [direction:rtl]">{{ containerNames[id] }}</div>
+  </div>
+</template>
+<script lang="ts">
+const colors = [
+  "#4B0082",
+  "#FF00FF",
+  "#FF7F00",
+  "#FFFF00",
+  "#00FF00",
+  "#00FFFF",
+  "#FF0000",
+  "#0000FF",
+  "#FF007F",
+  "#32CD32",
+  "#40E0D0",
+  "#E6E6FA",
+  "#800080",
+  "#FFD700",
+  "#FF4040",
+] as const;
+</script>
+<script lang="ts" setup>
+const containerStore = useContainerStore();
+const { containerNames } = storeToRefs(containerStore);
+
+const { id } = defineProps<{
+  id: string;
+}>();
+
+const color = computed(() => colors[Math.abs(hashCode(id)) % colors.length]);
+</script>
+
+<style lang="postcss" scoped>
+.random-color {
+  background-color: v-bind(color);
+}
+</style>

assets/components/LogViewer/ContainerStat.vue

@@ -1,36 +0,0 @@
-<template>
-  <div class="flex gap-4" v-if="container.stat">
-    <stat-monitor :data="memoryData" label="mem" :stat-value="formatBytes(unref(container.stat).memoryUsage)" />
-    <stat-monitor :data="cpuData" label="load" :stat-value="Math.max(0, unref(container.stat).cpu) + '%'" />
-  </div>
-</template>
-
-<script lang="ts" setup>
-const { container } = useContainerContext();
-
-const cpuData = computedWithControl(
-  () => container.value.stat,
-  () => {
-    const history = container.value.statHistory;
-    const points: Point<unknown>[] = history.map((stat, i) => ({
-      x: i,
-      y: Math.max(0, stat.snapshot.cpu),
-      value: Math.max(0, stat.snapshot.cpu) + "%",
-    }));
-    return points;
-  },
-);
-
-const memoryData = computedWithControl(
-  () => container.value.stat,
-  () => {
-    const history = container.value.statHistory;
-    const points: Point<string>[] = history.map((stat, i) => ({
-      x: i,
-      y: stat.snapshot.memory,
-      value: formatBytes(stat.snapshot.memoryUsage),
-    }));
-    return points;
-  },
-);
-</script>

assets/components/LogViewer/DockerEventLogItem.vue

@@ -1,11 +1,13 @@
 <template>
-  <div class="flex-1 font-sans text-[0.9rem]">
-    <span class="whitespace-pre-wrap" :data-event="logEntry.event" v-html="logEntry.message"></span>
-    <div
-      class="alert alert-info mt-8 w-auto text-[1rem] md:mx-auto md:w-1/2"
-      v-if="nextContainer && logEntry.event === 'container-stopped'"
-    >
-      <carbon:information class="h-6 w-6 shrink-0 stroke-current" />
+  <div class="flex w-full flex-col">
+    <div class="relative flex items-start gap-x-2">
+      <ContainerName class="flex-none" :id="logEntry.containerID" v-if="showContainerName" />
+      <LogDate :date="logEntry.date" v-if="showTimestamp" />
+      <LogLevel class="flex" />
+      <div class="whitespace-pre-wrap" :data-event="logEntry.event" v-html="logEntry.message"></div>
+    </div>
+    <div class="alert alert-info mt-8 w-auto flex-none font-sans text-[1rem] md:mx-auto md:w-1/2" v-if="followEligible">
+      <carbon:information class="size-6 shrink-0 stroke-current" />
       <div>
         <h3 class="text-lg font-bold">{{ $t("alert.similar-container-found.title") }}</h3>
         {{ $t("alert.similar-container-found.message", { containerId: nextContainer.id }) }}
@@ -31,35 +33,46 @@ const { t } = useI18n();
 
 const { logEntry } = defineProps<{
   logEntry: DockerEventLogEntry;
+  showContainerName?: boolean;
 }>();
 
+const { containers } = useLoggingContext();
+
 const store = useContainerStore();
-const { containers } = storeToRefs(store);
-const { container } = useContainerContext();
+
+const { containers: allContainers } = storeToRefs(store);
 
 const nextContainer = computed(
   () =>
-    containers.value
-      .filter(
+    [
+      ...allContainers.value.filter(
         (c) =>
-          c.host === container.value.host &&
+          c.host === containers.value[0].host &&
           c.created > logEntry.date &&
-          c.name === container.value.name &&
+          c.name === containers.value[0].name &&
           c.state === "running",
-      )
-      .toSorted((a, b) => +a.created - +b.created)[0],
+      ),
+    ].sort((a, b) => +a.created - +b.created)[0],
+);
+
+const followEligible = computed(
+  () =>
+    router.currentRoute.value.name === "container-id" &&
+    logEntry.event === "container-stopped" &&
+    containers.value.length === 1 &&
+    nextContainer.value !== undefined,
 );
 
 function redirectNow() {
   showToast(
     {
       title: t("alert.redirected.title"),
-      message: t("alert.redirected.message", { containerId: nextContainer.value.id }),
+      message: t("alert.redirected.message", { containerId: nextContainer.value?.id }),
       type: "info",
     },
     { expire: 5000 },
   );
-  router.push({ name: "container-id", params: { id: nextContainer.value.id } });
+  router.push({ name: "container-id", params: { id: nextContainer.value?.id } });
 }
 </script>
 

assets/components/LogViewer/EventSource.spec.ts

@@ -1,15 +1,16 @@
-import { mount } from "@vue/test-utils";
 import { createTestingPinia } from "@pinia/testing";
+import { mount } from "@vue/test-utils";
+import { useSearchFilter } from "@/composable/search";
+import { settings } from "@/stores/settings";
 // @ts-ignore
 import EventSource, { sources } from "eventsourcemock";
-import LogEventSource from "./LogEventSource.vue";
-import LogViewer from "./LogViewer.vue";
-import { settings } from "@/stores/settings";
-import { useSearchFilter } from "@/composable/search";
-import { vi, describe, expect, beforeEach, test, afterEach } from "vitest";
+import { afterEach, beforeEach, describe, expect, test, vi } from "vitest";
 import { computed, nextTick } from "vue";
+import { createI18n } from "vue-i18n";
 import { createRouter, createWebHistory } from "vue-router";
-import { containerContext } from "@/composable/containerContext";
+import { default as Component } from "./EventSource.vue";
+import LogViewer from "@/components/LogViewer/LogViewer.vue";
+import { Container } from "@/models/Container";
 
 vi.mock("@/stores/config", () => ({
   __esModule: true,
@@ -20,7 +21,7 @@ vi.mock("@/stores/config", () => ({
 /**
  * @vitest-environment jsdom
  */
-describe("<LogEventSource />", () => {
+describe("<ContainerEventSource />", () => {
   const search = useSearchFilter();
 
   beforeEach(() => {
@@ -66,32 +67,35 @@ describe("<LogEventSource />", () => {
       ],
     });
 
-    return mount(LogEventSource, {
+    return mount(Component<Container>, {
       global: {
-        plugins: [router, createTestingPinia({ createSpy: vi.fn })],
+        plugins: [router, createTestingPinia({ createSpy: vi.fn }), createI18n({})],
         components: {
           LogViewer,
         },
         provide: {
-          [containerContext as symbol]: {
-            container: computed(() => ({ id: "abc", image: "test:v123", host: "localhost" })),
+          scrollingPaused: computed(() => false),
+          [loggingContextKey as symbol]: {
+            containers: computed(() => [{ id: "abc", image: "test:v123", host: "localhost" }]),
             streamConfig: reactive({ stdout: true, stderr: true }),
           },
-          scrollingPaused: computed(() => false),
         },
       },
       slots: {
         default: `
-        <template #scoped="params"><log-viewer :messages="params.messages"></log-viewer></template>
+        <template #scoped="params"><LogViewer :messages="params.messages" :show-container-name="false" :visible-keys="[]" /></template>
         `,
       },
-      props: {},
+      props: {
+        streamSource: useContainerStream,
+        entity: new Container("abc", new Date(), "image", "name", "command", "localhost", {}, "status", "created", []),
+      },
     });
   }
 
-  const sourceUrl = "/api/logs/stream/localhost/abc?stdout=1&stderr=1";
+  const sourceUrl = "/api/hosts/localhost/containers/abc/logs/stream?stdout=1&stderr=1";
 
-  test("renders correctly", async () => {
+  test("renders loading correctly", async () => {
     const wrapper = createLogEventSource();
     expect(wrapper.html()).toMatchSnapshot();
   });
@@ -139,19 +143,6 @@ describe("<LogEventSource />", () => {
       expect(wrapper.find("ul.events").html()).toMatchSnapshot();
     });
 
-    test("should render messages with color", async () => {
-      const wrapper = createLogEventSource();
-      sources[sourceUrl].emitOpen();
-      sources[sourceUrl].emitMessage({
-        data: '{"ts":1560336942459,"m":"\\u001b[30mblack\\u001b[37mwhite", "id":1}',
-      });
-
-      vi.runAllTimers();
-      await nextTick();
-
-      expect(wrapper.find("ul.events").html()).toMatchSnapshot();
-    });
-
     test("should render messages with html entities", async () => {
       const wrapper = createLogEventSource();
       sources[sourceUrl].emitOpen();

assets/components/LogViewer/EventSource.vue

@@ -0,0 +1,28 @@
+<template>
+  <InfiniteLoader :onLoadMore="fetchMore" :enabled="messages.length > 50"></InfiniteLoader>
+  <slot :messages="messages"></slot>
+</template>
+
+<script lang="ts" setup generic="T">
+import { LogStreamSource } from "@/composable/eventStreams";
+
+const loadingMore = defineEmit<[value: boolean]>();
+
+const props = defineProps<{
+  streamSource: (t: Ref<T>) => LogStreamSource;
+  entity: T;
+}>();
+
+const { entity, streamSource } = toRefs(props);
+
+const { messages, loadOlderLogs } = streamSource.value(entity);
+
+const beforeLoading = () => loadingMore(true);
+const afterLoading = () => loadingMore(false);
+
+defineExpose({
+  clear: () => (messages.value = []),
+});
+
+const fetchMore = () => loadOlderLogs({ beforeLoading, afterLoading });
+</script>

assets/components/LogViewer/FieldList.vue

@@ -1,19 +1,14 @@
 <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
-          :fields="value"
-          :parent-key="parentKey.concat(name)"
-          :visible-keys="visibleKeys"
-          expanded
-        ></field-list>
+        <FieldList :fields="value" :parent-key="parentKey.concat(name)" :visible-keys="visibleKeys" expanded />
       </template>
       <template v-else-if="Array.isArray(value)">
-        <a @click="toggleField(name)" class="link-primary cursor-pointer">
-          {{ hasField(name) ? "remove" : "add" }}&nbsp;</a
-        >
+        <a @click.stop="toggleField(name)" class="link-primary mr-2 cursor-pointer">
+          {{ hasField(name) ? "remove" : "add" }}
+        </a>
         <span class="text-light">{{ name }}=</span>[
         <span class="font-bold" v-for="(item, index) in value">
           <span v-html="JSON.stringify(item)"></span><span v-if="index !== value.length - 1">,</span>
@@ -21,9 +16,9 @@
         ]
       </template>
       <template v-else>
-        <a @click="toggleField(name)" class="link-primary cursor-pointer">
-          {{ hasField(name) ? "remove" : "add" }}&nbsp;</a
-        >
+        <a @click.stop="toggleField(name)" class="link-primary mr-2 cursor-pointer">
+          {{ hasField(name) ? "remove" : "add" }}
+        </a>
         <span class="text-light">{{ name }}=</span><span class="font-bold" v-html="value"></span>
       </template>
     </li>

assets/components/LogViewer/LogActionsToolbar.vue

@@ -1,89 +0,0 @@
-<template>
-  <div class="dropdown dropdown-end dropdown-hover">
-    <label tabindex="0" class="btn btn-ghost btn-sm gap-0.5 px-2">
-      <carbon:circle-solid class="w-2.5 text-red" v-if="streamConfig.stderr" />
-      <carbon:circle-solid class="w-2.5 text-blue" v-if="streamConfig.stdout" />
-    </label>
-    <ul tabindex="0" class="menu dropdown-content rounded-box z-50 w-52 bg-base p-1 shadow">
-      <li>
-        <a @click.prevent="clear()">
-          <octicon:trash-24 /> {{ $t("toolbar.clear") }}
-          <key-shortcut char="k" :modifiers="['shift', 'meta']"></key-shortcut>
-        </a>
-      </li>
-      <li>
-        <a :href="`${base}/api/logs/download/${container.host}/${container.id}`" download>
-          <octicon:download-24 /> {{ $t("toolbar.download") }}
-        </a>
-      </li>
-      <li>
-        <a @click.prevent="showSearch = true">
-          <mdi:magnify /> {{ $t("toolbar.search") }}
-          <key-shortcut char="f"></key-shortcut>
-        </a>
-      </li>
-      <li class="line"></li>
-      <li>
-        <a
-          @click="
-            streamConfig.stdout = true;
-            streamConfig.stderr = true;
-          "
-        >
-          <div class="flex h-4 w-4 gap-0.5">
-            <template v-if="streamConfig.stderr && streamConfig.stdout">
-              <carbon:circle-solid class="w-2 text-red" />
-              <carbon:circle-solid class="w-2 text-blue" />
-            </template>
-          </div>
-          {{ $t("toolbar.show-all") }}
-        </a>
-      </li>
-      <li>
-        <a
-          @click="
-            streamConfig.stdout = true;
-            streamConfig.stderr = false;
-          "
-        >
-          <div class="flex h-4 w-4 flex-col gap-1">
-            <carbon:circle-solid class="w-2 text-blue" v-if="!streamConfig.stderr && streamConfig.stdout" />
-          </div>
-          {{ $t("toolbar.show", { std: "STDOUT" }) }}
-        </a>
-      </li>
-      <li>
-        <a
-          @click="
-            streamConfig.stdout = false;
-            streamConfig.stderr = true;
-          "
-        >
-          <div class="flex h-4 w-4 flex-col gap-1">
-            <carbon:circle-solid class="w-2 text-red" v-if="streamConfig.stderr && !streamConfig.stdout" />
-          </div>
-          {{ $t("toolbar.show", { std: "STDERR" }) }}
-        </a>
-      </li>
-    </ul>
-  </div>
-</template>
-
-<script lang="ts" setup>
-const { showSearch } = useSearchFilter();
-const { base } = config;
-
-const clear = defineEmit();
-
-const { container, streamConfig } = useContainerContext();
-</script>
-
-<style scoped lang="postcss">
-li.line {
-  @apply h-px bg-base-content/20;
-}
-
-a {
-  @apply whitespace-nowrap;
-}
-</style>

assets/components/LogViewer/LogContainer.vue

@@ -1,53 +0,0 @@
-<template>
-  <scrollable-view :scrollable="scrollable" v-if="container">
-    <template #header v-if="showTitle">
-      <div class="mx-2 flex items-center gap-2">
-        <container-title @close="$emit('close')" />
-        <container-stat class="ml-auto" />
-
-        <log-actions-toolbar @clear="onClearClicked()" class="mobile-hidden" />
-        <a class="btn btn-circle btn-xs" @click="close()" v-if="closable">
-          <mdi:close />
-        </a>
-      </div>
-    </template>
-    <template #default="{ setLoading }">
-      <log-viewer-with-source ref="viewer" @loading-more="setLoading($event)" />
-    </template>
-  </scrollable-view>
-</template>
-
-<script lang="ts" setup>
-import LogViewerWithSource from "./LogViewerWithSource.vue";
-
-const {
-  id,
-  showTitle = false,
-  scrollable = false,
-  closable = false,
-} = defineProps<{
-  id: string;
-  showTitle?: boolean;
-  scrollable?: boolean;
-  closable?: boolean;
-}>();
-
-const close = defineEmit();
-
-const store = useContainerStore();
-const container = store.currentContainer($$(id));
-provideContainerContext(container);
-
-const viewer = ref<InstanceType<typeof LogViewerWithSource>>();
-
-function onClearClicked() {
-  viewer.value?.clear();
-}
-
-onKeyStroke("k", (e) => {
-  if ((e.ctrlKey || e.metaKey) && e.shiftKey) {
-    onClearClicked();
-    e.preventDefault();
-  }
-});
-</script>

assets/components/LogViewer/LogDate.vue

@@ -1,7 +1,7 @@
 <template>
-  <tag size="small">
-    <date-time :date="date" class="whitespace-nowrap text-blue"></date-time>
-  </tag>
+  <Tag size="small">
+    <DateTime :date="date" class="whitespace-nowrap text-blue" />
+  </Tag>
 </template>
 <script lang="ts" setup>
 defineProps<{

assets/components/LogViewer/LogEventSource.vue

@@ -1,19 +0,0 @@
-<template>
-  <infinite-loader :onLoadMore="fetchMore" :enabled="messages.length > 100"></infinite-loader>
-  <slot :messages="messages"></slot>
-</template>
-
-<script lang="ts" setup>
-const loadingMore = defineEmit<[value: boolean]>();
-
-const { messages, loadOlderLogs } = useLogStream();
-
-const beforeLoading = () => loadingMore(true);
-const afterLoading = () => loadingMore(false);
-
-defineExpose({
-  clear: () => (messages.value = []),
-});
-
-const fetchMore = () => loadOlderLogs({ beforeLoading, afterLoading });
-</script>

assets/components/LogViewer/LogLevel.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :data-level="level" :data-position="position" class="mt-1.5 h-2.5 w-2.5 flex-none rounded-lg"></div>
+  <div :data-level="level" :data-position="position" class="mt-1.5 size-2.5 flex-none rounded-lg"></div>
 </template>
 <script lang="ts" setup>
 import { Position } from "@/models/LogEntry";

assets/components/LogViewer/LogList.vue

@@ -0,0 +1,80 @@
+<template>
+  <ul
+    class="events group py-4"
+    :class="{ 'disable-wrap': !softWrap, [size]: true, compact }"
+    v-if="messages.length > 0"
+  >
+    <li
+      v-for="item in messages"
+      :key="item.id"
+      :data-key="item.id"
+      :class="{ 'border border-secondary': toRaw(item) === toRaw(lastSelectedItem) }"
+      class="group/entry"
+    >
+      <component
+        :is="item.getComponent()"
+        :log-entry="item"
+        :visible-keys="visibleKeys"
+        :show-container-name="showContainerName"
+      />
+    </li>
+  </ul>
+  <div v-else class="m-4 text-center">
+    <span class="loading loading-ring loading-md text-primary"></span>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { toRaw } from "vue";
+
+import { type JSONObject, LogEntry } from "@/models/LogEntry";
+
+defineProps<{
+  messages: LogEntry<string | JSONObject>[];
+  visibleKeys: string[][];
+  lastSelectedItem: LogEntry<string | JSONObject> | undefined;
+  showContainerName: boolean;
+}>();
+</script>
+<style scoped lang="postcss">
+.events {
+  font-family:
+    ui-monospace,
+    SFMono-Regular,
+    SF Mono,
+    Consolas,
+    Liberation Mono,
+    monaco,
+    Menlo,
+    monospace;
+
+  > li {
+    @apply flex break-words px-2 py-1 last:snap-end odd:bg-gray-400/[0.07] md:px-4;
+    &:last-child {
+      scroll-margin-block-end: 5rem;
+    }
+
+    .jump-context {
+      @apply mr-2 flex items-center font-sans text-secondary;
+    }
+  }
+
+  &.small {
+    @apply text-[0.7em];
+  }
+
+  &.medium {
+    @apply text-[0.8em];
+  }
+
+  &.large {
+    @apply text-lg;
+  }
+
+  &.compact {
+    > li {
+      @apply py-0;
+    }
+  }
+}
+</style>

assets/components/LogViewer/LogMessageActions.vue

@@ -0,0 +1,60 @@
+<template>
+  <div class="flex gap-2">
+    <div
+      class="flex min-w-[0.98rem] items-start justify-end align-bottom hover:cursor-pointer"
+      v-if="isSupported"
+      :title="t('log_actions.copy_log')"
+    >
+      <span
+        class="rounded bg-slate-800/60 px-1.5 py-1 text-primary hover:bg-slate-700"
+        @click="copyLogMessageToClipBoard()"
+      >
+        <carbon:copy-file />
+      </span>
+    </div>
+    <div
+      class="flex min-w-[0.98rem] items-start justify-end align-bottom hover:cursor-pointer"
+      :title="t('log_actions.jump_to_context')"
+      v-if="isSearching()"
+    >
+      <a
+        class="rounded bg-slate-800/60 px-1.5 py-1 text-primary hover:bg-slate-700"
+        @click="handleJumpLineSelected($event, logEntry)"
+        :href="`#${logEntry.id}`"
+      >
+        <carbon:search-locate />
+      </a>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { LogEntry, JSONObject } from "@/models/LogEntry";
+
+const { message, logEntry } = defineProps<{
+  message: () => string;
+  logEntry: LogEntry<string | JSONObject>;
+}>();
+
+const { showToast } = useToast();
+const { copy, isSupported, copied } = useClipboard();
+const { t } = useI18n();
+
+const { isSearching } = useSearchFilter();
+const { handleJumpLineSelected } = useLogSearchContext();
+
+async function copyLogMessageToClipBoard() {
+  await copy(message());
+
+  if (copied.value) {
+    showToast(
+      {
+        title: t("toasts.copied.title"),
+        message: t("toasts.copied.message"),
+        type: "info",
+      },
+      { expire: 2000 },
+    );
+  }
+}
+</script>

assets/components/LogViewer/LogStd.vue

@@ -1,7 +1,7 @@
 <template>
-  <tag size="small" :std="std">
+  <Tag size="small" :std="std">
     {{ std }}
-  </tag>
+  </Tag>
 </template>
 
 <script lang="ts" setup>

assets/components/LogViewer/LogViewer.vue

@@ -1,53 +1,34 @@
 <template>
-  <ul class="events group py-4" :class="{ 'disable-wrap': !softWrap, [size]: true }">
-    <li
-      v-for="item in filtered"
-      :key="item.id"
-      :data-key="item.id"
-      :class="{ 'border border-secondary': toRaw(item) === toRaw(lastSelectedItem) }"
-    >
-      <a
-        class="jump-context tooltip tooltip-right tooltip-primary"
-        v-if="isSearching()"
-        data-tip="Jump to Context"
-        @click="handleJumpLineSelected($event, item)"
-        :href="`#${item.id}`"
-      >
-        <ic:sharp-find-in-page />
-      </a>
-      <component :is="item.getComponent()" :log-entry="item" :visible-keys="visibleKeys.value" />
-    </li>
-  </ul>
+  <LogList
+    :messages="filtered"
+    :last-selected-item="lastSelectedItem"
+    :visible-keys="visibleKeys"
+    :show-container-name="showContainerName"
+  />
 </template>
 
 <script lang="ts" setup>
-import { toRaw } from "vue";
 import { useRouteHash } from "@vueuse/router";
 
 import { type JSONObject, LogEntry } from "@/models/LogEntry";
 
 const props = defineProps<{
   messages: LogEntry<string | JSONObject>[];
+  visibleKeys: string[][];
+  showContainerName: boolean;
 }>();
 
-const { container } = useContainerContext();
-
-let visibleKeys = persistentVisibleKeys(container);
+const { messages, visibleKeys } = toRefs(props);
 
 const { filteredPayload } = useVisibleFilter(visibleKeys);
-const { filteredMessages, resetSearch, isSearching } = useSearchFilter();
+const { filteredMessages } = useSearchFilter();
 
-const { messages } = toRefs(props);
 const visible = filteredPayload(messages);
 const filtered = filteredMessages(visible);
 
-let lastSelectedItem: LogEntry<string | JSONObject> | undefined = $ref(undefined);
-
-function handleJumpLineSelected(e: Event, item: LogEntry<string | JSONObject>) {
-  lastSelectedItem = item;
-  resetSearch();
-}
-
+const { lastSelectedItem } = useLogSearchContext() as {
+  lastSelectedItem: Ref<LogEntry<string | JSONObject> | undefined>;
+};
 const routeHash = useRouteHash();
 watch(
   routeHash,
@@ -59,39 +40,4 @@ watch(
   { immediate: true, flush: "post" },
 );
 </script>
-<style scoped lang="postcss">
-.events {
-  font-family:
-    ui-monospace,
-    SFMono-Regular,
-    SF Mono,
-    Consolas,
-    Liberation Mono,
-    monaco,
-    Menlo,
-    monospace;
-
-  > li {
-    @apply flex break-words px-4 py-1 last:snap-end odd:bg-gray-400/[0.07];
-    &:last-child {
-      scroll-margin-block-end: 5rem;
-    }
-
-    .jump-context {
-      @apply mr-2 flex items-center font-sans text-secondary;
-    }
-  }
-
-  &.small {
-    @apply text-[0.7em];
-  }
-
-  &.medium {
-    @apply text-[0.8em];
-  }
-
-  &.large {
-    @apply text-lg;
-  }
-}
-</style>
+<style scoped lang="postcss"></style>

assets/components/LogViewer/LogViewerWithSource.vue

@@ -1,18 +0,0 @@
-<template>
-  <log-event-source ref="source" #default="{ messages }" @loading-more="loadingMore($event)">
-    <log-viewer :messages="messages"></log-viewer>
-  </log-event-source>
-</template>
-
-<script lang="ts" setup>
-import LogEventSource from "./LogEventSource.vue";
-
-const loadingMore = defineEmit<[value: boolean]>();
-const source = $ref<InstanceType<typeof LogEventSource>>();
-function clear() {
-  source?.clear();
-}
-defineExpose({
-  clear,
-});
-</script>

assets/components/LogViewer/MultiContainerStat.vue

@@ -0,0 +1,73 @@
+<template>
+  <div class="flex gap-4">
+    <StatMonitor :data="memoryData" label="mem" :stat-value="formatBytes(totalStat.memoryUsage)" />
+    <StatMonitor :data="cpuData" label="load" :stat-value="Math.max(0, totalStat.cpu).toFixed(2) + '%'" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { Stat } from "@/models/Container";
+import { Container } from "@/models/Container";
+
+const { containers } = defineProps<{
+  containers: Container[];
+}>();
+
+const totalStat = ref<Stat>({ cpu: 0, memory: 0, memoryUsage: 0 });
+const { history, reset } = useSimpleRefHistory(totalStat, { capacity: 300 });
+
+watch(
+  () => containers,
+  () => {
+    const initial: Stat[] = [];
+    for (let i = 1; i <= 300; i++) {
+      const stat = containers.reduce(
+        (acc, { statsHistory }) => {
+          const item = statsHistory.at(-i);
+          if (!item) {
+            return acc;
+          }
+          return {
+            cpu: acc.cpu + item.cpu,
+            memory: acc.memory + item.memory,
+            memoryUsage: acc.memoryUsage + item.memoryUsage,
+          };
+        },
+        { cpu: 0, memory: 0, memoryUsage: 0 },
+      );
+      initial.push(stat);
+    }
+    reset({ initial: initial.reverse() });
+  },
+  { immediate: true },
+);
+
+useIntervalFn(() => {
+  totalStat.value = containers.reduce(
+    (acc, { stat }) => {
+      return {
+        cpu: acc.cpu + stat.cpu,
+        memory: acc.memory + stat.memory,
+        memoryUsage: acc.memoryUsage + stat.memoryUsage,
+      };
+    },
+    { cpu: 0, memory: 0, memoryUsage: 0 },
+  );
+}, 1000);
+
+const cpuData = computed(() =>
+  history.value.map((stat, i) => ({
+    x: i,
+    y: Math.max(0, stat.cpu),
+    value: Math.max(0, stat.cpu).toFixed(2) + "%",
+  })),
+);
+
+const memoryData = computed(() =>
+  history.value.map((stat, i) => ({
+    x: i,
+    y: stat.memoryUsage,
+    value: formatBytes(stat.memoryUsage),
+  })),
+);
+</script>

assets/components/LogViewer/SimpleLogItem.vue

@@ -1,18 +1,35 @@
 <template>
-  <div class="flex items-start gap-x-2">
-    <log-std :std="logEntry.std" v-if="showStd" />
-    <log-date :date="logEntry.date" v-if="showTimestamp" />
-    <log-level class="flex" :level="logEntry.level" :position="logEntry.position" />
-    <div class="whitespace-pre-wrap group-[.disable-wrap]:whitespace-nowrap" v-html="colorize(logEntry.message)"></div>
+  <div class="relative flex w-full items-start gap-x-2">
+    <LogStd :std="logEntry.std" v-if="showStd" />
+    <ContainerName class="flex-none" :id="logEntry.containerID" v-if="showContainerName" />
+    <LogDate :date="logEntry.date" v-if="showTimestamp" />
+    <LogLevel class="flex" :level="logEntry.level" :position="logEntry.position" />
+    <div
+      class="whitespace-pre-wrap [word-break:break-word] group-[.disable-wrap]:whitespace-nowrap"
+      v-html="colorize(logEntry.message)"
+    ></div>
+    <LogMessageActions
+      class="duration-250 absolute -right-1 opacity-0 transition-opacity delay-150 group-hover/entry:opacity-100"
+      :message="() => decodeXML(stripAnsi(logEntry.message))"
+      :log-entry="logEntry"
+    />
   </div>
 </template>
 <script lang="ts" setup>
 import { SimpleLogEntry } from "@/models/LogEntry";
+import { decodeXML } from "entities";
 import AnsiConvertor from "ansi-to-html";
+import stripAnsi from "strip-ansi";
 
-const ansiConvertor = new AnsiConvertor({ escapeXML: false, fg: "var(--text-color)" });
-defineProps<{
+const ansiConvertor = new AnsiConvertor({
+  escapeXML: false,
+  fg: "var(--base-content-color)",
+  bg: "var(--base-color)",
+});
+
+const { showContainerName = false } = defineProps<{
   logEntry: SimpleLogEntry;
+  showContainerName?: boolean;
 }>();
 
 const { markSearch } = useSearchFilter();

assets/components/LogViewer/SkippedEntriesLogItem.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="my-4 flex-1 text-center">
     <div class="relative">
-      <zig-zag class="absolute inset-0 mt-2"></zig-zag>
-      <span class="relative whitespace-pre-wrap bg-base px-4 py-2 font-bold">{{
-        $t("error.logs-skipped", { total: logEntry.totalSkipped })
-      }}</span>
+      <ZigZag class="absolute inset-0 mt-2" />
+      <span class="relative whitespace-pre-wrap bg-base px-4 py-2 font-bold">
+        {{ $t("error.logs-skipped", { total: logEntry.totalSkipped }) }}
+      </span>
     </div>
   </div>
 </template>

assets/components/LogViewer/StatMonitor.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="relative hover:text-secondary" @mouseenter="mouseOver = true" @mouseleave="mouseOver = false">
-    <div class="mobile-hidden flex overflow-hidden rounded-sm border border-primary px-px pb-px pt-1">
-      <stat-sparkline :data="data" @selected-point="onSelectedPoint"></stat-sparkline>
+    <div class="hidden overflow-hidden rounded-sm border border-primary px-px pb-px pt-1 md:flex">
+      <StatSparkline :data="data" @selected-point="onSelectedPoint" />
     </div>
-    <div class="inline-flex gap-1 rounded bg-base p-px text-xs lg:absolute lg:-left-0.5 lg:-top-2">
+    <div class="inline-flex gap-1 rounded bg-base p-px text-xs md:absolute md:-left-0.5 md:-top-2">
       <div class="font-light uppercase">{{ label }}</div>
       <div class="select-none font-bold">
         {{ mouseOver ? selectedPoint?.value ?? selectedPoint?.y ?? statValue : statValue }}

assets/components/LogViewer/StatSparkline.vue

@@ -12,7 +12,7 @@ import { area, curveStep } from "d3-shape";
 
 const d3 = { extent, scaleLinear, area, curveStep };
 const { data, width = 150, height = 30 } = defineProps<{ data: Point<unknown>[]; width?: number; height?: number }>();
-const x = d3.scaleLinear().range([width, 0]);
+const x = d3.scaleLinear().range([0, width]);
 const y = d3.scaleLinear().range([height, 0]);
 
 const selectedPoint = defineEmit<[value: Point<unknown>]>();

assets/components/LogViewer/ViewerWithSource.vue

@@ -0,0 +1,38 @@
+<template>
+  <EventSource
+    ref="source"
+    #default="{ messages }"
+    @loading-more="loadingMore($event)"
+    :stream-source="streamSource"
+    :entity="props.entity"
+  >
+    <LogViewer :messages="messages" :visible-keys="visibleKeys" :show-container-name="showContainerName" />
+  </EventSource>
+</template>
+
+<script lang="ts" setup generic="T">
+import LogEventSource from "@/components/ContainerViewer/LogEventSource.vue";
+import { LogStreamSource } from "@/composable/eventStreams";
+
+const props = defineProps<{
+  streamSource: (t: Ref<T>) => LogStreamSource;
+  visibleKeys: string[][];
+  showContainerName: boolean;
+  entity: T;
+}>();
+
+const loadingMore = defineEmit<[value: boolean]>();
+
+const source = $ref<InstanceType<typeof LogEventSource>>();
+
+defineExpose({
+  clear: () => source?.clear(),
+});
+
+onKeyStroke("k", (e) => {
+  if ((e.ctrlKey || e.metaKey) && e.shiftKey) {
+    source?.clear();
+    e.preventDefault();
+  }
+});
+</script>

assets/components/LogViewer/__snapshots__/EventSource.spec.ts.snap

@@ -0,0 +1,120 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`<ContainerEventSource /> > render html correctly > should render dates with 12 hour style 1`] = `
+"<ul data-v-cf9ff940="" class="events group py-4 medium">
+  <li data-v-cf9ff940="" data-key="1" class="group/entry">
+    <div data-v-cf9ff940="" class="relative flex w-full items-start gap-x-2" visible-keys="">
+      <!--v-if-->
+      <!--v-if-->
+      <div data-v-961504e7="" class="inline-flex items-center justify-center rounded bg-base-lighter px-2 py-[0.2em]" size="small">
+        <div class="inline-flex gap-2 whitespace-nowrap text-blue"><time datetime="2019-06-12T10:55:42.459Z" class="mobile-hidden">06/12/2019</time><time datetime="2019-06-12T10:55:42.459Z">10:55:42 AM</time></div>
+      </div>
+      <div data-v-e625cddd="" class="mt-1.5 size-2.5 flex-none rounded-lg flex"></div>
+      <div class="whitespace-pre-wrap [word-break:break-word] group-[.disable-wrap]:whitespace-nowrap">&lt;test&gt;foo bar&lt;/test&gt;</div>
+      <div class="flex gap-2 duration-250 absolute -right-1 opacity-0 transition-opacity delay-150 group-hover/entry:opacity-100">
+        <!--v-if-->
+        <!--v-if-->
+      </div>
+    </div>
+  </li>
+</ul>"
+`;
+
+exports[`<ContainerEventSource /> > render html correctly > should render dates with 24 hour style 1`] = `
+"<ul data-v-cf9ff940="" class="events group py-4 medium">
+  <li data-v-cf9ff940="" data-key="1" class="group/entry">
+    <div data-v-cf9ff940="" class="relative flex w-full items-start gap-x-2" visible-keys="">
+      <!--v-if-->
+      <!--v-if-->
+      <div data-v-961504e7="" class="inline-flex items-center justify-center rounded bg-base-lighter px-2 py-[0.2em]" size="small">
+        <div class="inline-flex gap-2 whitespace-nowrap text-blue"><time datetime="2019-06-12T10:55:42.459Z" class="mobile-hidden">06/12/2019</time><time datetime="2019-06-12T10:55:42.459Z">10:55:42</time></div>
+      </div>
+      <div data-v-e625cddd="" class="mt-1.5 size-2.5 flex-none rounded-lg flex"></div>
+      <div class="whitespace-pre-wrap [word-break:break-word] group-[.disable-wrap]:whitespace-nowrap">&lt;test&gt;foo bar&lt;/test&gt;</div>
+      <div class="flex gap-2 duration-250 absolute -right-1 opacity-0 transition-opacity delay-150 group-hover/entry:opacity-100">
+        <!--v-if-->
+        <!--v-if-->
+      </div>
+    </div>
+  </li>
+</ul>"
+`;
+
+exports[`<ContainerEventSource /> > render html correctly > should render messages 1`] = `
+"<ul data-v-cf9ff940="" class="events group py-4 medium">
+  <li data-v-cf9ff940="" data-key="1" class="group/entry">
+    <div data-v-cf9ff940="" class="relative flex w-full items-start gap-x-2" visible-keys="">
+      <!--v-if-->
+      <!--v-if-->
+      <div data-v-961504e7="" class="inline-flex items-center justify-center rounded bg-base-lighter px-2 py-[0.2em]" size="small">
+        <div class="inline-flex gap-2 whitespace-nowrap text-blue"><time datetime="2019-06-12T10:55:42.459Z" class="mobile-hidden">06/12/2019</time><time datetime="2019-06-12T10:55:42.459Z">10:55:42 AM</time></div>
+      </div>
+      <div data-v-e625cddd="" class="mt-1.5 size-2.5 flex-none rounded-lg flex"></div>
+      <div class="whitespace-pre-wrap [word-break:break-word] group-[.disable-wrap]:whitespace-nowrap">This is a message.</div>
+      <div class="flex gap-2 duration-250 absolute -right-1 opacity-0 transition-opacity delay-150 group-hover/entry:opacity-100">
+        <!--v-if-->
+        <!--v-if-->
+      </div>
+    </div>
+  </li>
+</ul>"
+`;
+
+exports[`<ContainerEventSource /> > render html correctly > should render messages with filter 1`] = `
+"<ul data-v-cf9ff940="" class="events group py-4 medium">
+  <li data-v-cf9ff940="" data-key="2" class="group/entry">
+    <div data-v-cf9ff940="" class="relative flex w-full items-start gap-x-2" visible-keys="">
+      <!--v-if-->
+      <!--v-if-->
+      <div data-v-961504e7="" class="inline-flex items-center justify-center rounded bg-base-lighter px-2 py-[0.2em]" size="small">
+        <div class="inline-flex gap-2 whitespace-nowrap text-blue"><time datetime="2019-06-12T10:55:42.459Z" class="mobile-hidden">06/12/2019</time><time datetime="2019-06-12T10:55:42.459Z">10:55:42 AM</time></div>
+      </div>
+      <div data-v-e625cddd="" class="mt-1.5 size-2.5 flex-none rounded-lg flex"></div>
+      <div class="whitespace-pre-wrap [word-break:break-word] group-[.disable-wrap]:whitespace-nowrap"><mark>test</mark> bar</div>
+      <div class="flex gap-2 duration-250 absolute -right-1 opacity-0 transition-opacity delay-150 group-hover/entry:opacity-100">
+        <!--v-if-->
+        <div class="flex min-w-[0.98rem] items-start justify-end align-bottom hover:cursor-pointer" title="log_actions.jump_to_context"><a class="rounded bg-slate-800/60 px-1.5 py-1 text-primary hover:bg-slate-700" href="#2"><svg viewBox="0 0 32 32" width="1.2em" height="1.2em">
+              <path fill="currentColor" d="m30 28.586l-4.688-4.688a8.028 8.028 0 1 0-1.415 1.414L28.586 30zM19 25a6 6 0 1 1 6-6a6.007 6.007 0 0 1-6 6M2 12h8v2H2zM2 2h16v2H2zm0 5h16v2H2z"></path>
+            </svg></a></div>
+      </div>
+    </div>
+  </li>
+</ul>"
+`;
+
+exports[`<ContainerEventSource /> > render html correctly > should render messages with html entities 1`] = `
+"<ul data-v-cf9ff940="" class="events group py-4 medium">
+  <li data-v-cf9ff940="" data-key="1" class="group/entry">
+    <div data-v-cf9ff940="" class="relative flex w-full items-start gap-x-2" visible-keys="">
+      <!--v-if-->
+      <!--v-if-->
+      <div data-v-961504e7="" class="inline-flex items-center justify-center rounded bg-base-lighter px-2 py-[0.2em]" size="small">
+        <div class="inline-flex gap-2 whitespace-nowrap text-blue"><time datetime="2019-06-12T10:55:42.459Z" class="mobile-hidden">06/12/2019</time><time datetime="2019-06-12T10:55:42.459Z">10:55:42 AM</time></div>
+      </div>
+      <div data-v-e625cddd="" class="mt-1.5 size-2.5 flex-none rounded-lg flex"></div>
+      <div class="whitespace-pre-wrap [word-break:break-word] group-[.disable-wrap]:whitespace-nowrap">&lt;test&gt;foo bar&lt;/test&gt;</div>
+      <div class="flex gap-2 duration-250 absolute -right-1 opacity-0 transition-opacity delay-150 group-hover/entry:opacity-100">
+        <!--v-if-->
+        <!--v-if-->
+      </div>
+    </div>
+  </li>
+</ul>"
+`;
+
+exports[`<ContainerEventSource /> > renders loading correctly 1`] = `
+"<div class="flex min-h-[1px] justify-center"><span class="loading loading-bars loading-md mt-4 text-primary" style="display: none;"></span></div>
+<div data-v-cf9ff940="" class="m-4 text-center"><span data-v-cf9ff940="" class="loading loading-ring loading-md text-primary"></span></div>"
+`;
+
+exports[`<ContainerEventSource /> > should parse messages 1`] = `
+SimpleLogEntry {
+  "_message": "This is a message.",
+  "containerID": undefined,
+  "date": 2019-06-12T10:55:42.459Z,
+  "id": 1,
+  "level": undefined,
+  "position": undefined,
+  "std": "stderr",
+}
+`;

assets/components/LogViewer/__snapshots__/LogEventSource.spec.ts.snap

@@ -1,114 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`<LogEventSource /> > render html correctly > should render dates with 12 hour style 1`] = `
-"<ul data-v-2e92daca=\\"\\" class=\\"events group py-4 medium\\">
-  <li data-v-2e92daca=\\"\\" data-key=\\"1\\" class=\\"\\">
-    <!--v-if-->
-    <div data-v-2e92daca=\\"\\" class=\\"flex items-start gap-x-2\\" visible-keys=\\"\\">
-      <!--v-if-->
-      <div data-v-961504e7=\\"\\" class=\\"inline-flex items-center justify-center rounded bg-base-lighter px-2 py-[0.2em] text-sm\\" size=\\"small\\">
-        <div class=\\"inline-flex gap-2 whitespace-nowrap text-blue\\"><time datetime=\\"2019-06-12T10:55:42.459Z\\" class=\\"mobile-hidden\\">06/12/2019</time><time datetime=\\"2019-06-12T10:55:42.459Z\\">10:55:42 AM</time></div>
-      </div>
-      <div data-v-e625cddd=\\"\\" class=\\"mt-1.5 h-2.5 w-2.5 flex-none rounded-lg flex\\"></div>
-      <div class=\\"whitespace-pre-wrap group-[.disable-wrap]:whitespace-nowrap\\">&lt;test&gt;foo bar&lt;/test&gt;</div>
-    </div>
-  </li>
-</ul>"
-`;
-
-exports[`<LogEventSource /> > render html correctly > should render dates with 24 hour style 1`] = `
-"<ul data-v-2e92daca=\\"\\" class=\\"events group py-4 medium\\">
-  <li data-v-2e92daca=\\"\\" data-key=\\"1\\" class=\\"\\">
-    <!--v-if-->
-    <div data-v-2e92daca=\\"\\" class=\\"flex items-start gap-x-2\\" visible-keys=\\"\\">
-      <!--v-if-->
-      <div data-v-961504e7=\\"\\" class=\\"inline-flex items-center justify-center rounded bg-base-lighter px-2 py-[0.2em] text-sm\\" size=\\"small\\">
-        <div class=\\"inline-flex gap-2 whitespace-nowrap text-blue\\"><time datetime=\\"2019-06-12T10:55:42.459Z\\" class=\\"mobile-hidden\\">06/12/2019</time><time datetime=\\"2019-06-12T10:55:42.459Z\\">10:55:42</time></div>
-      </div>
-      <div data-v-e625cddd=\\"\\" class=\\"mt-1.5 h-2.5 w-2.5 flex-none rounded-lg flex\\"></div>
-      <div class=\\"whitespace-pre-wrap group-[.disable-wrap]:whitespace-nowrap\\">&lt;test&gt;foo bar&lt;/test&gt;</div>
-    </div>
-  </li>
-</ul>"
-`;
-
-exports[`<LogEventSource /> > render html correctly > should render messages 1`] = `
-"<ul data-v-2e92daca=\\"\\" class=\\"events group py-4 medium\\">
-  <li data-v-2e92daca=\\"\\" data-key=\\"1\\" class=\\"\\">
-    <!--v-if-->
-    <div data-v-2e92daca=\\"\\" class=\\"flex items-start gap-x-2\\" visible-keys=\\"\\">
-      <!--v-if-->
-      <div data-v-961504e7=\\"\\" class=\\"inline-flex items-center justify-center rounded bg-base-lighter px-2 py-[0.2em] text-sm\\" size=\\"small\\">
-        <div class=\\"inline-flex gap-2 whitespace-nowrap text-blue\\"><time datetime=\\"2019-06-12T10:55:42.459Z\\" class=\\"mobile-hidden\\">06/12/2019</time><time datetime=\\"2019-06-12T10:55:42.459Z\\">10:55:42 AM</time></div>
-      </div>
-      <div data-v-e625cddd=\\"\\" class=\\"mt-1.5 h-2.5 w-2.5 flex-none rounded-lg flex\\"></div>
-      <div class=\\"whitespace-pre-wrap group-[.disable-wrap]:whitespace-nowrap\\">This is a message.</div>
-    </div>
-  </li>
-</ul>"
-`;
-
-exports[`<LogEventSource /> > render html correctly > should render messages with color 1`] = `
-"<ul data-v-2e92daca=\\"\\" class=\\"events group py-4 medium\\">
-  <li data-v-2e92daca=\\"\\" data-key=\\"1\\" class=\\"\\">
-    <!--v-if-->
-    <div data-v-2e92daca=\\"\\" class=\\"flex items-start gap-x-2\\" visible-keys=\\"\\">
-      <!--v-if-->
-      <div data-v-961504e7=\\"\\" class=\\"inline-flex items-center justify-center rounded bg-base-lighter px-2 py-[0.2em] text-sm\\" size=\\"small\\">
-        <div class=\\"inline-flex gap-2 whitespace-nowrap text-blue\\"><time datetime=\\"2019-06-12T10:55:42.459Z\\" class=\\"mobile-hidden\\">06/12/2019</time><time datetime=\\"2019-06-12T10:55:42.459Z\\">10:55:42 AM</time></div>
-      </div>
-      <div data-v-e625cddd=\\"\\" class=\\"mt-1.5 h-2.5 w-2.5 flex-none rounded-lg flex\\"></div>
-      <div class=\\"whitespace-pre-wrap group-[.disable-wrap]:whitespace-nowrap\\"><span style=\\"color:#000\\">black<span style=\\"color:#AAA\\">white</span></span></div>
-    </div>
-  </li>
-</ul>"
-`;
-
-exports[`<LogEventSource /> > render html correctly > should render messages with filter 1`] = `
-"<ul data-v-2e92daca=\\"\\" class=\\"events group py-4 medium\\">
-  <li data-v-2e92daca=\\"\\" data-key=\\"2\\" class=\\"\\"><a data-v-2e92daca=\\"\\" class=\\"jump-context tooltip tooltip-right tooltip-primary\\" data-tip=\\"Jump to Context\\" href=\\"#2\\"><svg data-v-2e92daca=\\"\\" viewBox=\\"0 0 24 24\\" width=\\"1.2em\\" height=\\"1.2em\\">
-        <path fill=\\"currentColor\\" d=\\"M20 19.59V8l-6-6H4v20l15.57-.02l-4.81-4.81c-.8.52-1.74.83-2.76.83c-2.76 0-5-2.24-5-5s2.24-5 5-5s5 2.24 5 5c0 1.02-.31 1.96-.83 2.75L20 19.59zM9 13c0 1.66 1.34 3 3 3s3-1.34 3-3s-1.34-3-3-3s-3 1.34-3 3z\\"></path>
-      </svg></a>
-    <div data-v-2e92daca=\\"\\" class=\\"flex items-start gap-x-2\\" visible-keys=\\"\\">
-      <!--v-if-->
-      <div data-v-961504e7=\\"\\" class=\\"inline-flex items-center justify-center rounded bg-base-lighter px-2 py-[0.2em] text-sm\\" size=\\"small\\">
-        <div class=\\"inline-flex gap-2 whitespace-nowrap text-blue\\"><time datetime=\\"2019-06-12T10:55:42.459Z\\" class=\\"mobile-hidden\\">06/12/2019</time><time datetime=\\"2019-06-12T10:55:42.459Z\\">10:55:42 AM</time></div>
-      </div>
-      <div data-v-e625cddd=\\"\\" class=\\"mt-1.5 h-2.5 w-2.5 flex-none rounded-lg flex\\"></div>
-      <div class=\\"whitespace-pre-wrap group-[.disable-wrap]:whitespace-nowrap\\"><mark>test</mark> bar</div>
-    </div>
-  </li>
-</ul>"
-`;
-
-exports[`<LogEventSource /> > render html correctly > should render messages with html entities 1`] = `
-"<ul data-v-2e92daca=\\"\\" class=\\"events group py-4 medium\\">
-  <li data-v-2e92daca=\\"\\" data-key=\\"1\\" class=\\"\\">
-    <!--v-if-->
-    <div data-v-2e92daca=\\"\\" class=\\"flex items-start gap-x-2\\" visible-keys=\\"\\">
-      <!--v-if-->
-      <div data-v-961504e7=\\"\\" class=\\"inline-flex items-center justify-center rounded bg-base-lighter px-2 py-[0.2em] text-sm\\" size=\\"small\\">
-        <div class=\\"inline-flex gap-2 whitespace-nowrap text-blue\\"><time datetime=\\"2019-06-12T10:55:42.459Z\\" class=\\"mobile-hidden\\">06/12/2019</time><time datetime=\\"2019-06-12T10:55:42.459Z\\">10:55:42 AM</time></div>
-      </div>
-      <div data-v-e625cddd=\\"\\" class=\\"mt-1.5 h-2.5 w-2.5 flex-none rounded-lg flex\\"></div>
-      <div class=\\"whitespace-pre-wrap group-[.disable-wrap]:whitespace-nowrap\\">&lt;test&gt;foo bar&lt;/test&gt;</div>
-    </div>
-  </li>
-</ul>"
-`;
-
-exports[`<LogEventSource /> > renders correctly 1`] = `
-"<div class=\\"flex min-h-[1px] justify-center\\"><span class=\\"loading loading-bars loading-md mt-4 text-primary\\" style=\\"display: none;\\"></span></div>
-<ul data-v-2e92daca=\\"\\" class=\\"events group py-4 medium\\"></ul>"
-`;
-
-exports[`<LogEventSource /> > should parse messages 1`] = `
-SimpleLogEntry {
-  "_message": "This is a message.",
-  "date": 2019-06-12T10:55:42.459Z,
-  "id": 1,
-  "level": undefined,
-  "position": undefined,
-  "std": "stderr",
-}
-`;

assets/components/MultiContainerViewer/MultiContainerLog.vue

@@ -0,0 +1,43 @@
+<template>
+  <ScrollableView :scrollable="scrollable" v-if="containers.length && ready">
+    <template #header>
+      <div class="mx-2 flex items-center gap-2 md:ml-4">
+        <div class="flex flex-1 gap-1.5 truncate @container md:gap-2">
+          <div class="inline-flex font-mono text-sm">
+            <div class="font-semibold">{{ containers.length }} containers</div>
+          </div>
+        </div>
+        <MultiContainerStat class="ml-auto" :containers="containers" />
+      </div>
+    </template>
+    <template #default="{ setLoading }">
+      <ViewerWithSource
+        ref="viewer"
+        @loading-more="setLoading($event)"
+        :stream-source="useMergedStream"
+        :entity="containers"
+        :visible-keys="visibleKeys"
+        :show-container-name="true"
+      />
+    </template>
+  </ScrollableView>
+</template>
+
+<script lang="ts" setup>
+import ViewerWithSource from "@/components/LogViewer/ViewerWithSource.vue";
+
+const { ids = [], scrollable = false } = defineProps<{
+  ids?: string[];
+  scrollable?: boolean;
+}>();
+
+const containerStore = useContainerStore();
+
+const { allContainersById, ready } = storeToRefs(containerStore);
+
+const containers = computed(() => ids.map((id) => allContainersById.value[id]));
+
+const visibleKeys = ref<string[][]>([]);
+
+provideLoggingContext(containers);
+</script>

assets/components/PageWithLinks.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="flex flex-col gap-8 px-4 py-4 md:px-8">
     <section>
-      <links />
+      <Links />
     </section>
     <slot></slot>
   </div>

assets/components/Popup.vue

@@ -4,7 +4,7 @@
     <transition name="fade">
       <div
         v-show="show && (delayedShow || glopbalShow)"
-        class="fixed z-50 rounded border border-secondary/50 bg-base-lighter p-4 shadow"
+        class="fixed z-50 rounded border border-base-content/20 bg-base-lighter p-4 shadow"
         ref="content"
       >
         <slot name="content"></slot>
@@ -16,22 +16,22 @@
 <script lang="ts" setup>
 import { globalShowPopup } from "@/composable/popup";
 
-let glopbalShow = globalShowPopup();
-let show = ref(glopbalShow.value);
-let delayedShow = refDebounced(show, 1000);
-
-let content: HTMLElement | null = $ref(null);
+const glopbalShow = globalShowPopup();
+const show = ref(glopbalShow.value);
+const delayedShow = refDebounced(show, 1000);
+const content = ref<HTMLElement>();
 
 const onMouseEnter = (e: Event) => {
   show.value = true;
   glopbalShow.value = true;
-  if (e.target && content && e.target instanceof Element) {
+
+  if (content.value && e.target instanceof HTMLElement) {
     const { left, top, width } = e.target.getBoundingClientRect();
     const x = left + width + 10;
     const y = top;
 
-    content.style.left = `${x}px`;
-    content.style.top = `${y}px`;
+    content.value.style.left = `${x}px`;
+    content.value.style.top = `${y}px`;
   }
 };
 
@@ -40,7 +40,7 @@ const onMouseLeave = () => {
   glopbalShow.value = false;
 };
 
-const el = useCurrentElement();
+const el: Ref<HTMLElement> = useCurrentElement();
 useEventListener(() => el.value?.nextElementSibling, "mouseenter", onMouseEnter);
 useEventListener(() => el.value?.nextElementSibling, "mouseleave", onMouseLeave);
 </script>

assets/components/Releases.vue

@@ -2,14 +2,14 @@
   <ul class="space-y-4 p-2">
     <li v-for="release in releases" v-if="releases?.length">
       <div class="flex items-baseline gap-1">
-        <carbon:warning class="h-4.25 w-4.25 self-center stroke-orange" v-if="release.breaking > 0" />
+        <carbon:warning class="self-center stroke-orange" v-if="release.breaking > 0" />
         <a :href="release.htmlUrl" class="link-primary text-lg font-bold" target="_blank" rel="noreferrer noopener">
           {{ release.name }}
         </a>
         <span class="ml-1 text-xs"><distance-time :date="new Date(release.createdAt)" /></span>
-        <tag class="ml-auto bg-red px-1 py-1 text-xs" v-if="release.tag === latest?.tag">
+        <Tag class="ml-auto bg-red px-1 py-1 text-xs" v-if="release.tag === latest?.tag">
           {{ $t("releases.latest") }}
-        </tag>
+        </Tag>
       </div>
       <div class="text-sm text-base-content/80">
         {{ summary(release) }}

assets/components/ScrollProgress.vue

@@ -27,15 +27,17 @@ const { indeterminate = false, autoHide = false } = defineProps<{
 
 const scrollProgress = ref(0);
 const root = ref<HTMLElement>();
-const store = useContainerStore();
-const { activeContainers } = storeToRefs(store);
+
+const pinnedLogsStore = usePinnedLogsStore();
+const { pinnedLogs } = storeToRefs(pinnedLogsStore);
+
 const scrollElement = ref<HTMLElement | Document>((root.value?.closest("[data-scrolling]") as HTMLElement) ?? document);
 const { y: scrollY } = useScroll(scrollElement as Ref<HTMLElement | Document>, { throttle: 100 });
 const show = autoResetRef(false, 2000);
 
 onMounted(() => {
   watch(
-    activeContainers,
+    pinnedLogs,
     () => {
       scrollElement.value = (root.value?.closest("[data-scrolling]") as HTMLElement) ?? document;
     },

assets/components/ScrollableView.vue

@@ -8,7 +8,7 @@
     </header>
     <main :data-scrolling="scrollable ? true : undefined" class="snap-y overflow-auto">
       <div class="invisible mr-28 text-right md:visible" v-show="paused">
-        <scroll-progress :indeterminate="loading" :auto-hide="!loading" class="z-2 !fixed top-16" />
+        <ScrollProgress :indeterminate="loading" :auto-hide="!loading" class="!fixed top-16 z-10" />
       </div>
       <div ref="scrollableContent">
         <slot :setLoading="setLoading"></slot>

assets/components/Search.vue

@@ -1,29 +1,35 @@
 <template>
-  <div
-    class="fixed -right-px -top-px z-10 flex w-96 items-center gap-4 rounded-bl border border-secondary/20 bg-base-darker p-4 shadow"
-    v-show="showSearch"
-    v-if="search"
-  >
-    <div class="input input-primary flex h-auto items-center">
-      <mdi:magnify />
-      <input
-        class="input input-ghost flex-1"
-        type="text"
-        placeholder="Find / RegEx"
-        ref="input"
-        v-model="searchFilter"
-        @keyup.esc="resetSearch()"
-      />
+  <transition name="slide">
+    <div
+      class="fixed z-10 flex w-full justify-end p-2"
+      v-show="showSearch"
+      v-if="search"
+      ref="container"
+      :style="style"
+    >
+      <div class="input input-primary flex h-auto items-center !shadow-lg">
+        <mdi:magnify />
+        <input
+          class="input input-ghost w-72 flex-1"
+          type="text"
+          placeholder="Find / RegEx"
+          ref="input"
+          v-model="searchFilter"
+          @keyup.esc="resetSearch()"
+        />
+        <a class="btn btn-circle btn-xs" @click="resetSearch()"> <mdi:close /></a>
+      </div>
     </div>
-
-    <a class="btn btn-circle btn-xs" @click="resetSearch()"> <mdi:close /></a>
-  </div>
+  </transition>
 </template>
 
 <script lang="ts" setup>
 const input = ref<HTMLInputElement>();
+const container = ref<HTMLDivElement>();
 const { searchFilter, showSearch, resetSearch } = useSearchFilter();
 
+const { style } = useDraggable(container);
+
 onKeyStroke("f", (e) => {
   if (e.ctrlKey || e.metaKey) {
     showSearch.value = true;
@@ -32,5 +38,31 @@ onKeyStroke("f", (e) => {
   }
 });
 
+onMounted(() => {
+  onKeyStroke(
+    "f",
+    (e) => {
+      if (e.ctrlKey || e.metaKey) {
+        e.stopPropagation();
+        resetSearch();
+      }
+    },
+    { target: input.value },
+  );
+});
+
 onUnmounted(() => resetSearch());
 </script>
+
+<style lang="postcss" scoped>
+.slide-enter-active,
+.slide-leave-active {
+  transition: all 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+
+.slide-enter-from,
+.slide-leave-to {
+  transform: translateY(-150px);
+  opacity: 0;
+}
+</style>

assets/components/ServiceViewer/ServiceLog.vue

@@ -0,0 +1,45 @@
+<template>
+  <ScrollableView :scrollable="scrollable" v-if="service.name">
+    <template #header>
+      <div class="mx-2 flex items-center gap-2 md:ml-4">
+        <div class="flex flex-1 gap-1.5 truncate @container md:gap-2">
+          <div class="inline-flex font-mono text-sm">
+            <div class="font-semibold">{{ service.name }}</div>
+          </div>
+          <Tag class="mobile-hidden hidden font-mono @3xl:block" size="small">
+            {{ $t("label.container", service.containers.length) }}
+          </Tag>
+        </div>
+        <MultiContainerStat class="ml-auto" :containers="service.containers" />
+      </div>
+    </template>
+    <template #default="{ setLoading }">
+      <ViewerWithSource
+        ref="viewer"
+        @loading-more="setLoading($event)"
+        :stream-source="useServiceStream"
+        :entity="service"
+        :visible-keys="visibleKeys"
+        :show-container-name="true"
+      />
+    </template>
+  </ScrollableView>
+</template>
+
+<script lang="ts" setup>
+import { Service } from "@/models/Stack";
+import ViewerWithSource from "@/components/LogViewer/ViewerWithSource.vue";
+
+const { name, scrollable = false } = defineProps<{
+  scrollable?: boolean;
+  name: string;
+}>();
+
+const visibleKeys = ref<string[][]>([]);
+
+const store = useSwarmStore();
+const { services } = storeToRefs(store) as unknown as { services: Ref<Service[]> };
+const service = computed(() => services.value.find((s) => s.name === name) ?? new Service("", []));
+
+provideLoggingContext(toRef(() => service.value.containers));
+</script>

assets/components/SideMenu.vue

@@ -1,59 +1,17 @@
 <template>
   <div v-if="ready" data-testid="side-menu">
-    <div class="breadcrumbs">
-      <ul>
-        <li><a @click.prevent="setHost(null)" class="link-primary">Hosts</a></li>
-        <li v-if="sessionHost && hosts[sessionHost]" class="cursor-default">
-          {{ hosts[sessionHost].name }}
-        </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 config.hosts">
-          <a @click.prevent="setHost(host.id)">
-            <ph:computer-tower />
-            {{ host.name }}
-          </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="item.id"
-          :class="isLabel(item) ? 'menu-title' : item.state"
-          :data-testid="item.id"
-        >
-          <template v-if="isLabel(item)">
-            {{ item.label }}
-          </template>
-          <popup v-else>
-            <router-link
-              :to="{ name: 'container-id', params: { id: item.id } }"
-              active-class="active-primary"
-              :title="item.name"
-            >
-              <div class="truncate">
-                {{ item.name }}<span class="font-light opacity-70" v-if="item.isSwarm">{{ item.swarmId }}</span>
-              </div>
-              <span
-                class="pin"
-                @click.stop.prevent="store.appendActiveContainer(item)"
-                v-show="!activeContainersById[item.id]"
-                :title="$t('tooltip.pin-column')"
-              >
-                <cil:columns />
-              </span>
+    <Toggle v-model="showSwarm" v-if="services.length > 0 || customGroups.length > 0">
+      <div class="text-lg font-light">{{ $t("label.swarm-mode") }}</div>
+    </Toggle>
 
-              <container-health :health="item.health"></container-health>
-            </router-link>
-            <template #content>
-              <container-popup :container="item"></container-popup>
-            </template>
-          </popup>
-        </li>
-      </transition-group>
-    </transition>
+    <SlideTransition :slide-right="showSwarm">
+      <template #left>
+        <HostMenu />
+      </template>
+      <template #right>
+        <SwarmMenu />
+      </template>
+    </SlideTransition>
   </div>
   <div role="status" class="flex animate-pulse flex-col gap-4" v-else>
     <div class="h-3 w-full rounded-full bg-base-content/50 opacity-50" v-for="_ in 9"></div>
@@ -62,148 +20,12 @@
 </template>
 
 <script lang="ts" setup>
-import { Container } from "@/models/Container";
-import { sessionHost } from "@/composable/storage";
+const containerStore = useContainerStore();
+const { ready } = storeToRefs(containerStore);
 
-const { t } = useI18n();
+const swarmStore = useSwarmStore();
+const { services, customGroups } = storeToRefs(swarmStore);
 
-const store = useContainerStore();
-
-const { activeContainers, visibleContainers, ready } = storeToRefs(store);
-
-function setHost(host: string | null) {
-  sessionHost.value = host;
-}
-
-const debouncedIds = debouncedRef(pinnedContainers, 200);
-const sortedContainers = computed(() =>
-  visibleContainers.value
-    .filter((c) => c.host === sessionHost.value)
-    .sort((a, b) => {
-      if (a.state === "running" && b.state !== "running") {
-        return -1;
-      } else if (a.state !== "running" && b.state === "running") {
-        return 1;
-      } else {
-        return a.name.localeCompare(b.name);
-      }
-    }),
-);
-
-const groupedContainers = computed(() =>
-  sortedContainers.value.reduce(
-    (acc, item) => {
-      if (debouncedIds.value.has(item.storageKey)) {
-        acc.pinned.push(item);
-      } else {
-        acc.unpinned.push(item);
-      }
-      return acc;
-    },
-    { pinned: [] as Container[], unpinned: [] as Container[] },
-  ),
-);
-
-type MenuLabel = { label: string; id: string; state: string };
-const pinnedLabel = { label: t("label.pinned"), id: "pinned", state: "label" } as MenuLabel;
-const allLabel = { label: t("label.containers"), id: "containers", state: "label" } as MenuLabel;
-
-function isLabel(item: Container | MenuLabel): item is MenuLabel {
-  return (item as MenuLabel).label !== undefined;
-}
-
-const menuItems = computed(() => {
-  if (groupedContainers.value.pinned.length > 0) {
-    return [pinnedLabel, ...groupedContainers.value.pinned, allLabel, ...groupedContainers.value.unpinned];
-  } else {
-    return [allLabel, ...groupedContainers.value.unpinned];
-  }
-});
-
-const hosts = computed(() =>
-  config.hosts.reduce(
-    (acc, item) => {
-      acc[item.id] = item;
-      return acc;
-    },
-    {} as Record<string, { name: string; id: string }>,
-  ),
-);
-
-const activeContainersById = computed(() =>
-  activeContainers.value.reduce(
-    (acc, item) => {
-      acc[item.id] = item;
-      return acc;
-    },
-    {} as Record<string, Container>,
-  ),
-);
+const showSwarm = useSessionStorage<boolean>("DOZZLE_SWARM_MODE", false);
 </script>
-<style scoped lang="postcss">
-.menu {
-  @apply text-[0.95rem];
-}
-.containers a {
-  @apply auto-cols-[auto_max-content];
-  .pin {
-    display: none;
-
-    &:hover {
-      @apply text-secondary;
-    }
-  }
-
-  &:hover {
-    .pin {
-      display: inline-block;
-    }
-  }
-}
-li.exited {
-  @apply opacity-50;
-}
-
-.slide-left-enter-active,
-.slide-left-leave-active,
-.slide-right-enter-active,
-.slide-right-leave-active {
-  transition: all 0.1s ease-out;
-}
-
-.slide-left-enter-from {
-  opacity: 0;
-  transform: translateX(20px);
-}
-
-.slide-right-enter-from {
-  opacity: 0;
-  transform: translateX(-20px);
-}
-
-.slide-left-leave-to {
-  opacity: 0;
-  transform: translateX(-20px);
-}
-
-.slide-right-leave-to {
-  opacity: 0;
-  transform: translateX(20px);
-}
-
-.list-move,
-.list-enter-active,
-.list-leave-active {
-  transition: all 0.19s ease;
-}
-
-.list-enter-from,
-.list-leave-to {
-  opacity: 0;
-  transform: translateX(30px);
-}
-
-.list-leave-active {
-  position: absolute;
-}
-</style>
+<style scoped lang="postcss"></style>

assets/components/SidePanel.vue

@@ -12,33 +12,21 @@
       </small>
     </h1>
 
-    <div class="flex gap-4">
-      <router-link
-        :to="{ name: 'settings' }"
-        :aria-label="$t('title.settings')"
-        data-testid="settings"
-        class="btn btn-circle btn-sm"
-      >
-        <mdi:cog />
-      </router-link>
-      <a :href="`${base}/logout`" :title="$t('button.logout')" v-if="secured" class="btn btn-circle btn-sm">
-        <mdi:logout />
-      </a>
-    </div>
-    <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>
 </template>
 
 <script lang="ts" setup>
-const { base, secured, hostname } = config;
+const { hostname } = config;
 </script>

assets/components/StackViewer/StackLog.vue

@@ -0,0 +1,47 @@
+<template>
+  <ScrollableView :scrollable="scrollable" v-if="stack.name">
+    <template #header>
+      <div class="mx-2 flex items-center gap-2 md:ml-4">
+        <div class="flex flex-1 gap-1.5 truncate @container md:gap-2">
+          <div class="inline-flex font-mono text-sm">
+            <div class="font-semibold">{{ stack.name }}</div>
+          </div>
+          <Tag class="mobile-hidden hidden font-mono @3xl:block" size="small">
+            {{ $t("label.container", stack.containers.length) }}
+          </Tag>
+          <Tag class="mobile-hidden hidden font-mono @3xl:block" size="small">
+            {{ $t("label.serivce", stack.services.length) }}
+          </Tag>
+        </div>
+        <MultiContainerStat class="ml-auto" :containers="stack.containers" />
+      </div>
+    </template>
+    <template #default="{ setLoading }">
+      <ViewerWithSource
+        ref="viewer"
+        @loading-more="setLoading($event)"
+        :stream-source="useStackStream"
+        :entity="stack"
+        :visible-keys="visibleKeys"
+        :show-container-name="true"
+      />
+    </template>
+  </ScrollableView>
+</template>
+
+<script lang="ts" setup>
+import { Stack } from "@/models/Stack";
+import ViewerWithSource from "@/components/LogViewer/ViewerWithSource.vue";
+
+const { name, scrollable = false } = defineProps<{
+  scrollable?: boolean;
+  name: string;
+}>();
+
+const visibleKeys = ref<string[][]>([]);
+
+const store = useSwarmStore();
+const { stacks } = storeToRefs(store) as unknown as { stacks: Ref<Stack[]> };
+const stack = computed(() => stacks.value.find((s) => s.name === name) ?? new Stack("", [], []));
+provideLoggingContext(toRef(() => stack.value.containers));
+</script>

assets/components/SwarmMenu.vue

@@ -0,0 +1,82 @@
+<template>
+  <ul class="menu p-0 text-[0.95rem]">
+    <li v-for="{ name, services } in stacks" :key="name">
+      <details open>
+        <summary class="font-light text-base-content/80">
+          <ph:stack />
+          {{ name }}
+
+          <router-link
+            :to="{ name: 'stack-name', params: { name } }"
+            class="btn btn-square btn-outline btn-primary btn-xs"
+            active-class="btn-active"
+            title="Merge all services into one view"
+          >
+            <ph:arrows-merge />
+          </router-link>
+        </summary>
+        <ul>
+          <li v-for="service in services" :key="service.name">
+            <router-link :to="{ name: 'service-name', params: { name: service.name } }" active-class="active-primary">
+              <ph:stack-simple />
+              <div class="truncate">
+                {{ service.name }}
+              </div>
+            </router-link>
+          </li>
+        </ul>
+      </details>
+    </li>
+
+    <li v-if="serivcesWithoutStacks.length > 0">
+      <details open>
+        <summary class="font-light text-base-content/80">
+          <ph:circles-four />
+          {{ $t("label.services") }}
+        </summary>
+        <ul>
+          <li v-for="service in serivcesWithoutStacks" :key="service.name">
+            <router-link :to="{ name: 'service-name', params: { name: service.name } }" active-class="active-primary">
+              <ph:stack-simple />
+              <div class="truncate">
+                {{ service.name }}
+              </div>
+            </router-link>
+          </li>
+        </ul>
+      </details>
+    </li>
+
+    <li v-if="customGroups.length > 0">
+      <details open>
+        <summary class="font-light text-base-content/80">
+          <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="active-primary">
+              <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 serivcesWithoutStacks = computed(() => services.value.filter((service) => !service.stack));
+</script>
+<style scoped lang="postcss">
+.menu {
+  @apply text-[0.95rem];
+}
+</style>

assets/components/common/DateTime.vue

@@ -10,13 +10,30 @@ const props = defineProps<{
   date: Date;
 }>();
 
-const dateFormatter = new Intl.DateTimeFormat(undefined, { day: "2-digit", month: "2-digit", year: "numeric" });
-const use12Hour = $computed(() => ({ auto: undefined, "12": true, "24": false })[hourStyle.value]);
-const timeFormatter = $computed(
+const dateOverride = computed(() => (dateLocale.value === "auto" ? undefined : dateLocale.value));
+const dateFormatter = computed(
+  () => new Intl.DateTimeFormat(dateOverride.value, { day: "2-digit", month: "2-digit", year: "numeric" }),
+);
+const hourCycle = computed(() => {
+  switch (hourStyle.value) {
+    case "auto":
+      return undefined;
+    case "12":
+      return "h12";
+    case "24":
+      return "h23";
+  }
+});
+const timeFormatter = computed(
   () =>
-    new Intl.DateTimeFormat(undefined, { hour: "2-digit", minute: "2-digit", second: "2-digit", hour12: use12Hour }),
+    new Intl.DateTimeFormat(undefined, {
+      hour: "2-digit",
+      minute: "2-digit",
+      second: "2-digit",
+      hourCycle: hourCycle.value,
+    }),
 );
 
-const dateStr = $computed(() => dateFormatter.format(props.date));
-const timeStr = $computed(() => timeFormatter.format(props.date));
+const dateStr = computed(() => dateFormatter.value.format(props.date));
+const timeStr = computed(() => timeFormatter.value.format(props.date));
 </script>

assets/components/common/DistanceTime.vue

@@ -3,8 +3,8 @@
 </template>
 
 <script lang="ts" setup>
-import formatDistanceToNow from "date-fns/formatDistanceToNow";
-import formatDistanceToNowStrict from "date-fns/formatDistanceToNowStrict";
+import { formatDistanceToNow } from "date-fns/formatDistanceToNow";
+import { formatDistanceToNowStrict } from "date-fns/formatDistanceToNowStrict";
 
 const {
   date,

assets/components/common/Dropdown.vue

@@ -5,7 +5,7 @@
     </label>
     <div
       tabindex="0"
-      class="min-w-52 dropdown-content rounded-box z-50 mt-1 border border-base-content/20 bg-base p-2 shadow"
+      class="dropdown-content z-50 mt-1 min-w-52 rounded-box border border-base-content/20 bg-base p-2 shadow"
     >
       <slot name="content"></slot>
     </div>

assets/components/common/DropdownMenu.vue

@@ -1,9 +1,9 @@
 <template>
   <details class="dropdown" ref="details" v-on-click-outside="close">
     <summary class="btn btn-primary flex-nowrap" v-bind="$attrs">
-      <slot name="trigger"> {{ values[modelValue] ?? defaultLabel }} <carbon:caret-down /></slot>
+      <slot name="trigger"> {{ label }} <carbon:caret-down /></slot>
     </summary>
-    <ul class="menu dropdown-content rounded-box z-50 mt-1 w-52 border border-base-content/20 bg-base p-2 shadow">
+    <ul class="menu dropdown-content z-50 mt-1 w-52 rounded-box border border-base-content/20 bg-base p-2 shadow">
       <slot>
         <li v-for="item in options">
           <a @click="modelValue = item.value">
@@ -17,27 +17,23 @@
   </details>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup generic="T">
 import { vOnClickOutside } from "@vueuse/components";
 type DropdownItem = {
   label: string;
-  value: string;
+  value: T;
 };
-const { options = [], defaultLabel = "" } = defineProps<{ options?: DropdownItem[]; defaultLabel?: string }>();
+
 const { modelValue } = defineModels<{
-  modelValue: string;
+  modelValue: T;
 }>();
 
-const values = computed(() =>
-  options.reduce(
-    (acc, curr) => {
-      acc[curr.value] = curr.label;
-      return acc;
-    },
-    {} as Record<string, string>,
-  ),
-);
+const { options = [], defaultLabel = "" } = defineProps<{
+  options?: DropdownItem[];
+  defaultLabel?: string;
+}>();
 
+const label = computed(() => options.find((item) => item.value === modelValue.value)?.label ?? defaultLabel);
 const details = ref<HTMLElement | null>(null);
 const close = () => details.value?.removeAttribute("open");
 watch(modelValue, () => close());

assets/components/common/KeyShortcut.vue

@@ -4,8 +4,8 @@
       <carbon:mac-shift />
     </template>
     <template v-if="modifiers.includes('meta')">
-      <ph:command v-if="isMac" class="h-4 w-4" />
-      <ph:control-bold v-else class="h-4 w-4" />
+      <ph:command v-if="isMac" class="size-4" />
+      <ph:control-bold v-else class="size-4" />
     </template>
     <kbd class="uppercase">{{ char }}</kbd>
   </div>

assets/components/common/LabeledInput.vue

@@ -0,0 +1,10 @@
+<template>
+  <label class="label cursor-pointer gap-4">
+    <div class="label-text"><slot name="label" /></div>
+    <slot name="input" />
+  </label>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped></style>

assets/components/common/MobileMenu.vue

@@ -9,7 +9,7 @@
 
       <div class="ml-auto flex items-center gap-2">
         <a class="btn btn-circle flex" @click="$emit('search')" :title="$t('tooltip.search')">
-          <mdi:magnify class="h-5 w-5" />
+          <mdi:magnify class="size-5" />
         </a>
         <label class="btn btn-circle swap swap-rotate" data-testid="hamburger">
           <input type="checkbox" v-model="show" />
@@ -20,7 +20,7 @@
     </div>
 
     <transition name="fade">
-      <div v-show="show">
+      <div v-show="show" class="h-[calc(100vh-60px)] overflow-auto">
         <div class="mt-4 flex items-center justify-center gap-2">
           <dropdown-menu
             v-model="sessionHost"
@@ -29,17 +29,11 @@
             class="btn-sm"
             v-if="config.hosts.length > 1"
           />
-          <router-link :to="{ name: 'settings' }" class="btn btn-outline btn-sm">
-            <mdi:cog /> {{ $t("button.settings") }}
-          </router-link>
-          <a class="btn btn-outline btn-sm" :href="`${base}/logout`" :title="$t('button.logout')" v-if="secured">
-            <mdi:logout /> {{ $t("button.logout") }}
-          </a>
         </div>
 
         <ul class="menu">
           <li class="menu-title">{{ $t("label.containers") }}</li>
-          <li v-for="item in sortedContainers" :key="item.id">
+          <li v-for="item in sortedContainers" :key="item.id" :class="item.state">
             <router-link
               :to="{ name: 'container-id', params: { id: item.id } }"
               active-class="active-primary"
@@ -56,7 +50,6 @@
 </template>
 
 <script lang="ts" setup>
-const { base, secured } = config;
 import { sessionHost } from "@/composable/storage";
 const store = useContainerStore();
 const route = useRoute();
@@ -85,6 +78,10 @@ const sortedContainers = computed(() =>
 const hosts = computed(() => config.hosts.map(({ id, name }) => ({ value: id, label: name })));
 </script>
 <style scoped lang="postcss">
+li.exited {
+  @apply opacity-50;
+}
+
 .fade-enter-active,
 .fade-leave-active {
   @apply transition-opacity;

assets/components/common/SlideTransition.vue

@@ -0,0 +1,42 @@
+<template>
+  <transition :name="!slideRight ? 'slide-left' : 'slide-right'" mode="out-in">
+    <div v-if="!slideRight">
+      <slot name="left" />
+    </div>
+    <div v-else>
+      <slot name="right" />
+    </div>
+  </transition>
+</template>
+
+<script lang="ts" setup>
+const { slideRight } = defineProps<{ slideRight: boolean }>();
+</script>
+<style scoped lang="postcss">
+.slide-left-enter-active,
+.slide-left-leave-active,
+.slide-right-enter-active,
+.slide-right-leave-active {
+  transition: all 0.1s ease-out;
+}
+
+.slide-left-enter-from {
+  opacity: 0;
+  transform: translateX(20px);
+}
+
+.slide-right-enter-from {
+  opacity: 0;
+  transform: translateX(-20px);
+}
+
+.slide-left-leave-to {
+  opacity: 0;
+  transform: translateX(-20px);
+}
+
+.slide-right-leave-to {
+  opacity: 0;
+  transform: translateX(20px);
+}
+</style>

assets/components/common/Tag.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="inline-flex items-center justify-center rounded bg-base-lighter px-2 py-[0.2em] text-sm" :size="size">
+  <div class="inline-flex items-center justify-center rounded bg-base-lighter px-2 py-[0.2em]" :size="size">
     <slot></slot>
   </div>
 </template>

assets/components/common/TimedButton.vue

@@ -1,7 +1,7 @@
 <template>
   <button class="btn relative overflow-hidden" @click="cancel()">
     <div class="absolute inset-0 origin-left bg-white/30" ref="progress"></div>
-    <div class="z-10">
+    <div>
       <slot></slot>
     </div>
   </button>
@@ -13,9 +13,13 @@ const finished = defineEmit();
 const cancelled = defineEmit();
 let animation: Animation | undefined;
 
+const { duration = 4000 } = defineProps<{
+  duration?: number;
+}>();
+
 onMounted(async () => {
   animation = progress.value?.animate([{ transform: "scaleX(0)" }, { transform: "scaleX(1)" }], {
-    duration: 4000,
+    duration: duration,
     easing: "linear",
     fill: "forwards",
   });

assets/components/common/Toggle.vue

@@ -1,8 +1,12 @@
 <template>
-  <label class="label inline-flex cursor-pointer gap-4 font-normal">
-    <input type="checkbox" class="toggle toggle-primary" v-model="modelValue" />
-    <slot />
-  </label>
+  <LabeledInput>
+    <template #label>
+      <slot />
+    </template>
+    <template #input>
+      <input type="checkbox" class="toggle toggle-primary" v-model="modelValue" />
+    </template>
+  </LabeledInput>
 </template>
 
 <script lang="ts" setup>

assets/composable/containerActions.ts

@@ -0,0 +1,46 @@
+import { Container } from "@/models/Container";
+
+type ContainerActions = "start" | "stop" | "restart";
+export const useContainerActions = (container: Ref<Container>) => {
+  const { showToast } = useToast();
+
+  const actionStates = reactive({
+    stop: false,
+    restart: false,
+    start: false,
+  });
+
+  async function actionHandler(action: ContainerActions) {
+    const actionUrl = `/api/hosts/${container.value.host}/containers/${container.value.id}/actions/${action}`;
+
+    const errors = {
+      404: "container not found",
+      500: "unable to complete action",
+      400: "invalid action",
+    } as Record<number, string>;
+
+    const defaultError = "something went wrong";
+    const toastTitle = "Action Failed";
+
+    actionStates[action] = true;
+
+    try {
+      const response = await fetch(withBase(actionUrl), { method: "POST" });
+      if (!response.ok) {
+        const message = errors[response.status] ?? defaultError;
+        showToast({ type: "error", message, title: toastTitle });
+      }
+    } catch (error) {
+      showToast({ type: "error", message: defaultError, title: toastTitle });
+    }
+
+    actionStates[action] = false;
+  }
+
+  return {
+    actionStates,
+    start: () => actionHandler("start"),
+    stop: () => actionHandler("stop"),
+    restart: () => actionHandler("restart"),
+  };
+};

assets/composable/containerContext.ts

@@ -1,23 +0,0 @@
-import { Container } from "@/models/Container";
-
-type ContainerContext = {
-  container: Ref<Container>;
-  streamConfig: { stdout: boolean; stderr: boolean };
-};
-
-export const containerContext = Symbol("containerContext") as InjectionKey<ContainerContext>;
-
-export const provideContainerContext = (container: Ref<Container>) => {
-  provide(containerContext, {
-    container,
-    streamConfig: reactive({ stdout: true, stderr: true }),
-  });
-};
-
-export const useContainerContext = () => {
-  const context = inject(containerContext);
-  if (!context) {
-    throw new Error("No container context provided");
-  }
-  return context;
-};

assets/composable/eventStreams.ts

@@ -0,0 +1,222 @@
+import { type Ref } from "vue";
+import { encodeXML } from "entities";
+import debounce from "lodash.debounce";
+import {
+  type LogEvent,
+  type JSONObject,
+  LogEntry,
+  asLogEntry,
+  DockerEventLogEntry,
+  SkippedLogsEntry,
+} from "@/models/LogEntry";
+import { Service, Stack } from "@/models/Stack";
+import { Container, GroupedContainers } from "@/models/Container";
+
+function parseMessage(data: string): LogEntry<string | JSONObject> {
+  const e = JSON.parse(data, (key, value) => {
+    if (typeof value === "string") {
+      return encodeXML(value);
+    }
+    return value;
+  }) as LogEvent;
+  return asLogEntry(e);
+}
+
+export function useContainerStream(container: Ref<Container>): LogStreamSource {
+  const { streamConfig } = useLoggingContext();
+
+  const url = computed(() => {
+    const params = Object.entries(streamConfig)
+      .filter(([, value]) => value)
+      .reduce((acc, [key]) => ({ ...acc, [key]: "1" }), {});
+    return withBase(
+      `/api/hosts/${container.value.host}/containers/${container.value.id}/logs/stream?${new URLSearchParams(params).toString()}`,
+    );
+  });
+
+  const loadMoreUrl = computed(() => {
+    const params = Object.entries(streamConfig)
+      .filter(([, value]) => value)
+      .reduce((acc, [key]) => ({ ...acc, [key]: "1" }), {});
+    return withBase(
+      `/api/hosts/${container.value.host}/containers/${container.value.id}/logs?${new URLSearchParams(params).toString()}`,
+    );
+  });
+
+  return useLogStream(url, loadMoreUrl);
+}
+
+export function useStackStream(stack: Ref<Stack>): LogStreamSource {
+  const { streamConfig } = useLoggingContext();
+
+  const url = computed(() => {
+    const params = Object.entries(streamConfig)
+      .filter(([, value]) => value)
+      .reduce((acc, [key]) => ({ ...acc, [key]: "1" }), {});
+    return withBase(`/api/stacks/${stack.value.name}/logs/stream?${new URLSearchParams(params).toString()}`);
+  });
+
+  return useLogStream(url);
+}
+
+export function useGroupedStream(group: Ref<GroupedContainers>): LogStreamSource {
+  const { streamConfig } = useLoggingContext();
+
+  const url = computed(() => {
+    const params = Object.entries(streamConfig)
+      .filter(([, value]) => value)
+      .reduce((acc, [key]) => ({ ...acc, [key]: "1" }), {});
+    return withBase(`/api/groups/${group.value.name}/logs/stream?${new URLSearchParams(params).toString()}`);
+  });
+
+  return useLogStream(url);
+}
+
+export function useMergedStream(containers: Ref<Container[]>): LogStreamSource {
+  const { streamConfig } = useLoggingContext();
+
+  const url = computed(() => {
+    const params = [
+      ...Object.entries(streamConfig).map(([key, value]) => [key, value ? "1" : "0"]),
+      ...containers.value.map((c) => ["id", c.id]),
+    ];
+
+    return withBase(
+      `/api/hosts/${containers.value[0].host}/logs/mergedStream?${new URLSearchParams(params).toString()}`,
+    );
+  });
+
+  return useLogStream(url);
+}
+
+export function useServiceStream(service: Ref<Service>): LogStreamSource {
+  const { streamConfig } = useLoggingContext();
+
+  const url = computed(() => {
+    const params = Object.entries(streamConfig)
+      .filter(([, value]) => value)
+      .reduce((acc, [key]) => ({ ...acc, [key]: "1" }), {});
+    return withBase(`/api/services/${service.value.name}/logs/stream?${new URLSearchParams(params).toString()}`);
+  });
+
+  return useLogStream(url);
+}
+
+export type LogStreamSource = ReturnType<typeof useLogStream>;
+
+function useLogStream(url: Ref<string>, loadMoreUrl?: Ref<string>) {
+  let messages: LogEntry<string | JSONObject>[] = $ref([]);
+  let buffer: LogEntry<string | JSONObject>[] = $ref([]);
+  const scrollingPaused = $ref(inject("scrollingPaused") as Ref<boolean>);
+
+  function flushNow() {
+    if (messages.length > config.maxLogs) {
+      if (scrollingPaused) {
+        console.log("Skipping ", buffer.length, " log items");
+        if (messages.at(-1) instanceof SkippedLogsEntry) {
+          const lastEvent = messages.at(-1) as SkippedLogsEntry;
+          const lastItem = buffer.at(-1) as LogEntry<string | JSONObject>;
+          lastEvent.addSkippedEntries(buffer.length, lastItem);
+        } else {
+          const firstItem = buffer.at(0) as LogEntry<string | JSONObject>;
+          const lastItem = buffer.at(-1) as LogEntry<string | JSONObject>;
+          messages.push(new SkippedLogsEntry(new Date(), buffer.length, firstItem, lastItem));
+        }
+        buffer = [];
+      } else {
+        messages.push(...buffer);
+        buffer = [];
+        messages = messages.slice(-config.maxLogs);
+      }
+    } else {
+      if (messages.length == 0) {
+        // sort the buffer the very first time because of multiple logs in parallel
+        buffer.sort((a, b) => a.date.getTime() - b.date.getTime());
+      }
+      messages.push(...buffer);
+      buffer = [];
+    }
+  }
+  const flushBuffer = debounce(flushNow, 250, { maxWait: 1000 });
+  let es: EventSource | null = null;
+
+  function close() {
+    if (es) {
+      es.close();
+      es = null;
+    }
+  }
+
+  function clearMessages() {
+    flushBuffer.cancel();
+    messages = [];
+    buffer = [];
+  }
+
+  function connect({ clear } = { clear: true }) {
+    close();
+
+    if (clear) {
+      clearMessages();
+    }
+
+    es = new EventSource(url.value);
+
+    es.addEventListener("container-stopped", (e) => {
+      const event = JSON.parse((e as MessageEvent).data) as { actorId: string };
+      buffer.push(new DockerEventLogEntry("Container stopped", event.actorId, new Date(), "container-stopped"));
+
+      flushBuffer();
+      flushBuffer.flush();
+    });
+    es.onmessage = (e) => {
+      if (e.data) {
+        buffer.push(parseMessage(e.data));
+        flushBuffer();
+      }
+    };
+    es.onerror = () => clearMessages();
+  }
+
+  watch(url, () => connect(), { immediate: true });
+
+  async function loadOlderLogs({ beforeLoading, afterLoading } = { beforeLoading: () => {}, afterLoading: () => {} }) {
+    if (!loadMoreUrl) return;
+    beforeLoading();
+
+    const to = messages[0].date;
+    const last = messages[messages.length - 1].date;
+    const delta = to.getTime() - last.getTime();
+    const from = new Date(to.getTime() + delta);
+
+    const logs = await (
+      await fetch(
+        `${loadMoreUrl.value}&${new URLSearchParams({ from: from.toISOString(), to: to.toISOString() }).toString()}`,
+      )
+    ).text();
+    if (logs) {
+      const newMessages = logs
+        .trim()
+        .split("\n")
+        .map((line) => parseMessage(line));
+      messages.unshift(...newMessages);
+    }
+    afterLoading();
+  }
+
+  // TODO this is a hack to connect the event source when the container is started
+  // watch(
+  //   () => container.value.state,
+  //   (newValue, oldValue) => {
+  //     console.log("LogEventSource: container changed", newValue, oldValue);
+  //     if (newValue == "running" && newValue != oldValue) {
+  //       buffer.push(new DockerEventLogEntry("Container started", new Date(), "container-started"));
+  //       connect({ clear: false });
+  //     }
+  //   },
+  // );
+
+  onScopeDispose(() => close());
+
+  return { ...$$({ messages }), loadOlderLogs };
+}

assets/composable/eventsource.ts

@@ -1,156 +0,0 @@
-import { type Ref } from "vue";
-import { encodeXML } from "entities";
-import debounce from "lodash.debounce";
-import {
-  type LogEvent,
-  type JSONObject,
-  LogEntry,
-  asLogEntry,
-  DockerEventLogEntry,
-  SkippedLogsEntry,
-} from "@/models/LogEntry";
-
-function parseMessage(data: string): LogEntry<string | JSONObject> {
-  const e = JSON.parse(data, (key, value) => {
-    if (typeof value === "string") {
-      return encodeXML(value);
-    }
-    return value;
-  }) as LogEvent;
-  return asLogEntry(e);
-}
-
-export function useLogStream() {
-  const { container, streamConfig } = useContainerContext();
-  let messages: LogEntry<string | JSONObject>[] = $ref([]);
-  let buffer: LogEntry<string | JSONObject>[] = $ref([]);
-  const scrollingPaused = $ref(inject("scrollingPaused") as Ref<boolean>);
-  let containerId = container.value.id;
-
-  function flushNow() {
-    if (messages.length > config.maxLogs) {
-      if (scrollingPaused) {
-        console.log("Skipping ", buffer.length, " log items");
-        if (messages.at(-1) instanceof SkippedLogsEntry) {
-          const lastEvent = messages.at(-1) as SkippedLogsEntry;
-          const lastItem = buffer.at(-1) as LogEntry<string | JSONObject>;
-          lastEvent.addSkippedEntries(buffer.length, lastItem);
-        } else {
-          const firstItem = buffer.at(0) as LogEntry<string | JSONObject>;
-          const lastItem = buffer.at(-1) as LogEntry<string | JSONObject>;
-          messages.push(new SkippedLogsEntry(new Date(), buffer.length, firstItem, lastItem));
-        }
-        buffer = [];
-      } else {
-        messages.push(...buffer);
-        buffer = [];
-        messages = messages.slice(-config.maxLogs);
-      }
-    } else {
-      messages.push(...buffer);
-      buffer = [];
-    }
-  }
-  const flushBuffer = debounce(flushNow, 250, { maxWait: 1000 });
-  let es: EventSource | null = null;
-
-  function close() {
-    if (es) {
-      es.close();
-      console.debug(`EventSource closed for ${containerId}`);
-      es = null;
-    }
-  }
-
-  function clearMessages() {
-    flushBuffer.cancel();
-    messages = [];
-    buffer = [];
-    console.debug(`Clearing messages for ${containerId}`);
-  }
-
-  function connect({ clear } = { clear: true }) {
-    close();
-
-    if (clear) {
-      clearMessages();
-    }
-
-    const params = Object.entries(streamConfig)
-      .filter(([, value]) => value)
-      .reduce((acc, [key]) => ({ ...acc, [key]: "1" }), {});
-
-    containerId = container.value.id;
-
-    console.debug(`Connecting to ${containerId} with params`, params);
-
-    es = new EventSource(
-      withBase(`/api/logs/stream/${container.value.host}/${containerId}?${new URLSearchParams(params).toString()}`),
-    );
-    es.addEventListener("container-stopped", () => {
-      close();
-      buffer.push(new DockerEventLogEntry("Container stopped", new Date(), "container-stopped"));
-
-      flushBuffer();
-      flushBuffer.flush();
-    });
-    es.onmessage = (e) => {
-      if (e.data) {
-        buffer.push(parseMessage(e.data));
-        flushBuffer();
-      }
-    };
-    es.onerror = () => clearMessages();
-  }
-
-  async function loadOlderLogs({ beforeLoading, afterLoading } = { beforeLoading: () => {}, afterLoading: () => {} }) {
-    if (messages.length < 300) return;
-
-    beforeLoading();
-    const to = messages[0].date;
-    const last = messages[299].date;
-    const delta = to.getTime() - last.getTime();
-    const from = new Date(to.getTime() + delta);
-
-    const params = Object.entries(streamConfig)
-      .filter(([, value]) => value)
-      .reduce((acc, [key]) => ({ ...acc, [key]: "1" }), { from: from.toISOString(), to: to.toISOString() });
-
-    const logs = await (
-      await fetch(
-        withBase(`/api/logs/${container.value.host}/${containerId}?${new URLSearchParams(params).toString()}`),
-      )
-    ).text();
-    if (logs) {
-      const newMessages = logs
-        .trim()
-        .split("\n")
-        .map((line) => parseMessage(line));
-      messages.unshift(...newMessages);
-    }
-    afterLoading();
-  }
-
-  watch(
-    () => container.value.state,
-    (newValue, oldValue) => {
-      console.log("LogEventSource: container changed", newValue, oldValue);
-      if (newValue == "running" && newValue != oldValue) {
-        buffer.push(new DockerEventLogEntry("Container started", new Date(), "container-started"));
-        connect({ clear: false });
-      }
-    },
-  );
-
-  onUnmounted(() => close());
-
-  watch(
-    () => container.value.id,
-    () => connect(),
-    { immediate: true },
-  );
-
-  watch(streamConfig, () => connect());
-
-  return { ...$$({ messages }), loadOlderLogs };
-}

assets/composable/logContext.ts

@@ -0,0 +1,23 @@
+import { Container } from "@/models/Container";
+
+type LogContext = {
+  streamConfig: { stdout: boolean; stderr: boolean };
+  containers: Ref<Container[]>;
+};
+
+export const loggingContextKey = Symbol("loggingContext") as InjectionKey<LogContext>;
+
+export const provideLoggingContext = (containers: Ref<Container[]>) => {
+  provide(loggingContextKey, {
+    streamConfig: reactive({ stdout: true, stderr: true }),
+    containers,
+  });
+};
+
+export const useLoggingContext = () => {
+  const context = inject(loggingContextKey);
+  if (!context) {
+    throw new Error("No logging context provided");
+  }
+  return context;
+};

assets/composable/logSearchContext.ts

@@ -0,0 +1,16 @@
+import { JSONObject, LogEntry } from "@/models/LogEntry";
+
+const lastSelectedItem = ref<LogEntry<string | JSONObject> | undefined>(undefined);
+export const useLogSearchContext = () => {
+  const { resetSearch } = useSearchFilter();
+
+  function handleJumpLineSelected(e: Event, item: LogEntry<string | JSONObject>) {
+    lastSelectedItem.value = item;
+    resetSearch();
+  }
+
+  return {
+    lastSelectedItem,
+    handleJumpLineSelected,
+  };
+};

assets/composable/profileStorage.ts

@@ -0,0 +1,36 @@
+import { Profile } from "@/stores/config";
+
+export function useProfileStorage<K extends keyof Profile>(key: K, defaultValue: NonNullable<Profile[K]>) {
+  const storageKey = "DOZZLE_" + key.toUpperCase();
+  const storage = useStorage<NonNullable<Profile[K]>>(storageKey, defaultValue, undefined, {
+    writeDefaults: false,
+    mergeDefaults: true,
+  });
+
+  if (config.profile?.[key]) {
+    if (storage.value instanceof Set && config.profile[key] instanceof Array) {
+      storage.value = new Set([...(config.profile[key] as Iterable<any>)]) as unknown as NonNullable<Profile[K]>;
+    } else if (config.profile[key] instanceof Array) {
+      storage.value = config.profile[key] as NonNullable<Profile[K]>;
+    } else if (config.profile[key] instanceof Object) {
+      Object.assign(storage.value, config.profile[key]);
+    } else {
+      storage.value = config.profile[key] as NonNullable<Profile[K]>;
+    }
+  }
+
+  if (config.user) {
+    watch(
+      storage,
+      (value) => {
+        fetch(withBase("/api/profile"), {
+          method: "PATCH",
+          body: JSON.stringify({ [key]: value }, (_, value) => (value instanceof Set ? [...value] : value)),
+        });
+      },
+      { deep: true },
+    );
+  }
+
+  return storage;
+}

assets/composable/search.ts

@@ -25,7 +25,7 @@ function matchRecord(record: Record<string, any>, regex: RegExp): boolean {
 export function useSearchFilter() {
   const regex = $computed(() => {
     const isSmartCase = debouncedSearchFilter.value === debouncedSearchFilter.value.toLowerCase();
-    return new RegExp(encodeXML(debouncedSearchFilter.value), isSmartCase ? "i" : undefined);
+    return new RegExp(encodeXML(debouncedSearchFilter.value), isSmartCase ? "ig" : "g");
   });
 
   function filteredMessages(messages: Ref<LogEntry<string | JSONObject>[]>) {

assets/composable/storage.ts

@@ -7,9 +7,18 @@ if (config.hosts.length === 1 && !sessionHost.value) {
   sessionHost.value = config.hosts[0].id;
 }
 
-export function persistentVisibleKeys(container: Ref<Container>) {
-  return computed(() => useStorage(container.value.storageKey, []));
+export function persistentVisibleKeysForContainer(container: Ref<Container>): Ref<string[][]> {
+  const storage = useProfileStorage("visibleKeys", {});
+  return computed(() => {
+    if (!(container.value.storageKey in storage.value)) {
+      // Returning a temporary ref here to avoid writing an empty array to storage
+      const visibleKeys = ref<string[][]>([]);
+      watchOnce(visibleKeys, () => (storage.value[container.value.storageKey] = visibleKeys.value), { deep: true });
+      return visibleKeys.value;
+    }
+
+    return storage.value[container.value.storageKey];
+  });
 }
 
-const DOZZLE_PINNED_CONTAINERS = "DOZZLE_PINNED_CONTAINERS";
-export const pinnedContainers = useStorage(DOZZLE_PINNED_CONTAINERS, new Set<string>());
+export const pinnedContainers = useProfileStorage("pinned", new Set<string>());

assets/composable/visible.ts

@@ -1,12 +1,12 @@
 import { ComplexLogEntry, type JSONObject, type LogEntry } from "@/models/LogEntry";
-import type { ComputedRef, Ref } from "vue";
+import type { Ref } from "vue";
 
-export function useVisibleFilter(visibleKeys: ComputedRef<Ref<string[][]>>) {
+export function useVisibleFilter(visibleKeys: Ref<string[][]>) {
   function filteredPayload(messages: Ref<LogEntry<string | JSONObject>[]>) {
     return computed(() => {
       return messages.value.map((d) => {
         if (d instanceof ComplexLogEntry) {
-          return ComplexLogEntry.fromLogEvent(d, visibleKeys.value);
+          return ComplexLogEntry.fromLogEvent(d, visibleKeys);
         } else {
           return d;
         }

assets/layouts/default.vue

@@ -1,8 +1,8 @@
 <template>
-  <div v-if="!authorizationNeeded">
-    <mobile-menu v-if="isMobile" @search="showFuzzySearch"></mobile-menu>
+  <div>
+    <mobile-menu v-if="isMobile && !forceMenuHidden" @search="showFuzzySearch"></mobile-menu>
     <splitpanes @resized="onResized($event)">
-      <pane min-size="10" :size="menuWidth" v-if="!isMobile && !collapseNav">
+      <pane min-size="10" :size="menuWidth" v-if="!isMobile && !collapseNav && !forceMenuHidden">
         <side-panel @search="showFuzzySearch"></side-panel>
       </pane>
       <pane min-size="10">
@@ -11,14 +11,14 @@
             <router-view></router-view>
           </pane>
           <template v-if="!isMobile">
-            <pane v-for="other in activeContainers" :key="other.id">
-              <log-container
+            <pane v-for="other in pinnedLogs" :key="other.id">
+              <ContainerLog
                 :id="other.id"
                 show-title
                 scrollable
                 closable
-                @close="containerStore.removeActiveContainer(other)"
-              ></log-container>
+                @close="pinnedLogsStore.unPinContainer(other)"
+              />
             </pane>
           </template>
         </splitpanes>
@@ -27,7 +27,7 @@
     <label
       class="btn btn-circle swap btn-neutral swap-rotate fixed -left-12 bottom-4 w-16 transition-all hover:-left-4"
       :class="{ '!-left-6': collapseNav }"
-      v-if="!isMobile"
+      v-if="!isMobile && !forceMenuHidden"
     >
       <input type="checkbox" v-model="collapseNav" />
       <mdi:chevron-right class="swap-on" />
@@ -47,13 +47,18 @@
       class="alert max-w-xl"
       v-for="toast in toasts"
       :key="toast.id"
-      :class="{ 'alert-error': toast.type === 'error', 'alert-info': toast.type === 'info' }"
+      :class="{
+        'alert-error': toast.type === 'error',
+        'alert-info': toast.type === 'info',
+        'alert-warning': toast.type === 'warning',
+      }"
     >
-      <carbon:information class="h-6 w-6 shrink-0 stroke-current" v-if="toast.type === 'info'" />
-      <carbon:warning class="h-6 w-6 shrink-0 stroke-current" v-else-if="toast.type === 'error'" />
+      <carbon:information class="size-6 shrink-0 stroke-current" v-if="toast.type === 'info'" />
+      <carbon:warning class="size-6 shrink-0 stroke-current" v-else-if="toast.type === 'error'" />
+      <carbon:warning class="size-6 shrink-0 stroke-current" v-else-if="toast.type === 'warning'" />
       <div>
         <h3 class="text-lg font-bold" v-if="toast.title">{{ toast.title }}</h3>
-        {{ toast.message }}
+        <div v-html="toast.message" class="[&>a]:underline"></div>
       </div>
       <div>
         <button class="btn btn-circle btn-xs" @click="removeToast(toast.id)"><mdi:close /></button>
@@ -66,15 +71,16 @@
 // @ts-ignore - splitpanes types are not available
 import { Splitpanes, Pane } from "splitpanes";
 import { collapseNav } from "@/stores/settings";
-const { authorizationNeeded } = config;
 
-const containerStore = useContainerStore();
-const { activeContainers } = storeToRefs(containerStore);
+const pinnedLogsStore = usePinnedLogsStore();
+const { pinnedLogs } = storeToRefs(pinnedLogsStore);
 
 const { toasts, removeToast } = useToast();
 
 const modal = ref<HTMLDialogElement>();
 const open = ref(false);
+const searchParams = new URLSearchParams(window.location.search);
+const forceMenuHidden = ref(searchParams.has("hideMenu"));
 
 watch(open, () => {
   if (open.value) {

assets/layouts/splash.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="hero min-h-screen">
+  <div class="hero min-h-dvh">
     <div class="hero-content">
       <router-view></router-view>
     </div>

assets/main.css

@@ -1,23 +1,5 @@
 @import "splitpanes/dist/splitpanes.css";
 
-@define-mixin light {
-  --base-lighter-color: 100% 0 0;
-  --base-color: 97% 0 0;
-  --base-darker-color: 90% 0 0;
-  --base-content-color: 33% 0 0;
-  --primary-color: 76.96% 0.143 176.65;
-  --secondary-color: 76.04% 0.168 64.07;
-}
-
-@define-mixin dark {
-  --base-lighter-color: 25% 0 0;
-  --base-color: 18% 0 0;
-  --base-darker-color: 11% 0 0;
-  --base-content-color: 89.23% 0 0;
-  --primary-color: 76.96% 0.143 176.65;
-  --secondary-color: 91.36% 0.11098 90.1243;
-}
-
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
@@ -33,27 +15,31 @@
     --b3: var(--base-darker-color);
     --bc: var(--base-content-color);
     --in: 65% 0.171 249.5;
-    --inc: 99% 0.171 249.5;
+    --inc: 100% 0 0;
     --er: 64% 0.218 28.85;
-    --erc: 99% 0.218 28.85;
+    --erc: 100% 0 0;
+    --wa: 70% 0.186 48.13;
+    --wac: 100% 0 0;
     --n: var(--base-lighter-color);
   }
   html[data-theme="dark"] {
-    @mixin dark;
-  }
-  @media (prefers-color-scheme: dark) {
-    html {
-      @mixin dark;
-    }
+    --base-lighter-color: 25% 0 0;
+    --base-color: 18% 0 0;
+    --base-darker-color: 11% 0 0;
+    --base-content-color: 89.23% 0 0;
+    --primary-color: 70.96% 0.143 176.65;
+    --secondary-color: 91.36% 0.11098 90.1243;
   }
+
   html[data-theme="light"] {
-    @mixin light;
-  }
-  @media (prefers-color-scheme: light) {
-    html {
-      @mixin light;
-    }
+    --base-lighter-color: 100% 0 0;
+    --base-color: 97% 0 0;
+    --base-darker-color: 90% 0 0;
+    --base-content-color: 33% 0 0;
+    --primary-color: 79.96% 0.143 176.65;
+    --secondary-color: 82.67% 0.15380739746702807 77.82;
   }
+
   @media screen and (max-device-width: 480px) {
     body {
       -webkit-text-size-adjust: 100%;
@@ -72,7 +58,7 @@
     @apply text-lg;
   }
 
-  mark {
+  .events mark {
     @apply inline-block rounded-sm bg-secondary;
     animation: pops 200ms ease-out;
   }

assets/models/Container.spec.ts

@@ -1,25 +0,0 @@
-import { describe, expect, test, vi } from "vitest";
-import { Container } from "./Container";
-
-vi.mock("@/stores/config", () => ({
-  __esModule: true,
-  default: { base: "", hosts: [{ name: "localhost", id: "localhost" }] },
-}));
-
-describe("Container", () => {
-  const names = [
-    [
-      "foo.gb1cto7gaq68fp4refnsr5hep.byqr1prci82zyfoos6gx1yhz0",
-      "foo",
-      ".gb1cto7gaq68fp4refnsr5hep.byqr1prci82zyfoos6gx1yhz0",
-    ],
-    ["bar.gb1cto7gaq68fp4refnsr5hep", "bar", ".gb1cto7gaq68fp4refnsr5hep"],
-    ["baz", "baz", null],
-  ];
-
-  test.each(names)("name %s should be %s and %s", (name, expectedName, expectedSwarmId) => {
-    const c = new Container("id", new Date(), "image", name!, "command", "host", "status", "created");
-    expect(c.name).toBe(expectedName);
-    expect(c.swarmId).toBe(expectedSwarmId);
-  });
-});

assets/models/Container.ts

@@ -1,11 +1,8 @@
 import type { ContainerHealth, ContainerStat, ContainerState } from "@/types/Container";
-import type { UseThrottledRefHistoryReturn } from "@vueuse/core";
-import { useExponentialMovingAverage } from "@/utils";
+import { useExponentialMovingAverage, useSimpleRefHistory } from "@/utils";
 import { Ref } from "vue";
 
-type Stat = Omit<ContainerStat, "id">;
-
-const SWARM_ID_REGEX = /(\.[a-z0-9]{25})+$/i;
+export type Stat = Omit<ContainerStat, "id">;
 
 const hosts = computed(() =>
   config.hosts.reduce(
@@ -17,38 +14,43 @@ const hosts = computed(() =>
   ),
 );
 
+export class GroupedContainers {
+  constructor(
+    public readonly name: string,
+    public readonly containers: Container[],
+  ) {}
+}
+
 export class Container {
   private _stat: Ref<Stat>;
-  private readonly throttledStatHistory: UseThrottledRefHistoryReturn<Stat, Stat>;
-  public readonly swarmId: string | null = null;
-  public readonly isSwarm: boolean = false;
+  private readonly _statsHistory: Ref<Stat[]>;
   private readonly movingAverageStat: Ref<Stat>;
+  private readonly _name: string;
 
   constructor(
     public readonly id: string,
     public readonly created: Date,
     public readonly image: string,
-    public readonly name: string,
+    name: string,
     public readonly command: string,
     public readonly host: string,
+    public readonly labels = {} as Record<string, string>,
     public status: string,
     public state: ContainerState,
+    stats: Stat[],
+    public readonly group?: string,
     public health?: ContainerHealth,
   ) {
-    this._stat = ref({ cpu: 0, memory: 0, memoryUsage: 0 });
-    this.throttledStatHistory = useThrottledRefHistory(this._stat, { capacity: 300, deep: true, throttle: 1000 });
+    this._stat = ref(stats.at(-1) || ({ cpu: 0, memory: 0, memoryUsage: 0 } as Stat));
+    const { history } = useSimpleRefHistory(this._stat, { capacity: 300, deep: true, initial: stats });
+    this._statsHistory = history;
     this.movingAverageStat = useExponentialMovingAverage(this._stat, 0.2);
 
-    const match = name.match(SWARM_ID_REGEX);
-    if (match) {
-      this.swarmId = match[0];
-      this.name = name.replace(`${this.swarmId}`, "");
-      this.isSwarm = true;
-    }
+    this._name = name;
   }
 
-  get statHistory() {
-    return unref(this.throttledStatHistory.history);
+  get statsHistory() {
+    return unref(this._statsHistory);
   }
 
   get movingAverage() {
@@ -67,6 +69,28 @@ export class Container {
     return `${stripVersion(this.image)}:${this.command}`;
   }
 
+  get namespace() {
+    return this.labels["com.docker.stack.namespace"] || this.labels["com.docker.compose.project"];
+  }
+
+  get customGroup() {
+    return this.group;
+  }
+
+  get name() {
+    return this.isSwarm
+      ? this.labels["com.docker.swarm.task.name"].replace(`.${this.labels["com.docker.swarm.task.id"]}`, "")
+      : this._name;
+  }
+
+  get swarmId() {
+    return this.labels["com.docker.swarm.service.id"];
+  }
+
+  get isSwarm() {
+    return Boolean(this.labels["com.docker.swarm.service.id"]);
+  }
+
   public updateStat(stat: Stat) {
     if (isRef(this._stat)) {
       this._stat.value = stat;

assets/models/LogEntry.ts

@@ -9,23 +9,26 @@ export type JSONValue = string | number | boolean | JSONObject | Array<JSONValue
 export type JSONObject = { [x: string]: JSONValue };
 export type Position = "start" | "end" | "middle" | undefined;
 export type Std = "stdout" | "stderr";
+export type Level = "debug" | "info" | "warn" | "error" | "fatal" | "trace" | "unknown";
 export interface LogEvent {
   readonly m: string | JSONObject;
   readonly ts: number;
   readonly id: number;
-  readonly l: string;
+  readonly l: Level;
   readonly p: Position;
   readonly s: "stdout" | "stderr" | "unknown";
+  readonly c: string;
 }
 
 export abstract class LogEntry<T extends string | JSONObject> {
   protected readonly _message: T;
   constructor(
     message: T,
+    public readonly containerID: string,
     public readonly id: number,
     public readonly date: Date,
     public readonly std: Std,
-    public readonly level?: string,
+    public readonly level?: Level,
   ) {
     this._message = message;
   }
@@ -40,13 +43,14 @@ export abstract class LogEntry<T extends string | JSONObject> {
 export class SimpleLogEntry extends LogEntry<string> {
   constructor(
     message: string,
+    containerID: string,
     id: number,
     date: Date,
-    public readonly level: string,
+    public readonly level: Level,
     public readonly position: Position,
     public readonly std: Std,
   ) {
-    super(message, id, date, std, level);
+    super(message, containerID, id, date, std, level);
   }
   getComponent(): Component {
     return SimpleLogItem;
@@ -58,13 +62,14 @@ export class ComplexLogEntry extends LogEntry<JSONObject> {
 
   constructor(
     message: JSONObject,
+    containerID: string,
     id: number,
     date: Date,
-    public readonly level: string,
+    public readonly level: Level,
     public readonly std: Std,
     visibleKeys?: Ref<string[][]>,
   ) {
-    super(message, id, date, std, level);
+    super(message, containerID, id, date, std, level);
     if (visibleKeys) {
       this.filteredMessage = computed(() => {
         if (!visibleKeys.value.length) {
@@ -90,17 +95,26 @@ export class ComplexLogEntry extends LogEntry<JSONObject> {
   }
 
   static fromLogEvent(event: ComplexLogEntry, visibleKeys: Ref<string[][]>): ComplexLogEntry {
-    return new ComplexLogEntry(event._message, event.id, event.date, event.level, event.std, visibleKeys);
+    return new ComplexLogEntry(
+      event._message,
+      event.containerID,
+      event.id,
+      event.date,
+      event.level,
+      event.std,
+      visibleKeys,
+    );
   }
 }
 
 export class DockerEventLogEntry extends LogEntry<string> {
   constructor(
     message: string,
+    containerID: string,
     date: Date,
     public readonly event: "container-stopped" | "container-started",
   ) {
-    super(message, date.getTime(), date, "stderr", "info");
+    super(message, containerID, date.getTime(), date, "stderr", "info");
   }
   getComponent(): Component {
     return DockerEventLogItem;
@@ -117,7 +131,7 @@ export class SkippedLogsEntry extends LogEntry<string> {
     public readonly firstSkipped: LogEntry<string | JSONObject>,
     lastSkipped: LogEntry<string | JSONObject>,
   ) {
-    super("", date.getTime(), date, "stderr", "info");
+    super("", "", date.getTime(), date, "stderr", "info");
     this._totalSkipped = totalSkipped;
     this.lastSkipped = lastSkipped;
   }
@@ -147,6 +161,7 @@ export function asLogEntry(event: LogEvent): LogEntry<string | JSONObject> {
   if (isObject(event.m)) {
     return new ComplexLogEntry(
       event.m,
+      event.c,
       event.id,
       new Date(event.ts),
       event.l,
@@ -155,6 +170,7 @@ export function asLogEntry(event: LogEvent): LogEntry<string | JSONObject> {
   } else {
     return new SimpleLogEntry(
       event.m,
+      event.c,
       event.id,
       new Date(event.ts),
       event.l,

assets/models/Stack.ts

@@ -0,0 +1,22 @@
+import { Container } from "@/models/Container";
+
+export class Stack {
+  constructor(
+    public readonly name: string,
+    public readonly containers: Container[],
+    public readonly services: Service[],
+  ) {
+    for (const service of services) {
+      service.stack = this;
+    }
+  }
+}
+
+export class Service {
+  constructor(
+    public readonly name: string,
+    public readonly containers: Container[],
+  ) {}
+
+  stack?: Stack;
+}

assets/modules/i18n.ts

@@ -1,19 +1,23 @@
 import { type App } from "vue";
 import { createI18n } from "vue-i18n";
+import { locale } from "@/stores/settings";
 
 import messages from "@intlify/unplugin-vue-i18n/messages";
 
-const locale = messages?.hasOwnProperty(navigator.language) ? navigator.language : navigator.language.slice(0, 2);
+const defaultLocale = messages?.hasOwnProperty(navigator.language)
+  ? navigator.language
+  : navigator.language.slice(0, 2);
 
 const i18n = createI18n({
   legacy: false,
-  locale: locale,
+  locale: locale.value || defaultLocale,
   fallbackLocale: "en",
   messages,
 });
 
-export const install = (app: App) => {
-  app.use(i18n);
-};
+watch(locale, (value) => {
+  i18n.global.locale.value = value || defaultLocale;
+});
 
+export const install = (app: App) => app.use(i18n);
 export default i18n;

assets/modules/router.ts

@@ -3,13 +3,12 @@ import { createRouter, createWebHistory } from "vue-router";
 import pages from "~pages";
 import { setupLayouts } from "virtual:generated-layouts";
 
+const routes = setupLayouts(pages);
+export const router = createRouter({
+  history: createWebHistory(withBase("/")),
+  routes,
+});
+
 export const install = (app: App) => {
-  const routes = setupLayouts(pages);
-
-  const router = createRouter({
-    history: createWebHistory(withBase("/")),
-    routes,
-  });
-
   app.use(router);
 };

assets/pages/[...all].vue

@@ -1,5 +1,5 @@
 <template>
-  <page-with-links>
+  <PageWithLinks>
     <div class="hero min-h-screen bg-base-200">
       <div class="hero-content text-center">
         <div class="max-w-md">
@@ -7,7 +7,7 @@
         </div>
       </div>
     </div>
-  </page-with-links>
+  </PageWithLinks>
 </template>
 
 <script lang="ts" setup>

assets/pages/container/[id].vue

@@ -1,11 +1,6 @@
 <template>
-  <search></search>
-  <log-container
-    :id="id"
-    :show-title="true"
-    :scrollable="activeContainers.length > 0"
-    v-if="currentContainer"
-  ></log-container>
+  <Search />
+  <ContainerLog :id="id" :show-title="true" :scrollable="pinnedLogs.length > 0" v-if="currentContainer" />
   <div v-else-if="ready" class="hero min-h-screen bg-base-200">
     <div class="hero-content text-center">
       <div class="max-w-md">
@@ -16,12 +11,14 @@
 </template>
 
 <script lang="ts" setup>
-import search from "@/components/Search.vue";
-const store = useContainerStore();
 const { id } = defineProps<{ id: string }>();
 
-const currentContainer = store.currentContainer($$(id));
-const { activeContainers, ready } = storeToRefs(store);
+const containerStore = useContainerStore();
+const currentContainer = containerStore.currentContainer($$(id));
+const { ready } = storeToRefs(containerStore);
+
+const pinnedLogsStore = usePinnedLogsStore();
+const { pinnedLogs } = storeToRefs(pinnedLogsStore);
 
 watchEffect(() => {
   if (ready.value) {

assets/pages/content/[id].vue

@@ -1,18 +0,0 @@
-<template>
-  <page-with-links>
-    <section>
-      <article class="prose" v-html="data.content" v-if="data"></article>
-    </section>
-  </page-with-links>
-</template>
-
-<script lang="ts" setup>
-const { id } = defineProps<{ id: string }>();
-
-const { data } = useFetch(() => withBase("/api/content/" + id), {
-  refetch: true,
-})
-  .get()
-  .json<{ title: string; content: string }>();
-</script>
-<style lang="postcss" scoped></style>

assets/pages/group/[name].vue

@@ -0,0 +1,22 @@
+<template>
+  <Search />
+  <GroupedLog :name="name" :scrollable="pinnedLogs.length > 0" />
+</template>
+
+<script lang="ts" setup>
+const { name } = defineProps<{ name: string }>();
+
+const swarmStore = useSwarmStore();
+const { customGroups } = storeToRefs(swarmStore);
+
+const pinnedLogsStore = usePinnedLogsStore();
+const { pinnedLogs } = storeToRefs(pinnedLogsStore);
+
+const group = computed(() => customGroups.value.find((g) => g.name === name));
+
+watchEffect(() => {
+  if (group.value?.name) {
+    setTitle(group.value.name + " group");
+  }
+});
+</script>

assets/pages/index.vue

@@ -1,68 +1,31 @@
 <template>
-  <page-with-links class="gap-16">
+  <PageWithLinks>
     <section>
-      <div class="stats grid bg-base-lighter shadow">
-        <div class="stat">
-          <div class="stat-value">{{ runningContainers.length }} / {{ containers.length }}</div>
-          <div class="stat-title">{{ $t("label.running") }} / {{ $t("label.total-containers") }}</div>
-        </div>
-        <div class="stat">
-          <div class="stat-value">{{ totalCpu }}%</div>
-          <div class="stat-title">{{ $t("label.total-cpu-usage") }}</div>
-        </div>
-        <div class="stat">
-          <div class="stat-value">{{ formatBytes(totalMem) }}</div>
-          <div class="stat-title">{{ $t("label.total-mem-usage") }}</div>
-        </div>
-
-        <div class="stat">
-          <div class="stat-value">{{ version }}</div>
-          <div class="stat-title">{{ $t("label.dozzle-version") }}</div>
-        </div>
-      </div>
+      <HostList />
     </section>
 
     <section>
-      <container-table :containers="runningContainers"></container-table>
+      <ContainerTable :containers="runningContainers"></ContainerTable>
     </section>
-  </page-with-links>
+  </PageWithLinks>
 </template>
 
 <script lang="ts" setup>
 import { Container } from "@/models/Container";
 
 const { t } = useI18n();
-const { version } = config;
+
 const containerStore = useContainerStore();
 const { containers, ready } = storeToRefs(containerStore) as unknown as {
   containers: Ref<Container[]>;
   ready: Ref<boolean>;
 };
 
-const mostRecentContainers = $computed(() => containers.value.toSorted((a, b) => +b.created - +a.created));
-const runningContainers = $computed(() => mostRecentContainers.filter((c) => c.state === "running"));
-
-let totalCpu = $ref(0);
-useIntervalFn(
-  () => {
-    totalCpu = runningContainers.reduce((acc, c) => acc + c.stat.cpu, 0);
-  },
-  1000,
-  { immediate: true },
-);
-
-let totalMem = $ref(0);
-useIntervalFn(
-  () => {
-    totalMem = runningContainers.reduce((acc, c) => acc + c.stat.memoryUsage, 0);
-  },
-  1000,
-  { immediate: true },
-);
+const runningContainers = computed(() => containers.value.filter((c) => c.state === "running"));
 
 watchEffect(() => {
   if (ready.value) {
-    setTitle(t("title.dashboard", { count: runningContainers.length }));
+    setTitle(t("title.dashboard", { count: runningContainers.value.length }));
   }
 });
 </script>

assets/pages/login.vue

@@ -17,7 +17,7 @@
         </div>
         <div class="form-control">
           <label class="label">
-            <span class="label-text">Password</span>
+            <span class="label-text">{{ $t("label.password") }}</span>
           </label>
           <input
             class="input input-bordered"
@@ -47,17 +47,21 @@ let error = $ref(false);
 let username = $ref("");
 let password = $ref("");
 let form: HTMLFormElement | undefined = $ref();
+const params = new URLSearchParams(window.location.search);
 
 async function onLogin() {
-  const url = config.authProvider === "simple" ? "/api/token" : "/api/validateCredentials";
-  const response = await fetch(withBase(url), {
+  const response = await fetch(withBase("/api/token"), {
     body: new FormData(form),
     method: "POST",
   });
 
   if (response.status == 200) {
     error = false;
-    window.location.href = withBase("/");
+    if (params.has("redirectUrl")) {
+      window.location.href = withBase(params.get("redirectUrl")!);
+    } else {
+      window.location.href = withBase("/");
+    }
   } else {
     error = true;
   }

assets/pages/merged/[name].vue

@@ -0,0 +1,22 @@
+<template>
+  <Search />
+  <MultiContainerLog :ids="ids" :scrollable="pinnedLogs.length > 0" />
+</template>
+
+<script lang="ts" setup>
+const containerStore = useContainerStore();
+const { ready } = storeToRefs(containerStore);
+
+const route = useRoute();
+
+const pinnedLogsStore = usePinnedLogsStore();
+const { pinnedLogs } = storeToRefs(pinnedLogsStore);
+
+const ids = toRef(() => route.query.id as string[]);
+
+watchEffect(() => {
+  if (ready.value) {
+    setTitle("Merged Logs");
+  }
+});
+</script>