Release 4.1.8

* Removes fuzzysearch and uses fuse.js

* Fix search bug

* Adds locale

* Fixes more locale

* Fixes search to not update with stats

* Fixes sort order

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

.editorconfig

@@ -13,5 +13,8 @@ max_line_length = 120
 indent_style = tab
 indent_size = 4
 
+[Makefile]
+indent_style = tab
+
 [package.json]
 indent_size = 1

.github/.kodiak.toml

@@ -0,0 +1,2 @@
+version = 1
+merge.notify_on_conflict = false

.github/dependabot.yml

@@ -0,0 +1,47 @@
+version: 2
+updates:
+  - package-ecosystem: "github-actions"
+    directory: "/"
+    labels:
+      - "dependencies"
+      - "automerge"
+    schedule:
+      interval: "daily"
+  - package-ecosystem: "docker"
+    directory: "/"
+    labels:
+      - "dependencies"
+      - "automerge"
+    schedule:
+      interval: "daily"
+  - package-ecosystem: gomod
+    directory: "/"
+    labels:
+      - "gomod"
+      - "dependencies"
+      - "automerge"
+    schedule:
+      interval: daily
+  - package-ecosystem: npm
+    directory: "/"
+    labels:
+      - "npm"
+      - "dependencies"
+      - "automerge"
+    schedule:
+      interval: daily
+  - package-ecosystem: npm
+    directory: "/e2e"
+    labels:
+      - "npm"
+      - "dependencies"
+      - "automerge"
+    schedule:
+      interval: daily
+  - package-ecosystem: "docker"
+    directory: "/e2e"
+    labels:
+      - "dependencies"
+      - "automerge"
+    schedule:
+      interval: "daily"

.github/workflows/deploy.yml

@@ -9,52 +9,84 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout code
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
       - name: Install Node
-        uses: actions/setup-node@v1
-      - name: Install depdencies
-        run: yarn
+        uses: actions/setup-node@v3
+      - name: Install pnpm
+        uses: pnpm/action-setup@v2.2.2
+        with:
+          version: 6.20.1
+      - name: Install dependencies
+        run: pnpm install
       - name: Run Tests
-        run: yarn test
+        run: pnpm run test
   go-test:
     name: Go Tests
     runs-on: ubuntu-latest
     steps:
       - name: Install Go
-        uses: actions/setup-go@v1
+        uses: actions/setup-go@v3
         with:
-          go-version: 1.14.x
+          go-version: 1.18.x
       - name: Checkout code
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
       - name: Run Go Tests with Coverage
-        run: go test -cover ./...
+        run: make test SKIP_ASSET=1
   int-test:
-    needs: [go-test, npm-test]
     name: Integration Tests
     runs-on: ubuntu-latest
     steps:
       - name: Checkout code
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
       - name: Build images
-        run: docker-compose -f integration/docker-compose.test.yml build
+        run: COMPOSE_DOCKER_CLI_BUILD=1 DOCKER_BUILDKIT=1 docker-compose -f e2e/docker-compose.yml build
       - name: Run tests
-        run: docker-compose -f integration/docker-compose.test.yml run integration
+        run: COMPOSE_DOCKER_CLI_BUILD=1 DOCKER_BUILDKIT=1 docker-compose -f e2e/docker-compose.yml up --build --force-recreate --exit-code-from cypress
   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@v4
         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@v2.0.0
+      - name: Login to DockerHub
+        uses: docker/login-action@v2.0.0
+        with:
+          username: ${{ secrets.DOCKER_USERNAME }}
+          password: ${{ secrets.DOCKER_PASSWORD }}
+      - name: Build and push
+        uses: docker/build-push-action@v3.1.1
+        with:
+          push: true
+          platforms: linux/amd64,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=registry,ref=amir20/dozzle:latest
+          cache-to: type=inline
+  git-release:
+    needs: [buildx]
+    name: Github Release
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+      - name: Install Node
+        uses: actions/setup-node@v3
+      - name: Install pnpm
+        uses: pnpm/action-setup@v2.2.2
+        with:
+          version: 6.20.1
+      - name: Install dependencies
+        run: pnpm install
+      - name: Release to Github
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        run: pnpm run release -- --github.release --no-increment --no-git --ci

.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_name == 'push' || github.event.pull_request.head.repo.full_name == 'amir20/dozzle' }}
+    steps:
+      - name: Docker meta
+        id: meta
+        uses: docker/metadata-action@v4
+        with:
+          images: amir20/dozzle
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v2.0.0
+      - name: Login to DockerHub
+        uses: docker/login-action@v2.0.0
+        with:
+          username: ${{ secrets.DOCKER_USERNAME }}
+          password: ${{ secrets.DOCKER_PASSWORD }}
+      - name: Build and push
+        uses: docker/build-push-action@v3.1.1
+        with:
+          push: true
+          platforms: linux/amd64,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=registry,ref=amir20/dozzle:master
+          cache-to: type=inline

.github/workflows/test.yml

@@ -1,4 +1,10 @@
-on: push
+on:
+  push:
+    branches:
+      - master
+  pull_request:
+    branches:
+      - master
 name: Test
 jobs:
   npm-test:
@@ -6,32 +12,59 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout code
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
       - name: Install Node
-        uses: actions/setup-node@v1
-      - name: Install depdencies
-        run: yarn
+        uses: actions/setup-node@v3
+      - name: Install pnpm
+        uses: pnpm/action-setup@v2.2.2
+        with:
+          version: 6.20.1
+      - name: Install dependencies
+        run: pnpm install
       - name: Run Tests
-        run: yarn test
+        run: pnpm run test
   go-test:
     name: Go Tests
     runs-on: ubuntu-latest
     steps:
       - name: Install Go
-        uses: actions/setup-go@v1
+        uses: actions/setup-go@v3
         with:
-          go-version: 1.14.x
+          go-version: 1.18.x
       - name: Checkout code
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
       - name: Run Go Tests with Coverage
-        run: go test -cover ./...
+        run: make test SKIP_ASSET=1
   int-test:
     name: Integration Tests
     runs-on: ubuntu-latest
     steps:
       - name: Checkout code
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
+        with:
+          fetch-depth: 2
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v2.0.0
+      - name: Login to DockerHub
+        uses: docker/login-action@v2.0.0
+        with:
+          username: ${{ secrets.DOCKER_USERNAME }}
+          password: ${{ secrets.DOCKER_PASSWORD }}
       - name: Build images
-        run: docker-compose -f integration/docker-compose.test.yml build  
+        run: COMPOSE_DOCKER_CLI_BUILD=1 DOCKER_BUILDKIT=1 docker-compose -f e2e/docker-compose.yml build --build-arg BUILDKIT_INLINE_CACHE=1
+      - name: Push images
+        run: COMPOSE_DOCKER_CLI_BUILD=1 DOCKER_BUILDKIT=1 docker-compose -f e2e/docker-compose.yml push
+      - name: Set commit message for push
+        if: github.event_name == 'push'
+        run: |
+          echo "GIT_LOG_MESSAGE<<EOF" >> $GITHUB_ENV
+          git log -1 --pretty=%B ${GITHUB_SHA} >> $GITHUB_ENV
+          echo 'EOF' >> $GITHUB_ENV
+      - name: Set commit message for pull request
+        if: github.event_name == 'pull_request'
+        run: |
+          echo "GIT_LOG_MESSAGE<<EOF" >> $GITHUB_ENV
+          git log -1 --pretty=%B ${{github.event.pull_request.head.sha}} >> $GITHUB_ENV
+          echo 'EOF' >> $GITHUB_ENV
       - name: Run tests
-        run: docker-compose -f integration/docker-compose.test.yml run integration
+        run: COMPOSE_DOCKER_CLI_BUILD=1 DOCKER_BUILDKIT=1 docker-compose -f e2e/docker-compose.yml up --build --force-recreate --exit-code-from cypress

.gitignore

@@ -3,6 +3,7 @@ dist
 node_modules
 .cache
 static
-a_main-packr.go
 dozzle
-gin-bin
+coverage
+.pnpm-debug.log
+.vscode

.husky/.gitignore

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

.husky/pre-commit

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

.npmrc

@@ -0,0 +1 @@
+shamefully-hoist=true

.reflex

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

Dockerfile

@@ -1,57 +1,62 @@
 # Build assets
-FROM node:current-alpine as node
+FROM --platform=$BUILDPLATFORM node:18-alpine as node
+
+RUN npm install -g pnpm
 
-RUN apk add --no-cache git openssh python make g++ util-linux
 
 WORKDIR /build
 
-# Install dependencies
-COPY package*.json yarn.lock ./
-RUN yarn install --network-timeout 1000000
+# Install dependencies from lock file
+COPY pnpm-lock.yaml ./
+RUN pnpm fetch --prod
 
-# Copy config files
-COPY .* webpack*.js ./
+# Copy package.json and install dependencies
+COPY package.json ./
+RUN pnpm install -r --offline --prod --ignore-scripts
 
-# Copy assets to build
+# Copy assets and translations to build
+COPY .* vite.config.ts index.html ./
 COPY assets ./assets
+COPY locales ./locales
 
-# Do the build
-RUN yarn build
+# Build assets
+RUN pnpm build
 
-FROM golang:1.14-alpine AS builder
+FROM --platform=$BUILDPLATFORM golang:1.19.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
 
-# Needed for assets
-RUN go get -u github.com/gobuffalo/packr/packr
-
 # Copy go mod files
 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 . .
-
-# Compile static files
-RUN packr -z
+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
 
+EXPOSE 8080
+
 ENTRYPOINT ["/dozzle"]

Makefile

@@ -1,6 +1,34 @@
-TAG := $(shell git describe --tags)
-PLATFROMS := linux/amd64,linux/arm/v7,linux/arm64/v8
+.PHONY: clean
+clean:
+	@rm -rf dist
+	@go clean -i
 
-.PHONY: publish
-publish:
-	docker buildx build --build-arg TAG=$(TAG) --platform $(PLATFROMS) -t amir20/dozzle:latest -t amir20/dozzle:$(TAG) --push .
+.PHONY: dist
+dist:
+	@pnpm build
+
+.PHONY: fake_assets
+fake_assets:
+	@echo 'Skipping asset build'
+	@mkdir -p dist
+	@echo "assets build was skipped" > dist/index.html
+
+.PHONY: test
+test: fake_assets
+	go test -cover ./...
+
+.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 e2e/docker-compose.yml up --build --force-recreate --exit-code-from cypress

README.md

