chore: release v5.0.4

* feat: adds more logging for eventsource

* feat: removes error from event streams

* removes unused code

* adds errors back

* moves logs to debug

* removes lastEventId

* fixes tests

.babelrc

@@ -1,8 +0,0 @@
-{
-  "presets": [["env", { "modules": false }]],
-  "env": {
-    "test": {
-      "presets": [["env", { "targets": { "node": "current" } }]]
-    }
-  }
-}

.dockerignore

@@ -1,8 +1,8 @@
 node_modules
 .cache
 .idea
+.github
 dist
 .git
-static
-integration
-demo.gif
+e2e
+docs

.github/ISSUE_TEMPLATE/bug_report.md

@@ -1,10 +1,9 @@
 ---
 name: Bug report
 about: Create a report to help us improve
-title: ''
-labels: ''
+title: ""
+labels: ""
 assignees: amir20
-
 ---
 
 **Describe the bug**
@@ -12,6 +11,7 @@ A clear and concise description of what the bug is.
 
 **To Reproduce**
 Steps to reproduce the behavior:
+
 1. Go to '...'
 2. Click on '....'
 3. Scroll down to '....'
@@ -24,9 +24,10 @@ A clear and concise description of what you expected to happen.
 If applicable, add screenshots to help explain your problem.
 
 **Desktop (please complete the following information):**
