chore: release v4.10.15

* feat: removes localhost as a required connection

* refactors code

* fixes tests

* adds more tests

* adds more tests

* refactors

* cleans up logs

.dockerignore

@@ -5,4 +5,4 @@ node_modules
 dist
 .git
 e2e
-
+docs

.github/.kodiak.toml

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

.github/ISSUE_TEMPLATE/bug_report.md

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

.github/ISSUE_TEMPLATE/feature_request.md

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

.github/dependabot.yml

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

.github/renovate.json

@@ -0,0 +1,4 @@
+{
+  "$schema": "https://docs.renovatebot.com/renovate-schema.json",
+  "extends": ["config:base", ":automergeMinor"]
+}

.github/workflows/deploy.yml

@@ -8,40 +8,70 @@ jobs:
     name: JavaScript Tests
     runs-on: ubuntu-latest
     steps:
-      - name: Checkout code
-        uses: actions/checkout@v3
-      - name: Install Node
-        uses: actions/setup-node@v3
-      - name: Install pnpm
-        uses: pnpm/action-setup@v2.2.1
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        name: Install Node
         with:
-          version: 6.20.1
+          node-version: latest
+      - run: corepack enable
+      - run: pnpm --version
+      - uses: actions/setup-node@v3
+        with:
+          node-version: latest
+          cache: "pnpm"
+          cache-dependency-path: "**/pnpm-lock.yaml"
       - name: Install dependencies
-        run: pnpm install
+        run: pnpm install --frozen-lockfile --prefer-offline
       - name: Run Tests
-        run: pnpm run test
+        run: pnpm run test -- --outputTruncateLength=500
   go-test:
     name: Go Tests
     runs-on: ubuntu-latest
     steps:
       - name: Install Go
-        uses: actions/setup-go@v3
+        uses: actions/setup-go@v4
         with:
-          go-version: 1.18.x
+          go-version: 1.20.x
       - name: Checkout code
         uses: actions/checkout@v3
       - name: Run Go Tests with Coverage
         run: make test SKIP_ASSET=1
   int-test:
     name: Integration Tests
+    timeout-minutes: 60
     runs-on: ubuntu-latest
     steps:
-      - name: Checkout code
-        uses: actions/checkout@v3
-      - name: Build images
-        run: docker-compose -f e2e/docker-compose.yml build
-      - name: Run tests
-        run: docker-compose -f e2e/docker-compose.yml up --build --force-recreate --exit-code-from cypress
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        name: Install Node
+        with:
+          node-version: latest
+      - run: corepack enable
+      - run: pnpm --version
+      - uses: actions/setup-node@v3
+        with:
+          node-version: latest
+          cache: "pnpm"
+          cache-dependency-path: "**/pnpm-lock.yaml"
+      - name: Install dependencies
+        run: pnpm install
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v2
+      - name: Build
+        uses: docker/bake-action@v3
+        with:
+          load: true
+          set: |
+            *.cache-from=type=gha
+            *.cache-to=type=gha,mode=max
+      - name: Run Playwright tests
+        run: docker compose up --exit-code-from playwright
+      - uses: actions/upload-artifact@v3
+        if: always()
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30
   buildx:
     needs: [go-test, npm-test, int-test]
     name: Release
@@ -49,28 +79,26 @@ jobs:
     steps:
       - name: Docker meta
         id: meta
-        uses: docker/metadata-action@v3
+        uses: docker/metadata-action@v4
         with:
           images: amir20/dozzle
-      - name: Set up QEMU
-        uses: docker/setup-qemu-action@v1.2.0
       - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v1.6.0
+        uses: docker/setup-buildx-action@v2.7.0
       - name: Login to DockerHub
-        uses: docker/login-action@v1.14.1
+        uses: docker/login-action@v2.2.0
         with:
           username: ${{ secrets.DOCKER_USERNAME }}
           password: ${{ secrets.DOCKER_PASSWORD }}
       - name: Build and push
-        uses: docker/build-push-action@v2.10.0
+        uses: docker/build-push-action@v4.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
+          cache-from: type=gha
+          cache-to: type=gha,mode=max
   git-release:
     needs: [buildx]
     name: Github Release
@@ -82,13 +110,7 @@ jobs:
           fetch-depth: 0
       - name: Install Node
         uses: actions/setup-node@v3
-      - name: Install pnpm
-        uses: pnpm/action-setup@v2.2.1
-        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
+        run: npx changelogithub

.github/workflows/dev.yml

@@ -10,29 +10,27 @@ 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' }}
+    if: ${{ !github.event.repository.fork && !github.event.pull_request.head.repo.fork && (github.event_name == 'push' || github.event.pull_request.head.repo.full_name == 'amir20/dozzle') }}
     steps:
       - name: Docker meta
         id: meta
-        uses: docker/metadata-action@v3
+        uses: docker/metadata-action@v4
         with:
           images: amir20/dozzle
-      - name: Set up QEMU
-        uses: docker/setup-qemu-action@v1.2.0
       - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v1.6.0
+        uses: docker/setup-buildx-action@v2.7.0
       - name: Login to DockerHub
-        uses: docker/login-action@v1.14.1
+        uses: docker/login-action@v2.2.0
         with:
           username: ${{ secrets.DOCKER_USERNAME }}
           password: ${{ secrets.DOCKER_PASSWORD }}
       - name: Build and push
-        uses: docker/build-push-action@v2.10.0
+        uses: docker/build-push-action@v4.1.1
         with:
           push: true
-          platforms: linux/amd64
+          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
+          cache-from: type=gha
+          cache-to: type=gha,mode=max

.github/workflows/test.yml

@@ -7,49 +7,91 @@ on:
       - master
 name: Test
 jobs:
+  typecheck:
+    name: Typecheck
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        name: Install Node
+        with:
+          node-version: latest
+      - run: corepack enable
+      - run: pnpm --version
+      - uses: actions/setup-node@v3
+        with:
+          node-version: latest
+          cache: "pnpm"
+          cache-dependency-path: "**/pnpm-lock.yaml"
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile --prefer-offline
+      - name: Run Typecheck
+        run: pnpm run typecheck
   npm-test:
     name: JavaScript Tests
     runs-on: ubuntu-latest
     steps:
-      - name: Checkout code
-        uses: actions/checkout@v3
-      - name: Install Node
-        uses: actions/setup-node@v3
-      - name: Install pnpm
-        uses: pnpm/action-setup@v2.2.1
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        name: Install Node
         with:
-          version: 6.20.1
+          node-version: latest
+      - run: corepack enable
+      - run: pnpm --version
+      - uses: actions/setup-node@v3
+        with:
+          node-version: latest
+          cache: "pnpm"
+          cache-dependency-path: "**/pnpm-lock.yaml"
       - name: Install dependencies
-        run: pnpm install
+        run: pnpm install --frozen-lockfile --prefer-offline
       - name: Run Tests
-        run: pnpm run test
+        run: pnpm run test -- --outputTruncateLength=500
   go-test:
     name: Go Tests
     runs-on: ubuntu-latest
     steps:
       - name: Install Go
-        uses: actions/setup-go@v3
+        uses: actions/setup-go@v4
         with:
-          go-version: 1.18.x
+          go-version: 1.20.x
       - name: Checkout code
         uses: actions/checkout@v3
       - name: Run Go Tests with Coverage
         run: make test SKIP_ASSET=1
   int-test:
     name: Integration Tests
+    timeout-minutes: 60
     runs-on: ubuntu-latest
     steps:
-      - name: Checkout code
-        uses: actions/checkout@v3
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        name: Install Node
         with:
-          fetch-depth: 2
-      - name: Build images
-        run: docker-compose -f e2e/docker-compose.yml build
-      - name: Set commit message for push
-        if: github.event_name == 'push'
-        run: echo "GIT_LOG_MESSAGE=$(git log -1 --pretty=%B ${GITHUB_SHA})" >> $GITHUB_ENV
-      - name: Set commit message for pull request
-        if: github.event_name == 'pull_request'
-        run: echo "GIT_LOG_MESSAGE=$(git log -1 --pretty=%B ${{github.event.pull_request.head.sha}})" >> $GITHUB_ENV
-      - name: Run tests
-        run: docker-compose -f e2e/docker-compose.yml up --build --force-recreate --exit-code-from cypress
+          node-version: latest
+      - run: corepack enable
+      - run: pnpm --version
+      - uses: actions/setup-node@v3
+        with:
+          node-version: latest
+          cache: "pnpm"
+          cache-dependency-path: "**/pnpm-lock.yaml"
+      - name: Install dependencies
+        run: pnpm install
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v2
+      - name: Build
+        uses: docker/bake-action@v3
+        with:
+          load: true
+          set: |
+            *.cache-from=type=gha
+            *.cache-to=type=gha,mode=max
+      - name: Run Playwright tests
+        run: docker compose up --exit-code-from playwright
+      - uses: actions/upload-artifact@v3
+        if: always()
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30

.gitignore

@@ -6,3 +6,9 @@ static
 dozzle
 coverage
 .pnpm-debug.log
+.vscode
+coverage.out
+.netlify
+/test-results/
+/playwright-report/
+/playwright/.cache/

.husky/.gitignore

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

.husky/pre-commit

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

.npmrc

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

.prettierignore

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

CODE_OF_CONDUCT.md

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

Dockerfile

@@ -1,29 +1,29 @@
 # Build assets
-FROM node:17-alpine as node
+FROM --platform=$BUILDPLATFORM node:20-alpine as node
 
-RUN apk add --no-cache git openssh make g++ util-linux curl python3 && curl -f https://get.pnpm.io/v6.16.js | node - add --global pnpm
+RUN corepack enable
 
 WORKDIR /build
 
 # Install dependencies from lock file
-COPY pnpm-lock.yaml ./
-RUN pnpm fetch --prod
+COPY pnpm-*.yaml ./
+RUN pnpm fetch --ignore-scripts --no-optional
 
-# Copy files
-COPY package.json .* vite.config.ts index.html ./
+# Copy package.json and install dependencies
+COPY package.json ./
+RUN pnpm install --offline --ignore-scripts --no-optional
 
-# Copy assets to build
+# Copy assets and translations to build
+COPY .* vite.config.ts index.html ./
 COPY assets ./assets
+COPY locales ./locales
 
-# Install dependencies
-RUN pnpm install -r --offline --prod
-
-# Do the build
+# Build assets
 RUN pnpm build
 
-FROM golang:1.18.1-alpine AS builder
+FROM --platform=$BUILDPLATFORM golang:1.20.5-alpine AS builder
 
-RUN apk add --no-cache git ca-certificates && mkdir /dozzle
+RUN apk add --no-cache ca-certificates && mkdir /dozzle
 
 WORKDIR /dozzle
 
@@ -36,19 +36,22 @@ COPY --from=node /build/dist ./dist
 
 # Copy all other files
 COPY analytics ./analytics
+COPY healthcheck ./healthcheck
 COPY docker ./docker
 COPY web ./web
 COPY main.go ./
 
 # Args
 ARG TAG=dev
+ARG TARGETOS TARGETARCH
 
 # Build binary
-RUN CGO_ENABLED=0 go build -ldflags "-s -w -X main.version=$TAG"  -o dozzle
+RUN GOOS=$TARGETOS GOARCH=$TARGETARCH CGO_ENABLED=0 go build -ldflags "-s -w -X main.version=$TAG"  -o dozzle
+
 
 FROM scratch
 
-ENV PATH=/bin
+ENV PATH /bin
 
 COPY --from=builder /etc/ssl/certs/ca-certificates.crt /etc/ssl/certs/ca-certificates.crt
 COPY --from=builder /dozzle/dozzle /dozzle

Makefile

@@ -31,4 +31,4 @@ dev:
 
 .PHONY: int
 int:
-	docker-compose -f e2e/docker-compose.yml up --build --force-recreate --exit-code-from cypress
+	docker compose up --force-recreate --exit-code-from playwright

README.md

@@ -2,7 +2,7 @@
 
 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)