@@ -1,32 +1,41 @@
-[![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.
-
-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.
-
-Dozzle doesn't cost any money. Dozzle aims to stay simple, small and free.
+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.
 
 ![Image](https://github.com/amir20/dozzle/blob/master/.github/demo.gif?raw=true)
 
-## Getting dozzle
+[![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)
+
+## Features
+
+- 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
 
@@ -49,9 +58,33 @@ dozzle will be available at [http://localhost:8888/](http://localhost:8888/). Yo
         ports:
           - 9999:8080
 
+
+### Enabling 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 +94,51 @@ 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`.
 
 #### 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`         | `/`     |
+| `--level`        | `DOZZLE_LEVEL`        | `info`  |
+| n/a              | `DOCKER_API_VERSION`  | not set |
+| `--tailSize`     | `DOZZLE_TAILSIZE`     | `300`   |
+| `--filter`       | `DOZZLE_FILTER`       | `""`    |
+| `--username`     | `DOZZLE_USERNAME`     | `""`    |
+| `--password`     | `DOZZLE_PASSWORD`     | `""`    |
+| `--no-analytics` | `DOZZLE_NO_ANALYTICS` | false   |
 
 ## 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 sever 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 send the `X-Accel-Buffering: no` header which should stop reverse proxies buffering. However, some proxies may ignore this header. In those case, 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,20 +157,29 @@ 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.
- - Allow fonts from `fonts.gstatic.com` and styles from `fonts.googleapis.com`
- - 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>
 
 ## License
 
@@ -134,10 +189,8 @@ Dozzle follows the [12-factor](https://12factor.net/) model. Configurations can
 
 To Build and test locally:
 
-1. Install NodeJs.
-2. Install Go.
-3. Globally install [packr utility](https://github.com/gobuffalo/packr) with `go get -u github.com/gobuffalo/packr/packr` outside of dozzle directory.
-4. Install [reflex](https://github.com/cespare/reflex) with `get -u github.com/cespare/reflex` outside of dozzle.
-5. Install node modules with `npm install`.
-6. Do `npm start`
-
+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`

__snapshots__/dozzle.snapshot

@@ -1,114 +0,0 @@
-/* snapshot: Test_createRoutes_foobar */
-HTTP/1.1 200 OK
-Connection: close
-Content-Security-Policy: default-src 'none'; script-src 'self'; style-src 'self' 'unsafe-inline' fonts.googleapis.com; img-src 'self'; manifest-src 'self'; font-src fonts.gstatic.com; connect-src 'self' api.github.com; require-trusted-types-for 'script'
-Content-Type: text/plain; charset=utf-8
-
-foo page
-
-/* snapshot: Test_createRoutes_index */
-HTTP/1.1 200 OK
-Connection: close
-Content-Security-Policy: default-src 'none'; script-src 'self'; style-src 'self' 'unsafe-inline' fonts.googleapis.com; img-src 'self'; manifest-src 'self'; font-src fonts.gstatic.com; connect-src 'self' api.github.com; require-trusted-types-for 'script'
-Content-Type: text/plain; charset=utf-8
-
-index page
-
-/* snapshot: Test_createRoutes_redirect */
-HTTP/1.1 301 Moved Permanently
-Connection: close
-Content-Security-Policy: default-src 'none'; script-src 'self'; style-src 'self' 'unsafe-inline' fonts.googleapis.com; img-src 'self'; manifest-src 'self'; font-src fonts.gstatic.com; connect-src 'self' api.github.com; require-trusted-types-for 'script'
-Content-Type: text/html; charset=utf-8
-Location: /foobar/
-
-<a href="/foobar/">Moved Permanently</a>.
-
-/* snapshot: Test_createRoutes_version */
-HTTP/1.1 200 OK
-Connection: close
-Content-Security-Policy: default-src 'none'; script-src 'self'; style-src 'self' 'unsafe-inline' fonts.googleapis.com; img-src 'self'; manifest-src 'self'; font-src fonts.gstatic.com; connect-src 'self' api.github.com; require-trusted-types-for 'script'
-Content-Type: text/plain; charset=utf-8
-
-dev
-
-/* snapshot: Test_handler_listContainers_happy */
-HTTP/1.1 200 OK
-Connection: close
-Content-Type: text/plain; charset=utf-8
-
-[{"id":"1234567890","names":null,"name":"test","image":"image","imageId":"image_id","command":"command","created":0,"state":"state","status":"status"}]
-
-/* snapshot: Test_handler_streamEvents_error */
-HTTP/1.1 200 OK
-Connection: close
-Cache-Control: no-cache
-Connection: keep-alive
-Content-Type: text/event-stream
-X-Accel-Buffering: no
-
-/* snapshot: Test_handler_streamEvents_error_request */
-HTTP/1.1 200 OK
-Connection: close
-Cache-Control: no-cache
-Connection: keep-alive
-Content-Type: text/event-stream
-X-Accel-Buffering: no
-
-/* snapshot: Test_handler_streamEvents_happy */
-HTTP/1.1 200 OK
-Connection: close
-Cache-Control: no-cache
-Connection: keep-alive
-Content-Type: text/event-stream
-X-Accel-Buffering: no
-
-event: containers-changed
-data: start
-
-/* snapshot: Test_handler_streamLogs_error_finding_container */
-HTTP/1.1 404 Not Found
-Connection: close
-Content-Type: text/plain; charset=utf-8
-X-Content-Type-Options: nosniff
-
-error finding container
-
-/* snapshot: Test_handler_streamLogs_error_reading */
-HTTP/1.1 200 OK
-Connection: close
-Cache-Control: no-cache
-Connection: keep-alive
-Content-Type: text/event-stream
-X-Accel-Buffering: no
-
-/* snapshot: Test_handler_streamLogs_happy */
-HTTP/1.1 200 OK
-Connection: close
-Cache-Control: no-cache
-Connection: keep-alive
-Content-Type: text/event-stream
-X-Accel-Buffering: no
-
-data: INFO Testing logs...
-
-/* snapshot: Test_handler_streamLogs_happy_container_stopped */
-HTTP/1.1 200 OK
-Connection: close
-Cache-Control: no-cache
-Connection: keep-alive
-Content-Type: text/event-stream
-X-Accel-Buffering: no
-
-event: container-stopped
-data: end of stream
-
-/* snapshot: Test_handler_streamLogs_happy_with_id */
-HTTP/1.1 200 OK
-Connection: close
-Cache-Control: no-cache
-Connection: keep-alive
-Content-Type: text/event-stream
-X-Accel-Buffering: no
-
-data: 2020-05-13T18:55:37.772853839Z INFO Testing logs...
-id: 2020-05-13T18:55:37.772853839Z

analytics/ga.go

@@ -0,0 +1,55 @@
+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,
+			},
+		},
+	}
+
+	jsonValue, err := json.Marshal(postBody)
+	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,11 @@
+package analytics
+
+type StartEvent struct {
+	ClientId      string `json:"-"`
+	Version       string `json:"version"`
+	FilterLength  int    `json:"filterLength"`
+	CustomAddress bool   `json:"customAddress"`
+	CustomBase    bool   `json:"customBase"`
+	TailSize      int    `json:"tailSize"`
+	Protected     bool   `json:"protected"`
+}

assets/App.spec.js

@@ -1,53 +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 },
-    };
-
-    const getters = {
-      visibleContainers() {
-        return [
-          { id: "abc", name: "Test 1" },
-          { id: "xyz", name: "Test 2" },
-        ];
-      },
-    };
-
-    const actions = {
-      FETCH_CONTAINERS: () => Promise.resolve(),
-    };
-
-    store = new Vuex.Store({
-      state,
-      getters,
-      actions,
-    });
-  });
-
-  test("has right title", async () => {
-    const wrapper = shallowMount(App, { stubs, store, localVue });
-    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,151 +1,26 @@
 <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></side-menu>
-      </pane>
-      <pane min-size="10">
-        <splitpanes>
-          <pane class="has-min-height">
-            <search></search>
-            <router-view></router-view>
-          </pane>
-          <pane v-for="other in activeContainers" :key="other.id" v-if="!isMobile">
-            <scrollable-view>
-              <template v-slot:header>
-                <container-title :value="other.name" closable @close="removeActiveContainer(other)"></container-title>
-              </template>
-              <log-viewer-with-source :id="other.id"></log-viewer-with-source>
-            </scrollable-view>
-          </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 LogViewerWithSource from "./components/LogViewerWithSource";
-import ScrollableView from "./components/ScrollableView";
-import SideMenu from "./components/SideMenu";
-import MobileMenu from "./components/MobileMenu";
-import Search from "./components/Search";
-import ContainerTitle from "./components/ContainerTitle";
-import Icon from "./components/Icon";
-
-export default {
-  name: "App",
-  components: {
-    Icon,
-    LogViewerWithSource,
-    SideMenu,
-    MobileMenu,
-    ScrollableView,
-    Splitpanes,
-    Pane,
-    Search,
-    ContainerTitle,
-  },
-  data() {
-    return {
-      title: "",
-      collapseNav: false,
-    };
-  },
-  metaInfo() {
-    return {
-      title: this.title,
-      titleTemplate: "%s - Dozzle",
-    };
-  },
-  async created() {
-    await this.fetchContainerList();
-    this.title = `${this.visibleContainers.length} containers`;
-  },
-  mounted() {
-    if (this.hasSmallerScrollbars) {
-      document.documentElement.classList.add("has-custom-scrollbars");
-    }
-    this.menuWidth = this.settings.menuWidth;
-  },
-  watch: {
-    hasSmallerScrollbars(newValue, oldValue) {
-      if (newValue) {
-        document.documentElement.classList.add("has-custom-scrollbars");
-      } else {
-        document.documentElement.classList.remove("has-custom-scrollbars");
-      }
-    },
-  },
-  computed: {
-    ...mapState(["activeContainers", "isMobile", "settings"]),
-    ...mapGetters(["visibleContainers"]),
-    hasSmallerScrollbars() {
-      return this.settings.smallerScrollbars;
-    },
-  },
-  methods: {
-    ...mapActions({
-      fetchContainerList: "FETCH_CONTAINERS",
-      removeActiveContainer: "REMOVE_ACTIVE_CONTAINER",
-      updateSetting: "UPDATE_SETTING",
-    }),
-    onResized(e) {
-      if (e.length == 2) {
-        const menuWidth = e[0].size;
-        this.updateSetting({ menuWidth });
-      }
-    },
-  },
-};
+  switch (lightTheme.value) {
+    case "dark":
+      document.documentElement.setAttribute("data-theme", "dark");
+      break;
+    case "light":
+      document.documentElement.setAttribute("data-theme", "light");
+      break;
+    default:
+      document.documentElement.removeAttribute("data-theme");
+  }
+});
 </script>
 
-<style scoped lang="scss">
-::v-deep .splitpanes--vertical > .splitpanes__splitter {
-  min-width: 3px;
-  background: #666;
-  &:hover {
-    background: rgb(255, 221, 87);
-  }
-}
-
-.button.has-no-border {
-  border-color: transparent !important;
-}
-
-.has-min-height {
-  min-height: 100vh;
-}
-
-#hide-nav {
-  position: fixed;
-  left: 10px;
-  bottom: 10px;
-  &.collapsed {
-    left: -40px;
-    width: 60px;
-    padding-left: 40px;
-    background: rgba(0, 0, 0, 0.95);
-
-    &:hover {
-      left: -25px;
-    }
-  }
-}
-</style>
+<style scoped lang="scss"></style>

assets/__snapshots__/App.spec.js.snap

@@ -1,54 +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"
-          maxsize="100"
-          minsize="0"
-        >
-          <search-stub />
-           
-          <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/auto-imports.d.ts

@@ -0,0 +1,616 @@
+// Generated by 'unplugin-auto-import'
+export {}
+declare global {
+  const $$: typeof import('vue/macros')['$$']
+  const $: typeof import('vue/macros')['$']
+  const $computed: typeof import('vue/macros')['$computed']
+  const $customRef: typeof import('vue/macros')['$customRef']
+  const $ref: typeof import('vue/macros')['$ref']
+  const $shallowRef: typeof import('vue/macros')['$shallowRef']
+  const $toRef: typeof import('vue/macros')['$toRef']
+  const DEFAULT_SETTINGS: typeof import('./composables/settings')['DEFAULT_SETTINGS']
+  const EffectScope: typeof import('vue')['EffectScope']
+  const acceptHMRUpdate: typeof import('pinia')['acceptHMRUpdate']
+  const arrayEquals: typeof import('./utils/index')['arrayEquals']
+  const asyncComputed: typeof import('@vueuse/core')['asyncComputed']
+  const autoResetRef: typeof import('@vueuse/core')['autoResetRef']
+  const computed: typeof import('vue')['computed']
+  const computedAsync: typeof import('@vueuse/core')['computedAsync']
+  const computedEager: typeof import('@vueuse/core')['computedEager']
+  const computedInject: typeof import('@vueuse/core')['computedInject']
+  const computedWithControl: typeof import('@vueuse/core')['computedWithControl']
+  const config: typeof import('./stores/config')['default']
+  const controlledComputed: typeof import('@vueuse/core')['controlledComputed']
+  const controlledRef: typeof import('@vueuse/core')['controlledRef']
+  const createApp: typeof import('vue')['createApp']
+  const createEventHook: typeof import('@vueuse/core')['createEventHook']
+  const createGlobalState: typeof import('@vueuse/core')['createGlobalState']
+  const createInjectionState: typeof import('@vueuse/core')['createInjectionState']
+  const createPinia: typeof import('pinia')['createPinia']
+  const createReactiveFn: typeof import('@vueuse/core')['createReactiveFn']
+  const createSharedComposable: typeof import('@vueuse/core')['createSharedComposable']
+  const createUnrefFn: typeof import('@vueuse/core')['createUnrefFn']
+  const customRef: typeof import('vue')['customRef']
+  const debouncedRef: typeof import('@vueuse/core')['debouncedRef']
+  const debouncedWatch: typeof import('@vueuse/core')['debouncedWatch']
+  const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
+  const defineComponent: typeof import('vue')['defineComponent']
+  const defineStore: typeof import('pinia')['defineStore']
+  const eagerComputed: typeof import('@vueuse/core')['eagerComputed']
+  const effectScope: typeof import('vue')['effectScope']
+  const extendRef: typeof import('@vueuse/core')['extendRef']
+  const flattenJSON: typeof import('./utils/index')['flattenJSON']
+  const formatBytes: typeof import('./utils/index')['formatBytes']
+  const getActivePinia: typeof import('pinia')['getActivePinia']
+  const getCurrentInstance: typeof import('vue')['getCurrentInstance']
+  const getCurrentScope: typeof import('vue')['getCurrentScope']
+  const getDeep: typeof import('./utils/index')['getDeep']
+  const h: typeof import('vue')['h']
+  const hourStyle: typeof import('./composables/settings')['hourStyle']
+  const ignorableWatch: typeof import('@vueuse/core')['ignorableWatch']
+  const inject: typeof import('vue')['inject']
+  const isDefined: typeof import('@vueuse/core')['isDefined']
+  const isMobile: typeof import('./composables/media')['isMobile']
+  const isObject: typeof import('./utils/index')['isObject']
+  const isProxy: typeof import('vue')['isProxy']
+  const isReactive: typeof import('vue')['isReactive']
+  const isReadonly: typeof import('vue')['isReadonly']
+  const isRef: typeof import('vue')['isRef']
+  const lightTheme: typeof import('./composables/settings')['lightTheme']
+  const makeDestructurable: typeof import('@vueuse/core')['makeDestructurable']
+  const mapActions: typeof import('pinia')['mapActions']
+  const mapGetters: typeof import('pinia')['mapGetters']
+  const mapState: typeof import('pinia')['mapState']
+  const mapStores: typeof import('pinia')['mapStores']
+  const mapWritableState: typeof import('pinia')['mapWritableState']
+  const markRaw: typeof import('vue')['markRaw']
+  const menuWidth: typeof import('./composables/settings')['menuWidth']
+  const nextTick: typeof import('vue')['nextTick']
+  const onActivated: typeof import('vue')['onActivated']
+  const onBeforeMount: typeof import('vue')['onBeforeMount']
+  const onBeforeUnmount: typeof import('vue')['onBeforeUnmount']
+  const onBeforeUpdate: typeof import('vue')['onBeforeUpdate']
+  const onClickOutside: typeof import('@vueuse/core')['onClickOutside']
+  const onDeactivated: typeof import('vue')['onDeactivated']
+  const onErrorCaptured: typeof import('vue')['onErrorCaptured']
+  const onKeyStroke: typeof import('@vueuse/core')['onKeyStroke']
+  const onLongPress: typeof import('@vueuse/core')['onLongPress']
+  const onMounted: typeof import('vue')['onMounted']
+  const onRenderTracked: typeof import('vue')['onRenderTracked']
+  const onRenderTriggered: typeof import('vue')['onRenderTriggered']
+  const onScopeDispose: typeof import('vue')['onScopeDispose']
+  const onServerPrefetch: typeof import('vue')['onServerPrefetch']
+  const onStartTyping: typeof import('@vueuse/core')['onStartTyping']
+  const onUnmounted: typeof import('vue')['onUnmounted']
+  const onUpdated: typeof import('vue')['onUpdated']
+  const pausableWatch: typeof import('@vueuse/core')['pausableWatch']
+  const persistentVisibleKeys: typeof import('./utils/index')['persistentVisibleKeys']
+  const provide: typeof import('vue')['provide']
+  const reactify: typeof import('@vueuse/core')['reactify']
+  const reactifyObject: typeof import('@vueuse/core')['reactifyObject']
+  const reactive: typeof import('vue')['reactive']
+  const reactiveComputed: typeof import('@vueuse/core')['reactiveComputed']
+  const reactiveOmit: typeof import('@vueuse/core')['reactiveOmit']
+  const reactivePick: typeof import('@vueuse/core')['reactivePick']
+  const readonly: typeof import('vue')['readonly']
+  const ref: typeof import('vue')['ref']
+  const refAutoReset: typeof import('@vueuse/core')['refAutoReset']
+  const refDebounced: typeof import('@vueuse/core')['refDebounced']
+  const refDefault: typeof import('@vueuse/core')['refDefault']
+  const refThrottled: typeof import('@vueuse/core')['refThrottled']
+  const refWithControl: typeof import('@vueuse/core')['refWithControl']
+  const resolveComponent: typeof import('vue')['resolveComponent']
+  const resolveRef: typeof import('@vueuse/core')['resolveRef']
+  const resolveUnref: typeof import('@vueuse/core')['resolveUnref']
+  const search: typeof import('./composables/settings')['search']
+  const setActivePinia: typeof import('pinia')['setActivePinia']
+  const setMapStoreSuffix: typeof import('pinia')['setMapStoreSuffix']
+  const setTitle: typeof import('./composables/title')['setTitle']
+  const settings: typeof import('./composables/settings')['settings']
+  const shallowReactive: typeof import('vue')['shallowReactive']
+  const shallowReadonly: typeof import('vue')['shallowReadonly']
+  const shallowRef: typeof import('vue')['shallowRef']
+  const showAllContainers: typeof import('./composables/settings')['showAllContainers']
+  const showTimestamp: typeof import('./composables/settings')['showTimestamp']
+  const size: typeof import('./composables/settings')['size']
+  const smallerScrollbars: typeof import('./composables/settings')['smallerScrollbars']
+  const softWrap: typeof import('./composables/settings')['softWrap']
+  const storeToRefs: typeof import('pinia')['storeToRefs']
+  const stripVersion: typeof import('./utils/index')['stripVersion']
+  const syncRef: typeof import('@vueuse/core')['syncRef']
+  const syncRefs: typeof import('@vueuse/core')['syncRefs']
+  const templateRef: typeof import('@vueuse/core')['templateRef']
+  const throttledRef: typeof import('@vueuse/core')['throttledRef']
+  const throttledWatch: typeof import('@vueuse/core')['throttledWatch']
+  const toRaw: typeof import('vue')['toRaw']
+  const toReactive: typeof import('@vueuse/core')['toReactive']
+  const toRef: typeof import('vue')['toRef']
+  const toRefs: typeof import('vue')['toRefs']
+  const triggerRef: typeof import('vue')['triggerRef']
+  const tryOnBeforeMount: typeof import('@vueuse/core')['tryOnBeforeMount']
+  const tryOnBeforeUnmount: typeof import('@vueuse/core')['tryOnBeforeUnmount']
+  const tryOnMounted: typeof import('@vueuse/core')['tryOnMounted']
+  const tryOnScopeDispose: typeof import('@vueuse/core')['tryOnScopeDispose']
+  const tryOnUnmounted: typeof import('@vueuse/core')['tryOnUnmounted']
+  const unref: typeof import('vue')['unref']
+  const unrefElement: typeof import('@vueuse/core')['unrefElement']
+  const until: typeof import('@vueuse/core')['until']
+  const useActiveElement: typeof import('@vueuse/core')['useActiveElement']
+  const useArrayEvery: typeof import('@vueuse/core')['useArrayEvery']
+  const useArrayFilter: typeof import('@vueuse/core')['useArrayFilter']
+  const useArrayFind: typeof import('@vueuse/core')['useArrayFind']
+  const useArrayFindIndex: typeof import('@vueuse/core')['useArrayFindIndex']
+  const useArrayJoin: typeof import('@vueuse/core')['useArrayJoin']
+  const useArrayMap: typeof import('@vueuse/core')['useArrayMap']
+  const useArrayReduce: typeof import('@vueuse/core')['useArrayReduce']
+  const useArraySome: typeof import('@vueuse/core')['useArraySome']
+  const useAsyncQueue: typeof import('@vueuse/core')['useAsyncQueue']
+  const useAsyncState: typeof import('@vueuse/core')['useAsyncState']
+  const useAttrs: typeof import('vue')['useAttrs']
+  const useBase64: typeof import('@vueuse/core')['useBase64']
+  const useBattery: typeof import('@vueuse/core')['useBattery']
+  const useBluetooth: typeof import('@vueuse/core')['useBluetooth']
+  const useBreakpoints: typeof import('@vueuse/core')['useBreakpoints']
+  const useBroadcastChannel: typeof import('@vueuse/core')['useBroadcastChannel']
+  const useBrowserLocation: typeof import('@vueuse/core')['useBrowserLocation']
+  const useCached: typeof import('@vueuse/core')['useCached']
+  const useClipboard: typeof import('@vueuse/core')['useClipboard']
+  const useCloned: typeof import('@vueuse/core')['useCloned']
+  const useColorMode: typeof import('@vueuse/core')['useColorMode']
+  const useConfirmDialog: typeof import('@vueuse/core')['useConfirmDialog']
+  const useContainerStore: typeof import('./stores/container')['useContainerStore']
+  const useCounter: typeof import('@vueuse/core')['useCounter']
+  const useCssModule: typeof import('vue')['useCssModule']
+  const useCssVar: typeof import('@vueuse/core')['useCssVar']
+  const useCssVars: typeof import('vue')['useCssVars']
+  const useCurrentElement: typeof import('@vueuse/core')['useCurrentElement']
+  const useCycleList: typeof import('@vueuse/core')['useCycleList']
+  const useDark: typeof import('@vueuse/core')['useDark']
+  const useDateFormat: typeof import('@vueuse/core')['useDateFormat']
+  const useDebounce: typeof import('@vueuse/core')['useDebounce']
+  const useDebounceFn: typeof import('@vueuse/core')['useDebounceFn']
+  const useDebouncedRefHistory: typeof import('@vueuse/core')['useDebouncedRefHistory']
+  const useDeviceMotion: typeof import('@vueuse/core')['useDeviceMotion']
+  const useDeviceOrientation: typeof import('@vueuse/core')['useDeviceOrientation']
+  const useDevicePixelRatio: typeof import('@vueuse/core')['useDevicePixelRatio']
+  const useDevicesList: typeof import('@vueuse/core')['useDevicesList']
+  const useDisplayMedia: typeof import('@vueuse/core')['useDisplayMedia']
+  const useDocumentVisibility: typeof import('@vueuse/core')['useDocumentVisibility']
+  const useDraggable: typeof import('@vueuse/core')['useDraggable']
+  const useDropZone: typeof import('@vueuse/core')['useDropZone']
+  const useElementBounding: typeof import('@vueuse/core')['useElementBounding']
+  const useElementByPoint: typeof import('@vueuse/core')['useElementByPoint']
+  const useElementHover: typeof import('@vueuse/core')['useElementHover']
+  const useElementSize: typeof import('@vueuse/core')['useElementSize']
+  const useElementVisibility: typeof import('@vueuse/core')['useElementVisibility']
+  const useEventBus: typeof import('@vueuse/core')['useEventBus']
+  const useEventListener: typeof import('@vueuse/core')['useEventListener']
+  const useEventSource: typeof import('@vueuse/core')['useEventSource']
+  const useEyeDropper: typeof import('@vueuse/core')['useEyeDropper']
+  const useFavicon: typeof import('@vueuse/core')['useFavicon']
+  const useFetch: typeof import('@vueuse/core')['useFetch']
+  const useFileDialog: typeof import('@vueuse/core')['useFileDialog']
+  const useFileSystemAccess: typeof import('@vueuse/core')['useFileSystemAccess']
+  const useFocus: typeof import('@vueuse/core')['useFocus']
+  const useFocusWithin: typeof import('@vueuse/core')['useFocusWithin']
+  const useFps: typeof import('@vueuse/core')['useFps']
+  const useFullscreen: typeof import('@vueuse/core')['useFullscreen']
+  const useGamepad: typeof import('@vueuse/core')['useGamepad']
+  const useGeolocation: typeof import('@vueuse/core')['useGeolocation']
+  const useHead: typeof import('@vueuse/head')['useHead']
+  const useI18n: typeof import('vue-i18n')['useI18n']
+  const useIdle: typeof import('@vueuse/core')['useIdle']
+  const useImage: typeof import('@vueuse/core')['useImage']
+  const useInfiniteScroll: typeof import('@vueuse/core')['useInfiniteScroll']
+  const useIntersectionObserver: typeof import('@vueuse/core')['useIntersectionObserver']
+  const useInterval: typeof import('@vueuse/core')['useInterval']
+  const useIntervalFn: typeof import('@vueuse/core')['useIntervalFn']
+  const useKeyModifier: typeof import('@vueuse/core')['useKeyModifier']
+  const useLastChanged: typeof import('@vueuse/core')['useLastChanged']
+  const useLocalStorage: typeof import('@vueuse/core')['useLocalStorage']
+  const useLogStream: typeof import('./composables/eventsource')['useLogStream']
+  const useMagicKeys: typeof import('@vueuse/core')['useMagicKeys']
+  const useManualRefHistory: typeof import('@vueuse/core')['useManualRefHistory']
+  const useMediaControls: typeof import('@vueuse/core')['useMediaControls']
+  const useMediaQuery: typeof import('@vueuse/core')['useMediaQuery']
+  const useMemoize: typeof import('@vueuse/core')['useMemoize']
+  const useMemory: typeof import('@vueuse/core')['useMemory']
+  const useMounted: typeof import('@vueuse/core')['useMounted']
+  const useMouse: typeof import('@vueuse/core')['useMouse']
+  const useMouseInElement: typeof import('@vueuse/core')['useMouseInElement']
+  const useMousePressed: typeof import('@vueuse/core')['useMousePressed']
+  const useMutationObserver: typeof import('@vueuse/core')['useMutationObserver']
+  const useNavigatorLanguage: typeof import('@vueuse/core')['useNavigatorLanguage']
+  const useNetwork: typeof import('@vueuse/core')['useNetwork']
+  const useNow: typeof import('@vueuse/core')['useNow']
+  const useObjectUrl: typeof import('@vueuse/core')['useObjectUrl']
+  const useOffsetPagination: typeof import('@vueuse/core')['useOffsetPagination']
+  const useOnline: typeof import('@vueuse/core')['useOnline']
+  const usePageLeave: typeof import('@vueuse/core')['usePageLeave']
+  const useParallax: typeof import('@vueuse/core')['useParallax']
+  const usePermission: typeof import('@vueuse/core')['usePermission']
+  const usePointer: typeof import('@vueuse/core')['usePointer']
+  const usePointerSwipe: typeof import('@vueuse/core')['usePointerSwipe']
+  const usePreferredColorScheme: typeof import('@vueuse/core')['usePreferredColorScheme']
+  const usePreferredContrast: typeof import('@vueuse/core')['usePreferredContrast']
+  const usePreferredDark: typeof import('@vueuse/core')['usePreferredDark']
+  const usePreferredLanguages: typeof import('@vueuse/core')['usePreferredLanguages']
+  const usePreferredReducedMotion: typeof import('@vueuse/core')['usePreferredReducedMotion']
+  const useRafFn: typeof import('@vueuse/core')['useRafFn']
+  const useRefHistory: typeof import('@vueuse/core')['useRefHistory']
+  const useResizeObserver: typeof import('@vueuse/core')['useResizeObserver']
+  const useRoute: typeof import('vue-router')['useRoute']
+  const useRouter: typeof import('vue-router')['useRouter']
+  const useScreenOrientation: typeof import('@vueuse/core')['useScreenOrientation']
+  const useScreenSafeArea: typeof import('@vueuse/core')['useScreenSafeArea']
+  const useScriptTag: typeof import('@vueuse/core')['useScriptTag']
+  const useScroll: typeof import('@vueuse/core')['useScroll']
+  const useScrollLock: typeof import('@vueuse/core')['useScrollLock']
+  const useSearchFilter: typeof import('./composables/search')['useSearchFilter']
+  const useSessionStorage: typeof import('@vueuse/core')['useSessionStorage']
+  const useShare: typeof import('@vueuse/core')['useShare']
+  const useSlots: typeof import('vue')['useSlots']
+  const useSpeechRecognition: typeof import('@vueuse/core')['useSpeechRecognition']
+  const useSpeechSynthesis: typeof import('@vueuse/core')['useSpeechSynthesis']
+  const useStepper: typeof import('@vueuse/core')['useStepper']
+  const useStorage: typeof import('@vueuse/core')['useStorage']
+  const useStorageAsync: typeof import('@vueuse/core')['useStorageAsync']
+  const useStyleTag: typeof import('@vueuse/core')['useStyleTag']
+  const useSupported: typeof import('@vueuse/core')['useSupported']
+  const useSwipe: typeof import('@vueuse/core')['useSwipe']
+  const useTemplateRefsList: typeof import('@vueuse/core')['useTemplateRefsList']
+  const useTextDirection: typeof import('@vueuse/core')['useTextDirection']
+  const useTextSelection: typeof import('@vueuse/core')['useTextSelection']
+  const useTextareaAutosize: typeof import('@vueuse/core')['useTextareaAutosize']
+  const useThrottle: typeof import('@vueuse/core')['useThrottle']
+  const useThrottleFn: typeof import('@vueuse/core')['useThrottleFn']
+  const useThrottledRefHistory: typeof import('@vueuse/core')['useThrottledRefHistory']
+  const useTimeAgo: typeof import('@vueuse/core')['useTimeAgo']
+  const useTimeout: typeof import('@vueuse/core')['useTimeout']
+  const useTimeoutFn: typeof import('@vueuse/core')['useTimeoutFn']
+  const useTimeoutPoll: typeof import('@vueuse/core')['useTimeoutPoll']
+  const useTimestamp: typeof import('@vueuse/core')['useTimestamp']
+  const useTitle: typeof import('@vueuse/core')['useTitle']
+  const useToNumber: typeof import('@vueuse/core')['useToNumber']
+  const useToString: typeof import('@vueuse/core')['useToString']
+  const useToggle: typeof import('@vueuse/core')['useToggle']
+  const useTransition: typeof import('@vueuse/core')['useTransition']
+  const useUrlSearchParams: typeof import('@vueuse/core')['useUrlSearchParams']
+  const useUserMedia: typeof import('@vueuse/core')['useUserMedia']
+  const useVModel: typeof import('@vueuse/core')['useVModel']
+  const useVModels: typeof import('@vueuse/core')['useVModels']
+  const useVibrate: typeof import('@vueuse/core')['useVibrate']
+  const useVirtualList: typeof import('@vueuse/core')['useVirtualList']
+  const useVisibleFilter: typeof import('./composables/visible')['useVisibleFilter']
+  const useWakeLock: typeof import('@vueuse/core')['useWakeLock']
+  const useWebNotification: typeof import('@vueuse/core')['useWebNotification']
+  const useWebSocket: typeof import('@vueuse/core')['useWebSocket']
+  const useWebWorker: typeof import('@vueuse/core')['useWebWorker']
+  const useWebWorkerFn: typeof import('@vueuse/core')['useWebWorkerFn']
+  const useWindowFocus: typeof import('@vueuse/core')['useWindowFocus']
+  const useWindowScroll: typeof import('@vueuse/core')['useWindowScroll']
+  const useWindowSize: typeof import('@vueuse/core')['useWindowSize']
+  const watch: typeof import('vue')['watch']
+  const watchArray: typeof import('@vueuse/core')['watchArray']
+  const watchAtMost: typeof import('@vueuse/core')['watchAtMost']
+  const watchDebounced: typeof import('@vueuse/core')['watchDebounced']
+  const watchEffect: typeof import('vue')['watchEffect']
+  const watchIgnorable: typeof import('@vueuse/core')['watchIgnorable']
+  const watchOnce: typeof import('@vueuse/core')['watchOnce']
+  const watchPausable: typeof import('@vueuse/core')['watchPausable']
+  const watchPostEffect: typeof import('vue')['watchPostEffect']
+  const watchSyncEffect: typeof import('vue')['watchSyncEffect']
+  const watchThrottled: typeof import('@vueuse/core')['watchThrottled']
+  const watchTriggerable: typeof import('@vueuse/core')['watchTriggerable']
+  const watchWithFilter: typeof import('@vueuse/core')['watchWithFilter']
+  const whenever: typeof import('@vueuse/core')['whenever']
+}
+// for vue template auto import
+import { UnwrapRef } from 'vue'
+declare module '@vue/runtime-core' {
+  interface ComponentCustomProperties {
+    readonly $$: UnwrapRef<typeof import('vue/macros')['$$']>
+    readonly $: UnwrapRef<typeof import('vue/macros')['$']>
+    readonly $computed: UnwrapRef<typeof import('vue/macros')['$computed']>
+    readonly $customRef: UnwrapRef<typeof import('vue/macros')['$customRef']>
+    readonly $ref: UnwrapRef<typeof import('vue/macros')['$ref']>
+    readonly $shallowRef: UnwrapRef<typeof import('vue/macros')['$shallowRef']>
+    readonly $toRef: UnwrapRef<typeof import('vue/macros')['$toRef']>
+    readonly DEFAULT_SETTINGS: UnwrapRef<typeof import('./composables/settings')['DEFAULT_SETTINGS']>
+    readonly EffectScope: UnwrapRef<typeof import('vue')['EffectScope']>
+    readonly acceptHMRUpdate: UnwrapRef<typeof import('pinia')['acceptHMRUpdate']>
+    readonly arrayEquals: UnwrapRef<typeof import('./utils/index')['arrayEquals']>
+    readonly asyncComputed: UnwrapRef<typeof import('@vueuse/core')['asyncComputed']>
+    readonly autoResetRef: UnwrapRef<typeof import('@vueuse/core')['autoResetRef']>
+    readonly computed: UnwrapRef<typeof import('vue')['computed']>
+    readonly computedAsync: UnwrapRef<typeof import('@vueuse/core')['computedAsync']>
+    readonly computedEager: UnwrapRef<typeof import('@vueuse/core')['computedEager']>
+    readonly computedInject: UnwrapRef<typeof import('@vueuse/core')['computedInject']>
+    readonly computedWithControl: UnwrapRef<typeof import('@vueuse/core')['computedWithControl']>
+    readonly config: UnwrapRef<typeof import('./stores/config')['default']>
+    readonly controlledComputed: UnwrapRef<typeof import('@vueuse/core')['controlledComputed']>
+    readonly controlledRef: UnwrapRef<typeof import('@vueuse/core')['controlledRef']>
+    readonly createApp: UnwrapRef<typeof import('vue')['createApp']>
+    readonly createEventHook: UnwrapRef<typeof import('@vueuse/core')['createEventHook']>
+    readonly createGlobalState: UnwrapRef<typeof import('@vueuse/core')['createGlobalState']>
+    readonly createInjectionState: UnwrapRef<typeof import('@vueuse/core')['createInjectionState']>
+    readonly createPinia: UnwrapRef<typeof import('pinia')['createPinia']>
+    readonly createReactiveFn: UnwrapRef<typeof import('@vueuse/core')['createReactiveFn']>
+    readonly createSharedComposable: UnwrapRef<typeof import('@vueuse/core')['createSharedComposable']>
+    readonly createUnrefFn: UnwrapRef<typeof import('@vueuse/core')['createUnrefFn']>
+    readonly customRef: UnwrapRef<typeof import('vue')['customRef']>
+    readonly debouncedRef: UnwrapRef<typeof import('@vueuse/core')['debouncedRef']>
+    readonly debouncedWatch: UnwrapRef<typeof import('@vueuse/core')['debouncedWatch']>
+    readonly defineAsyncComponent: UnwrapRef<typeof import('vue')['defineAsyncComponent']>
+    readonly defineComponent: UnwrapRef<typeof import('vue')['defineComponent']>
+    readonly defineStore: UnwrapRef<typeof import('pinia')['defineStore']>
+    readonly eagerComputed: UnwrapRef<typeof import('@vueuse/core')['eagerComputed']>
+    readonly effectScope: UnwrapRef<typeof import('vue')['effectScope']>
+    readonly extendRef: UnwrapRef<typeof import('@vueuse/core')['extendRef']>
+    readonly flattenJSON: UnwrapRef<typeof import('./utils/index')['flattenJSON']>
+    readonly formatBytes: UnwrapRef<typeof import('./utils/index')['formatBytes']>
+    readonly getActivePinia: UnwrapRef<typeof import('pinia')['getActivePinia']>
+    readonly getCurrentInstance: UnwrapRef<typeof import('vue')['getCurrentInstance']>
+    readonly getCurrentScope: UnwrapRef<typeof import('vue')['getCurrentScope']>
+    readonly getDeep: UnwrapRef<typeof import('./utils/index')['getDeep']>
+    readonly h: UnwrapRef<typeof import('vue')['h']>
+    readonly hourStyle: UnwrapRef<typeof import('./composables/settings')['hourStyle']>
+    readonly ignorableWatch: UnwrapRef<typeof import('@vueuse/core')['ignorableWatch']>
+    readonly inject: UnwrapRef<typeof import('vue')['inject']>
+    readonly isDefined: UnwrapRef<typeof import('@vueuse/core')['isDefined']>
+    readonly isMobile: UnwrapRef<typeof import('./composables/media')['isMobile']>
+    readonly isObject: UnwrapRef<typeof import('./utils/index')['isObject']>
+    readonly isProxy: UnwrapRef<typeof import('vue')['isProxy']>
+    readonly isReactive: UnwrapRef<typeof import('vue')['isReactive']>
+    readonly isReadonly: UnwrapRef<typeof import('vue')['isReadonly']>
+    readonly isRef: UnwrapRef<typeof import('vue')['isRef']>
+    readonly lightTheme: UnwrapRef<typeof import('./composables/settings')['lightTheme']>
+    readonly makeDestructurable: UnwrapRef<typeof import('@vueuse/core')['makeDestructurable']>
+    readonly mapActions: UnwrapRef<typeof import('pinia')['mapActions']>
+    readonly mapGetters: UnwrapRef<typeof import('pinia')['mapGetters']>
+    readonly mapState: UnwrapRef<typeof import('pinia')['mapState']>
+    readonly mapStores: UnwrapRef<typeof import('pinia')['mapStores']>
+    readonly mapWritableState: UnwrapRef<typeof import('pinia')['mapWritableState']>
+    readonly markRaw: UnwrapRef<typeof import('vue')['markRaw']>
+    readonly menuWidth: UnwrapRef<typeof import('./composables/settings')['menuWidth']>
+    readonly nextTick: UnwrapRef<typeof import('vue')['nextTick']>
+    readonly onActivated: UnwrapRef<typeof import('vue')['onActivated']>
+    readonly onBeforeMount: UnwrapRef<typeof import('vue')['onBeforeMount']>
+    readonly onBeforeUnmount: UnwrapRef<typeof import('vue')['onBeforeUnmount']>
+    readonly onBeforeUpdate: UnwrapRef<typeof import('vue')['onBeforeUpdate']>
+    readonly onClickOutside: UnwrapRef<typeof import('@vueuse/core')['onClickOutside']>
+    readonly onDeactivated: UnwrapRef<typeof import('vue')['onDeactivated']>
+    readonly onErrorCaptured: UnwrapRef<typeof import('vue')['onErrorCaptured']>
+    readonly onKeyStroke: UnwrapRef<typeof import('@vueuse/core')['onKeyStroke']>
+    readonly onLongPress: UnwrapRef<typeof import('@vueuse/core')['onLongPress']>
+    readonly onMounted: UnwrapRef<typeof import('vue')['onMounted']>
+    readonly onRenderTracked: UnwrapRef<typeof import('vue')['onRenderTracked']>
+    readonly onRenderTriggered: UnwrapRef<typeof import('vue')['onRenderTriggered']>
+    readonly onScopeDispose: UnwrapRef<typeof import('vue')['onScopeDispose']>
+    readonly onServerPrefetch: UnwrapRef<typeof import('vue')['onServerPrefetch']>
+    readonly onStartTyping: UnwrapRef<typeof import('@vueuse/core')['onStartTyping']>
+    readonly onUnmounted: UnwrapRef<typeof import('vue')['onUnmounted']>
+    readonly onUpdated: UnwrapRef<typeof import('vue')['onUpdated']>
+    readonly pausableWatch: UnwrapRef<typeof import('@vueuse/core')['pausableWatch']>
+    readonly persistentVisibleKeys: UnwrapRef<typeof import('./utils/index')['persistentVisibleKeys']>
+    readonly provide: UnwrapRef<typeof import('vue')['provide']>
+    readonly reactify: UnwrapRef<typeof import('@vueuse/core')['reactify']>
+    readonly reactifyObject: UnwrapRef<typeof import('@vueuse/core')['reactifyObject']>
+    readonly reactive: UnwrapRef<typeof import('vue')['reactive']>
+    readonly reactiveComputed: UnwrapRef<typeof import('@vueuse/core')['reactiveComputed']>
+    readonly reactiveOmit: UnwrapRef<typeof import('@vueuse/core')['reactiveOmit']>
+    readonly reactivePick: UnwrapRef<typeof import('@vueuse/core')['reactivePick']>
+    readonly readonly: UnwrapRef<typeof import('vue')['readonly']>
+    readonly ref: UnwrapRef<typeof import('vue')['ref']>
+    readonly refAutoReset: UnwrapRef<typeof import('@vueuse/core')['refAutoReset']>
+    readonly refDebounced: UnwrapRef<typeof import('@vueuse/core')['refDebounced']>
+    readonly refDefault: UnwrapRef<typeof import('@vueuse/core')['refDefault']>
+    readonly refThrottled: UnwrapRef<typeof import('@vueuse/core')['refThrottled']>
+    readonly refWithControl: UnwrapRef<typeof import('@vueuse/core')['refWithControl']>
+    readonly resolveComponent: UnwrapRef<typeof import('vue')['resolveComponent']>
+    readonly resolveRef: UnwrapRef<typeof import('@vueuse/core')['resolveRef']>
+    readonly resolveUnref: UnwrapRef<typeof import('@vueuse/core')['resolveUnref']>
+    readonly search: UnwrapRef<typeof import('./composables/settings')['search']>
+    readonly setActivePinia: UnwrapRef<typeof import('pinia')['setActivePinia']>
+    readonly setMapStoreSuffix: UnwrapRef<typeof import('pinia')['setMapStoreSuffix']>
+    readonly setTitle: UnwrapRef<typeof import('./composables/title')['setTitle']>
+    readonly settings: UnwrapRef<typeof import('./composables/settings')['settings']>
+    readonly shallowReactive: UnwrapRef<typeof import('vue')['shallowReactive']>
+    readonly shallowReadonly: UnwrapRef<typeof import('vue')['shallowReadonly']>
+    readonly shallowRef: UnwrapRef<typeof import('vue')['shallowRef']>
+    readonly showAllContainers: UnwrapRef<typeof import('./composables/settings')['showAllContainers']>
+    readonly showTimestamp: UnwrapRef<typeof import('./composables/settings')['showTimestamp']>
+    readonly size: UnwrapRef<typeof import('./composables/settings')['size']>
+    readonly smallerScrollbars: UnwrapRef<typeof import('./composables/settings')['smallerScrollbars']>
+    readonly softWrap: UnwrapRef<typeof import('./composables/settings')['softWrap']>
+    readonly storeToRefs: UnwrapRef<typeof import('pinia')['storeToRefs']>
+    readonly stripVersion: UnwrapRef<typeof import('./utils/index')['stripVersion']>
+    readonly syncRef: UnwrapRef<typeof import('@vueuse/core')['syncRef']>
+    readonly syncRefs: UnwrapRef<typeof import('@vueuse/core')['syncRefs']>
+    readonly templateRef: UnwrapRef<typeof import('@vueuse/core')['templateRef']>
+    readonly throttledRef: UnwrapRef<typeof import('@vueuse/core')['throttledRef']>
+    readonly throttledWatch: UnwrapRef<typeof import('@vueuse/core')['throttledWatch']>
+    readonly toRaw: UnwrapRef<typeof import('vue')['toRaw']>
+    readonly toReactive: UnwrapRef<typeof import('@vueuse/core')['toReactive']>
+    readonly toRef: UnwrapRef<typeof import('vue')['toRef']>
+    readonly toRefs: UnwrapRef<typeof import('vue')['toRefs']>
+    readonly triggerRef: UnwrapRef<typeof import('vue')['triggerRef']>
+    readonly tryOnBeforeMount: UnwrapRef<typeof import('@vueuse/core')['tryOnBeforeMount']>
+    readonly tryOnBeforeUnmount: UnwrapRef<typeof import('@vueuse/core')['tryOnBeforeUnmount']>
+    readonly tryOnMounted: UnwrapRef<typeof import('@vueuse/core')['tryOnMounted']>
+    readonly tryOnScopeDispose: UnwrapRef<typeof import('@vueuse/core')['tryOnScopeDispose']>
+    readonly tryOnUnmounted: UnwrapRef<typeof import('@vueuse/core')['tryOnUnmounted']>
+    readonly unref: UnwrapRef<typeof import('vue')['unref']>
+    readonly unrefElement: UnwrapRef<typeof import('@vueuse/core')['unrefElement']>
+    readonly until: UnwrapRef<typeof import('@vueuse/core')['until']>
+    readonly useActiveElement: UnwrapRef<typeof import('@vueuse/core')['useActiveElement']>
+    readonly useArrayEvery: UnwrapRef<typeof import('@vueuse/core')['useArrayEvery']>
+    readonly useArrayFilter: UnwrapRef<typeof import('@vueuse/core')['useArrayFilter']>
+    readonly useArrayFind: UnwrapRef<typeof import('@vueuse/core')['useArrayFind']>
+    readonly useArrayFindIndex: UnwrapRef<typeof import('@vueuse/core')['useArrayFindIndex']>
+    readonly useArrayJoin: UnwrapRef<typeof import('@vueuse/core')['useArrayJoin']>
+    readonly useArrayMap: UnwrapRef<typeof import('@vueuse/core')['useArrayMap']>
+    readonly useArrayReduce: UnwrapRef<typeof import('@vueuse/core')['useArrayReduce']>
+    readonly useArraySome: UnwrapRef<typeof import('@vueuse/core')['useArraySome']>
+    readonly useAsyncQueue: UnwrapRef<typeof import('@vueuse/core')['useAsyncQueue']>
+    readonly useAsyncState: UnwrapRef<typeof import('@vueuse/core')['useAsyncState']>
+    readonly useAttrs: UnwrapRef<typeof import('vue')['useAttrs']>
+    readonly useBase64: UnwrapRef<typeof import('@vueuse/core')['useBase64']>
+    readonly useBattery: UnwrapRef<typeof import('@vueuse/core')['useBattery']>
+    readonly useBluetooth: UnwrapRef<typeof import('@vueuse/core')['useBluetooth']>
+    readonly useBreakpoints: UnwrapRef<typeof import('@vueuse/core')['useBreakpoints']>
+    readonly useBroadcastChannel: UnwrapRef<typeof import('@vueuse/core')['useBroadcastChannel']>
+    readonly useBrowserLocation: UnwrapRef<typeof import('@vueuse/core')['useBrowserLocation']>
+    readonly useCached: UnwrapRef<typeof import('@vueuse/core')['useCached']>
+    readonly useClipboard: UnwrapRef<typeof import('@vueuse/core')['useClipboard']>
+    readonly useCloned: UnwrapRef<typeof import('@vueuse/core')['useCloned']>
+    readonly useColorMode: UnwrapRef<typeof import('@vueuse/core')['useColorMode']>
+    readonly useConfirmDialog: UnwrapRef<typeof import('@vueuse/core')['useConfirmDialog']>
+    readonly useContainerStore: UnwrapRef<typeof import('./stores/container')['useContainerStore']>
+    readonly useCounter: UnwrapRef<typeof import('@vueuse/core')['useCounter']>
+    readonly useCssModule: UnwrapRef<typeof import('vue')['useCssModule']>
+    readonly useCssVar: UnwrapRef<typeof import('@vueuse/core')['useCssVar']>
+    readonly useCssVars: UnwrapRef<typeof import('vue')['useCssVars']>
+    readonly useCurrentElement: UnwrapRef<typeof import('@vueuse/core')['useCurrentElement']>
+    readonly useCycleList: UnwrapRef<typeof import('@vueuse/core')['useCycleList']>
+    readonly useDark: UnwrapRef<typeof import('@vueuse/core')['useDark']>
+    readonly useDateFormat: UnwrapRef<typeof import('@vueuse/core')['useDateFormat']>
+    readonly useDebounce: UnwrapRef<typeof import('@vueuse/core')['useDebounce']>
+    readonly useDebounceFn: UnwrapRef<typeof import('@vueuse/core')['useDebounceFn']>
+    readonly useDebouncedRefHistory: UnwrapRef<typeof import('@vueuse/core')['useDebouncedRefHistory']>
+    readonly useDeviceMotion: UnwrapRef<typeof import('@vueuse/core')['useDeviceMotion']>
+    readonly useDeviceOrientation: UnwrapRef<typeof import('@vueuse/core')['useDeviceOrientation']>
+    readonly useDevicePixelRatio: UnwrapRef<typeof import('@vueuse/core')['useDevicePixelRatio']>
+    readonly useDevicesList: UnwrapRef<typeof import('@vueuse/core')['useDevicesList']>
+    readonly useDisplayMedia: UnwrapRef<typeof import('@vueuse/core')['useDisplayMedia']>
+    readonly useDocumentVisibility: UnwrapRef<typeof import('@vueuse/core')['useDocumentVisibility']>
+    readonly useDraggable: UnwrapRef<typeof import('@vueuse/core')['useDraggable']>
+    readonly useDropZone: UnwrapRef<typeof import('@vueuse/core')['useDropZone']>
+    readonly useElementBounding: UnwrapRef<typeof import('@vueuse/core')['useElementBounding']>
+    readonly useElementByPoint: UnwrapRef<typeof import('@vueuse/core')['useElementByPoint']>
+    readonly useElementHover: UnwrapRef<typeof import('@vueuse/core')['useElementHover']>
+    readonly useElementSize: UnwrapRef<typeof import('@vueuse/core')['useElementSize']>
+    readonly useElementVisibility: UnwrapRef<typeof import('@vueuse/core')['useElementVisibility']>
+    readonly useEventBus: UnwrapRef<typeof import('@vueuse/core')['useEventBus']>
+    readonly useEventListener: UnwrapRef<typeof import('@vueuse/core')['useEventListener']>
+    readonly useEventSource: UnwrapRef<typeof import('@vueuse/core')['useEventSource']>
+    readonly useEyeDropper: UnwrapRef<typeof import('@vueuse/core')['useEyeDropper']>
+    readonly useFavicon: UnwrapRef<typeof import('@vueuse/core')['useFavicon']>
+    readonly useFetch: UnwrapRef<typeof import('@vueuse/core')['useFetch']>
+    readonly useFileDialog: UnwrapRef<typeof import('@vueuse/core')['useFileDialog']>
+    readonly useFileSystemAccess: UnwrapRef<typeof import('@vueuse/core')['useFileSystemAccess']>
+    readonly useFocus: UnwrapRef<typeof import('@vueuse/core')['useFocus']>
+    readonly useFocusWithin: UnwrapRef<typeof import('@vueuse/core')['useFocusWithin']>
+    readonly useFps: UnwrapRef<typeof import('@vueuse/core')['useFps']>
+    readonly useFullscreen: UnwrapRef<typeof import('@vueuse/core')['useFullscreen']>
+    readonly useGamepad: UnwrapRef<typeof import('@vueuse/core')['useGamepad']>
+    readonly useGeolocation: UnwrapRef<typeof import('@vueuse/core')['useGeolocation']>
+    readonly useHead: UnwrapRef<typeof import('@vueuse/head')['useHead']>
+    readonly useI18n: UnwrapRef<typeof import('vue-i18n')['useI18n']>
+    readonly useIdle: UnwrapRef<typeof import('@vueuse/core')['useIdle']>
+    readonly useImage: UnwrapRef<typeof import('@vueuse/core')['useImage']>
+    readonly useInfiniteScroll: UnwrapRef<typeof import('@vueuse/core')['useInfiniteScroll']>
+    readonly useIntersectionObserver: UnwrapRef<typeof import('@vueuse/core')['useIntersectionObserver']>
+    readonly useInterval: UnwrapRef<typeof import('@vueuse/core')['useInterval']>
+    readonly useIntervalFn: UnwrapRef<typeof import('@vueuse/core')['useIntervalFn']>
+    readonly useKeyModifier: UnwrapRef<typeof import('@vueuse/core')['useKeyModifier']>
+    readonly useLastChanged: UnwrapRef<typeof import('@vueuse/core')['useLastChanged']>
+    readonly useLocalStorage: UnwrapRef<typeof import('@vueuse/core')['useLocalStorage']>
+    readonly useLogStream: UnwrapRef<typeof import('./composables/eventsource')['useLogStream']>
+    readonly useMagicKeys: UnwrapRef<typeof import('@vueuse/core')['useMagicKeys']>
+    readonly useManualRefHistory: UnwrapRef<typeof import('@vueuse/core')['useManualRefHistory']>
+    readonly useMediaControls: UnwrapRef<typeof import('@vueuse/core')['useMediaControls']>
+    readonly useMediaQuery: UnwrapRef<typeof import('@vueuse/core')['useMediaQuery']>
+    readonly useMemoize: UnwrapRef<typeof import('@vueuse/core')['useMemoize']>
+    readonly useMemory: UnwrapRef<typeof import('@vueuse/core')['useMemory']>
+    readonly useMounted: UnwrapRef<typeof import('@vueuse/core')['useMounted']>
+    readonly useMouse: UnwrapRef<typeof import('@vueuse/core')['useMouse']>
+    readonly useMouseInElement: UnwrapRef<typeof import('@vueuse/core')['useMouseInElement']>
+    readonly useMousePressed: UnwrapRef<typeof import('@vueuse/core')['useMousePressed']>
+    readonly useMutationObserver: UnwrapRef<typeof import('@vueuse/core')['useMutationObserver']>
+    readonly useNavigatorLanguage: UnwrapRef<typeof import('@vueuse/core')['useNavigatorLanguage']>
+    readonly useNetwork: UnwrapRef<typeof import('@vueuse/core')['useNetwork']>
+    readonly useNow: UnwrapRef<typeof import('@vueuse/core')['useNow']>
+    readonly useObjectUrl: UnwrapRef<typeof import('@vueuse/core')['useObjectUrl']>
+    readonly useOffsetPagination: UnwrapRef<typeof import('@vueuse/core')['useOffsetPagination']>
+    readonly useOnline: UnwrapRef<typeof import('@vueuse/core')['useOnline']>
+    readonly usePageLeave: UnwrapRef<typeof import('@vueuse/core')['usePageLeave']>
+    readonly useParallax: UnwrapRef<typeof import('@vueuse/core')['useParallax']>
+    readonly usePermission: UnwrapRef<typeof import('@vueuse/core')['usePermission']>
+    readonly usePointer: UnwrapRef<typeof import('@vueuse/core')['usePointer']>
+    readonly usePointerSwipe: UnwrapRef<typeof import('@vueuse/core')['usePointerSwipe']>
+    readonly usePreferredColorScheme: UnwrapRef<typeof import('@vueuse/core')['usePreferredColorScheme']>
+    readonly usePreferredContrast: UnwrapRef<typeof import('@vueuse/core')['usePreferredContrast']>
+    readonly usePreferredDark: UnwrapRef<typeof import('@vueuse/core')['usePreferredDark']>
+    readonly usePreferredLanguages: UnwrapRef<typeof import('@vueuse/core')['usePreferredLanguages']>
+    readonly usePreferredReducedMotion: UnwrapRef<typeof import('@vueuse/core')['usePreferredReducedMotion']>
+    readonly useRafFn: UnwrapRef<typeof import('@vueuse/core')['useRafFn']>
+    readonly useRefHistory: UnwrapRef<typeof import('@vueuse/core')['useRefHistory']>
+    readonly useResizeObserver: UnwrapRef<typeof import('@vueuse/core')['useResizeObserver']>
+    readonly useRoute: UnwrapRef<typeof import('vue-router')['useRoute']>
+    readonly useRouter: UnwrapRef<typeof import('vue-router')['useRouter']>
+    readonly useScreenOrientation: UnwrapRef<typeof import('@vueuse/core')['useScreenOrientation']>
+    readonly useScreenSafeArea: UnwrapRef<typeof import('@vueuse/core')['useScreenSafeArea']>
+    readonly useScriptTag: UnwrapRef<typeof import('@vueuse/core')['useScriptTag']>
+    readonly useScroll: UnwrapRef<typeof import('@vueuse/core')['useScroll']>
+    readonly useScrollLock: UnwrapRef<typeof import('@vueuse/core')['useScrollLock']>
+    readonly useSearchFilter: UnwrapRef<typeof import('./composables/search')['useSearchFilter']>
+    readonly useSessionStorage: UnwrapRef<typeof import('@vueuse/core')['useSessionStorage']>
+    readonly useShare: UnwrapRef<typeof import('@vueuse/core')['useShare']>
+    readonly useSlots: UnwrapRef<typeof import('vue')['useSlots']>
+    readonly useSpeechRecognition: UnwrapRef<typeof import('@vueuse/core')['useSpeechRecognition']>
+    readonly useSpeechSynthesis: UnwrapRef<typeof import('@vueuse/core')['useSpeechSynthesis']>
+    readonly useStepper: UnwrapRef<typeof import('@vueuse/core')['useStepper']>
+    readonly useStorage: UnwrapRef<typeof import('@vueuse/core')['useStorage']>
+    readonly useStorageAsync: UnwrapRef<typeof import('@vueuse/core')['useStorageAsync']>
+    readonly useStyleTag: UnwrapRef<typeof import('@vueuse/core')['useStyleTag']>
+    readonly useSupported: UnwrapRef<typeof import('@vueuse/core')['useSupported']>
+    readonly useSwipe: UnwrapRef<typeof import('@vueuse/core')['useSwipe']>
+    readonly useTemplateRefsList: UnwrapRef<typeof import('@vueuse/core')['useTemplateRefsList']>
+    readonly useTextDirection: UnwrapRef<typeof import('@vueuse/core')['useTextDirection']>
+    readonly useTextSelection: UnwrapRef<typeof import('@vueuse/core')['useTextSelection']>
+    readonly useTextareaAutosize: UnwrapRef<typeof import('@vueuse/core')['useTextareaAutosize']>
+    readonly useThrottle: UnwrapRef<typeof import('@vueuse/core')['useThrottle']>
+    readonly useThrottleFn: UnwrapRef<typeof import('@vueuse/core')['useThrottleFn']>
+    readonly useThrottledRefHistory: UnwrapRef<typeof import('@vueuse/core')['useThrottledRefHistory']>
+    readonly useTimeAgo: UnwrapRef<typeof import('@vueuse/core')['useTimeAgo']>
+    readonly useTimeout: UnwrapRef<typeof import('@vueuse/core')['useTimeout']>
+    readonly useTimeoutFn: UnwrapRef<typeof import('@vueuse/core')['useTimeoutFn']>
+    readonly useTimeoutPoll: UnwrapRef<typeof import('@vueuse/core')['useTimeoutPoll']>
+    readonly useTimestamp: UnwrapRef<typeof import('@vueuse/core')['useTimestamp']>
+    readonly useTitle: UnwrapRef<typeof import('@vueuse/core')['useTitle']>
+    readonly useToNumber: UnwrapRef<typeof import('@vueuse/core')['useToNumber']>
+    readonly useToString: UnwrapRef<typeof import('@vueuse/core')['useToString']>
+    readonly useToggle: UnwrapRef<typeof import('@vueuse/core')['useToggle']>
+    readonly useTransition: UnwrapRef<typeof import('@vueuse/core')['useTransition']>
+    readonly useUrlSearchParams: UnwrapRef<typeof import('@vueuse/core')['useUrlSearchParams']>
+    readonly useUserMedia: UnwrapRef<typeof import('@vueuse/core')['useUserMedia']>
+    readonly useVModel: UnwrapRef<typeof import('@vueuse/core')['useVModel']>
+    readonly useVModels: UnwrapRef<typeof import('@vueuse/core')['useVModels']>
+    readonly useVibrate: UnwrapRef<typeof import('@vueuse/core')['useVibrate']>
+    readonly useVirtualList: UnwrapRef<typeof import('@vueuse/core')['useVirtualList']>
+    readonly useVisibleFilter: UnwrapRef<typeof import('./composables/visible')['useVisibleFilter']>
+    readonly useWakeLock: UnwrapRef<typeof import('@vueuse/core')['useWakeLock']>
+    readonly useWebNotification: UnwrapRef<typeof import('@vueuse/core')['useWebNotification']>
+    readonly useWebSocket: UnwrapRef<typeof import('@vueuse/core')['useWebSocket']>
+    readonly useWebWorker: UnwrapRef<typeof import('@vueuse/core')['useWebWorker']>
+    readonly useWebWorkerFn: UnwrapRef<typeof import('@vueuse/core')['useWebWorkerFn']>
+    readonly useWindowFocus: UnwrapRef<typeof import('@vueuse/core')['useWindowFocus']>
+    readonly useWindowScroll: UnwrapRef<typeof import('@vueuse/core')['useWindowScroll']>
+    readonly useWindowSize: UnwrapRef<typeof import('@vueuse/core')['useWindowSize']>
+    readonly watch: UnwrapRef<typeof import('vue')['watch']>
+    readonly watchArray: UnwrapRef<typeof import('@vueuse/core')['watchArray']>
+    readonly watchAtMost: UnwrapRef<typeof import('@vueuse/core')['watchAtMost']>
+    readonly watchDebounced: UnwrapRef<typeof import('@vueuse/core')['watchDebounced']>
+    readonly watchEffect: UnwrapRef<typeof import('vue')['watchEffect']>
+    readonly watchIgnorable: UnwrapRef<typeof import('@vueuse/core')['watchIgnorable']>
+    readonly watchOnce: UnwrapRef<typeof import('@vueuse/core')['watchOnce']>
+    readonly watchPausable: UnwrapRef<typeof import('@vueuse/core')['watchPausable']>
+    readonly watchPostEffect: UnwrapRef<typeof import('vue')['watchPostEffect']>
+    readonly watchSyncEffect: UnwrapRef<typeof import('vue')['watchSyncEffect']>
+    readonly watchThrottled: UnwrapRef<typeof import('@vueuse/core')['watchThrottled']>
+    readonly watchTriggerable: UnwrapRef<typeof import('@vueuse/core')['watchTriggerable']>
+    readonly watchWithFilter: UnwrapRef<typeof import('@vueuse/core')['watchWithFilter']>
+    readonly whenever: UnwrapRef<typeof import('@vueuse/core')['whenever']>
+  }
+}

assets/components.d.ts

@@ -0,0 +1,49 @@
+// generated by unplugin-vue-components
+// We suggest you to commit this file into source control
+// Read more: https://github.com/vuejs/core/pull/3399
+import '@vue/runtime-core'
+
+export {}
+
+declare module '@vue/runtime-core' {
+  export interface GlobalComponents {
+    CarbonCaretDown: typeof import('~icons/carbon/caret-down')['default']
+    CilColumns: typeof import('~icons/cil/columns')['default']
+    CilFindInPage: typeof import('~icons/cil/find-in-page')['default']
+    ComplexLogItem: typeof import('./components/LogViewer/ComplexLogItem.vue')['default']
+    ContainerStat: typeof import('./components/LogViewer/ContainerStat.vue')['default']
+    ContainerTitle: typeof import('./components/LogViewer/ContainerTitle.vue')['default']
+    DockerEventLogItem: typeof import('./components/LogViewer/DockerEventLogItem.vue')['default']
+    DropdownMenu: typeof import('./components/DropdownMenu.vue')['default']
+    FieldList: typeof import('./components/LogViewer/FieldList.vue')['default']
+    FuzzySearchModal: typeof import('./components/FuzzySearchModal.vue')['default']
+    InfiniteLoader: typeof import('./components/InfiniteLoader.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']
+    LogViewer: typeof import('./components/LogViewer/LogViewer.vue')['default']
+    LogViewerWithSource: typeof import('./components/LogViewer/LogViewerWithSource.vue')['default']
+    MdiDotsVertical: typeof import('~icons/mdi/dots-vertical')['default']
+    MdiLightChevronDoubleDown: typeof import('~icons/mdi-light/chevron-double-down')['default']
+    MdiLightChevronLeft: typeof import('~icons/mdi-light/chevron-left')['default']
+    MdiLightChevronRight: typeof import('~icons/mdi-light/chevron-right')['default']
+    MdiLightCog: typeof import('~icons/mdi-light/cog')['default']
+    MdiLightMagnify: typeof import('~icons/mdi-light/magnify')['default']
+    MobileMenu: typeof import('./components/MobileMenu.vue')['default']
+    OcticonContainer24: typeof import('~icons/octicon/container24')['default']
+    OcticonDownload24: typeof import('~icons/octicon/download24')['default']
+    OcticonTrash24: typeof import('~icons/octicon/trash24')['default']
+    PastTime: typeof import('./components/PastTime.vue')['default']
+    RelativeTime: typeof import('./components/RelativeTime.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']
+    SimpleLogItem: typeof import('./components/LogViewer/SimpleLogItem.vue')['default']
+    SkippedEntriesLogItem: typeof import('./components/LogViewer/SkippedEntriesLogItem.vue')['default']
+    ZigZag: typeof import('./components/LogViewer/ZigZag.vue')['default']
+  }
+}

assets/components/ContainerTitle.vue

@@ -1,30 +0,0 @@
-<template>
-  <div class="name columns is-marginless">
-    <span class="column">{{ value }}</span>
-    <span class="column is-narrow" v-if="closable">
-      <button class="delete is-medium" @click="$emit('close')"></button>
-    </span>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    value: String,
-    closable: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  name: "ContainerTitle",
-};
-</script>
-
-<style lang="scss" scoped>
-.name {
-  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
-  background: rgba(0, 0, 0, 0.1);
-  font-weight: bold;
-  font-family: monospace;
-}
-</style>

assets/components/DropdownMenu.vue

@@ -0,0 +1,44 @@
+<template>
+  <div class="dropdown is-hoverable">
+    <div class="dropdown-trigger">
+      <button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
+        <span class="icon">
+          <mdi-dots-vertical />
+        </span>
+      </button>
+    </div>
+    <div class="dropdown-menu" id="dropdown-menu" role="menu">
+      <div class="dropdown-content">
+        <slot></slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup></script>
+
+<style lang="scss" scoped>
+.minimal .button {
+  background-color: rgba(0, 0, 0, 0);
+  border: none;
+  padding: 0.1em;
+  height: 100%;
+
+  & > .icon {
+    height: 100%;
+    & > svg {
+      align-self: flex-start;
+      height: 0.85em;
+    }
+  }
+}
+.is-top {
+  & .dropdown-menu {
+    top: 0;
+  }
+
+  &.is-last .dropdown-menu {
+    top: -30px;
+  }
+}
+</style>

assets/components/FuzzySearchModal.vue

@@ -0,0 +1,135 @@
+<template>
+  <div class="panel">
+    <o-autocomplete
+      ref="autocomplete"
+      v-model="query"
+      :placeholder="$t('placeholder.search-containers')"
+      open-on-focus
+      keep-first
+      expanded
+      :data="data"
+      @select="selected"
+    >
+      <template #default="{ option: item }">
+        <div class="media">
+          <div class="media-left">
+            <span class="icon is-small" :class="item.state">
+              <octicon-container-24 />
+            </span>
+          </div>
+          <div class="media-content">
+            {{ item.name }}
+          </div>
+          <div class="media-right">
+            <span
+              class="icon is-small column-icon"
+              @click.stop.prevent="addColumn(item)"
+              :title="$t('tooltip.pin-column')"
+            >
+              <cil-columns />
+            </span>
+          </div>
+        </div>
+      </template>
+    </o-autocomplete>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { type Container } from "@/types/Container";
+import { useFuse } from "@vueuse/integrations/useFuse";
+
+const { maxResults: resultLimit = 20 } = defineProps<{
+  maxResults?: number;
+}>();
+
+const emit = defineEmits<{
+  (e: "close"): void;
+}>();
+
+const query = ref("");
+const autocomplete = ref<HTMLElement>();
+const router = useRouter();
+const store = useContainerStore();
+const { containers } = storeToRefs(store);
+
+const list = computed(() => {
+  return containers.value.map(({ id, created, name, state }) => {
+    return {
+      id,
+      created,
+      name,
+      state,
+    };
+  });
+});
+
+const { results } = useFuse(query, list, {
+  fuseOptions: { keys: ["name"], includeScore: true },
+  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 0;
+      }
+    })
+    .map(({ item }) => item);
+});
+watchOnce(autocomplete, () => autocomplete.value?.focus());
+
+function selected({ id }: { id: string }) {
+  router.push({ name: "container-id", params: { id } });
+  emit("close");
+}
+function addColumn(container: Container) {
+  store.appendActiveContainer(container);
+  emit("close");
+}
+</script>
+
+<style lang="scss" scoped>
+.panel {
+  min-height: 400px;
+  width: 580px;
+}
+
+.running {
+  color: var(--primary-color);
+}
+
+.exited {
+  color: var(--scheme-main-ter);
+}
+
+.column-icon {
+  &:hover {
+    color: var(--secondary-color);
+  }
+}
+
+:deep(a.dropdown-item) {
+  padding-right: 1em;
+  .media-right {
+    visibility: hidden;
+  }
+  &:hover .media-right {
+    visibility: visible;
+  }
+}
+
+.icon {
+  vertical-align: middle;
+}
+</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,37 +1,73 @@
 <template>
-  <div ref="observer" class="control" :class="{ 'is-loading': isLoading }"></div>
+  <div ref="root" class="infinte-loader">
+    <div class="spinner" v-show="isLoading">
+      <div class="bounce1"></div>
+      <div class="bounce2"></div>
+      <div class="bounce3"></div>
+    </div>
+  </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 = () => {}, enabled } = defineProps<{
+  onLoadMore: () => void;
+  enabled: boolean;
+}>();
 
-    intersectionObserver.observe(this.$refs.observer);
-  },
-};
+const isLoading = ref(false);
+const root = ref<HTMLElement>();
+
+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"></style>
+
+<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/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 unobserve = jest.fn();
-    global.IntersectionObserver = jest.fn(() => ({
-      observe,
-      unobserve,
-    }));
-    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">today at 10:55 AM</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">today at 10:55 AM</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">today at 10:55 AM</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">today at 10:55 AM</span> <span class="text">This is a <mark>test</mark> &lt;hi&gt;&lt;/hi&gt;</span></li>
-        </ul>
-      `);
-    });
-  });
-});

assets/components/LogEventSource.vue

@@ -1,94 +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);
-  },
-  methods: {
-    loadLogs(id) {
-      if (this.es) {
-        this.es.close();
-        this.messages = [];
-        this.buffer = [];
-        this.es = null;
-      }
-      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() });
-        flushNow();
-      });
-      this.es.addEventListener("error", (e) => console.log("EventSource failed: " + JSON.stringify(e)));
-
-      const flushBuffer = debounce(() => flushNow(), 250, { maxWait: 1000 });
-      const flushNow = () => {
-        this.messages.push(...this.buffer);
-        this.buffer = [];
-      };
-      this.es.onmessage = (e) => {
-        this.buffer.push(this.parseMessage(e.data));
-        flushBuffer();
-      };
-      this.$once("hook:beforeDestroy", () => this.es.close());
-    },
-    async loadOlderLogs() {
-      if (this.messages.length < 300) return;
-
-      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(`/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);
-      }
-    },
-    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).trim();
-      return { key, date, message };
-    },
-  },
-  watch: {
-    id(newValue, oldValue) {
-      if (oldValue !== newValue) {
-        this.loadLogs(newValue);
-      }
-    },
-  },
-};
-</script>

assets/components/LogViewer.vue

@@ -1,125 +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">{{ item.date | relativeTime }}</span>
-      <span class="text" v-html="colorize(item.message)"></span>
-    </li>
-  </ul>
-</template>
-
-<script>
-import { mapActions, mapGetters, mapState } from "vuex";
-import { formatRelative } from "date-fns";
-import AnsiConvertor from "ansi-to-html";
-import DOMPurify from "dompurify";
-
-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: {},
-  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;
-    },
-  },
-  filters: {
-    relativeTime(date) {
-      return formatRelative(date, new Date());
-    },
-  },
-};
-</script>
-<style scoped lang="scss">
-.events {
-  padding: 10px;
-  font-family: "Roboto Mono", 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;
-}
-
-.text {
-  white-space: pre-wrap;
-}
-
-li.event {
-  color: #f14668;
-}
-
-::v-deep mark {
-  border-radius: 2px;
-  background-color: #ffdd57;
-  animation: pops 0.2s 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,57 @@
+<template>
+  <div class="columns is-1 is-variable">
+    <div class="column is-narrow" v-if="showTimestamp">
+      <log-date :date="logEntry.date"></log-date>
+    </div>
+    <div class="column">
+      <ul class="fields" @click="expanded = !expanded">
+        <li v-for="(value, name) in validValues(logEntry.message)">
+          <span class="has-text-grey">{{ name }}=</span>
+          <span class="has-text-weight-bold" v-html="markSearch(value)"></span>
+        </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[][];
+}>();
+
+let expanded = $ref(false);
+
+function validValues(obj: Record<string, any>) {
+  return Object.fromEntries(Object.entries(obj).filter(([_, value]) => value !== undefined));
+}
+</script>
+
+<style lang="scss" scoped>
+.fields {
+  display: inline-block;
+  list-style: none;
+
+  &:hover {
+    cursor: pointer;
+    &::after {
+      content: "expand json";
+      color: var(--secondary-color);
+      display: inline-block;
+      margin-left: 0.5em;
+      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+    }
+  }
+
+  li {
+    display: inline-block;
+    & + li {
+      margin-left: 1em;
+    }
+  }
+}
+</style>

assets/components/LogViewer/ContainerStat.vue

@@ -0,0 +1,33 @@
+<template>
+  <div class="is-size-7 is-uppercase columns is-marginless is-mobile" v-if="container.stat">
+    <div class="column is-narrow has-text-weight-bold">
+      {{ container.state }}
+    </div>
+    <div class="column is-narrow" v-if="container.stat.memoryUsage !== null">
+      <span class="has-text-weight-light has-spacer">mem</span>
+      <span class="has-text-weight-bold">
+        {{ formatBytes(container.stat.memoryUsage) }}
+      </span>
+    </div>
+
+    <div class="column is-narrow" v-if="container.stat.cpu !== null">
+      <span class="has-text-weight-light has-spacer">load</span>
+      <span class="has-text-weight-bold"> {{ container.stat.cpu }}% </span>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { type Container } from "@/types/Container";
+import { type ComputedRef } from "vue";
+
+const container = inject("container") as ComputedRef<Container>;
+</script>
+
+<style lang="scss" scoped>
+.has-spacer {
+  &::after {
+    content: " ";
+  }
+}
+</style>

assets/components/LogViewer/ContainerTitle.vue

@@ -0,0 +1,17 @@
+<template>
+  <div class="columns is-marginless has-text-weight-bold is-family-monospace">
+    <span class="column is-ellipsis">
+      {{ container.name }}
+      <span class="tag is-dark">{{ container.image.replace(/@sha.*/, "") }}</span>
+    </span>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { type Container } from "@/types/Container";
+import { type ComputedRef } from "vue";
+
+const container = inject("container") as ComputedRef<Container>;
+</script>
+
+<style lang="scss" scoped></style>

assets/components/LogViewer/DockerEventLogItem.vue

@@ -0,0 +1,24 @@
+<template>
+  <span class="text" :data-event="logEntry.event" v-html="logEntry.message"></span>
+</template>
+<script lang="ts" setup>
+import { DockerEventLogEntry } from "@/models/LogEntry";
+
+defineProps<{
+  logEntry: DockerEventLogEntry;
+}>();
+</script>
+
+<style lang="scss" scoped>
+span {
+  &[data-event="container-stopped"] {
+    color: #f14668;
+  }
+  &[data-event="container-started"] {
+    color: hsl(141, 53%, 53%);
+  }
+  &.text {
+    white-space: pre-wrap;
+  }
+}
+</style>

assets/components/LogViewer/FieldList.vue

@@ -0,0 +1,76 @@
+<template>
+  <ul v-if="expanded" ref="root">
+    <li v-for="(value, name) in fields">
+      <template v-if="isObject(value)">
+        <span class="has-text-grey">{{ 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)"> {{ hasField(name) ? "remove" : "add" }}&nbsp;</a>
+        <span class="has-text-grey">{{ name }}=</span>[
+        <span class="has-text-weight-bold" v-for="(item, index) in value">
+          {{ item }}
+          <span v-if="index !== value.length - 1">,</span>
+        </span>
+        ]
+      </template>
+      <template v-else>
+        <a @click="toggleField(name)"> {{ hasField(name) ? "remove" : "add" }}&nbsp;</a>
+        <span class="has-text-grey">{{ name }}=</span><span class="has-text-weight-bold">{{ 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 lang="scss" scoped>
+ul {
+  margin-left: 2em;
+}
+</style>

assets/components/LogViewer/LogActionsToolbar.vue

@@ -0,0 +1,69 @@
+<template>
+  <dropdown-menu class="is-right">
+    <a class="dropdown-item" @click="onClearClicked">
+      <div class="level is-justify-content-start">
+        <div class="level-left">
+          <div class="level-item">
+            <octicon-trash-24 class="mr-4" />
+          </div>
+        </div>
+        <div class="level-right">
+          <div class="level-item">{{ $t("toolbar.clear") }}</div>
+        </div>
+      </div>
+    </a>
+    <a class="dropdown-item" :href="`${base}/api/logs/download?id=${container.id}`">
+      <div class="level is-justify-content-start">
+        <div class="level-left">
+          <div class="level-item">
+            <octicon-download-24 class="mr-4" />
+          </div>
+        </div>
+        <div class="level-right">
+          <div class="level-item">{{ $t("toolbar.download") }}</div>
+        </div>
+      </div>
+    </a>
+    <hr class="dropdown-divider" />
+    <a class="dropdown-item" @click="showSearch = true">
+      <div class="level is-justify-content-start">
+        <div class="level-left">
+          <div class="level-item">
+            <mdi-light-magnify class="mr-4" />
+          </div>
+        </div>
+        <div class="level-right">
+          <div class="level-item">{{ $t("toolbar.search") }}</div>
+        </div>
+      </div>
+    </a>
+  </dropdown-menu>
+</template>
+
+<script lang="ts" setup>
+import { type ComputedRef } from "vue";
+import { type Container } from "@/types/Container";
+
+const { showSearch } = useSearchFilter();
+const { base } = config;
+
+const { onClearClicked = (e: Event) => {} } = defineProps<{
+  onClearClicked: (e: Event) => void;
+}>();
+
+const container = inject("container") as ComputedRef<Container>;
+</script>
+
+<style lang="scss" scoped>
+#download.button,
+#clear.button {
+  .icon {
+    height: 80%;
+  }
+
+  &:hover {
+    color: var(--primary-color);
+    border-color: var(--primary-color);
+  }
+}
+</style>

assets/components/LogViewer/LogContainer.vue

@@ -0,0 +1,70 @@
+<template>
+  <scrollable-view :scrollable="scrollable" v-if="container">
+    <template #header v-if="showTitle">
+      <div class="mr-0 columns is-vcentered is-marginless is-hidden-mobile">
+        <div class="column is-clipped is-paddingless">
+          <container-title @close="$emit('close')" />
+        </div>
+        <div class="column is-narrow is-paddingless">
+          <container-stat v-if="container.stat" />
+        </div>
+
+        <div class="mr-2 column is-narrow is-paddingless">
+          <log-actions-toolbar :onClearClicked="onClearClicked" />
+        </div>
+        <div class="mr-2 column is-narrow is-paddingless" v-if="closable">
+          <button class="delete is-medium" @click="emit('close')"></button>
+        </div>
+      </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 emit = defineEmits<{
+  (event: "close"): void;
+}>();
+
+const store = useContainerStore();
+
+const container = store.currentContainer($$(id));
+
+provide("container", container);
+
+const viewer = ref<InstanceType<typeof LogViewerWithSource>>();
+
+function onClearClicked() {
+  viewer.value?.clear();
+}
+</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;
+  }
+}
+</style>

assets/components/LogViewer/LogDate.vue

@@ -0,0 +1,45 @@
+<template>
+  <relative-time :date="date" class="date"></relative-time>
+</template>
+<script lang="ts" setup>
+defineProps<{
+  date: Date;
+}>();
+</script>
+
+<style lang="scss" scoped>
+.date {
+  padding-left: 5px;
+  padding-right: 5px;
+  border-radius: 3px;
+  white-space: nowrap;
+}
+
+@media (prefers-color-scheme: dark) {
+  .date {
+    background-color: #262626;
+    color: #258ccd;
+  }
+}
+
+[data-theme="dark"] {
+  .date {
+    background-color: #262626;
+    color: #258ccd;
+  }
+}
+
+@media (prefers-color-scheme: light) {
+  .date {
+    background-color: #f0f0f0;
+    color: #009900;
+  }
+}
+
+[data-theme="light"] {
+  .date {
+    background-color: #f0f0f0;
+    color: #009900;
+  }
+}
+</style>

assets/components/LogViewer/LogEventSource.spec.ts

@@ -0,0 +1,203 @@
+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";
+
+vi.mock("@/stores/config", () => ({
+  __esModule: true,
+  default: { base: "" },
+}));
+
+/**
+ * @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: {
+          container: computed(() => ({ id: "abc", image: "test:v123" })),
+          scrollingPaused: computed(() => false),
+        },
+      },
+      slots: {
+        default: `
+        <template #scoped="params"><log-viewer :messages="params.messages"></log-viewer></template>
+        `,
+      },
+      props: {},
+    });
+  }
+
+  test("renders correctly", async () => {
+    const wrapper = createLogEventSource();
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  test("should connect to EventSource", async () => {
+    const wrapper = createLogEventSource();
+    sources["/api/logs/stream?id=abc&lastEventId="].emitOpen();
+    expect(sources["/api/logs/stream?id=abc&lastEventId="].readyState).toBe(1);
+    wrapper.unmount();
+  });
+
+  test("should close EventSource", async () => {
+    const wrapper = createLogEventSource();
+    sources["/api/logs/stream?id=abc&lastEventId="].emitOpen();
+    wrapper.unmount();
+    expect(sources["/api/logs/stream?id=abc&lastEventId="].readyState).toBe(2);
+  });
+
+  test("should parse messages", async () => {
+    const wrapper = createLogEventSource();
+    sources["/api/logs/stream?id=abc&lastEventId="].emitOpen();
+    sources["/api/logs/stream?id=abc&lastEventId="].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["/api/logs/stream?id=abc&lastEventId="].emitOpen();
+      sources["/api/logs/stream?id=abc&lastEventId="].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["/api/logs/stream?id=abc&lastEventId="].emitOpen();
+      sources["/api/logs/stream?id=abc&lastEventId="].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["/api/logs/stream?id=abc&lastEventId="].emitOpen();
+      sources["/api/logs/stream?id=abc&lastEventId="].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["/api/logs/stream?id=abc&lastEventId="].emitOpen();
+      sources["/api/logs/stream?id=abc&lastEventId="].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["/api/logs/stream?id=abc&lastEventId="].emitOpen();
+      sources["/api/logs/stream?id=abc&lastEventId="].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["/api/logs/stream?id=abc&lastEventId="].emitOpen();
+      sources["/api/logs/stream?id=abc&lastEventId="].emitMessage({
+        data: `{"ts":1560336942459, "m":"foo bar", "id":1}`,
+      });
+      sources["/api/logs/stream?id=abc&lastEventId="].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,25 @@
+<template>
+  <infinite-loader :onLoadMore="fetchMore" :enabled="messages.length > 100"></infinite-loader>
+  <slot :messages="messages"></slot>
+</template>
+
+<script lang="ts" setup>
+import { type Container } from "@/types/Container";
+import { type ComputedRef } from "vue";
+
+const emit = defineEmits<{
+  (e: "loading-more", value: boolean): void;
+}>();
+
+const container = inject("container") as ComputedRef<Container>;
+const { messages, loadOlderLogs } = useLogStream(container);
+
+const beforeLoading = () => emit("loading-more", true);
+const afterLoading = () => emit("loading-more", false);
+
+defineExpose({
+  clear: () => (messages.value = []),
+});
+
+const fetchMore = () => loadOlderLogs({ beforeLoading, afterLoading });
+</script>

assets/components/LogViewer/LogViewer.vue

@@ -0,0 +1,106 @@
+<template>
+  <ul class="events" ref="events" :class="{ 'disable-wrap': !softWrap, [size]: true }">
+    <li
+      v-for="(item, index) in filtered"
+      :key="item.id"
+      :data-key="item.id"
+      :class="{ selected: toRaw(item) === toRaw(lastSelectedItem) }"
+    >
+      <div class="line-options" v-show="isSearching()">
+        <dropdown-menu :class="{ 'is-last': index === filtered.length - 1 }" class="is-top minimal">
+          <a class="dropdown-item" @click="handleJumpLineSelected($event, item)" :href="`#${item.id}`">
+            <div class="level is-justify-content-start">
+              <div class="level-left">
+                <div class="level-item">
+                  <cil-find-in-page class="mr-4" />
+                </div>
+              </div>
+              <div class="level-right">
+                <div class="level-item">Jump to Context</div>
+              </div>
+            </div>
+          </a>
+        </dropdown-menu>
+      </div>
+      <component :is="item.getComponent()" :log-entry="item" :visible-keys="visibleKeys.value"></component>
+    </li>
+  </ul>
+</template>
+
+<script lang="ts" setup>
+import { type ComputedRef, toRaw } from "vue";
+import { useRouteHash } from "@vueuse/router";
+import { type Container } from "@/types/Container";
+import { type JSONObject, LogEntry } from "@/models/LogEntry";
+
+const props = defineProps<{
+  messages: LogEntry<string | JSONObject>[];
+}>();
+
+let visibleKeys = persistentVisibleKeys(inject("container") as ComputedRef<Container>);
+
+const { filteredPayload } = useVisibleFilter(visibleKeys);
+const { filteredMessages, resetSearch, isSearching } = useSearchFilter();
+
+const { messages } = toRefs(props);
+const visible = filteredPayload(messages);
+const filtered = filteredMessages(visible);
+
+const events = ref<HTMLElement>();
+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) => {
+    document.querySelector(`[data-key="${hash.substring(1)}"]`)?.scrollIntoView({ block: "center" });
+  },
+  { immediate: true, flush: "post" }
+);
+</script>
+<style scoped lang="scss">
+.events {
+  padding: 1em 0;
+  font-family: SFMono-Regular, Consolas, Liberation Mono, monaco, Menlo, monospace;
+
+  & > li {
+    display: flex;
+    word-wrap: break-word;
+    padding: 0.2em 1em;
+    &:last-child {
+      scroll-snap-align: end;
+      scroll-margin-block-end: 5rem;
+    }
+    &:nth-child(odd) {
+      background-color: rgba(125, 125, 125, 0.08);
+    }
+
+    &.selected {
+      border: 1px var(--secondary-color) solid;
+    }
+
+    & > .line-options {
+      display: flex;
+      flex-direction: row-reverse;
+      margin-right: 1em;
+    }
+  }
+
+  &.small {
+    font-size: 60%;
+  }
+
+  &.medium {
+    font-size: 80%;
+  }
+
+  &.large {
+    font-size: 120%;
+  }
+}
+</style>