- - OS: [e.g. iOS, Windows or Mac Os]
- - Docker version [e.g. `docker version`'s output]
- - Browser & version [e.g. chrome, safari]
- - Version [e.g. 1.26.1. Can be found at `<Dozzle-host>/version`]
+
+- OS: [e.g. iOS, Windows or Mac Os]
+- Docker version [e.g. `docker version`'s output]
+- Browser & version [e.g. chrome, safari]
+- Version [e.g. 1.26.1. Can be found at `<Dozzle-host>/version`]
 
 **If applicable include logs with `--level debug` and browser logs**

.github/ISSUE_TEMPLATE/feature_request.md

@@ -1,10 +1,9 @@
 ---
 name: Feature request
 about: Suggest an idea for this project
-title: ''
+title: ""
 labels: enhancement
 assignees: amir20
-
 ---
 
 **Is your feature request related to a problem? Please describe.**

.github/renovate.json

@@ -0,0 +1,5 @@
+{
+  "$schema": "https://docs.renovatebot.com/renovate-schema.json",
+  "extends": ["config:base", "schedule:weekly", "group:allNonMajor", ":automergeMinor"],
+  "rangeStrategy": "bump"
+}

.github/stale.yml

@@ -6,6 +6,7 @@ daysUntilClose: 3
 exemptLabels:
   - pinned
   - security
+  - keep
 # Label to use when marking an issue as stale
 staleLabel: wontfix
 # Comment to post when marking an issue as stale. Set to `false` to disable

.github/workflows/codeql-analysis.yml

@@ -1,67 +0,0 @@
-# For most projects, this workflow file will not need changing; you simply need
-# to commit it to your repository.
-#
-# You may wish to alter this file to override the set of languages analyzed,
-# or to provide custom queries or build logic.
-#
-# ******** NOTE ********
-# We have attempted to detect the languages in your repository. Please check
-# the `language` matrix defined below to confirm you have the correct set of
-# supported CodeQL languages.
-#
-name: "CodeQL"
-
-on:
-  push:
-    branches: [ master ]
-  pull_request:
-    # The branches below must be a subset of the branches above
-    branches: [ master ]
-  schedule:
-    - cron: '42 21 * * 0'
-
-jobs:
-  analyze:
-    name: Analyze
-    runs-on: ubuntu-latest
-
-    strategy:
-      fail-fast: false
-      matrix:
-        language: [ 'go', 'javascript' ]
-        # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python' ]
-        # Learn more:
-        # https://docs.github.com/en/free-pro-team@latest/github/finding-security-vulnerabilities-and-errors-in-your-code/configuring-code-scanning#changing-the-languages-that-are-analyzed
-
-    steps:
-    - name: Checkout repository
-      uses: actions/checkout@v2
-
-    # Initializes the CodeQL tools for scanning.
-    - name: Initialize CodeQL
-      uses: github/codeql-action/init@v1
-      with:
-        languages: ${{ matrix.language }}
-        # If you wish to specify custom queries, you can do so here or in a config file.
-        # By default, queries listed here will override any specified in a config file.
-        # Prefix the list here with "+" to use these queries and those in the config file.
-        # queries: ./path/to/local/query, your-org/your-repo/queries@main
-
-    # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
-    # If this step fails, then you should remove it and run the build manually (see below)
-    - name: Autobuild
-      uses: github/codeql-action/autobuild@v1
-
-    # ℹ️ Command-line programs to run using the OS shell.
-    # 📚 https://git.io/JvXDl
-
-    # ✏️ If the Autobuild fails above, remove it and uncomment the following three lines
-    #    and modify them (or add more) to build your code if your project
-    #    uses a compiled language
-
-    #- run: |
-    #   make bootstrap
-    #   make release
-
-    - name: Perform CodeQL Analysis
-      uses: github/codeql-action/analyze@v1

.github/workflows/deploy.yml

@@ -8,53 +8,109 @@ jobs:
     name: JavaScript Tests
     runs-on: ubuntu-latest
     steps:
-      - name: Checkout code
-        uses: actions/checkout@v2
-      - name: Install Node
-        uses: actions/setup-node@v1
-      - name: Install depdencies
-        run: yarn
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v3
+        name: Install Node
+        with:
+          node-version: latest
+      - run: corepack enable
+      - run: pnpm --version
+      - uses: actions/setup-node@v3
+        with:
+          node-version: latest
+          cache: "pnpm"
+          cache-dependency-path: "**/pnpm-lock.yaml"
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile --prefer-offline
       - name: Run Tests
-        run: yarn test
+        run: pnpm run test -- --outputTruncateLength=500
   go-test:
     name: Go Tests
     runs-on: ubuntu-latest
     steps:
       - name: Install Go
-        uses: actions/setup-go@v1
+        uses: actions/setup-go@v4
         with:
-          go-version: 1.16.x
+          go-version: 1.20.x
       - name: Checkout code
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
       - name: Run Go Tests with Coverage
         run: make test SKIP_ASSET=1
   int-test:
-    needs: [go-test, npm-test]
     name: Integration Tests
+    timeout-minutes: 60
     runs-on: ubuntu-latest
     steps:
-      - name: Checkout code
-        uses: actions/checkout@v2
-      - name: Build images
-        run: docker-compose -f integration/docker-compose.test.yml build
-      - name: Run tests
-        run: docker-compose -f integration/docker-compose.test.yml run integration
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v3
+        name: Install Node
+        with:
+          node-version: latest
+      - run: corepack enable
+      - run: pnpm --version
+      - uses: actions/setup-node@v3
+        with:
+          node-version: latest
+          cache: "pnpm"
+          cache-dependency-path: "**/pnpm-lock.yaml"
+      - name: Install dependencies
+        run: pnpm install
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+      - name: Build
+        uses: docker/bake-action@v4
+        with:
+          load: true
+          set: |
+            *.cache-from=type=gha
+            *.cache-to=type=gha,mode=max
+      - name: Run Playwright tests
+        run: docker compose up --exit-code-from playwright
+      - uses: actions/upload-artifact@v3
+        if: always()
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30
   buildx:
-    needs: [int-test]
+    needs: [go-test, npm-test, int-test]
     name: Release
     runs-on: ubuntu-latest
     steps:
-      - name: Checkout
-        uses: actions/checkout@v2
-      - name: Set up Docker Buildx
-        id: buildx
-        uses: crazy-max/ghaction-docker-buildx@v1
+      - name: Docker meta
+        id: meta
+        uses: docker/metadata-action@v5
         with:
-          buildx-version: latest
-          qemu-version: latest
-      - name: Available platforms
-        run: echo ${{ steps.buildx.outputs.platforms }}
-      - name: Docker Login
-        run: docker login -u ${{ secrets.DOCKER_USERNAME }} -p ${{ secrets.DOCKER_PASSWORD }}
-      - name: Run Buildx
-        run: make publish
+          images: amir20/dozzle
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@f95db51fddba0c2d1ec667646a06c2ce06100226 # v3.0.0
+      - name: Login to DockerHub
+        uses: docker/login-action@v3.0.0
+        with:
+          username: ${{ secrets.DOCKER_USERNAME }}
+          password: ${{ secrets.DOCKER_PASSWORD }}
+      - name: Build and push
+        uses: docker/build-push-action@v5.0.0
+        with:
+          push: true
+          platforms: linux/amd64,linux/arm/v6,linux/arm/v7,linux/arm64/v8
+          tags: ${{ steps.meta.outputs.tags }}
+          build-args: TAG=${{ steps.meta.outputs.version }}
+          labels: ${{ steps.meta.outputs.labels }}
+          cache-from: type=gha
+          cache-to: type=gha,mode=max
+  git-release:
+    needs: [buildx]
+    name: Github Release
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+      - name: Install Node
+        uses: actions/setup-node@v3
+      - name: Release to Github
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        run: npx changelogithub

.github/workflows/dev.yml

@@ -0,0 +1,36 @@
+on:
+  push:
+    branches:
+      - master
+  pull_request:
+    branches:
+      - master
+name: Push container
+jobs:
+  buildx:
+    name: Push branches and PRs
+    runs-on: ubuntu-latest
+    if: ${{ !github.event.repository.fork && !github.event.pull_request.head.repo.fork && (github.event_name == 'push' || github.event.pull_request.head.repo.full_name == 'amir20/dozzle') }}
+    steps:
+      - name: Docker meta
+        id: meta
+        uses: docker/metadata-action@v5
+        with:
+          images: amir20/dozzle
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@f95db51fddba0c2d1ec667646a06c2ce06100226 # v3.0.0
+      - name: Login to DockerHub
+        uses: docker/login-action@v3.0.0
+        with:
+          username: ${{ secrets.DOCKER_USERNAME }}
+          password: ${{ secrets.DOCKER_PASSWORD }}
+      - name: Build and push
+        uses: docker/build-push-action@v5.0.0
+        with:
+          push: true
+          platforms: linux/amd64,linux/arm/v6,linux/arm/v7,linux/arm64/v8
+          tags: ${{ steps.meta.outputs.tags }}
+          build-args: TAG=${{ steps.meta.outputs.version }}
+          labels: ${{ steps.meta.outputs.labels }}
+          cache-from: type=gha
+          cache-to: type=gha,mode=max

.github/workflows/test.yml

@@ -1,37 +1,97 @@
-on: push
+on:
+  push:
+    branches:
+      - master
+  pull_request:
+    branches:
+      - master
 name: Test
 jobs:
+  typecheck:
+    name: Typecheck
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v3
+        name: Install Node
+        with:
+          node-version: latest
+      - run: corepack enable
+      - run: pnpm --version
+      - uses: actions/setup-node@v3
+        with:
+          node-version: latest
+          cache: "pnpm"
+          cache-dependency-path: "**/pnpm-lock.yaml"
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile --prefer-offline
+      - name: Run Typecheck
+        run: pnpm run typecheck
   npm-test:
     name: JavaScript Tests
     runs-on: ubuntu-latest
     steps:
-      - name: Checkout code
-        uses: actions/checkout@v2
-      - name: Install Node
-        uses: actions/setup-node@v1
-      - name: Install depdencies
-        run: yarn
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v3
+        name: Install Node
+        with:
+          node-version: latest
+      - run: corepack enable
+      - run: pnpm --version
+      - uses: actions/setup-node@v3
+        with:
+          node-version: latest
+          cache: "pnpm"
+          cache-dependency-path: "**/pnpm-lock.yaml"
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile --prefer-offline
       - name: Run Tests
-        run: yarn test
+        run: pnpm run test -- --outputTruncateLength=500
   go-test:
     name: Go Tests
     runs-on: ubuntu-latest
     steps:
       - name: Install Go
-        uses: actions/setup-go@v1
+        uses: actions/setup-go@v4
         with:
-          go-version: 1.16.x
+          go-version: 1.20.x
       - name: Checkout code
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
       - name: Run Go Tests with Coverage
         run: make test SKIP_ASSET=1
   int-test:
     name: Integration Tests
+    timeout-minutes: 60
     runs-on: ubuntu-latest
     steps:
-      - name: Checkout code
-        uses: actions/checkout@v2
-      - name: Build images
-        run: docker-compose -f integration/docker-compose.test.yml build
-      - name: Run tests
-        run: docker-compose -f integration/docker-compose.test.yml run integration
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v3
+        name: Install Node
+        with:
+          node-version: latest
+      - run: corepack enable
+      - run: pnpm --version
+      - uses: actions/setup-node@v3
+        with:
+          node-version: latest
+          cache: "pnpm"
+          cache-dependency-path: "**/pnpm-lock.yaml"
+      - name: Install dependencies
+        run: pnpm install
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+      - name: Build
+        uses: docker/bake-action@v4
+        with:
+          load: true
+          set: |
+            *.cache-from=type=gha
+            *.cache-to=type=gha,mode=max
+      - name: Run Playwright tests
+        run: docker compose up --exit-code-from playwright
+      - uses: actions/upload-artifact@v3
+        if: always()
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30

.gitignore

@@ -1,8 +1,13 @@
-
+certs
 dist
 node_modules
 .cache
 static
-a_main-packr.go
 dozzle
-gin-bin
+coverage
+.pnpm-debug.log
+coverage.out
+.netlify
+/test-results/
+/playwright-report/
+/playwright/.cache/

.husky/.gitignore

@@ -1 +0,0 @@
-_

.husky/pre-commit

@@ -1,4 +0,0 @@
-#!/bin/sh
-. "$(dirname $0)/_/husky.sh"
-
-yarn lint-staged

.npmrc

@@ -0,0 +1,3 @@
+shared-workspace-lockfile=false
+include-workspace-root=true
+ignore-workspace-root-check=true

.prettierignore

@@ -0,0 +1,5 @@
+auto-imports.d.ts
+components.d.ts
+docs/.vitepress/cache
+docs/.vitepress/dist
+dist

.prettierrc.js

@@ -1,3 +1,4 @@
 module.exports = {
   printWidth: 120,
+  plugins: ["prettier-plugin-tailwindcss"],
 };

.reflex

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

.vscode/settings.json

@@ -0,0 +1,6 @@
+{
+  "i18n-ally.localesPaths": ["locales"],
+  "i18n-ally.keystyle": "nested",
+  "cSpell.words": ["healthcheck"],
+  "editor.formatOnSave": true
+}

CODE_OF_CONDUCT.md

@@ -14,22 +14,22 @@ appearance, race, religion, or sexual identity and orientation.
 Examples of behavior that contributes to creating a positive environment
 include:
 
-* Using welcoming and inclusive language
-* Being respectful of differing viewpoints and experiences
-* Gracefully accepting constructive criticism
-* Focusing on what is best for the community
-* Showing empathy towards other community members
+- Using welcoming and inclusive language
+- Being respectful of differing viewpoints and experiences
+- Gracefully accepting constructive criticism
+- Focusing on what is best for the community
+- Showing empathy towards other community members
 
 Examples of unacceptable behavior by participants include:
 
-* The use of sexualized language or imagery and unwelcome sexual attention or
- advances
-* Trolling, insulting/derogatory comments, and personal or political attacks
-* Public or private harassment
-* Publishing others' private information, such as a physical or electronic
- address, without explicit permission
-* Other conduct which could reasonably be considered inappropriate in a
- professional setting
+- The use of sexualized language or imagery and unwelcome sexual attention or
+  advances
+- Trolling, insulting/derogatory comments, and personal or political attacks
+- Public or private harassment
+- Publishing others' private information, such as a physical or electronic
+  address, without explicit permission
+- Other conduct which could reasonably be considered inappropriate in a
+  professional setting
 
 ## Our Responsibilities
 

Dockerfile

@@ -1,27 +1,30 @@
 # Build assets
-FROM node:current-alpine as node
+FROM --platform=$BUILDPLATFORM node:20-alpine as node
 
-RUN apk add --no-cache git openssh python make g++ util-linux
+RUN corepack enable
 
 WORKDIR /build
 
-# Install dependencies
-COPY package*.json yarn.lock ./
-RUN yarn install --ignore-scripts --network-timeout 1000000
+# Install dependencies from lock file
+COPY pnpm-*.yaml ./
+RUN pnpm fetch --ignore-scripts --no-optional
 
-# Copy config files
-COPY .* webpack*.js ./
+# Copy package.json and install dependencies
+COPY package.json ./
+RUN pnpm install --offline --ignore-scripts --no-optional
 
-# Copy assets to build
+# Copy assets and translations to build
+COPY .* *.config.ts *.config.js ./
 COPY assets ./assets
+COPY locales ./locales
+COPY public ./public
 
-# Do the build
-RUN yarn build
+# Build assets
+RUN pnpm build
 
-FROM golang:1.16-alpine AS builder
+FROM --platform=$BUILDPLATFORM golang:1.21.1-alpine AS builder
 
-RUN apk add --no-cache git ca-certificates
-RUN mkdir /dozzle
+RUN apk add --no-cache ca-certificates && mkdir /dozzle
 
 WORKDIR /dozzle
 
@@ -30,20 +33,26 @@ COPY go.* ./
 RUN go mod download
 
 # Copy assets built with node
-COPY --from=node /build/static ./static
+COPY --from=node /build/dist ./dist
 
 # Copy all other files
-COPY . .
+COPY analytics ./analytics
+COPY healthcheck ./healthcheck
+COPY docker ./docker
+COPY web ./web
+COPY main.go ./
 
 # Args
 ARG TAG=dev
+ARG TARGETOS TARGETARCH
 
 # Build binary
-RUN CGO_ENABLED=0 go build -ldflags "-s -w -X main.version=$TAG"  -o dozzle
+RUN GOOS=$TARGETOS GOARCH=$TARGETARCH CGO_ENABLED=0 go build -ldflags "-s -w -X main.version=$TAG"  -o dozzle
+
 
 FROM scratch
 
-ENV PATH=/bin
+ENV PATH /bin
 
 COPY --from=builder /etc/ssl/certs/ca-certificates.crt /etc/ssl/certs/ca-certificates.crt
 COPY --from=builder /dozzle/dozzle /dozzle

Makefile

@@ -1,32 +1,34 @@
-TAG := $(shell git describe --tags)
-PLATFROMS := linux/amd64,linux/arm/v7,linux/arm64/v8
-
-
-.PHONY: publish
-publish:
-	docker buildx build --build-arg TAG=$(TAG) --platform $(PLATFROMS) -t amir20/dozzle:latest -t amir20/dozzle:$(TAG) --push .
-
 .PHONY: clean
 clean:
-	@rm -rf static
-	@go clean
+	@rm -rf dist
+	@go clean -i
 
-.PHONY: static
-static:
-	@yarn build
+.PHONY: dist
+dist:
+	@pnpm build
 
-.PHONY: fake_static
-fake_static:
-	@echo 'Skipping yarn build'
-	@mkdir -p static
-	@echo "yarn build was skipped" > static/index.html
+.PHONY: fake_assets
+fake_assets:
+	@echo 'Skipping asset build'
+	@mkdir -p dist
+	@echo "assets build was skipped" > dist/index.html
 
 .PHONY: test
-test: fake_static
+test: fake_assets
 	go test -cover ./...
 
-build: static
+.PHONY: build
+build: dist
 	CGO_ENABLED=0 go build -ldflags "-s -w"
 
+.PHONY: docker
+docker:
+	@docker build -t amir20/dozzle .
+
+.PHONY: dev
+dev:
+	pnpm dev
+
+.PHONY: int
 int:
-	docker-compose -f integration/docker-compose.test.yml up --build --force-recreate --exit-code-from integration
+	docker compose up --build --force-recreate --exit-code-from playwright

README.md

@@ -1,43 +1,43 @@
-[![Go Report Card](https://goreportcard.com/badge/github.com/amir20/dozzle)](https://goreportcard.com/report/github.com/amir20/dozzle)
-[![Docker Pulls](https://img.shields.io/docker/pulls/amir20/dozzle.svg)](https://hub.docker.com/r/amir20/dozzle/)
-[![Docker Size](https://images.microbadger.com/badges/image/amir20/dozzle.svg)](https://hub.docker.com/r/amir20/dozzle/)
-[![Docker Version](https://images.microbadger.com/badges/version/amir20/dozzle.svg)](https://hub.docker.com/r/amir20/dozzle/)
-![Test](https://github.com/amir20/dozzle/workflows/Test/badge.svg)
-
 # Dozzle - [dozzle.dev](https://dozzle.dev/)
 
-Dozzle is a simple, lightweight application that provides you with a web based interface to monitor your Docker container logs live. It doesn’t store log information, it is for live monitoring of your container logs only.
+Dozzle is a small lightweight application with a web based interface to monitor Docker logs. It doesn’t store any log files. It is for live monitoring of your container logs only.
 
-While dozzle should work for most, it is not meant to be a full logging solution. For enterprise applications, products like [Loggly](https://www.loggly.com), [Papertrail](https://papertrailapp.com) or [Kibana](https://www.elastic.co/products/kibana) are more suited.
+https://user-images.githubusercontent.com/260667/227634771-9ebbe381-16a8-465a-b28a-450c5cd20c94.mp4
 
-Dozzle doesn't cost any money. Dozzle aims to stay simple, small and free.
+[![Go Report Card](https://goreportcard.com/badge/github.com/amir20/dozzle)](https://goreportcard.com/report/github.com/amir20/dozzle)
+[![Docker Pulls](https://img.shields.io/docker/pulls/amir20/dozzle.svg)](https://hub.docker.com/r/amir20/dozzle/)
+[![Docker Version](https://img.shields.io/docker/v/amir20/dozzle?sort=semver)](https://hub.docker.com/r/amir20/dozzle/)
+![Test](https://github.com/amir20/dozzle/workflows/Test/badge.svg)
 
-![Image](https://github.com/amir20/dozzle/blob/master/.github/demo.gif?raw=true)
+## Features
 
-## Getting dozzle
+- Intelligent fuzzy search for container names 🤖
+- Search logs using regex 🔦
+- Small memory footprint 🏎
+- Split screen for viewing multiple logs
+- Download logs easy
+- Live stats with memory and CPU usage
+- Authentication with username and password 🚨
+
+Dozzle should work for most. It has been tested with hundreds of containers. However, it doesn't support offline searching. Products like [Loggly](https://www.loggly.com), [Papertrail](https://papertrailapp.com) or [Kibana](https://www.elastic.co/products/kibana) are more suited for full search capabilities.
+
+Dozzle doesn't cost any money and aims to focus on real-time debugging.
+
+## Getting Dozzle
 
 Dozzle is a very small Docker container (4 MB compressed). Pull the latest release from the index:
 
     $ docker pull amir20/dozzle:latest
 
-## Using dozzle
+## Using Dozzle
 
 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
 
-dozzle will be available at [http://localhost:8888/](http://localhost:8888/). You can change `-p 8888:8080` to any port. For example, if you want to view dozzle over port 4040 then you would do `-p 4040:8080`.
+Dozzle will be available at [http://localhost:8888/](http://localhost:8888/). You can change `-p 8888:8080` to any port. For example, if you want to view dozzle over port 4040 then you would do `-p 4040:8080`.
 
-### With Docker swarm
-
-    docker service create \
-    --name=dozzle \
-    --publish=8888:8080 \
-    --constraint=node.role==manager \
-    --mount=type=bind,src=/var/run/docker.sock,dst=/var/run/docker.sock \
-    amir20/dozzle:latest
-
-### With Docker compose
+### Connecting with Docker compose
 
     version: "3"
     services:
@@ -49,9 +49,59 @@ dozzle will be available at [http://localhost:8888/](http://localhost:8888/). Yo
         ports:
           - 9999:8080
 
+### Connecting to remote hosts
+
+Dozzle supports connecting to multiple remote hosts via `tcp://` using TLS or without. Appropriate certs need to be mounted for Dozzle to be able to successfully connect. At this point, `ssh://` is not supported because Dozzle docker image does not ship with any ssh clients.
+
+To configure remote hosts, `--remote-host` or `DOZZLE_REMOTE_HOST` need to provided and the `pem` files need to be mounted to `/cert` directory. The `/cert` directory expects to have `/certs/{ca,cert,key}.pem` or `/certs/{host}/{ca,cert,key}.pem` in case of multiple hosts.
+
+Below are examples of using `--remote-host` via CLI:
+
+    $ docker run -v /var/run/docker.sock:/var/run/docker.sock -v /path/to/certs:/certs -p 8080:8080 amir20/dozzle --remote-host tcp://167.99.1.1:2376
+
+Multiple `--remote-host` flags can be used to specify multiple hosts.
+
+Or to use compose:
+
+    version: "3"
+    services:
+      dozzle:
+        image: amir20/dozzle:latest
+        volumes:
+          - /var/run/docker.sock:/var/run/docker.sock
+          - /path/to/certs:/certs
+        ports:
+          - 8080:8080
+        environment:
+          DOZZLE_REMOTE_HOST: tcp://167.99.1.1:2376,tcp://167.99.1.2:2376
+
+You need to make sure appropriate certs are provided in `/certs/167.99.1.1/{ca,cert,key}.pem` and `/certs/167.99.1.2/{ca,cert,key}.pem` for both hosts to work.
+
+### Adding health check
+
+Dozzle doesn't enable healthcheck by default as it adds extra CPU usage. `healthcheck` can be enabled manually.
+
+    version: "3"
+    services:
+      dozzle:
+        container_name: dozzle
+        image: amir20/dozzle:latest
+        volumes:
+          - /var/run/docker.sock:/var/run/docker.sock
+        ports:
+          - 8080:8080
+        environment:
+          DOZZLE_LEVEL: trace
+        healthcheck:
+          test: [ "CMD", "/dozzle", "healthcheck" ]
+          interval: 3s
+          timeout: 30s
+          retries: 5
+          start_period: 30s
+
 #### Security
 
-dozzle doesn't support authentication out of the box. You can control the device dozzle binds to by passing `--addr` parameter. For example,
+You can control the device Dozzle binds to by passing `--addr` parameter. For example,
 
     $ docker run --volume=/var/run/docker.sock:/var/run/docker.sock -p 8888:1224 amir20/dozzle:latest --addr localhost:1224
 
@@ -61,38 +111,53 @@ If you wish to restrict the containers shown you can pass the `--filter` paramet
 
     $ docker run --volume=/var/run/docker.sock:/var/run/docker.sock -p 8888:1224 amir20/dozzle:latest --filter name=foo
 
-this would then only allow you to view containers with a name starting with "foo". You can use other filters like `status` as well, please check the official docker [command line docs](https://docs.docker.com/engine/reference/commandline/ps/#filtering) for available filters.
+this would then only allow you to view containers with a name starting with "foo". You can use other filters like `status` as well, please check the official docker [command line docs](https://docs.docker.com/engine/reference/commandline/ps/#filtering) for available filters. Multiple `--filter` arguments can be provided.
+
+#### Authentication
+
+Dozzle supports a very simple authentication out of the box with just username and password. You should deploy using SSL to keep the credentials safe. See configuration to use `--username` and `--password`. You can also use [docker secrets](https://docs.docker.com/engine/swarm/secrets/) `--usernamefile` and `--passwordfile`.
 
 #### Changing base URL
 
-dozzle by default mounts to "/". If you want to control the base path you can use the `--base` option. For example, if you want to mount at "/foobar",
+Dozzle by default mounts to "/". If you want to control the base path you can use the `--base` option. For example, if you want to mount at "/foobar",
 then you can override by using `--base /foobar`. See env variables below for using `DOZZLE_BASE` to change this.
 
     $ docker run --volume=/var/run/docker.sock:/var/run/docker.sock -p 8080:8080 amir20/dozzle:latest --base /foobar
 
-dozzle will be available at [http://localhost:8080/foobar/](http://localhost:8080/foobar/).
+Dozzle will be available at [http://localhost:8080/foobar/](http://localhost:8080/foobar/).
+
+#### Analytics collected
+
+Dozzle collects anonymous user configurations using Google Analytics. Why? Dozzle is an open source project with no funding. As a result, there is no time to do user studies of Dozzle. Analytics is collected to prioritize features and fixes based on how people use Dozzle. This data is completely public and can be viewed live using [ Data Studio dashboard](https://datastudio.google.com/s/naeIu0MiWsY).
+
+If you do not want to be tracked at all, see the `--no-analytics` flag below.
 
 #### Environment variables and configuration
 
-Dozzle follows the [12-factor](https://12factor.net/) model. Configurations can use the CLI flags or enviroment variables. The table below outlines all supported options and their respective env vars.
+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`        | `/`     |
-| `--level`    | `DOZZLE_LEVEL`       | `info`  |
-| n/a          | `DOCKER_API_VERSION` | not set |
-| `--tailSize` | `DOZZLE_TAILSIZE`    | `300`   |
-| `--filter`   | `DOZZLE_FILTER`      | `""`    |
+| 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`   |         |
 
 ## Troubleshooting and FAQs
 
 <details>
  <summary>I installed Dozzle, but logs are slow or they never load. Help!</summary>
 
- Dozzle uses Server Sent Events (SSE) which connects to a server using a HTTP stream without closing the connection. If any proxy tries to buffer this connection, then Dozzle never receives the data and hangs forever waiting for the reverse proxy to flush the buffer.  Since version `1.23.0`, Dozzle sends the `X-Accel-Buffering: no` header which should stop reverse proxies buffering. However, some proxies may ignore this header. In those cases, you need to explicitly disable any buffering.
+Dozzle uses Server Sent Events (SSE) which connects to a server using a HTTP stream without closing the connection. If any proxy tries to buffer this connection, then Dozzle never receives the data and hangs forever waiting for the reverse proxy to flush the buffer. Since version `1.23.0`, Dozzle sends the `X-Accel-Buffering: no` header which should stop reverse proxies buffering. However, some proxies may ignore this header. In those cases, you need to explicitly disable any buffering.
 
- Below is an example with nginx and using `proxy_pass` to disable buffering.
+Below is an example with nginx and using `proxy_pass` to disable buffering.
 
 ```
     server {
@@ -111,19 +176,51 @@ Dozzle follows the [12-factor](https://12factor.net/) model. Configurations can
     }
 
 ```
+
 </details>
 
 <details>
  <summary>What data does Dozzle collect?</summary>
 
- Dozzle does not collect any metrics or analytics. Dozzle has a [strict](https://github.com/amir20/dozzle/blob/master/routes.go#L33-L38) Content Security Policy which only allows the following policies:
+Dozzle does collect some analytics. Analytics is anonymous usage tracking of the features which are used the most. See the section above on how to disable any analytic collection.
 
- - Allow connect to `api.github.com` to fetch most recent version.
- - Only allow `<script>` and `<style>` files from `self`
+In the browser, Dozzle has a [strict](https://github.com/amir20/dozzle/blob/master/web/csp.go#L9) Content Security Policy which only allows the following policies:
+
+- Allow connect to `api.github.com` to fetch most recent version.
+- Only allow `<script>` and `<style>` files from `self`
+
+Dozzle opens all links with `rel="noopener"`.
 
- Dozzle opens all links with `rel="noopener"`.
 </details>
 
+<details>
+ <summary>We have tools that uses Dozzle when a new container is created. How can I get a direct link to a container by name?</summary>
+
+Dozzle has a [special route](https://github.com/amir20/dozzle/blob/master/assets/pages/Show.vue) that can be used to search containers by name and then forward to that container. For example, if you have a container with name `"foo.bar"` and id `abc123`, you can send your users to `/show?name=foo.bar` which will be forwarded to `/container/abc123`.
+
+</details>
+
+<details>
+ <summary>I installed Dozzle but memory consumption doesn't show up!</summary>
+
+_This is an issue specific to ARM devices_
+
+Dozzle uses the Docker API to gather information about the containers' memory usage. If the memory usage is not showing up, then it is likely that the Docker API is not returning the memory usage.
+
+You can verify this by running `docker info`, and you should see the following:
+
+```
+WARNING: No memory limit support
+WARNING: No swap limit support
+```
+
+In this case, you'll need to add the following line to your `/boot/cmdline.txt` file and reboot your device.
+
+```
+cgroup_enable=cpuset cgroup_enable=memory cgroup_memory=1
+```
+
+</details>
 
 ## License
 
@@ -133,8 +230,8 @@ Dozzle follows the [12-factor](https://12factor.net/) model. Configurations can
 
 To Build and test locally:
 
-1. Install NodeJs.
-2. Install Go.
-3. Install [reflex](https://github.com/cespare/reflex) with `get -u github.com/cespare/reflex` outside of dozzle.
-4. Install node modules with `yarn`.
-5. Do `yarn dev`
+1. Install [NodeJs](https://nodejs.org/en/download/) and [pnpm](https://pnpm.io/installation).
+2. Install [Go](https://go.dev/doc/install).
+3. Install [reflex](https://github.com/cespare/reflex) with `go get -u github.com/cespare/reflex` outside of dozzle.
+4. Install node modules `pnpm install`.
+5. Do `pnpm dev`

analytics/ga.go

@@ -0,0 +1,73 @@
+package analytics
+
+import (
+	"bytes"
+	"encoding/json"
+	"fmt"
+	"net/http"
+	"net/http/httputil"
+
+	log "github.com/sirupsen/logrus"
+)
+
+func SendStartEvent(se StartEvent) error {
+	postBody := map[string]interface{}{
+		"client_id": se.ClientId,
+		"events": []map[string]interface{}{
+			{
+				"name":   "start",
+				"params": se,
+			},
+		},
+	}
+
+	return doRequest(postBody)
+}
+
+func SendRequestEvent(re RequestEvent) error {
+	postBody := map[string]interface{}{
+		"client_id": re.ClientId,
+		"events": []map[string]interface{}{
+			{
+				"name":   "request",
+				"params": re,
+			},
+		},
+	}
+
+	return doRequest(postBody)
+}
+
+func doRequest(body map[string]interface{}) error {
+	jsonValue, err := json.Marshal(body)
+	if err != nil {
+		return err
+	}
+
+	req, err := http.NewRequest("POST", "https://www.google-analytics.com/mp/collect", bytes.NewBuffer(jsonValue))
+	if err != nil {
+		return err
+	}
+
+	q := req.URL.Query()
+	q.Add("measurement_id", "G-S6NT05VXK9")
+	q.Add("api_secret", "7FFhe65HQK-bXvujpQMquQ")
+	req.URL.RawQuery = q.Encode()
+
+	response, err := http.DefaultClient.Do(req)
+	if err != nil {
+		return err
+	}
+	defer response.Body.Close()
+
+	if response.StatusCode/100 != 2 {
+		dump, err := httputil.DumpResponse(response, true)
+		if err != nil {
+			return err
+		}
+		log.Debugf("%v", string(dump))
+		return fmt.Errorf("google analytics returned non-2xx status code: %v", response.Status)
+	}
+
+	return nil
+}

analytics/types.go

@@ -0,0 +1,18 @@
+package analytics
+
+type StartEvent struct {
+	ClientId         string `json:"-"`
+	Version          string `json:"version"`
+	FilterLength     int    `json:"filterLength"`
+	RemoteHostLength int    `json:"remoteHostLength"`
+	CustomAddress    bool   `json:"customAddress"`
+	CustomBase       bool   `json:"customBase"`
+	Protected        bool   `json:"protected"`
+	HasHostname      bool   `json:"hasHostname"`
+}
+
+type RequestEvent struct {
+	ClientId          string `json:"-"`
+	TotalContainers   int    `json:"totalContainers"`
+	RunningContainers int    `json:"runningContainers"`
+}

assets/App.spec.js

@@ -1,54 +0,0 @@
-import EventSource from "eventsourcemock";
-import { shallowMount, RouterLinkStub, createLocalVue } from "@vue/test-utils";
-import Vuex from "vuex";
-import App from "./App";
-
-jest.mock("./store/config.js", () => ({ base: "" }));
-
-const localVue = createLocalVue();
-
-localVue.use(Vuex);
-
-describe("<App />", () => {
-  const stubs = { RouterLink: RouterLinkStub, "router-view": true, icon: true };
-  let store;
-
-  beforeEach(() => {
-    global.EventSource = EventSource;
-    const state = {
-      settings: { menuWidth: 15 },
-      containers: [{ id: "abc", name: "Test 1" }],
-    };
-
-    const getters = {
-      visibleContainers(store) {
-        return store.containers;
-      },
-      activeContainers() {
-        return [];
-      },
-    };
-
-    store = new Vuex.Store({
-      state,
-      getters,
-    });
-  });
-
-  test("has right title", async () => {
-    const wrapper = shallowMount(App, { stubs, store, localVue });
-    wrapper.vm.$store.state.containers = [
-      { id: "abc", name: "Test 1" },
-      { id: "xyz", name: "Test 2" },
-    ];
-    await wrapper.vm.$nextTick();
-
-    expect(wrapper.vm.title).toContain("2 containers");
-  });
-
-  test("renders correctly", async () => {
-    const wrapper = shallowMount(App, { stubs, store, localVue });
-    await wrapper.vm.$nextTick();
-    expect(wrapper.element).toMatchSnapshot();
-  });
-});

assets/App.vue

@@ -1,179 +1,55 @@
 <template>
-  <main>
-    <mobile-menu v-if="isMobile"></mobile-menu>
-
-    <splitpanes @resized="onResized($event)">
-      <pane min-size="10" :size="settings.menuWidth" v-if="!isMobile && !collapseNav">
-        <side-menu @search="showFuzzySearch"></side-menu>
-      </pane>
-      <pane min-size="10">
-        <splitpanes>
-          <pane class="has-min-height router-view">
-            <router-view></router-view>
-          </pane>
-          <pane v-for="other in activeContainers" :key="other.id" v-if="!isMobile">
-            <log-container
-              :id="other.id"
-              show-title
-              scrollable
-              closable
-              @close="removeActiveContainer(other)"
-            ></log-container>
-          </pane>
-        </splitpanes>
-      </pane>
-    </splitpanes>
-    <button
-      @click="collapseNav = !collapseNav"
-      class="button is-small is-rounded is-settings-control"
-      :class="{ collapsed: collapseNav }"
-      id="hide-nav"
-      v-if="!isMobile"
-    >
-      <span class="icon">
-        <icon :name="collapseNav ? 'chevron-right' : 'chevron-left'"></icon>
-      </span>
-    </button>
-  </main>
+  <router-view></router-view>
 </template>
 
-<script>
-import { mapActions, mapGetters, mapState } from "vuex";
-import { Splitpanes, Pane } from "splitpanes";
+<script lang="ts" setup>
+watchEffect(() => {
+  if (smallerScrollbars.value) {
+    document.documentElement.classList.add("has-custom-scrollbars");
+  } else {
+    document.documentElement.classList.remove("has-custom-scrollbars");
+  }
 
-import hotkeys from "hotkeys-js";
-
-import LogContainer from "./components/LogContainer";
-import SideMenu from "./components/SideMenu";
-import MobileMenu from "./components/MobileMenu";
-
-import PastTime from "./components/PastTime";
-import Icon from "./components/Icon";
-import FuzzySearchModal from "./components/FuzzySearchModal";
-
-export default {
-  name: "App",
-  components: {
-    Icon,
-    SideMenu,
-    LogContainer,
-    MobileMenu,
-    Splitpanes,
-    PastTime,
-    Pane,
-  },
-  data() {
-    return {
-      title: "",
-      collapseNav: false,
-    };
-  },
-  metaInfo() {
-    return {
-      title: this.title,
-      titleTemplate: "%s - Dozzle",
-    };
-  },
-  mounted() {
-    if (this.hasSmallerScrollbars) {
-      document.documentElement.classList.add("has-custom-scrollbars");
-    }
-    if (this.hasLightTheme) {
+  switch (lightTheme.value) {
+    case "dark":
+      document.documentElement.setAttribute("data-theme", "dark");
+      break;
+    case "light":
       document.documentElement.setAttribute("data-theme", "light");
-    }
-    this.menuWidth = this.settings.menuWidth;
-    hotkeys("command+k, ctrl+k", (event, handler) => {
-      this.showFuzzySearch();
-    });
-  },
-  watch: {
-    hasSmallerScrollbars(newValue, oldValue) {
-      if (newValue) {
-        document.documentElement.classList.add("has-custom-scrollbars");
-      } else {
-        document.documentElement.classList.remove("has-custom-scrollbars");
-      }
-    },
-    hasLightTheme(newValue, oldValue) {
-      if (newValue) {
-        document.documentElement.setAttribute("data-theme", "light");
-      } else {
-        document.documentElement.removeAttribute("data-theme");
-      }
-    },
-    visibleContainers() {
-      this.title = `${this.visibleContainers.length} containers`;
-    },
-  },
-  computed: {
-    ...mapState(["isMobile", "settings", "containers"]),
-    ...mapGetters(["visibleContainers", "activeContainers"]),
-    hasSmallerScrollbars() {
-      return this.settings.smallerScrollbars;
-    },
-    hasLightTheme() {
-      return this.settings.lightTheme;
-    },
-  },
-  methods: {
-    ...mapActions({
-      removeActiveContainer: "REMOVE_ACTIVE_CONTAINER",
-      updateSetting: "UPDATE_SETTING",
-    }),
-    onResized(e) {
-      if (e.length == 2) {
-        const menuWidth = e[0].size;
-        this.updateSetting({ menuWidth });
-      }
-    },
-    showFuzzySearch() {
-      this.$buefy.modal.open({
-        parent: this,
-        component: FuzzySearchModal,
-        animation: "false",
-        width: 600,
-      });
-    },
-  },
-};
+      break;
+    default:
+      document.documentElement.removeAttribute("data-theme");
+  }
+});
 </script>
-
-<style scoped lang="scss">
-::v-deep .splitpanes--vertical > .splitpanes__splitter {
-  min-width: 3px;
-  background: var(--border-color);
-  &:hover {
-    background: var(--border-hover-color);
+<style lang="postcss">
+html.has-custom-scrollbars {
+  ::-webkit-scrollbar {
+    width: 8px;
+    display: content;
   }
-}
 
-@media screen and (max-width: 768px) {
-  .router-view {
-    padding-top: 75px;
+  ::-webkit-scrollbar-thumb {
+    background-color: rgba(128, 128, 128, 0.33);
+    outline: 1px solid slategrey;
+    border-radius: 4px;
   }
-}
 
-.button.has-no-border {
-  border-color: transparent !important;
-}
+  ::-webkit-scrollbar-thumb:active {
+    background-color: #777;
+  }
 
-.has-min-height {
-  min-height: 100vh;
-}
+  ::-webkit-scrollbar-track {
+    background-color: transparent;
+  }
 
-#hide-nav {
-  position: fixed;
-  left: 10px;
-  bottom: 10px;
-  &.collapsed {
-    left: -40px;
-    width: 60px;
-    padding-left: 40px;
-    background: rgba(0, 0, 0, 0.95);
+  ::-webkit-scrollbar-track:hover {
+    background-color: rgba(64, 64, 64, 0.33);
+  }
 
-    &:hover {
-      left: -25px;
-    }
+  section main {
+    scrollbar-color: #353535 transparent;
+    scrollbar-width: thin;
   }
 }
 </style>

assets/__snapshots__/App.spec.js.snap

@@ -1,52 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<App /> renders correctly 1`] = `
-<main>
-  <!---->
-   
-  <splitpanes-stub
-    dblclicksplitter="true"
-    pushotherpanes="true"
-  >
-    <pane-stub
-      maxsize="100"
-      minsize="10"
-      size="15"
-    >
-      <side-menu-stub />
-    </pane-stub>
-     
-    <pane-stub
-      maxsize="100"
-      minsize="10"
-    >
-      <splitpanes-stub
-        dblclicksplitter="true"
-        pushotherpanes="true"
-      >
-        <pane-stub
-          class="has-min-height router-view"
-          maxsize="100"
-          minsize="0"
-        >
-          <router-view-stub />
-        </pane-stub>
-         
-      </splitpanes-stub>
-    </pane-stub>
-  </splitpanes-stub>
-   
-  <button
-    class="button is-small is-rounded is-settings-control"
-    id="hide-nav"
-  >
-    <span
-      class="icon"
-    >
-      <icon-stub
-        name="chevron-left"
-      />
-    </span>
-  </button>
-</main>
-`;

assets/components.d.ts

@@ -0,0 +1,81 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// Generated by unplugin-vue-components
+// Read more: https://github.com/vuejs/core/pull/3399
+export {}
+
+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:information': typeof import('~icons/carbon/information')['default']
+    'Carbon:macShift': typeof import('~icons/carbon/mac-shift')['default']
+    'Carbon:star': typeof import('~icons/carbon/star')['default']
+    'Carbon:starFilled': typeof import('~icons/carbon/star-filled')['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']
+    ContainerTable: typeof import('./components/ContainerTable.vue')['default']
+    ContainerTitle: typeof import('./components/LogViewer/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']
+    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']
+    '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']
+    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']
+    LogStd: typeof import('./components/LogViewer/LogStd.vue')['default']
+    LogViewer: typeof import('./components/LogViewer/LogViewer.vue')['default']
+    LogViewerWithSource: typeof import('./components/LogViewer/LogViewerWithSource.vue')['default']
+    'Mdi:arrowUp': typeof import('~icons/mdi/arrow-up')['default']
+    'Mdi:close': typeof import('~icons/mdi/close')['default']
+    'Mdi:hamburgerMenu': typeof import('~icons/mdi/hamburger-menu')['default']
+    'Mdi:keyboardEsc': typeof import('~icons/mdi/keyboard-esc')['default']
+    'Mdi:lightChevronDoubleDown': typeof import('~icons/mdi-light/chevron-double-down')['default']
+    'Mdi:lightChevronLeft': typeof import('~icons/mdi-light/chevron-left')['default']
+    'Mdi:lightChevronRight': typeof import('~icons/mdi-light/chevron-right')['default']
+    'Mdi:lightCog': typeof import('~icons/mdi-light/cog')['default']
+    'Mdi:lightLogout': typeof import('~icons/mdi-light/logout')['default']
+    'Mdi:lightMagnify': typeof import('~icons/mdi-light/magnify')['default']
+    'MdiLight:check': typeof import('~icons/mdi-light/check')['default']
+    MobileMenu: typeof import('./components/common/MobileMenu.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']
+    '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']
+    Popup: typeof import('./components/Popup.vue')['default']
+    RouterLink: typeof import('vue-router')['RouterLink']
+    RouterView: typeof import('vue-router')['RouterView']
+    ScrollableView: typeof import('./components/ScrollableView.vue')['default']
+    ScrollProgress: typeof import('./components/ScrollProgress.vue')['default']
+    Search: typeof import('./components/Search.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']
+    StatMonitor: typeof import('./components/LogViewer/StatMonitor.vue')['default']
+    StatSparkline: typeof import('./components/LogViewer/StatSparkline.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']
+    ZigZag: typeof import('./components/LogViewer/ZigZag.vue')['default']
+  }
+}

assets/components/BarChart.vue

@@ -0,0 +1,20 @@
+<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/ContainerStat.vue

@@ -1,40 +0,0 @@
-<template>
-  <div class="is-size-7 is-uppercase columns is-marginless is-mobile">
-    <div class="column is-narrow has-text-weight-bold">
-      {{ state }}
-    </div>
-    <div class="column is-narrow" v-if="stat.memoryUsage !== null">
-      <span class="has-text-weight-light">mem</span>
-      <span class="has-text-weight-bold">
-        {{ formatBytes(stat.memoryUsage) }}
-      </span>
-    </div>
-
-    <div class="column is-narrow" v-if="stat.cpu !== null">
-      <span class="has-text-weight-light">load</span>
-      <span class="has-text-weight-bold"> {{ stat.cpu }}% </span>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    stat: Object,
-    state: String,
-  },
-  name: "ContainerStat",
-  methods: {
-    formatBytes(bytes, decimals = 2) {
-      if (bytes === 0) return "0 Bytes";
-      const k = 1024;
-      const dm = decimals < 0 ? 0 : decimals;
-      const sizes = ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
-      const i = Math.floor(Math.log(bytes) / Math.log(k));
-      return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + " " + sizes[i];
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped></style>

assets/components/ContainerTable.vue

@@ -0,0 +1,171 @@
+!
+<template>
+  <table class="table table-lg bg-base">
+    <thead>
+      <tr :data-direction="direction > 0 ? 'asc' : 'desc'">
+        <th
+          v-for="(value, key) in fields"
+          :key="key"
+          @click.prevent="sort(key)"
+          :class="{ 'selected-sort': key === sortField }"
+          v-show="isVisible(key)"
+        >
+          <a class="inline-flex cursor-pointer gap-2 text-sm uppercase">
+            <span>{{ $t(value.label) }}</span>
+            <span class="h-4" data-icon>
+              <mdi:arrow-up />
+            </span>
+          </a>
+        </th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr v-for="container in paginated" :key="container.id">
+        <td v-if="isVisible('name')">
+          <router-link :to="{ name: 'container-id', params: { id: container.id } }" :title="container.name">
+            {{ container.name }}
+          </router-link>
+        </td>
+        <td v-if="isVisible('host')">{{ container.hostLabel }}</td>
+        <td v-if="isVisible('state')">{{ container.state }}</td>
+        <td v-if="isVisible('created')">
+          <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>
+        </td>
+        <td v-if="isVisible('mem')">
+          <bar-chart :value="container.movingAverage.memory / 100">
+            {{ (container.movingAverage.memory / 100).toLocaleString(undefined, { style: "percent" }) }}
+          </bar-chart>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+  <div class="p-4 text-center">
+    <nav class="join" v-if="isPaginated">
+      <button
+        v-for="i in totalPages"
+        class="btn join-item"
+        :class="{ 'btn-primary': i === currentPage }"
+        @click="currentPage = i"
+      >
+        {{ i }}
+      </button>
+    </nav>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Container } from "@/models/Container";
+import { toRefs } from "@vueuse/core";
+
+const fields = {
+  name: {
+    label: "label.container-name",
+    sortFunc: (a: Container, b: Container) => a.name.localeCompare(b.name) * direction.value,
+    mobileVisible: true,
+  },
+  host: {
+    label: "label.host",
+    sortFunc: (a: Container, b: Container) => a.hostLabel.localeCompare(b.hostLabel) * direction.value,
+    mobileVisible: false,
+  },
+  state: {
+    label: "label.status",
+    sortFunc: (a: Container, b: Container) => a.state.localeCompare(b.state) * direction.value,
+    mobileVisible: false,
+  },
+  created: {
+    label: "label.created",
+    sortFunc: (a: Container, b: Container) => (a.created.getTime() - b.created.getTime()) * direction.value,
+    mobileVisible: true,
+  },
+  cpu: {
+    label: "label.avg-cpu",
+    sortFunc: (a: Container, b: Container) => (a.movingAverage.cpu - b.movingAverage.cpu) * direction.value,
+    mobileVisible: false,
+  },
+  mem: {
+    label: "label.avg-mem",
+    sortFunc: (a: Container, b: Container) => (a.movingAverage.memory - b.movingAverage.memory) * direction.value,
+    mobileVisible: false,
+  },
+};
+
+const { containers, perPage = 15 } = defineProps<{
+  containers: Container[];
+  perPage?: number;
+}>();
+type keys = keyof typeof fields;
+
+const storage = useStorage<{ column: keys; direction: 1 | -1 }>("DOZZLE_TABLE_CONTAINERS_SORT", {
+  column: "created",
+  direction: -1,
+});
+const { column: sortField, direction } = toRefs(storage);
+const sortedContainers = computedWithControl(
+  () => [containers.length, sortField.value, direction.value],
+  () => {
+    return containers.sort((a, b) => {
+      return fields[sortField.value].sortFunc(a, b);
+    });
+  },
+);
+
+const totalPages = computed(() => Math.ceil(sortedContainers.value.length / perPage));
+const isPaginated = computed(() => totalPages.value > 1);
+const currentPage = ref(1);
+const paginated = computed(() => {
+  const start = (currentPage.value - 1) * perPage;
+  const end = start + perPage;
+
+  return sortedContainers.value.slice(start, end);
+});
+
+function sort(field: keys) {
+  if (sortField.value === field) {
+    direction.value *= -1;
+  } else {
+    sortField.value = field;
+    direction.value = 1;
+  }
+}
+function isVisible(field: keys) {
+  return fields[field].mobileVisible || !isMobile.value;
+}
+</script>
+
+<style lang="postcss" scoped>
+[data-icon] {
+  display: none;
+  transition: transform 0.2s ease-in-out;
+  [data-direction="desc"] & {
+    transform: rotate(180deg);
+  }
+}
+
+th {
+  @apply border-b-2 border-base-lighter;
+  &.selected-sort {
+    font-weight: bold;
+    @apply border-primary;
+    [data-icon] {
+      display: inline-block;
+    }
+  }
+}
+
+tbody td {
+  max-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+a {
+  @apply hover:text-primary;
+}
+</style>

assets/components/ContainerTitle.vue

@@ -1,16 +0,0 @@
-<template>
-  <div class="columns is-marginless has-text-weight-bold is-family-monospace">
-    <span class="column is-ellipsis">{{ value }}</span>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    value: String,
-  },
-  name: "ContainerTitle",
-};
-</script>
-
-<style lang="scss" scoped></style>

assets/components/FuzzySearchModal.vue

@@ -1,134 +1,119 @@
 <template>
-  <div class="panel">
-    <b-autocomplete
-      ref="autocomplete"
-      v-model="query"
-      placeholder="Search containers using ⌘ + k, ⌃k"
-      field="name"
-      open-on-focus
-      keep-first
-      expanded
-      :data="results"
-      @select="selected"
-    >
-      <template slot-scope="props">
-        <div class="media">
-          <div class="media-left">
-            <span class="icon is-small" :class="props.option.state"><icon name="crate"></icon></span>
+  <div class="dropdown dropdown-open w-full">
+    <div class="input input-primary flex h-auto items-center">
+      <mdi:light-magnify class="flex h-8 w-8" />
+      <input
+        tabindex="0"
+        class="input input-ghost input-lg 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])"
+        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">
+        <a
+          class="grid auto-cols-max grid-cols-[min-content,auto] gap-2 py-4"
+          @click.prevent="selected(item)"
+          @mouseenter="selectedIndex = index"
+          :class="index === selectedIndex ? 'focus' : ''"
+        >
+          <div :class="{ 'text-primary': item.state === 'running' }">
+            <octicon:container-24 />
           </div>
-          <div class="media-content">
-            {{ props.option.name }}
+          <div class="truncate">
+            <span class="font-light">{{ item.host }}</span> / {{ item.name }}
           </div>
-          <div class="media-right">
-            <span class="icon is-small column-icon" @click.stop.prevent="addColumn(props.option)" title="Pin as column">
-              <icon name="column"></icon>
-            </span>
-          </div>
-        </div>
-      </template>
-    </b-autocomplete>
+          <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">
+            <ic:sharp-keyboard-return v-if="index === selectedIndex" />
+            <cil:columns v-else />
+          </a>
+        </a>
+      </li>
+    </ul>
   </div>
 </template>
 
-<script>
-import { mapState, mapActions } from "vuex";
-import fuzzysort from "fuzzysort";
+<script lang="ts" setup>
+import { useFuse } from "@vueuse/integrations/useFuse";
 
-import PastTime from "./PastTime";
-import Icon from "./Icon";
+const { maxResults: resultLimit = 5 } = defineProps<{
+  maxResults?: number;
+}>();
 
-export default {
-  props: {
-    maxResults: {
-      default: 20,
-      type: Number,
-    },
-  },
-  data() {
+const close = defineEmit();
+
+const query = ref("");
+const input = ref<HTMLInputElement>();
+const selectedIndex = ref(0);
+
+const router = useRouter();
+const store = useContainerStore();
+const { containers } = storeToRefs(store);
+
+const list = computed(() => {
+  return containers.value.map(({ id, created, name, state, hostLabel: host }) => {
     return {
-      query: "",
+      id,
+      created,
+      name,
+      state,
+      host,
     };
+  });
+});
+
+const { results } = useFuse(query, list, {
+  fuseOptions: {
+    keys: ["name", "host"],
+    includeScore: true,
+    useExtendedSearch: true,
   },
-  name: "FuzzySearchModal",
-  components: {
-    Icon,
-    PastTime,
-  },
-  mounted() {
-    this.$nextTick(() => this.$refs.autocomplete.focus());
-  },
-  watch: {},
-  methods: {
-    ...mapActions({
-      appendActiveContainer: "APPEND_ACTIVE_CONTAINER",
-    }),
-    selected(item) {
-      this.$router.push({ name: "container", params: { id: item.id, name: item.name } });
-      this.$emit("close");
-    },
-    addColumn(container) {
-      this.appendActiveContainer(container);
-      this.$emit("close");
-    },
-  },
-  computed: {
-    ...mapState(["containers"]),
-    preparedContainers() {
-      return this.containers.map((c) => ({
-        name: c.name,
-        id: c.id,
-        created: c.created,
-        state: c.state,
-        preparedName: fuzzysort.prepare(c.name),
-      }));
-    },
-    results() {
-      const options = {
-        limit: this.maxResults,
-        key: "preparedName",
-      };
-      if (this.query) {
-        const results = fuzzysort.go(this.query, this.preparedContainers, options);
-        results.forEach((result) => {
-          if (result.obj.state === "running") {
-            result.score += 1;
-          }
-        });
-        return results.sort((a, b) => b.score - a.score).map((i) => i.obj);
+  resultLimit,
+  matchAllWhenSearchEmpty: true,
+});
+
+const data = computed(() => {
+  return results.value
+    .sort((a, b) => {
+      if (a.score === b.score) {
+        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 [...this.containers].sort((a, b) => b.created - a.created);
+        return 0;
       }
-    },
-  },
-};
+    })
+    .map(({ item }) => item)
+    .slice(0, resultLimit);
+});
+
+watch(query, (data) => {
+  if (data.length > 0) {
+    selectedIndex.value = 0;
+  }
+});
+
+onMounted(() => input.value?.focus());
+
+function selected({ id }: { id: string }) {
+  router.push({ name: "container-id", params: { id } });
+  close();
+}
+function addColumn(container: { id: string }) {
+  store.appendActiveContainer(container);
+  close();
+}
 </script>
 
-<style lang="scss" scoped>
-.panel {
-  min-height: 400px;
-}
-
-.running {
-  color: var(--primary-color);
-}
-
-.exited {
-  color: var(--scheme-main-ter);
-}
-
-.column-icon {
-  &:hover {
-    color: var(--secondary-color);
-  }
-}
-
-::v-deep a.dropdown-item {
-  padding-right: 1em;
-  .media-right {
-    visibility: hidden;
-  }
-  &:hover .media-right {
-    visibility: visible;
-  }
-}
-</style>
+<style scoped lang="postcss"></style>

assets/components/Icon.vue

@@ -1,32 +0,0 @@
-<template functional>
-  <svg class="icomoon" :class="['icon-' + props.name]">
-    <use :href="'#icon-' + props.name"></use>
-  </svg>
-</template>
-
-<script>
-export default {
-  props: {
-    name: {
-      required: true,
-      type: String,
-    },
-  },
-  name: "Icon",
-};
-</script>
-<style lang="scss" scoped>
-.icomoon {
-  display: inline-block;
-  width: 1em;
-  height: 1em;
-  stroke-width: 0;
-  stroke: currentColor;
-  fill: currentColor;
-
-  .icon:not(.keep-size) & {
-    width: 100%;
-    height: 100%;
-  }
-}
-</style>

assets/components/InfiniteLoader.vue

@@ -1,81 +1,31 @@
 <template>
-  <div ref="observer" class="infinte-loader">
-    <div class="spinner" v-show="isLoading">
-      <div class="bounce1"></div>
-      <div class="bounce2"></div>
-      <div class="bounce3"></div>
-    </div>
+  <div ref="root" class="flex min-h-[1px] justify-center">
+    <span class="loading loading-bars loading-md mt-4 text-primary" v-show="isLoading"></span>
   </div>
 </template>
 
-<script>
-export default {
-  name: "InfiniteLoader",
-  data() {
-    return {
-      isLoading: false,
-    };
-  },
-  props: {
-    onLoadMore: Function,
-    enabled: Boolean,
-  },
-  mounted() {
-    const intersectionObserver = new IntersectionObserver(
-      async (entries) => {
-        if (entries[0].intersectionRatio <= 0) return;
-        if (this.onLoadMore && this.enabled) {
-          const scrollingParent = this.$el.closest("[data-scrolling]") || document.documentElement;
-          const previousHeight = scrollingParent.scrollHeight;
-          this.isLoading = true;
-          await this.onLoadMore();
-          this.isLoading = false;
-          this.$nextTick(() => (scrollingParent.scrollTop += scrollingParent.scrollHeight - previousHeight));
-        }
-      },
-      { threshholds: 1 }
-    );
+<script lang="ts" setup>
+const { onLoadMore = () => Promise.resolve(), enabled } = defineProps<{
+  onLoadMore: () => Promise<void>;
+  enabled: boolean;
+}>();
 
-    intersectionObserver.observe(this.$refs.observer);
+const isLoading = ref(false);
+const root = ref<HTMLElement>();
 
-    this.$once("hook:beforeDestroy", () => intersectionObserver.disconnect());
-  },
-};
+const observer = new IntersectionObserver(async (entries) => {
+  if (entries[0].intersectionRatio <= 0) return;
+  if (onLoadMore && enabled) {
+    const scrollingParent = root.value?.closest("[data-scrolling]") || document.documentElement;
+    const previousHeight = scrollingParent.scrollHeight;
+    isLoading.value = true;
+    await onLoadMore();
+    isLoading.value = false;
+    await nextTick();
+    scrollingParent.scrollTop += scrollingParent.scrollHeight - previousHeight;
+  }
+});
+
+onMounted(() => observer.observe(root.value!));
+onUnmounted(() => observer.disconnect());
 </script>
-<style scoped lang="scss">
-.infinte-loader {
-  min-height: 1px;
-}
-.spinner {
-  margin: 10px auto 0;
-  width: 70px;
-  text-align: center;
-
-  & > div {
-    width: 12px;
-    height: 12px;
-    background-color: var(--primary-color);
-    border-radius: 100%;
-    display: inline-block;
-    animation: sk-bouncedelay 0.8s infinite ease-in-out both;
-  }
-  & .bounce1 {
-    animation-delay: -0.32s;
-  }
-
-  & .bounce2 {
-    animation-delay: -0.16s;
-  }
-}
-
-@keyframes sk-bouncedelay {
-  0%,
-  80%,
-  100% {
-    transform: scale(0);
-  }
-  40% {
-    transform: scale(1);
-  }
-}
-</style>

assets/components/LogContainer.vue

@@ -1,107 +0,0 @@
-<template>
-  <scrollable-view :scrollable="scrollable" v-if="container">
-    <template v-slot:header v-if="showTitle">
-      <div class="mr-0 columns is-vcentered is-hidden-mobile">
-        <div class="column is-clipped">
-          <container-title :value="container.name" @close="$emit('close')"></container-title>
-        </div>
-        <div class="column is-clipped">
-          <container-stat :stat="container.stat" :state="container.state"></container-stat>
-        </div>
-        <div class="column is-narrow">
-          <a
-            class="button is-small is-outlined"
-            id="download"
-            :href="`${base}/api/logs/download?id=${container.id}`"
-            download
-          >
-            <span class="icon">
-              <icon name="save"></icon>
-            </span>
-            Download
-          </a>
-        </div>
-        <div class="column is-narrow" v-if="closable">
-          <button class="delete is-medium" @click="$emit('close')"></button>
-        </div>
-      </div>
-    </template>
-    <template v-slot="{ setLoading }">
-      <log-viewer-with-source :id="id" @loading-more="setLoading($event)"></log-viewer-with-source>
-    </template>
-  </scrollable-view>
-</template>
-
-<script>
-import { mapGetters } from "vuex";
-
-import LogViewerWithSource from "./LogViewerWithSource";
-import ScrollableView from "./ScrollableView";
-import ContainerTitle from "./ContainerTitle";
-import ContainerStat from "./ContainerStat";
-import Icon from "./Icon";
-import config from "../store/config";
-
-export default {
-  props: {
-    id: {
-      type: String,
-    },
-    showTitle: {
-      type: Boolean,
-      default: false,
-    },
-    scrollable: {
-      type: Boolean,
-      default: false,
-    },
-    closable: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  name: "LogContainer",
-  components: {
-    LogViewerWithSource,
-    ScrollableView,
-    ContainerTitle,
-    ContainerStat,
-    Icon,
-  },
-  computed: {
-    ...mapGetters(["allContainersById"]),
-    container() {
-      return this.allContainersById[this.id];
-    },
-    base() {
-      return config.base;
-    },
-  },
-};
-</script>
-<style lang="scss" scoped>
-button.delete {
-  background-color: var(--scheme-main-ter);
-  opacity: 0.6;
-  &:after,
-  &:before {
-    background-color: var(--text-color);
-  }
-
-  &:hover {
-    opacity: 1;
-  }
-}
-
-#download.button {
-  .icon {
-    margin-right: 5px;
-    height: 80%;
-  }
-
-  &:hover {
-    color: var(--primary-color);
-    border-color: var(--primary-color);
-  }
-}
-</style>

assets/components/LogEventSource.spec.js

@@ -1,200 +0,0 @@
-import debounce from "lodash.debounce";
-import EventSource from "eventsourcemock";
-import { sources } from "eventsourcemock";
-import { shallowMount, mount, createLocalVue } from "@vue/test-utils";
-import Vuex from "vuex";
-import LogEventSource from "./LogEventSource.vue";
-import LogViewer from "./LogViewer.vue";
-
-jest.mock("lodash.debounce", () =>
-  jest.fn((fn) => {
-    return fn;
-  })
-);
-
-jest.mock("../store/config.js", () => ({ base: "" }));
-
-describe("<LogEventSource />", () => {
-  beforeEach(() => {
-    global.EventSource = EventSource;
-    window.scrollTo = jest.fn();
-    const observe = jest.fn();
-    const disconnect = jest.fn();
-    global.IntersectionObserver = jest.fn(() => ({
-      observe,
-      disconnect,
-    }));
-    debounce.mockClear();
-  });
-
-  function createLogEventSource(searchFilter = null) {
-    const localVue = createLocalVue();
-    localVue.use(Vuex);
-
-    localVue.component("log-viewer", LogViewer);
-
-    const state = { searchFilter, settings: { size: "medium", showTimestamp: true } };
-
-    const store = new Vuex.Store({
-      state,
-    });
-
-    return mount(LogEventSource, {
-      localVue,
-      store,
-      scopedSlots: {
-        default: `
-        <log-viewer :messages="props.messages"></log-viewer>
-        `,
-      },
-      propsData: { id: "abc" },
-    });
-  }
-
-  test("renders correctly", async () => {
-    const wrapper = createLogEventSource();
-    expect(wrapper.element).toMatchSnapshot();
-  });
-
-  test("should connect to EventSource", async () => {
-    shallowMount(LogEventSource);
-    sources["/api/logs/stream?id=abc"].emitOpen();
-    expect(sources["/api/logs/stream?id=abc"].readyState).toBe(1);
-  });
-
-  test("should close EventSource", async () => {
-    const wrapper = createLogEventSource();
-    sources["/api/logs/stream?id=abc"].emitOpen();
-    wrapper.destroy();
-    expect(sources["/api/logs/stream?id=abc"].readyState).toBe(2);
-  });
-
-  test("should parse messages", async () => {
-    const wrapper = createLogEventSource();
-    sources["/api/logs/stream?id=abc"].emitOpen();
-    sources["/api/logs/stream?id=abc"].emitMessage({ data: `2019-06-12T10:55:42.459034602Z "This is a message."` });
-
-    const [message, _] = wrapper.vm.messages;
-    const { key, ...messageWithoutKey } = message;
-
-    expect(key).toBe("2019-06-12T10:55:42.459034602Z");
-    expect(messageWithoutKey).toMatchInlineSnapshot(`
-      Object {
-        "date": 2019-06-12T10:55:42.459Z,
-        "message": " \\"This is a message.\\"",
-      }
-    `);
-  });
-
-  test("should parse messages with loki's timestamp format", async () => {
-    const wrapper = createLogEventSource();
-    sources["/api/logs/stream?id=abc"].emitOpen();
-    sources["/api/logs/stream?id=abc"].emitMessage({ data: `2020-04-27T12:35:43.272974324+02:00 xxxxx` });
-
-    const [message, _] = wrapper.vm.messages;
-    const { key, ...messageWithoutKey } = message;
-
-    expect(key).toBe("2020-04-27T12:35:43.272974324+02:00");
-    expect(messageWithoutKey).toMatchInlineSnapshot(`
-      Object {
-        "date": 2020-04-27T10:35:43.272Z,
-        "message": " xxxxx",
-      }
-    `);
-  });
-
-  test("should pass messages to slot", async () => {
-    const wrapper = createLogEventSource();
-    sources["/api/logs/stream?id=abc"].emitOpen();
-    sources["/api/logs/stream?id=abc"].emitMessage({ data: `2019-06-12T10:55:42.459034602Z "This is a message."` });
-    const [message, _] = wrapper.findComponent(LogViewer).vm.messages;
-
-    const { key, ...messageWithoutKey } = message;
-
-    expect(key).toBe("2019-06-12T10:55:42.459034602Z");
-
-    expect(messageWithoutKey).toMatchInlineSnapshot(`
-      Object {
-        "date": 2019-06-12T10:55:42.459Z,
-        "message": " \\"This is a message.\\"",
-      }
-    `);
-  });
-
-  describe("render html correctly", () => {
-    const RealDate = Date;
-    beforeAll(() => {
-      global.Date = class extends RealDate {
-        constructor(arg) {
-          if (arg) {
-            return new RealDate(arg);
-          } else {
-            return new RealDate(1560336936000);
-          }
-        }
-      };
-    });
-    afterAll(() => (global.Date = RealDate));
-
-    test("should render messages", async () => {
-      const wrapper = createLogEventSource();
-      sources["/api/logs/stream?id=abc"].emitOpen();
-      sources["/api/logs/stream?id=abc"].emitMessage({ data: `2019-06-12T10:55:42.459034602Z "This is a message."` });
-
-      await wrapper.vm.$nextTick();
-      expect(wrapper.find("ul.events")).toMatchInlineSnapshot(`
-        <ul class="events medium">
-          <li class=""><span class="date"><time datetime="2019-06-12T10:55:42.459Z">today at 10:55 AM</time></span> <span class="text"> "This is a message."</span></li>
-        </ul>
-      `);
-    });
-
-    test("should render messages with color", async () => {
-      const wrapper = createLogEventSource();
-      sources["/api/logs/stream?id=abc"].emitOpen();
-      sources["/api/logs/stream?id=abc"].emitMessage({
-        data: `2019-06-12T10:55:42.459034602Z \x1b[30mblack\x1b[37mwhite`,
-      });
-
-      await wrapper.vm.$nextTick();
-      expect(wrapper.find("ul.events")).toMatchInlineSnapshot(`
-        <ul class="events medium">
-          <li class=""><span class="date"><time datetime="2019-06-12T10:55:42.459Z">today at 10:55 AM</time></span> <span class="text"> <span style="color:#000">black<span style="color:#AAA">white</span></span></span></li>
-        </ul>
-      `);
-    });
-
-    test("should render messages with html entities", async () => {
-      const wrapper = createLogEventSource();
-      sources["/api/logs/stream?id=abc"].emitOpen();
-      sources["/api/logs/stream?id=abc"].emitMessage({
-        data: `2019-06-12T10:55:42.459034602Z <test>foo bar</test>`,
-      });
-
-      await wrapper.vm.$nextTick();
-      expect(wrapper.find("ul.events")).toMatchInlineSnapshot(`
-        <ul class="events medium">
-          <li class=""><span class="date"><time datetime="2019-06-12T10:55:42.459Z">today at 10:55 AM</time></span> <span class="text"> &lt;test&gt;foo bar&lt;/test&gt;</span></li>
-        </ul>
-      `);
-    });
-
-    test("should render messages with filter", async () => {
-      const wrapper = createLogEventSource("test");
-      sources["/api/logs/stream?id=abc"].emitOpen();
-      sources["/api/logs/stream?id=abc"].emitMessage({
-        data: `2019-06-11T10:55:42.459034602Z Foo bar`,
-      });
-      sources["/api/logs/stream?id=abc"].emitMessage({
-        data: `2019-06-12T10:55:42.459034602Z This is a test <hi></hi>`,
-      });
-
-      await wrapper.vm.$nextTick();
-      expect(wrapper.find("ul.events")).toMatchInlineSnapshot(`
-        <ul class="events medium">
-          <li class=""><span class="date"><time datetime="2019-06-12T10:55:42.459Z">today at 10:55 AM</time></span> <span class="text"> This is a <mark>test</mark> &lt;hi&gt;&lt;/hi&gt;</span></li>
-        </ul>
-      `);
-    });
-  });
-});

assets/components/LogEventSource.vue

@@ -1,99 +0,0 @@
-<template>
-  <div>
-    <infinite-loader :onLoadMore="loadOlderLogs" :enabled="messages.length > 100"></infinite-loader>
-    <slot :messages="messages"></slot>
-  </div>
-</template>
-
-<script>
-import debounce from "lodash.debounce";
-import InfiniteLoader from "./InfiniteLoader";
-import config from "../store/config";
-
-export default {
-  props: ["id"],
-  name: "LogEventSource",
-  components: {
-    InfiniteLoader,
-  },
-  data() {
-    return {
-      messages: [],
-      buffer: [],
-    };
-  },
-  created() {
-    this.es = null;
-    this.loadLogs(this.id);
-    this.flushBuffer = debounce(this.flushNow, 250, { maxWait: 1000 });
-  },
-  methods: {
-    loadLogs(id) {
-      this.reset();
-      this.es = new EventSource(`${config.base}/api/logs/stream?id=${this.id}`);
-      this.es.addEventListener("container-stopped", (e) => {
-        this.es.close();
-        this.buffer.push({ event: "container-stopped", message: "Container stopped", date: new Date() });
-        this.flushBuffer();
-        this.flushBuffer.flush();
-      });
-      this.es.addEventListener("error", (e) => console.error("EventSource failed: " + JSON.stringify(e)));
-      this.es.onmessage = (e) => {
-        this.buffer.push(this.parseMessage(e.data));
-        this.flushBuffer();
-      };
-      this.$once("hook:beforeDestroy", () => this.es.close());
-    },
-    flushNow() {
-      this.messages.push(...this.buffer);
-      this.buffer = [];
-    },
-    reset() {
-      if (this.es) {
-        this.es.close();
-        this.es = null;
-        this.flushBuffer.cancel();
-      }
-      this.messages = [];
-      this.buffer = [];
-    },
-    async loadOlderLogs() {
-      if (this.messages.length < 300) return;
-
-      this.$emit("loading-more", true);
-      const to = this.messages[0].date;
-      const last = this.messages[299].date;
-      const delta = to - last;
-      const from = new Date(to.getTime() + delta);
-      const logs = await (
-        await fetch(`${config.base}/api/logs?id=${this.id}&from=${from.toISOString()}&to=${to.toISOString()}`)
-      ).text();
-      if (logs) {
-        const newMessages = logs
-          .trim()
-          .split("\n")
-          .map((line) => this.parseMessage(line));
-        this.messages.unshift(...newMessages);
-      }
-      this.$emit("loading-more", false);
-    },
-    parseMessage(data) {
-      let i = data.indexOf(" ");
-      if (i == -1) {
-        i = data.length;
-      }
-      const key = data.substring(0, i);
-      const date = new Date(key);
-      const message = data.substring(i);
-      return { key, date, message };
-    },
-  },
-  watch: {
-    id(newValue, oldValue) {
-      if (oldValue !== newValue) {
-        this.loadLogs(newValue);
-      }
-    },
-  },
-};
-</script>

assets/components/LogViewer.vue

@@ -1,126 +0,0 @@
-<template>
-  <ul class="events" :class="settings.size">
-    <li v-for="item in filtered" :key="item.key" :class="{ event: !!item.event }">
-      <span class="date" v-if="settings.showTimestamp"><relative-time :date="item.date"></relative-time></span>
-      <span class="text" v-html="colorize(item.message)"></span>
-    </li>
-  </ul>
-</template>
-<script>
-import { mapActions, mapGetters, mapState } from "vuex";
-import AnsiConvertor from "ansi-to-html";
-import DOMPurify from "dompurify";
-import RelativeTime from "./RelativeTime";
-
-const ansiConvertor = new AnsiConvertor({ escapeXML: true });
-
-if (window.trustedTypes && trustedTypes.createPolicy) {
-  trustedTypes.createPolicy("default", {
-    createHTML: (string, sink) => DOMPurify.sanitize(string, { RETURN_TRUSTED_TYPE: true }),
-  });
-}
-
-export default {
-  props: ["messages"],
-  name: "LogViewer",
-  components: { RelativeTime },
-  data() {
-    return {
-      showSearch: false,
-    };
-  },
-  methods: {
-    colorize: function (value) {
-      return ansiConvertor.toHtml(value).replace("&lt;mark&gt;", "<mark>").replace("&lt;/mark&gt;", "</mark>");
-    },
-  },
-  computed: {
-    ...mapState(["searchFilter", "settings"]),
-    filtered() {
-      const { searchFilter, messages } = this;
-      if (searchFilter) {
-        const isSmartCase = searchFilter === searchFilter.toLowerCase();
-        try {
-          const regex = isSmartCase ? new RegExp(searchFilter, "i") : new RegExp(searchFilter);
-          return messages
-            .filter((d) => d.message.match(regex))
-            .map((d) => ({
-              ...d,
-              message: d.message.replace(regex, "<mark>$&</mark>"),
-            }));
-        } catch (e) {
-          if (e instanceof SyntaxError) {
-            console.info(`Ignoring SytaxError from search.`, e);
-            return messages;
-          }
-          throw e;
-        }
-      }
-      return messages;
-    },
-  },
-};
-</script>
-<style scoped lang="scss">
-.events {
-  padding: 10px;
-  font-family: monaco, monospace;
-
-  & > li {
-    word-wrap: break-word;
-    line-height: 130%;
-    &:last-child {
-      scroll-snap-align: end;
-      scroll-margin-block-end: 5rem;
-    }
-  }
-
-  &.small {
-    font-size: 60%;
-  }
-
-  &.medium {
-    font-size: 80%;
-  }
-
-  &.large {
-    font-size: 120%;
-  }
-}
-
-.date {
-  background-color: #262626;
-  color: #258ccd;
-
-  [data-theme="light"] & {
-    background-color: #f0f0f0;
-    color: #009900;
-    padding-left: 5px;
-    padding-right: 5px;
-  }
-}
-
-.text {
-  white-space: pre-wrap;
-}
-
-li.event {
-  color: #f14668;
-}
-
-::v-deep mark {
-  border-radius: 2px;
-  background-color: var(--secondary-color);
-  animation: pops 200ms ease-out;
-  display: inline-block;
-}
-
-@keyframes pops {
-  0% {
-    transform: scale(1.5);
-  }
-  100% {
-    transform: scale(1.05);
-  }
-}
-</style>

assets/components/LogViewer/ComplexLogItem.vue

@@ -0,0 +1,63 @@
+<template>
+  <div class="flex gap-x-2">
+    <div v-if="showStd">
+      <log-std :std="logEntry.std"></log-std>
+    </div>
+    <div v-if="showTimestamp">
+      <log-date :date="logEntry.date"></log-date>
+    </div>
+    <div class="flex">
+      <log-level :level="logEntry.level"></log-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">
+          <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>
+          </template>
+          <span class="font-bold" v-html="markSearch(value)" v-else></span>
+        </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>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import { type ComplexLogEntry } from "@/models/LogEntry";
+
+const { markSearch } = useSearchFilter();
+
+const { logEntry } = defineProps<{
+  logEntry: ComplexLogEntry;
+  visibleKeys: string[][];
+}>();
+
+const [expanded, expandToggle] = useToggle();
+
+const validValues = computed(() => {
+  return Object.fromEntries(Object.entries(logEntry.message).filter(([_, value]) => value !== undefined));
+});
+</script>
+
+<style lang="postcss" scoped>
+.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";
+    }
+  }
+}
+</style>

assets/components/LogViewer/ContainerHealth.vue

@@ -0,0 +1,25 @@
+<template>
+  <div class="inline-flex h-4 w-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 />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ContainerHealth } from "@/types/Container";
+
+defineProps<{
+  health: ContainerHealth | undefined;
+}>();
+</script>
+
+<style lang="postcss" scoped>
+[health="unhealthy"] {
+  @apply text-red;
+}
+
+[health="healthy"] {
+  @apply text-green;
+}
+</style>

assets/components/LogViewer/ContainerPopup.vue

@@ -0,0 +1,24 @@
+<template>
+  <div>
+    <span class="font-light capitalize"> RUNNING </span>
+    <span class="font-semibold">
+      <distance-time :date="container.created" strict :suffix="false"></distance-time>
+    </span>
+  </div>
+  <div>
+    <span class="font-light capitalize"> Load </span>
+    <span class="font-semibold"> {{ container.stat.cpu }}% </span>
+  </div>
+  <div>
+    <span class="font-light capitalize"> MEM </span>
+    <span class="font-semibold"> {{ formatBytes(container.stat.memoryUsage) }} </span>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { Container } from "@/models/Container";
+
+const { container } = defineProps<{
+  container: Container;
+}>();
+</script>

assets/components/LogViewer/ContainerStat.vue

@@ -0,0 +1,36 @@
+<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/ContainerTitle.vue

@@ -0,0 +1,37 @@
+<template>
+  <div class="flex flex-1 items-center gap-2 truncate">
+    <container-health :health="container.health" v-if="container.health"></container-health>
+    <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>
+      </div>
+      <div class="font-semibold">{{ container.name }}</div>
+      <div
+        class="mobile-hidden max-w-[1.5em] truncate transition-[max-width] hover:max-w-[400px]"
+        v-if="container.isSwarm"
+      >
+        {{ 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>
+  </div>
+</template>
+
+<script lang="ts" setup>
+const { container } = useContainerContext();
+const pinned = computed({
+  get: () => pinnedContainers.value.has(container.value.storageKey),
+  set: (value) => {
+    if (value) {
+      pinnedContainers.value.add(container.value.storageKey);
+    } else {
+      pinnedContainers.value.delete(container.value.storageKey);
+    }
+  },
+});
+</script>

assets/components/LogViewer/DockerEventLogItem.vue

@@ -0,0 +1,73 @@
+<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>
+        <h3 class="text-lg font-bold">{{ $t("alert.similar-container-found.title") }}</h3>
+        {{ $t("alert.similar-container-found.message", { containerId: nextContainer.id }) }}
+      </div>
+      <div>
+        <TimedButton v-if="automaticRedirect" class="btn-primary btn-sm" @finished="redirectNow()">Cancel</TimedButton>
+        <router-link
+          :to="{ name: 'container-id', params: { id: nextContainer.id } }"
+          class="btn btn-primary btn-sm"
+          v-else
+        >
+          Redirect
+        </router-link>
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import { DockerEventLogEntry } from "@/models/LogEntry";
+const router = useRouter();
+const { showToast } = useToast();
+const { t } = useI18n();
+
+const { logEntry } = defineProps<{
+  logEntry: DockerEventLogEntry;
+}>();
+
+const store = useContainerStore();
+const { containers } = storeToRefs(store);
+const { container } = useContainerContext();
+
+const nextContainer = computed(
+  () =>
+    containers.value
+      .filter(
+        (c) =>
+          c.host === container.value.host &&
+          c.created > logEntry.date &&
+          c.name === container.value.name &&
+          c.state === "running",
+      )
+      .toSorted((a, b) => +a.created - +b.created)[0],
+);
+
+function redirectNow() {
+  showToast(
+    {
+      title: t("alert.redirected.title"),
+      message: t("alert.redirected.message", { containerId: nextContainer.value.id }),
+      type: "info",
+    },
+    { expire: 5000 },
+  );
+  router.push({ name: "container-id", params: { id: nextContainer.value.id } });
+}
+</script>
+
+<style lang="postcss" scoped>
+[data-event="container-stopped"] {
+  @apply text-red;
+}
+[data-event="container-started"] {
+  @apply text-green;
+}
+</style>

assets/components/LogViewer/FieldList.vue

@@ -0,0 +1,79 @@
+<template>
+  <ul v-if="expanded" ref="root" class="ml-8">
+    <li v-for="(value, name) in fields">
+      <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>
+      </template>
+      <template v-else-if="Array.isArray(value)">
+        <a @click="toggleField(name)" class="link-primary cursor-pointer">
+          {{ hasField(name) ? "remove" : "add" }}&nbsp;</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>
+        </span>
+        ]
+      </template>
+      <template v-else>
+        <a @click="toggleField(name)" class="link-primary cursor-pointer">
+          {{ hasField(name) ? "remove" : "add" }}&nbsp;</a
+        >
+        <span class="text-light">{{ name }}=</span><span class="font-bold" v-html="value"></span>
+      </template>
+    </li>
+  </ul>
+</template>
+<script lang="ts" setup>
+import { arrayEquals, isObject } from "@/utils";
+
+const {
+  fields,
+  expanded = false,
+  parentKey = [],
+  visibleKeys = [],
+} = defineProps<{
+  fields: Record<string, any>;
+  expanded?: boolean;
+  parentKey?: string[];
+  visibleKeys?: string[][];
+}>();
+
+const root = ref<HTMLElement>();
+
+async function toggleField(field: string) {
+  const index = fieldIndex(field);
+
+  if (index > -1) {
+    visibleKeys.splice(index, 1);
+  } else {
+    visibleKeys.push(parentKey.concat(field));
+  }
+
+  await nextTick();
+
+  root.value?.scrollIntoView({
+    block: "center",
+  });
+}
+
+function hasField(field: string) {
+  return fieldIndex(field) > -1;
+}
+
+function fieldIndex(field: string) {
+  const path = parentKey.concat(field);
+  return visibleKeys.findIndex((keys) => arrayEquals(toRaw(keys), toRaw(path)));
+}
+</script>
+
+<style scoped lang="postcss">
+.text-light {
+  @apply text-base-content/70;
+}
+</style>

assets/components/LogViewer/LogActionsToolbar.vue

@@ -0,0 +1,89 @@
+<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:light-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

@@ -0,0 +1,53 @@
+<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

@@ -0,0 +1,10 @@
+<template>
+  <tag size="small">
+    <date-time :date="date" class="whitespace-nowrap text-blue"></date-time>
+  </tag>
+</template>
+<script lang="ts" setup>
+defineProps<{
+  date: Date;
+}>();
+</script>

assets/components/LogViewer/LogEventSource.spec.ts

@@ -0,0 +1,209 @@
+import { mount } from "@vue/test-utils";
+import { createTestingPinia } from "@pinia/testing";
+// @ts-ignore
+import EventSource, { sources } from "eventsourcemock";
+import LogEventSource from "./LogEventSource.vue";
+import LogViewer from "./LogViewer.vue";
+import { settings } from "@/composables/settings";
+import { useSearchFilter } from "@/composables/search";
+import { vi, describe, expect, beforeEach, test, afterEach } from "vitest";
+import { computed, nextTick } from "vue";
+import { createRouter, createWebHistory } from "vue-router";
+import { containerContext } from "@/composables/containerContext";
+
+vi.mock("@/stores/config", () => ({
+  __esModule: true,
+  default: { base: "", hosts: [{ name: "localhost", id: "localhost" }] },
+}));
+
+/**
+ * @vitest-environment jsdom
+ */
+describe("<LogEventSource />", () => {
+  const search = useSearchFilter();
+
+  beforeEach(() => {
+    global.EventSource = EventSource;
+    // @ts-ignore
+    window.scrollTo = vi.fn();
+    global.IntersectionObserver = vi.fn().mockImplementation(() => ({
+      observe: vi.fn(),
+      disconnect: vi.fn(),
+    }));
+    vi.useFakeTimers();
+    vi.setSystemTime(1560336942459);
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+    vi.useRealTimers();
+  });
+
+  function createLogEventSource(
+    {
+      searchFilter = "",
+      hourStyle = "auto",
+    }: { searchFilter?: string | undefined; hourStyle?: "auto" | "24" | "12" } = {
+      hourStyle: "auto",
+    },
+  ) {
+    settings.value.hourStyle = hourStyle;
+    search.searchFilter.value = searchFilter;
+    if (searchFilter) {
+      search.showSearch.value = true;
+    }
+
+    const router = createRouter({
+      history: createWebHistory("/"),
+      routes: [
+        {
+          path: "/",
+          component: {
+            template: "Test from createLogEventSource",
+          },
+        },
+      ],
+    });
+
+    return mount(LogEventSource, {
+      global: {
+        plugins: [router, createTestingPinia({ createSpy: vi.fn })],
+        components: {
+          LogViewer,
+        },
+        provide: {
+          [containerContext as symbol]: {
+            container: 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>
+        `,
+      },
+      props: {},
+    });
+  }
+
+  const sourceUrl = "/api/logs/stream/localhost/abc?stdout=1&stderr=1";
+
+  test("renders correctly", async () => {
+    const wrapper = createLogEventSource();
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  test("should connect to EventSource", async () => {
+    const wrapper = createLogEventSource();
+    sources[sourceUrl].emitOpen();
+    expect(sources[sourceUrl].readyState).toBe(1);
+    wrapper.unmount();
+  });
+
+  test("should close EventSource", async () => {
+    const wrapper = createLogEventSource();
+    sources[sourceUrl].emitOpen();
+    wrapper.unmount();
+    expect(sources[sourceUrl].readyState).toBe(2);
+  });
+
+  test("should parse messages", async () => {
+    const wrapper = createLogEventSource();
+    sources[sourceUrl].emitOpen();
+    sources[sourceUrl].emitMessage({
+      data: `{"ts":1560336942459, "m":"This is a message.", "id":1}`,
+    });
+
+    vi.runAllTimers();
+    await nextTick();
+
+    // @ts-ignore
+    const [message, _] = wrapper.vm.messages;
+    expect(message).toMatchSnapshot();
+  });
+
+  describe("render html correctly", () => {
+    test("should render messages", async () => {
+      const wrapper = createLogEventSource();
+      sources[sourceUrl].emitOpen();
+      sources[sourceUrl].emitMessage({
+        data: `{"ts":1560336942459, "m":"This is a message.", "id":1}`,
+      });
+
+      vi.runAllTimers();
+      await nextTick();
+
+      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();
+      sources[sourceUrl].emitMessage({
+        data: `{"ts":1560336942459, "m":"<test>foo bar</test>", "id":1}`,
+      });
+
+      vi.runAllTimers();
+      await nextTick();
+
+      expect(wrapper.find("ul.events").html()).toMatchSnapshot();
+    });
+
+    test("should render dates with 12 hour style", async () => {
+      const wrapper = createLogEventSource({ hourStyle: "12" });
+      sources[sourceUrl].emitOpen();
+      sources[sourceUrl].emitMessage({
+        data: `{"ts":1560336942459, "m":"<test>foo bar</test>", "id":1}`,
+      });
+
+      vi.runAllTimers();
+      await nextTick();
+
+      expect(wrapper.find("ul.events").html()).toMatchSnapshot();
+    });
+
+    test("should render dates with 24 hour style", async () => {
+      const wrapper = createLogEventSource({ hourStyle: "24" });
+      sources[sourceUrl].emitOpen();
+      sources[sourceUrl].emitMessage({
+        data: `{"ts":1560336942459, "m":"<test>foo bar</test>", "id":1}`,
+      });
+
+      vi.runAllTimers();
+      await nextTick();
+
+      expect(wrapper.find("ul.events").html()).toMatchSnapshot();
+    });
+
+    test("should render messages with filter", async () => {
+      const wrapper = createLogEventSource({ searchFilter: "test" });
+      sources[sourceUrl].emitOpen();
+      sources[sourceUrl].emitMessage({
+        data: `{"ts":1560336942459, "m":"foo bar", "id":1}`,
+      });
+      sources[sourceUrl].emitMessage({
+        data: `{"ts":1560336942459, "m":"test bar", "id":2}`,
+      });
+
+      vi.runAllTimers();
+      await nextTick();
+
+      expect(wrapper.find("ul.events").html()).toMatchSnapshot();
+    });
+  });
+});

assets/components/LogViewer/LogEventSource.vue

@@ -0,0 +1,20 @@
+<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 { container, streamConfig } = useContainerContext();
+const { messages, loadOlderLogs } = useLogStream(container, streamConfig);
+
+const beforeLoading = () => loadingMore(true);
+const afterLoading = () => loadingMore(false);
+
+defineExpose({
+  clear: () => (messages.value = []),
+});
+
+const fetchMore = () => loadOlderLogs({ beforeLoading, afterLoading });
+</script>

assets/components/LogViewer/LogLevel.vue

@@ -0,0 +1,54 @@
+<template>
+  <div :data-level="level" :data-position="position" class="mt-1.5 h-2.5 w-2.5 flex-none rounded-lg"></div>
+</template>
+<script lang="ts" setup>
+import { Position } from "@/models/LogEntry";
+
+defineProps<{
+  level?: string;
+  position?: Position;
+}>();
+</script>
+
+<style lang="postcss" scoped>
+[data-position="start"] {
+  border-radius: 0.5em 0.5em 0 0;
+  height: 70%;
+  margin-bottom: -0.4em;
+  margin-top: auto;
+  align-self: flex-end;
+}
+
+[data-position="middle"] {
+  border-radius: 0;
+  height: auto;
+  margin: -0.4em 0;
+  align-self: stretch;
+}
+
+[data-position="end"] {
+  border-radius: 0 0 0.5em 0.5em;
+  height: 70%;
+  margin-top: -0.4em;
+  align-self: flex-start;
+}
+
+[data-level="debug"],
+[data-level="trace"] {
+  @apply bg-purple;
+}
+
+[data-level="info"] {
+  @apply bg-green;
+}
+
+[data-level="error"],
+[data-level="fatal"] {
+  @apply bg-red;
+}
+
+[data-level="warn"],
+[data-level="warning"] {
+  @apply bg-orange;
+}
+</style>

assets/components/LogViewer/LogStd.vue

@@ -0,0 +1,23 @@
+<template>
+  <tag size="small" :std="std">
+    {{ std }}
+  </tag>
+</template>
+
+<script lang="ts" setup>
+import { Std } from "@/models/LogEntry";
+
+defineProps<{
+  std: Std;
+}>();
+</script>
+
+<style lang="postcss" scoped>
+[std="stdout"] {
+  @apply text-blue;
+}
+
+[std="stderr"] {
+  @apply text-red;
+}
+</style>

assets/components/LogViewer/LogViewer.vue

@@ -0,0 +1,97 @@
+<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-primary tooltip tooltip-right"
+        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>
+</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>[];
+}>();
+
+const { container } = useContainerContext();
+
+let visibleKeys = persistentVisibleKeys(container);
+
+const { filteredPayload } = useVisibleFilter(visibleKeys);
+const { filteredMessages, resetSearch, isSearching } = 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 routeHash = useRouteHash();
+watch(
+  routeHash,
+  (hash) => {
+    if (hash) {
+      document.querySelector(`[data-key="${hash.substring(1)}"]`)?.scrollIntoView({ block: "center" });
+    }
+  },
+  { 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 hover:text-secondary-focus;
+    }
+  }
+
+  &.small {
+    @apply text-[0.7em];
+  }
+
+  &.medium {
+    @apply text-[0.8em];
+  }
+
+  &.large {
+    @apply text-lg;
+  }
+}
+</style>

assets/components/LogViewer/LogViewerWithSource.vue

@@ -0,0 +1,18 @@
+<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/SimpleLogItem.vue

@@ -0,0 +1,20 @@
+<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>
+</template>
+<script lang="ts" setup>
+import { SimpleLogEntry } from "@/models/LogEntry";
+import AnsiConvertor from "ansi-to-html";
+
+const ansiConvertor = new AnsiConvertor({ escapeXML: false, fg: "var(--text-color)" });
+defineProps<{
+  logEntry: SimpleLogEntry;
+}>();
+
+const { markSearch } = useSearchFilter();
+const colorize = (value: string) => markSearch(ansiConvertor.toHtml(value));
+</script>

assets/components/LogViewer/SkippedEntriesLogItem.vue

@@ -0,0 +1,17 @@
+<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>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import { SkippedLogsEntry } from "@/models/LogEntry";
+
+defineProps<{
+  logEntry: SkippedLogsEntry;
+}>();
+</script>

assets/components/LogViewer/StatMonitor.vue

@@ -0,0 +1,25 @@
+<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>
+    <div class="inline-flex gap-1 rounded bg-base p-px text-xs lg:absolute lg:-left-0.5 lg:-top-2">
+      <div class="font-light uppercase">{{ label }}</div>
+      <div class="select-none font-bold">
+        {{ mouseOver ? selectedPoint?.value ?? selectedPoint?.y ?? statValue : statValue }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+const { data, label, statValue } = defineProps<{ data: Point<unknown>[]; label: string; statValue: string | number }>();
+
+let selectedPoint: Point<unknown> | undefined = $ref();
+
+function onSelectedPoint(point: Point<unknown>) {
+  selectedPoint = point;
+}
+
+let mouseOver = $ref(false);
+</script>

assets/components/LogViewer/StatSparkline.vue

@@ -0,0 +1,44 @@
+<template>
+  <svg :width="width" :height="height" @mousemove="onMove" class="group">
+    <path :d="path" class="fill-primary" />
+    <line :x1="lineX" y1="0" :x2="lineX" :y2="height" class="invisible stroke-secondary stroke-2 group-hover:visible" />
+  </svg>
+</template>
+
+<script lang="ts" setup>
+import { extent } from "d3-array";
+import { scaleLinear } from "d3-scale";
+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 y = d3.scaleLinear().range([height, 0]);
+
+const selectedPoint = defineEmit<[value: Point<unknown>]>();
+
+const shape = d3
+  .area<Point<unknown>>()
+  .curve(d3.curveStep)
+  .x((d) => x(d.x))
+  .y0(height)
+  .y1((d) => y(d.y));
+
+const path = computed(() => {
+  x.domain(d3.extent(data, (d) => d.x) as [number, number]);
+  y.domain(d3.extent([...data, { y: 1 }], (d) => d.y) as [number, number]);
+
+  return shape(data) ?? "";
+});
+
+let lineX = $ref(0);
+
+function onMove(e: MouseEvent) {
+  const { offsetX } = e;
+  const xValue = x.invert(offsetX);
+  const index = Math.round(xValue);
+  lineX = x(index);
+  const point = data[index];
+  selectedPoint(point);
+}
+</script>

assets/components/LogViewer/ZigZag.vue

@@ -0,0 +1,11 @@
+<template>
+  <svg width="100%" height="8" class="zigzag">
+    <defs>
+      <pattern id="zigzag" x="0" y="0" width="30" height="8" patternUnits="userSpaceOnUse">
+        <line x1="0" y1="0" x2="15" y2="8" class="stroke-primary stroke-1" />
+        <line x1="15" y1="8" x2="30" y2="0" class="stroke-primary stroke-1" />
+      </pattern>
+    </defs>
+    <rect x="0" y="0" width="100%" height="100%" fill="url(#zigzag)"></rect>
+  </svg>
+</template>

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

@@ -0,0 +1,114 @@
+// 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-primary tooltip tooltip-right\\" 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/LogViewerWithSource.vue

@@ -1,19 +0,0 @@
-<template>
-  <log-event-source :id="id" v-slot="eventSource" @loading-more="$emit('loading-more', $event)">
-    <log-viewer :messages="eventSource.messages"></log-viewer>
-  </log-event-source>
-</template>
-
-<script>
-import LogEventSource from "./LogEventSource";
-import LogViewer from "./LogViewer";
-
-export default {
-  props: ["id"],
-  name: "LogViewerWithSource",
-  components: {
-    LogEventSource,
-    LogViewer,
-  },
-};
-</script>

assets/components/MobileMenu.vue

@@ -1,107 +0,0 @@
-<template>
-  <aside>
-    <div class="columns is-marginless is-gapless is-mobile is-vcentered">
-      <div class="column is-narrow">
-        <router-link :to="{ name: 'default' }">
-          <svg class="logo">
-            <use href="#logo"></use>
-          </svg>
-        </router-link>
-      </div>
-      <div class="column ml-4 is-family-monospace is-ellipsis" v-if="$route.name == 'container'">
-        {{ allContainersById[$route.params.id].name }}
-      </div>
-
-      <div class="column is-narrow push-right">
-        <a
-          role="button"
-          class="navbar-burger burger is-hidden-tablet is-pulled-right"
-          @click="showNav = !showNav"
-          :class="{ 'is-active': showNav }"
-        >
-          <span></span> <span></span> <span></span>
-        </a>
-      </div>
-    </div>
-
-    <p class="menu-label is-hidden-mobile" :class="{ 'is-active': showNav }">Containers</p>
-    <ul class="menu-list is-hidden-mobile" :class="{ 'is-active': showNav }">
-      <li v-for="item in visibleContainers" :key="item.id">
-        <router-link
-          :to="{ name: 'container', params: { id: item.id, name: item.name } }"
-          active-class="is-active"
-          :title="item.name"
-        >
-          <div class="is-ellipsis">
-            {{ item.name }}
-          </div>
-        </router-link>
-      </li>
-    </ul>
-  </aside>
-</template>
-
-<script>
-import { mapGetters } from "vuex";
-
-export default {
-  props: [],
-  name: "MobileMenu",
-  data() {
-    return {
-      showNav: false,
-    };
-  },
-  computed: {
-    ...mapGetters(["visibleContainers", "allContainersById"]),
-  },
-  watch: {
-    $route(to, from) {
-      this.showNav = false;
-    },
-  },
-};
-</script>
-<style scoped lang="scss">
-aside {
-  padding: 1em;
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  background: var(--scheme-main-ter);
-  z-index: 2;
-  max-height: 100vh;
-  overflow: auto;
-
-  .menu-label {
-    margin-top: 1em;
-  }
-
-  .title {
-    text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2);
-  }
-
-  .burger {
-    color: var(--body-color);
-  }
-
-  .is-hidden-mobile.is-active {
-    display: block !important;
-  }
-
-  .navbar-burger {
-    height: 2.35rem;
-  }
-
-  .logo {
-    width: 82px;
-    height: 36px;
-    fill: var(--logo-color);
-  }
-
-  .column.push-right {
-    margin-left: auto;
-  }
-}
-</style>

assets/components/PastTime.vue

@@ -1,39 +0,0 @@
-<template>
-  <time :datetime="date.toISOString()">{{ text }}</time>
-</template>
-
-<script>
-import formatDistance from "date-fns/formatDistance";
-
-export default {
-  props: {
-    date: {
-      required: true,
-      type: Date,
-    },
-  },
-  data() {
-    return {
-      text: "",
-      interval: null,
-    };
-  },
-  name: "PastTime",
-  mounted() {
-    this.updateFromNow();
-    this.interval = setInterval(() => this.updateFromNow(), 30000);
-  },
-  destroyed() {
-    clearInterval(this.interval);
-  },
-  methods: {
-    updateFromNow() {
-      this.text = formatDistance(this.date, new Date(), {
-        addSuffix: true,
-      });
-    },
-  },
-};
-</script>
-
-<style scoped lang="scss"></style>

assets/components/Popup.vue

@@ -0,0 +1,58 @@
+<template>
+  <slot></slot>
+  <teleport to="body">
+    <transition name="fade">
+      <div
+        v-show="show && (delayedShow || glopbalShow)"
+        class="fixed z-50 rounded border border-secondary/50 bg-base-lighter p-4 shadow"
+        ref="content"
+      >
+        <slot name="content"></slot>
+      </div>
+    </transition>
+  </teleport>
+</template>
+
+<script lang="ts" setup>
+import { globalShowPopup } from "@/composables/popup";
+
+let glopbalShow = globalShowPopup();
+let show = ref(glopbalShow.value);
+let delayedShow = refDebounced(show, 1000);
+
+let content: HTMLElement | null = $ref(null);
+
+const onMouseEnter = (e: Event) => {
+  show.value = true;
+  glopbalShow.value = true;
+  if (e.target && content && e.target instanceof Element) {
+    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`;
+  }
+};
+
+const onMouseLeave = () => {
+  show.value = false;
+  glopbalShow.value = false;
+};
+
+const el = useCurrentElement();
+useEventListener(() => el.value?.nextElementSibling, "mouseenter", onMouseEnter);
+useEventListener(() => el.value?.nextElementSibling, "mouseleave", onMouseLeave);
+</script>
+
+<style scoped lang="postcss">
+.fade-enter-active,
+.fade-leave-active {
+  @apply transition-opacity;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  @apply opacity-0;
+}
+</style>

assets/components/RelativeTime.vue

@@ -1,42 +0,0 @@
-<template>
-  <time :datetime="date.toISOString()">{{ date | relativeTime(locale) }}</time>
-</template>
-
-<script>
-import { mapActions, mapState } from "vuex";
-import { formatRelative } from "date-fns";
-import { enGB, enUS } from "date-fns/locale";
-
-const use24Hr =
-  new Intl.DateTimeFormat(undefined, {
-    hour: "numeric",
-  })
-    .formatToParts(new Date(2020, 0, 1, 13))
-    .find((part) => part.type === "hour").value.length === 2;
-
-const auto = use24Hr ? enGB : enUS;
-const styles = { auto, 12: enUS, 24: enGB };
-
-export default {
-  props: {
-    date: {
-      required: true,
-      type: Date,
-    },
-  },
-  name: "RelativeTime",
-  components: {},
-
-  computed: {
-    ...mapState(["settings"]),
-    locale() {
-      return styles[this.settings.hourStyle];
-    },
-  },
-  filters: {
-    relativeTime(date, locale) {
-      return formatRelative(date, new Date(), { locale });
-    },
-  },
-};
-</script>

assets/components/ScrollProgress.vue

@@ -1,120 +1,81 @@
 <template>
-  <div class="scroll-progress">
-    <svg width="100" height="100" viewBox="0 0 100 100" :class="{ indeterminate }">
-      <circle r="44" cx="50" cy="50" :style="{ '--progress': scrollProgress }" />
-    </svg>
-    <div class="is-overlay columns is-vcentered is-centered has-text-weight-light">
-      <template v-if="indeterminate">
-        <div class="column is-narrow is-paddingless is-size-2">&#8734;</div>
-      </template>
-      <template v-else>
-        <span class="column is-narrow is-paddingless is-size-2">
-          {{ Math.ceil(scrollProgress * 100) }}
-        </span>
-        <span class="column is-narrow is-paddingless"> % </span>
-      </template>
+  <transition name="fadeout">
+    <div class="pointer-events-none relative inline-block" ref="root" v-show="!autoHide || show">
+      <svg width="100" height="100" viewBox="0 0 100 100" :class="{ indeterminate }">
+        <circle r="44" cx="50" cy="50" class="fill-base-darker stroke-primary" />
+      </svg>
+      <div class="absolute inset-0 flex items-center justify-center font-light">
+        <template v-if="indeterminate">
+          <div class="text-4xl">&#8734;</div>
+        </template>
+        <template v-else-if="!isNaN(scrollProgress)">
+          <span class="text-4xl">
+            {{ Math.ceil(scrollProgress * 100) }}
+          </span>
+          <span> % </span>
+        </template>
+      </div>
     </div>
-  </div>
+  </transition>
 </template>
 
-<script>
-import { mapGetters } from "vuex";
-import throttle from "lodash.throttle";
+<script lang="ts" setup>
+const { indeterminate = false, autoHide = false } = defineProps<{
+  indeterminate?: boolean;
+  autoHide?: boolean;
+}>();
 
-export default {
-  name: "ScrollProgress",
-  props: {
-    indeterminate: {
-      default: false,
-      type: Boolean,
+const scrollProgress = ref(0);
+const root = ref<HTMLElement>();
+const store = useContainerStore();
+const { activeContainers } = storeToRefs(store);
+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,
+    () => {
+      scrollElement.value = (root.value?.closest("[data-scrolling]") as HTMLElement) ?? document;
     },
-    autoHide: {
-      default: true,
-      type: Boolean,
-    },
-  },
-  data() {
-    return {
-      scrollProgress: 0,
-      animation: { cancel: () => {} },
-      parentElement: document,
-    };
-  },
-  created() {
-    this.onScrollThrottled = throttle(this.onScroll, 150);
-  },
-  mounted() {
-    this.attachEvents();
-    this.$once("hook:beforeDestroy", this.detachEvents);
-  },
-  watch: {
-    activeContainers() {
-      this.detachEvents();
-      this.attachEvents();
-    },
-    indeterminate() {
-      this.$nextTick(() => this.onScroll());
-    },
-  },
-  computed: {
-    ...mapGetters(["activeContainers"]),
-  },
-  methods: {
-    attachEvents() {
-      this.parentElement = this.$el.closest("[data-scrolling]") || document;
-      this.parentElement.addEventListener("scroll", this.onScrollThrottled);
-    },
-    detachEvents() {
-      this.parentElement.removeEventListener("scroll", this.onScrollThrottled);
-    },
-    onScroll() {
-      const p = this.parentElement == document ? document.documentElement : this.parentElement;
-      this.scrollProgress = p.scrollTop / (p.scrollHeight - p.clientHeight);
-      this.animation.cancel();
-      if (this.autoHide) {
-        this.animation = this.$el.animate(
-          { opacity: [1, 0] },
-          {
-            duration: 500,
-            delay: 2000,
-            fill: "both",
-            easing: "ease-out",
-          }
-        );
-      }
-    },
-  },
-};
+    { immediate: true, flush: "post" },
+  );
+});
+
+watchPostEffect(() => {
+  const parent =
+    scrollElement.value === document
+      ? (scrollElement.value as Document).documentElement
+      : (scrollElement.value as HTMLElement);
+  scrollProgress.value = Math.max(0, Math.min(1, scrollY.value / (parent.scrollHeight - parent.clientHeight)));
+  if (autoHide) {
+    show.value = true;
+  }
+});
 </script>
-<style scoped lang="scss">
-.scroll-progress {
-  display: inline-block;
-  position: relative;
+<style scoped lang="postcss">
+svg {
+  filter: drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.2));
+  margin-top: 5px;
+  &.indeterminate {
+    animation: 2s linear infinite svg-animation;
 
-  svg {
-    filter: drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.2));
-    margin-top: 5px;
-    &.indeterminate {
-      animation: 2s linear infinite svg-animation;
-
-      circle {
-        animation: 1.4s ease-in-out infinite both circle-animation;
-      }
-    }
     circle {
-      fill: var(--scheme-main-ter);
-      fill-opacity: 0.8;
-      transition: stroke-dashoffset 250ms ease-out;
-      transform: rotate(-90deg);
-      transform-origin: 50% 50%;
-      stroke: var(--primary-color);
-      stroke-dashoffset: calc(276.32px - var(--progress) * 276.32px);
-      stroke-dasharray: 276.32px 276.32px;
-      stroke-linecap: round;
-      stroke-width: 3;
-      will-change: stroke-dashoffset;
+      animation: 1.4s ease-in-out infinite both circle-animation;
     }
   }
+  circle {
+    fill-opacity: 0.75;
+    transition: stroke-dashoffset 250ms ease-out;
+    transform: rotate(-90deg);
+    transform-origin: 50% 50%;
+    stroke-dashoffset: calc(276.32px - v-bind(scrollProgress) * 276.32px);
+    stroke-dasharray: 276.32px 276.32px;
+    stroke-linecap: round;
+    stroke-width: 3;
+    will-change: stroke-dashoffset;
+  }
 }
 
 @keyframes svg-animation {
@@ -143,4 +104,12 @@ export default {
     transform: rotate(360deg);
   }
 }
+
+.fadeout-leave-active {
+  @apply transition-opacity;
+}
+
+.fadeout-leave-to {
+  opacity: 0;
+}
 </style>

assets/components/ScrollableView.vue

@@ -1,167 +1,93 @@
 <template>
-  <section :class="{ 'is-full-height-scrollable': scrollable }">
-    <header v-if="$slots.header">
+  <section :class="{ 'h-screen min-h-0': scrollable }" class="flex flex-col">
+    <header
+      v-if="$slots.header"
+      class="sticky top-[70px] z-[2] border-b border-base-content/10 bg-base py-2 shadow-[1px_1px_2px_0_rgb(0,0,0,0.05)] md:top-0"
+    >
       <slot name="header"></slot>
     </header>
-    <main ref="content" :data-scrolling="scrollable">
-      <div class="is-scrollbar-progress is-hidden-mobile">
-        <scroll-progress v-show="paused" :indeterminate="loading" :auto-hide="!loading"></scroll-progress>
+    <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" />
       </div>
-      <slot :setLoading="setLoading"></slot>
-      <div ref="scrollObserver" class="is-scroll-observer"></div>
+      <div ref="scrollableContent">
+        <slot :setLoading="setLoading"></slot>
+      </div>
+
+      <div ref="scrollObserver" class="h-px"></div>
     </main>
 
-    <div class="is-scrollbar-notification">
+    <div class="mr-16 text-right">
       <transition name="fade">
-        <button class="button" :class="hasMore ? 'has-more' : ''" @click="scrollToBottom('instant')" v-show="paused">
-          <icon name="download"></icon>
+        <button
+          class="fixed bottom-8 rounded bg-primary p-3 text-primary-content shadow transition-colors hover:bg-primary-focus"
+          :class="hasMore ? 'animate-bounce-fast bg-secondary text-secondary-content hover:bg-secondary-focus' : ''"
+          @click="scrollToBottom()"
+          v-show="paused"
+        >
+          <mdi:light-chevron-double-down />
         </button>
       </transition>
     </div>
   </section>
 </template>
 
-<script>
-import Icon from "./Icon";
-import ScrollProgress from "./ScrollProgress";
+<script lang="ts" setup>
+const { scrollable = false } = defineProps<{ scrollable?: boolean }>();
 
-export default {
-  props: {
-    scrollable: {
-      type: Boolean,
-      default: true,
-    },
-  },
-  components: {
-    Icon,
-    ScrollProgress,
-  },
-  name: "ScrollableView",
-  data() {
-    return {
-      paused: false,
-      hasMore: false,
-      loading: false,
-    };
-  },
-  mounted() {
-    const { content } = this.$refs;
-    const mutationObserver = new MutationObserver((e) => {
-      if (!this.paused) {
-        this.scrollToBottom("instant");
-      } else {
-        const record = e[e.length - 1];
-        if (
-          record.target.children[record.target.children.length - 1] == record.addedNodes[record.addedNodes.length - 1]
-        ) {
-          this.hasMore = true;
-        }
-      }
-    });
-    mutationObserver.observe(content, { childList: true, subtree: true });
-    this.$once("hook:beforeDestroy", () => mutationObserver.disconnect());
+let paused = $ref(false);
+let hasMore = $ref(false);
+let loading = $ref(false);
+const scrollObserver = ref<HTMLElement>();
+const scrollableContent = ref<HTMLElement>();
 
-    const intersectionObserver = new IntersectionObserver(
-      (entries) => (this.paused = entries[0].intersectionRatio == 0),
-      { threshholds: [0, 1], rootMargin: "80px 0px" }
-    );
-    intersectionObserver.observe(this.$refs.scrollObserver);
-    this.$once("hook:beforeDestroy", () => intersectionObserver.disconnect());
-  },
+provide("scrollingPaused", $$(paused));
 
-  methods: {
-    scrollToBottom(behavior = "instant") {
-      this.$refs.scrollObserver.scrollIntoView({ behavior });
-      this.hasMore = false;
-    },
-    setLoading(loading) {
-      this.loading = loading;
-    },
-  },
-};
+const mutationObserver = new MutationObserver((e) => {
+  if (!paused) {
+    scrollToBottom();
+  } else {
+    const record = e[e.length - 1];
+    const children = (record.target as HTMLElement).children;
+    if (children[children.length - 1] == record.addedNodes[record.addedNodes.length - 1]) {
+      hasMore = true;
+    }
+  }
+});
+
+const intersectionObserver = new IntersectionObserver((entries) => (paused = entries[0].intersectionRatio == 0), {
+  threshold: [0, 1],
+  rootMargin: "80px 0px",
+});
+
+onMounted(() => {
+  mutationObserver.observe(scrollableContent.value!, { childList: true, subtree: true });
+  intersectionObserver.observe(scrollObserver.value!);
+});
+
+function scrollToBottom(behavior: "auto" | "smooth" = "auto") {
+  scrollObserver.value?.scrollIntoView({ behavior });
+  hasMore = false;
+}
+
+function setLoading(value: boolean) {
+  loading = value;
+}
 </script>
-<style scoped lang="scss">
-section {
-  display: flex;
-  flex-direction: column;
+<style scoped lang="postcss">
+.fade-enter-active,
+.fade-leave-active {
+  @apply transition-opacity;
+}
 
-  header {
-    position: sticky;
-    top: 0;
-    background: var(--body-background-color);
-    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
-  }
-
-  &.is-full-height-scrollable {
-    height: 100vh;
-    min-height: 0;
-  }
-
-  main {
-    flex: 1;
-    overflow: auto;
-    scroll-snap-type: y proximity;
-  }
-
-  .is-scrollbar-progress {
-    text-align: right;
-    margin-right: 110px;
-    .scroll-progress {
-      position: fixed;
-      top: 60px;
-      z-index: 2;
-    }
-  }
-
-  .is-scroll-observer {
-    height: 1px;
-  }
-
-  .is-scrollbar-notification {
-    text-align: right;
-    margin-right: 65px;
-    button {
-      position: fixed;
-      bottom: 30px;
-      background-color: var(--secondary-color);
-      transition: background-color 1s ease-out;
-      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
-      border: none !important;
-      color: #222;
-
-      &.has-more {
-        background-color: var(--primary-color);
-        animation-name: bounce;
-        animation-duration: 1000ms;
-        animation-fill-mode: both;
-        color: #fff;
-      }
-    }
-  }
-
-  @keyframes bounce {
-    0%,
-    20%,
-    50%,
-    80%,
-    100% {
-      transform: translateY(0);
-    }
-    40% {
-      transform: translateY(-30px);
-    }
-    60% {
-      transform: translateY(-15px);
-    }
-  }
-
-  .fade-enter-active,
-  .fade-leave-active {
-    transition: opacity 0.15s ease-in;
-  }
-  .fade-enter,
-  .fade-leave-to {
-    opacity: 0;
-  }
+.fade-enter-from,
+.fade-leave-to {
+  @apply opacity-0;
+}
+</style>
+
+<style>
+.splitpanes__pane {
+  overflow: unset !important;
 }
 </style>

assets/components/Search.vue

@@ -1,114 +1,36 @@
 <template>
-  <div class="search columns is-gapless is-vcentered" v-show="showSearch" v-if="settings.search">
-    <div class="column">
-      <p class="control has-icons-left">
-        <input
-          class="input"
-          type="text"
-          placeholder="Find / RegEx"
-          ref="filter"
-          v-model="filter"
-          @keyup.esc="resetSearch()"
-        />
-        <span class="icon is-left">
-          <icon name="search"></icon>
-        </span>
-      </p>
-    </div>
-    <div class="column is-1 has-text-centered">
-      <button class="delete is-medium" @click="resetSearch()"></button>
+  <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:light-magnify />
+      <input
+        class="input flex-1"
+        type="text"
+        placeholder="Find / RegEx"
+        ref="input"
+        v-model="searchFilter"
+        @keyup.esc="resetSearch()"
+      />
     </div>
+
+    <a class="btn btn-circle btn-xs" @click="resetSearch()"> <mdi:close /></a>
   </div>
 </template>
 
-<script>
-import { mapActions, mapState } from "vuex";
-import hotkeys from "hotkeys-js";
-import Icon from "./Icon";
+<script lang="ts" setup>
+const input = ref<HTMLInputElement>();
+const { searchFilter, showSearch, resetSearch } = useSearchFilter();
 
-export default {
-  props: [],
-  name: "Search",
-  components: {
-    Icon,
-  },
-  data() {
-    return {
-      showSearch: false,
-    };
-  },
-  mounted() {
-    hotkeys("command+f, ctrl+f", (event, handler) => {
-      this.showSearch = true;
-      this.$nextTick(() => this.$refs.filter.focus() || this.$refs.filter.select());
-      event.preventDefault();
-    });
-    hotkeys("esc", (event, handler) => {
-      this.resetSearch();
-    });
-  },
-  beforeDestroy() {
-    this.updateSearchFilter("");
-    hotkeys.unbind("command+f, ctrl+f, esc");
-  },
-  methods: {
-    ...mapActions({
-      updateSearchFilter: "SET_SEARCH",
-    }),
-    resetSearch() {
-      this.showSearch = false;
-      this.filter = "";
-    },
-  },
-  computed: {
-    ...mapState(["searchFilter", "settings"]),
-    filter: {
-      get() {
-        return this.searchFilter;
-      },
-      set(value) {
-        this.updateSearchFilter(value);
-      },
-    },
-  },
-};
+onKeyStroke("f", (e) => {
+  if (e.ctrlKey || e.metaKey) {
+    showSearch.value = true;
+    nextTick(() => input.value?.focus() || input.value?.select());
+    e.preventDefault();
+  }
+});
+
+onUnmounted(() => resetSearch());
 </script>
-
-<style lang="scss" scoped>
-.search {
-  width: 350px;
-  position: fixed;
-  padding: 10px;
-  background: var(--scheme-main-ter);
-  top: 0;
-  right: 0;
-  border-radius: 0 0 0 5px;
-  z-index: 10;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
-
-  button.delete {
-    margin-left: 1em;
-    background-color: var(--scheme-main-ter);
-    opacity: 0.6;
-    &:after,
-    &:before {
-      background-color: var(--text-color);
-    }
-
-    &:hover {
-      opacity: 1;
-    }
-  }
-
-  .icon {
-    padding: 10px 3px;
-  }
-
-  .input {
-    color: var(--body-color);
-    &::placeholder {
-      color: var(--border-color);
-    }
-  }
-}
-</style>

assets/components/SideMenu.vue

@@ -1,128 +1,209 @@
 <template>
-  <aside>
-    <div class="columns is-marginless">
-      <div class="column is-paddingless">
-        <router-link :to="{ name: 'default' }">
-          <svg class="logo">
-            <use href="#logo"></use>
-          </svg>
-        </router-link>
-      </div>
-      <div class="column is-narrow has-text-right px-1">
-        <button
-          class="button is-small is-rounded is-settings-control"
-          @click="$emit('search')"
-          title="Search containers (⌘ + k, ⌃k)"
-        >
-          <span class="icon">
-            <icon name="search"></icon>
-          </span>
-        </button>
-      </div>
-      <div class="column is-narrow has-text-right px-0">
-        <router-link
-          :to="{ name: 'settings' }"
-          active-class="is-active"
-          class="button is-small is-rounded is-settings-control"
-        >
-          <span class="icon">
-            <icon name="cog"></icon>
-          </span>
-        </router-link>
-      </div>
+  <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>
-    <p class="menu-label is-hidden-mobile">Containers</p>
-    <ul class="menu-list is-hidden-mobile">
-      <li v-for="item in visibleContainers" :key="item.id" :class="item.state">
-        <router-link
-          :to="{ name: 'container', params: { id: item.id, name: item.name } }"
-          active-class="is-active"
-          :title="item.name"
+    <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"
         >
-          <div class="container is-flex is-align-items-center">
-            <div class="is-flex-grow-1 is-ellipsis">
-              {{ item.name }}
-            </div>
-            <div class="is-flex-shrink-1 column-icon">
+          <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="icon is-small"
-                @click.stop.prevent="appendActiveContainer(item)"
+                class="pin"
+                @click.stop.prevent="store.appendActiveContainer(item)"
                 v-show="!activeContainersById[item.id]"
-                title="Pin as column"
+                :title="$t('tooltip.pin-column')"
               >
-                <icon name="column"></icon>
+                <cil:columns />
               </span>
-            </div>
-          </div>
-        </router-link>
-      </li>
-    </ul>
-  </aside>
+
+              <container-health :health="item.health"></container-health>
+            </router-link>
+            <template #content>
+              <container-popup :container="item"></container-popup>
+            </template>
+          </popup>
+        </li>
+      </transition-group>
+    </transition>
+  </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>
+    <span class="sr-only">Loading...</span>
+  </div>
 </template>
 
-<script>
-import { mapActions, mapGetters, mapState } from "vuex";
+<script lang="ts" setup>
+import { Container } from "@/models/Container";
+import { sessionHost } from "@/composables/storage";
 
-import Icon from "./Icon";
+const { t } = useI18n();
 
-export default {
-  props: [],
-  name: "SideMenu",
-  components: {
-    Icon,
-  },
-  data() {
-    return {};
-  },
-  computed: {
-    ...mapGetters(["visibleContainers", "activeContainers"]),
-    activeContainersById() {
-      return this.activeContainers.reduce((map, obj) => {
-        map[obj.id] = obj;
-        return map;
-      }, {});
-    },
-  },
-  methods: {
-    ...mapActions({
-      appendActiveContainer: "APPEND_ACTIVE_CONTAINER",
+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>,
+  ),
+);
 </script>
-<style scoped lang="scss">
-aside {
-  padding: 1em;
-  height: 100vh;
-  overflow: auto;
-  position: fixed;
-  width: inherit;
-
-  .is-hidden-mobile.is-active {
-    display: block !important;
-  }
+<style scoped lang="postcss">
+.menu {
+  @apply text-[0.95rem];
 }
+.containers a {
+  @apply auto-cols-[auto_max-content];
+  .pin {
+    display: none;
 
-li.exited a {
-  color: #777;
-}
-
-.logo {
-  width: 122px;
-  height: 54px;
-  fill: var(--logo-color);
-}
-
-.menu-list li {
-  .column-icon {
-    visibility: hidden;
-  }
-
-  &:hover .column-icon {
-    visibility: visible;
     &:hover {
-      color: var(--secondary-color);
+      @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>

assets/components/SidePanel.vue

@@ -0,0 +1,44 @@
+<template>
+  <aside class="fixed h-screen w-[inherit] overflow-auto p-3" data-testid="navigation">
+    <h1>
+      <router-link :to="{ name: 'index' }">
+        <svg class="h-14 w-28 fill-secondary">
+          <use href="#logo"></use>
+        </svg>
+      </router-link>
+
+      <small class="mb-4 block text-xs font-light" v-if="hostname">
+        {{ hostname }}
+      </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:light-cog />
+      </router-link>
+      <a :href="`${base}/logout`" :title="$t('button.logout')" v-if="secured" class="btn btn-circle btn-sm">
+        <mdi:light-logout />
+      </a>
+    </div>
+    <a
+      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')"
+    >
+      <mdi:light-magnify />
+      Search
+      <key-shortcut char="k"></key-shortcut>
+    </a>
+
+    <side-menu class="mt-4"></side-menu>
+  </aside>
+</template>
+
+<script lang="ts" setup>
+const { base, secured, hostname } = config;
+</script>

assets/components/__snapshots__/LogEventSource.spec.js.snap

@@ -1,30 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<LogEventSource /> renders correctly 1`] = `
-<div>
-  <div
-    class="infinte-loader"
-  >
-    <div
-      class="spinner"
-      style="display: none;"
-    >
-      <div
-        class="bounce1"
-      />
-       
-      <div
-        class="bounce2"
-      />
-       
-      <div
-        class="bounce3"
-      />
-    </div>
-  </div>
-   
-  <ul
-    class="events medium"
-  />
-</div>
-`;

assets/components/common/DateTime.vue

@@ -0,0 +1,22 @@
+<template>
+  <div class="inline-flex gap-2">
+    <time :datetime="date.toISOString()" class="mobile-hidden">{{ dateStr }}</time>
+    <time :datetime="date.toISOString()">{{ timeStr }}</time>
+  </div>
+</template>
+
+<script lang="ts" setup>
+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(
+  () =>
+    new Intl.DateTimeFormat(undefined, { hour: "numeric", minute: "2-digit", second: "2-digit", hour12: use12Hour }),
+);
+
+const dateStr = $computed(() => dateFormatter.format(props.date));
+const timeStr = $computed(() => timeFormatter.format(props.date));
+</script>

assets/components/common/DistanceTime.vue

@@ -0,0 +1,30 @@
+<template>
+  <time :datetime="date.toISOString()" data-ci-skip>{{ text }}</time>
+</template>
+
+<script lang="ts" setup>
+import formatDistanceToNow from "date-fns/formatDistanceToNow";
+import formatDistanceToNowStrict from "date-fns/formatDistanceToNowStrict";
+
+const {
+  date,
+  strict = false,
+  suffix = true,
+} = defineProps<{
+  date: Date;
+  strict?: boolean;
+  suffix?: boolean;
+}>();
+
+const text = ref<string>();
+
+watch($$(date), updateFromNow, { immediate: true });
+
+function updateFromNow() {
+  const fn = strict ? formatDistanceToNowStrict : formatDistanceToNow;
+  text.value = fn(date, {
+    addSuffix: suffix,
+  });
+}
+useIntervalFn(updateFromNow, 30_000, { immediateCallback: true });
+</script>

assets/components/common/Dropdown.vue

@@ -0,0 +1,44 @@
+<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>
+    </summary>
+    <ul class="menu dropdown-content rounded-box z-50 w-52 bg-base p-2 shadow">
+      <slot>
+        <li v-for="item in options">
+          <a @click="modelValue = item.value">
+            <mdi-light:check class="w-4" v-if="modelValue == item.value" />
+            <div v-else class="w-4"></div>
+            {{ item.label }}
+          </a>
+        </li>
+      </slot>
+    </ul>
+  </details>
+</template>
+
+<script lang="ts" setup>
+import { vOnClickOutside } from "@vueuse/components";
+type DropdownItem = {
+  label: string;
+  value: string;
+};
+const { options = [], defaultLabel = "" } = defineProps<{ options?: DropdownItem[]; defaultLabel?: string }>();
+const { modelValue } = defineModels<{
+  modelValue: string;
+}>();
+
+const values = computed(() =>
+  options.reduce(
+    (acc, curr) => {
+      acc[curr.value] = curr.label;
+      return acc;
+    },
+    {} as Record<string, string>,
+  ),
+);
+
+const details = ref<HTMLElement | null>(null);
+const close = () => details.value?.removeAttribute("open");
+watch(modelValue, () => close());
+</script>

assets/components/common/KeyShortcut.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="inline-flex items-center">
+    <template v-if="modifiers.includes('shift')">
+      <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" />
+    </template>
+    <kbd class="uppercase">{{ char }}</kbd>
+  </div>
+</template>
+
+<script lang="ts">
+const isMac = /(Mac|iPhone|iPod|iPad)/i.test(navigator.userAgent);
+</script>
+<script lang="ts" setup>
+const { modifiers = ["meta"], char } = defineProps<{ char: string; modifiers?: ("^" | "meta" | "shift")[] }>();
+</script>

assets/components/common/MobileMenu.vue

@@ -0,0 +1,107 @@
+<template>
+  <nav class="fixed top-0 z-10 w-full border-b border-base-content/20 bg-base p-2" data-testid="navigation">
+    <div class="flex items-center">
+      <router-link :to="{ name: 'index' }">
+        <svg class="h-14 w-28 fill-secondary">
+          <use href="#logo"></use>
+        </svg>
+      </router-link>
+
+      <div class="ml-auto flex items-center gap-2">
+        <a class="btn btn-circle flex" @click="$emit('search')" :title="$t('tooltip.search')">
+          <mdi:light-magnify class="h-5 w-5" />
+        </a>
+        <label class="btn btn-circle swap swap-rotate" data-testid="hamburger">
+          <input type="checkbox" v-model="show" />
+          <mdi:close class="swap-on" />
+          <mdi:hamburger-menu class="swap-off" />
+        </label>
+      </div>
+    </div>
+
+    <transition name="fade">
+      <div v-show="show">
+        <div class="mt-4 flex items-center justify-center gap-2">
+          <dropdown
+            v-model="sessionHost"
+            :options="hosts"
+            defaultLabel="Hosts"
+            class="btn-sm"
+            v-if="config.hosts.length > 1"
+          />
+          <router-link :to="{ name: 'settings' }" class="btn btn-outline btn-sm">
+            <mdi:light-cog /> {{ $t("button.settings") }}
+          </router-link>
+          <a class="btn btn-outline btn-sm" :href="`${base}/logout`" :title="$t('button.logout')" v-if="secured">
+            <mdi:light-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">
+            <router-link
+              :to="{ name: 'container-id', params: { id: item.id } }"
+              active-class="active-primary"
+              class="truncate"
+              :title="item.name"
+            >
+              {{ item.name }}
+            </router-link>
+          </li>
+        </ul>
+      </div>
+    </transition>
+  </nav>
+</template>
+
+<script lang="ts" setup>
+const { base, secured } = config;
+import { sessionHost } from "@/composables/storage";
+const store = useContainerStore();
+const route = useRoute();
+const { visibleContainers } = storeToRefs(store);
+
+const show = ref(false);
+
+watch(route, () => {
+  show.value = false;
+});
+
+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 hosts = computed(() => config.hosts.map(({ id, name }) => ({ value: id, label: name })));
+</script>
+<style scoped lang="postcss">
+.fade-enter-active,
+.fade-leave-active {
+  @apply transition-opacity;
+}
+
+.fade-enter-active .menu,
+.fade-leave-active .menu {
+  @apply transition-transform;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  @apply opacity-0;
+}
+
+.fade-enter-from .menu,
+.fade-leave-to .menu {
+  @apply -translate-y-2;
+}
+</style>

assets/components/common/Tag.vue

@@ -0,0 +1,15 @@
+<template>
+  <div class="inline-flex items-center justify-center rounded bg-base-lighter px-2 py-[0.2em] text-sm" :size="size">
+    <slot></slot>
+  </div>
+</template>
+
+<script lang="ts" setup>
+const { size = undefined } = defineProps<{ size?: "small" | undefined }>();
+</script>
+
+<style scoped lang="postcss">
+[size="small"] {
+  @apply text-xs;
+}
+</style>

assets/components/common/TimedButton.vue

@@ -0,0 +1,39 @@
+<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">
+      <slot></slot>
+    </div>
+  </button>
+</template>
+
+<script lang="ts" setup>
+const progress = ref<HTMLElement>();
+const finished = defineEmit();
+const cancelled = defineEmit();
+let animation: Animation | undefined;
+
+onMounted(async () => {
+  animation = progress.value?.animate([{ transform: "scaleX(0)" }, { transform: "scaleX(1)" }], {
+    duration: 4000,
+    easing: "linear",
+    fill: "forwards",
+  });
+  try {
+    await animation?.finished;
+    finished();
+  } catch (e) {
+    progress.value?.animate([{ transform: "scaleX(1)" }, { transform: "scaleX(0)" }], {
+      duration: 0,
+      fill: "forwards",
+    });
+    cancelled();
+  }
+});
+
+const cancel = () => {
+  animation?.cancel();
+};
+</script>
+
+<style scoped lang="postcss"></style>

assets/components/common/Toggle.vue

@@ -0,0 +1,19 @@
+<template>
+  <label class="label inline-flex cursor-pointer gap-4 font-normal">
+    <input
+      type="checkbox"
+      class="toggle toggle-primary hover:bg-primary-focus"
+      :checked="modelValue"
+      @click="toggle()"
+    />
+    <slot />
+  </label>
+</template>
+
+<script lang="ts" setup>
+const { modelValue } = defineModels<{
+  modelValue: boolean;
+}>();
+
+const toggle = useToggle(modelValue);
+</script>

assets/composables/containerContext.ts

@@ -0,0 +1,23 @@
+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/composables/eventsource.ts

@@ -0,0 +1,176 @@
+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 { Container } 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);
+}
+
+type LogStreamConfig = {
+  stdout: boolean;
+  stderr: boolean;
+};
+
+export function useLogStream(container: Ref<Container>, streamConfig: LogStreamConfig) {
+  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 = {} as { stdout?: string; stderr?: string };
+
+    if (streamConfig.stdout) {
+      params.stdout = "1";
+    }
+    if (streamConfig.stderr) {
+      params.stderr = "1";
+    }
+    containerId = container.value.id;
+
+    console.debug(`Connecting to ${containerId} with params`, params);
+
+    es = new EventSource(
+      `${config.base}/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.onerror = (e) => {
+      console.error(`Unexpected error for eventsource container-id:${containerId}. Clearing logs and reconnecting.`);
+      clearMessages();
+    };
+    es.onmessage = (e) => {
+      if (e.data) {
+        buffer.push(parseMessage(e.data));
+        flushBuffer();
+      }
+    };
+  }
+
+  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 = {
+      from: from.toISOString(),
+      to: to.toISOString(),
+    } as { from: string; to: string; stdout?: string; stderr?: string };
+
+    if (streamConfig.stdout) {
+      params.stdout = "1";
+    }
+    if (streamConfig.stderr) {
+      params.stderr = "1";
+    }
+
+    const logs = await (
+      await fetch(
+        `${config.base}/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/composables/media.ts

@@ -0,0 +1 @@
+export const isMobile = useMediaQuery("(max-width: 770px)");

assets/composables/popup.ts

@@ -0,0 +1,13 @@
+const show = ref(false);
+const debouncedShow = debouncedRef(show, 1000);
+
+const delayedShow = computed({
+  set(newVal: boolean) {
+    show.value = newVal;
+  },
+  get() {
+    return debouncedShow.value;
+  },
+});
+
+export const globalShowPopup = () => delayedShow;

assets/composables/search.ts

@@ -0,0 +1,86 @@
+import { type Ref } from "vue";
+import { type LogEntry, type JSONObject, SimpleLogEntry, ComplexLogEntry } from "@/models/LogEntry";
+import { encodeXML } from "entities";
+
+const searchFilter = ref<string>("");
+const debouncedSearchFilter = useDebounce(searchFilter);
+const showSearch = ref(false);
+
+function matchRecord(record: Record<string, any>, regex: RegExp): boolean {
+  for (const key in record) {
+    const value = record[key];
+    if (typeof value === "string" && regex.test(value)) {
+      return true;
+    }
+    if (isObject(value) && regex.test(JSON.stringify(value))) {
+      return true;
+    }
+    if (Array.isArray(value) && matchRecord(value, regex)) {
+      return true;
+    }
+  }
+  return false;
+}
+
+export function useSearchFilter() {
+  const regex = $computed(() => {
+    const isSmartCase = debouncedSearchFilter.value === debouncedSearchFilter.value.toLowerCase();
+    return new RegExp(encodeXML(debouncedSearchFilter.value), isSmartCase ? "i" : undefined);
+  });
+
+  function filteredMessages(messages: Ref<LogEntry<string | JSONObject>[]>) {
+    return computed(() => {
+      if (debouncedSearchFilter.value && showSearch.value) {
+        try {
+          return messages.value.filter((d) => {
+            if (d instanceof SimpleLogEntry) {
+              return regex.test(d.message);
+            } else if (d instanceof ComplexLogEntry) {
+              return matchRecord(d.message, regex);
+            }
+            return false;
+          });
+        } catch (e) {
+          if (e instanceof SyntaxError) {
+            console.info(`Ignoring SyntaxError from search.`, e);
+            return messages.value;
+          }
+          throw e;
+        }
+      }
+
+      return messages.value;
+    });
+  }
+
+  function markSearch(log: { toString(): string }): string;
+  function markSearch(log: string[]): string[];
+  function markSearch(log: { toString(): string } | string[]) {
+    if (!debouncedSearchFilter.value) {
+      return log;
+    }
+    if (Array.isArray(log)) {
+      return log.map((d) => markSearch(d));
+    }
+
+    return log.toString().replace(regex, (match) => `<mark>${match}</mark>`);
+  }
+
+  function resetSearch() {
+    searchFilter.value = "";
+    showSearch.value = false;
+  }
+
+  function isSearching() {
+    return showSearch.value && searchFilter.value;
+  }
+
+  return {
+    filteredMessages,
+    searchFilter,
+    showSearch,
+    markSearch,
+    resetSearch,
+    isSearching,
+  };
+}

assets/composables/settings.ts

@@ -0,0 +1,48 @@
+import { toRefs } from "@vueuse/core";
+const DOZZLE_SETTINGS_KEY = "DOZZLE_SETTINGS";
+
+export const DEFAULT_SETTINGS: {
+  search: boolean;
+  size: "small" | "medium" | "large";
+  menuWidth: number;
+  smallerScrollbars: boolean;
+  showTimestamp: boolean;
+  showStd: boolean;
+  showAllContainers: boolean;
+  lightTheme: "auto" | "dark" | "light";
+  hourStyle: "auto" | "24" | "12";
+  softWrap: boolean;
+  collapseNav: boolean;
+  automaticRedirect: boolean;
+} = {
+  search: true,
+  size: "medium",
+  menuWidth: 15,
+  smallerScrollbars: false,
+  showTimestamp: true,
+  showStd: false,
+  showAllContainers: false,
+  lightTheme: "auto",
+  hourStyle: "auto",
+  softWrap: true,
+  collapseNav: false,
+  automaticRedirect: true,
+};
+
+export const settings = useStorage(DOZZLE_SETTINGS_KEY, DEFAULT_SETTINGS);
+settings.value = { ...DEFAULT_SETTINGS, ...settings.value };
+
+export const {
+  collapseNav,
+  softWrap,
+  hourStyle,
+  lightTheme,
+  showAllContainers,
+  showTimestamp,
+  showStd,
+  smallerScrollbars,
+  menuWidth,
+  size,
+  search,
+  automaticRedirect,
+} = toRefs(settings);

assets/composables/storage.ts

@@ -0,0 +1,15 @@
+import { Container } from "@/models/Container";
+
+const DOZZLE_HOST = "DOZZLE_HOST";
+export const sessionHost = useSessionStorage<string | null>(DOZZLE_HOST, null);
+
+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, []));
+}
+
+const DOZZLE_PINNED_CONTAINERS = "DOZZLE_PINNED_CONTAINERS";
+export const pinnedContainers = useStorage(DOZZLE_PINNED_CONTAINERS, new Set<string>());

assets/composables/title.ts

@@ -0,0 +1,9 @@
+const { hostname } = config;
+let subtitle = $ref("");
+const title = $computed(() => (subtitle ? `${subtitle} - ` : "") + "Dozzle" + (hostname ? ` @ ${hostname}` : ""));
+
+useTitle($$(title));
+
+export function setTitle(t: string) {
+  subtitle = t;
+}

assets/composables/toast.ts

@@ -0,0 +1,45 @@
+type Toast = {
+  id: string;
+  createdAt: Date;
+  title?: string;
+  message: string;
+  type: "success" | "error" | "warning" | "info";
+};
+
+type ToastOptions = {
+  expire?: number;
+  once?: boolean;
+};
+
+const toasts = ref<Toast[]>([]);
+
+const showToast = (
+  toast: Omit<Toast, "id" | "createdAt"> & { id?: string },
+  { expire = -1, once = false }: ToastOptions = { expire: -1, once: false },
+) => {
+  if (once && toasts.value.some((t) => t.id === toast.id)) {
+    return;
+  }
+  toasts.value.push({
+    id: Date.now().toString(),
+    createdAt: new Date(),
+    ...toast,
+  });
+  if (expire > 0) {
+    setTimeout(() => {
+      removeToast(toasts.value[0].id);
+    }, expire);
+  }
+};
+
+const removeToast = (id: Toast["id"]) => {
+  toasts.value = toasts.value.filter((toast) => toast.id !== id);
+};
+
+export const useToast = () => {
+  return {
+    toasts,
+    showToast,
+    removeToast,
+  };
+};

assets/composables/visible.ts

@@ -0,0 +1,18 @@
+import { ComplexLogEntry, type JSONObject, type LogEntry } from "@/models/LogEntry";
+import type { ComputedRef, Ref } from "vue";
+
+export function useVisibleFilter(visibleKeys: ComputedRef<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);
+        } else {
+          return d;
+        }
+      });
+    });
+  }
+
+  return { filteredPayload };
+}

assets/layouts/default.vue

@@ -0,0 +1,115 @@
+<template>
+  <div v-if="!authorizationNeeded">
+    <mobile-menu v-if="isMobile" @search="showFuzzySearch"></mobile-menu>
+    <splitpanes @resized="onResized($event)">
+      <pane min-size="10" :size="menuWidth" v-if="!isMobile && !collapseNav">
+        <side-panel @search="showFuzzySearch"></side-panel>
+      </pane>
+      <pane min-size="10">
+        <splitpanes>
+          <pane class="router-view min-h-screen">
+            <router-view></router-view>
+          </pane>
+          <template v-if="!isMobile">
+            <pane v-for="other in activeContainers" :key="other.id">
+              <log-container
+                :id="other.id"
+                show-title
+                scrollable
+                closable
+                @close="containerStore.removeActiveContainer(other)"
+              ></log-container>
+            </pane>
+          </template>
+        </splitpanes>
+      </pane>
+    </splitpanes>
+    <label
+      class="btn btn-circle swap swap-rotate fixed bottom-8 left-4"
+      :class="{ '!-left-3': collapseNav }"
+      v-if="!isMobile"
+    >
+      <input type="checkbox" v-model="collapseNav" />
+      <mdi:light-chevron-right class="swap-on text-secondary" />
+      <mdi:light-chevron-left class="swap-off" />
+    </label>
+  </div>
+  <dialog ref="modal" class="modal items-start bg-white/20 backdrop:backdrop-blur-sm" @close="open = false">
+    <div class="modal-box max-w-2xl bg-transparent pt-20 shadow-none">
+      <FuzzySearchModal @close="open = false" v-if="open" />
+    </div>
+    <form method="dialog" class="modal-backdrop">
+      <button>close</button>
+    </form>
+  </dialog>
+  <div class="toast toast-end whitespace-normal">
+    <div
+      class="alert max-w-xl"
+      v-for="toast in toasts"
+      :key="toast.id"
+      :class="{ 'alert-error': toast.type === 'error', 'alert-info': toast.type === 'info' }"
+    >
+      <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'" />
+      <div>
+        <h3 class="text-lg font-bold" v-if="toast.title">{{ toast.title }}</h3>
+        {{ toast.message }}
+      </div>
+      <div>
+        <button class="btn btn-circle btn-xs" @click="removeToast(toast.id)"><mdi:close /></button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+// @ts-ignore - splitpanes types are not available
+import { Splitpanes, Pane } from "splitpanes";
+import { collapseNav } from "@/composables/settings";
+const { authorizationNeeded } = config;
+
+const containerStore = useContainerStore();
+const { activeContainers } = storeToRefs(containerStore);
+
+const { toasts, removeToast } = useToast();
+
+const modal = ref<HTMLDialogElement>();
+const open = ref(false);
+
+watch(open, () => {
+  if (open.value) {
+    modal.value?.showModal();
+  } else {
+    modal.value?.close();
+  }
+});
+
+onKeyStroke("k", (e) => {
+  if ((e.ctrlKey || e.metaKey) && !e.shiftKey) {
+    showFuzzySearch();
+    e.preventDefault();
+  }
+});
+
+function showFuzzySearch() {
+  open.value = true;
+}
+
+function onResized(e: any) {
+  if (e.length == 2) {
+    menuWidth.value = e[0].size;
+  }
+}
+</script>
+
+<style scoped lang="postcss">
+:deep(.splitpanes--vertical > .splitpanes__splitter) {
+  @apply min-w-[3px] bg-base-lighter hover:bg-secondary;
+}
+
+@media screen and (max-width: 768px) {
+  .router-view {
+    padding-top: 75px;
+  }
+}
+</style>

assets/layouts/splash.vue

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

assets/main.css

@@ -0,0 +1,121 @@
+@import "splitpanes/dist/splitpanes.css";
+
+@define-mixin light {
+  --base-lighter-color: 0 0% 100%;
+  --base-color: 0 0% 97%;
+  --base-darker-color: 0 0% 90%;
+  --base-content-color: 0 0% 21%;
+  --primary-color: 171 100% 41%;
+  --primary-focus-color: 171 100% 31%;
+  --secondary-color: 34 95% 53%;
+  --secondary-focus-color: 34 95% 43%;
+}
+
+@define-mixin dark {
+  --base-lighter-color: 0 0% 14%;
+  --base-color: 0 0% 7%;
+  --base-darker-color: 0 0% 4%;
+  --base-content-color: 0 0% 86%;
+  --primary-color: 171 100% 41%;
+  --primary-focus-color: 171 100% 31%;
+  --secondary-color: 44 100% 77%;
+  --secondary-focus-color: 44 100% 67%;
+}
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --p: var(--primary-color);
+    --pf: var(--primary-focus-color);
+    --pc: 0 0% 100%;
+    --s: var(--secondary-color);
+    --sf: var(--secondary-focus-color);
+    --sc: 0 0% 4%;
+    --b1: var(--base-lighter-color);
+    --b2: var(--base-color);
+    --b3: var(--base-darker-color);
+    --bc: var(--base-content-color);
+    --in: 207 90% 54%;
+    --inc: 207 90% 94%;
+    --er: 4 90% 58%;
+    --erc: 4 90% 98%;
+  }
+  html[data-theme="dark"] {
+    @mixin dark;
+  }
+  @media (prefers-color-scheme: dark) {
+    html {
+      @mixin dark;
+    }
+  }
+  html[data-theme="light"] {
+    @mixin light;
+  }
+  @media (prefers-color-scheme: light) {
+    html {
+      @mixin light;
+    }
+  }
+  @media screen and (max-device-width: 480px) {
+    body {
+      -webkit-text-size-adjust: 100%;
+    }
+  }
+
+  h1 {
+    @apply text-3xl;
+  }
+
+  h2 {
+    @apply text-2xl;
+  }
+
+  h3 {
+    @apply text-lg;
+  }
+
+  mark {
+    @apply inline-block rounded-sm bg-secondary;
+    animation: pops 200ms ease-out;
+  }
+
+  @keyframes pops {
+    0% {
+      transform: scale(1.5);
+    }
+    100% {
+      transform: scale(1.05);
+    }
+  }
+}
+
+@layer components {
+  .input {
+    @apply focus:outline-none;
+  }
+
+  .btn {
+    @apply font-normal normal-case;
+  }
+
+  .btn:not(.btn-primary):not(.btn-secondary) {
+    @apply hover:bg-base-lighter;
+  }
+}
+
+@layer utilities {
+  @media (max-width: 768px) {
+    .mobile-hidden {
+      display: none;
+    }
+  }
+
+  .active-primary {
+    --n: var(--p);
+    --nc: var(--pc);
+    @apply active;
+  }
+}

assets/main.js

@@ -1,67 +0,0 @@
-import Vue from "vue";
-import VueRouter from "vue-router";
-import Meta from "vue-meta";
-import Switch from "buefy/dist/esm/switch";
-import Radio from "buefy/dist/esm/radio";
-import Field from "buefy/dist/esm/field";
-import Modal from "buefy/dist/esm/modal";
-import Autocomplete from "buefy/dist/esm/autocomplete";
-
-import store from "./store";
-import config from "./store/config";
-import App from "./App.vue";
-import { Container, Settings, Index, Show, ContainerNotFound, PageNotFound } from "./pages";
-
-Vue.use(VueRouter);
-Vue.use(Meta);
-Vue.use(Switch);
-Vue.use(Radio);
-Vue.use(Field);
-Vue.use(Modal);
-Vue.use(Autocomplete);
-
-const routes = [
-  {
-    path: "/",
-    component: Index,
-    name: "default",
-  },
-  {
-    path: "/container/:id",
-    component: Container,
-    name: "container",
-    props: true,
-  },
-  {
-    path: "/container/*",
-    component: ContainerNotFound,
-    name: "container-not-found",
-  },
-  {
-    path: "/settings",
-    component: Settings,
-    name: "settings",
-  },
-  {
-    path: "/show",
-    component: Show,
-    name: "show",
-  },
-  {
-    path: "/*",
-    component: PageNotFound,
-    name: "page-not-found",
-  },
-];
-
-const router = new VueRouter({
-  mode: "history",
-  base: config.base + "/",
-  routes,
-});
-
-new Vue({
-  router,
-  store,
-  render: (h) => h(App),
-}).$mount("#app");

assets/main.ts

@@ -0,0 +1,11 @@
+// import "./styles.scss";
+import "./main.css";
+import { createApp, App as VueApp } from "vue";
+import App from "./App.vue";
+
+const app = createApp(App);
+Object.values(import.meta.glob<{ install: (app: VueApp) => void }>("./modules/*.ts", { eager: true })).forEach(
+  (i) => i.install?.(app),
+);
+
+app.mount("#app");

assets/models/Container.spec.ts

@@ -0,0 +1,25 @@
+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

@@ -0,0 +1,78 @@
+import type { ContainerHealth, ContainerStat, ContainerState } from "@/types/Container";
+import type { UseThrottledRefHistoryReturn } from "@vueuse/core";
+import { useExponentialMovingAverage } from "@/utils";
+import { Ref } from "vue";
+
+type Stat = Omit<ContainerStat, "id">;
+
+const SWARM_ID_REGEX = /(\.[a-z0-9]{25})+$/i;
+
+const hosts = computed(() =>
+  config.hosts.reduce(
+    (acc, item) => {
+      acc[item.id] = item;
+      return acc;
+    },
+    {} as Record<string, { name: string; id: string }>,
+  ),
+);
+
+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 movingAverageStat: Ref<Stat>;
+
+  constructor(
+    public readonly id: string,
+    public readonly created: Date,
+    public readonly image: string,
+    public readonly name: string,
+    public readonly command: string,
+    public readonly host: string,
+    public status: string,
+    public state: ContainerState,
+    public health?: ContainerHealth,
+  ) {
+    this._stat = ref({ cpu: 0, memory: 0, memoryUsage: 0 });
+    this.throttledStatHistory = useThrottledRefHistory(this._stat, { capacity: 300, deep: true, throttle: 1000 });
+    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;
+    }
+  }
+
+  get statHistory() {
+    return unref(this.throttledStatHistory.history);
+  }
+
+  get movingAverage() {
+    return unref(this.movingAverageStat);
+  }
+
+  get stat() {
+    return unref(this._stat);
+  }
+
+  get hostLabel() {
+    return hosts.value[this.host]?.name;
+  }
+
+  get storageKey() {
+    return `${stripVersion(this.image)}:${this.command}`;
+  }
+
+  public updateStat(stat: Stat) {
+    if (isRef(this._stat)) {
+      this._stat.value = stat;
+    } else {
+      // @ts-ignore
+      this._stat = stat;
+    }
+  }
+}

assets/models/LogEntry.ts

@@ -0,0 +1,165 @@
+import { Component, ComputedRef, Ref } from "vue";
+import { flattenJSON, getDeep } from "@/utils";
+import ComplexLogItem from "@/components/LogViewer/ComplexLogItem.vue";
+import SimpleLogItem from "@/components/LogViewer/SimpleLogItem.vue";
+import DockerEventLogItem from "@/components/LogViewer/DockerEventLogItem.vue";
+import SkippedEntriesLogItem from "@/components/LogViewer/SkippedEntriesLogItem.vue";
+
+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 interface LogEvent {
+  readonly m: string | JSONObject;
+  readonly ts: number;
+  readonly id: number;
+  readonly l: string;
+  readonly p: Position;
+  readonly s: "stdout" | "stderr" | "unknown";
+}
+
+export abstract class LogEntry<T extends string | JSONObject> {
+  protected readonly _message: T;
+  constructor(
+    message: T,
+    public readonly id: number,
+    public readonly date: Date,
+    public readonly std: Std,
+    public readonly level?: string,
+  ) {
+    this._message = message;
+  }
+
+  public get message(): T {
+    return this._message;
+  }
+
+  abstract getComponent(): Component;
+}
+
+export class SimpleLogEntry extends LogEntry<string> {
+  constructor(
+    message: string,
+    id: number,
+    date: Date,
+    public readonly level: string,
+    public readonly position: Position,
+    public readonly std: Std,
+  ) {
+    super(message, id, date, std, level);
+  }
+  getComponent(): Component {
+    return SimpleLogItem;
+  }
+}
+
+export class ComplexLogEntry extends LogEntry<JSONObject> {
+  private readonly filteredMessage: ComputedRef<JSONObject>;
+
+  constructor(
+    message: JSONObject,
+    id: number,
+    date: Date,
+    public readonly level: string,
+    public readonly std: Std,
+    visibleKeys?: Ref<string[][]>,
+  ) {
+    super(message, id, date, std, level);
+    if (visibleKeys) {
+      this.filteredMessage = computed(() => {
+        if (!visibleKeys.value.length) {
+          return flattenJSON(message);
+        } else {
+          return visibleKeys.value.reduce((acc, attr) => ({ ...acc, [attr.join(".")]: getDeep(message, attr) }), {});
+        }
+      });
+    } else {
+      this.filteredMessage = computed(() => flattenJSON(message));
+    }
+  }
+  getComponent(): Component {
+    return ComplexLogItem;
+  }
+
+  public get message(): JSONObject {
+    return this.filteredMessage.value;
+  }
+
+  public get unfilteredMessage(): JSONObject {
+    return this._message;
+  }
+
+  static fromLogEvent(event: ComplexLogEntry, visibleKeys: Ref<string[][]>): ComplexLogEntry {
+    return new ComplexLogEntry(event._message, event.id, event.date, event.level, event.std, visibleKeys);
+  }
+}
+
+export class DockerEventLogEntry extends LogEntry<string> {
+  constructor(
+    message: string,
+    date: Date,
+    public readonly event: "container-stopped" | "container-started",
+  ) {
+    super(message, date.getTime(), date, "stderr", "info");
+  }
+  getComponent(): Component {
+    return DockerEventLogItem;
+  }
+}
+
+export class SkippedLogsEntry extends LogEntry<string> {
+  private _totalSkipped = 0;
+  private lastSkipped: LogEntry<string | JSONObject>;
+
+  constructor(
+    date: Date,
+    totalSkipped: number,
+    public readonly firstSkipped: LogEntry<string | JSONObject>,
+    lastSkipped: LogEntry<string | JSONObject>,
+  ) {
+    super("", date.getTime(), date, "stderr", "info");
+    this._totalSkipped = totalSkipped;
+    this.lastSkipped = lastSkipped;
+  }
+  getComponent(): Component {
+    return SkippedEntriesLogItem;
+  }
+
+  public get message(): string {
+    return `Skipped ${this.totalSkipped} entries`;
+  }
+
+  public addSkippedEntries(totalSkipped: number, lastItem: LogEntry<string | JSONObject>) {
+    this._totalSkipped += totalSkipped;
+    this.lastSkipped = lastItem;
+  }
+
+  public get totalSkipped(): number {
+    return this._totalSkipped;
+  }
+
+  public get lastSkippedItem(): LogEntry<string | JSONObject> {
+    return this.lastSkipped;
+  }
+}
+
+export function asLogEntry(event: LogEvent): LogEntry<string | JSONObject> {
+  if (typeof event.m === "string") {
+    return new SimpleLogEntry(
+      event.m,
+      event.id,
+      new Date(event.ts),
+      event.l,
+      event.p,
+      event.s === "unknown" ? "stderr" : event.s ?? "stderr",
+    );
+  } else {
+    return new ComplexLogEntry(
+      event.m,
+      event.id,
+      new Date(event.ts),
+      event.l,
+      event.s === "unknown" ? "stderr" : event.s ?? "stderr",
+    );
+  }
+}

assets/modules/i18n.ts

@@ -0,0 +1,20 @@
+import { type App } from "vue";
+import { createI18n } from "vue-i18n";
+
+const messages = Object.fromEntries(
+  Object.entries(import.meta.glob<{ default: any }>("../../locales/*.y(a)?ml", { eager: true })).map(([key, value]) => {
+    const yaml = key.endsWith(".yaml");
+    return [key.slice(14, yaml ? -5 : -4), value.default];
+  }),
+);
+const i18n = createI18n({
+  legacy: false,
+  locale: navigator.language.slice(0, 2),
+  fallbackLocale: "en",
+  messages,
+});
+export const install = (app: App) => {
+  app.use(i18n);
+};
+
+export default i18n;