+https://user-images.githubusercontent.com/260667/227634771-9ebbe381-16a8-465a-b28a-450c5cd20c94.mp4
 
 [![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/)
@@ -37,16 +37,7 @@ The simplest way to use dozzle is to run the docker container. Also, mount the D
 
 Dozzle will be available at [http://localhost:8888/](http://localhost:8888/). You can change `-p 8888:8080` to any port. For example, if you want to view dozzle over port 4040 then you would do `-p 4040:8080`.
 
-### With Docker swarm
-
-    docker service create \
-    --name=dozzle \
-    --publish=8888:8080 \
-    --constraint=node.role==manager \
-    --mount=type=bind,src=/var/run/docker.sock,dst=/var/run/docker.sock \
-    amir20/dozzle:latest
-
-### With Docker compose
+### Connecting with Docker compose
 
     version: "3"
     services:
@@ -58,6 +49,56 @@ Dozzle will be available at [http://localhost:8888/](http://localhost:8888/). Yo
         ports:
           - 9999:8080
 
+### Connecting to remote hosts
+
+Dozzle supports connecting to multiple remote hosts via `tcp://` using TLS or without. Appropriate certs need to be mounted for Dozzle to be able to successfully connect. At this point, `ssh://` is not supported because Dozzle docker image does not ship with any ssh clients.
+
+To configure remote hosts, `--remote-host` or `DOZZLE_REMOTE_HOST` need to provided and the `pem` files need to be mounted to `/cert` directory. The `/cert` directory expects to have `/certs/{ca,cert,key}.pem` or `/certs/{host}/{ca,cert,key}.pem` in case of multiple hosts.
+
+Below are examples of using `--remote-host` via CLI:
+
+    $ docker run -v /var/run/docker.sock:/var/run/docker.sock -v /path/to/certs:/certs -p 8080:8080 amir20/dozzle --remote-host tcp://167.99.1.1:2376
+
+Multiple `--remote-host` flags can be used to specify multiple hosts.
+
+Or to use compose:
+
+    version: "3"
+    services:
+      dozzle:
+        image: amir20/dozzle:latest
+        volumes:
+          - /var/run/docker.sock:/var/run/docker.sock
+          - /path/to/certs:/certs
+        ports:
+          - 8080:8080
+        environment:
+          DOZZLE_REMOTE_HOST: tcp://167.99.1.1:2376,tcp://167.99.1.2:2376
+
+You need to make sure appropriate certs are provided in `/certs/167.99.1.1/{ca,cert,key}.pem` and `/certs/167.99.1.2/{ca,cert,key}.pem` for both hosts to work.
+
+### Adding health check
+
+Dozzle doesn't enable healthcheck by default as it adds extra CPU usage. `healthcheck` can be enabled manually.
+
+    version: "3"
+    services:
+      dozzle:
+        container_name: dozzle
+        image: amir20/dozzle:latest
+        volumes:
+          - /var/run/docker.sock:/var/run/docker.sock
+        ports:
+          - 8080:8080
+        environment:
+          DOZZLE_LEVEL: trace
+        healthcheck:
+          test: [ "CMD", "/dozzle", "healthcheck" ]
+          interval: 3s
+          timeout: 30s
+          retries: 5
+          start_period: 30s
+
 #### Security
 
 You can control the device Dozzle binds to by passing `--addr` parameter. For example,
@@ -74,7 +115,7 @@ this would then only allow you to view containers with a name starting with "foo
 
 #### 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`.
+Dozzle supports a very simple authentication out of the box with just username and password. You should deploy using SSL to keep the credentials safe. See configuration to use `--username` and `--password`. You can also use [docker secrets](https://docs.docker.com/engine/swarm/secrets/) `--usernamefile` and `--passwordfile`.
 
 #### Changing base URL
 
@@ -95,20 +136,19 @@ If you do not want to be tracked at all, see the `--no-analytics` flag below.
 
 Dozzle follows the [12-factor](https://12factor.net/) model. Configurations can use the CLI flags or environment variables. The table below outlines all supported options and their respective env vars.
 
-| Flag             | Env Variable          | Default |
-| ---------------- | --------------------- | ------- |
-| `--addr`         | `DOZZLE_ADDR`         | `:8080` |
-| `--base`         | `DOZZLE_BASE`         | `/`     |
-| `--level`        | `DOZZLE_LEVEL`        | `info`  |
-| n/a              | `DOCKER_API_VERSION`  | not set |
-| `--tailSize`     | `DOZZLE_TAILSIZE`     | `300`   |
-| `--filter`       | `DOZZLE_FILTER`       | `""`    |
-| `--username`     | `DOZZLE_USERNAME`     | `""`    |
-| `--password`     | `DOZZLE_PASSWORD`     | `""`    |
-| `--key`          | `DOZZLE_KEY`          | `""`    |
-| `--no-analytics` | `DOZZLE_NO_ANALYTICS` | false   |
-
-Note: When using username and password `DOZZLE_KEY` is required for session management.
+| Flag             | Env Variable           | Default |
+| ---------------- | ---------------------- | ------- |
+| `--addr`         | `DOZZLE_ADDR`          | `:8080` |
+| `--base`         | `DOZZLE_BASE`          | `/`     |
+| `--hostname`     | `DOZZLE_HOSTNAME`      | `""`    |
+| `--level`        | `DOZZLE_LEVEL`         | `info`  |
+| `--filter`       | `DOZZLE_FILTER`        | `""`    |
+| `--username`     | `DOZZLE_USERNAME`      | `""`    |
+| `--password`     | `DOZZLE_PASSWORD`      | `""`    |
+| `--usernamefile` | `DOZZLE_USERNAME_FILE` | `""`    |
+| `--passwordfile` | `DOZZLE_PASSWORD_FILE` | `""`    |
+| `--no-analytics` | `DOZZLE_NO_ANALYTICS`  | false   |
+| `--remote-host`  | `DOZZLE_REMOTE_HOST`   |         |
 
 ## Troubleshooting and FAQs
 
@@ -160,6 +200,28 @@ Dozzle has a [special route](https://github.com/amir20/dozzle/blob/master/assets
 
 </details>
 
+<details>
+ <summary>I installed Dozzle but memory consumption doesn't show up!</summary>
+
+_This is an issue specific to ARM devices_
+
+Dozzle uses the Docker API to gather information about the containers' memory usage. If the memory usage is not showing up, then it is likely that the Docker API is not returning the memory usage.
+
+You can verify this by running `docker info`, and you should see the following:
+
+```
+WARNING: No memory limit support
+WARNING: No swap limit support
+```
+
+In this case, you'll need to add the following line to your `/boot/cmdline.txt` file and reboot your device.
+
+```
+cgroup_enable=cpuset cgroup_enable=memory cgroup_memory=1
+```
+
+</details>
+
 ## License
 
 [MIT](LICENSE)

analytics/ga.go

@@ -21,7 +21,25 @@ func SendStartEvent(se StartEvent) error {
 		},
 	}
 
-	jsonValue, err := json.Marshal(postBody)
+	return doRequest(postBody)
+}
+
+func SendRequestEvent(re RequestEvent) error {
+	postBody := map[string]interface{}{
+		"client_id": re.ClientId,
+		"events": []map[string]interface{}{
+			{
+				"name":   "request",
+				"params": re,
+			},
+		},
+	}
+
+	return doRequest(postBody)
+}
+
+func doRequest(body map[string]interface{}) error {
+	jsonValue, err := json.Marshal(body)
 	if err != nil {
 		return err
 	}

analytics/types.go

@@ -1,11 +1,18 @@
 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"`
+	ClientId         string `json:"-"`
+	Version          string `json:"version"`
+	FilterLength     int    `json:"filterLength"`
+	RemoteHostLength int    `json:"remoteHostLength"`
+	CustomAddress    bool   `json:"customAddress"`
+	CustomBase       bool   `json:"customBase"`
+	Protected        bool   `json:"protected"`
+	HasHostname      bool   `json:"hasHostname"`
+}
+
+type RequestEvent struct {
+	ClientId          string `json:"-"`
+	TotalContainers   int    `json:"totalContainers"`
+	RunningContainers int    `json:"runningContainers"`
 }

assets/App.vue

@@ -1,98 +1,8 @@
 <template>
-  <main>
-    <mobile-menu v-if="isMobile && !authorizationNeeded"></mobile-menu>
-
-    <splitpanes @resized="onResized($event)">
-      <pane min-size="10" :size="menuWidth" v-if="!authorizationNeeded && !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 && !authorizationNeeded"
-    >
-      <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>
+  <router-view></router-view>
 </template>
 
 <script lang="ts" setup>
-import { Splitpanes, Pane } from "splitpanes";
-import { ref, onMounted, watchEffect } from "vue";
-import { storeToRefs } from "pinia";
-import { useProgrammatic } from "@oruga-ui/oruga-next";
-import hotkeys from "hotkeys-js";
-
-import { setTitle } from "@/composables/title";
-import { isMobile } from "@/composables/media";
-import { smallerScrollbars, lightTheme, menuWidth } from "@/composables/settings";
-import { useContainerStore } from "@/stores/container";
-import config from "@/stores/config";
-
-import FuzzySearchModal from "@/components/FuzzySearchModal.vue";
-import LogContainer from "@/components/LogContainer.vue";
-import SideMenu from "@/components/SideMenu.vue";
-import MobileMenu from "@/components/MobileMenu.vue";
-
-const collapseNav = ref(false);
-const { oruga } = useProgrammatic();
-const { authorizationNeeded } = config;
-
-const containerStore = useContainerStore();
-
-const { activeContainers, visibleContainers } = storeToRefs(containerStore);
-
-onMounted(() => {
-  if (smallerScrollbars.value) {
-    document.documentElement.classList.add("has-custom-scrollbars");
-  }
-  switch (lightTheme.value) {
-    case "dark":
-      document.documentElement.setAttribute("data-theme", "dark");
-      break;
-    case "light":
-      document.documentElement.setAttribute("data-theme", "light");
-      break;
-    default:
-      document.documentElement.removeAttribute("data-theme");
-  }
-
-  hotkeys("command+k, ctrl+k", (event, handler) => {
-    event.preventDefault();
-    showFuzzySearch();
-  });
-});
-
-watchEffect(() => {
-  setTitle(`${visibleContainers.value.length} containers`);
-});
-
 watchEffect(() => {
   if (smallerScrollbars.value) {
     document.documentElement.classList.add("has-custom-scrollbars");
@@ -111,59 +21,6 @@ watchEffect(() => {
       document.documentElement.removeAttribute("data-theme");
   }
 });
-
-function showFuzzySearch() {
-  oruga.modal.open({
-    // parent: this,
-    component: FuzzySearchModal,
-    animation: "false",
-    width: 600,
-    active: true,
-  });
-}
-function onResized(e) {
-  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>
+<style scoped lang="scss"></style>

assets/components.d.ts

@@ -1,42 +1,62 @@
-// generated by unplugin-vue-components
-// We suggest you to commit this file into source control
-// Read more: https://github.com/vuejs/vue-next/pull/3399
-import '@vue/runtime-core'
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// Generated by unplugin-vue-components
+// Read more: https://github.com/vuejs/core/pull/3399
+export {}
 
-declare module '@vue/runtime-core' {
+declare module 'vue' {
   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']
-    ContainerStat: typeof import('./components/ContainerStat.vue')['default']
-    ContainerTitle: typeof import('./components/ContainerTitle.vue')['default']
+    'Carbon:caretDown': typeof import('~icons/carbon/caret-down')['default']
+    'Carbon:circleSolid': typeof import('~icons/carbon/circle-solid')['default']
+    'Cil:checkCircle': typeof import('~icons/cil/check-circle')['default']
+    'Cil:circle': typeof import('~icons/cil/circle')['default']
+    'Cil:columns': typeof import('~icons/cil/columns')['default']
+    'Cil:findInPage': typeof import('~icons/cil/find-in-page')['default']
+    'Cil:xCircle': typeof import('~icons/cil/x-circle')['default']
+    ComplexLogItem: typeof import('./components/LogViewer/ComplexLogItem.vue')['default']
+    ContainerHealth: typeof import('./components/LogViewer/ContainerHealth.vue')['default']
+    ContainerPopup: typeof import('./components/LogViewer/ContainerPopup.vue')['default']
+    ContainerStat: typeof import('./components/LogViewer/ContainerStat.vue')['default']
+    ContainerTitle: typeof import('./components/LogViewer/ContainerTitle.vue')['default']
+    DateTime: typeof import('./components/common/DateTime.vue')['default']
+    DistanceTime: typeof import('./components/common/DistanceTime.vue')['default']
+    DockerEventLogItem: typeof import('./components/LogViewer/DockerEventLogItem.vue')['default']
     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/LogActionsToolbar.vue')['default']
-    LogContainer: typeof import('./components/LogContainer.vue')['default']
-    LogEventSource: typeof import('./components/LogEventSource.vue')['default']
-    LogViewer: typeof import('./components/LogViewer.vue')['default']
-    LogViewerWithSource: typeof import('./components/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']
+    LogActionsToolbar: typeof import('./components/LogViewer/LogActionsToolbar.vue')['default']
+    LogContainer: typeof import('./components/LogViewer/LogContainer.vue')['default']
+    LogDate: typeof import('./components/LogViewer/LogDate.vue')['default']
+    LogEventSource: typeof import('./components/LogViewer/LogEventSource.vue')['default']
+    LogLevel: typeof import('./components/LogViewer/LogLevel.vue')['default']
+    LogStd: typeof import('./components/LogViewer/LogStd.vue')['default']
+    LogViewer: typeof import('./components/LogViewer/LogViewer.vue')['default']
+    LogViewerWithSource: typeof import('./components/LogViewer/LogViewerWithSource.vue')['default']
+    'Mdi:dotsVertical': typeof import('~icons/mdi/dots-vertical')['default']
+    'Mdi:lightChevronDoubleDown': typeof import('~icons/mdi-light/chevron-double-down')['default']
+    'Mdi:lightChevronLeft': typeof import('~icons/mdi-light/chevron-left')['default']
+    'Mdi:lightChevronRight': typeof import('~icons/mdi-light/chevron-right')['default']
+    'Mdi:lightCog': typeof import('~icons/mdi-light/cog')['default']
+    'Mdi:lightLogout': typeof import('~icons/mdi-light/logout')['default']
+    'Mdi:lightMagnify': typeof import('~icons/mdi-light/magnify')['default']
+    MobileMenu: typeof import('./components/common/MobileMenu.vue')['default']
+    'Octicon:container24': typeof import('~icons/octicon/container24')['default']
+    'Octicon:download24': typeof import('~icons/octicon/download24')['default']
+    'Octicon:trash24': typeof import('~icons/octicon/trash24')['default']
+    Popup: typeof import('./components/Popup.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     ScrollableView: typeof import('./components/ScrollableView.vue')['default']
     ScrollProgress: typeof import('./components/ScrollProgress.vue')['default']
     Search: typeof import('./components/Search.vue')['default']
     SideMenu: typeof import('./components/SideMenu.vue')['default']
+    SimpleLogItem: typeof import('./components/LogViewer/SimpleLogItem.vue')['default']
+    SkippedEntriesLogItem: typeof import('./components/LogViewer/SkippedEntriesLogItem.vue')['default']
+    StatMonitor: typeof import('./components/LogViewer/StatMonitor.vue')['default']
+    StatSparkline: typeof import('./components/LogViewer/StatSparkline.vue')['default']
+    Tag: typeof import('./components/common/Tag.vue')['default']
+    ZigZag: typeof import('./components/LogViewer/ZigZag.vue')['default']
   }
 }
-
-export {}

assets/components/ContainerStat.vue

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

assets/components/ContainerTitle.vue

@@ -1,21 +0,0 @@
-<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 { Container } from "@/types/Container";
-import { PropType } from "vue";
-defineProps({
-  container: {
-    type: Object as PropType<Container>,
-    required: true,
-  },
-});
-</script>
-
-<style lang="scss" scoped></style>

assets/components/DropdownMenu.vue

@@ -1,11 +1,13 @@
 <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>
+      <slot name="trigger">
+        <button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
+          <span class="icon">
+            <mdi:dots-vertical />
+          </span>
+        </button>
+      </slot>
     </div>
     <div class="dropdown-menu" id="dropdown-menu" role="menu">
       <div class="dropdown-content">
@@ -26,12 +28,14 @@
 
   & > .icon {
     height: 100%;
+
     & > svg {
       align-self: flex-start;
       height: 0.85em;
     }
   }
 }
+
 .is-top {
   & .dropdown-menu {
     top: 0;

assets/components/FuzzySearchModal.vue

@@ -3,27 +3,30 @@
     <o-autocomplete
       ref="autocomplete"
       v-model="query"
-      placeholder="Search containers using ⌘ + k or ctrl + k"
-      field="name"
+      :placeholder="$t('placeholder.search-containers')"
       open-on-focus
       keep-first
       expanded
-      :data="results"
+      :data="data"
       @select="selected"
     >
-      <template #default="props">
+      <template #default="{ option: item }">
         <div class="media">
           <div class="media-left">
-            <span class="icon is-small" :class="props.option.state">
-              <octicon-container-24 />
+            <span class="icon is-small" :class="item.state">
+              <octicon:container-24 />
             </span>
           </div>
           <div class="media-content">
-            {{ props.option.name }}
+            {{ item.name }}
           </div>
           <div class="media-right">
-            <span class="icon is-small column-icon" @click.stop.prevent="addColumn(props.option)" title="Pin as column">
-              <cil-columns />
+            <span
+              class="icon is-small column-icon"
+              @click.stop.prevent="addColumn(item)"
+              :title="$t('tooltip.pin-column')"
+            >
+              <cil:columns />
             </span>
           </div>
         </div>
@@ -33,67 +36,64 @@
 </template>
 
 <script lang="ts" setup>
-import fuzzysort from "fuzzysort";
-import { computed, nextTick, onMounted, ref, reactive } from "vue";
-import { useRouter } from "vue-router";
-import { useContainerStore } from "@/stores/container";
-import { storeToRefs } from "pinia";
-import { Container } from "@/types/Container";
+import { Container } from "@/models/Container";
+import { useFuse } from "@vueuse/integrations/useFuse";
 
-const props = defineProps({
-  maxResults: {
-    default: 20,
-    type: Number,
-  },
-});
+const { maxResults: resultLimit = 20 } = defineProps<{
+  maxResults?: number;
+}>();
 
-const emit = defineEmits(["close"]);
+const close = defineEmit();
 
 const query = ref("");
 const autocomplete = ref<HTMLElement>();
 const router = useRouter();
 const store = useContainerStore();
 const { containers } = storeToRefs(store);
-const preparedContainers = computed(() =>
-  containers.value.map(({ name, id, created, state }) =>
-    reactive({
-      name,
+
+const list = computed(() => {
+  return containers.value.map(({ id, created, name, state }) => {
+    return {
       id,
       created,
+      name,
       state,
-      preparedName: fuzzysort.prepare(name),
-    })
-  )
-);
-
-const results = computed(() => {
-  const options = {
-    limit: props.maxResults,
-    key: "preparedName",
-  };
-  if (query.value) {
-    const results = fuzzysort.go(query.value, preparedContainers.value, options);
-    results.forEach((result) => {
-      if (result.obj.state === "running") {
-        // @ts-ignore
-        result.score += 1;
-      }
-    });
-    return [...results].sort((a, b) => b.score - a.score).map((i) => i.obj);
-  } else {
-    return [...preparedContainers.value].sort((a, b) => b.created - a.created);
-  }
+    };
+  });
 });
 
-onMounted(() => nextTick(() => autocomplete.value?.focus()));
+const { results } = useFuse(query, list, {
+  fuseOptions: { keys: ["name"], includeScore: true },
+  resultLimit,
+  matchAllWhenSearchEmpty: true,
+});
 
-function selected(item: { id: string; name: string }) {
-  router.push({ name: "container", params: { id: item.id } });
-  emit("close");
+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 } });
+  close();
 }
 function addColumn(container: Container) {
   store.appendActiveContainer(container);
-  emit("close");
+  close();
 }
 </script>
 
@@ -103,6 +103,15 @@ function addColumn(container: Container) {
   width: 580px;
 }
 
+@media screen and (max-width: 768px) {
+  .panel {
+    min-height: 200px;
+    width: auto;
+    margin-left: 0.25rem !important;
+    margin-right: 0.25rem !important;
+  }
+}
+
 .running {
   color: var(--primary-color);
 }
@@ -119,9 +128,11 @@ function addColumn(container: Container) {
 
 :deep(a.dropdown-item) {
   padding-right: 1em;
+
   .media-right {
     visibility: hidden;
   }
+
   &:hover .media-right {
     visibility: visible;
   }

assets/components/InfiniteLoader.vue

@@ -9,30 +9,28 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, onMounted, onUnmounted, nextTick } from "vue";
-
-const props = defineProps({
-  onLoadMore: Function,
-  enabled: Boolean,
-});
+const { onLoadMore = () => {}, enabled } = defineProps<{
+  onLoadMore: () => void;
+  enabled: boolean;
+}>();
 
 const isLoading = ref(false);
 const root = ref<HTMLElement>();
 
 const observer = new IntersectionObserver(async (entries) => {
   if (entries[0].intersectionRatio <= 0) return;
-  if (props.onLoadMore && props.enabled) {
-    const scrollingParent = root.value.closest("[data-scrolling]") || document.documentElement;
+  if (onLoadMore && enabled) {
+    const scrollingParent = root.value?.closest("[data-scrolling]") || document.documentElement;
     const previousHeight = scrollingParent.scrollHeight;
     isLoading.value = true;
-    await props.onLoadMore();
+    await onLoadMore();
     isLoading.value = false;
     await nextTick();
     scrollingParent.scrollTop += scrollingParent.scrollHeight - previousHeight;
   }
 });
 
-onMounted(() => observer.observe(root.value));
+onMounted(() => observer.observe(root.value!));
 onUnmounted(() => observer.disconnect());
 </script>
 

assets/components/LogActionsToolbar.vue

@@ -1,86 +0,0 @@
-<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">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">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">Search</div>
-        </div>
-      </div>
-    </a>
-  </dropdown-menu>
-</template>
-
-<script lang="ts" setup>
-import { onMounted, onUnmounted, PropType } from "vue";
-import hotkeys from "hotkeys-js";
-import config from "@/stores/config";
-import { Container } from "@/types/Container";
-import { useSearchFilter } from "@/composables/search";
-
-const { showSearch } = useSearchFilter();
-
-const { base } = config;
-
-const props = defineProps({
-  onClearClicked: {
-    type: Function as PropType<(e: Event) => void>,
-    default: (e: Event) => {},
-  },
-  container: {
-    type: Object as () => Container,
-    required: true,
-  },
-});
-
-const onHotkey = (event: Event) => {
-  props.onClearClicked(event);
-  event.preventDefault();
-};
-
-onMounted(() => hotkeys("shift+command+l, shift+ctrl+l", onHotkey));
-onUnmounted(() => hotkeys.unbind("shift+command+l, shift+ctrl+l", onHotkey));
-</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/LogContainer.vue

@@ -1,76 +0,0 @@
-<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 :container="container" @close="$emit('close')" />
-        </div>
-        <div class="column is-narrow is-paddingless">
-          <container-stat :stat="container.stat" :state="container.state" v-if="container.stat" />
-        </div>
-
-        <div class="mr-2 column is-narrow is-paddingless">
-          <log-actions-toolbar :container="container" :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" :id="id" @loading-more="setLoading($event)" />
-    </template>
-  </scrollable-view>
-</template>
-
-<script lang="ts" setup>
-import { ref, toRefs } from "vue";
-import LogViewerWithSource from "./LogViewerWithSource.vue";
-import { useContainerStore } from "@/stores/container";
-
-const props = defineProps({
-  id: {
-    type: String,
-    required: true,
-  },
-  showTitle: {
-    type: Boolean,
-    default: false,
-  },
-  scrollable: {
-    type: Boolean,
-    default: false,
-  },
-  closable: {
-    type: Boolean,
-    default: false,
-  },
-});
-
-const emit = defineEmits(["close"]);
-
-const { id } = toRefs(props);
-const store = useContainerStore();
-
-const container = store.currentContainer(id);
-
-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/LogEventSource.spec.ts

@@ -1,237 +0,0 @@
-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, beforeAll, afterAll } from "vitest";
-import { computed, Ref } from "vue";
-import { createRouter, createWebHistory } from "vue-router";
-
-vi.mock("lodash.debounce", () => ({
-  __esModule: true,
-  default: vi.fn((fn) => {
-    fn.cancel = () => {};
-    return fn;
-  }),
-}));
-
-vi.mock("@/stores/container", () => ({
-  __esModule: true,
-  useContainerStore() {
-    return {
-      currentContainer(id: Ref<string>) {
-        return computed(() => ({ id: id.value }));
-      },
-    };
-  },
-}));
-
-vi.mock("@/stores/config", () => ({
-  __esModule: true,
-  default: { base: "" },
-}));
-
-/**
- * @vitest-environment jsdom
- */
-describe("<LogEventSource />", () => {
-  const search = useSearchFilter();
-
-  beforeEach(() => {
-    global.EventSource = EventSource;
-    window.scrollTo = vi.fn();
-    global.IntersectionObserver = vi.fn().mockImplementation(() => ({
-      observe: vi.fn(),
-      disconnect: vi.fn(),
-    }));
-  });
-
-  function createLogEventSource(
-    {
-      searchFilter = "",
-      hourStyle = "auto",
-    }: { searchFilter?: string | undefined; hourStyle?: "auto" | "24" | "12" } = {
-      hourStyle: "auto",
-    }
-  ) {
-    settings.value.hourStyle = hourStyle;
-    search.searchFilter.value = searchFilter;
-
-    const router = createRouter({
-      history: createWebHistory("/"),
-      routes: [
-        {
-          path: "/",
-          component: {
-            template: "Test from createLogEventSource",
-          },
-        },
-      ],
-    });
-
-    return mount(LogEventSource, {
-      global: {
-        plugins: [router, createTestingPinia({ createSpy: vi.fn })],
-        components: {
-          LogViewer,
-        },
-      },
-      slots: {
-        default: `
-        <template #scoped="params"><log-viewer :messages="params.messages"></log-viewer></template>
-        `,
-      },
-      props: { id: "abc" },
-    });
-  }
-
-  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: `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).toMatchSnapshot();
-  });
-
-  test("should parse messages with loki's timestamp format", async () => {
-    const wrapper = createLogEventSource();
-    sources["/api/logs/stream?id=abc&lastEventId="].emitOpen();
-    sources["/api/logs/stream?id=abc&lastEventId="].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).toMatchSnapshot();
-  });
-
-  test("should pass messages to slot", async () => {
-    const wrapper = createLogEventSource();
-    sources["/api/logs/stream?id=abc&lastEventId="].emitOpen();
-    sources["/api/logs/stream?id=abc&lastEventId="].emitMessage({
-      data: `2019-06-12T10:55:42.459034602Z "This is a message."`,
-    });
-    const [message, _] = wrapper.getComponent(LogViewer).vm.messages;
-
-    const { key, ...messageWithoutKey } = message;
-
-    expect(key).toBe("2019-06-12T10:55:42.459034602Z");
-
-    expect(messageWithoutKey).toMatchSnapshot();
-  });
-
-  describe("render html correctly", () => {
-    const RealDate = Date;
-    beforeAll(() => {
-      // @ts-ignore
-      global.Date = class extends RealDate {
-        constructor(arg: any | number) {
-          super(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&lastEventId="].emitOpen();
-      sources["/api/logs/stream?id=abc&lastEventId="].emitMessage({
-        data: `2019-06-12T10:55:42.459034602Z "This is a message."`,
-      });
-
-      await wrapper.vm.$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: `2019-06-12T10:55:42.459034602Z \x1b[30mblack\x1b[37mwhite`,
-      });
-
-      await wrapper.vm.$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: `2019-06-12T10:55:42.459034602Z <test>foo bar</test>`,
-      });
-
-      await wrapper.vm.$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: `2019-06-12T23:55:42.459034602Z <test>foo bar</test>`,
-      });
-
-      await wrapper.vm.$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: `2019-06-12T23:55:42.459034602Z <test>foo bar</test>`,
-      });
-
-      await wrapper.vm.$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: `2019-06-11T10:55:42.459034602Z Foo bar`,
-      });
-      sources["/api/logs/stream?id=abc&lastEventId="].emitMessage({
-        data: `2019-06-12T10:55:42.459034602Z This is a test <hi></hi>`,
-      });
-
-      await wrapper.vm.$nextTick();
-      expect(wrapper.find("ul.events").html()).toMatchSnapshot();
-    });
-  });
-});

assets/components/LogEventSource.vue

@@ -1,133 +0,0 @@
-<template>
-  <infinite-loader :onLoadMore="loadOlderLogs" :enabled="messages.length > 100"></infinite-loader>
-  <slot :messages="messages"></slot>
-</template>
-
-<script lang="ts" setup>
-import { toRefs, ref, watch, onUnmounted } from "vue";
-import debounce from "lodash.debounce";
-
-import { LogEntry } from "@/types/LogEntry";
-import InfiniteLoader from "./InfiniteLoader.vue";
-import config from "@/stores/config";
-import { useContainerStore } from "@/stores/container";
-
-const props = defineProps({
-  id: {
-    type: String,
-    required: true,
-  },
-});
-
-const { id } = toRefs(props);
-const emit = defineEmits(["loading-more"]);
-const store = useContainerStore();
-const container = store.currentContainer(id);
-
-const messages = ref<LogEntry[]>([]);
-const buffer = ref<LogEntry[]>([]);
-
-function flushNow() {
-  messages.value.push(...buffer.value);
-  buffer.value = [];
-}
-
-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.value = [];
-    buffer.value = [];
-    lastEventId = "";
-  }
-
-  es = new EventSource(`${config.base}/api/logs/stream?id=${props.id}&lastEventId=${lastEventId}`);
-  es.addEventListener("container-stopped", () => {
-    es?.close();
-    es = null;
-    buffer.value.push({
-      event: "container-stopped",
-      message: "Container stopped",
-      date: new Date(),
-      key: new Date().toString(),
-    });
-    flushBuffer();
-    flushBuffer.flush();
-  });
-  es.addEventListener("error", (e) => console.error("EventSource failed: " + JSON.stringify(e)));
-  es.onmessage = (e) => {
-    lastEventId = e.lastEventId;
-    if (e.data) {
-      buffer.value.push(parseMessage(e.data));
-      flushBuffer();
-    }
-  };
-}
-
-async function loadOlderLogs() {
-  if (messages.value.length < 300) return;
-
-  emit("loading-more", true);
-  const to = messages.value[0].date;
-  const last = messages.value[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=${props.id}&from=${from.toISOString()}&to=${to.toISOString()}`)
-  ).text();
-  if (logs) {
-    const newMessages = logs
-      .trim()
-      .split("\n")
-      .map((line) => parseMessage(line));
-    messages.value.unshift(...newMessages);
-  }
-  emit("loading-more", false);
-}
-
-function parseMessage(data: String): LogEntry {
-  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 + 1);
-  return { key, date, message };
-}
-
-watch(
-  () => container.value.state,
-  (newValue, oldValue) => {
-    console.log("LogEventSource: container changed", newValue, oldValue);
-    if (newValue == "running" && newValue != oldValue) {
-      buffer.value.push({
-        event: "container-started",
-        message: "Container started",
-        date: new Date(),
-        key: new Date().toString(),
-      });
-      connect({ clear: false });
-    }
-  }
-);
-
-onUnmounted(() => {
-  if (es) {
-    es.close();
-  }
-});
-
-connect();
-watch(id, () => connect());
-
-defineExpose({
-  clear: () => (messages.value = []),
-});
-</script>

assets/components/LogViewer.vue

@@ -1,189 +0,0 @@
-<template>
-  <ul class="events" ref="events" :class="{ 'disable-wrap': !softWrap, [size]: true }">
-    <li
-      v-for="(item, index) in filtered"
-      :key="item.key"
-      :data-key="item.key"
-      :data-event="item.event"
-      :class="{ selected: item.selected }"
-    >
-      <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.key}`">
-            <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>
-      <div class="line">
-        <span class="date" v-if="showTimestamp"> <relative-time :date="item.date"></relative-time></span>
-        <span class="text" v-html="colorize(item.message)"></span>
-      </div>
-    </li>
-  </ul>
-</template>
-
-<script lang="ts" setup>
-import { PropType, ref, toRefs, watch } from "vue";
-import { useRouteHash } from "@vueuse/router";
-import { size, showTimestamp, softWrap } from "@/composables/settings";
-import RelativeTime from "./RelativeTime.vue";
-import AnsiConvertor from "ansi-to-html";
-import { LogEntry } from "@/types/LogEntry";
-import { useSearchFilter } from "@/composables/search";
-
-const props = defineProps({
-  messages: {
-    type: Array as PropType<LogEntry[]>,
-    required: true,
-  },
-});
-
-const ansiConvertor = new AnsiConvertor({ escapeXML: true });
-const { filteredMessages, resetSearch, markSearch, isSearching } = useSearchFilter();
-const colorize = (value: string) => markSearch(ansiConvertor.toHtml(value));
-const { messages } = toRefs(props);
-const filtered = filteredMessages(messages);
-const events = ref<HTMLElement>();
-let lastSelectedItem: LogEntry | undefined = undefined;
-function handleJumpLineSelected(e: Event, item: LogEntry) {
-  if (lastSelectedItem) {
-    lastSelectedItem.selected = false;
-  }
-  lastSelectedItem = item;
-  item.selected = true;
-  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;
-  font-family: SFMono-Regular, Consolas, Liberation Mono, monaco, Menlo, monospace;
-
-  &.disable-wrap {
-    .line,
-    .text {
-      white-space: nowrap;
-    }
-  }
-
-  & > li {
-    display: flex;
-    word-wrap: break-word;
-    line-height: 130%;
-    &:last-child {
-      scroll-snap-align: end;
-      scroll-margin-block-end: 5rem;
-    }
-    &[data-event="container-stopped"] {
-      color: #f14668;
-    }
-    &[data-event="container-started"] {
-      color: hsl(141, 53%, 53%);
-    }
-    &.selected .date {
-      background-color: var(--menu-item-active-background-color);
-
-      color: var(--text-color);
-    }
-    &.selected > .date {
-      background-color: white;
-    }
-    & > .line {
-      margin: auto 0;
-      width: 100%;
-    }
-    & > .line-options {
-      display: flex;
-      flex-direction: row-reverse;
-      margin-right: 1em;
-    }
-  }
-
-  &.small {
-    font-size: 60%;
-  }
-
-  &.medium {
-    font-size: 80%;
-  }
-
-  &.large {
-    font-size: 120%;
-  }
-}
-
-@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;
-  }
-}
-
-.date {
-  padding-left: 5px;
-  padding-right: 5px;
-  border-radius: 3px;
-}
-
-.text {
-  white-space: pre-wrap;
-  &::before {
-    content: " ";
-  }
-}
-
-:deep(mark) {
-  border-radius: 2px;
-  background-color: var(--secondary-color);
-  animation: pops 200ms ease-out;
-  display: inline-block;
-}
-
-@keyframes pops {
-  0% {
-    transform: scale(1.5);
-  }
-  100% {
-    transform: scale(1.05);
-  }
-}
-</style>

assets/components/LogViewer/ComplexLogItem.vue

@@ -0,0 +1,76 @@
+<template>
+  <div class="columns is-1 is-variable is-mobile">
+    <div class="column is-narrow" v-if="showStd">
+      <log-std :std="logEntry.std"></log-std>
+    </div>
+    <div class="column is-narrow" v-if="showTimestamp">
+      <log-date :date="logEntry.date"></log-date>
+    </div>
+    <div class="column is-narrow is-flex">
+      <log-level :level="logEntry.level"></log-level>
+    </div>
+    <div class="column">
+      <ul class="fields" :class="{ expanded }" @click="expandToggle()">
+        <li v-for="(value, name) in validValues">
+          <span class="has-text-grey">{{ name }}=</span
+          ><span class="has-text-weight-bold" v-if="value === null">&lt;null&gt;</span>
+          <template v-else-if="Array.isArray(value)">
+            <span class="has-text-weight-bold" v-html="markSearch(JSON.stringify(value))"> </span>
+          </template>
+          <span class="has-text-weight-bold" v-html="markSearch(value)" v-else></span>
+        </li>
+        <li class="has-text-grey" v-if="Object.keys(validValues).length === 0">all values are hidden</li>
+      </ul>
+      <field-list :fields="logEntry.unfilteredMessage" :expanded="expanded" :visible-keys="visibleKeys"></field-list>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import { type ComplexLogEntry } from "@/models/LogEntry";
+
+const { markSearch } = useSearchFilter();
+
+const { logEntry } = defineProps<{
+  logEntry: ComplexLogEntry;
+  visibleKeys: string[][];
+}>();
+
+const [expanded, expandToggle] = useToggle();
+
+const validValues = computed(() => {
+  return Object.fromEntries(Object.entries(logEntry.message).filter(([_, value]) => value !== undefined));
+});
+</script>
+
+<style lang="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;
+    }
+  }
+
+  &.expanded:hover {
+    &::after {
+      content: "collapse json";
+    }
+  }
+
+  li {
+    display: inline-block;
+
+    & + li {
+      margin-left: 1em;
+    }
+  }
+}
+</style>

assets/components/LogViewer/ContainerHealth.vue

@@ -0,0 +1,27 @@
+<template>
+  <div class="icon is-small health" :health="health" v-if="health" :title="health">
+    <cil:check-circle v-if="health == 'healthy'" />
+    <cil:x-circle v-else-if="health == 'unhealthy'" />
+    <cil:circle v-else />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ContainerHealth } from "@/types/Container";
+
+defineProps<{
+  health: ContainerHealth | undefined;
+}>();
+</script>
+
+<style lang="scss" scoped>
+.health {
+  &[health="unhealthy"] {
+    color: var(--red-color);
+  }
+
+  &[health="healthy"] {
+    color: var(--green-color);
+  }
+}
+</style>

assets/components/LogViewer/ContainerPopup.vue

@@ -0,0 +1,26 @@
+<template>
+  <div>
+    <span class="has-text-weight-light"> RUNNING </span>
+    <span class="has-text-weight-semibold">
+      <distance-time :date="container.created" strict :suffix="false"></distance-time>
+    </span>
+  </div>
+  <div>
+    <span class="has-text-weight-light"> LOAD </span>
+    <span class="has-text-weight-semibold"> {{ container.getLastStat().snapshot.cpu }}% </span>
+  </div>
+  <div>
+    <span class="has-text-weight-light"> MEM </span>
+    <span class="has-text-weight-semibold"> {{ formatBytes(container.getLastStat().snapshot.memoryUsage) }} </span>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { Container } from "@/models/Container";
+
+const { container } = defineProps<{
+  container: Container;
+}>();
+</script>
+
+<style lang="scss" scoped></style>

assets/components/LogViewer/ContainerStat.vue

@@ -0,0 +1,70 @@
+<template>
+  <div class="is-size-7 is-uppercase columns is-marginless is-mobile is-vcentered" v-if="container.stat">
+    <stat-monitor
+      class="column is-narrow"
+      :data="memoryData"
+      label="mem"
+      :stat-value="formatBytes(unref(container.stat).memoryUsage)"
+    ></stat-monitor>
+    <stat-monitor
+      class="column is-narrow"
+      :data="cpuData"
+      label="load"
+      :stat-value="unref(container.stat).cpu + '%'"
+    ></stat-monitor>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { Container } from "@/models/Container";
+import { type ComputedRef } from "vue";
+
+const container = inject("container") as ComputedRef<Container>;
+
+const cpuData = computedWithControl(
+  () => container.value.getLastStat(),
+  () => {
+    const history = container.value.getStatHistory();
+    const points: Point<unknown>[] = history.map((stat, i) => ({
+      x: i,
+      y: stat.snapshot.cpu,
+      value: stat.snapshot.cpu + "%",
+    }));
+    return points;
+  }
+);
+
+const memoryData = computedWithControl(
+  () => container.value.getLastStat(),
+  () => {
+    const history = container.value.getStatHistory();
+    const points: Point<string>[] = history.map((stat, i) => ({
+      x: i,
+      y: stat.snapshot.memory,
+      value: formatBytes(stat.snapshot.memoryUsage),
+    }));
+    return points;
+  }
+);
+</script>
+
+<style lang="scss" scoped>
+.has-border {
+  border: 1px solid var(--primary-color);
+  border-radius: 3px;
+  padding: 1px 1px 0 1px;
+  display: flex;
+  overflow: hidden;
+  padding-top: 0.25em;
+}
+
+.has-background-body-color {
+  background-color: var(--body-background-color);
+}
+
+.is-top-left {
+  position: absolute;
+  top: 0;
+  left: 0.75em;
+}
+</style>

assets/components/LogViewer/ContainerTitle.vue

@@ -0,0 +1,24 @@
+<template>
+  <div class="columns is-marginless has-text-weight-bold is-family-monospace">
+    <div class="column is-narrow is-hidden-mobile" v-if="container.health">
+      <container-health :health="container.health"></container-health>
+    </div>
+    <div class="column is-ellipsis">
+      {{ container.name }}<span v-if="container.isSwarm">{{ container.swarmId }}</span>
+      <tag class="is-hidden-mobile">{{ container.image.replace(/@sha.*/, "") }}</tag>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { Container } from "@/models/Container";
+import { type ComputedRef } from "vue";
+
+const container = inject("container") as ComputedRef<Container>;
+</script>
+
+<style lang="scss" scoped>
+.icon {
+  vertical-align: middle;
+}
+</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" v-html="value"></span>
+      </template>
+    </li>
+  </ul>
+</template>
+<script lang="ts" setup>
+import { arrayEquals, isObject } from "@/utils";
+
+const {
+  fields,
+  expanded = false,
+  parentKey = [],
+  visibleKeys = [],
+} = defineProps<{
+  fields: Record<string, any>;
+  expanded?: boolean;
+  parentKey?: string[];
+  visibleKeys?: string[][];
+}>();
+
+const root = ref<HTMLElement>();
+
+async function toggleField(field: string) {
+  const index = fieldIndex(field);
+
+  if (index > -1) {
+    visibleKeys.splice(index, 1);
+  } else {
+    visibleKeys.push(parentKey.concat(field));
+  }
+
+  await nextTick();
+
+  root.value?.scrollIntoView({
+    block: "center",
+  });
+}
+
+function hasField(field: string) {
+  return fieldIndex(field) > -1;
+}
+
+function fieldIndex(field: string) {
+  const path = parentKey.concat(field);
+  return visibleKeys.findIndex((keys) => arrayEquals(toRaw(keys), toRaw(path)));
+}
+</script>
+
+<style lang="scss" scoped>
+ul {
+  margin-left: 2em;
+}
+</style>

assets/components/LogViewer/LogActionsToolbar.vue

@@ -0,0 +1,135 @@
+<template>
+  <dropdown-menu class="is-right">
+    <template #trigger>
+      <button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
+        <span class="icon">
+          <carbon:circle-solid class="is-red is-small" v-if="streamConfig.stderr" />
+          <carbon:circle-solid class="is-blue is-small" v-if="streamConfig.stdout" />
+        </span>
+      </button>
+    </template>
+    <a class="dropdown-item" @click="clear()">
+      <div class="level is-justify-content-start">
+        <div class="level-left">
+          <div class="level-item">
+            <octicon:trash-24 />
+          </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}&host=${sessionHost}`">
+      <div class="level is-justify-content-start">
+        <div class="level-left">
+          <div class="level-item">
+            <octicon:download-24 />
+          </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 />
+          </div>
+        </div>
+        <div class="level-right">
+          <div class="level-item">{{ $t("toolbar.search") }}</div>
+        </div>
+      </div>
+    </a>
+
+    <hr class="dropdown-divider" />
+    <a
+      class="dropdown-item"
+      @click="
+        streamConfig.stdout = true;
+        streamConfig.stderr = true;
+      "
+    >
+      <div class="level is-justify-content-start">
+        <div class="level-left">
+          <div class="level-item">
+            <template v-if="streamConfig.stderr && streamConfig.stdout">
+              <carbon:circle-solid class="is-red is-small" />
+              <carbon:circle-solid class="is-blue is-small" />
+            </template>
+          </div>
+        </div>
+        <div class="level-right">
+          {{ $t("toolbar.show-all") }}
+        </div>
+      </div>
+    </a>
+    <a
+      class="dropdown-item"
+      @click="
+        streamConfig.stdout = true;
+        streamConfig.stderr = false;
+      "
+    >
+      <div class="level is-justify-content-start">
+        <div class="level-left">
+          <div class="level-item">
+            <carbon:circle-solid class="is-blue is-small" v-if="!streamConfig.stderr && streamConfig.stdout" />
+          </div>
+        </div>
+        <div class="level-right">
+          {{ $t("toolbar.show", { std: "STDOUT" }) }}
+        </div>
+      </div>
+    </a>
+    <a
+      class="dropdown-item"
+      @click="
+        streamConfig.stdout = false;
+        streamConfig.stderr = true;
+      "
+    >
+      <div class="level is-justify-content-start">
+        <div class="level-left">
+          <div class="level-item">
+            <carbon:circle-solid class="is-red is-small" v-if="streamConfig.stderr && !streamConfig.stdout" />
+          </div>
+        </div>
+        <div class="level-right">
+          <div class="level-item">
+            {{ $t("toolbar.show", { std: "STDERR" }) }}
+          </div>
+        </div>
+      </div>
+    </a>
+  </dropdown-menu>
+</template>
+
+<script lang="ts" setup>
+import { type ComputedRef } from "vue";
+import { Container } from "@/models/Container";
+
+const { showSearch } = useSearchFilter();
+const { base } = config;
+
+const clear = defineEmit();
+
+const container = inject("container") as ComputedRef<Container>;
+const streamConfig = inject("stream-config") as { stdout: boolean; stderr: boolean };
+</script>
+
+<style lang="scss" scoped>
+.level-left .level-item {
+  width: 2.2em;
+  align-items: center;
+  margin-right: 0.5em;
+}
+
+.is-small {
+  width: 0.6em;
+}
+</style>

assets/components/LogViewer/LogContainer.vue

@@ -0,0 +1,71 @@
+<template>
+  <scrollable-view :scrollable="scrollable" v-if="container">
+    <template #header v-if="showTitle">
+      <div class="mr-0 columns is-mobile is-vcentered is-marginless has-boxshadow">
+        <div class="column is-clipped is-paddingless">
+          <container-title @close="$emit('close')" />
+        </div>
+        <div class="column is-narrow is-paddingless">
+          <container-stat />
+        </div>
+
+        <div class="mr-2 column is-narrow is-paddingless is-hidden-mobile">
+          <log-actions-toolbar @clear="onClearClicked()" />
+        </div>
+        <div class="mr-2 column is-narrow is-paddingless" v-if="closable">
+          <button class="delete is-medium" @click="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 close = defineEmit();
+
+const store = useContainerStore();
+
+const container = store.currentContainer($$(id));
+const config = reactive({ stdout: true, stderr: true });
+
+provide("container", container);
+provide("stream-config", config);
+
+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,19 @@
+<template>
+  <date-time :date="date" class="date"></date-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;
+  background-color: var(--scheme-main-ter);
+  color: #258ccd;
+}
+</style>

assets/components/LogViewer/LogEventSource.spec.ts

@@ -0,0 +1,206 @@
+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: "", hosts: ["localhost"] },
+}));
+
+/**
+ * @vitest-environment jsdom
+ */
+describe("<LogEventSource />", () => {
+  const search = useSearchFilter();
+
+  beforeEach(() => {
+    global.EventSource = EventSource;
+    // @ts-ignore
+    window.scrollTo = vi.fn();
+    global.IntersectionObserver = vi.fn().mockImplementation(() => ({
+      observe: vi.fn(),
+      disconnect: vi.fn(),
+    }));
+    vi.useFakeTimers();
+    vi.setSystemTime(1560336942459);
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+    vi.useRealTimers();
+  });
+
+  function createLogEventSource(
+    {
+      searchFilter = "",
+      hourStyle = "auto",
+    }: { searchFilter?: string | undefined; hourStyle?: "auto" | "24" | "12" } = {
+      hourStyle: "auto",
+    }
+  ) {
+    settings.value.hourStyle = hourStyle;
+    search.searchFilter.value = searchFilter;
+    if (searchFilter) {
+      search.showSearch.value = true;
+    }
+
+    const router = createRouter({
+      history: createWebHistory("/"),
+      routes: [
+        {
+          path: "/",
+          component: {
+            template: "Test from createLogEventSource",
+          },
+        },
+      ],
+    });
+
+    return mount(LogEventSource, {
+      global: {
+        plugins: [router, createTestingPinia({ createSpy: vi.fn })],
+        components: {
+          LogViewer,
+        },
+        provide: {
+          container: computed(() => ({ id: "abc", image: "test:v123" })),
+          "stream-config": reactive({ stdout: true, stderr: true }),
+          scrollingPaused: computed(() => false),
+        },
+      },
+      slots: {
+        default: `
+        <template #scoped="params"><log-viewer :messages="params.messages"></log-viewer></template>
+        `,
+      },
+      props: {},
+    });
+  }
+
+  const sourceUrl = "/api/logs/stream?id=abc&lastEventId=&host=localhost&stdout=1&stderr=1";
+
+  test("renders correctly", async () => {
+    const wrapper = createLogEventSource();
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  test("should connect to EventSource", async () => {
+    const wrapper = createLogEventSource();
+    sources[sourceUrl].emitOpen();
+    expect(sources[sourceUrl].readyState).toBe(1);
+    wrapper.unmount();
+  });
+
+  test("should close EventSource", async () => {
+    const wrapper = createLogEventSource();
+    sources[sourceUrl].emitOpen();
+    wrapper.unmount();
+    expect(sources[sourceUrl].readyState).toBe(2);
+  });
+
+  test("should parse messages", async () => {
+    const wrapper = createLogEventSource();
+    sources[sourceUrl].emitOpen();
+    sources[sourceUrl].emitMessage({
+      data: `{"ts":1560336942459, "m":"This is a message.", "id":1}`,
+    });
+
+    vi.runAllTimers();
+    await nextTick();
+
+    // @ts-ignore
+    const [message, _] = wrapper.vm.messages;
+    expect(message).toMatchSnapshot();
+  });
+
+  describe("render html correctly", () => {
+    test("should render messages", async () => {
+      const wrapper = createLogEventSource();
+      sources[sourceUrl].emitOpen();
+      sources[sourceUrl].emitMessage({
+        data: `{"ts":1560336942459, "m":"This is a message.", "id":1}`,
+      });
+
+      vi.runAllTimers();
+      await nextTick();
+
+      expect(wrapper.find("ul.events").html()).toMatchSnapshot();
+    });
+
+    test("should render messages with color", async () => {
+      const wrapper = createLogEventSource();
+      sources[sourceUrl].emitOpen();
+      sources[sourceUrl].emitMessage({
+        data: '{"ts":1560336942459,"m":"\\u001b[30mblack\\u001b[37mwhite", "id":1}',
+      });
+
+      vi.runAllTimers();
+      await nextTick();
+
+      expect(wrapper.find("ul.events").html()).toMatchSnapshot();
+    });
+
+    test("should render messages with html entities", async () => {
+      const wrapper = createLogEventSource();
+      sources[sourceUrl].emitOpen();
+      sources[sourceUrl].emitMessage({
+        data: `{"ts":1560336942459, "m":"<test>foo bar</test>", "id":1}`,
+      });
+
+      vi.runAllTimers();
+      await nextTick();
+
+      expect(wrapper.find("ul.events").html()).toMatchSnapshot();
+    });
+
+    test("should render dates with 12 hour style", async () => {
+      const wrapper = createLogEventSource({ hourStyle: "12" });
+      sources[sourceUrl].emitOpen();
+      sources[sourceUrl].emitMessage({
+        data: `{"ts":1560336942459, "m":"<test>foo bar</test>", "id":1}`,
+      });
+
+      vi.runAllTimers();
+      await nextTick();
+
+      expect(wrapper.find("ul.events").html()).toMatchSnapshot();
+    });
+
+    test("should render dates with 24 hour style", async () => {
+      const wrapper = createLogEventSource({ hourStyle: "24" });
+      sources[sourceUrl].emitOpen();
+      sources[sourceUrl].emitMessage({
+        data: `{"ts":1560336942459, "m":"<test>foo bar</test>", "id":1}`,
+      });
+
+      vi.runAllTimers();
+      await nextTick();
+
+      expect(wrapper.find("ul.events").html()).toMatchSnapshot();
+    });
+
+    test("should render messages with filter", async () => {
+      const wrapper = createLogEventSource({ searchFilter: "test" });
+      sources[sourceUrl].emitOpen();
+      sources[sourceUrl].emitMessage({
+        data: `{"ts":1560336942459, "m":"foo bar", "id":1}`,
+      });
+      sources[sourceUrl].emitMessage({
+        data: `{"ts":1560336942459, "m":"test bar", "id":2}`,
+      });
+
+      vi.runAllTimers();
+      await nextTick();
+
+      expect(wrapper.find("ul.events").html()).toMatchSnapshot();
+    });
+  });
+});

assets/components/LogViewer/LogEventSource.vue

@@ -0,0 +1,24 @@
+<template>
+  <infinite-loader :onLoadMore="fetchMore" :enabled="messages.length > 100"></infinite-loader>
+  <slot :messages="messages"></slot>
+</template>
+
+<script lang="ts" setup>
+import { Container } from "@/models/Container";
+import { type ComputedRef } from "vue";
+
+const loadingMore = defineEmit<[value: boolean]>();
+
+const container = inject("container") as ComputedRef<Container>;
+const config = inject("stream-config") as { stdout: boolean; stderr: boolean };
+const { messages, loadOlderLogs } = useLogStream(container, config);
+
+const beforeLoading = () => loadingMore(true);
+const afterLoading = () => loadingMore(false);
+
+defineExpose({
+  clear: () => (messages.value = []),
+});
+
+const fetchMore = () => loadOlderLogs({ beforeLoading, afterLoading });
+</script>

assets/components/LogViewer/LogLevel.vue

@@ -0,0 +1,63 @@
+<template>
+  <div :class="level" :data-position="position"></div>
+</template>
+<script lang="ts" setup>
+import { Position } from "@/models/LogEntry";
+
+defineProps<{
+  level?: string;
+  position?: Position;
+}>();
+</script>
+
+<style lang="scss" scoped>
+div {
+  display: inline-block;
+  width: 0.7em;
+  height: 0.7em;
+  border-radius: 0.5em;
+  align-self: auto;
+  margin-top: 0.4em;
+
+  &[data-position="start"] {
+    border-radius: 0.5em 0.5em 0 0;
+    height: 70%;
+    margin-bottom: -0.2em;
+    margin-top: auto;
+    align-self: flex-end;
+  }
+
+  &[data-position="middle"] {
+    border-radius: 0;
+    height: auto;
+    margin: -0.2em 0;
+    align-self: auto;
+  }
+
+  &[data-position="end"] {
+    border-radius: 0 0 0.5em 0.5em;
+    height: 70%;
+    margin-top: -0.2em;
+    align-self: flex-start;
+  }
+
+  &.debug,
+  &.trace {
+    background-color: var(--purple-color);
+  }
+
+  &.info {
+    background-color: var(--green-color);
+  }
+
+  &.error,
+  &.fatal {
+    background-color: var(--red-color);
+  }
+
+  &.warn,
+  &.warning {
+    background-color: var(--orange-color);
+  }
+}
+</style>

assets/components/LogViewer/LogStd.vue

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

assets/components/LogViewer/LogViewer.vue

@@ -0,0 +1,110 @@
+<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 { Container } from "@/models/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) => {
+    if(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: ui-monospace, SFMono-Regular, SF Mono, 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,18 @@
+<template>
+  <log-event-source ref="source" #default="{ messages }" @loading-more="loadingMore($event)">
+    <log-viewer :messages="messages"></log-viewer>
+  </log-event-source>
+</template>
+
+<script lang="ts" setup>
+import LogEventSource from "./LogEventSource.vue";
+
+const loadingMore = defineEmit<[value: boolean]>();
+const source = $ref<InstanceType<typeof LogEventSource>>();
+function clear() {
+  source?.clear();
+}
+defineExpose({
+  clear,
+});
+</script>

assets/components/LogViewer/SimpleLogItem.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="columns is-1 is-variable is-mobile">
+    <div class="column is-narrow" v-if="showStd">
+      <log-std :std="logEntry.std"></log-std>
+    </div>
+    <div class="column is-narrow" v-if="showTimestamp">
+      <log-date :date="logEntry.date"></log-date>
+    </div>
+    <div class="column is-narrow is-flex">
+      <log-level :level="logEntry.level" :position="logEntry.position"></log-level>
+    </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: false, fg: "var(--text-color)" });
+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/StatMonitor.vue

@@ -0,0 +1,52 @@
+<template>
+  <div class="has-text-centered is-relative host" @mouseenter="mouseOver = true" @mouseleave="mouseOver = false">
+    <div class="has-border has-boxshadow is-hidden-mobile">
+      <stat-sparkline :data="data" @selected-point="onSelectedPoint"></stat-sparkline>
+    </div>
+    <div class="has-background-body-color is-top-left">
+      <span class="has-text-weight-light">{{ label }}</span>
+      <span class="has-text-weight-bold">
+        {{ mouseOver ? selectedPoint?.value ?? selectedPoint?.y ?? statValue : statValue }}
+      </span>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+const { data, label, statValue } = defineProps<{ data: Point<unknown>[]; label: string; statValue: string | number }>();
+
+let selectedPoint: Point<unknown> | undefined = $ref();
+
+function onSelectedPoint(point: Point<unknown>) {
+  selectedPoint = point;
+}
+
+let mouseOver = $ref(false);
+</script>
+
+<style lang="scss" scoped>
+.has-border {
+  border: 1px solid var(--primary-color);
+  border-radius: 3px;
+  padding: 1px 1px 0 1px;
+  display: flex;
+  overflow: hidden;
+  padding-top: 0.25em;
+}
+
+.has-background-body-color {
+  background-color: var(--body-background-color);
+}
+
+.host:hover span {
+  color: var(--secondary-color);
+}
+
+@media screen and (min-width: 768px) {
+  .is-top-left {
+    position: absolute;
+    top: 0;
+    left: 0.75em;
+  }
+}
+</style>

assets/components/LogViewer/StatSparkline.vue

@@ -0,0 +1,60 @@
+<template>
+  <svg :width="width" :height="height" @mousemove="onMove">
+    <path :d="path" class="area" />
+    <line :x1="lineX" y1="0" :x2="lineX" :y2="height" class="line" />
+  </svg>
+</template>
+
+<script lang="ts" setup>
+import { extent } from "d3-array";
+import { scaleLinear } from "d3-scale";
+import { area, curveStep } from "d3-shape";
+
+const d3 = { extent, scaleLinear, area, curveStep };
+const { data, width = 150, height = 30 } = defineProps<{ data: Point<unknown>[]; width?: number; height?: number }>();
+const x = d3.scaleLinear().range([width, 0]);
+const y = d3.scaleLinear().range([height, 0]);
+
+const selectedPoint = defineEmit<[value: Point<unknown>]>();
+
+const shape = d3
+  .area<Point<unknown>>()
+  .curve(d3.curveStep)
+  .x((d) => x(d.x))
+  .y0(height)
+  .y1((d) => y(d.y));
+
+const path = computed(() => {
+  x.domain(d3.extent(data, (d) => d.x) as [number, number]);
+  y.domain(d3.extent([...data, { y: 1 }], (d) => d.y) as [number, number]);
+
+  return shape(data) ?? "";
+});
+
+let lineX = $ref(0);
+
+function onMove(e: MouseEvent) {
+  const { offsetX } = e;
+  const xValue = x.invert(offsetX);
+  const index = Math.round(xValue);
+  lineX = x(index);
+  const point = data[index];
+  selectedPoint(point);
+}
+</script>
+
+<style scoped>
+:deep(.area) {
+  fill: var(--primary-color);
+}
+
+:deep(.line) {
+  stroke: var(--secondary-color);
+  stroke-width: 2;
+  display: none;
+}
+
+svg:hover :deep(.line) {
+  display: unset;
+}
+</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,246 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`<LogEventSource /> > render html correctly > should render dates with 12 hour style 1`] = `
+"<ul data-v-2e92daca=\\"\\" class=\\"events medium\\">
+  <li data-v-2e92daca=\\"\\" data-key=\\"1\\" class=\\"\\">
+    <div data-v-2e92daca=\\"\\" class=\\"line-options\\" style=\\"display: none;\\">
+      <div data-v-539164cb=\\"\\" data-v-2e92daca=\\"\\" class=\\"dropdown is-hoverable is-last is-top minimal\\">
+        <div data-v-539164cb=\\"\\" class=\\"dropdown-trigger\\"><button data-v-539164cb=\\"\\" class=\\"button\\" aria-haspopup=\\"true\\" aria-controls=\\"dropdown-menu\\"><span data-v-539164cb=\\"\\" class=\\"icon\\"><svg data-v-539164cb=\\"\\" viewBox=\\"0 0 24 24\\" width=\\"1.2em\\" height=\\"1.2em\\"><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 data-v-539164cb=\\"\\" class=\\"dropdown-menu\\" id=\\"dropdown-menu\\" role=\\"menu\\">
+          <div data-v-539164cb=\\"\\" class=\\"dropdown-content\\"><a data-v-2e92daca=\\"\\" class=\\"dropdown-item\\" href=\\"#1\\">
+              <div data-v-2e92daca=\\"\\" class=\\"level is-justify-content-start\\">
+                <div data-v-2e92daca=\\"\\" class=\\"level-left\\">
+                  <div data-v-2e92daca=\\"\\" class=\\"level-item\\"><svg data-v-2e92daca=\\"\\" viewBox=\\"0 0 512 512\\" width=\\"1.2em\\" height=\\"1.2em\\" class=\\"mr-4\\">
+                      <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 data-v-2e92daca=\\"\\" class=\\"level-right\\">
+                  <div data-v-2e92daca=\\"\\" class=\\"level-item\\">Jump to Context</div>
+                </div>
+              </div>
+            </a></div>
+        </div>
+      </div>
+    </div>
+    <div data-v-a49e52d4=\\"\\" data-v-2e92daca=\\"\\" class=\\"columns is-1 is-variable is-mobile\\" visible-keys=\\"\\">
+      <!--v-if-->
+      <div data-v-a49e52d4=\\"\\" class=\\"column is-narrow\\">
+        <div data-v-de513450=\\"\\" data-v-a49e52d4=\\"\\" class=\\"date\\"><time datetime=\\"2019-06-12T10:55:42.459Z\\" class=\\"is-hidden-mobile\\">06/12/2019</time> <time datetime=\\"2019-06-12T10:55:42.459Z\\">10:55:42 AM</time></div>
+      </div>
+      <div data-v-a49e52d4=\\"\\" class=\\"column is-narrow is-flex\\">
+        <div data-v-e625cddd=\\"\\" data-v-a49e52d4=\\"\\" class=\\"\\"></div>
+      </div>
+      <div data-v-a49e52d4=\\"\\" class=\\"text column\\">&lt;test&gt;foo bar&lt;/test&gt;</div>
+    </div>
+  </li>
+</ul>"
+`;
+
+exports[`<LogEventSource /> > render html correctly > should render dates with 24 hour style 1`] = `
+"<ul data-v-2e92daca=\\"\\" class=\\"events medium\\">
+  <li data-v-2e92daca=\\"\\" data-key=\\"1\\" class=\\"\\">
+    <div data-v-2e92daca=\\"\\" class=\\"line-options\\" style=\\"display: none;\\">
+      <div data-v-539164cb=\\"\\" data-v-2e92daca=\\"\\" class=\\"dropdown is-hoverable is-last is-top minimal\\">
+        <div data-v-539164cb=\\"\\" class=\\"dropdown-trigger\\"><button data-v-539164cb=\\"\\" class=\\"button\\" aria-haspopup=\\"true\\" aria-controls=\\"dropdown-menu\\"><span data-v-539164cb=\\"\\" class=\\"icon\\"><svg data-v-539164cb=\\"\\" viewBox=\\"0 0 24 24\\" width=\\"1.2em\\" height=\\"1.2em\\"><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 data-v-539164cb=\\"\\" class=\\"dropdown-menu\\" id=\\"dropdown-menu\\" role=\\"menu\\">
+          <div data-v-539164cb=\\"\\" class=\\"dropdown-content\\"><a data-v-2e92daca=\\"\\" class=\\"dropdown-item\\" href=\\"#1\\">
+              <div data-v-2e92daca=\\"\\" class=\\"level is-justify-content-start\\">
+                <div data-v-2e92daca=\\"\\" class=\\"level-left\\">
+                  <div data-v-2e92daca=\\"\\" class=\\"level-item\\"><svg data-v-2e92daca=\\"\\" viewBox=\\"0 0 512 512\\" width=\\"1.2em\\" height=\\"1.2em\\" class=\\"mr-4\\">
+                      <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 data-v-2e92daca=\\"\\" class=\\"level-right\\">
+                  <div data-v-2e92daca=\\"\\" class=\\"level-item\\">Jump to Context</div>
+                </div>
+              </div>
+            </a></div>
+        </div>
+      </div>
+    </div>
+    <div data-v-a49e52d4=\\"\\" data-v-2e92daca=\\"\\" class=\\"columns is-1 is-variable is-mobile\\" visible-keys=\\"\\">
+      <!--v-if-->
+      <div data-v-a49e52d4=\\"\\" class=\\"column is-narrow\\">
+        <div data-v-de513450=\\"\\" data-v-a49e52d4=\\"\\" class=\\"date\\"><time datetime=\\"2019-06-12T10:55:42.459Z\\" class=\\"is-hidden-mobile\\">06/12/2019</time> <time datetime=\\"2019-06-12T10:55:42.459Z\\">10:55:42</time></div>
+      </div>
+      <div data-v-a49e52d4=\\"\\" class=\\"column is-narrow is-flex\\">
+        <div data-v-e625cddd=\\"\\" data-v-a49e52d4=\\"\\" class=\\"\\"></div>
+      </div>
+      <div data-v-a49e52d4=\\"\\" class=\\"text column\\">&lt;test&gt;foo bar&lt;/test&gt;</div>
+    </div>
+  </li>
+</ul>"
+`;
+
+exports[`<LogEventSource /> > render html correctly > should render messages 1`] = `
+"<ul data-v-2e92daca=\\"\\" class=\\"events medium\\">
+  <li data-v-2e92daca=\\"\\" data-key=\\"1\\" class=\\"\\">
+    <div data-v-2e92daca=\\"\\" class=\\"line-options\\" style=\\"display: none;\\">
+      <div data-v-539164cb=\\"\\" data-v-2e92daca=\\"\\" class=\\"dropdown is-hoverable is-last is-top minimal\\">
+        <div data-v-539164cb=\\"\\" class=\\"dropdown-trigger\\"><button data-v-539164cb=\\"\\" class=\\"button\\" aria-haspopup=\\"true\\" aria-controls=\\"dropdown-menu\\"><span data-v-539164cb=\\"\\" class=\\"icon\\"><svg data-v-539164cb=\\"\\" viewBox=\\"0 0 24 24\\" width=\\"1.2em\\" height=\\"1.2em\\"><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 data-v-539164cb=\\"\\" class=\\"dropdown-menu\\" id=\\"dropdown-menu\\" role=\\"menu\\">
+          <div data-v-539164cb=\\"\\" class=\\"dropdown-content\\"><a data-v-2e92daca=\\"\\" class=\\"dropdown-item\\" href=\\"#1\\">
+              <div data-v-2e92daca=\\"\\" class=\\"level is-justify-content-start\\">
+                <div data-v-2e92daca=\\"\\" class=\\"level-left\\">
+                  <div data-v-2e92daca=\\"\\" class=\\"level-item\\"><svg data-v-2e92daca=\\"\\" viewBox=\\"0 0 512 512\\" width=\\"1.2em\\" height=\\"1.2em\\" class=\\"mr-4\\">
+                      <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 data-v-2e92daca=\\"\\" class=\\"level-right\\">
+                  <div data-v-2e92daca=\\"\\" class=\\"level-item\\">Jump to Context</div>
+                </div>
+              </div>
+            </a></div>
+        </div>
+      </div>
+    </div>
+    <div data-v-a49e52d4=\\"\\" data-v-2e92daca=\\"\\" class=\\"columns is-1 is-variable is-mobile\\" visible-keys=\\"\\">
+      <!--v-if-->
+      <div data-v-a49e52d4=\\"\\" class=\\"column is-narrow\\">
+        <div data-v-de513450=\\"\\" data-v-a49e52d4=\\"\\" class=\\"date\\"><time datetime=\\"2019-06-12T10:55:42.459Z\\" class=\\"is-hidden-mobile\\">06/12/2019</time> <time datetime=\\"2019-06-12T10:55:42.459Z\\">10:55:42 AM</time></div>
+      </div>
+      <div data-v-a49e52d4=\\"\\" class=\\"column is-narrow is-flex\\">
+        <div data-v-e625cddd=\\"\\" data-v-a49e52d4=\\"\\" class=\\"\\"></div>
+      </div>
+      <div data-v-a49e52d4=\\"\\" class=\\"text column\\">This is a message.</div>
+    </div>
+  </li>
+</ul>"
+`;
+
+exports[`<LogEventSource /> > render html correctly > should render messages with color 1`] = `
+"<ul data-v-2e92daca=\\"\\" class=\\"events medium\\">
+  <li data-v-2e92daca=\\"\\" data-key=\\"1\\" class=\\"\\">
+    <div data-v-2e92daca=\\"\\" class=\\"line-options\\" style=\\"display: none;\\">
+      <div data-v-539164cb=\\"\\" data-v-2e92daca=\\"\\" class=\\"dropdown is-hoverable is-last is-top minimal\\">
+        <div data-v-539164cb=\\"\\" class=\\"dropdown-trigger\\"><button data-v-539164cb=\\"\\" class=\\"button\\" aria-haspopup=\\"true\\" aria-controls=\\"dropdown-menu\\"><span data-v-539164cb=\\"\\" class=\\"icon\\"><svg data-v-539164cb=\\"\\" viewBox=\\"0 0 24 24\\" width=\\"1.2em\\" height=\\"1.2em\\"><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 data-v-539164cb=\\"\\" class=\\"dropdown-menu\\" id=\\"dropdown-menu\\" role=\\"menu\\">
+          <div data-v-539164cb=\\"\\" class=\\"dropdown-content\\"><a data-v-2e92daca=\\"\\" class=\\"dropdown-item\\" href=\\"#1\\">
+              <div data-v-2e92daca=\\"\\" class=\\"level is-justify-content-start\\">
+                <div data-v-2e92daca=\\"\\" class=\\"level-left\\">
+                  <div data-v-2e92daca=\\"\\" class=\\"level-item\\"><svg data-v-2e92daca=\\"\\" viewBox=\\"0 0 512 512\\" width=\\"1.2em\\" height=\\"1.2em\\" class=\\"mr-4\\">
+                      <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 data-v-2e92daca=\\"\\" class=\\"level-right\\">
+                  <div data-v-2e92daca=\\"\\" class=\\"level-item\\">Jump to Context</div>
+                </div>
+              </div>
+            </a></div>
+        </div>
+      </div>
+    </div>
+    <div data-v-a49e52d4=\\"\\" data-v-2e92daca=\\"\\" class=\\"columns is-1 is-variable is-mobile\\" visible-keys=\\"\\">
+      <!--v-if-->
+      <div data-v-a49e52d4=\\"\\" class=\\"column is-narrow\\">
+        <div data-v-de513450=\\"\\" data-v-a49e52d4=\\"\\" class=\\"date\\"><time datetime=\\"2019-06-12T10:55:42.459Z\\" class=\\"is-hidden-mobile\\">06/12/2019</time> <time datetime=\\"2019-06-12T10:55:42.459Z\\">10:55:42 AM</time></div>
+      </div>
+      <div data-v-a49e52d4=\\"\\" class=\\"column is-narrow is-flex\\">
+        <div data-v-e625cddd=\\"\\" data-v-a49e52d4=\\"\\" class=\\"\\"></div>
+      </div>
+      <div data-v-a49e52d4=\\"\\" class=\\"text column\\"><span style=\\"color:#000\\">black<span style=\\"color:#AAA\\">white</span></span></div>
+    </div>
+  </li>
+</ul>"
+`;
+
+exports[`<LogEventSource /> > render html correctly > should render messages with filter 1`] = `
+"<ul data-v-2e92daca=\\"\\" class=\\"events medium\\">
+  <li data-v-2e92daca=\\"\\" data-key=\\"2\\" class=\\"\\">
+    <div data-v-2e92daca=\\"\\" class=\\"line-options\\">
+      <div data-v-539164cb=\\"\\" data-v-2e92daca=\\"\\" class=\\"dropdown is-hoverable is-last is-top minimal\\">
+        <div data-v-539164cb=\\"\\" class=\\"dropdown-trigger\\"><button data-v-539164cb=\\"\\" class=\\"button\\" aria-haspopup=\\"true\\" aria-controls=\\"dropdown-menu\\"><span data-v-539164cb=\\"\\" class=\\"icon\\"><svg data-v-539164cb=\\"\\" viewBox=\\"0 0 24 24\\" width=\\"1.2em\\" height=\\"1.2em\\"><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 data-v-539164cb=\\"\\" class=\\"dropdown-menu\\" id=\\"dropdown-menu\\" role=\\"menu\\">
+          <div data-v-539164cb=\\"\\" class=\\"dropdown-content\\"><a data-v-2e92daca=\\"\\" class=\\"dropdown-item\\" href=\\"#2\\">
+              <div data-v-2e92daca=\\"\\" class=\\"level is-justify-content-start\\">
+                <div data-v-2e92daca=\\"\\" class=\\"level-left\\">
+                  <div data-v-2e92daca=\\"\\" class=\\"level-item\\"><svg data-v-2e92daca=\\"\\" viewBox=\\"0 0 512 512\\" width=\\"1.2em\\" height=\\"1.2em\\" class=\\"mr-4\\">
+                      <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 data-v-2e92daca=\\"\\" class=\\"level-right\\">
+                  <div data-v-2e92daca=\\"\\" class=\\"level-item\\">Jump to Context</div>
+                </div>
+              </div>
+            </a></div>
+        </div>
+      </div>
+    </div>
+    <div data-v-a49e52d4=\\"\\" data-v-2e92daca=\\"\\" class=\\"columns is-1 is-variable is-mobile\\" visible-keys=\\"\\">
+      <!--v-if-->
+      <div data-v-a49e52d4=\\"\\" class=\\"column is-narrow\\">
+        <div data-v-de513450=\\"\\" data-v-a49e52d4=\\"\\" class=\\"date\\"><time datetime=\\"2019-06-12T10:55:42.459Z\\" class=\\"is-hidden-mobile\\">06/12/2019</time> <time datetime=\\"2019-06-12T10:55:42.459Z\\">10:55:42 AM</time></div>
+      </div>
+      <div data-v-a49e52d4=\\"\\" class=\\"column is-narrow is-flex\\">
+        <div data-v-e625cddd=\\"\\" data-v-a49e52d4=\\"\\" class=\\"\\"></div>
+      </div>
+      <div data-v-a49e52d4=\\"\\" class=\\"text column\\"><mark>test</mark> bar</div>
+    </div>
+  </li>
+</ul>"
+`;
+
+exports[`<LogEventSource /> > render html correctly > should render messages with html entities 1`] = `
+"<ul data-v-2e92daca=\\"\\" class=\\"events medium\\">
+  <li data-v-2e92daca=\\"\\" data-key=\\"1\\" class=\\"\\">
+    <div data-v-2e92daca=\\"\\" class=\\"line-options\\" style=\\"display: none;\\">
+      <div data-v-539164cb=\\"\\" data-v-2e92daca=\\"\\" class=\\"dropdown is-hoverable is-last is-top minimal\\">
+        <div data-v-539164cb=\\"\\" class=\\"dropdown-trigger\\"><button data-v-539164cb=\\"\\" class=\\"button\\" aria-haspopup=\\"true\\" aria-controls=\\"dropdown-menu\\"><span data-v-539164cb=\\"\\" class=\\"icon\\"><svg data-v-539164cb=\\"\\" viewBox=\\"0 0 24 24\\" width=\\"1.2em\\" height=\\"1.2em\\"><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 data-v-539164cb=\\"\\" class=\\"dropdown-menu\\" id=\\"dropdown-menu\\" role=\\"menu\\">
+          <div data-v-539164cb=\\"\\" class=\\"dropdown-content\\"><a data-v-2e92daca=\\"\\" class=\\"dropdown-item\\" href=\\"#1\\">
+              <div data-v-2e92daca=\\"\\" class=\\"level is-justify-content-start\\">
+                <div data-v-2e92daca=\\"\\" class=\\"level-left\\">
+                  <div data-v-2e92daca=\\"\\" class=\\"level-item\\"><svg data-v-2e92daca=\\"\\" viewBox=\\"0 0 512 512\\" width=\\"1.2em\\" height=\\"1.2em\\" class=\\"mr-4\\">
+                      <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 data-v-2e92daca=\\"\\" class=\\"level-right\\">
+                  <div data-v-2e92daca=\\"\\" class=\\"level-item\\">Jump to Context</div>
+                </div>
+              </div>
+            </a></div>
+        </div>
+      </div>
+    </div>
+    <div data-v-a49e52d4=\\"\\" data-v-2e92daca=\\"\\" class=\\"columns is-1 is-variable is-mobile\\" visible-keys=\\"\\">
+      <!--v-if-->
+      <div data-v-a49e52d4=\\"\\" class=\\"column is-narrow\\">
+        <div data-v-de513450=\\"\\" data-v-a49e52d4=\\"\\" class=\\"date\\"><time datetime=\\"2019-06-12T10:55:42.459Z\\" class=\\"is-hidden-mobile\\">06/12/2019</time> <time datetime=\\"2019-06-12T10:55:42.459Z\\">10:55:42 AM</time></div>
+      </div>
+      <div data-v-a49e52d4=\\"\\" class=\\"column is-narrow is-flex\\">
+        <div data-v-e625cddd=\\"\\" data-v-a49e52d4=\\"\\" class=\\"\\"></div>
+      </div>
+      <div data-v-a49e52d4=\\"\\" class=\\"text column\\">&lt;test&gt;foo bar&lt;/test&gt;</div>
+    </div>
+  </li>
+</ul>"
+`;
+
+exports[`<LogEventSource /> > renders correctly 1`] = `
+"<div data-v-1cd63c6e=\\"\\" class=\\"infinte-loader\\">
+  <div data-v-1cd63c6e=\\"\\" class=\\"spinner\\" style=\\"display: none;\\">
+    <div data-v-1cd63c6e=\\"\\" class=\\"bounce1\\"></div>
+    <div data-v-1cd63c6e=\\"\\" class=\\"bounce2\\"></div>
+    <div data-v-1cd63c6e=\\"\\" class=\\"bounce3\\"></div>
+  </div>
+</div>
+
+<ul data-v-2e92daca=\\"\\" class=\\"events medium\\"></ul>"
+`;
+
+exports[`<LogEventSource /> > should parse messages 1`] = `
+SimpleLogEntry {
+  "_message": "This is a message.",
+  "date": 2019-06-12T10:55:42.459Z,
+  "id": 1,
+  "level": undefined,
+  "position": undefined,
+  "std": "stderr",
+}
+`;

assets/components/LogViewerWithSource.vue

@@ -1,26 +0,0 @@
-<template>
-  <log-event-source ref="source" :id="id" #default="{ messages }" @loading-more="emit('loading-more', $event)">
-    <log-viewer :messages="messages"></log-viewer>
-  </log-event-source>
-</template>
-
-<script lang="ts" setup>
-import LogViewer from "./LogViewer.vue";
-import { ref } from "vue";
-defineProps({
-  id: {
-    type: String,
-    required: true,
-  },
-});
-
-const emit = defineEmits(["loading-more"]);
-
-const source = ref<InstanceType<typeof LogViewer>>();
-function clear() {
-  source.value?.clear();
-}
-defineExpose({
-  clear,
-});
-</script>

assets/components/MobileMenu.vue

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

assets/components/PastTime.vue

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

assets/components/Popup.vue

@@ -0,0 +1,51 @@
+<template>
+  <div @mouseenter="onMouseEnter" @mouseleave="onMouseLeave" ref="trigger"><slot></slot></div>
+  <Teleport to="body">
+    <Transition name="fade">
+      <div v-show="show && (delayedShow || glopbalShow)" class="content" ref="content">
+        <slot name="content"></slot>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<script lang="ts" setup>
+import { globalShowPopup } from "@/composables/popup";
+
+let glopbalShow = globalShowPopup();
+let show = ref(glopbalShow.value);
+let delayedShow = refDebounced(show, 1000);
+
+let content: HTMLElement | null = $ref(null);
+let trigger: HTMLElement | null = $ref(null);
+
+function onMouseEnter(e: MouseEvent) {
+  show.value = true;
+  glopbalShow.value = true;
+  if (e.target && content && e.target instanceof Element) {
+    const { left, top, width } = e.target.getBoundingClientRect();
+    const x = left + width + 10;
+    const y = top;
+
+    content.style.left = `${x}px`;
+    content.style.top = `${y}px`;
+  }
+}
+
+function onMouseLeave() {
+  show.value = false;
+  glopbalShow.value = false;
+}
+</script>
+
+<style scoped>
+.content {
+  position: fixed;
+  z-index: 9999;
+  background: var(--scheme-main-ter);
+  border-radius: 0.5em;
+  padding: 1em;
+  box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.5);
+  border: 1px solid var(--border-color);
+}
+</style>

assets/components/RelativeTime.vue

@@ -1,44 +0,0 @@
-<template>
-  <time :datetime="date.toISOString()">{{ relativeTime(date, locale) }}</time>
-</template>
-
-<script lang="ts">
-const use24Hr =
-  new Intl.DateTimeFormat(undefined, {
-    hour: "numeric",
-  })
-    .formatToParts(new Date(2020, 0, 1, 13))
-    .find((part) => part.type === "hour")?.value.length === 2;
-
-const auto = use24Hr ? enGB : enUS;
-const styles = { auto, 12: enUS, 24: enGB };
-</script>
-
-<script lang="ts" setup>
-import { formatRelative } from "date-fns";
-import { hourStyle } from "@/composables/settings";
-import enGB from "date-fns/locale/en-GB";
-import enUS from "date-fns/locale/en-US";
-import { computed, PropType } from "vue";
-defineProps({
-  date: {
-    required: true,
-    type: Object as PropType<Date>,
-  },
-});
-
-const locale = computed(() => {
-  const locale = styles[hourStyle.value];
-  const oldFormatter = locale.formatRelative as (d: Date | number) => string;
-  return {
-    ...locale,
-    formatRelative(date: Date | number) {
-      return oldFormatter(date) + "p";
-    },
-  };
-});
-
-function relativeTime(date: Date, locale: Locale) {
-  return formatRelative(date, new Date(), { locale });
-}
-</script>

assets/components/ScrollProgress.vue

@@ -18,21 +18,10 @@
 </template>
 
 <script lang="ts" setup>
-import { useContainerStore } from "@/stores/container";
-import { useScroll } from "@vueuse/core";
-import { storeToRefs } from "pinia";
-import { onMounted, ref, watch, watchPostEffect } from "vue";
-
-const props = defineProps({
-  indeterminate: {
-    default: false,
-    type: Boolean,
-  },
-  autoHide: {
-    default: true,
-    type: Boolean,
-  },
-});
+const { indeterminate = false, autoHide = false } = defineProps<{
+  indeterminate?: boolean;
+  autoHide?: boolean;
+}>();
 
 const scrollProgress = ref(0);
 const animation = ref({ cancel: () => {} });
@@ -40,7 +29,7 @@ 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 });
+const { y: scrollY } = useScroll(scrollElement as Ref<HTMLElement | Document>, { throttle: 100 });
 
 onMounted(() => {
   watch(
@@ -59,7 +48,7 @@ watchPostEffect(() => {
       : (scrollElement.value as HTMLElement);
   scrollProgress.value = scrollY.value / (parent.scrollHeight - parent.clientHeight);
   animation.value.cancel();
-  if (props.autoHide && root.value) {
+  if (autoHide && root.value) {
     animation.value = root.value.animate(
       { opacity: [1, 0] },
       {

assets/components/ScrollableView.vue

@@ -16,69 +16,60 @@
 
     <div class="is-scrollbar-notification">
       <transition name="fade">
-        <button class="button" :class="hasMore ? 'has-more' : ''" @click="scrollToBottom('instant')" v-show="paused">
-          <mdi-light-chevron-double-down />
+        <button
+          class="button has-boxshadow"
+          :class="hasMore ? 'has-more' : ''"
+          @click="scrollToBottom()"
+          v-show="paused"
+        >
+          <mdi:light-chevron-double-down />
         </button>
       </transition>
     </div>
   </section>
 </template>
 
-<script lang="ts">
-export default {
-  props: {
-    scrollable: {
-      type: Boolean,
-      default: true,
-    },
-  },
+<script lang="ts" setup>
+const { scrollable = false } = defineProps<{ scrollable?: boolean }>();
 
-  name: "ScrollableView",
-  data() {
-    return {
-      paused: false,
-      hasMore: false,
-      loading: false,
-      mutationObserver: null,
-      intersectionObserver: null,
-    };
-  },
-  mounted() {
-    const { scrollableContent } = this.$refs;
-    this.mutationObserver = new MutationObserver((e) => {
-      if (!this.paused) {
-        this.scrollToBottom("instant");
-      } else {
-        const record = e[e.length - 1];
-        if (
-          record.target.children[record.target.children.length - 1] == record.addedNodes[record.addedNodes.length - 1]
-        ) {
-          this.hasMore = true;
-        }
-      }
-    });
-    this.mutationObserver.observe(scrollableContent, { childList: true, subtree: true });
+let paused = $ref(false);
+let hasMore = $ref(false);
+let loading = $ref(false);
+const scrollObserver = ref<HTMLElement>();
+const scrollableContent = ref<HTMLElement>();
 
-    this.intersectionObserver = new IntersectionObserver(
-      (entries) => (this.paused = entries[0].intersectionRatio == 0),
-      { threshholds: [0, 1], rootMargin: "80px 0px" }
-    );
-    this.intersectionObserver.observe(this.$refs.scrollObserver);
-  },
-  beforeUnmount() {
-    this.mutationObserver.disconnect();
-    this.intersectionObserver.disconnect();
-  },
-  methods: {
-    scrollToBottom(behavior = "instant") {
-      this.$refs.scrollObserver.scrollIntoView({ behavior });
-      this.hasMore = false;
-    },
-    setLoading(loading) {
-      this.loading = loading;
-    },
-  },
-};
+provide("scrollingPaused", $$(paused));
+
+const mutationObserver = new MutationObserver((e) => {
+  if (!paused) {
+    scrollToBottom();
+  } else {
+    const record = e[e.length - 1];
+    const children = (record.target as HTMLElement).children;
+    if (children[children.length - 1] == record.addedNodes[record.addedNodes.length - 1]) {
+      hasMore = true;
+    }
+  }
+});
+
+const intersectionObserver = new IntersectionObserver((entries) => (paused = entries[0].intersectionRatio == 0), {
+  threshold: [0, 1],
+  rootMargin: "80px 0px",
+});
+
+onMounted(() => {
+  mutationObserver.observe(scrollableContent.value!, { childList: true, subtree: true });
+  intersectionObserver.observe(scrollObserver.value!);
+});
+
+function scrollToBottom(behavior: "auto" | "smooth" = "auto") {
+  scrollObserver.value?.scrollIntoView({ behavior });
+  hasMore = false;
+}
+
+function setLoading(value: boolean) {
+  loading = value;
+}
 </script>
 <style scoped lang="scss">
 section {
@@ -91,6 +82,10 @@ section {
     background: var(--body-background-color);
     border-bottom: 1px solid rgba(255, 255, 255, 0.05);
     z-index: 1;
+
+    @media screen and (max-width: 768px) {
+      top: 70px;
+    }
   }
 
   &.is-full-height-scrollable {
@@ -107,6 +102,7 @@ section {
   .is-scrollbar-progress {
     text-align: right;
     margin-right: 110px;
+
     .scroll-progress {
       position: fixed;
       top: 60px;
@@ -121,21 +117,22 @@ section {
   .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);
+      background-color: var(--primary-color);
+      transition: background-color 0.24s ease-out;
       border: none !important;
-      color: #222;
+      color: #eee;
 
       &.has-more {
-        background-color: var(--primary-color);
+        background-color: var(--secondary-color);
         animation-name: bounce;
         animation-duration: 1000ms;
         animation-fill-mode: both;
-        color: #fff;
+
+        color: #222;
       }
     }
   }
@@ -148,9 +145,11 @@ section {
     100% {
       transform: translateY(0);
     }
+
     40% {
       transform: translateY(-30px);
     }
+
     60% {
       transform: translateY(-15px);
     }
@@ -160,9 +159,18 @@ section {
   .fade-leave-active {
     transition: opacity 0.15s ease-in;
   }
+
   .fade-enter,
   .fade-leave-to {
     opacity: 0;
   }
 }
 </style>
+
+<style>
+@media screen and (max-width: 768px) {
+  .splitpanes__pane {
+    overflow: unset !important;
+  }
+}
+</style>

assets/components/Search.vue

@@ -11,7 +11,7 @@
           @keyup.esc="resetSearch()"
         />
         <span class="icon is-left">
-          <mdi-light-magnify />
+          <mdi:light-magnify />
         </span>
       </p>
     </div>
@@ -22,30 +22,18 @@
 </template>
 
 <script lang="ts" setup>
-import hotkeys from "hotkeys-js";
-
-import { search } from "@/composables/settings";
-import { useSearchFilter } from "@/composables/search";
-import { ref, nextTick, onMounted, onUnmounted } from "vue";
-
 const input = ref<HTMLInputElement>();
 const { searchFilter, showSearch, resetSearch } = useSearchFilter();
 
-onMounted(() => {
-  hotkeys("command+f, ctrl+f", (event, handler) => {
+onKeyStroke("f", (e) => {
+  if (e.ctrlKey || e.metaKey) {
     showSearch.value = true;
     nextTick(() => input.value?.focus() || input.value?.select());
-    event.preventDefault();
-  });
-  hotkeys("esc", () => resetSearch());
+    e.preventDefault();
+  }
 });
 
-onUnmounted(() => {
-  searchFilter.value = "";
-  showSearch.value = false;
-  hotkeys.unbind("command+f, ctrl+f");
-  hotkeys.unbind("esc");
-});
+onUnmounted(() => resetSearch());
 </script>
 
 <style lang="scss" scoped>
@@ -64,6 +52,7 @@ onUnmounted(() => {
     margin-left: 1em;
     background-color: var(--scheme-main-ter);
     opacity: 0.6;
+
     &:after,
     &:before {
       background-color: var(--text-color);
@@ -80,6 +69,7 @@ onUnmounted(() => {
 
   .input {
     color: var(--body-color);
+
     &::placeholder {
       color: var(--border-color);
     }

assets/components/SideMenu.vue

@@ -2,61 +2,123 @@
   <aside>
     <div class="columns is-marginless">
       <div class="column is-paddingless">
-        <router-link :to="{ name: 'default' }">
-          <svg class="logo">
-            <use href="#logo"></use>
-          </svg>
-        </router-link>
+        <h1>
+          <router-link :to="{ name: 'index' }">
+            <svg class="logo">
+              <use href="#logo"></use>
+            </svg>
+          </router-link>
+
+          <small class="subtitle is-6 is-block mb-4" v-if="hostname">
+            {{ hostname }}
+          </small>
+        </h1>
+        <div v-if="config.hosts.length > 1" class="mb-3">
+          <o-dropdown v-model="sessionHost" aria-role="list">
+            <template #trigger>
+              <o-button variant="primary" type="button" size="small">
+                <span>{{ sessionHost }}</span>
+                <span class="icon">
+                  <carbon:caret-down />
+                </span>
+              </o-button>
+            </template>
+
+            <o-dropdown-item :value="value" aria-role="listitem" v-for="value in config.hosts" :key="value">
+              <span>{{ value }}</span>
+            </o-dropdown-item>
+          </o-dropdown>
+        </div>
       </div>
-      <div class="column is-narrow has-text-right px-1">
-        <button class="button is-rounded" @click="$emit('search')" title="Search containers (⌘ + k, ⌃k)">
+    </div>
+    <div class="columns is-marginless">
+      <div class="column is-narrow py-0 pl-0 pr-1">
+        <button class="button is-rounded is-small" @click="$emit('search')" :title="$t('tooltip.search')">
           <span class="icon">
-            <mdi-light-magnify />
+            <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">
+      <div class="column is-narrow py-0" :class="secured ? 'pl-0 pr-1' : 'px-0'">
+        <router-link
+          :to="{ name: 'settings' }"
+          active-class="is-active"
+          class="button is-rounded is-small"
+          :aria-label="$t('title.settings')"
+        >
           <span class="icon">
-            <mdi-light-cog />
+            <mdi:light-cog />
           </span>
         </router-link>
       </div>
+      <div class="column is-narrow py-0 px-0" v-if="secured">
+        <a class="button is-rounded is-small" :href="`${base}/logout`" :title="$t('button.logout')">
+          <span class="icon">
+            <mdi:light-logout />
+          </span>
+        </a>
+      </div>
     </div>
-    <p class="menu-label is-hidden-mobile">Containers</p>
-    <ul class="menu-list is-hidden-mobile">
-      <li v-for="item in visibleContainers" :key="item.id" :class="item.state">
-        <router-link :to="{ name: 'container', params: { id: item.id } }" active-class="is-active" :title="item.name">
-          <div class="container is-flex is-align-items-center">
-            <div class="is-flex-grow-1 is-ellipsis">
-              {{ item.name }}
+    <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 sortedContainers" :key="item.id" :class="item.state">
+        <popup>
+          <router-link
+            :to="{ name: 'container-id', params: { id: item.id } }"
+            active-class="is-active"
+            :title="item.name"
+          >
+            <div class="container is-flex is-align-items-center">
+              <div class="is-flex-grow-1 is-ellipsis">
+                <span>{{ item.name }}</span
+                ><span class="has-text-weight-light has-light-opacity" v-if="item.isSwarm">{{ item.swarmId }}</span>
+              </div>
+              <div class="is-flex-shrink-1 is-flex icons">
+                <div
+                  class="icon is-small pin"
+                  @click.stop.prevent="store.appendActiveContainer(item)"
+                  v-show="!activeContainersById[item.id]"
+                  :title="$t('tooltip.pin-column')"
+                >
+                  <cil:columns />
+                </div>
+
+                <container-health :health="item.health"></container-health>
+              </div>
             </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="Pin as column"
-              >
-                <cil-columns />
-              </span>
-            </div>
-          </div>
-        </router-link>
+          </router-link>
+          <template #content>
+            <container-popup :container="item"></container-popup>
+          </template>
+        </popup>
       </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 lang="ts" setup>
-import { computed } from "vue";
-import { storeToRefs } from "pinia";
-import { useContainerStore } from "@/stores/container";
-import type { Container } from "@/types/Container";
+import { Container } from "@/models/Container";
+import { sessionHost } from "@/composables/storage";
 
+const { base, secured, hostname } = config;
 const store = useContainerStore();
 
-const { activeContainers, visibleContainers } = storeToRefs(store);
+const { activeContainers, visibleContainers, ready } = storeToRefs(store);
+
+const sortedContainers = computed(() =>
+  visibleContainers.value.sort((a, b) => {
+    if (a.state === "running" && b.state !== "running") {
+      return -1;
+    } else if (a.state !== "running" && b.state === "running") {
+      return 1;
+    } else {
+      return a.name.localeCompare(b.name);
+    }
+  })
+);
 
 const activeContainersById = computed(() =>
   activeContainers.value.reduce((acc, item) => {
@@ -78,30 +140,40 @@ aside {
   }
 }
 
-li.exited a {
-  color: #777;
+.has-light-opacity {
+  opacity: 0.5;
 }
-
 .logo {
   width: 122px;
   height: 54px;
   fill: var(--logo-color);
 }
 
-.menu-list li {
-  .column-icon {
-    visibility: hidden;
+.loading {
+  opacity: 0.5;
+}
 
-    & > span {
-      vertical-align: middle;
-    }
-  }
+li.exited a {
+  color: #777;
+}
+
+.icons {
+  column-gap: 0.35em;
+  align-items: baseline;
+}
+a {
+  .pin {
+    display: none;
 
-  &:hover .column-icon {
-    visibility: visible;
     &:hover {
       color: var(--secondary-color);
     }
   }
+
+  &:hover {
+    .pin {
+      display: block;
+    }
+  }
 }
 </style>

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

@@ -1,201 +0,0 @@
-// Vitest Snapshot v1
-
-exports[`<LogEventSource /> > render html correctly > should render dates with 12 hour style 1`] = `
-"<ul class=\\"events medium\\" data-v-28f125ea=\\"\\">
-  <li data-key=\\"2019-06-12T23:55:42.459034602Z\\" class=\\"\\" data-v-28f125ea=\\"\\">
-    <div class=\\"line-options\\" data-v-28f125ea=\\"\\" style=\\"display: none;\\">
-      <div class=\\"dropdown is-hoverable is-last is-top minimal\\" data-v-3af6a38b=\\"\\" data-v-28f125ea=\\"\\">
-        <div class=\\"dropdown-trigger\\" data-v-3af6a38b=\\"\\"><button class=\\"button\\" aria-haspopup=\\"true\\" aria-controls=\\"dropdown-menu\\" data-v-3af6a38b=\\"\\"><span class=\\"icon\\" data-v-3af6a38b=\\"\\"><svg preserveAspectRatio=\\"xMidYMid meet\\" viewBox=\\"0 0 24 24\\" width=\\"1.2em\\" height=\\"1.2em\\" data-v-3af6a38b=\\"\\"><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-3af6a38b=\\"\\">
-          <div class=\\"dropdown-content\\" data-v-3af6a38b=\\"\\"><a class=\\"dropdown-item\\" href=\\"#2019-06-12T23:55:42.459034602Z\\" data-v-28f125ea=\\"\\">
-              <div class=\\"level is-justify-content-start\\" data-v-28f125ea=\\"\\">
-                <div class=\\"level-left\\" data-v-28f125ea=\\"\\">
-                  <div class=\\"level-item\\" data-v-28f125ea=\\"\\"><svg preserveAspectRatio=\\"xMidYMid meet\\" viewBox=\\"0 0 512 512\\" width=\\"1.2em\\" height=\\"1.2em\\" class=\\"mr-4\\" data-v-28f125ea=\\"\\">
-                      <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-28f125ea=\\"\\">
-                  <div class=\\"level-item\\" data-v-28f125ea=\\"\\">Jump to Context</div>
-                </div>
-              </div>
-            </a></div>
-        </div>
-      </div>
-    </div>
-    <div class=\\"line\\" data-v-28f125ea=\\"\\"><span class=\\"date\\" data-v-28f125ea=\\"\\"><time datetime=\\"2019-06-12T23:55:42.459Z\\" data-v-28f125ea=\\"\\">today at 11:55:42 PM</time></span><span class=\\"text\\" data-v-28f125ea=\\"\\">&lt;test&gt;foo bar&lt;/test&gt;</span></div>
-  </li>
-</ul>"
-`;
-
-exports[`<LogEventSource /> > render html correctly > should render dates with 24 hour style 1`] = `
-"<ul class=\\"events medium\\" data-v-28f125ea=\\"\\">
-  <li data-key=\\"2019-06-12T23:55:42.459034602Z\\" class=\\"\\" data-v-28f125ea=\\"\\">
-    <div class=\\"line-options\\" data-v-28f125ea=\\"\\" style=\\"display: none;\\">
-      <div class=\\"dropdown is-hoverable is-last is-top minimal\\" data-v-3af6a38b=\\"\\" data-v-28f125ea=\\"\\">
-        <div class=\\"dropdown-trigger\\" data-v-3af6a38b=\\"\\"><button class=\\"button\\" aria-haspopup=\\"true\\" aria-controls=\\"dropdown-menu\\" data-v-3af6a38b=\\"\\"><span class=\\"icon\\" data-v-3af6a38b=\\"\\"><svg preserveAspectRatio=\\"xMidYMid meet\\" viewBox=\\"0 0 24 24\\" width=\\"1.2em\\" height=\\"1.2em\\" data-v-3af6a38b=\\"\\"><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-3af6a38b=\\"\\">
-          <div class=\\"dropdown-content\\" data-v-3af6a38b=\\"\\"><a class=\\"dropdown-item\\" href=\\"#2019-06-12T23:55:42.459034602Z\\" data-v-28f125ea=\\"\\">
-              <div class=\\"level is-justify-content-start\\" data-v-28f125ea=\\"\\">
-                <div class=\\"level-left\\" data-v-28f125ea=\\"\\">
-                  <div class=\\"level-item\\" data-v-28f125ea=\\"\\"><svg preserveAspectRatio=\\"xMidYMid meet\\" viewBox=\\"0 0 512 512\\" width=\\"1.2em\\" height=\\"1.2em\\" class=\\"mr-4\\" data-v-28f125ea=\\"\\">
-                      <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-28f125ea=\\"\\">
-                  <div class=\\"level-item\\" data-v-28f125ea=\\"\\">Jump to Context</div>
-                </div>
-              </div>
-            </a></div>
-        </div>
-      </div>
-    </div>
-    <div class=\\"line\\" data-v-28f125ea=\\"\\"><span class=\\"date\\" data-v-28f125ea=\\"\\"><time datetime=\\"2019-06-12T23:55:42.459Z\\" data-v-28f125ea=\\"\\">today at 23:55:42</time></span><span class=\\"text\\" data-v-28f125ea=\\"\\">&lt;test&gt;foo bar&lt;/test&gt;</span></div>
-  </li>
-</ul>"
-`;
-
-exports[`<LogEventSource /> > render html correctly > should render messages 1`] = `
-"<ul class=\\"events medium\\" data-v-28f125ea=\\"\\">
-  <li data-key=\\"2019-06-12T10:55:42.459034602Z\\" class=\\"\\" data-v-28f125ea=\\"\\">
-    <div class=\\"line-options\\" data-v-28f125ea=\\"\\" style=\\"display: none;\\">
-      <div class=\\"dropdown is-hoverable is-last is-top minimal\\" data-v-3af6a38b=\\"\\" data-v-28f125ea=\\"\\">
-        <div class=\\"dropdown-trigger\\" data-v-3af6a38b=\\"\\"><button class=\\"button\\" aria-haspopup=\\"true\\" aria-controls=\\"dropdown-menu\\" data-v-3af6a38b=\\"\\"><span class=\\"icon\\" data-v-3af6a38b=\\"\\"><svg preserveAspectRatio=\\"xMidYMid meet\\" viewBox=\\"0 0 24 24\\" width=\\"1.2em\\" height=\\"1.2em\\" data-v-3af6a38b=\\"\\"><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-3af6a38b=\\"\\">
-          <div class=\\"dropdown-content\\" data-v-3af6a38b=\\"\\"><a class=\\"dropdown-item\\" href=\\"#2019-06-12T10:55:42.459034602Z\\" data-v-28f125ea=\\"\\">
-              <div class=\\"level is-justify-content-start\\" data-v-28f125ea=\\"\\">
-                <div class=\\"level-left\\" data-v-28f125ea=\\"\\">
-                  <div class=\\"level-item\\" data-v-28f125ea=\\"\\"><svg preserveAspectRatio=\\"xMidYMid meet\\" viewBox=\\"0 0 512 512\\" width=\\"1.2em\\" height=\\"1.2em\\" class=\\"mr-4\\" data-v-28f125ea=\\"\\">
-                      <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-28f125ea=\\"\\">
-                  <div class=\\"level-item\\" data-v-28f125ea=\\"\\">Jump to Context</div>
-                </div>
-              </div>
-            </a></div>
-        </div>
-      </div>
-    </div>
-    <div class=\\"line\\" data-v-28f125ea=\\"\\"><span class=\\"date\\" data-v-28f125ea=\\"\\"><time datetime=\\"2019-06-12T10:55:42.459Z\\" data-v-28f125ea=\\"\\">today at 10:55:42 AM</time></span><span class=\\"text\\" data-v-28f125ea=\\"\\">\\"This is a message.\\"</span></div>
-  </li>
-</ul>"
-`;
-
-exports[`<LogEventSource /> > render html correctly > should render messages with color 1`] = `
-"<ul class=\\"events medium\\" data-v-28f125ea=\\"\\">
-  <li data-key=\\"2019-06-12T10:55:42.459034602Z\\" class=\\"\\" data-v-28f125ea=\\"\\">
-    <div class=\\"line-options\\" data-v-28f125ea=\\"\\" style=\\"display: none;\\">
-      <div class=\\"dropdown is-hoverable is-last is-top minimal\\" data-v-3af6a38b=\\"\\" data-v-28f125ea=\\"\\">
-        <div class=\\"dropdown-trigger\\" data-v-3af6a38b=\\"\\"><button class=\\"button\\" aria-haspopup=\\"true\\" aria-controls=\\"dropdown-menu\\" data-v-3af6a38b=\\"\\"><span class=\\"icon\\" data-v-3af6a38b=\\"\\"><svg preserveAspectRatio=\\"xMidYMid meet\\" viewBox=\\"0 0 24 24\\" width=\\"1.2em\\" height=\\"1.2em\\" data-v-3af6a38b=\\"\\"><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-3af6a38b=\\"\\">
-          <div class=\\"dropdown-content\\" data-v-3af6a38b=\\"\\"><a class=\\"dropdown-item\\" href=\\"#2019-06-12T10:55:42.459034602Z\\" data-v-28f125ea=\\"\\">
-              <div class=\\"level is-justify-content-start\\" data-v-28f125ea=\\"\\">
-                <div class=\\"level-left\\" data-v-28f125ea=\\"\\">
-                  <div class=\\"level-item\\" data-v-28f125ea=\\"\\"><svg preserveAspectRatio=\\"xMidYMid meet\\" viewBox=\\"0 0 512 512\\" width=\\"1.2em\\" height=\\"1.2em\\" class=\\"mr-4\\" data-v-28f125ea=\\"\\">
-                      <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-28f125ea=\\"\\">
-                  <div class=\\"level-item\\" data-v-28f125ea=\\"\\">Jump to Context</div>
-                </div>
-              </div>
-            </a></div>
-        </div>
-      </div>
-    </div>
-    <div class=\\"line\\" data-v-28f125ea=\\"\\"><span class=\\"date\\" data-v-28f125ea=\\"\\"><time datetime=\\"2019-06-12T10:55:42.459Z\\" data-v-28f125ea=\\"\\">today at 10:55:42 AM</time></span><span class=\\"text\\" data-v-28f125ea=\\"\\"><span style=\\"color:#000\\">black<span style=\\"color:#AAA\\">white</span></span></span></div>
-  </li>
-</ul>"
-`;
-
-exports[`<LogEventSource /> > render html correctly > should render messages with filter 1`] = `
-"<ul class=\\"events medium\\" data-v-28f125ea=\\"\\">
-  <li data-key=\\"2019-06-12T10:55:42.459034602Z\\" class=\\"\\" data-v-28f125ea=\\"\\">
-    <div class=\\"line-options\\" data-v-28f125ea=\\"\\" style=\\"display: none;\\">
-      <div class=\\"dropdown is-hoverable is-last is-top minimal\\" data-v-3af6a38b=\\"\\" data-v-28f125ea=\\"\\">
-        <div class=\\"dropdown-trigger\\" data-v-3af6a38b=\\"\\"><button class=\\"button\\" aria-haspopup=\\"true\\" aria-controls=\\"dropdown-menu\\" data-v-3af6a38b=\\"\\"><span class=\\"icon\\" data-v-3af6a38b=\\"\\"><svg preserveAspectRatio=\\"xMidYMid meet\\" viewBox=\\"0 0 24 24\\" width=\\"1.2em\\" height=\\"1.2em\\" data-v-3af6a38b=\\"\\"><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-3af6a38b=\\"\\">
-          <div class=\\"dropdown-content\\" data-v-3af6a38b=\\"\\"><a class=\\"dropdown-item\\" href=\\"#2019-06-12T10:55:42.459034602Z\\" data-v-28f125ea=\\"\\">
-              <div class=\\"level is-justify-content-start\\" data-v-28f125ea=\\"\\">
-                <div class=\\"level-left\\" data-v-28f125ea=\\"\\">
-                  <div class=\\"level-item\\" data-v-28f125ea=\\"\\"><svg preserveAspectRatio=\\"xMidYMid meet\\" viewBox=\\"0 0 512 512\\" width=\\"1.2em\\" height=\\"1.2em\\" class=\\"mr-4\\" data-v-28f125ea=\\"\\">
-                      <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-28f125ea=\\"\\">
-                  <div class=\\"level-item\\" data-v-28f125ea=\\"\\">Jump to Context</div>
-                </div>
-              </div>
-            </a></div>
-        </div>
-      </div>
-    </div>
-    <div class=\\"line\\" data-v-28f125ea=\\"\\"><span class=\\"date\\" data-v-28f125ea=\\"\\"><time datetime=\\"2019-06-12T10:55:42.459Z\\" data-v-28f125ea=\\"\\">today at 10:55:42 AM</time></span><span class=\\"text\\" data-v-28f125ea=\\"\\">This is a <mark>test</mark> &lt;hi&gt;&lt;/hi&gt;</span></div>
-  </li>
-</ul>"
-`;
-
-exports[`<LogEventSource /> > render html correctly > should render messages with html entities 1`] = `
-"<ul class=\\"events medium\\" data-v-28f125ea=\\"\\">
-  <li data-key=\\"2019-06-12T10:55:42.459034602Z\\" class=\\"\\" data-v-28f125ea=\\"\\">
-    <div class=\\"line-options\\" data-v-28f125ea=\\"\\" style=\\"display: none;\\">
-      <div class=\\"dropdown is-hoverable is-last is-top minimal\\" data-v-3af6a38b=\\"\\" data-v-28f125ea=\\"\\">
-        <div class=\\"dropdown-trigger\\" data-v-3af6a38b=\\"\\"><button class=\\"button\\" aria-haspopup=\\"true\\" aria-controls=\\"dropdown-menu\\" data-v-3af6a38b=\\"\\"><span class=\\"icon\\" data-v-3af6a38b=\\"\\"><svg preserveAspectRatio=\\"xMidYMid meet\\" viewBox=\\"0 0 24 24\\" width=\\"1.2em\\" height=\\"1.2em\\" data-v-3af6a38b=\\"\\"><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-3af6a38b=\\"\\">
-          <div class=\\"dropdown-content\\" data-v-3af6a38b=\\"\\"><a class=\\"dropdown-item\\" href=\\"#2019-06-12T10:55:42.459034602Z\\" data-v-28f125ea=\\"\\">
-              <div class=\\"level is-justify-content-start\\" data-v-28f125ea=\\"\\">
-                <div class=\\"level-left\\" data-v-28f125ea=\\"\\">
-                  <div class=\\"level-item\\" data-v-28f125ea=\\"\\"><svg preserveAspectRatio=\\"xMidYMid meet\\" viewBox=\\"0 0 512 512\\" width=\\"1.2em\\" height=\\"1.2em\\" class=\\"mr-4\\" data-v-28f125ea=\\"\\">
-                      <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-28f125ea=\\"\\">
-                  <div class=\\"level-item\\" data-v-28f125ea=\\"\\">Jump to Context</div>
-                </div>
-              </div>
-            </a></div>
-        </div>
-      </div>
-    </div>
-    <div class=\\"line\\" data-v-28f125ea=\\"\\"><span class=\\"date\\" data-v-28f125ea=\\"\\"><time datetime=\\"2019-06-12T10:55:42.459Z\\" data-v-28f125ea=\\"\\">today at 10:55:42 AM</time></span><span class=\\"text\\" data-v-28f125ea=\\"\\">&lt;test&gt;foo bar&lt;/test&gt;</span></div>
-  </li>
-</ul>"
-`;
-
-exports[`<LogEventSource /> > renders correctly 1`] = `
-"<div class=\\"infinte-loader\\" data-v-48dce4fc=\\"\\">
-  <div class=\\"spinner\\" data-v-48dce4fc=\\"\\" style=\\"display: none;\\">
-    <div class=\\"bounce1\\" data-v-48dce4fc=\\"\\"></div>
-    <div class=\\"bounce2\\" data-v-48dce4fc=\\"\\"></div>
-    <div class=\\"bounce3\\" data-v-48dce4fc=\\"\\"></div>
-  </div>
-</div>
-<ul class=\\"events medium\\" data-v-28f125ea=\\"\\"></ul>"
-`;
-
-exports[`<LogEventSource /> > should parse messages 1`] = `
-{
-  "date": 2019-06-12T10:55:42.459Z,
-  "message": "\\"This is a message.\\"",
-}
-`;
-
-exports[`<LogEventSource /> > should parse messages with loki's timestamp format 1`] = `
-{
-  "date": 2020-04-27T10:35:43.272Z,
-  "message": "xxxxx",
-}
-`;
-
-exports[`<LogEventSource /> > should pass messages to slot 1`] = `
-{
-  "date": 2019-06-12T10:55:42.459Z,
-  "message": "\\"This is a message.\\"",
-}
-`;

assets/components/common/DateTime.vue

@@ -0,0 +1,21 @@
+<template>
+  <div>
+    <time :datetime="date.toISOString()" class="is-hidden-mobile">{{ dateStr }}</time>
+    <time :datetime="date.toISOString()">{{ timeStr }}</time>
+  </div>
+</template>
+
+<script lang="ts" setup>
+const props = defineProps<{
+  date: Date;
+}>();
+
+const dateFormatter = new Intl.DateTimeFormat(undefined, { day: "2-digit", month: "2-digit", year: "numeric" });
+const use12Hour = $computed(() => ({ auto: undefined, "12": true, "24": false }[hourStyle.value]));
+const timeFormatter = $computed(
+  () => new Intl.DateTimeFormat(undefined, { hour: "numeric", minute: "2-digit", second: "2-digit", hour12: use12Hour })
+);
+
+const dateStr = $computed(() => dateFormatter.format(props.date));
+const timeStr = $computed(() => timeFormatter.format(props.date));
+</script>

assets/components/common/DistanceTime.vue

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

assets/components/common/MobileMenu.vue

@@ -0,0 +1,146 @@
+<template>
+  <aside>
+    <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 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>
+
+    <div class="menu-label level is-mobile is-hidden-mobile" :class="{ 'is-active': showNav }">
+      <div v-if="config.hosts.length > 1">
+        <o-dropdown v-model="sessionHost" aria-role="list">
+          <template #trigger>
+            <o-button variant="primary" type="button" size="small">
+              <span>{{ sessionHost }}</span>
+              <span class="icon">
+                <carbon:caret-down />
+              </span>
+            </o-button>
+          </template>
+
+          <o-dropdown-item :value="value" aria-role="listitem" v-for="value in config.hosts" :key="value">
+            <span>{{ value }}</span>
+          </o-dropdown-item>
+        </o-dropdown>
+      </div>
+
+      <div class="level-item has-text-centered">
+        <div>
+          <button class="button is-small is-rounded" @click="$emit('search')" :title="$t('tooltip.search')">
+            <span class="icon">
+              <mdi:light-magnify />
+            </span>
+          </button>
+        </div>
+      </div>
+      <div class="level-item has-text-centered">
+        <div>
+          <router-link :to="{ name: 'settings' }" active-class="is-active" class="button is-small is-rounded">
+            <span class="icon">
+              <mdi:light-cog />
+            </span>
+          </router-link>
+        </div>
+      </div>
+      <div class="level-item has-text-centered" v-if="secured">
+        <div>
+          <a class="button is-small is-rounded" :href="`${base}/logout`" :title="$t('button.logout')">
+            <span class="icon">
+              <mdi:light-logout />
+            </span>
+          </a>
+        </div>
+      </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-id', params: { id: item.id } }"
+          active-class="is-active"
+          :title="item.name"
+        >
+          <div class="is-ellipsis">
+            {{ item.name }}
+          </div>
+        </router-link>
+      </li>
+    </ul>
+  </aside>
+</template>
+
+<script lang="ts" setup>
+const { base, secured } = config;
+import { sessionHost } from "@/composables/storage";
+const store = useContainerStore();
+const route = useRoute();
+const { visibleContainers } = storeToRefs(store);
+
+let showNav = $ref(false);
+
+watch(route, () => {
+  showNav = false;
+});
+</script>
+<style scoped lang="scss">
+aside {
+  padding: 1em;
+  position: fixed;
+  left: 0;
+  right: 0;
+  background: var(--scheme-main-ter);
+  z-index: 10;
+  max-height: 100vh;
+  overflow: auto;
+
+  .level.is-hidden-mobile.is-active {
+    display: flex !important;
+  }
+
+  .menu-label {
+    margin-top: 1em;
+  }
+
+  .title {
+    text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2);
+  }
+
+  .burger {
+    color: var(--body-color);
+  }
+
+  .is-hidden-mobile.is-active {
+    display: block !important;
+  }
+
+  .navbar-burger {
+    height: 2.35rem;
+  }
+
+  .logo {
+    width: 82px;
+    height: 36px;
+    fill: var(--logo-color);
+  }
+
+  .column.push-right {
+    margin-left: auto;
+  }
+}
+</style>

assets/components/common/Tag.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="tag" :size="size">
+    <slot></slot>
+  </div>
+</template>
+
+<script lang="ts" setup>
+const { size = undefined } = defineProps<{ size?: "small" | undefined }>();
+</script>
+
+<style scoped lang="scss">
+.tag {
+  background-color: var(--scheme-main-ter);
+  border: 1px solid var(--border-color);
+  &[size="small"] {
+    font-size: 0.61rem;
+  }
+}
+</style>

assets/composables/eventsource.ts

@@ -0,0 +1,164 @@
+import { type ComputedRef, type Ref } from "vue";
+import { encodeXML } from "entities";
+import debounce from "lodash.debounce";
+import {
+  type LogEvent,
+  type JSONObject,
+  LogEntry,
+  asLogEntry,
+  DockerEventLogEntry,
+  SkippedLogsEntry,
+} from "@/models/LogEntry";
+import { Container } from "@/models/Container";
+
+function parseMessage(data: string): LogEntry<string | JSONObject> {
+  const e = JSON.parse(data, (key, value) => {
+    if (typeof value === "string") {
+      return encodeXML(value);
+    }
+    return value;
+  }) as LogEvent;
+  return asLogEntry(e);
+}
+
+type LogStreamConfig = {
+  stdout: boolean;
+  stderr: boolean;
+};
+
+export function useLogStream(container: ComputedRef<Container>, streamConfig: LogStreamConfig) {
+  let messages: LogEntry<string | JSONObject>[] = $ref([]);
+  let buffer: LogEntry<string | JSONObject>[] = $ref([]);
+  const scrollingPaused = $ref(inject("scrollingPaused") as Ref<boolean>);
+
+  function flushNow() {
+    if (messages.length > config.maxLogs) {
+      if (scrollingPaused) {
+        console.log("Skipping ", buffer.length, " log items");
+        if (messages.at(-1) instanceof SkippedLogsEntry) {
+          const lastEvent = messages.at(-1) as SkippedLogsEntry;
+          const lastItem = buffer.at(-1) as LogEntry<string | JSONObject>;
+          lastEvent.addSkippedEntries(buffer.length, lastItem);
+        } else {
+          const firstItem = buffer.at(0) as LogEntry<string | JSONObject>;
+          const lastItem = buffer.at(-1) as LogEntry<string | JSONObject>;
+          messages.push(new SkippedLogsEntry(new Date(), buffer.length, firstItem, lastItem));
+        }
+        buffer = [];
+      } else {
+        messages.push(...buffer);
+        buffer = [];
+        messages = messages.slice(-config.maxLogs);
+      }
+    } else {
+      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 = "";
+    }
+
+    const params = {
+      id: container.value.id,
+      lastEventId,
+      host: sessionHost.value,
+    } as { id: string; lastEventId: string; host: string; stdout?: string; stderr?: string };
+
+    if (streamConfig.stdout) {
+      params.stdout = "1";
+    }
+    if (streamConfig.stderr) {
+      params.stderr = "1";
+    }
+
+    es = new EventSource(`${config.base}/api/logs/stream?${new URLSearchParams(params).toString()}`);
+    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 params = {
+      id: container.value.id,
+      from: from.toISOString(),
+      to: to.toISOString(),
+      host: sessionHost.value,
+    } as { id: string; from: string; to: string; host: string; stdout?: string; stderr?: string };
+
+    if (streamConfig.stdout) {
+      params.stdout = "1";
+    }
+    if (streamConfig.stderr) {
+      params.stderr = "1";
+    }
+
+    const logs = await (await fetch(`${config.base}/api/logs?${new URLSearchParams(params).toString()}`)).text();
+    if (logs) {
+      const newMessages = logs
+        .trim()
+        .split("\n")
+        .map((line) => parseMessage(line));
+      messages.unshift(...newMessages);
+    }
+    afterLoading();
+  }
+
+  watch(
+    () => container.value.state,
+    (newValue, oldValue) => {
+      console.log("LogEventSource: container changed", newValue, oldValue);
+      if (newValue == "running" && newValue != oldValue) {
+        buffer.push(new DockerEventLogEntry("Container started", new Date(), "container-started"));
+        connect({ clear: false });
+      }
+    }
+  );
+
+  onUnmounted(() => {
+    if (es) {
+      es.close();
+    }
+  });
+
+  watch(
+    () => container.value.id,
+    () => connect(),
+    { immediate: true }
+  );
+
+  watch(streamConfig, () => connect());
+
+  return { ...$$({ messages }), loadOlderLogs };
+}

assets/composables/media.ts

@@ -1,3 +1 @@
-import { useMediaQuery } from "@vueuse/core";
-
 export const isMobile = useMediaQuery("(max-width: 770px)");

assets/composables/popup.ts

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

assets/composables/search.ts

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

assets/composables/settings.ts

@@ -1,7 +1,4 @@
-import { useStorage } from "@vueuse/core";
-import { computed } from "vue";
-
-export const DOZZLE_SETTINGS_KEY = "DOZZLE_SETTINGS";
+const DOZZLE_SETTINGS_KEY = "DOZZLE_SETTINGS";
 
 export const DEFAULT_SETTINGS: {
   search: boolean;
@@ -9,65 +6,94 @@ export const DEFAULT_SETTINGS: {
   menuWidth: number;
   smallerScrollbars: boolean;
   showTimestamp: boolean;
+  showStd: boolean;
   showAllContainers: boolean;
   lightTheme: "auto" | "dark" | "light";
   hourStyle: "auto" | "24" | "12";
   softWrap: boolean;
+  collapseNav: boolean;
 } = {
   search: true,
   size: "medium",
   menuWidth: 15,
   smallerScrollbars: false,
   showTimestamp: true,
+  showStd: false,
   showAllContainers: false,
   lightTheme: "auto",
   hourStyle: "auto",
   softWrap: true,
+  collapseNav: false,
 };
 
-export const settings = useStorage(DOZZLE_SETTINGS_KEY, DEFAULT_SETTINGS);
-settings.value = {...DEFAULT_SETTINGS, ...settings.value};
+const settings = useStorage(DOZZLE_SETTINGS_KEY, DEFAULT_SETTINGS);
+settings.value = { ...DEFAULT_SETTINGS, ...settings.value };
 
-export const search = computed({
+const search = computed({
   get: () => settings.value.search,
   set: (value) => (settings.value.search = value),
 });
 
-export const size = computed({
+const size = computed({
   get: () => settings.value.size,
   set: (value) => (settings.value.size = value),
 });
 
-export const menuWidth = computed({
+const menuWidth = computed({
   get: () => settings.value.menuWidth,
   set: (value) => (settings.value.menuWidth = value),
 });
-export const smallerScrollbars = computed({
+const smallerScrollbars = computed({
   get: () => settings.value.smallerScrollbars,
   set: (value) => (settings.value.smallerScrollbars = value),
 });
 
-export const showTimestamp = computed({
+const showTimestamp = computed({
   get: () => settings.value.showTimestamp,
   set: (value) => (settings.value.showTimestamp = value),
 });
 
-export const showAllContainers = computed({
+const showStd = computed({
+  get: () => settings.value.showStd,
+  set: (value) => (settings.value.showStd = value),
+});
+
+const showAllContainers = computed({
   get: () => settings.value.showAllContainers,
   set: (value) => (settings.value.showAllContainers = value),
 });
 
-export const lightTheme = computed({
+const lightTheme = computed({
   get: () => settings.value.lightTheme,
   set: (value) => (settings.value.lightTheme = value),
 });
 
-export const hourStyle = computed({
+const hourStyle = computed({
   get: () => settings.value.hourStyle,
   set: (value) => (settings.value.hourStyle = value),
 });
 
-export const softWrap = computed({
+const softWrap = computed({
   get: () => settings.value.softWrap,
   set: (value) => (settings.value.softWrap = value),
 });
+
+const collapseNav = computed({
+  get: () => settings.value.collapseNav,
+  set: (value) => (settings.value.collapseNav = value),
+});
+
+export {
+  collapseNav,
+  softWrap,
+  hourStyle,
+  lightTheme,
+  showAllContainers,
+  showTimestamp,
+  showStd,
+  smallerScrollbars,
+  menuWidth,
+  size,
+  search,
+  settings,
+};

assets/composables/storage.ts

@@ -0,0 +1,9 @@
+import { Container } from "@/models/Container";
+
+const sessionHost = useSessionStorage("host", config.hosts[0]);
+
+function persistentVisibleKeys(container: ComputedRef<Container>) {
+  return computed(() => useStorage(stripVersion(container.value.image) + ":" + container.value.command, []));
+}
+
+export { sessionHost, persistentVisibleKeys };

assets/composables/title.ts

@@ -1,12 +1,9 @@
-import { useTitle } from "@vueuse/core";
-import { ref, computed } from "vue";
+const { hostname } = config;
+let subtitle = $ref("");
+const title = $computed(() => `${subtitle} - Dozzle` + (hostname ? ` @ ${hostname}` : ""));
 
-const subtitle = ref("");
-
-const title = computed(() => `${subtitle.value} - Dozzle`);
-
-useTitle(title);
+useTitle($$(title));
 
 export function setTitle(t: string) {
-  subtitle.value = t;
+  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/layouts/default.vue

@@ -0,0 +1,127 @@
+<template>
+  <main v-if="!authorizationNeeded">
+    <mobile-menu v-if="isMobile" @search="showFuzzySearch"></mobile-menu>
+    <splitpanes @resized="onResized($event)">
+      <pane min-size="10" :size="menuWidth" v-if="!isMobile && !collapseNav">
+        <side-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="collapse"
+      class="button is-small 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 { 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 collapse() {
+  collapseNav.value = !collapseNav.value;
+}
+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;
+    color: var(--text-strong-color);
+    background: var(--scheme-main);
+
+    &: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.ts

@@ -1,67 +1,10 @@
 import "./styles.scss";
-import { createApp } from "vue";
-import { createRouter, createWebHistory } from "vue-router";
-import { Autocomplete, Button, Dropdown, Switch, Radio, Field, Tooltip, Modal, Config } from "@oruga-ui/oruga-next";
-import { bulmaConfig } from "@oruga-ui/theme-bulma";
-import { createPinia } from "pinia";
-import config from "./stores/config";
+import { createApp, App as VueApp } from "vue";
 import App from "./App.vue";
-import { Container, Settings, Index, Show, ContainerNotFound, PageNotFound, Login } from "./pages";
 
-const routes = [
-  {
-    path: "/",
-    component: Index,
-    name: "default",
-  },
-  {
-    path: "/container/:id",
-    component: Container,
-    name: "container",
-    props: true,
-  },
-  {
-    path: "/container/:pathMatch(.*)",
-    component: ContainerNotFound,
-    name: "container-not-found",
-  },
-  {
-    path: "/settings",
-    component: Settings,
-    name: "settings",
-  },
-  {
-    path: "/show",
-    component: Show,
-    name: "show",
-  },
-  {
-    path: "/login",
-    component: Login,
-    name: "login",
-  },
-  {
-    path: "/:pathMatch(.*)*",
-    component: PageNotFound,
-    name: "page-not-found",
-  },
-];
+const app = createApp(App);
+Object.values(import.meta.glob<{ install: (app: VueApp) => void }>("./modules/*.ts", { eager: true })).forEach((i) =>
+  i.install?.(app)
+);
 
-const router = createRouter({
-  history: createWebHistory(`${config.base}/`),
-  routes,
-});
-
-createApp(App)
-  .use(router)
-  .use(createPinia())
-  .use(Autocomplete)
-  .use(Button)
-  .use(Dropdown)
-  .use(Switch)
-  .use(Tooltip)
-  .use(Modal)
-  .use(Radio)
-  .use(Field)
-  .use(Config, bulmaConfig)
-  .mount("#app");
+app.mount("#app");

assets/models/Container.spec.ts

@@ -0,0 +1,19 @@
+import { describe, expect, test } from "vitest";
+import { Container } from "./Container";
+describe("Container", () => {
+  const names = [
+    [
+      "foo.gb1cto7gaq68fp4refnsr5hep.byqr1prci82zyfoos6gx1yhz0",
+      "foo",
+      ".gb1cto7gaq68fp4refnsr5hep.byqr1prci82zyfoos6gx1yhz0",
+    ],
+    ["bar.gb1cto7gaq68fp4refnsr5hep", "bar", ".gb1cto7gaq68fp4refnsr5hep"],
+    ["baz", "baz", null],
+  ];
+
+  test.each(names)("name %s should be %s and %s", (name, expectedName, expectedSwarmId) => {
+    const c = new Container("id", new Date(), "image", name!, "command", "status", "created");
+    expect(c.name).toBe(expectedName);
+    expect(c.swarmId).toBe(expectedSwarmId);
+  });
+});

assets/models/Container.ts

@@ -0,0 +1,43 @@
+import type { ContainerHealth, ContainerStat, ContainerState } from "@/types/Container";
+import type { UseThrottledRefHistoryReturn } from "@vueuse/core";
+import { Ref } from "vue";
+
+type Stat = Omit<ContainerStat, "id">;
+
+const SWARM_ID_REGEX = /(\.[a-z0-9]{25})+$/i;
+
+export class Container {
+  public stat: Ref<Stat>;
+  private readonly throttledStatHistory: UseThrottledRefHistoryReturn<Stat, Stat>;
+  public readonly swarmId: string | null = null;
+  public readonly isSwarm: boolean = false;
+
+  constructor(
+    public readonly id: string,
+    public readonly created: Date,
+    public readonly image: string,
+    public readonly name: string,
+    public readonly command: string,
+    public status: string,
+    public state: ContainerState,
+    public health?: ContainerHealth
+  ) {
+    this.stat = ref({ cpu: 0, memory: 0, memoryUsage: 0 });
+    this.throttledStatHistory = useThrottledRefHistory(this.stat, { capacity: 300, deep: true, throttle: 1000 });
+
+    const match = name.match(SWARM_ID_REGEX);
+    if (match) {
+      this.swarmId = match[0];
+      this.name = name.replace(`${this.swarmId}`, "");
+      this.isSwarm = true;
+    }
+  }
+
+  public getStatHistory() {
+    return unref(this.throttledStatHistory.history);
+  }
+
+  public getLastStat() {
+    return unref(this.throttledStatHistory.last);
+  }
+}

assets/models/LogEntry.ts

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

assets/modules/bulma.ts

@@ -0,0 +1,15 @@
+import { type App } from "vue";
+import { Autocomplete, Button, Dropdown, Switch, Skeleton, Field, 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(Modal)
+    .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,7 @@
+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,35 +0,0 @@
-<template>
-  <search></search>
-  <log-container :id="id" show-title :scrollable="activeContainers.length > 0"> </log-container>
-</template>
-
-<script lang="ts" setup>
-import { onMounted, toRefs, watchEffect } from "vue";
-import Search from "@/components/Search.vue";
-import LogContainer from "@/components/LogContainer.vue";
-import { setTitle } from "@/composables/title";
-import { useContainerStore } from "@/stores/container";
-import { storeToRefs } from "pinia";
-
-const store = useContainerStore();
-
-const props = defineProps({
-  id: {
-    type: String,
-    required: true,
-  },
-});
-
-const { id } = toRefs(props);
-
-const currentContainer = store.currentContainer(id);
-const { activeContainers } = storeToRefs(store);
-
-setTitle("loading");
-
-onMounted(() => {
-  setTitle(currentContainer.value?.name);
-});
-
-watchEffect(() => setTitle(currentContainer.value?.name));
-</script>

assets/pages/ContainerNotFound.vue

@@ -1,23 +0,0 @@
-<template>
-  <div class="hero is-halfheight">
-    <div class="hero-body">
-      <div class="container has-text-centered">
-        <h1 class="title">
-          Container not found.
-          <small class="subtitle">It may have been removed.</small>
-        </h1>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import { setTitle } from "@/composables/title";
-
-export default {
-  name: "ContainerNotFound",
-  setup() {
-    setTitle("Container not found");
-  },
-};
-</script>

assets/pages/Index.vue

@@ -1,160 +0,0 @@
-<template>
-  <div>
-    <section class="hero is-small mt-4">
-      <div class="hero-body">
-        <div class="container">
-          <div class="columns">
-            <div class="column">
-              <h1 class="title">Hello, there!</h1>
-            </div>
-            <div class="column is-narrow" v-if="secured">
-              <a class="button is-primary is-small" :href="`${base}/logout`">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">Total Containers</p>
-        </div>
-      </div>
-      <div class="level-item has-text-centered">
-        <div>
-          <p class="title">{{ runningContainers.length }}</p>
-          <p class="heading">Running</p>
-        </div>
-      </div>
-      <div class="level-item has-text-centered">
-        <div>
-          <p class="title" data-ci-skip>{{ totalCpu }}%</p>
-          <p class="heading">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">Total Mem Usage</p>
-        </div>
-      </div>
-      <div class="level-item has-text-centered">
-        <div>
-          <p class="title">{{ version }}</p>
-          <p class="heading">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">Containers</p>
-          <div class="panel-block">
-            <p class="control has-icons-left">
-              <input
-                class="input"
-                type="text"
-                placeholder="Search Containers"
-                v-model="search"
-                @keyup.esc="search = null"
-                @keyup.enter="onEnter()"
-              />
-              <span class="icon is-left">
-                <search-icon />
-              </span>
-            </p>
-          </div>
-          <p class="panel-tabs" v-if="!search">
-            <a :class="{ 'is-active': sort === 'running' }" @click="sort = 'running'">Running</a>
-            <a :class="{ 'is-active': sort === 'all' }" @click="sort = 'all'">All</a>
-          </p>
-          <router-link
-            :to="{ name: 'container', params: { id: item.id, name: item.name } }"
-            v-for="item in results.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 { ref, computed } from "vue";
-import { storeToRefs } from "pinia";
-import { useRouter } from "vue-router";
-import { useContainerStore } from "@/stores/container";
-import { formatBytes } from "@/utils";
-import fuzzysort from "fuzzysort";
-import SearchIcon from "~icons/mdi-light/magnify";
-import PastTime from "../components/PastTime.vue";
-import config from "@/stores/config";
-
-const { base, version, secured } = config;
-const containerStore = useContainerStore();
-const { containers } = storeToRefs(containerStore);
-const router = useRouter();
-
-const sort = ref("running");
-const search = ref();
-
-const results = computed(() => {
-  if (search.value) {
-    return fuzzysort.go(search.value, containers.value, { key: "name" }).map((i) => i.obj);
-  }
-  switch (sort.value) {
-    case "all":
-      return mostRecentContainers.value;
-    case "running":
-      return runningContainers.value;
-    default:
-      throw `Invalid sort order: ${sort.value}`;
-  }
-});
-
-const mostRecentContainers = computed(() => [...containers.value].sort((a, b) => b.created - a.created));
-const runningContainers = computed(() => mostRecentContainers.value.filter((c) => c.state === "running"));
-const totalCpu = computed(() => runningContainers.value.reduce((acc, c) => acc + (c.stat?.cpu ?? 0), 0));
-const totalMem = computed(() => runningContainers.value.reduce((acc, c) => acc + (c.stat?.memoryUsage ?? 0), 0));
-
-function onEnter() {
-  if (results.value.length == 1) {
-    const [item] = results.value;
-    router.push({ name: "container", params: { id: item.id, name: item.name } });
-  }
-}
-</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/[...all].vue

@@ -4,19 +4,14 @@
       <div class="container has-text-centered">
         <h1 class="title">
           404.
-          <small class="subtitle">This page does not exist.</small>
+          <small class="subtitle">{{ $t("error.page-not-found") }}</small>
         </h1>
       </div>
     </div>
   </div>
 </template>
 
-<script lang="ts">
-import { setTitle } from "@/composables/title";
-export default {
-  name: "PageNotFound",
-  setup() {
-    setTitle("Page not found");
-  },
-};
+<script lang="ts" setup>
+const { t } = useI18n();
+setTitle(t("title.page-not-found"));
 </script>

assets/pages/container/[id].vue

@@ -0,0 +1,26 @@
+<template>
+  <search></search>
+  <log-container :id="id" show-title :scrollable="activeContainers.length > 0" v-if="currentContainer"></log-container>
+  <div v-else-if="ready" class="notification is-warning is-light m-6">
+    <h1 class="title">
+      {{ $t("error.container-not-found") }}
+    </h1>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import search from "@/components/Search.vue";
+const store = useContainerStore();
+const { id } = defineProps<{ id: string }>();
+
+const currentContainer = store.currentContainer($$(id));
+const { activeContainers, ready } = storeToRefs(store);
+
+setTitle("loading");
+
+onMounted(() => {
+  setTitle(currentContainer.value?.name);
+});
+
+watchEffect(() => setTitle(currentContainer.value?.name));
+</script>

assets/pages/index.ts

@@ -1,7 +0,0 @@
-export { default as Index } from "./Index.vue";
-export { default as ContainerNotFound } from "./ContainerNotFound.vue";
-export { default as Show } from "./Show.vue";
-export { default as Container } from "./Container.vue";
-export { default as Settings } from "./Settings.vue";
-export { default as PageNotFound } from "./PageNotFound.vue";
-export { default as Login } from "./Login.vue";

assets/pages/index.vue

@@ -0,0 +1,184 @@
+<template>
+  <div>
+    <section class="level section pb-0-is-mobile">
+      <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" data-ci-skip>
+        <div>
+          <p class="title">{{ totalCpu }}%</p>
+          <p class="heading">{{ $t("label.total-cpu-usage") }}</p>
+        </div>
+      </div>
+      <div class="level-item has-text-centered" data-ci-skip>
+        <div>
+          <p class="title">{{ 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 pt-0-is-mobile">
+      <div class="column is-12-mobile is-6-tablet is-5-desktop is-4-fullhd">
+        <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">
+                <mdi:light-magnify />
+              </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">
+              <distance-time :date="item.created"></distance-time>
+            </div>
+          </router-link>
+        </div>
+      </div>
+    </section>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useFuse } from "@vueuse/integrations/useFuse";
+
+const { version } = 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 list = computed(() => {
+  return containers.value.map(({ id, created, name, state }) => {
+    return {
+      id,
+      created,
+      name,
+      state,
+    };
+  });
+});
+
+const { results } = useFuse(query, list, {
+  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;
+    }
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .pb-0-is-mobile {
+    padding-bottom: 0 !important;
+  }
+
+  .pt-0-is-mobile {
+    padding-top: 0 !important;
+  }
+}
+
+.icon {
+  padding: 10px 3px;
+}
+</style>

assets/pages/login.vue

@@ -8,7 +8,7 @@
               <div class="card-content">
                 <form action="" method="post" @submit.prevent="onLogin" ref="form">
                   <div class="field">
-                    <label class="label">Username</label>
+                    <label class="label">{{ $t("label.username") }}</label>
                     <div class="control">
                       <input
                         class="input"
@@ -22,7 +22,7 @@
                   </div>
 
                   <div class="field">
-                    <label class="label">Password</label>
+                    <label class="label">{{ $t("label.password") }}</label>
                     <div class="control">
                       <input
                         class="input"
@@ -32,11 +32,11 @@
                         v-model="password"
                       />
                     </div>
-                    <p class="help is-danger" v-if="error">Username and password are not valid.</p>
+                    <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">Login</button>
+                      <button class="button is-primary" type="submit">{{ $t("button.login") }}</button>
                     </p>
                   </div>
                 </form>
@@ -49,35 +49,31 @@
   </div>
 </template>
 
-<script lang="ts">
-import config from "@/stores/config";
-import { setTitle } from "@/composables/title";
-export default {
-  name: "Login",
-  data() {
-    return {
-      username: null,
-      password: null,
-      error: false,
-    };
-  },
-  setup() {
-    setTitle("Authentication Required");
-  },
-  methods: {
-    async onLogin() {
-      const response = await fetch(`${config.base}/api/validateCredentials`, {
-        body: new FormData(this.$refs.form),
-        method: "post",
-      });
+<script lang="ts" setup>
+const { t } = useI18n();
 
-      if (response.status == 200) {
-        this.error = false;
-        window.location.href = `${config.base}/`;
-      } else {
-        this.error = true;
-      }
-    },
-  },
-};
+setTitle(t("title.login"));
+
+let error = $ref(false);
+let username = $ref("");
+let password = $ref("");
+let form: HTMLFormElement | undefined = $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,35 +2,35 @@
   <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">Display</h2>
+        <h2 class="title is-4">{{ $t("settings.display") }}</h2>
       </div>
 
       <div class="item">
-        <o-switch v-model="smallerScrollbars"> Use smaller scrollbars </o-switch>
+        <o-switch v-model="smallerScrollbars"> {{ $t("settings.small-scrollbars") }} </o-switch>
       </div>
       <div class="item">
-        <o-switch v-model="showTimestamp"> Show timestamps </o-switch>
+        <o-switch v-model="showTimestamp"> {{ $t("settings.show-timesamps") }} </o-switch>
+      </div>
+      <div class="item">
+        <o-switch v-model="showStd"> {{ $t("settings.show-std") }} </o-switch>
       </div>
 
       <div class="item">
-        <o-switch v-model="softWrap"> Soft wrap lines</o-switch>
+        <o-switch v-model="softWrap"> {{ $t("settings.soft-wrap") }}</o-switch>
       </div>
 
       <div class="item">
@@ -42,7 +42,7 @@
                   <o-button variant="primary" type="button">
                     <span class="is-capitalized">{{ hourStyle }}</span>
                     <span class="icon">
-                      <carbon-caret-down />
+                      <carbon:caret-down />
                     </span>
                   </o-button>
                 </template>
@@ -54,7 +54,7 @@
             </o-field>
           </div>
           <div class="column">
-            By default, Dozzle will use your browser's locale to format time. You can force to 12 or 24 hour style.
+            {{ $t("settings.12-24-format") }}
           </div>
         </div>
       </div>
@@ -67,7 +67,7 @@
                   <o-button variant="primary" type="button">
                     <span class="is-capitalized">{{ size }}</span>
                     <span class="icon">
-                      <carbon-caret-down />
+                      <carbon:caret-down />
                     </span>
                   </o-button>
                 </template>
@@ -83,7 +83,7 @@
               </o-dropdown>
             </o-field>
           </div>
-          <div class="column">Font size to use for logs</div>
+          <div class="column">{{ $t("settings.font-size") }}</div>
         </div>
       </div>
       <div class="item">
@@ -95,7 +95,7 @@
                   <o-button variant="primary" type="button">
                     <span class="is-capitalized">{{ lightTheme }}</span>
                     <span class="icon">
-                      <carbon-caret-down />
+                      <carbon:caret-down />
                     </span>
                   </o-button>
                 </template>
@@ -111,60 +111,64 @@
               </o-dropdown>
             </o-field>
           </div>
-          <div class="column">Color scheme</div>
+          <div class="column">{{ $t("settings.color-scheme") }}</div>
         </div>
       </div>
     </section>
     <section class="section">
       <div class="has-underline">
-        <h2 class="title is-4">Options</h2>
+        <h2 class="title is-4">{{ $t("settings.options") }}</h2>
       </div>
 
       <div class="item">
         <o-switch v-model="search">
-          Enable searching with Dozzle using <code>command+f</code> or <code>ctrl+f</code>
+          <span v-html="$t('settings.search')"></span>
         </o-switch>
       </div>
 
       <div class="item">
-        <o-switch v-model="showAllContainers"> Show stopped containers </o-switch>
+        <o-switch v-model="showAllContainers"> {{ $t("settings.show-stopped-containers") }} </o-switch>
       </div>
     </section>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { ref } from "vue";
-import gt from "semver/functions/gt";
-import config from "@/stores/config";
-import { setTitle } from "@/composables/title";
 import {
   search,
   lightTheme,
   smallerScrollbars,
   showTimestamp,
+  showStd,
   hourStyle,
   showAllContainers,
   size,
   softWrap,
 } from "@/composables/settings";
 
-setTitle("Settings");
+const { t } = useI18n();
+
+setTitle(t("title.settings"));
 
 const currentVersion = config.version;
-const nextRelease = ref({ html_url: "", name: "" });
-const hasUpdate = ref(false);
+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/dozzle/dozzle/releases/latest");
+    const response = await fetch("https://api.github.com/repos/amir20/dozzle/releases/latest");
     if (response.ok) {
-      const releases = await response.json();
-      hasUpdate.value = gt(releases[0].tag_name, currentVersion);
-      nextRelease.value = releases[0];
+      const release = await response.json();
+      hasUpdate =
+        release.tag_name.slice(1).localeCompare(currentVersion, undefined, { numeric: true, sensitivity: "base" }) > 0;
+      nextRelease = release;
     }
   } else {
-    hasUpdate.value = true;
+    hasUpdate = true;
+    nextRelease = {
+      html_url: "",
+      name: "master",
+    };
   }
 }
 
@@ -177,6 +181,7 @@ fetchNextRelease();
 
 a.next-release {
   text-decoration: underline;
+
   &:hover {
     text-decoration: none;
   }

assets/pages/show.vue

@@ -1,9 +1,4 @@
 <script lang="ts" setup>
-import { useContainerStore } from "@/stores/container";
-import { storeToRefs } from "pinia";
-import { watch } from "vue";
-import { useRoute, useRouter } from "vue-router";
-
 const router = useRouter();
 const route = useRoute();
 
@@ -15,15 +10,16 @@ watch(visibleContainers, (newValue) => {
     if (route.query.name) {
       const [container, _] = visibleContainers.value.filter((c) => c.name == route.query.name);
       if (container) {
-        router.push({ name: "container", params: { id: container.id } });
+        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: "default" });
+        router.push({ name: "index" });
       }
     } else {
       console.error(`Expection query parameter name to be set. Redirecting to /`);
-      router.push({ name: "default" });
+      router.push({ name: "index" });
     }
   }
 });
 </script>
+<template></template>

assets/stores/config.ts

@@ -1,14 +1,38 @@
 const text = document.querySelector("script#config__json")?.textContent || "{}";
 
-const config = JSON.parse(text);
+interface Config {
+  version: string;
+  base: string;
+  authorizationNeeded: boolean | "false" | "true";
+  secured: boolean | "false" | "true";
+  maxLogs: number;
+  hostname: string;
+  hosts: string[] | string;
+}
+
+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;
+  config.hostname = "localhost";
+  config.hosts = ["localhost"];
 } else {
   config.version = config.version.replace(/^v/, "");
   config.authorizationNeeded = config.authorizationNeeded === "true";
   config.secured = config.secured === "true";
+  config.hosts = (config.hosts as string).split(",");
 }
-export default config;
+
+export default config as Omit<Config, "hosts" | "authorizationNeeded" | "secured"> & {
+  hosts: string[];
+  authorizationNeeded: boolean;
+  secured: boolean;
+};

assets/stores/container.ts

@@ -1,13 +1,13 @@
 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 { Ref, UnwrapNestedRefs } from "vue";
+import type { ContainerHealth, ContainerJson, ContainerStat } from "@/types/Container";
+import { Container } from "@/models/Container";
 
 export const useContainerStore = defineStore("container", () => {
-  const containers = ref<Container[]>([]);
-  const activeContainerIds = ref<string[]>([]);
+  const containers: Ref<Container[]> = ref([]);
+  const activeContainerIds: Ref<string[]> = ref([]);
+  let es: EventSource | null = null;
+  const ready = ref(false);
 
   const allContainersById = computed(() =>
     containers.value.reduce((acc, container) => {
@@ -23,34 +23,61 @@ export const useContainerStore = defineStore("container", () => {
 
   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;
-      }
+  watch(
+    sessionHost,
+    () => {
+      connect();
     },
-    false
+    { immediate: true }
   );
-  es.addEventListener(
-    "container-die",
-    (e) => {
+
+  function connect() {
+    es?.close();
+    ready.value = false;
+    es = new EventSource(`${config.base}/api/events/stream?host=${sessionHost.value}`);
+
+    es.addEventListener("containers-changed", (e: Event) =>
+      setContainers(JSON.parse((e as MessageEvent).data) as ContainerJson[])
+    );
+    es.addEventListener("container-stat", (e) => {
+      const stat = JSON.parse((e as MessageEvent).data) as ContainerStat;
+      const container = allContainersById.value[stat.id] as unknown as UnwrapNestedRefs<Container>;
+      if (container) {
+        const { id, ...rest } = stat;
+        container.stat = rest;
+      }
+    });
+    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
-  );
+    });
+
+    es.addEventListener("container-health", (e) => {
+      const event = JSON.parse((e as MessageEvent).data) as { actorId: string; health: ContainerHealth };
+      const container = allContainersById.value[event.actorId];
+      if (container) {
+        container.health = event.health;
+      }
+    });
+
+    watchOnce(containers, () => (ready.value = true));
+  }
+
+  const setContainers = (newContainers: ContainerJson[]) => {
+    containers.value = newContainers.map((c) => {
+      const existing = allContainersById.value[c.id];
+      if (existing) {
+        existing.status = c.status;
+        existing.state = c.state;
+        existing.health = c.health;
+        return existing;
+      }
+      return new Container(c.id, new Date(c.created * 1000), c.image, c.name, c.command, c.status, c.state, c.health);
+    });
+  };
 
   const currentContainer = (id: Ref<string>) => computed(() => allContainersById.value[id.value]);
   const appendActiveContainer = ({ id }: Container) => activeContainerIds.value.push(id);
@@ -66,6 +93,7 @@ export const useContainerStore = defineStore("container", () => {
     currentContainer,
     appendActiveContainer,
     removeActiveContainer,
+    ready,
   };
 });
 

assets/styles.scss

@@ -17,6 +17,7 @@ $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);
@@ -33,12 +34,11 @@ $light-toolbar-color: rgba($grey-darker, 0.7);
 @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";
 
-html,
-[data-theme="dark"] {
+@mixin dark {
   --scheme-main: #{$black};
   --scheme-main-bis: #{$black-bis};
   --scheme-main-ter: #{$black-ter};
@@ -52,6 +52,7 @@ html,
 
   --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%);
@@ -63,91 +64,84 @@ html,
 
   --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: var(--secondary-color);
+
+  --primary-color: #{$turquoise};
+  --secondary-color: rgb(249 115 22);
+
+  --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 {
-  --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};
-
-  --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};
+    @include dark;
   }
 }
 
 @media (prefers-color-scheme: light) {
   html {
-  --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-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};
+    @include light;
   }
 }
 
-[data-theme="light"] {
-  --scheme-main: #{$white};
-  --scheme-main-bis: #{$white-bis};
-  --scheme-main-ter: #{$white-ter};
+:root {
+  --green-color: #00b5ad;
+  --red-color: #f44336;
+  --purple-color: #9c27b0;
+  --orange-color: #ff9800;
+  --blue-color: #2196f3;
+}
 
-  --border-color: #{$grey-lighter};
-  --border-hover-color: var(--secondary-color);
-  --logo-color: #{$grey-darker};
+.is-red {
+  color: var(--red-color);
+}
 
-  --primary-color: #{$turquoise};
-  --secondary-color: #d8f0ca;
+.is-green {
+  color: var(--green-color);
+}
 
-  --body-background-color: #{$white-bis};
-  --action-toolbar-background-color: #{$light-toolbar-color};
-  --body-color: #{$grey-darker};
+.is-purple {
+  color: var(--purple-color);
+}
 
-  --menu-item-color: #{$grey-dark};
-  --menu-item-hover-background-color: #eee8e7;
-  --menu-item-hover-color: #{black-ter};
+.is-orange {
+  color: var(--orange-color);
+}
 
-  --panel-heading-background-color: var(--secondary-color);
-  --panel-heading-color: var(--text-strong-color);
-
-  --text-strong-color: #{$grey-dark};
-  --text-color: #{$grey-darker};
+.is-blue {
+  color: var(--blue-color);
 }
 
 html {
@@ -192,6 +186,12 @@ html.has-custom-scrollbars {
   }
 }
 
+@media screen and (max-device-width: 480px) {
+  body {
+    -webkit-text-size-adjust: 100%;
+  }
+}
+
 .splitpanes__splitter {
   z-index: 99;
 }
@@ -204,8 +204,40 @@ html.has-custom-scrollbars {
 
 .modal {
   z-index: 1000;
+  .modal-background {
+    backdrop-filter: blur(4px);
+  }
 }
 
 .button .button-wrapper > span {
   display: contents;
 }
+
+.has-dropshadow {
+  filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));
+}
+
+.has-boxshadow {
+  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+}
+
+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);
+  }
+}
+
+.button.is-rounded:hover {
+  color: var(--text-strong-color);
+  background: var(--scheme-main-ter);
+}