assets/components/LogViewer/LogViewerWithSource.vue

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

assets/components/LogViewer/SimpleLogItem.vue

@@ -0,0 +1,32 @@
+<template>
+  <div class="columns is-1 is-variable">
+    <div class="column is-narrow" v-if="showTimestamp">
+      <log-date :date="logEntry.date"></log-date>
+    </div>
+    <div class="text column" 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: true });
+defineProps<{
+  logEntry: SimpleLogEntry;
+}>();
+
+const { markSearch } = useSearchFilter();
+const colorize = (value: string) => markSearch(ansiConvertor.toHtml(value));
+</script>
+
+<style lang="scss" scoped>
+.disable-wrap {
+  .text {
+    white-space: nowrap;
+  }
+}
+
+.text {
+  white-space: pre-wrap;
+}
+</style>

assets/components/LogViewer/SkippedEntriesLogItem.vue

@@ -0,0 +1,23 @@
+<template>
+  <div class="is-flex-grow-1 has-text-centered my-4">
+    <div class="is-relative">
+      <zig-zag class="is-overlay mt-2"></zig-zag>
+      <span class="text is-relative py-2 px-4">{{ $t("error.logs-skipped", { total: logEntry.totalSkipped }) }}</span>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import { SkippedLogsEntry } from "@/models/LogEntry";
+
+defineProps<{
+  logEntry: SkippedLogsEntry;
+}>();
+</script>
+
+<style lang="scss" scoped>
+.text {
+  font-weight: bold;
+  white-space: pre-wrap;
+  background-color: var(--body-background-color);
+}
+</style>

assets/components/LogViewer/ZigZag.vue

@@ -0,0 +1,19 @@
+<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="line" />
+        <line x1="15" y1="8" x2="30" y2="0" class="line" />
+      </pattern>
+    </defs>
+    <rect x="0" y="0" width="100%" height="100%" fill="url(#zigzag)"></rect>
+  </svg>
+</template>
+
+<style lang="scss" scoped>
+.line {
+  stroke: var(--primary-color);
+  stroke-width: 1;
+  stroke-linecap: round;
+}
+</style>

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

@@ -0,0 +1,206 @@
+// Vitest Snapshot v1
+
+exports[`<LogEventSource /> > render html correctly > should render dates with 12 hour style 1`] = `
+"<ul class=\\"events medium\\" data-v-2e92daca=\\"\\">
+  <li data-key=\\"1\\" class=\\"\\" data-v-2e92daca=\\"\\">
+    <div class=\\"line-options\\" data-v-2e92daca=\\"\\" style=\\"display: none;\\">
+      <div class=\\"dropdown is-hoverable is-last is-top minimal\\" data-v-539164cb=\\"\\" data-v-2e92daca=\\"\\">
+        <div class=\\"dropdown-trigger\\" data-v-539164cb=\\"\\"><button class=\\"button\\" aria-haspopup=\\"true\\" aria-controls=\\"dropdown-menu\\" data-v-539164cb=\\"\\"><span class=\\"icon\\" data-v-539164cb=\\"\\"><svg viewBox=\\"0 0 24 24\\" width=\\"1.2em\\" height=\\"1.2em\\" data-v-539164cb=\\"\\"><path fill=\\"currentColor\\" d=\\"M12 16a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2m0-6a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2m0-6a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2Z\\"></path></svg></span></button></div>
+        <div class=\\"dropdown-menu\\" id=\\"dropdown-menu\\" role=\\"menu\\" data-v-539164cb=\\"\\">
+          <div class=\\"dropdown-content\\" data-v-539164cb=\\"\\"><a class=\\"dropdown-item\\" href=\\"#1\\" data-v-2e92daca=\\"\\">
+              <div class=\\"level is-justify-content-start\\" data-v-2e92daca=\\"\\">
+                <div class=\\"level-left\\" data-v-2e92daca=\\"\\">
+                  <div class=\\"level-item\\" data-v-2e92daca=\\"\\"><svg viewBox=\\"0 0 512 512\\" width=\\"1.2em\\" height=\\"1.2em\\" class=\\"mr-4\\" data-v-2e92daca=\\"\\">
+                      <path fill=\\"currentColor\\" d=\\"M334.627 16H48v480h424V153.373ZM440 464H80V48h241.373L440 166.627Z\\"></path>
+                      <path fill=\\"currentColor\\" d=\\"M239.861 152a95.861 95.861 0 1 0 53.624 175.284l68.03 68.029l22.627-22.626l-67.5-67.5A95.816 95.816 0 0 0 239.861 152ZM176 247.861a63.862 63.862 0 1 1 63.861 63.861A63.933 63.933 0 0 1 176 247.861Z\\"></path>
+                    </svg></div>
+                </div>
+                <div class=\\"level-right\\" data-v-2e92daca=\\"\\">
+                  <div class=\\"level-item\\" data-v-2e92daca=\\"\\">Jump to Context</div>
+                </div>
+              </div>
+            </a></div>
+        </div>
+      </div>
+    </div>
+    <div class=\\"columns is-1 is-variable\\" visible-keys=\\"\\" data-v-a49e52d4=\\"\\" data-v-2e92daca=\\"\\">
+      <div class=\\"column is-narrow\\" data-v-a49e52d4=\\"\\"><time datetime=\\"2019-06-12T10:55:42.459Z\\" class=\\"date\\" data-v-de513450=\\"\\" data-v-a49e52d4=\\"\\">06/12/2019 10:55:42 AM</time></div>
+      <div class=\\"text column\\" data-v-a49e52d4=\\"\\">&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 class=\\"events medium\\" data-v-2e92daca=\\"\\">
+  <li data-key=\\"1\\" class=\\"\\" data-v-2e92daca=\\"\\">
+    <div class=\\"line-options\\" data-v-2e92daca=\\"\\" style=\\"display: none;\\">
+      <div class=\\"dropdown is-hoverable is-last is-top minimal\\" data-v-539164cb=\\"\\" data-v-2e92daca=\\"\\">
+        <div class=\\"dropdown-trigger\\" data-v-539164cb=\\"\\"><button class=\\"button\\" aria-haspopup=\\"true\\" aria-controls=\\"dropdown-menu\\" data-v-539164cb=\\"\\"><span class=\\"icon\\" data-v-539164cb=\\"\\"><svg viewBox=\\"0 0 24 24\\" width=\\"1.2em\\" height=\\"1.2em\\" data-v-539164cb=\\"\\"><path fill=\\"currentColor\\" d=\\"M12 16a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2m0-6a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2m0-6a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2Z\\"></path></svg></span></button></div>
+        <div class=\\"dropdown-menu\\" id=\\"dropdown-menu\\" role=\\"menu\\" data-v-539164cb=\\"\\">
+          <div class=\\"dropdown-content\\" data-v-539164cb=\\"\\"><a class=\\"dropdown-item\\" href=\\"#1\\" data-v-2e92daca=\\"\\">
+              <div class=\\"level is-justify-content-start\\" data-v-2e92daca=\\"\\">
+                <div class=\\"level-left\\" data-v-2e92daca=\\"\\">
+                  <div class=\\"level-item\\" data-v-2e92daca=\\"\\"><svg viewBox=\\"0 0 512 512\\" width=\\"1.2em\\" height=\\"1.2em\\" class=\\"mr-4\\" data-v-2e92daca=\\"\\">
+                      <path fill=\\"currentColor\\" d=\\"M334.627 16H48v480h424V153.373ZM440 464H80V48h241.373L440 166.627Z\\"></path>
+                      <path fill=\\"currentColor\\" d=\\"M239.861 152a95.861 95.861 0 1 0 53.624 175.284l68.03 68.029l22.627-22.626l-67.5-67.5A95.816 95.816 0 0 0 239.861 152ZM176 247.861a63.862 63.862 0 1 1 63.861 63.861A63.933 63.933 0 0 1 176 247.861Z\\"></path>
+                    </svg></div>
+                </div>
+                <div class=\\"level-right\\" data-v-2e92daca=\\"\\">
+                  <div class=\\"level-item\\" data-v-2e92daca=\\"\\">Jump to Context</div>
+                </div>
+              </div>
+            </a></div>
+        </div>
+      </div>
+    </div>
+    <div class=\\"columns is-1 is-variable\\" visible-keys=\\"\\" data-v-a49e52d4=\\"\\" data-v-2e92daca=\\"\\">
+      <div class=\\"column is-narrow\\" data-v-a49e52d4=\\"\\"><time datetime=\\"2019-06-12T10:55:42.459Z\\" class=\\"date\\" data-v-de513450=\\"\\" data-v-a49e52d4=\\"\\">06/12/2019 10:55:42</time></div>
+      <div class=\\"text column\\" data-v-a49e52d4=\\"\\">&lt;test&gt;foo bar&lt;/test&gt;</div>
+    </div>
+  </li>
+</ul>"
+`;
+
+exports[`<LogEventSource /> > render html correctly > should render messages 1`] = `
+"<ul class=\\"events medium\\" data-v-2e92daca=\\"\\">
+  <li data-key=\\"1\\" class=\\"\\" data-v-2e92daca=\\"\\">
+    <div class=\\"line-options\\" data-v-2e92daca=\\"\\" style=\\"display: none;\\">
+      <div class=\\"dropdown is-hoverable is-last is-top minimal\\" data-v-539164cb=\\"\\" data-v-2e92daca=\\"\\">
+        <div class=\\"dropdown-trigger\\" data-v-539164cb=\\"\\"><button class=\\"button\\" aria-haspopup=\\"true\\" aria-controls=\\"dropdown-menu\\" data-v-539164cb=\\"\\"><span class=\\"icon\\" data-v-539164cb=\\"\\"><svg viewBox=\\"0 0 24 24\\" width=\\"1.2em\\" height=\\"1.2em\\" data-v-539164cb=\\"\\"><path fill=\\"currentColor\\" d=\\"M12 16a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2m0-6a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2m0-6a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2Z\\"></path></svg></span></button></div>
+        <div class=\\"dropdown-menu\\" id=\\"dropdown-menu\\" role=\\"menu\\" data-v-539164cb=\\"\\">
+          <div class=\\"dropdown-content\\" data-v-539164cb=\\"\\"><a class=\\"dropdown-item\\" href=\\"#1\\" data-v-2e92daca=\\"\\">
+              <div class=\\"level is-justify-content-start\\" data-v-2e92daca=\\"\\">
+                <div class=\\"level-left\\" data-v-2e92daca=\\"\\">
+                  <div class=\\"level-item\\" data-v-2e92daca=\\"\\"><svg viewBox=\\"0 0 512 512\\" width=\\"1.2em\\" height=\\"1.2em\\" class=\\"mr-4\\" data-v-2e92daca=\\"\\">
+                      <path fill=\\"currentColor\\" d=\\"M334.627 16H48v480h424V153.373ZM440 464H80V48h241.373L440 166.627Z\\"></path>
+                      <path fill=\\"currentColor\\" d=\\"M239.861 152a95.861 95.861 0 1 0 53.624 175.284l68.03 68.029l22.627-22.626l-67.5-67.5A95.816 95.816 0 0 0 239.861 152ZM176 247.861a63.862 63.862 0 1 1 63.861 63.861A63.933 63.933 0 0 1 176 247.861Z\\"></path>
+                    </svg></div>
+                </div>
+                <div class=\\"level-right\\" data-v-2e92daca=\\"\\">
+                  <div class=\\"level-item\\" data-v-2e92daca=\\"\\">Jump to Context</div>
+                </div>
+              </div>
+            </a></div>
+        </div>
+      </div>
+    </div>
+    <div class=\\"columns is-1 is-variable\\" visible-keys=\\"\\" data-v-a49e52d4=\\"\\" data-v-2e92daca=\\"\\">
+      <div class=\\"column is-narrow\\" data-v-a49e52d4=\\"\\"><time datetime=\\"2019-06-12T10:55:42.459Z\\" class=\\"date\\" data-v-de513450=\\"\\" data-v-a49e52d4=\\"\\">06/12/2019 10:55:42 AM</time></div>
+      <div class=\\"text column\\" data-v-a49e52d4=\\"\\">This is a message.</div>
+    </div>
+  </li>
+</ul>"
+`;
+
+exports[`<LogEventSource /> > render html correctly > should render messages with color 1`] = `
+"<ul class=\\"events medium\\" data-v-2e92daca=\\"\\">
+  <li data-key=\\"1\\" class=\\"\\" data-v-2e92daca=\\"\\">
+    <div class=\\"line-options\\" data-v-2e92daca=\\"\\" style=\\"display: none;\\">
+      <div class=\\"dropdown is-hoverable is-last is-top minimal\\" data-v-539164cb=\\"\\" data-v-2e92daca=\\"\\">
+        <div class=\\"dropdown-trigger\\" data-v-539164cb=\\"\\"><button class=\\"button\\" aria-haspopup=\\"true\\" aria-controls=\\"dropdown-menu\\" data-v-539164cb=\\"\\"><span class=\\"icon\\" data-v-539164cb=\\"\\"><svg viewBox=\\"0 0 24 24\\" width=\\"1.2em\\" height=\\"1.2em\\" data-v-539164cb=\\"\\"><path fill=\\"currentColor\\" d=\\"M12 16a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2m0-6a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2m0-6a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2Z\\"></path></svg></span></button></div>
+        <div class=\\"dropdown-menu\\" id=\\"dropdown-menu\\" role=\\"menu\\" data-v-539164cb=\\"\\">
+          <div class=\\"dropdown-content\\" data-v-539164cb=\\"\\"><a class=\\"dropdown-item\\" href=\\"#1\\" data-v-2e92daca=\\"\\">
+              <div class=\\"level is-justify-content-start\\" data-v-2e92daca=\\"\\">
+                <div class=\\"level-left\\" data-v-2e92daca=\\"\\">
+                  <div class=\\"level-item\\" data-v-2e92daca=\\"\\"><svg viewBox=\\"0 0 512 512\\" width=\\"1.2em\\" height=\\"1.2em\\" class=\\"mr-4\\" data-v-2e92daca=\\"\\">
+                      <path fill=\\"currentColor\\" d=\\"M334.627 16H48v480h424V153.373ZM440 464H80V48h241.373L440 166.627Z\\"></path>
+                      <path fill=\\"currentColor\\" d=\\"M239.861 152a95.861 95.861 0 1 0 53.624 175.284l68.03 68.029l22.627-22.626l-67.5-67.5A95.816 95.816 0 0 0 239.861 152ZM176 247.861a63.862 63.862 0 1 1 63.861 63.861A63.933 63.933 0 0 1 176 247.861Z\\"></path>
+                    </svg></div>
+                </div>
+                <div class=\\"level-right\\" data-v-2e92daca=\\"\\">
+                  <div class=\\"level-item\\" data-v-2e92daca=\\"\\">Jump to Context</div>
+                </div>
+              </div>
+            </a></div>
+        </div>
+      </div>
+    </div>
+    <div class=\\"columns is-1 is-variable\\" visible-keys=\\"\\" data-v-a49e52d4=\\"\\" data-v-2e92daca=\\"\\">
+      <div class=\\"column is-narrow\\" data-v-a49e52d4=\\"\\"><time datetime=\\"2019-06-12T10:55:42.459Z\\" class=\\"date\\" data-v-de513450=\\"\\" data-v-a49e52d4=\\"\\">06/12/2019 10:55:42 AM</time></div>
+      <div class=\\"text column\\" data-v-a49e52d4=\\"\\"><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 class=\\"events medium\\" data-v-2e92daca=\\"\\">
+  <li data-key=\\"2\\" class=\\"\\" data-v-2e92daca=\\"\\">
+    <div class=\\"line-options\\" data-v-2e92daca=\\"\\">
+      <div class=\\"dropdown is-hoverable is-last is-top minimal\\" data-v-539164cb=\\"\\" data-v-2e92daca=\\"\\">
+        <div class=\\"dropdown-trigger\\" data-v-539164cb=\\"\\"><button class=\\"button\\" aria-haspopup=\\"true\\" aria-controls=\\"dropdown-menu\\" data-v-539164cb=\\"\\"><span class=\\"icon\\" data-v-539164cb=\\"\\"><svg viewBox=\\"0 0 24 24\\" width=\\"1.2em\\" height=\\"1.2em\\" data-v-539164cb=\\"\\"><path fill=\\"currentColor\\" d=\\"M12 16a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2m0-6a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2m0-6a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2Z\\"></path></svg></span></button></div>
+        <div class=\\"dropdown-menu\\" id=\\"dropdown-menu\\" role=\\"menu\\" data-v-539164cb=\\"\\">
+          <div class=\\"dropdown-content\\" data-v-539164cb=\\"\\"><a class=\\"dropdown-item\\" href=\\"#2\\" data-v-2e92daca=\\"\\">
+              <div class=\\"level is-justify-content-start\\" data-v-2e92daca=\\"\\">
+                <div class=\\"level-left\\" data-v-2e92daca=\\"\\">
+                  <div class=\\"level-item\\" data-v-2e92daca=\\"\\"><svg viewBox=\\"0 0 512 512\\" width=\\"1.2em\\" height=\\"1.2em\\" class=\\"mr-4\\" data-v-2e92daca=\\"\\">
+                      <path fill=\\"currentColor\\" d=\\"M334.627 16H48v480h424V153.373ZM440 464H80V48h241.373L440 166.627Z\\"></path>
+                      <path fill=\\"currentColor\\" d=\\"M239.861 152a95.861 95.861 0 1 0 53.624 175.284l68.03 68.029l22.627-22.626l-67.5-67.5A95.816 95.816 0 0 0 239.861 152ZM176 247.861a63.862 63.862 0 1 1 63.861 63.861A63.933 63.933 0 0 1 176 247.861Z\\"></path>
+                    </svg></div>
+                </div>
+                <div class=\\"level-right\\" data-v-2e92daca=\\"\\">
+                  <div class=\\"level-item\\" data-v-2e92daca=\\"\\">Jump to Context</div>
+                </div>
+              </div>
+            </a></div>
+        </div>
+      </div>
+    </div>
+    <div class=\\"columns is-1 is-variable\\" visible-keys=\\"\\" data-v-a49e52d4=\\"\\" data-v-2e92daca=\\"\\">
+      <div class=\\"column is-narrow\\" data-v-a49e52d4=\\"\\"><time datetime=\\"2019-06-12T10:55:42.459Z\\" class=\\"date\\" data-v-de513450=\\"\\" data-v-a49e52d4=\\"\\">06/12/2019 10:55:42 AM</time></div>
+      <div class=\\"text column\\" data-v-a49e52d4=\\"\\"><mark>test</mark> bar</div>
+    </div>
+  </li>
+</ul>"
+`;
+
+exports[`<LogEventSource /> > render html correctly > should render messages with html entities 1`] = `
+"<ul class=\\"events medium\\" data-v-2e92daca=\\"\\">
+  <li data-key=\\"1\\" class=\\"\\" data-v-2e92daca=\\"\\">
+    <div class=\\"line-options\\" data-v-2e92daca=\\"\\" style=\\"display: none;\\">
+      <div class=\\"dropdown is-hoverable is-last is-top minimal\\" data-v-539164cb=\\"\\" data-v-2e92daca=\\"\\">
+        <div class=\\"dropdown-trigger\\" data-v-539164cb=\\"\\"><button class=\\"button\\" aria-haspopup=\\"true\\" aria-controls=\\"dropdown-menu\\" data-v-539164cb=\\"\\"><span class=\\"icon\\" data-v-539164cb=\\"\\"><svg viewBox=\\"0 0 24 24\\" width=\\"1.2em\\" height=\\"1.2em\\" data-v-539164cb=\\"\\"><path fill=\\"currentColor\\" d=\\"M12 16a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2m0-6a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2m0-6a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2Z\\"></path></svg></span></button></div>
+        <div class=\\"dropdown-menu\\" id=\\"dropdown-menu\\" role=\\"menu\\" data-v-539164cb=\\"\\">
+          <div class=\\"dropdown-content\\" data-v-539164cb=\\"\\"><a class=\\"dropdown-item\\" href=\\"#1\\" data-v-2e92daca=\\"\\">
+              <div class=\\"level is-justify-content-start\\" data-v-2e92daca=\\"\\">
+                <div class=\\"level-left\\" data-v-2e92daca=\\"\\">
+                  <div class=\\"level-item\\" data-v-2e92daca=\\"\\"><svg viewBox=\\"0 0 512 512\\" width=\\"1.2em\\" height=\\"1.2em\\" class=\\"mr-4\\" data-v-2e92daca=\\"\\">
+                      <path fill=\\"currentColor\\" d=\\"M334.627 16H48v480h424V153.373ZM440 464H80V48h241.373L440 166.627Z\\"></path>
+                      <path fill=\\"currentColor\\" d=\\"M239.861 152a95.861 95.861 0 1 0 53.624 175.284l68.03 68.029l22.627-22.626l-67.5-67.5A95.816 95.816 0 0 0 239.861 152ZM176 247.861a63.862 63.862 0 1 1 63.861 63.861A63.933 63.933 0 0 1 176 247.861Z\\"></path>
+                    </svg></div>
+                </div>
+                <div class=\\"level-right\\" data-v-2e92daca=\\"\\">
+                  <div class=\\"level-item\\" data-v-2e92daca=\\"\\">Jump to Context</div>
+                </div>
+              </div>
+            </a></div>
+        </div>
+      </div>
+    </div>
+    <div class=\\"columns is-1 is-variable\\" visible-keys=\\"\\" data-v-a49e52d4=\\"\\" data-v-2e92daca=\\"\\">
+      <div class=\\"column is-narrow\\" data-v-a49e52d4=\\"\\"><time datetime=\\"2019-06-12T10:55:42.459Z\\" class=\\"date\\" data-v-de513450=\\"\\" data-v-a49e52d4=\\"\\">06/12/2019 10:55:42 AM</time></div>
+      <div class=\\"text column\\" data-v-a49e52d4=\\"\\">&lt;test&gt;foo bar&lt;/test&gt;</div>
+    </div>
+  </li>
+</ul>"
+`;
+
+exports[`<LogEventSource /> > renders correctly 1`] = `
+"<div class=\\"infinte-loader\\" data-v-1cd63c6e=\\"\\">
+  <div class=\\"spinner\\" data-v-1cd63c6e=\\"\\" style=\\"display: none;\\">
+    <div class=\\"bounce1\\" data-v-1cd63c6e=\\"\\"></div>
+    <div class=\\"bounce2\\" data-v-1cd63c6e=\\"\\"></div>
+    <div class=\\"bounce3\\" data-v-1cd63c6e=\\"\\"></div>
+  </div>
+</div>
+<ul class=\\"events medium\\" data-v-2e92daca=\\"\\"></ul>"
+`;
+
+exports[`<LogEventSource /> > should parse messages 1`] = `
+SimpleLogEntry {
+  "_message": "This is a message.",
+  "date": 2019-06-12T10:55:42.459Z,
+  "id": 1,
+}
+`;

assets/components/LogViewerWithSource.vue

@@ -1,19 +0,0 @@
-<template>
-  <log-event-source :id="id" v-slot="eventSource">
-    <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,23 +1,38 @@
 <template>
   <aside>
-    <a
-      role="button"
-      class="navbar-burger burger is-white is-hidden-tablet is-pulled-right"
-      @click="showNav = !showNav"
-      :class="{ 'is-active': showNav }"
-    >
-      <span></span> <span></span> <span></span>
-    </a>
-    <h1 class="title has-text-warning is-marginless">Dozzle</h1>
-    <p class="menu-label is-hidden-mobile" :class="{ 'is-active': showNav }">Containers</p>
+    <div class="columns is-marginless is-gapless is-mobile is-vcentered">
+      <div class="column is-narrow">
+        <router-link :to="{ name: 'index' }">
+          <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 }">{{ $t("label.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 } }"
+          :to="{ name: 'container-id', params: { id: item.id } }"
           active-class="is-active"
           :title="item.name"
         >
-          <div class="hide-overflow">
+          <div class="is-ellipsis">
             {{ item.name }}
           </div>
         </router-link>
@@ -26,50 +41,38 @@
   </aside>
 </template>
 
-<script>
-import { mapGetters } from "vuex";
+<script lang="ts" setup>
+const store = useContainerStore();
+const route = useRoute();
+const { visibleContainers, allContainersById } = storeToRefs(store);
 
-export default {
-  props: [],
-  name: "MobileMenu",
-  data() {
-    return {
-      showNav: false,
-    };
-  },
-  computed: {
-    ...mapGetters(["activeContainersById", "visibleContainers"]),
-  },
-  watch: {
-    $route(to, from) {
-      this.showNav = false;
-    },
-  },
-};
+let showNav = $ref(false);
+
+watch(route, () => {
+  showNav = false;
+});
 </script>
 <style scoped lang="scss">
 aside {
   padding: 1em;
   position: fixed;
-  top: 0;
   left: 0;
   right: 0;
-  background: #222;
-  z-index: 2;
+  background: var(--scheme-main-ter);
+  z-index: 10;
   max-height: 100vh;
   overflow: auto;
 
   .menu-label {
     margin-top: 1em;
   }
-  .hide-overflow {
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow: hidden;
+
+  .title {
+    text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2);
   }
 
-  .burger.is-white {
-    color: #fff;
+  .burger {
+    color: var(--body-color);
   }
 
   .is-hidden-mobile.is-active {
@@ -79,5 +82,15 @@ aside {
   .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

@@ -0,0 +1,19 @@
+<template>
+  <time :datetime="date.toISOString()">{{ text }}</time>
+</template>
+
+<script lang="ts" setup>
+import formatDistance from "date-fns/formatDistance";
+
+const { date } = defineProps<{
+  date: Date;
+}>();
+
+const text = ref<string>();
+function updateFromNow() {
+  text.value = formatDistance(date, new Date(), {
+    addSuffix: true,
+  });
+}
+useIntervalFn(updateFromNow, 30_000, { immediateCallback: true });
+</script>

assets/components/RelativeTime.vue

@@ -0,0 +1,21 @@
+<template>
+  <time :datetime="date.toISOString()">{{ format(date) }}</time>
+</template>
+
+<script lang="ts" setup>
+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 })
+);
+
+function format(date: Date) {
+  const dateStr = dateFormatter.format(date);
+  const timeStr = timeFormatter.format(date);
+  return `${dateStr} ${timeStr}`;
+}
+</script>

assets/components/ScrollProgress.vue

@@ -0,0 +1,122 @@
+<template>
+  <div class="scroll-progress" ref="root">
+    <svg width="100" height="100" viewBox="0 0 100 100" :class="{ indeterminate }">
+      <circle r="44" cx="50" cy="50" />
+    </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>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+const { indeterminate = false, autoHide = false } = defineProps<{
+  indeterminate?: boolean;
+  autoHide?: boolean;
+}>();
+
+const scrollProgress = ref(0);
+const animation = ref({ cancel: () => {} });
+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, { throttle: 100 });
+
+onMounted(() => {
+  watch(
+    activeContainers,
+    () => {
+      scrollElement.value = (root.value?.closest("[data-scrolling]") as HTMLElement) ?? document;
+    },
+    { immediate: true, flush: "post" }
+  );
+});
+
+watchPostEffect(() => {
+  const parent =
+    scrollElement.value === document
+      ? (scrollElement.value as Document).documentElement
+      : (scrollElement.value as HTMLElement);
+  scrollProgress.value = scrollY.value / (parent.scrollHeight - parent.clientHeight);
+  animation.value.cancel();
+  if (autoHide && root.value) {
+    animation.value = root.value.animate(
+      { opacity: [1, 0] },
+      {
+        duration: 500,
+        delay: 2000,
+        fill: "both",
+        easing: "ease-out",
+      }
+    );
+  }
+});
+</script>
+<style scoped lang="scss">
+.scroll-progress {
+  display: inline-block;
+  position: relative;
+  pointer-events: none;
+
+  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 - v-bind(scrollProgress) * 276.32px);
+      stroke-dasharray: 276.32px 276.32px;
+      stroke-linecap: round;
+      stroke-width: 3;
+      will-change: stroke-dashoffset;
+    }
+  }
+}
+
+@keyframes svg-animation {
+  0% {
+    transform: rotateZ(0deg);
+  }
+  100% {
+    transform: rotateZ(360deg);
+  }
+}
+
+@keyframes circle-animation {
+  0%,
+  25% {
+    stroke-dashoffset: 275px;
+    transform: rotate(0);
+  }
+  50%,
+  75% {
+    stroke-dashoffset: 70px;
+    transform: rotate(45deg);
+  }
+
+  100% {
+    stroke-dashoffset: 275px;
+    transform: rotate(360deg);
+  }
+}
+</style>

assets/components/ScrollableView.vue

@@ -3,78 +3,84 @@
     <header v-if="$slots.header">
       <slot name="header"></slot>
     </header>
-    <main ref="content" :data-scrolling="scrollable">
-      <slot></slot>
-      <div ref="scrollObserver"></div>
+    <main :data-scrolling="scrollable ? true : undefined">
+      <div class="is-scrollbar-progress is-hidden-mobile">
+        <scroll-progress v-show="paused" :indeterminate="loading" :auto-hide="!loading"></scroll-progress>
+      </div>
+      <div ref="scrollableContent">
+        <slot :setLoading="setLoading"></slot>
+      </div>
+
+      <div ref="scrollObserver" class="is-scroll-observer"></div>
     </main>
-    <div class="scroll-bar-notification">
+
+    <div class="is-scrollbar-notification">
       <transition name="fade">
-        <button
-          class="button"
-          :class="hasMore ? 'is-warning' : 'is-primary'"
-          @click="scrollToBottom('instant')"
-          v-show="paused"
-        >
-          <icon name="download"></icon>
+        <button class="button" :class="hasMore ? 'has-more' : ''" @click="scrollToBottom()" v-show="paused">
+          <mdi-light-chevron-double-down />
         </button>
       </transition>
     </div>
   </section>
 </template>
 
-<script>
-import Icon from "./Icon";
+<script lang="ts" setup>
+const { scrollable = false } = defineProps<{ scrollable?: boolean }>();
 
-export default {
-  props: {
-    scrollable: {
-      type: Boolean,
-      default: true,
-    },
-  },
-  components: {
-    Icon,
-  },
-  name: "ScrollableView",
-  data() {
-    return {
-      paused: false,
-      hasMore: false,
-    };
-  },
-  mounted() {
-    const { content } = this.$refs;
-    new MutationObserver((e) => {
-      if (!this.paused) {
-        this.scrollToBottom("instant");
-      } else {
-        this.hasMore = true;
-      }
-    }).observe(content, { childList: true, subtree: true });
+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" }
-    );
+provide("scrollingPaused", $$(paused));
 
-    intersectionObserver.observe(this.$refs.scrollObserver);
-  },
+const mutationObserver = new MutationObserver((e) => {
+  if (!paused) {
+    scrollToBottom();
+  } else {
+    const record = e[e.length - 1];
+    if (record.target.children[record.target.children.length - 1] == record.addedNodes[record.addedNodes.length - 1]) {
+      hasMore = true;
+    }
+  }
+});
 
-  methods: {
-    scrollToBottom(behavior = "instant") {
-      this.$refs.scrollObserver.scrollIntoView({ behavior });
-      this.hasMore = false;
-    },
-  },
-};
+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;
 
+  header {
+    position: sticky;
+    top: 0;
+    background: var(--body-background-color);
+    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+    z-index: 1;
+  }
+
   &.is-full-height-scrollable {
     height: 100vh;
+    min-height: 0;
   }
 
   main {
@@ -83,12 +89,55 @@ section {
     scroll-snap-type: y proximity;
   }
 
-  .scroll-bar-notification {
+  .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);
     }
   }
 

assets/components/Search.vue

@@ -1,17 +1,17 @@
 <template>
-  <div class="search columns is-gapless is-vcentered" v-show="showSearch" v-if="settings.search">
+  <div class="search columns is-gapless is-vcentered" v-show="showSearch" v-if="search">
     <div class="column">
       <p class="control has-icons-left">
         <input
           class="input"
           type="text"
           placeholder="Find / RegEx"
-          ref="filter"
-          v-model="filter"
+          ref="input"
+          v-model="searchFilter"
           @keyup.esc="resetSearch()"
         />
         <span class="icon is-left">
-          <icon name="search"></icon>
+          <mdi-light-magnify />
         </span>
       </p>
     </div>
@@ -21,53 +21,19 @@
   </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();
-    });
-  },
-  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>
@@ -75,17 +41,36 @@ export default {
   width: 350px;
   position: fixed;
   padding: 10px;
-  background: rgba(50, 50, 50, 0.9);
+  background: var(--scheme-main-ter);
   top: 0;
   right: 0;
   border-radius: 0 0 0 5px;
   z-index: 10;
-}
-.delete {
-  margin-left: 1em;
-}
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
 
-.icon {
-  padding: 10px 3px;
+  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,69 +1,73 @@
 <template>
   <aside>
     <div class="columns is-marginless">
-      <div class="column">
-        <h1 class="title has-text-warning is-marginless">Dozzle</h1>
+      <div class="column is-paddingless">
+        <router-link :to="{ name: 'index' }">
+          <svg class="logo">
+            <use href="#logo"></use>
+          </svg>
+        </router-link>
       </div>
-      <div class="column is-narrow has-text-right is-hidden-mobile">
-        <router-link
-          :to="{ name: 'settings' }"
-          active-class="is-active"
-          class="button is-small is-rounded is-settings-control"
-        >
+      <div class="column is-narrow has-text-right px-1">
+        <button class="button is-rounded" @click="$emit('search')" title="$t('tooltip.search')">
           <span class="icon">
-            <icon name="cog"></icon>
+            <mdi-light-magnify />
+          </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-rounded">
+          <span class="icon">
+            <mdi-light-cog />
           </span>
         </router-link>
       </div>
     </div>
-    <p class="menu-label is-hidden-mobile">Containers</p>
-    <ul class="menu-list is-hidden-mobile">
+    <p class="menu-label is-hidden-mobile">{{ $t("label.containers") }}</p>
+    <ul class="menu-list is-hidden-mobile" v-if="ready">
       <li v-for="item in visibleContainers" :key="item.id" :class="item.state">
         <router-link
-          :to="{ name: 'container', params: { id: item.id, name: item.name } }"
+          :to="{ name: 'container-id', params: { id: item.id } }"
           active-class="is-active"
           :title="item.name"
         >
-          <div class="hide-overflow">
-            <span
-              @click.stop.prevent="appendActiveContainer(item)"
-              class="icon is-small will-append-container"
-              :class="{ 'is-active': activeContainersById[item.id] }"
-            >
-              <icon name="pin"></icon>
-            </span>
-            {{ item.name }}
+          <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">
+              <span
+                class="icon is-small"
+                @click.stop.prevent="store.appendActiveContainer(item)"
+                v-show="!activeContainersById[item.id]"
+                title="$t('tooltip.pin-column')"
+              >
+                <cil-columns />
+              </span>
+            </div>
           </div>
         </router-link>
       </li>
     </ul>
+    <ul class="menu-list is-hidden-mobile loading" v-else>
+      <li v-for="index in 7" class="my-4"><o-skeleton animated size="large" :key="index"></o-skeleton></li>
+    </ul>
   </aside>
 </template>
 
-<script>
-import { mapActions, mapGetters, mapState } from "vuex";
+<script lang="ts" setup>
+import type { Container } from "@/types/Container";
 
-import Icon from "./Icon";
+const store = useContainerStore();
 
-export default {
-  props: [],
-  name: "SideMenu",
-  components: {
-    Icon,
-  },
-  data() {
-    return {};
-  },
-  computed: {
-    ...mapState(["activeContainers"]),
-    ...mapGetters(["activeContainersById", "visibleContainers"]),
-  },
-  methods: {
-    ...mapActions({
-      appendActiveContainer: "APPEND_ACTIVE_CONTAINER",
-    }),
-  },
-};
+const { activeContainers, visibleContainers, ready } = storeToRefs(store);
+
+const activeContainersById = computed(() =>
+  activeContainers.value.reduce((acc, item) => {
+    acc[item.id] = item;
+    return acc;
+  }, {} as Record<string, Container>)
+);
 </script>
 <style scoped lang="scss">
 aside {
@@ -73,33 +77,39 @@ aside {
   position: fixed;
   width: inherit;
 
-  .hide-overflow {
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow: hidden;
-  }
-
-  .burger.is-white {
-    color: #fff;
-  }
-
   .is-hidden-mobile.is-active {
     display: block !important;
   }
 }
 
+.loading {
+  opacity: 0.5;
+}
+
 li.exited a {
   color: #777;
 }
 
-.will-append-container.icon {
-  transition: transform 0.2s ease-out;
-  &.is-active {
-    pointer-events: none;
-    color: #00d1b2;
-  }
-  .router-link-exact-active & {
+.logo {
+  width: 122px;
+  height: 54px;
+  fill: var(--logo-color);
+}
+
+.menu-list li {
+  .column-icon {
     visibility: hidden;
+
+    & > span {
+      vertical-align: middle;
+    }
+  }
+
+  &:hover .column-icon {
+    visibility: visible;
+    &:hover {
+      color: var(--secondary-color);
+    }
   }
 }
 </style>

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

@@ -1,13 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<LogEventSource /> renders correctly 1`] = `
-<div>
-  <div
-    class="control"
-  />
-   
-  <ul
-    class="events medium"
-  />
-</div>
-`;

assets/composables/eventsource.ts

@@ -0,0 +1,125 @@
+import { type ComputedRef, type Ref } from "vue";
+import debounce from "lodash.debounce";
+import {
+  type LogEvent,
+  type JSONObject,
+  LogEntry,
+  asLogEntry,
+  DockerEventLogEntry,
+  SkippedLogsEntry,
+} from "@/models/LogEntry";
+import { type Container } from "@/types/Container";
+
+function parseMessage(data: string): LogEntry<string | JSONObject> {
+  const e = JSON.parse(data) as LogEvent;
+  return asLogEntry(e);
+}
+
+export function useLogStream(container: ComputedRef<Container>) {
+  let messages: LogEntry<string | JSONObject>[] = $ref([]);
+  let buffer: LogEntry<string | JSONObject>[] = $ref([]);
+  const scrollingPaused = $ref(inject("scrollingPaused") as Ref<boolean>);
+
+  function flushNow() {
+    if (messages.length > config.maxLogs) {
+      if (scrollingPaused) {
+        console.log("Skipping ", buffer.length, " log items");
+        if (messages.at(-1) instanceof SkippedLogsEntry) {
+          const lastEvent = messages.at(-1) as SkippedLogsEntry;
+          const lastItem = buffer.at(-1) as LogEntry<string | JSONObject>;
+          lastEvent.addSkippedEntries(buffer.length, lastItem);
+        } else {
+          const firstItem = buffer.at(0) as LogEntry<string | JSONObject>;
+          const lastItem = buffer.at(-1) as LogEntry<string | JSONObject>;
+          messages.push(new SkippedLogsEntry(new Date(), buffer.length, firstItem, lastItem));
+        }
+        buffer = [];
+      } else {
+        messages.push(...buffer);
+        buffer = [];
+        messages.splice(0, messages.length - config.maxLogs);
+      }
+    } else {
+      messages.push(...buffer);
+      buffer = [];
+    }
+  }
+  const flushBuffer = debounce(flushNow, 250, { maxWait: 1000 });
+  let es: EventSource | null = null;
+  let lastEventId = "";
+
+  function connect({ clear } = { clear: true }) {
+    es?.close();
+
+    if (clear) {
+      flushBuffer.cancel();
+      messages = [];
+      buffer = [];
+      lastEventId = "";
+    }
+
+    es = new EventSource(`${config.base}/api/logs/stream?id=${container.value.id}&lastEventId=${lastEventId}`);
+    es.addEventListener("container-stopped", () => {
+      es?.close();
+      es = null;
+      buffer.push(new DockerEventLogEntry("Container stopped", new Date(), "container-stopped"));
+
+      flushBuffer();
+      flushBuffer.flush();
+    });
+    es.addEventListener("error", (e) => console.error("EventSource failed: " + JSON.stringify(e)));
+    es.onmessage = (e) => {
+      lastEventId = e.lastEventId;
+      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 logs = await (
+      await fetch(`${config.base}/api/logs?id=${container.value.id}&from=${from.toISOString()}&to=${to.toISOString()}`)
+    ).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(() => {
+    if (es) {
+      es.close();
+    }
+  });
+
+  watch(
+    () => container.value.id,
+    () => connect(),
+    { immediate: true }
+  );
+
+  return { ...$$({ messages }), loadOlderLogs };
+}

assets/composables/media.ts

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

assets/composables/search.ts

@@ -0,0 +1,82 @@
+import { type Ref } from "vue";
+import { type LogEntry, type JSONObject, SimpleLogEntry, ComplexLogEntry } from "@/models/LogEntry";
+
+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 (Array.isArray(value) && matchRecord(value, regex)) {
+      return true;
+    }
+  }
+  return false;
+}
+
+export function useSearchFilter() {
+  const regex = computed(() => {
+    const isSmartCase = debouncedSearchFilter.value === debouncedSearchFilter.value.toLowerCase();
+    return isSmartCase ? new RegExp(debouncedSearchFilter.value, "i") : new RegExp(debouncedSearchFilter.value);
+  });
+
+  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.value.test(d.message);
+            } else if (d instanceof ComplexLogEntry) {
+              return matchRecord(d.message, regex.value);
+            }
+            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.value, (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,83 @@
+const DOZZLE_SETTINGS_KEY = "DOZZLE_SETTINGS";
+
+export const DEFAULT_SETTINGS: {
+  search: boolean;
+  size: "small" | "medium" | "large";
+  menuWidth: number;
+  smallerScrollbars: boolean;
+  showTimestamp: boolean;
+  showAllContainers: boolean;
+  lightTheme: "auto" | "dark" | "light";
+  hourStyle: "auto" | "24" | "12";
+  softWrap: boolean;
+} = {
+  search: true,
+  size: "medium",
+  menuWidth: 15,
+  smallerScrollbars: false,
+  showTimestamp: true,
+  showAllContainers: false,
+  lightTheme: "auto",
+  hourStyle: "auto",
+  softWrap: true,
+};
+
+const settings = useStorage(DOZZLE_SETTINGS_KEY, DEFAULT_SETTINGS);
+settings.value = { ...DEFAULT_SETTINGS, ...settings.value };
+
+const search = computed({
+  get: () => settings.value.search,
+  set: (value) => (settings.value.search = value),
+});
+
+const size = computed({
+  get: () => settings.value.size,
+  set: (value) => (settings.value.size = value),
+});
+
+const menuWidth = computed({
+  get: () => settings.value.menuWidth,
+  set: (value) => (settings.value.menuWidth = value),
+});
+const smallerScrollbars = computed({
+  get: () => settings.value.smallerScrollbars,
+  set: (value) => (settings.value.smallerScrollbars = value),
+});
+
+const showTimestamp = computed({
+  get: () => settings.value.showTimestamp,
+  set: (value) => (settings.value.showTimestamp = value),
+});
+
+const showAllContainers = computed({
+  get: () => settings.value.showAllContainers,
+  set: (value) => (settings.value.showAllContainers = value),
+});
+
+const lightTheme = computed({
+  get: () => settings.value.lightTheme,
+  set: (value) => (settings.value.lightTheme = value),
+});
+
+const hourStyle = computed({
+  get: () => settings.value.hourStyle,
+  set: (value) => (settings.value.hourStyle = value),
+});
+
+const softWrap = computed({
+  get: () => settings.value.softWrap,
+  set: (value) => (settings.value.softWrap = value),
+});
+
+export {
+  softWrap,
+  hourStyle,
+  lightTheme,
+  showAllContainers,
+  showTimestamp,
+  smallerScrollbars,
+  menuWidth,
+  size,
+  search,
+  settings
+};

assets/composables/title.ts

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

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/index.ejs

@@ -1,71 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>Dozzle</title>
-    <link href="https://fonts.googleapis.com/css?family=Roboto|Roboto+Mono|Gafata" rel="stylesheet" />
-    <script type="application/json" id="config__json">
-      {
-        "base": "{{ .Base }}",
-        "version": "{{ .Version }}"
-      }
-    </script>
-  </head>
-  <body>
-    <svg
-      aria-hidden="true"
-      class="is-hidden"
-      version="1.1"
-      xmlns="http://www.w3.org/2000/svg"
-      xmlns:xlink="http://www.w3.org/1999/xlink"
-    >
-      <defs>
-        <symbol id="icon-check" viewBox="0 0 24 24">
-          <path
-            d="M19.293 5.293l-10.293 10.293-4.293-4.293c-0.391-0.391-1.024-0.391-1.414 0s-0.391 1.024 0 1.414l5 5c0.391 0.391 1.024 0.391 1.414 0l11-11c0.391-0.391 0.391-1.024 0-1.414s-1.024-0.391-1.414 0z"
-          ></path>
-        </symbol>
-        <symbol id="icon-chevron-down" viewBox="0 0 24 24">
-          <path
-            d="M5.293 9.707l6 6c0.391 0.391 1.024 0.391 1.414 0l6-6c0.391-0.391 0.391-1.024 0-1.414s-1.024-0.391-1.414 0l-5.293 5.293-5.293-5.293c-0.391-0.391-1.024-0.391-1.414 0s-0.391 1.024 0 1.414z"
-          ></path>
-        </symbol>
-        <symbol id="icon-chevron-left" viewBox="0 0 24 24">
-          <path
-            d="M15.707 17.293l-5.293-5.293 5.293-5.293c0.391-0.391 0.391-1.024 0-1.414s-1.024-0.391-1.414 0l-6 6c-0.391 0.391-0.391 1.024 0 1.414l6 6c0.391 0.391 1.024 0.391 1.414 0s0.391-1.024 0-1.414z"
-          ></path>
-        </symbol>
-        <symbol id="icon-chevron-right" viewBox="0 0 24 24">
-          <path
-            d="M9.707 18.707l6-6c0.391-0.391 0.391-1.024 0-1.414l-6-6c-0.391-0.391-1.024-0.391-1.414 0s-0.391 1.024 0 1.414l5.293 5.293-5.293 5.293c-0.391 0.391-0.391 1.024 0 1.414s1.024 0.391 1.414 0z"
-          ></path>
-        </symbol>
-        <symbol id="icon-chevrons-down" viewBox="0 0 24 24">
-          <path
-            d="M6.293 13.707l5 5c0.391 0.391 1.024 0.391 1.414 0l5-5c0.391-0.391 0.391-1.024 0-1.414s-1.024-0.391-1.414 0l-4.293 4.293-4.293-4.293c-0.391-0.391-1.024-0.391-1.414 0s-0.391 1.024 0 1.414zM6.293 6.707l5 5c0.391 0.391 1.024 0.391 1.414 0l5-5c0.391-0.391 0.391-1.024 0-1.414s-1.024-0.391-1.414 0l-4.293 4.293-4.293-4.293c-0.391-0.391-1.024-0.391-1.414 0s-0.391 1.024 0 1.414z"
-          ></path>
-        </symbol>
-        <symbol id="icon-download" viewBox="0 0 24 24">
-          <path d="M15.6 9.6v-7.2h-7.2v7.2h-6l9.6 9.6 9.6-9.6h-6zM0 21.6h24v2.4h-24v-2.4z"></path>
-        </symbol>
-        <symbol id="icon-pin" viewBox="0 0 24 24">
-          <path
-            d="M13.2 14.4h7.2v-1.2l-3.6-1.2v-9.6l3.6-1.2v-1.2h-16.8v1.2l3.6 1.2v9.6l-3.6 1.2v1.2h7.2v8.4l1.2 1.2 1.2-1.2v-8.4z"
-          ></path>
-        </symbol>
-        <symbol id="icon-search" viewBox="0 0 24 24">
-          <path
-            d="M15.48 17.184c-1.608 1.259-3.66 2.019-5.889 2.019-5.302 0-9.6-4.298-9.6-9.6s4.298-9.6 9.6-9.6c5.302 0 9.6 4.298 9.6 9.6 0 2.229-0.76 4.281-2.035 5.91l0.016-0.021 6.42 6.396-1.704 1.704-6.396-6.408zM9.6 16.8c3.976 0 7.2-3.224 7.2-7.2s-3.224-7.2-7.2-7.2v0c-3.976 0-7.2 3.224-7.2 7.2s3.224 7.2 7.2 7.2v0z"
-          ></path>
-        </symbol>
-        <symbol id="icon-cog" viewBox="0 0 24 24">
-          <path
-            d="M21.886 14.303c-1.259-2.181-0.502-4.976 1.691-6.246l-2.358-4.085c-0.674 0.395-1.457 0.622-2.293 0.622-2.52 0-4.563-2.057-4.563-4.594h-4.717c0.006 0.783-0.189 1.577-0.608 2.303-1.259 2.181-4.058 2.923-6.255 1.658l-2.358 4.085c0.679 0.386 1.267 0.951 1.685 1.675 1.257 2.178 0.504 4.967-1.681 6.24l2.358 4.085c0.671-0.391 1.451-0.615 2.283-0.615 2.512 0 4.55 2.044 4.563 4.569h4.717c-0.002-0.775 0.194-1.56 0.609-2.279 1.257-2.177 4.049-2.92 6.244-1.664l2.358-4.085c-0.675-0.386-1.258-0.949-1.674-1.669zM12 16.859c-2.684 0-4.859-2.176-4.859-4.859s2.176-4.859 4.859-4.859c2.684 0 4.859 2.176 4.859 4.859s-2.176 4.859-4.859 4.859z"
-          ></path>
-        </symbol>
-      </defs>
-    </svg>
-    <div id="app"></div>
-  </body>
-</html>

assets/layouts/default.vue

@@ -0,0 +1,122 @@
+<template>
+  <main v-if="!authorizationNeeded">
+    <mobile-menu v-if="isMobile"></mobile-menu>
+    <splitpanes @resized="onResized($event)">
+      <pane min-size="10" :size="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>
+          <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>
+    <button
+      @click="collapseNav = !collapseNav"
+      class="button is-rounded"
+      :class="{ collapsed: collapseNav }"
+      id="hide-nav"
+      v-if="!isMobile"
+    >
+      <span class="icon ml-2" v-if="collapseNav">
+        <mdi-light-chevron-right />
+      </span>
+      <span class="icon" v-else>
+        <mdi-light-chevron-left />
+      </span>
+    </button>
+  </main>
+</template>
+
+<script lang="ts" setup>
+// @ts-ignore - splitpanes types are not available
+import { Splitpanes, Pane } from "splitpanes";
+import { useProgrammatic } from "@oruga-ui/oruga-next";
+import FuzzySearchModal from "@/components/FuzzySearchModal.vue";
+
+const collapseNav = ref(false);
+const { oruga } = useProgrammatic();
+const { authorizationNeeded } = config;
+
+const containerStore = useContainerStore();
+const { activeContainers, visibleContainers } = storeToRefs(containerStore);
+
+watchEffect(() => {
+  setTitle(`${visibleContainers.value.length} containers`);
+});
+
+onKeyStroke("k", (e) => {
+  if (e.ctrlKey || e.metaKey) {
+    showFuzzySearch();
+    e.preventDefault();
+  }
+});
+
+function showFuzzySearch() {
+  oruga.modal.open({
+    // parent: this,
+    component: FuzzySearchModal,
+    animation: "false",
+    width: 600,
+    active: true,
+  });
+}
+function onResized(e: any) {
+  if (e.length == 2) {
+    menuWidth.value = e[0].size;
+  }
+}
+</script>
+
+<style scoped lang="scss">
+:deep(.splitpanes--vertical > .splitpanes__splitter) {
+  min-width: 3px;
+  background: var(--border-color);
+  &:hover {
+    background: var(--border-hover-color);
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .router-view {
+    padding-top: 75px;
+  }
+}
+
+.button.has-no-border {
+  border-color: transparent !important;
+}
+
+.has-min-height {
+  min-height: 100vh;
+}
+
+#hide-nav {
+  position: fixed;
+  left: 10px;
+  bottom: 10px;
+  &.collapsed {
+    left: -40px;
+    width: 60px;
+    padding-left: 40px;
+    background: rgba(0, 0, 0, 0.95);
+
+    &:hover {
+      left: -25px;
+    }
+  }
+}
+</style>

assets/layouts/splash.vue

@@ -0,0 +1,9 @@
+<template>
+  <main>
+    <router-view></router-view>
+  </main>
+</template>
+
+<script lang="ts" setup></script>
+
+<style scoped lang="scss"></style>

assets/main.js

@@ -1,53 +0,0 @@
-import Vue from "vue";
-import VueRouter from "vue-router";
-import Meta from "vue-meta";
-import Dropdown from "buefy/dist/esm/dropdown";
-import Switch from "buefy/dist/esm/switch";
-import store from "./store";
-import config from "./store/config";
-import App from "./App.vue";
-import Container from "./pages/Container.vue";
-import Settings from "./pages/Settings.vue";
-import Index from "./pages/Index.vue";
-import Show from "./pages/Show.vue";
-
-Vue.use(VueRouter);
-Vue.use(Meta);
-Vue.use(Dropdown);
-Vue.use(Switch);
-
-const routes = [
-  {
-    path: "/",
-    component: Index,
-    name: "default",
-  },
-  {
-    path: "/container/:id",
-    component: Container,
-    name: "container",
-    props: true,
-  },
-  {
-    path: "/settings",
-    component: Settings,
-    name: "settings",
-  },
-  {
-    path: "/show",
-    component: Show,
-    name: "show",
-  },
-];
-
-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,10 @@
+import "./styles.scss";
+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/LogEntry.ts

@@ -0,0 +1,121 @@
+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 interface HasComponent {
+  getComponent(): Component;
+}
+
+export type JSONValue = string | number | boolean | JSONObject | Array<JSONValue>;
+export type JSONObject = { [x: string]: JSONValue };
+
+export interface LogEvent {
+  readonly m: string | JSONObject;
+  readonly ts: number;
+  readonly id: number;
+}
+
+export abstract class LogEntry<T extends string | JSONObject> implements HasComponent {
+  protected readonly _message: T;
+  constructor(message: T, public readonly id: number, public readonly date: Date) {
+    this._message = message;
+  }
+
+  public get message(): T {
+    return this._message;
+  }
+
+  abstract getComponent(): Component;
+}
+
+export class SimpleLogEntry extends LogEntry<string> {
+  getComponent(): Component {
+    return SimpleLogItem;
+  }
+}
+
+export class ComplexLogEntry extends LogEntry<JSONObject> {
+  private readonly filteredMessage: ComputedRef<JSONObject>;
+
+  constructor(message: JSONObject, id: number, date: Date, visibleKeys?: Ref<string[][]>) {
+    super(message, id, date);
+    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, visibleKeys);
+  }
+}
+
+export class DockerEventLogEntry extends LogEntry<string> {
+  constructor(message: string, date: Date, public readonly event: string) {
+    super(message, date.getTime(), date);
+  }
+  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);
+    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;
+  }
+}
+
+export function asLogEntry(event: LogEvent): LogEntry<string | JSONObject> {
+  if (typeof event.m === "string") {
+    return new SimpleLogEntry(event.m, event.id, new Date(event.ts));
+  } else {
+    return new ComplexLogEntry(event.m, event.id, new Date(event.ts));
+  }
+}

assets/modules/bulma.ts

@@ -0,0 +1,28 @@
+import { type App } from "vue";
+import {
+  Autocomplete,
+  Button,
+  Dropdown,
+  Switch,
+  Radio,
+  Skeleton,
+  Field,
+  Tooltip,
+  Modal,
+  Config,
+} from "@oruga-ui/oruga-next";
+import { bulmaConfig } from "@oruga-ui/theme-bulma";
+
+export const install = (app: App) => {
+  app
+    .use(Autocomplete)
+    .use(Button)
+    .use(Dropdown)
+    .use(Switch)
+    .use(Tooltip)
+    .use(Modal)
+    .use(Radio)
+    .use(Field)
+    .use(Skeleton)
+    .use(Config, bulmaConfig);
+};

assets/modules/i18n.ts

@@ -0,0 +1,20 @@
+import { type App } from "vue";
+import { createI18n } from "vue-i18n";
+
+export const install = (app: App) => {
+  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,
+  });
+  app.use(i18n);
+};

assets/modules/pinia.ts

@@ -0,0 +1,8 @@
+import { type App } from "vue";
+import { createPinia } from "pinia";
+
+
+export const install = (app:App) => {
+  const pinia = createPinia();
+  app.use(pinia);
+};

assets/modules/router.ts

@@ -0,0 +1,16 @@
+import { type App } from "vue";
+import { createRouter, createWebHistory } from "vue-router";
+import pages from "~pages";
+import { setupLayouts } from "virtual:generated-layouts";
+import config from "@/stores/config";
+
+export const install = (app: App) => {
+  const routes = setupLayouts(pages);
+
+  const router = createRouter({
+    history: createWebHistory(`${config.base}/`),
+    routes,
+  });
+
+  app.use(router);
+};

assets/pages/Container.vue

@@ -1,53 +0,0 @@
-<template>
-  <scrollable-view :scrollable="activeContainers.length > 0">
-    <template v-slot:header v-if="activeContainers.length > 0">
-      <container-title :value="allContainersById[id].name"></container-title>
-    </template>
-    <log-viewer-with-source :id="id"></log-viewer-with-source>
-  </scrollable-view>
-</template>
-
-<script>
-import { mapActions, mapGetters, mapState } from "vuex";
-
-import LogViewerWithSource from "../components/LogViewerWithSource";
-import ScrollableView from "../components/ScrollableView";
-import ContainerTitle from "../components/ContainerTitle";
-
-export default {
-  props: ["id", "name"],
-  name: "Container",
-  components: {
-    LogViewerWithSource,
-    ScrollableView,
-    ContainerTitle,
-  },
-  data() {
-    return {
-      title: "loading",
-    };
-  },
-  metaInfo() {
-    return {
-      title: this.title,
-    };
-  },
-  mounted() {
-    if (this.allContainersById[this.id]) {
-      this.title = this.allContainersById[this.id].name;
-    }
-  },
-  computed: {
-    ...mapState(["activeContainers"]),
-    ...mapGetters(["allContainersById"]),
-  },
-  watch: {
-    id() {
-      this.title = this.allContainersById[this.id].name;
-    },
-    allContainersById() {
-      this.title = this.allContainersById[this.id].name;
-    },
-  },
-};
-</script>

assets/pages/Index.spec.js

@@ -1,9 +0,0 @@
-import { shallowMount } from "@vue/test-utils";
-import Index from "./Index";
-
-describe("<Index />", () => {
-  test("renders correctly", () => {
-    const wrapper = shallowMount(Index);
-    expect(wrapper.element).toMatchSnapshot();
-  });
-});

assets/pages/Index.vue

@@ -1,22 +1,170 @@
 <template>
-  <div class="hero is-fullheight is-dark">
-    <div class="hero-body">
-      <div class="container has-text-centered">
-        <h1 class="title">Please choose a container from the list to view the logs</h1>
+  <div>
+    <section class="hero is-small mt-4">
+      <div class="hero-body">
+        <div class="container">
+          <div class="columns">
+            <div class="column is-narrow" v-if="secured">
+              <a class="button is-primary is-small" :href="`${base}/logout`">{{ $t("button.logout") }}</a>
+            </div>
+          </div>
+        </div>
       </div>
-    </div>
+    </section>
+    <section class="level section">
+      <div class="level-item has-text-centered">
+        <div>
+          <p class="title">{{ containers.length }}</p>
+          <p class="heading">{{ $t("label.total-containers") }}</p>
+        </div>
+      </div>
+      <div class="level-item has-text-centered">
+        <div>
+          <p class="title">{{ runningContainers.length }}</p>
+          <p class="heading">{{ $t("label.running") }}</p>
+        </div>
+      </div>
+      <div class="level-item has-text-centered">
+        <div>
+          <p class="title" data-ci-skip>{{ totalCpu }}%</p>
+          <p class="heading">{{ $t("label.total-cpu-usage") }}</p>
+        </div>
+      </div>
+      <div class="level-item has-text-centered">
+        <div>
+          <p class="title" data-ci-skip>{{ formatBytes(totalMem) }}</p>
+          <p class="heading">{{ $t("label.total-mem-usage") }}</p>
+        </div>
+      </div>
+      <div class="level-item has-text-centered">
+        <div>
+          <p class="title">{{ version }}</p>
+          <p class="heading">{{ $t("label.dozzle-version") }}</p>
+        </div>
+      </div>
+    </section>
+
+    <section class="columns is-centered section is-marginless">
+      <div class="column is-4">
+        <div class="panel">
+          <p class="panel-heading">{{ $t("label.containers") }}</p>
+          <div class="panel-block">
+            <p class="control has-icons-left">
+              <input
+                class="input"
+                type="text"
+                :placeholder="$t('placeholder.search-containers')"
+                v-model="query"
+                @keyup.esc="query = ''"
+                @keyup.enter="onEnter()"
+              />
+              <span class="icon is-left">
+                <search-icon />
+              </span>
+            </p>
+          </div>
+          <p class="panel-tabs" v-if="query === ''">
+            <a :class="{ 'is-active': sort === 'running' }" @click="sort = 'running'">{{ $t("label.running") }}</a>
+            <a :class="{ 'is-active': sort === 'all' }" @click="sort = 'all'">{{ $t("label.all") }}</a>
+          </p>
+          <router-link
+            :to="{ name: 'container-id', params: { id: item.id } }"
+            v-for="item in data.slice(0, 10)"
+            :key="item.id"
+            class="panel-block"
+          >
+            <span class="name">{{ item.name }}</span>
+
+            <div class="subtitle is-7 status">
+              <past-time :date="new Date(item.created * 1000)"></past-time>
+            </div>
+          </router-link>
+        </div>
+      </div>
+    </section>
   </div>
 </template>
 
-<script>
-export default {
-  props: [],
-  name: "Default",
-};
+<script lang="ts" setup>
+import SearchIcon from "~icons/mdi-light/magnify";
+import { useFuse } from "@vueuse/integrations/useFuse";
+
+const { base, version, secured } = config;
+const containerStore = useContainerStore();
+const { containers } = storeToRefs(containerStore);
+const router = useRouter();
+
+const sort = $ref("running");
+const query = ref("");
+
+const mostRecentContainers = $computed(() => [...containers.value].sort((a, b) => b.created - a.created));
+const runningContainers = $computed(() => mostRecentContainers.filter((c) => c.state === "running"));
+
+const { results } = useFuse(query, containers, {
+  fuseOptions: { keys: ["name"] },
+  matchAllWhenSearchEmpty: false,
+});
+const data = computed(() => {
+  if (results.value.length) {
+    return results.value.map(({ item }) => item);
+  }
+  switch (sort) {
+    case "all":
+      return mostRecentContainers;
+    case "running":
+      return runningContainers;
+    default:
+      throw `Invalid sort order: ${sort}`;
+  }
+});
+
+let totalCpu = $ref(0);
+useIntervalFn(
+  () => {
+    totalCpu = runningContainers.reduce((acc, c) => acc + (c.stat?.cpu ?? 0), 0);
+  },
+  1000,
+  { immediate: true }
+);
+
+let totalMem = $ref(0);
+useIntervalFn(
+  () => {
+    totalMem = runningContainers.reduce((acc, c) => acc + (c.stat?.memoryUsage ?? 0), 0);
+  },
+  1000,
+  { immediate: true }
+);
+
+function onEnter() {
+  if (data.value.length > 0) {
+    const item = data.value[0];
+    router.push({ name: "container-id", params: { id: item.id } });
+  }
+}
 </script>
-<style scoped>
-.hero.is-dark {
-  color: #ddd;
-  background-color: #111;
+<style lang="scss" scoped>
+.panel {
+  border: 1px solid var(--border-color);
+  .panel-block,
+  .panel-tabs {
+    border-color: var(--border-color);
+    .is-active {
+      border-color: var(--border-hover-color);
+    }
+    .name {
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      overflow: hidden;
+    }
+    .status {
+      margin-left: auto;
+      white-space: nowrap;
+    }
+  }
+}
+
+.icon {
+  padding: 10px 3px;
 }
 </style>

assets/pages/Login.vue

@@ -0,0 +1,79 @@
+<template>
+  <div class="hero is-halfheight">
+    <div class="hero-body">
+      <div class="container">
+        <section class="columns is-centered section">
+          <div class="column is-4">
+            <div class="card">
+              <div class="card-content">
+                <form action="" method="post" @submit.prevent="onLogin" ref="form">
+                  <div class="field">
+                    <label class="label">{{ $t("label.username") }}</label>
+                    <div class="control">
+                      <input
+                        class="input"
+                        type="text"
+                        name="username"
+                        autocomplete="username"
+                        v-model="username"
+                        autofocus
+                      />
+                    </div>
+                  </div>
+
+                  <div class="field">
+                    <label class="label">{{ $t("label.password") }}</label>
+                    <div class="control">
+                      <input
+                        class="input"
+                        type="password"
+                        name="password"
+                        autocomplete="current-password"
+                        v-model="password"
+                      />
+                    </div>
+                    <p class="help is-danger" v-if="error">{{ $t("error.invalid-auth") }}</p>
+                  </div>
+                  <div class="field is-grouped is-grouped-centered mt-5">
+                    <p class="control">
+                      <button class="button is-primary" type="submit">{{ $t("button.login") }}</button>
+                    </p>
+                  </div>
+                </form>
+              </div>
+            </div>
+          </div>
+        </section>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+const { t } = useI18n();
+
+setTitle(t("title.login"));
+
+let error = $ref(false);
+let username = $ref("");
+let password = $ref("");
+let form: HTMLFormElement = $ref();
+
+async function onLogin() {
+  const response = await fetch(`${config.base}/api/validateCredentials`, {
+    body: new FormData(form),
+    method: "post",
+  });
+
+  if (response.status == 200) {
+    error = false;
+    window.location.href = `${config.base}/`;
+  } else {
+    error = true;
+  }
+}
+</script>
+<route lang="yaml">
+meta:
+  layout: splash
+</route>

assets/pages/Settings.vue

@@ -2,139 +2,181 @@
   <div>
     <section class="section">
       <div class="has-underline">
-        <h2 class="title is-4">About</h2>
+        <h2 class="title is-4">{{ $t("settings.about") }}</h2>
       </div>
 
       <div>
-        You are using Dozzle <i>{{ currentVersion }}</i
-        >.
-        <span v-if="hasUpdate">
-          New version is available! Update to
-          <a :href="nextRelease.html_url" class="next-release" target="_blank" rel="noreferrer noopener">{{
-            nextRelease.name
-          }}</a
-          >.
-        </span>
+        <span v-html="$t('settings.using-version', { version: currentVersion })"></span>
+        <div
+          v-if="hasUpdate"
+          v-html="$t('settings.update-available', { nextVersion: nextRelease.name, href: nextRelease.html_url })"
+        ></div>
+      </div>
+    </section>
+
+    <section class="section">
+      <div class="has-underline">
+        <h2 class="title is-4">{{ $t("settings.display") }}</h2>
+      </div>
+
+      <div class="item">
+        <o-switch v-model="smallerScrollbars"> {{ $t("settings.small-scrollbars") }} </o-switch>
+      </div>
+      <div class="item">
+        <o-switch v-model="showTimestamp"> {{ $t("settings.show-timesamps") }} </o-switch>
+      </div>
+
+      <div class="item">
+        <o-switch v-model="softWrap"> {{ $t("settings.soft-wrap") }}</o-switch>
+      </div>
+
+      <div class="item">
+        <div class="columns is-vcentered">
+          <div class="column is-narrow">
+            <o-field>
+              <o-dropdown v-model="hourStyle" aria-role="list">
+                <template #trigger>
+                  <o-button variant="primary" type="button">
+                    <span class="is-capitalized">{{ hourStyle }}</span>
+                    <span class="icon">
+                      <carbon-caret-down />
+                    </span>
+                  </o-button>
+                </template>
+
+                <o-dropdown-item :value="value" aria-role="listitem" v-for="value in ['auto', '12', '24']" :key="value">
+                  <span class="is-capitalized">{{ value }}</span>
+                </o-dropdown-item>
+              </o-dropdown>
+            </o-field>
+          </div>
+          <div class="column">
+            {{ $t("settings.12-24-format") }}
+          </div>
+        </div>
+      </div>
+      <div class="item">
+        <div class="columns is-vcentered">
+          <div class="column is-narrow">
+            <o-field>
+              <o-dropdown v-model="size" aria-role="list">
+                <template #trigger>
+                  <o-button variant="primary" type="button">
+                    <span class="is-capitalized">{{ size }}</span>
+                    <span class="icon">
+                      <carbon-caret-down />
+                    </span>
+                  </o-button>
+                </template>
+
+                <o-dropdown-item
+                  :value="value"
+                  aria-role="listitem"
+                  v-for="value in ['small', 'medium', 'large']"
+                  :key="value"
+                >
+                  <span class="is-capitalized">{{ value }}</span>
+                </o-dropdown-item>
+              </o-dropdown>
+            </o-field>
+          </div>
+          <div class="column">{{ $t("settings.font-size") }}</div>
+        </div>
+      </div>
+      <div class="item">
+        <div class="columns is-vcentered">
+          <div class="column is-narrow">
+            <o-field>
+              <o-dropdown v-model="lightTheme" aria-role="list">
+                <template #trigger>
+                  <o-button variant="primary" type="button">
+                    <span class="is-capitalized">{{ lightTheme }}</span>
+                    <span class="icon">
+                      <carbon-caret-down />
+                    </span>
+                  </o-button>
+                </template>
+
+                <o-dropdown-item
+                  :value="value"
+                  aria-role="listitem"
+                  v-for="value in ['auto', 'dark', 'light']"
+                  :key="value"
+                >
+                  <span class="is-capitalized">{{ value }}</span>
+                </o-dropdown-item>
+              </o-dropdown>
+            </o-field>
+          </div>
+          <div class="column">{{ $t("settings.color-scheme") }}</div>
+        </div>
       </div>
     </section>
     <section class="section">
       <div class="has-underline">
-        <h2 class="title is-4">Display</h2>
-      </div>
-      <div class="item">
-        <b-switch v-model="search">
-          Enable searching with Dozzle using <code>command+f</code> or <code>ctrl+f</code>
-        </b-switch>
+        <h2 class="title is-4">{{ $t("settings.options") }}</h2>
       </div>
 
       <div class="item">
-        <b-switch v-model="smallerScrollbars">
-          Use smaller scrollbars
-        </b-switch>
+        <o-switch v-model="search">
+          <span v-html="$t('settings.search')"></span>
+        </o-switch>
       </div>
 
       <div class="item">
-        <b-switch v-model="showTimestamp">
-          Show timestamps
-        </b-switch>
-      </div>
-
-      <div class="item">
-        <b-switch v-model="showAllContainers">
-          Show stopped containers
-        </b-switch>
-      </div>
-
-      <div class="item">
-        <h2 class="title is-6 is-marginless">Font size</h2>
-        Modify the font size when viewing logs.
-
-        <b-dropdown v-model="size" aria-role="list" style="margin: -8px 10px 0;">
-          <button class="button is-primary" type="button" slot="trigger">
-            <span class="is-capitalized">{{ size }}</span>
-            <span class="icon"><icon name="chevron-down"></icon></span>
-          </button>
-          <b-dropdown-item
-            :value="value"
-            aria-role="listitem"
-            v-for="value in ['small', 'medium', 'large']"
-            :key="value"
-          >
-            <div class="media">
-              <span class="icon keep-size">
-                <icon name="check" v-if="value == size"></icon>
-              </span>
-              <div class="media-content">
-                <h3 class="is-capitalized">{{ value }}</h3>
-              </div>
-            </div>
-          </b-dropdown-item>
-        </b-dropdown>
+        <o-switch v-model="showAllContainers"> {{ $t("settings.show-stopped-containers") }} </o-switch>
       </div>
     </section>
   </div>
 </template>
 
-<script>
+<script lang="ts" setup>
 import gt from "semver/functions/gt";
-import valid from "semver/functions/valid";
-import { mapActions, mapState } from "vuex";
-import Icon from "../components/Icon";
-import config from "../store/config";
+import {
+  search,
+  lightTheme,
+  smallerScrollbars,
+  showTimestamp,
+  hourStyle,
+  showAllContainers,
+  size,
+  softWrap,
+} from "@/composables/settings";
 
-export default {
-  props: [],
-  name: "Settings",
-  components: {
-    Icon,
-  },
-  data() {
-    return {
-      currentVersion: config.version,
-      nextRelease: null,
-      hasUpdate: false,
+const { t } = useI18n();
+
+setTitle(t("title.settings"));
+
+const currentVersion = $ref(config.version);
+let nextRelease = $ref({ html_url: "", name: "" });
+let hasUpdate = $ref(false);
+
+async function fetchNextRelease() {
+  if (!["dev", "master"].includes(currentVersion)) {
+    const response = await fetch("https://api.github.com/repos/amir20/dozzle/releases/latest");
+    if (response.ok) {
+      const release = await response.json();
+      hasUpdate = gt(release.tag_name, currentVersion);
+      nextRelease = release;
+    }
+  } else {
+    hasUpdate = true;
+    nextRelease = {
+      html_url: "",
+      name: "master",
     };
-  },
-  async created() {
-    const releases = await (await fetch("https://api.github.com/repos/amir20/dozzle/releases")).json();
-    this.hasUpdate = gt(releases[0].tag_name, this.currentVersion);
-    this.nextRelease = releases[0];
-  },
-  metaInfo() {
-    return {
-      title: "Settings",
-    };
-  },
-  methods: {
-    ...mapActions({
-      updateSetting: "UPDATE_SETTING",
-    }),
-  },
-  computed: {
-    ...mapState(["settings"]),
-    ...["search", "size", "smallerScrollbars", "showTimestamp", "showAllContainers"].reduce((map, name) => {
-      map[name] = {
-        get() {
-          return this.settings[name];
-        },
-        set(value) {
-          this.updateSetting({ [name]: value });
-        },
-      };
-      return map;
-    }, {}),
-  },
-};
+  }
+}
+
+fetchNextRelease();
 </script>
 <style lang="scss" scoped>
 .title {
-  color: #eee;
+  color: var(--title-color);
 }
 
 a.next-release {
   text-decoration: underline;
-  color: #00d1b2;
-
   &:hover {
     text-decoration: none;
   }
@@ -145,7 +187,7 @@ a.next-release {
 }
 
 .has-underline {
-  border-bottom: 1px solid #fff;
+  border-bottom: 1px solid var(--border-color);
   padding: 1em 0px;
   margin-bottom: 1em;
 }

assets/pages/Show.vue

@@ -1,29 +1,25 @@
-<template> </template>
+<script lang="ts" setup>
+const router = useRouter();
+const route = useRoute();
 
-<script>
-import { mapActions, mapGetters, mapState } from "vuex";
-export default {
-  props: [],
-  name: "Show",
-  computed: mapGetters(["visibleContainers"]),
-  watch: {
-    visibleContainers(newValue) {
-      if (newValue) {
-        if (this.$route.query.name) {
-          const [container, _] = this.visibleContainers.filter((c) => c.name == this.$route.query.name);
-          if (container) {
-            this.$router.push({ name: "container", params: { id: container.id } });
-          } else {
-            console.error(`No containers found matching name=${this.$route.query.name}. Redirecting to /`);
-            this.$router.push({ name: "default" });
-          }
-        } else {
-          console.error(`Expection query parameter name to be set. Redirecting to /`);
-          this.$router.push({ name: "default" });
-        }
+const store = useContainerStore();
+const { visibleContainers } = storeToRefs(store);
+
+watch(visibleContainers, (newValue) => {
+  if (newValue) {
+    if (route.query.name) {
+      const [container, _] = visibleContainers.value.filter((c) => c.name == route.query.name);
+      if (container) {
+        router.push({ name: "container-id", params: { id: container.id } });
+      } else {
+        console.error(`No containers found matching name=${route.query.name}. Redirecting to /`);
+        router.push({ name: "index" });
       }
-    },
-  },
-};
+    } else {
+      console.error(`Expection query parameter name to be set. Redirecting to /`);
+      router.push({ name: "index" });
+    }
+  }
+});
 </script>
-<style scoped></style>
+<template></template>

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

@@ -0,0 +1,17 @@
+<template>
+  <div class="hero is-halfheight">
+    <div class="hero-body">
+      <div class="container has-text-centered">
+        <h1 class="title">
+          404.
+          <small class="subtitle">{{ $t("error.page-not-found") }}</small>
+        </h1>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+const { t } = useI18n();
+setTitle(t("title.page-not-found"));
+</script>

assets/pages/__snapshots__/Index.spec.js.snap

@@ -1,21 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<Index /> renders correctly 1`] = `
-<div
-  class="hero is-fullheight is-dark"
->
-  <div
-    class="hero-body"
-  >
-    <div
-      class="container has-text-centered"
-    >
-      <h1
-        class="title"
-      >
-        Please choose a container from the list to view the logs
-      </h1>
-    </div>
-  </div>
-</div>
-`;

assets/pages/container/[id].vue

@@ -0,0 +1,20 @@
+<template>
+  <search></search>
+  <log-container :id="id" show-title :scrollable="activeContainers.length > 0"> </log-container>
+</template>
+
+<script lang="ts" setup>
+const store = useContainerStore();
+const { id } = defineProps<{ id: string }>();
+
+const currentContainer = store.currentContainer($$(id));
+const { activeContainers } = storeToRefs(store);
+
+setTitle("loading");
+
+onMounted(() => {
+  setTitle(currentContainer.value?.name);
+});
+
+watchEffect(() => setTitle(currentContainer.value?.name));
+</script>

assets/pages/index.vue

@@ -0,0 +1,170 @@
+<template>
+  <div>
+    <section class="hero is-small mt-4">
+      <div class="hero-body">
+        <div class="container">
+          <div class="columns">
+            <div class="column is-narrow" v-if="secured">
+              <a class="button is-primary is-small" :href="`${base}/logout`">{{ $t("button.logout") }}</a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+    <section class="level section">
+      <div class="level-item has-text-centered">
+        <div>
+          <p class="title">{{ containers.length }}</p>
+          <p class="heading">{{ $t("label.total-containers") }}</p>
+        </div>
+      </div>
+      <div class="level-item has-text-centered">
+        <div>
+          <p class="title">{{ runningContainers.length }}</p>
+          <p class="heading">{{ $t("label.running") }}</p>
+        </div>
+      </div>
+      <div class="level-item has-text-centered">
+        <div>
+          <p class="title" data-ci-skip>{{ totalCpu }}%</p>
+          <p class="heading">{{ $t("label.total-cpu-usage") }}</p>
+        </div>
+      </div>
+      <div class="level-item has-text-centered">
+        <div>
+          <p class="title" data-ci-skip>{{ formatBytes(totalMem) }}</p>
+          <p class="heading">{{ $t("label.total-mem-usage") }}</p>
+        </div>
+      </div>
+      <div class="level-item has-text-centered">
+        <div>
+          <p class="title">{{ version }}</p>
+          <p class="heading">{{ $t("label.dozzle-version") }}</p>
+        </div>
+      </div>
+    </section>
+
+    <section class="columns is-centered section is-marginless">
+      <div class="column is-4">
+        <div class="panel">
+          <p class="panel-heading">{{ $t("label.containers") }}</p>
+          <div class="panel-block">
+            <p class="control has-icons-left">
+              <input
+                class="input"
+                type="text"
+                :placeholder="$t('placeholder.search-containers')"
+                v-model="query"
+                @keyup.esc="query = ''"
+                @keyup.enter="onEnter()"
+              />
+              <span class="icon is-left">
+                <search-icon />
+              </span>
+            </p>
+          </div>
+          <p class="panel-tabs" v-if="query === ''">
+            <a :class="{ 'is-active': sort === 'running' }" @click="sort = 'running'">{{ $t("label.running") }}</a>
+            <a :class="{ 'is-active': sort === 'all' }" @click="sort = 'all'">{{ $t("label.all") }}</a>
+          </p>
+          <router-link
+            :to="{ name: 'container-id', params: { id: item.id } }"
+            v-for="item in data.slice(0, 10)"
+            :key="item.id"
+            class="panel-block"
+          >
+            <span class="name">{{ item.name }}</span>
+
+            <div class="subtitle is-7 status">
+              <past-time :date="new Date(item.created * 1000)"></past-time>
+            </div>
+          </router-link>
+        </div>
+      </div>
+    </section>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import SearchIcon from "~icons/mdi-light/magnify";
+import { useFuse } from "@vueuse/integrations/useFuse";
+
+const { base, version, secured } = config;
+const containerStore = useContainerStore();
+const { containers } = storeToRefs(containerStore);
+const router = useRouter();
+
+const sort = $ref("running");
+const query = ref("");
+
+const mostRecentContainers = $computed(() => [...containers.value].sort((a, b) => b.created - a.created));
+const runningContainers = $computed(() => mostRecentContainers.filter((c) => c.state === "running"));
+
+const { results } = useFuse(query, containers, {
+  fuseOptions: { keys: ["name"] },
+  matchAllWhenSearchEmpty: false,
+});
+const data = computed(() => {
+  if (results.value.length) {
+    return results.value.map(({ item }) => item);
+  }
+  switch (sort) {
+    case "all":
+      return mostRecentContainers;
+    case "running":
+      return runningContainers;
+    default:
+      throw `Invalid sort order: ${sort}`;
+  }
+});
+
+let totalCpu = $ref(0);
+useIntervalFn(
+  () => {
+    totalCpu = runningContainers.reduce((acc, c) => acc + (c.stat?.cpu ?? 0), 0);
+  },
+  1000,
+  { immediate: true }
+);
+
+let totalMem = $ref(0);
+useIntervalFn(
+  () => {
+    totalMem = runningContainers.reduce((acc, c) => acc + (c.stat?.memoryUsage ?? 0), 0);
+  },
+  1000,
+  { immediate: true }
+);
+
+function onEnter() {
+  if (data.value.length > 0) {
+    const item = data.value[0];
+    router.push({ name: "container-id", params: { id: item.id } });
+  }
+}
+</script>
+<style lang="scss" scoped>
+.panel {
+  border: 1px solid var(--border-color);
+  .panel-block,
+  .panel-tabs {
+    border-color: var(--border-color);
+    .is-active {
+      border-color: var(--border-hover-color);
+    }
+    .name {
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      overflow: hidden;
+    }
+    .status {
+      margin-left: auto;
+      white-space: nowrap;
+    }
+  }
+}
+
+.icon {
+  padding: 10px 3px;
+}
+</style>

assets/pages/login.vue

@@ -0,0 +1,79 @@
+<template>
+  <div class="hero is-halfheight">
+    <div class="hero-body">
+      <div class="container">
+        <section class="columns is-centered section">
+          <div class="column is-4">
+            <div class="card">
+              <div class="card-content">
+                <form action="" method="post" @submit.prevent="onLogin" ref="form">
+                  <div class="field">
+                    <label class="label">{{ $t("label.username") }}</label>
+                    <div class="control">
+                      <input
+                        class="input"
+                        type="text"
+                        name="username"
+                        autocomplete="username"
+                        v-model="username"
+                        autofocus
+                      />
+                    </div>
+                  </div>
+
+                  <div class="field">
+                    <label class="label">{{ $t("label.password") }}</label>
+                    <div class="control">
+                      <input
+                        class="input"
+                        type="password"
+                        name="password"
+                        autocomplete="current-password"
+                        v-model="password"
+                      />
+                    </div>
+                    <p class="help is-danger" v-if="error">{{ $t("error.invalid-auth") }}</p>
+                  </div>
+                  <div class="field is-grouped is-grouped-centered mt-5">
+                    <p class="control">
+                      <button class="button is-primary" type="submit">{{ $t("button.login") }}</button>
+                    </p>
+                  </div>
+                </form>
+              </div>
+            </div>
+          </div>
+        </section>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+const { t } = useI18n();
+
+setTitle(t("title.login"));
+
+let error = $ref(false);
+let username = $ref("");
+let password = $ref("");
+let form: HTMLFormElement = $ref();
+
+async function onLogin() {
+  const response = await fetch(`${config.base}/api/validateCredentials`, {
+    body: new FormData(form),
+    method: "post",
+  });
+
+  if (response.status == 200) {
+    error = false;
+    window.location.href = `${config.base}/`;
+  } else {
+    error = true;
+  }
+}
+</script>
+<route lang="yaml">
+meta:
+  layout: splash
+</route>

assets/pages/settings.vue

@@ -0,0 +1,203 @@
+<template>
+  <div>
+    <section class="section">
+      <div class="has-underline">
+        <h2 class="title is-4">{{ $t("settings.about") }}</h2>
+      </div>
+
+      <div>
+        <span v-html="$t('settings.using-version', { version: currentVersion })"></span>
+        <div
+          v-if="hasUpdate"
+          v-html="$t('settings.update-available', { nextVersion: nextRelease.name, href: nextRelease.html_url })"
+        ></div>
+      </div>
+    </section>
+
+    <section class="section">
+      <div class="has-underline">
+        <h2 class="title is-4">{{ $t("settings.display") }}</h2>
+      </div>
+
+      <div class="item">
+        <o-switch v-model="smallerScrollbars"> {{ $t("settings.small-scrollbars") }} </o-switch>
+      </div>
+      <div class="item">
+        <o-switch v-model="showTimestamp"> {{ $t("settings.show-timesamps") }} </o-switch>
+      </div>
+
+      <div class="item">
+        <o-switch v-model="softWrap"> {{ $t("settings.soft-wrap") }}</o-switch>
+      </div>
+
+      <div class="item">
+        <div class="columns is-vcentered">
+          <div class="column is-narrow">
+            <o-field>
+              <o-dropdown v-model="hourStyle" aria-role="list">
+                <template #trigger>
+                  <o-button variant="primary" type="button">
+                    <span class="is-capitalized">{{ hourStyle }}</span>
+                    <span class="icon">
+                      <carbon-caret-down />
+                    </span>
+                  </o-button>
+                </template>
+
+                <o-dropdown-item :value="value" aria-role="listitem" v-for="value in ['auto', '12', '24']" :key="value">
+                  <span class="is-capitalized">{{ value }}</span>
+                </o-dropdown-item>
+              </o-dropdown>
+            </o-field>
+          </div>
+          <div class="column">
+            {{ $t("settings.12-24-format") }}
+          </div>
+        </div>
+      </div>
+      <div class="item">
+        <div class="columns is-vcentered">
+          <div class="column is-narrow">
+            <o-field>
+              <o-dropdown v-model="size" aria-role="list">
+                <template #trigger>
+                  <o-button variant="primary" type="button">
+                    <span class="is-capitalized">{{ size }}</span>
+                    <span class="icon">
+                      <carbon-caret-down />
+                    </span>
+                  </o-button>
+                </template>
+
+                <o-dropdown-item
+                  :value="value"
+                  aria-role="listitem"
+                  v-for="value in ['small', 'medium', 'large']"
+                  :key="value"
+                >
+                  <span class="is-capitalized">{{ value }}</span>
+                </o-dropdown-item>
+              </o-dropdown>
+            </o-field>
+          </div>
+          <div class="column">{{ $t("settings.font-size") }}</div>
+        </div>
+      </div>
+      <div class="item">
+        <div class="columns is-vcentered">
+          <div class="column is-narrow">
+            <o-field>
+              <o-dropdown v-model="lightTheme" aria-role="list">
+                <template #trigger>
+                  <o-button variant="primary" type="button">
+                    <span class="is-capitalized">{{ lightTheme }}</span>
+                    <span class="icon">
+                      <carbon-caret-down />
+                    </span>
+                  </o-button>
+                </template>
+
+                <o-dropdown-item
+                  :value="value"
+                  aria-role="listitem"
+                  v-for="value in ['auto', 'dark', 'light']"
+                  :key="value"
+                >
+                  <span class="is-capitalized">{{ value }}</span>
+                </o-dropdown-item>
+              </o-dropdown>
+            </o-field>
+          </div>
+          <div class="column">{{ $t("settings.color-scheme") }}</div>
+        </div>
+      </div>
+    </section>
+    <section class="section">
+      <div class="has-underline">
+        <h2 class="title is-4">{{ $t("settings.options") }}</h2>
+      </div>
+
+      <div class="item">
+        <o-switch v-model="search">
+          <span v-html="$t('settings.search')"></span>
+        </o-switch>
+      </div>
+
+      <div class="item">
+        <o-switch v-model="showAllContainers"> {{ $t("settings.show-stopped-containers") }} </o-switch>
+      </div>
+    </section>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import gt from "semver/functions/gt";
+import {
+  search,
+  lightTheme,
+  smallerScrollbars,
+  showTimestamp,
+  hourStyle,
+  showAllContainers,
+  size,
+  softWrap,
+} from "@/composables/settings";
+
+const { t } = useI18n();
+
+setTitle(t("title.settings"));
+
+const currentVersion = $ref(config.version);
+let nextRelease = $ref({ html_url: "", name: "" });
+let hasUpdate = $ref(false);
+
+async function fetchNextRelease() {
+  if (!["dev", "master"].includes(currentVersion)) {
+    const response = await fetch("https://api.github.com/repos/amir20/dozzle/releases/latest");
+    if (response.ok) {
+      const release = await response.json();
+      hasUpdate = gt(release.tag_name, currentVersion);
+      nextRelease = release;
+    }
+  } else {
+    hasUpdate = true;
+    nextRelease = {
+      html_url: "",
+      name: "master",
+    };
+  }
+}
+
+fetchNextRelease();
+</script>
+<style lang="scss" scoped>
+.title {
+  color: var(--title-color);
+}
+
+a.next-release {
+  text-decoration: underline;
+  &:hover {
+    text-decoration: none;
+  }
+}
+
+.section {
+  padding: 1rem 1.5rem;
+}
+
+.has-underline {
+  border-bottom: 1px solid var(--border-color);
+  padding: 1em 0px;
+  margin-bottom: 1em;
+}
+
+.item {
+  padding: 1em 0;
+}
+
+code {
+  border-radius: 4px;
+  background-color: #444;
+}
+</style>

assets/pages/show.vue

@@ -0,0 +1,25 @@
+<script lang="ts" setup>
+const router = useRouter();
+const route = useRoute();
+
+const store = useContainerStore();
+const { visibleContainers } = storeToRefs(store);
+
+watch(visibleContainers, (newValue) => {
+  if (newValue) {
+    if (route.query.name) {
+      const [container, _] = visibleContainers.value.filter((c) => c.name == route.query.name);
+      if (container) {
+        router.push({ name: "container-id", params: { id: container.id } });
+      } else {
+        console.error(`No containers found matching name=${route.query.name}. Redirecting to /`);
+        router.push({ name: "index" });
+      }
+    } else {
+      console.error(`Expection query parameter name to be set. Redirecting to /`);
+      router.push({ name: "index" });
+    }
+  }
+});
+</script>
+<template></template>

assets/shims-vue.d.ts

@@ -0,0 +1,6 @@
+/* eslint-disable */
+declare module "*.vue" {
+  import type { DefineComponent } from "vue";
+  const component: DefineComponent<{}, {}, any>;
+  export default component;
+}

assets/store/config.js

@@ -1,2 +0,0 @@
-const config = JSON.parse(document.querySelector("script#config__json").textContent);
-export default config;

assets/store/index.js

@@ -1,91 +0,0 @@
-import Vue from "vue";
-import Vuex from "vuex";
-import storage from "store/dist/store.modern";
-import { DEFAULT_SETTINGS, DOZZLE_SETTINGS_KEY } from "./settings";
-import config from "./config";
-
-Vue.use(Vuex);
-
-const mql = window.matchMedia("(max-width: 770px)");
-
-storage.set(DOZZLE_SETTINGS_KEY, { ...DEFAULT_SETTINGS, ...storage.get(DOZZLE_SETTINGS_KEY) });
-
-const state = {
-  containers: [],
-  activeContainers: [],
-  searchFilter: null,
-  isMobile: mql.matches,
-  settings: storage.get(DOZZLE_SETTINGS_KEY),
-};
-
-const mutations = {
-  SET_CONTAINERS(state, containers) {
-    state.containers = containers;
-  },
-  ADD_ACTIVE_CONTAINERS(state, container) {
-    state.activeContainers.push(container);
-  },
-  REMOVE_ACTIVE_CONTAINER(state, container) {
-    state.activeContainers.splice(state.activeContainers.indexOf(container), 1);
-  },
-  SET_SEARCH(state, filter) {
-    state.searchFilter = filter;
-  },
-  SET_MOBILE_WIDTH(state, value) {
-    state.isMobile = value;
-  },
-  UPDATE_SETTINGS(state, newValues) {
-    state.settings = { ...state.settings, ...newValues };
-    storage.set(DOZZLE_SETTINGS_KEY, state.settings);
-  },
-};
-
-const actions = {
-  APPEND_ACTIVE_CONTAINER({ commit }, container) {
-    commit("ADD_ACTIVE_CONTAINERS", container);
-  },
-  REMOVE_ACTIVE_CONTAINER({ commit }, container) {
-    commit("REMOVE_ACTIVE_CONTAINER", container);
-  },
-  SET_SEARCH({ commit }, filter) {
-    commit("SET_SEARCH", filter);
-  },
-  async FETCH_CONTAINERS({ commit }) {
-    const containers = await (await fetch(`${config.base}/api/containers.json`)).json();
-    commit("SET_CONTAINERS", containers);
-  },
-  UPDATE_SETTING({ commit }, setting) {
-    commit("UPDATE_SETTINGS", setting);
-  },
-};
-const getters = {
-  activeContainersById({ activeContainers }) {
-    return activeContainers.reduce((map, obj) => {
-      map[obj.id] = obj;
-      return map;
-    }, {});
-  },
-  allContainersById({ containers }) {
-    return containers.reduce((map, obj) => {
-      map[obj.id] = obj;
-      return map;
-    }, {});
-  },
-  visibleContainers({ containers, settings: { showAllContainers } }) {
-    const filter = showAllContainers ? () => true : (c) => c.state === "running";
-    return containers.filter(filter);
-  },
-};
-
-const es = new EventSource(`${config.base}/api/events/stream`);
-es.addEventListener("containers-changed", (e) => setTimeout(() => store.dispatch("FETCH_CONTAINERS"), 1000), false);
-mql.addListener((e) => store.commit("SET_MOBILE_WIDTH", e.matches));
-
-const store = new Vuex.Store({
-  state,
-  getters,
-  actions,
-  mutations,
-});
-
-export default store;

assets/store/settings.js

@@ -1,9 +0,0 @@
-export const DOZZLE_SETTINGS_KEY = "DOZZLE_SETTINGS";
-export const DEFAULT_SETTINGS = {
-  search: true,
-  size: "medium",
-  menuWidth: 15,
-  smallerScrollbars: false,
-  showTimestamp: true,
-  showAllContainers: false,
-};

assets/stores/config.ts

@@ -0,0 +1,29 @@
+const text = document.querySelector("script#config__json")?.textContent || "{}";
+
+interface Config {
+  version: string;
+  base: string;
+  authorizationNeeded: boolean | "false" | "true";
+  secured: boolean | "false" | "true";
+  maxLogs: number;
+}
+
+const pageConfig = JSON.parse(text);
+
+const config: Config = {
+  maxLogs: 600,
+  ...pageConfig,
+};
+
+if (config.version == "{{ .Version }}") {
+  config.version = "master";
+  config.base = "";
+  config.authorizationNeeded = false;
+  config.secured = false;
+} else {
+  config.version = config.version.replace(/^v/, "");
+  config.authorizationNeeded = config.authorizationNeeded === "true";
+  config.secured = config.secured === "true";
+}
+
+export default config as Config;

assets/stores/container.ts

@@ -0,0 +1,81 @@
+import { acceptHMRUpdate, defineStore } from "pinia";
+import { ref, Ref, computed } from "vue";
+
+import { showAllContainers } from "@/composables/settings";
+import config from "@/stores/config";
+import type { Container, ContainerStat } from "@/types/Container";
+import { watchOnce } from "@vueuse/core";
+
+export const useContainerStore = defineStore("container", () => {
+  const containers = ref<Container[]>([]);
+  const activeContainerIds = ref<string[]>([]);
+
+  const allContainersById = computed(() =>
+    containers.value.reduce((acc, container) => {
+      acc[container.id] = container;
+      return acc;
+    }, {} as Record<string, Container>)
+  );
+
+  const visibleContainers = computed(() => {
+    const filter = showAllContainers.value ? () => true : (c: Container) => c.state === "running";
+    return containers.value.filter(filter);
+  });
+
+  const activeContainers = computed(() => activeContainerIds.value.map((id) => allContainersById.value[id]));
+
+  const es = new EventSource(`${config.base}/api/events/stream`);
+  es.addEventListener(
+    "containers-changed",
+    (e: Event) => (containers.value = JSON.parse((e as MessageEvent).data)),
+    false
+  );
+  es.addEventListener(
+    "container-stat",
+    (e) => {
+      const stat = JSON.parse((e as MessageEvent).data) as ContainerStat;
+      const container = allContainersById.value[stat.id];
+      if (container) {
+        container.stat = stat;
+      }
+    },
+    false
+  );
+  es.addEventListener(
+    "container-die",
+    (e) => {
+      const event = JSON.parse((e as MessageEvent).data) as { actorId: string };
+      const container = allContainersById.value[event.actorId];
+      if (container) {
+        container.state = "dead";
+      }
+    },
+    false
+  );
+
+  const currentContainer = (id: Ref<string>) => computed(() => allContainersById.value[id.value]);
+  const appendActiveContainer = ({ id }: Container) => activeContainerIds.value.push(id);
+  const removeActiveContainer = ({ id }: Container) =>
+    activeContainerIds.value.splice(activeContainerIds.value.indexOf(id), 1);
+
+  const ready = ref(false);
+  watchOnce(containers, () => (ready.value = true));
+
+  return {
+    containers,
+    activeContainerIds,
+    allContainersById,
+    visibleContainers,
+    activeContainers,
+    currentContainer,
+    appendActiveContainer,
+    removeActiveContainer,
+    ready,
+  };
+});
+
+// @ts-ignore
+if (import.meta.hot) {
+  // @ts-ignore
+  import.meta.hot.accept(acceptHMRUpdate(useContainerStore, import.meta.hot));
+}

assets/styles.scss

@@ -1,28 +1,126 @@
 @charset "utf-8";
+@import "bulma/sass/utilities/initial-variables.sass";
 
-$menu-item-active-background-color: hsl(171, 100%, 41%);
-$menu-item-color: hsl(0, 6%, 87%);
+$body-background-color: var(--body-background-color);
 
-@import "~bulma";
-@import "../node_modules/splitpanes/dist/splitpanes.css";
-@import "~buefy/src/scss/utils/_all";
-@import "~buefy/src/scss/components/_dropdown";
-@import "~buefy/src/scss/components/_switch";
+$scheme-main: var(--scheme-main);
+$scheme-main-bis: var(--scheme-main-bis);
+$scheme-main-ter: var(--scheme-main-ter);
+
+$border: var(--border-color);
+$border-hover: var(--border-hover-color);
+
+$menu-item-active-background-color: var(--menu-item-active-background-color);
+$menu-item-color: var(--menu-item-color);
+$menu-item-hover-background-color: var(--menu-item-hover-background-color);
+$menu-item-hover-color: var(--menu-item-hover-color);
+
+$text-strong: var(--text-strong-color);
+$text: var(--text-color);
+$text-light: var(--text-light-color);
+
+$panel-heading-background-color: var(--panel-heading-background-color);
+$panel-heading-color: var(--panel-heading-color);
+
+$link: $turquoise;
+$link-active: $grey-dark;
+
+$dark-toolbar-color: rgba($black-bis, 0.7);
+$light-toolbar-color: rgba($grey-darker, 0.7);
+
+@import "bulma/bulma.sass";
+@import "@oruga-ui/theme-bulma/dist/scss/components/utils/all.scss";
+@import "@oruga-ui/theme-bulma/dist/scss/components/autocomplete.scss";
+@import "@oruga-ui/theme-bulma/dist/scss/components/button.scss";
+@import "@oruga-ui/theme-bulma/dist/scss/components/modal.scss";
+@import "@oruga-ui/theme-bulma/dist/scss/components/switch.scss";
+@import "@oruga-ui/theme-bulma/dist/scss/components/tooltip.scss";
+@import "@oruga-ui/theme-bulma/dist/scss/components/dropdown.scss";
+@import "@oruga-ui/theme-bulma/dist/scss/components/skeleton.scss";
+@import "splitpanes/dist/splitpanes.css";
+
+@mixin dark {
+  --scheme-main: #{$black};
+  --scheme-main-bis: #{$black-bis};
+  --scheme-main-ter: #{$black-ter};
+
+  --border-color: #{$grey-darker};
+  --border-hover-color: var(--secondary-color);
+  --logo-color: var(--secondary-color);
+
+  --primary-color: #{$turquoise};
+  --secondary-color: #{$yellow};
+
+  --body-background-color: #{$black-bis};
+  --action-toolbar-background-color: #{$dark-toolbar-color};
+  --body-color: #{$grey-lighter};
+
+  --menu-item-active-background-color: var(--primary-color);
+  --menu-item-color: hsl(0, 6%, 87%);
+  --menu-item-hover-background-color: #{$white-ter};
+  --menu-item-hover-color: #{$black-ter};
+
+  --panel-heading-background-color: var(--secondary-color);
+  --panel-heading-color: var(--scheme-main-bis);
+
+  --text-strong-color: #{$grey-lightest};
+  --text-color: #{$grey-lighter};
+  --text-light-color: #{$grey};
+}
+
+@mixin light {
+  --scheme-main: #{$white};
+  --scheme-main-bis: #{$white-bis};
+  --scheme-main-ter: #{$white-ter};
+
+  --border-color: #{$grey-lighter};
+  --border-hover-color: var(--secondary-color);
+  --logo-color: #{$grey-darker};
+
+  --primary-color: #{$turquoise};
+  --secondary-color: #d8f0ca;
+
+  --body-background-color: #{$white-bis};
+  --action-toolbar-background-color: #{$light-toolbar-color};
+  --body-color: #{$grey-darker};
+
+  --menu-item-active-background-color: var(--primary-color);
+  --menu-item-color: #{$grey-dark};
+  --menu-item-hover-background-color: #eee8e7;
+  --menu-item-hover-color: #{$black-ter};
+
+  --panel-heading-background-color: var(--secondary-color);
+  --panel-heading-color: var(--text-strong-color);
+
+  --text-strong-color: #{$grey-dark};
+  --text-color: #{$grey-darker};
+  --text-light-color: #{$grey};
+}
+
+[data-theme="dark"] {
+  @include dark;
+}
+
+[data-theme="light"] {
+  @include light;
+}
+
+@media (prefers-color-scheme: dark) {
+  html {
+    @include dark;
+  }
+}
+
+@media (prefers-color-scheme: light) {
+  html {
+    @include light;
+  }
+}
 
 html {
   overflow-x: unset;
   overflow-y: unset;
   scroll-snap-type: y proximity;
-  background-color: #111;
-}
-
-body {
-  font-family: "Roboto", sans-serif;
-  color: #ddd;
-}
-
-h1.title {
-  font-family: "Gafata", sans-serif;
 }
 
 html.has-custom-scrollbars {
@@ -55,19 +153,42 @@ html.has-custom-scrollbars {
   }
 }
 
-.is-settings-control {
-  background: rgba(0, 0, 0, 0.4);
-  color: #fff;
-  border-color: transparent;
-  &:hover {
-    border-color: rgb(255, 221, 87) !important;
-    background: rgba(0, 0, 0, 0.8) !important;
-    color: #fff !important;
-  }
-
-  &:focus {
-    box-shadow: none !important;
-    color: unset;
-    border-color: transparent;
+@media screen and (min-width: 770px) {
+  .splitpanes__pane {
+    overflow: unset;
+  }
+}
+
+.splitpanes__splitter {
+  z-index: 99;
+}
+
+.is-ellipsis {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.modal {
+  z-index: 1000;
+}
+
+.button .button-wrapper > span {
+  display: contents;
+}
+
+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);
   }
 }

assets/types/Container.d.ts

@@ -0,0 +1,17 @@
+export interface Container {
+  readonly id: string;
+  readonly created: number;
+  readonly image: string;
+  readonly name: string;
+  readonly status: string;
+  readonly command: string;
+  state: "created" | "running" | "exited" | "dead" | "paused" | "restarting";
+  stat?: ContainerStat;
+}
+
+export interface ContainerStat {
+  readonly id: string;
+  readonly cpu: number;
+  readonly memory: number;
+  readonly memoryUsage: number;
+}

assets/utils/index.ts

@@ -0,0 +1,47 @@
+import { Container } from "@/types/Container";
+import { useStorage } from "@vueuse/core";
+import { computed, ComputedRef } from "vue";
+
+export function formatBytes(bytes: number, 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];
+}
+
+export function getDeep(obj: Record<string, any>, path: string[]) {
+  return path.reduce((acc, key) => acc?.[key], obj);
+}
+
+export function isObject(value: any): value is Record<string, any> {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+
+export function flattenJSON(obj: Record<string, any>, path: string[] = []) {
+  const result: Record<string, any> = {};
+  Object.keys(obj).forEach((key) => {
+    const value = obj[key];
+    const newPath = path.concat(key);
+    if (isObject(value)) {
+      Object.assign(result, flattenJSON(value, newPath));
+    } else {
+      result[newPath.join(".")] = value;
+    }
+  });
+  return result;
+}
+
+export function arrayEquals(a: string[], b: string[]): boolean {
+  return Array.isArray(a) && Array.isArray(b) && a.length === b.length && a.every((val, index) => val === b[index]);
+}
+
+export function persistentVisibleKeys(container: ComputedRef<Container>) {
+  return computed(() => useStorage(stripVersion(container.value.image) + ":" + container.value.command, []));
+}
+
+export function stripVersion(label: string) {
+  const [name, _] = label.split(":");
+  return name;
+}

docker/client.go

@@ -1,10 +1,8 @@
 package docker
 
 import (
-	"bufio"
-	"bytes"
 	"context"
-	"encoding/binary"
+	"encoding/json"
 	"fmt"
 	"io"
 	"sort"
@@ -29,27 +27,28 @@ type dockerProxy interface {
 	ContainerLogs(context.Context, string, types.ContainerLogsOptions) (io.ReadCloser, error)
 	Events(context.Context, types.EventsOptions) (<-chan events.Message, <-chan error)
 	ContainerInspect(ctx context.Context, containerID string) (types.ContainerJSON, error)
+	ContainerStats(ctx context.Context, containerID string, stream bool) (types.ContainerStats, error)
+	Ping(ctx context.Context) (types.Ping, error)
 }
 
 // Client is a proxy around the docker client
 type Client interface {
 	ListContainers() ([]Container, error)
 	FindContainer(string) (Container, error)
-	ContainerLogs(context.Context, string, int, string) (<-chan string, <-chan error)
-	Events(context.Context) (<-chan events.Message, <-chan error)
-	ContainerLogsBetweenDates(context.Context, string, time.Time, time.Time) ([]string, error)
-}
-
-// NewClient creates a new instance of Client
-func NewClient() Client {
-	return NewClientWithFilters(map[string]string{})
+	ContainerLogs(context.Context, string, int, string) (io.ReadCloser, error)
+	Events(context.Context) (<-chan ContainerEvent, <-chan error)
+	ContainerLogsBetweenDates(context.Context, string, time.Time, time.Time) (io.ReadCloser, error)
+	ContainerStats(context.Context, string, chan<- ContainerStat) error
+	Ping(context.Context) (types.Ping, error)
 }
 
 // NewClientWithFilters creates a new instance of Client with docker filters
-func NewClientWithFilters(f map[string]string) Client {
+func NewClientWithFilters(f map[string][]string) Client {
 	filterArgs := filters.NewArgs()
-	for k, v := range f {
-		filterArgs.Add(k, v)
+	for key, values := range f {
+		for _, value := range values {
+			filterArgs.Add(key, value)
+		}
 	}
 
 	log.Debugf("filterArgs = %v", filterArgs)
@@ -78,8 +77,8 @@ func (d *dockerClient) FindContainer(id string) (Container, error) {
 			break
 		}
 	}
-	if found == false {
-		return container, fmt.Errorf("Unable to find container with id: %s", id)
+	if !found {
+		return container, fmt.Errorf("unable to find container with id: %s", id)
 	}
 
 	return container, nil
@@ -95,9 +94,8 @@ func (d *dockerClient) ListContainers() ([]Container, error) {
 		return nil, err
 	}
 
-	var containers []Container
+	var containers = make([]Container, 0, len(list))
 	for _, c := range list {
-
 		container := Container{
 			ID:      c.ID[:12],
 			Names:   c.Names,
@@ -116,43 +114,71 @@ func (d *dockerClient) ListContainers() ([]Container, error) {
 		return strings.ToLower(containers[i].Name) < strings.ToLower(containers[j].Name)
 	})
 
-	if containers == nil {
-		containers = []Container{}
-	}
-
 	return containers, nil
 }
 
-func logReader(reader io.ReadCloser, tty bool) func() (string, error) {
-	if tty {
-		scanner := bufio.NewScanner(reader)
-		return func() (string, error) {
-			if scanner.Scan() {
-				return scanner.Text(), nil
+func (d *dockerClient) ContainerStats(ctx context.Context, id string, stats chan<- ContainerStat) error {
+	response, err := d.cli.ContainerStats(ctx, id, true)
+
+	if err != nil {
+		return err
+	}
+
+	go func() {
+		log.Debugf("starting to stream stats for: %s", id)
+		defer response.Body.Close()
+		decoder := json.NewDecoder(response.Body)
+		var v *types.StatsJSON
+		for {
+			if err := decoder.Decode(&v); err != nil {
+				if err == context.Canceled || err == io.EOF {
+					log.Debugf("stopping stats streaming for container %s", id)
+					return
+				}
+				log.Errorf("decoder for stats api returned an unknown error %v", err)
 			}
 
-			return "", io.EOF
+			ncpus := uint8(v.CPUStats.OnlineCPUs)
+			if ncpus == 0 {
+				ncpus = uint8(len(v.CPUStats.CPUUsage.PercpuUsage))
+			}
+
+			var (
+				cpuDelta    = float64(v.CPUStats.CPUUsage.TotalUsage) - float64(v.PreCPUStats.CPUUsage.TotalUsage)
+				systemDelta = float64(v.CPUStats.SystemUsage) - float64(v.PreCPUStats.SystemUsage)
+				cpuPercent  = int64((cpuDelta / systemDelta) * float64(ncpus) * 100)
+				memUsage    = int64(v.MemoryStats.Usage - v.MemoryStats.Stats["cache"])
+				memPercent  = int64(float64(memUsage) / float64(v.MemoryStats.Limit) * 100)
+			)
+
+			if cpuPercent > 0 || memUsage > 0 {
+				select {
+				case <-ctx.Done():
+					return
+				case stats <- ContainerStat{
+					ID:            id,
+					CPUPercent:    cpuPercent,
+					MemoryPercent: memPercent,
+					MemoryUsage:   memUsage,
+				}:
+				}
+			}
 		}
-	}
-	hdr := make([]byte, 8)
-	var buffer bytes.Buffer
-	return func() (string, error) {
-		buffer.Reset()
-		_, err := reader.Read(hdr)
-		if err != nil {
-			return "", err
-		}
-		count := binary.BigEndian.Uint32(hdr[4:])
-		_, err = io.CopyN(&buffer, reader, int64(count))
-		if err != nil {
-			return "", err
-		}
-		return strings.TrimSpace(buffer.String()), nil
-	}
+	}()
+
+	return nil
 }
 
-func (d *dockerClient) ContainerLogs(ctx context.Context, id string, tailSize int, since string) (<-chan string, <-chan error) {
-	log.WithField("id", id).WithField("since", since).Debug("Streaming logs for container")
+func (d *dockerClient) ContainerLogs(ctx context.Context, id string, tailSize int, since string) (io.ReadCloser, error) {
+	log.WithField("id", id).WithField("since", since).Debug("streaming logs for container")
+
+	if since != "" {
+		if millis, err := strconv.ParseInt(since, 10, 64); err == nil {
+			since = time.UnixMicro(millis).Add(time.Millisecond).Format(time.RFC3339Nano)
+		} else {
+			log.WithError(err).Debug("unable to parse since")
+		}
+	}
 
 	options := types.ContainerLogsOptions{
 		ShowStdout: true,
@@ -162,75 +188,75 @@ func (d *dockerClient) ContainerLogs(ctx context.Context, id string, tailSize in
 		Timestamps: true,
 		Since:      since,
 	}
-	reader, err := d.cli.ContainerLogs(ctx, id, options)
-	errChannel := make(chan error, 1)
 
+	log.Debugf("streaming logs from Docker with option: %+v", options)
+	reader, err := d.cli.ContainerLogs(ctx, id, options)
 	if err != nil {
-		errChannel <- err
-		close(errChannel)
-		return nil, errChannel
+		return nil, err
 	}
 
-	messages := make(chan string)
-	go func() {
-		<-ctx.Done()
-		reader.Close()
-	}()
+	containerJSON, err := d.cli.ContainerInspect(ctx, id)
+	if err != nil {
+		return nil, err
+	}
 
-	containerJSON, _ := d.cli.ContainerInspect(ctx, id)
+	return newLogReader(reader, containerJSON.Config.Tty), nil
+}
+
+func (d *dockerClient) Events(ctx context.Context) (<-chan ContainerEvent, <-chan error) {
+	dockerMessages, errors := d.cli.Events(ctx, types.EventsOptions{})
+	messages := make(chan ContainerEvent)
 
 	go func() {
 		defer close(messages)
-		defer close(errChannel)
-		defer reader.Close()
-		nextEntry := logReader(reader, containerJSON.Config.Tty)
+
 		for {
-			line, err := nextEntry()
-			if err != nil {
-				errChannel <- err
-				break
-			}
 			select {
-			case messages <- line:
 			case <-ctx.Done():
+				return
+			case message, ok := <-dockerMessages:
+				if !ok {
+					return
+				}
+
+				if message.Type == "container" && len(message.Actor.ID) > 0 {
+					messages <- ContainerEvent{
+						ActorID: message.Actor.ID[:12],
+						Name:    message.Action,
+					}
+				}
 			}
 		}
 	}()
 
-	return messages, errChannel
+	return messages, errors
 }
 
-func (d *dockerClient) Events(ctx context.Context) (<-chan events.Message, <-chan error) {
-	return d.cli.Events(ctx, types.EventsOptions{})
-}
-
-func (d *dockerClient) ContainerLogsBetweenDates(ctx context.Context, id string, from time.Time, to time.Time) ([]string, error) {
+func (d *dockerClient) ContainerLogsBetweenDates(ctx context.Context, id string, from time.Time, to time.Time) (io.ReadCloser, error) {
 	options := types.ContainerLogsOptions{
 		ShowStdout: true,
 		ShowStderr: true,
 		Timestamps: true,
-		Since:      strconv.FormatInt(from.Unix(), 10),
-		Until:      strconv.FormatInt(to.Unix(), 10),
-	}
-	reader, _ := d.cli.ContainerLogs(ctx, id, options)
-	defer reader.Close()
-
-	containerJSON, _ := d.cli.ContainerInspect(ctx, id)
-
-	nextEntry := logReader(reader, containerJSON.Config.Tty)
-
-	var messages []string
-	for {
-		line, err := nextEntry()
-		if err != nil {
-			if err == io.EOF {
-				break
-			} else {
-				return nil, err
-			}
-		}
-		messages = append(messages, line)
+		Since:      from.Format(time.RFC3339),
+		Until:      to.Format(time.RFC3339),
 	}
 
-	return messages, nil
+	log.Debugf("fetching logs from Docker with option: %+v", options)
+
+	reader, err := d.cli.ContainerLogs(ctx, id, options)
+
+	if err != nil {
+		return nil, err
+	}
+
+	containerJSON, err := d.cli.ContainerInspect(ctx, id)
+	if err != nil {
+		return nil, err
+	}
+
+	return newLogReader(reader, containerJSON.Config.Tty), nil
+}
+
+func (d *dockerClient) Ping(ctx context.Context) (types.Ping, error) {
+	return d.cli.Ping(ctx)
 }

docker/client_test.go

@@ -7,6 +7,7 @@ import (
 	"errors"
 	"io"
 	"io/ioutil"
+	"strings"
 	"testing"
 
 	"github.com/docker/docker/api/types"
@@ -40,6 +41,7 @@ func (m *mockedProxy) ContainerLogs(ctx context.Context, id string, options type
 	}
 	return reader, args.Error(1)
 }
+
 func (m *mockedProxy) ContainerInspect(ctx context.Context, containerID string) (types.ContainerJSON, error) {
 	args := m.Called(ctx, containerID)
 	json, ok := args.Get(0).(types.ContainerJSON)
@@ -50,6 +52,10 @@ func (m *mockedProxy) ContainerInspect(ctx context.Context, containerID string)
 	return json, args.Error(1)
 }
 
+func (m *mockedProxy) ContainerStats(ctx context.Context, containerID string, stream bool) (types.ContainerStats, error) {
+	return types.ContainerStats{}, nil
+}
+
 func Test_dockerClient_ListContainers_null(t *testing.T) {
 	proxy := new(mockedProxy)
 	proxy.On("ContainerList", mock.Anything, mock.Anything).Return(nil, nil)
@@ -127,13 +133,10 @@ func Test_dockerClient_ContainerLogs_happy(t *testing.T) {
 	proxy.On("ContainerInspect", mock.Anything, id).Return(json, nil)
 
 	client := &dockerClient{proxy, filters.NewArgs()}
-	messages, _ := client.ContainerLogs(context.Background(), id, 300, "since")
+	logReader, _ := client.ContainerLogs(context.Background(), id, 300, "since")
 
-	actual, _ := <-messages
-	assert.Equal(t, expected, actual, "message doesn't match expected")
-
-	_, ok := <-messages
-	assert.False(t, ok, "channel should have been closed")
+	actual, _ := ioutil.ReadAll(logReader)
+	assert.Equal(t, expected, string(actual), "message doesn't match expected")
 	proxy.AssertExpectations(t)
 }
 
@@ -143,7 +146,7 @@ func Test_dockerClient_ContainerLogs_happy_with_tty(t *testing.T) {
 	proxy := new(mockedProxy)
 	expected := "INFO Testing logs..."
 
-	reader := ioutil.NopCloser(bytes.NewReader([]byte(expected)))
+	reader := ioutil.NopCloser(strings.NewReader(expected))
 	options := types.ContainerLogsOptions{ShowStdout: true, ShowStderr: true, Follow: true, Tail: "300", Timestamps: true}
 	proxy.On("ContainerLogs", mock.Anything, id, options).Return(reader, nil)
 
@@ -151,13 +154,11 @@ func Test_dockerClient_ContainerLogs_happy_with_tty(t *testing.T) {
 	proxy.On("ContainerInspect", mock.Anything, id).Return(json, nil)
 
 	client := &dockerClient{proxy, filters.NewArgs()}
-	messages, _ := client.ContainerLogs(context.Background(), id, 300, "")
+	logReader, _ := client.ContainerLogs(context.Background(), id, 300, "")
 
-	actual, _ := <-messages
-	assert.Equal(t, expected, actual, "message doesn't match expected")
+	actual, _ := ioutil.ReadAll(logReader)
+	assert.Equal(t, expected, string(actual), "message doesn't match expected")
 
-	_, ok := <-messages
-	assert.False(t, ok, "channel should have been closed")
 	proxy.AssertExpectations(t)
 }
 
@@ -169,14 +170,10 @@ func Test_dockerClient_ContainerLogs_error(t *testing.T) {
 
 	client := &dockerClient{proxy, filters.NewArgs()}
 
-	messages, err := client.ContainerLogs(context.Background(), id, 300, "")
+	reader, err := client.ContainerLogs(context.Background(), id, 300, "")
 
-	assert.Nil(t, messages, "messages should be nil")
-
-	e, _ := <-err
-	assert.Error(t, e, "error should have been returned")
-	_, ok := <-err
-	assert.False(t, ok, "error channel should have been closed")
+	assert.Nil(t, reader, "reader should be nil")
+	assert.Error(t, err, "error should have been returned")
 	proxy.AssertExpectations(t)
 }
 

docker/reader.go

@@ -0,0 +1,49 @@
+package docker
+
+import (
+	"bytes"
+	"encoding/binary"
+	"io"
+)
+
+type logReader struct {
+	readerCloser io.ReadCloser
+	tty          bool
+	lastHeader   []byte
+	buffer       bytes.Buffer
+}
+
+func newLogReader(reader io.ReadCloser, tty bool) io.ReadCloser {
+	return &logReader{
+		reader,
+		tty,
+		make([]byte, 8),
+		bytes.Buffer{},
+	}
+}
+
+func (r *logReader) Read(p []byte) (n int, err error) {
+	if r.tty {
+		return r.readerCloser.Read(p)
+	} else {
+		if r.buffer.Len() > 0 {
+			return r.buffer.Read(p)
+		} else {
+			r.buffer.Reset()
+			_, err := r.readerCloser.Read(r.lastHeader)
+			if err != nil {
+				return 0, err
+			}
+			count := binary.BigEndian.Uint32(r.lastHeader[4:])
+			_, err = io.CopyN(&r.buffer, r.readerCloser, int64(count))
+			if err != nil {
+				return 0, err
+			}
+			return r.buffer.Read(p)
+		}
+	}
+}
+
+func (r *logReader) Close() error {
+	return r.readerCloser.Close()
+}

docker/types.go

@@ -12,3 +12,23 @@ type Container struct {
 	State   string   `json:"state"`
 	Status  string   `json:"status"`
 }
+
+// ContainerStat represent stats instant for a container
+type ContainerStat struct {
+	ID            string `json:"id"`
+	CPUPercent    int64  `json:"cpu"`
+	MemoryPercent int64  `json:"memory"`
+	MemoryUsage   int64  `json:"memoryUsage"`
+}
+
+// ContainerEvent represents events that are triggered
+type ContainerEvent struct {
+	ActorID string `json:"actorId"`
+	Name    string `json:"name"`
+}
+
+type LogEvent struct {
+	Message   any    `json:"m,omitempty"`
+	Timestamp int64  `json:"ts"`
+	Id        uint32 `json:"id,omitempty"`
+}

e2e/.gitignore

@@ -0,0 +1,3 @@
+videos
+screenshots
+__diff_output__