Release 3.10.0

This reverts commit 05ae16df8b.

.babelrc

@@ -1,8 +1,4 @@
 {
-  "presets": [["env", { "modules": false }]],
-  "env": {
-    "test": {
-      "presets": [["env", { "targets": { "node": "current" } }]]
-    }
-  }
+  "presets": ["@babel/preset-env"],
+  "plugins": ["@babel/plugin-transform-runtime"]
 }

.dockerignore

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

.editorconfig

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

.github/.kodiak.toml

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

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,32 @@
+---
+name: Bug report
+about: Create a report to help us improve
+title: ''
+labels: ''
+assignees: amir20
+
+---
+
+**Describe the bug**
+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 '....'
+4. See error
+
+**Expected behavior**
+A clear and concise description of what you expected to happen.
+
+**Screenshots**
+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`]
+
+**If applicable include logs with `--level debug` and browser logs**

.github/ISSUE_TEMPLATE/feature_request.md

@@ -0,0 +1,20 @@
+---
+name: Feature request
+about: Suggest an idea for this project
+title: ''
+labels: enhancement
+assignees: amir20
+
+---
+
+**Is your feature request related to a problem? Please describe.**
+A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
+
+**Describe the solution you'd like**
+A clear and concise description of what you want to happen.
+
+**Describe alternatives you've considered**
+A clear and concise description of any alternative solutions or features you've considered.
+
+**Additional context**
+Add any other context or screenshots about the feature request here.

.github/dependabot.yml

@@ -0,0 +1,40 @@
+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/stale.yml

@@ -0,0 +1,17 @@
+# Number of days of inactivity before an issue becomes stale
+daysUntilStale: 20
+# Number of days of inactivity before a stale issue is closed
+daysUntilClose: 3
+# Issues with these labels will never be considered stale
+exemptLabels:
+  - pinned
+  - security
+# Label to use when marking an issue as stale
+staleLabel: wontfix
+# Comment to post when marking an issue as stale. Set to `false` to disable
+markComment: >
+  This issue has been automatically marked as stale because it has not had
+  recent activity. It will be closed if no further activity occurs. Thank you
+  for your contributions.
+# Comment to post when closing a stale issue. Set to `false` to disable
+closeComment: false

.github/workflows/deploy.yml

@@ -9,52 +9,86 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout code
-        uses: actions/checkout@v2
+        uses: actions/checkout@v2.4.0
       - name: Install Node
-        uses: actions/setup-node@v1
-      - name: Install depdencies
-        run: yarn
+        uses: actions/setup-node@v2.4.1
+      - name: Install pnpm
+        uses: pnpm/action-setup@v2.0.1
+        with:
+          version: 6.20.1
+      - name: Install dependencies
+        run: pnpm install
       - name: Run Tests
-        run: yarn test
+        run: pnpm run test
   go-test:
     name: Go Tests
     runs-on: ubuntu-latest
     steps:
       - name: Install Go
-        uses: actions/setup-go@v1
+        uses: actions/setup-go@v2.1.4
         with:
-          go-version: 1.14.x
+          go-version: 1.17.x
       - name: Checkout code
-        uses: actions/checkout@v2
+        uses: actions/checkout@v2.4.0
       - name: Run Go Tests with Coverage
-        run: go test -cover ./...
+        run: make test SKIP_ASSET=1
   int-test:
-    needs: [go-test, npm-test]
     name: Integration Tests
     runs-on: ubuntu-latest
     steps:
       - name: Checkout code
-        uses: actions/checkout@v2
+        uses: actions/checkout@v2.4.0
       - name: Build images
-        run: docker-compose -f integration/docker-compose.test.yml build
+        run: docker-compose -f e2e/docker-compose.yml build
       - name: Run tests
-        run: docker-compose -f integration/docker-compose.test.yml run integration
+        run: docker-compose -f e2e/docker-compose.yml up --build --force-recreate --exit-code-from cypress
   buildx:
-    needs: [int-test]
+    needs: [go-test, npm-test, int-test]
     name: Release
     runs-on: ubuntu-latest
     steps:
-      - name: Checkout
-        uses: actions/checkout@v2
-      - name: Set up Docker Buildx
-        id: buildx
-        uses: crazy-max/ghaction-docker-buildx@v1
+      - name: Docker meta
+        id: meta
+        uses: docker/metadata-action@v3
         with:
-          buildx-version: latest
-          qemu-version: latest
-      - name: Available platforms
-        run: echo ${{ steps.buildx.outputs.platforms }}
-      - name: Docker Login
-        run: docker login -u ${{ secrets.DOCKER_USERNAME }} -p ${{ secrets.DOCKER_PASSWORD }}
-      - name: Run Buildx
-        run: make publish
+          images: amir20/dozzle
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v1.2.0
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v1.6.0
+      - name: Login to DockerHub
+        uses: docker/login-action@v1.10.0
+        with:
+          username: ${{ secrets.DOCKER_USERNAME }}
+          password: ${{ secrets.DOCKER_PASSWORD }}
+      - name: Build and push
+        uses: docker/build-push-action@v2.7.0
+        with:
+          push: true
+          platforms: linux/amd64,linux/arm/v7,linux/arm64/v8
+          tags: ${{ steps.meta.outputs.tags }}
+          build-args: TAG=${{ steps.meta.outputs.version }}
+          labels: ${{ steps.meta.outputs.labels }}
+          cache-from: type=registry,ref=amir20/dozzle:latest
+          cache-to: type=inline
+  git-release:
+    needs: [buildx]
+    name: Github Release
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v2.4.0
+        with:
+          fetch-depth: 0
+      - name: Install Node
+        uses: actions/setup-node@v2.4.1
+      - name: Install pnpm
+        uses: pnpm/action-setup@v2.0.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

.github/workflows/dev.yml

@@ -0,0 +1,37 @@
+on:
+  push:
+    branches:
+      - master
+  pull_request:
+    branches:
+      - master
+name: Push container
+jobs:
+  buildx:
+    name: Push branches and PRs
+    runs-on: ubuntu-latest
+    steps:
+      - name: Docker meta
+        id: meta
+        uses: docker/metadata-action@v3
+        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
+      - name: Login to DockerHub
+        uses: docker/login-action@v1.10.0
+        with:
+          username: ${{ secrets.DOCKER_USERNAME }}
+          password: ${{ secrets.DOCKER_PASSWORD }}
+      - name: Build and push
+        uses: docker/build-push-action@v2.7.0
+        with:
+          push: true
+          platforms: linux/amd64
+          tags: ${{ steps.meta.outputs.tags }}
+          build-args: TAG=${{ steps.meta.outputs.version }}
+          labels: ${{ steps.meta.outputs.labels }}
+          cache-from: type=registry,ref=amir20/dozzle:master
+          cache-to: type=inline

.github/workflows/test.yml

@@ -1,4 +1,10 @@
-on: push
+on:
+  push:
+    branches:
+      - "**"
+  pull_request:
+    branches:
+      - master
 name: Test
 jobs:
   npm-test:
@@ -6,32 +12,36 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout code
-        uses: actions/checkout@v2
+        uses: actions/checkout@v2.4.0
       - name: Install Node
-        uses: actions/setup-node@v1
-      - name: Install depdencies
-        run: yarn
+        uses: actions/setup-node@v2.4.1
+      - name: Install pnpm
+        uses: pnpm/action-setup@v2.0.1
+        with:
+          version: 6.20.1
+      - name: Install dependencies
+        run: pnpm install
       - name: Run Tests
-        run: yarn test
+        run: pnpm run test
   go-test:
     name: Go Tests
     runs-on: ubuntu-latest
     steps:
       - name: Install Go
-        uses: actions/setup-go@v1
+        uses: actions/setup-go@v2.1.4
         with:
-          go-version: 1.14.x
+          go-version: 1.17.x
       - name: Checkout code
-        uses: actions/checkout@v2
+        uses: actions/checkout@v2.4.0
       - name: Run Go Tests with Coverage
-        run: go test -cover ./...
+        run: make test SKIP_ASSET=1
   int-test:
     name: Integration Tests
     runs-on: ubuntu-latest
     steps:
       - name: Checkout code
-        uses: actions/checkout@v2
+        uses: actions/checkout@v2.4.0
       - name: Build images
-        run: docker-compose -f integration/docker-compose.test.yml build  
+        run: docker-compose -f e2e/docker-compose.yml build
       - name: Run tests
-        run: docker-compose -f integration/docker-compose.test.yml run integration
+        run: docker-compose -f e2e/docker-compose.yml up --build --force-recreate --exit-code-from cypress

.husky/.gitignore

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

.husky/pre-commit

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

.reflex

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

Dockerfile

@@ -1,45 +1,44 @@
 # Build assets
-FROM node:13-alpine as node
+FROM node:17-alpine as node
 
-RUN apk add --no-cache git openssh python make g++ util-linux
+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
 
 WORKDIR /build
 
-# Install dependencies
-COPY package*.json yarn.lock ./
-RUN yarn install --network-timeout 1000000
+# Install dependencies from lock file
+COPY pnpm-lock.yaml ./
+RUN pnpm fetch --prod
 
-# Copy config files
-COPY .* webpack*.js ./
+# Copy files
+COPY package.json .* vite.config.ts index.html ./
 
 # Copy assets to build
 COPY assets ./assets
 
+# Install dependencies
+RUN pnpm install -r --offline --prod
+
 # Do the build
-RUN yarn build
+RUN pnpm build
 
-FROM golang:1.14-alpine AS builder
+FROM golang:1.17.3-alpine AS builder
 
-RUN apk add --no-cache git ca-certificates
-RUN mkdir /dozzle
+RUN apk add --no-cache git ca-certificates && mkdir /dozzle
 
 WORKDIR /dozzle
 
-# Needed for assets
-RUN go get -u github.com/gobuffalo/packr/packr
-
 # Copy go mod files
 COPY go.* ./
 RUN go mod download
 
 # Copy assets built with node
-COPY --from=node /build/static ./static
+COPY --from=node /build/dist ./dist
 
 # Copy all other files
-COPY . .
-
-# Compile static files
-RUN packr -z
+COPY analytics ./analytics
+COPY docker ./docker
+COPY web ./web
+COPY main.go ./
 
 # Args
 ARG TAG=dev
@@ -54,4 +53,6 @@ ENV PATH=/bin
 COPY --from=builder /etc/ssl/certs/ca-certificates.crt /etc/ssl/certs/ca-certificates.crt
 COPY --from=builder /dozzle/dozzle /dozzle
 
+EXPOSE 8080
+
 ENTRYPOINT ["/dozzle"]

Makefile

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

README.md

@@ -1,32 +1,41 @@
-[![Go Report Card](https://goreportcard.com/badge/github.com/amir20/dozzle)](https://goreportcard.com/report/github.com/amir20/dozzle)
-[![Docker Pulls](https://img.shields.io/docker/pulls/amir20/dozzle.svg)](https://hub.docker.com/r/amir20/dozzle/)
-[![Docker Size](https://images.microbadger.com/badges/image/amir20/dozzle.svg)](https://hub.docker.com/r/amir20/dozzle/)
-[![Docker Version](https://images.microbadger.com/badges/version/amir20/dozzle.svg)](https://hub.docker.com/r/amir20/dozzle/)
-![Test](https://github.com/amir20/dozzle/workflows/Test/badge.svg)
-
 # Dozzle - [dozzle.dev](https://dozzle.dev/)
 
-Dozzle is a simple, lightweight application that provides you with a web based interface to monitor your Docker container logs live. It doesn’t store log information, it is for live monitoring of your container logs only.
-
-While dozzle should work for most, it is not meant to be a full logging solution. For enterprise applications, products like [Loggly](https://www.loggly.com), [Papertrail](https://papertrailapp.com) or [Kibana](https://www.elastic.co/products/kibana) are more suited.
-
-Dozzle doesn't cost any money. Dozzle aims to stay simple, small and free.
+Dozzle is a small lightweight application with a web based interface to monitor Docker logs. It doesn’t store any log files. It is for live monitoring of your container logs only.
 
 ![Image](https://github.com/amir20/dozzle/blob/master/.github/demo.gif?raw=true)
 
-## Getting dozzle
+[![Go Report Card](https://goreportcard.com/badge/github.com/amir20/dozzle)](https://goreportcard.com/report/github.com/amir20/dozzle)
+[![Docker Pulls](https://img.shields.io/docker/pulls/amir20/dozzle.svg)](https://hub.docker.com/r/amir20/dozzle/)
+[![Docker Version](https://img.shields.io/docker/v/amir20/dozzle?sort=semver)](https://hub.docker.com/r/amir20/dozzle/)
+![Test](https://github.com/amir20/dozzle/workflows/Test/badge.svg)
+
+## Features
+
+- Intelligent fuzzy search for container names 🤖
+- Search logs using regex 🔦
+- Small memory footprint 🏎
+- Split screen for viewing multiple logs
+- Download logs easy
+- Live stats with memory and CPU usage
+- Authentication with username and password 🚨
+
+Dozzle should work for most. It has been tested with hundreds of containers. However, it doesn't support offline searching. Products like [Loggly](https://www.loggly.com), [Papertrail](https://papertrailapp.com) or [Kibana](https://www.elastic.co/products/kibana) are more suited for full search capabilities.
+
+Dozzle doesn't cost any money and aims to focus on real-time debugging.
+
+## Getting Dozzle
 
 Dozzle is a very small Docker container (4 MB compressed). Pull the latest release from the index:
 
     $ docker pull amir20/dozzle:latest
 
-## Using dozzle
+## Using Dozzle
 
 The simplest way to use dozzle is to run the docker container. Also, mount the Docker Unix socket with `--volume` to `/var/run/docker.sock`:
 
     $ docker run --name dozzle -d --volume=/var/run/docker.sock:/var/run/docker.sock -p 8888:8080 amir20/dozzle:latest
 
-dozzle will be available at [http://localhost:8888/](http://localhost:8888/). You can change `-p 8888:8080` to any port. For example, if you want to view dozzle over port 4040 then you would do `-p 4040:8080`.
+Dozzle will be available at [http://localhost:8888/](http://localhost:8888/). You can change `-p 8888:8080` to any port. For example, if you want to view dozzle over port 4040 then you would do `-p 4040:8080`.
 
 ### With Docker swarm
 
@@ -51,7 +60,7 @@ dozzle will be available at [http://localhost:8888/](http://localhost:8888/). Yo
 
 #### Security
 
-dozzle doesn't support authentication out of the box. You can control the device dozzle binds to by passing `--addr` parameter. For example,
+You can control the device Dozzle binds to by passing `--addr` parameter. For example,
 
     $ docker run --volume=/var/run/docker.sock:/var/run/docker.sock -p 8888:1224 amir20/dozzle:latest --addr localhost:1224
 
@@ -61,52 +70,58 @@ If you wish to restrict the containers shown you can pass the `--filter` paramet
 
     $ docker run --volume=/var/run/docker.sock:/var/run/docker.sock -p 8888:1224 amir20/dozzle:latest --filter name=foo
 
-this would then only allow you to view containers with a name starting with "foo". You can use other filters like `status` as well, please check the official docker [command line docs](https://docs.docker.com/engine/reference/commandline/ps/#filtering) for available filters.
+this would then only allow you to view containers with a name starting with "foo". You can use other filters like `status` as well, please check the official docker [command line docs](https://docs.docker.com/engine/reference/commandline/ps/#filtering) for available filters. Multiple `--filter` arguments can be provided.
+
+#### Authentication
+
+Dozzle supports a very simple authentication out of the box with just username and password. You should deploy using SSL to keep the credentials safe. See configuration to use `--username` and `--password`.
 
 #### Changing base URL
 
-dozzle by default mounts to "/". If you want to control the base path you can use the `--base` option. For example, if you want to mount at "/foobar",
+Dozzle by default mounts to "/". If you want to control the base path you can use the `--base` option. For example, if you want to mount at "/foobar",
 then you can override by using `--base /foobar`. See env variables below for using `DOZZLE_BASE` to change this.
 
     $ docker run --volume=/var/run/docker.sock:/var/run/docker.sock -p 8080:8080 amir20/dozzle:latest --base /foobar
 
-dozzle will be available at [http://localhost:8080/foobar/](http://localhost:8080/foobar/).
+Dozzle will be available at [http://localhost:8080/foobar/](http://localhost:8080/foobar/).
+
+#### Analytics collected
+
+Dozzle collects anonymous user configurations using Google Analytics. Why? Dozzle is an open source project with no funding. As a result, there is no time to do user studies of Dozzle. Analytics is collected to prioritize features and fixes based on how people use Dozzle. This data is completely public and can be viewed live using [ Data Studio dashboard](https://datastudio.google.com/s/naeIu0MiWsY).
+
+If you do not want to be tracked at all, see the `--no-analytics` flag below.
 
 #### Environment variables and configuration
 
-Dozzle follows the [12-factor](https://12factor.net/) model. Configurations can use the CLI flags or enviroment variables. The table below outlines all supported options and their respective env vars.
+Dozzle follows the [12-factor](https://12factor.net/) model. Configurations can use the CLI flags or environment variables. The table below outlines all supported options and their respective env vars.
 
-| Flag         | Env Variable         | Default |
-| ------------ | -------------------- | ------- |
-| `--addr`     | `DOZZLE_ADDR`        | `:8080` |
-| `--base`     | `DOZZLE_BASE`        | `/`     |
-| `--level`    | `DOZZLE_LEVEL`       | `info`  |
-| `--showAll`  | `DOZZLE_SHOWALL`     | `false` |
-| n/a          | `DOCKER_API_VERSION` | not set |
-| `--tailSize` | `DOZZLE_TAILSIZE`    | `300`   |
-| `--filter`   | `DOZZLE_FILTER`      | `""`    |
+| Flag             | Env Variable          | Default |
+| ---------------- | --------------------- | ------- |
+| `--addr`         | `DOZZLE_ADDR`         | `:8080` |
+| `--base`         | `DOZZLE_BASE`         | `/`     |
+| `--level`        | `DOZZLE_LEVEL`        | `info`  |
+| n/a              | `DOCKER_API_VERSION`  | not set |
+| `--tailSize`     | `DOZZLE_TAILSIZE`     | `300`   |
+| `--filter`       | `DOZZLE_FILTER`       | `""`    |
+| `--username`     | `DOZZLE_USERNAME`     | `""`    |
+| `--password`     | `DOZZLE_PASSWORD`     | `""`    |
+| `--key`          | `DOZZLE_KEY`          | `""`    |
+| `--no-analytics` | `DOZZLE_NO_ANALYTICS` | false   |
 
-## Troubleshooting
+Note: When using username and password `DOZZLE_KEY` is required for session management.
 
-### Nginx Config
+## Troubleshooting and FAQs
 
-If you are using nginx as a reverse proxy, then you need to configure `/api` to enable server-sent events.
+<details>
+ <summary>I installed Dozzle, but logs are slow or they never load. Help!</summary>
 
-Below is an example configuration using SSL and `proxy_pass` with correct settings.
+Dozzle uses Server Sent Events (SSE) which connects to a server using a HTTP stream without closing the connection. If any proxy tries to buffer this connection, then Dozzle never receives the data and hangs forever waiting for the reverse proxy to flush the buffer. Since version `1.23.0`, Dozzle sends the `X-Accel-Buffering: no` header which should stop reverse proxies buffering. However, some proxies may ignore this header. In those cases, you need to explicitly disable any buffering.
+
+Below is an example with nginx and using `proxy_pass` to disable buffering.
 
 ```
     server {
-        listen                          80;
-        server_name                     <example.com>;
-        return                          301 https://<example.com>$request_uri;
-    }
-
-    server {
-        listen                          443 ssl http2;
-        server_name                     <example.com>;
-
-        ssl_certificate                 </path/to/your/certificate>;
-        ssl_certificate_key             </path/to/your/key>;
+        ...
 
         location / {
             proxy_pass                  http://<dozzle.container.ip.address>:8080;
@@ -115,17 +130,36 @@ Below is an example configuration using SSL and `proxy_pass` with correct settin
         location /api {
             proxy_pass                  http://<dozzle.container.ip.address>:8080;
 
-            proxy_http_version          1.1;
-            proxy_set_header            Connection "";
             proxy_buffering             off;
             proxy_cache                 off;
-
-            chunked_transfer_encoding   off;
         }
     }
 
 ```
 
+</details>
+
+<details>
+ <summary>What data does Dozzle collect?</summary>
+
+Dozzle does collect some analytics. Analytics is anonymous usage tracking of the features which are used the most. See the section above on how to disable any analytic collection.
+
+In the browser, Dozzle has a [strict](https://github.com/amir20/dozzle/blob/master/web/csp.go#L9) Content Security Policy which only allows the following policies:
+
+- Allow connect to `api.github.com` to fetch most recent version.
+- Only allow `<script>` and `<style>` files from `self`
+
+Dozzle opens all links with `rel="noopener"`.
+
+</details>
+
+<details>
+ <summary>We have tools that uses Dozzle when a new container is created. How can I get a direct link to a container by name?</summary>
+
+Dozzle has a [special route](https://github.com/amir20/dozzle/blob/master/assets/pages/Show.vue) that can be used to search containers by name and then forward to that container. For example, if you have a container with name `"foo.bar"` and id `abc123`, you can send your users to `/show?name=foo.bar` which will be forwarded to `/container/abc123`.
+
+</details>
+
 ## License
 
 [MIT](LICENSE)
@@ -136,8 +170,6 @@ To Build and test locally:
 
 1. Install NodeJs.
 2. Install Go.
-3. Globally install [packr utility](https://github.com/gobuffalo/packr) with `go get -u github.com/gobuffalo/packr/packr` outside of dozzle directory.
-4. Install [reflex](https://github.com/cespare/reflex) with `get -u github.com/cespare/reflex` outside of dozzle.
-5. Install node modules with `npm install`.
-6. Do `npm start`
-
+3. Install [reflex](https://github.com/cespare/reflex) with `get -u github.com/cespare/reflex` outside of dozzle.
+4. Install node modules with `pnpm`.
+5. Do `pnpm dev`

__snapshots__/dozzle.snapshot

@@ -1,88 +0,0 @@
-/* snapshot: Test_createRoutes_foobar */
-HTTP/1.1 200 OK
-Connection: close
-Content-Type: text/plain; charset=utf-8
-
-foo page
-
-/* snapshot: Test_createRoutes_index */
-HTTP/1.1 200 OK
-Connection: close
-Content-Type: text/plain; charset=utf-8
-
-index page
-
-/* snapshot: Test_createRoutes_redirect */
-HTTP/1.1 301 Moved Permanently
-Connection: close
-Content-Type: text/html; charset=utf-8
-Location: /foobar/
-
-<a href="/foobar/">Moved Permanently</a>.
-
-/* snapshot: Test_createRoutes_version */
-HTTP/1.1 200 OK
-Connection: close
-Content-Type: text/plain; charset=utf-8
-
-dev
-
-/* snapshot: Test_handler_listContainers_happy */
-HTTP/1.1 200 OK
-Connection: close
-Content-Type: text/plain; charset=utf-8
-
-[{"id":"1234567890","names":null,"name":"test","image":"image","imageId":"image_id","command":"command","created":0,"state":"state","status":"status"}]
-
-/* snapshot: Test_handler_streamEvents_error */
-HTTP/1.1 200 OK
-Connection: close
-Cache-Control: no-cache
-Connection: keep-alive
-Content-Type: text/event-stream
-X-Accel-Buffering: no
-
-/* snapshot: Test_handler_streamEvents_error_request */
-HTTP/1.1 200 OK
-Connection: close
-Cache-Control: no-cache
-Connection: keep-alive
-Content-Type: text/event-stream
-X-Accel-Buffering: no
-
-/* snapshot: Test_handler_streamEvents_happy */
-HTTP/1.1 200 OK
-Connection: close
-Cache-Control: no-cache
-Connection: keep-alive
-Content-Type: text/event-stream
-X-Accel-Buffering: no
-
-event: containers-changed
-data: start
-
-/* snapshot: Test_handler_streamLogs_error_finding_container */
-HTTP/1.1 500 Internal Server Error
-Connection: close
-Content-Type: text/plain; charset=utf-8
-X-Content-Type-Options: nosniff
-
-error finding container
-
-/* snapshot: Test_handler_streamLogs_error_reading */
-HTTP/1.1 200 OK
-Connection: close
-Cache-Control: no-cache
-Connection: keep-alive
-Content-Type: text/event-stream
-X-Accel-Buffering: no
-
-/* snapshot: Test_handler_streamLogs_happy */
-HTTP/1.1 200 OK
-Connection: close
-Cache-Control: no-cache
-Connection: keep-alive
-Content-Type: text/event-stream
-X-Accel-Buffering: no
-
-data: INFO Testing logs...

analytics/ga.go

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

analytics/types.go

@@ -0,0 +1,11 @@
+package analytics
+
+type StartEvent struct {
+	ClientId      string `json:"-"`
+	Version       string `json:"version"`
+	FilterLength  int    `json:"filterLength"`
+	CustomAddress bool   `json:"customAddress"`
+	CustomBase    bool   `json:"customBase"`
+	TailSize      int    `json:"tailSize"`
+	Protected     bool   `json:"protected"`
+}

assets/App.spec.js

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

assets/App.vue

@@ -1,126 +1,133 @@
-<template lang="html">
+<template>
   <main>
-    <mobile-menu v-if="isMobile"></mobile-menu>
+    <mobile-menu v-if="isMobile && !authorizationNeeded"></mobile-menu>
 
     <splitpanes @resized="onResized($event)">
-      <pane min-size="10" :size="settings.menuWidth" v-if="!isMobile && !collapseNav">
-        <side-menu></side-menu>
+      <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">
-            <search></search>
+          <pane class="has-min-height router-view">
             <router-view></router-view>
           </pane>
-          <pane v-for="other in activeContainers" :key="other.id" v-if="!isMobile">
-            <scrollable-view>
-              <template v-slot:header>
-                <container-title :value="other.name" closable @close="removeActiveContainer(other)"></container-title>
-              </template>
-              <log-viewer-with-source :id="other.id"></log-viewer-with-source>
-            </scrollable-view>
-          </pane>
+          <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-small is-rounded is-settings-control"
+      class="button is-rounded"
       :class="{ collapsed: collapseNav }"
       id="hide-nav"
-      v-if="!isMobile"
+      v-if="!isMobile && !authorizationNeeded"
     >
-      <span class="icon">
-        <icon :name="collapseNav ? 'chevron-right' : 'chevron-left'"></icon>
+      <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>
-import { mapActions, mapGetters, mapState } from "vuex";
+<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 LogViewerWithSource from "./components/LogViewerWithSource";
-import ScrollableView from "./components/ScrollableView";
-import SideMenu from "./components/SideMenu";
-import MobileMenu from "./components/MobileMenu";
-import Search from "./components/Search";
-import ContainerTitle from "./components/ContainerTitle";
-import Icon from "./components/Icon";
+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";
 
-export default {
-  name: "App",
-  components: {
-    Icon,
-    LogViewerWithSource,
-    SideMenu,
-    MobileMenu,
-    ScrollableView,
-    Splitpanes,
-    Pane,
-    Search,
-    ContainerTitle,
-  },
-  data() {
-    return {
-      title: "",
-      collapseNav: false,
-    };
-  },
-  metaInfo() {
-    return {
-      title: this.title,
-      titleTemplate: "%s - Dozzle",
-    };
-  },
-  async created() {
-    await this.fetchContainerList();
-    this.title = `${this.containers.length} containers`;
-  },
-  mounted() {
-    if (this.hasSmallerScrollbars) {
-      document.documentElement.classList.add("has-custom-scrollbars");
-    }
-    this.menuWidth = this.settings.menuWidth;
-  },
-  watch: {
-    hasSmallerScrollbars(newValue, oldValue) {
-      if (newValue) {
-        document.documentElement.classList.add("has-custom-scrollbars");
-      } else {
-        document.documentElement.classList.remove("has-custom-scrollbars");
-      }
-    },
-  },
-  computed: {
-    ...mapState(["containers", "activeContainers", "isMobile", "settings"]),
-    hasSmallerScrollbars() {
-      return this.settings.smallerScrollbars;
-    },
-  },
-  methods: {
-    ...mapActions({
-      fetchContainerList: "FETCH_CONTAINERS",
-      removeActiveContainer: "REMOVE_ACTIVE_CONTAINER",
-      updateSetting: "UPDATE_SETTING",
-    }),
-    onResized(e) {
-      if (e.length == 2) {
-        const menuWidth = e[0].size;
-        this.updateSetting({ menuWidth });
-      }
-    },
-  },
-};
+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");
+  }
+  if (lightTheme.value) {
+    document.documentElement.setAttribute("data-theme", "light");
+  }
+
+  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");
+  } else {
+    document.documentElement.classList.remove("has-custom-scrollbars");
+  }
+
+  if (lightTheme.value) {
+    document.documentElement.setAttribute("data-theme", "light");
+  } else {
+    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">
-::v-deep .splitpanes--vertical > .splitpanes__splitter {
+:deep(.splitpanes--vertical > .splitpanes__splitter) {
   min-width: 3px;
-  background: #666;
+  background: var(--border-color);
   &:hover {
-    background: rgb(255, 221, 87);
+    background: var(--border-hover-color);
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .router-view {
+    padding-top: 75px;
   }
 }
 

assets/__snapshots__/App.spec.js.snap

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

assets/components.d.ts

@@ -0,0 +1,37 @@
+// 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
+
+declare module 'vue' {
+  export interface GlobalComponents {
+    CarbonCaretDown: typeof import('~icons/carbon/caret-down')['default']
+    CilColumns: typeof import('~icons/cil/columns')['default']
+    ContainerStat: typeof import('./components/ContainerStat.vue')['default']
+    ContainerTitle: typeof import('./components/ContainerTitle.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']
+    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']
+  }
+}
+
+export { }

assets/components/ContainerStat.vue

@@ -0,0 +1,47 @@
+<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";
+
+defineProps({
+  stat: {
+    type: Object as PropType<ContainerStat>,
+    required: true,
+  },
+  state: String,
+});
+function formatBytes(bytes: number, decimals = 2) {
+  if (bytes === 0) return "0 Bytes";
+  const k = 1024;
+  const dm = decimals < 0 ? 0 : decimals;
+  const sizes = ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + " " + sizes[i];
+}
+</script>
+
+<style lang="scss" scoped>
+.has-spacer {
+  &::after {
+    content: " ";
+  }
+}
+</style>

assets/components/ContainerTitle.vue

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

assets/components/FuzzySearchModal.vue

@@ -0,0 +1,131 @@
+<template>
+  <div class="panel">
+    <o-autocomplete
+      ref="autocomplete"
+      v-model="query"
+      placeholder="Search containers using ⌘ + k or ctrl + k"
+      field="name"
+      open-on-focus
+      keep-first
+      expanded
+      :data="results"
+      @select="selected"
+    >
+      <template #default="props">
+        <div class="media">
+          <div class="media-left">
+            <span class="icon is-small" :class="props.option.state">
+              <octicon-container-24 />
+            </span>
+          </div>
+          <div class="media-content">
+            {{ props.option.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>
+          </div>
+        </div>
+      </template>
+    </o-autocomplete>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import fuzzysort from "fuzzysort";
+import { computed, nextTick, onMounted, ref } from "vue";
+import { useRouter } from "vue-router";
+import { useContainerStore } from "@/stores/container";
+import { storeToRefs } from "pinia";
+import { Container } from "@/types/Container";
+
+const props = defineProps({
+  maxResults: {
+    default: 20,
+    type: Number,
+  },
+});
+
+const emit = defineEmits(["close"]);
+
+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 }) => ({
+    name,
+    id,
+    created,
+    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 [...containers.value].sort((a, b) => b.created - a.created);
+  }
+});
+
+onMounted(() => nextTick(() => autocomplete.value?.focus()));
+
+function selected(item: { id: string; name: string }) {
+  router.push({ name: "container", params: { id: item.id, name: item.name } });
+  emit("close");
+}
+function addColumn(container: Container) {
+  store.appendActiveContainer(container);
+  emit("close");
+}
+</script>
+
+<style lang="scss" scoped>
+.panel {
+  min-height: 400px;
+  width: 580px;
+}
+
+.running {
+  color: var(--primary-color);
+}
+
+.exited {
+  color: var(--scheme-main-ter);
+}
+
+.column-icon {
+  &:hover {
+    color: var(--secondary-color);
+  }
+}
+
+:deep(a.dropdown-item) {
+  padding-right: 1em;
+  .media-right {
+    visibility: hidden;
+  }
+  &:hover .media-right {
+    visibility: visible;
+  }
+}
+
+.icon {
+  vertical-align: middle;
+}
+</style>

assets/components/Icon.vue

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

assets/components/InfiniteLoader.vue

@@ -1,37 +1,75 @@
-<template lang="html">
-  <div ref="observer" class="control" :class="{ 'is-loading': isLoading }"></div>
+<template>
+  <div ref="root" class="infinte-loader">
+    <div class="spinner" v-show="isLoading">
+      <div class="bounce1"></div>
+      <div class="bounce2"></div>
+      <div class="bounce3"></div>
+    </div>
+  </div>
 </template>
 
-<script>
-export default {
-  name: "InfiniteLoader",
-  data() {
-    return {
-      isLoading: false,
-    };
-  },
-  props: {
-    onLoadMore: Function,
-    enabled: Boolean,
-  },
-  mounted() {
-    const intersectionObserver = new IntersectionObserver(
-      async (entries) => {
-        if (entries[0].intersectionRatio <= 0) return;
-        if (this.onLoadMore && this.enabled) {
-          const scrollingParent = this.$el.closest("[data-scrolling]") || document.documentElement;
-          const previousHeight = scrollingParent.scrollHeight;
-          this.isLoading = true;
-          await this.onLoadMore();
-          this.isLoading = false;
-          this.$nextTick(() => (scrollingParent.scrollTop += scrollingParent.scrollHeight - previousHeight));
-        }
-      },
-      { threshholds: 1 }
-    );
+<script lang="ts" setup>
+import { ref, onMounted, onUnmounted, nextTick } from "vue";
 
-    intersectionObserver.observe(this.$refs.observer);
-  },
-};
+const props = defineProps({
+  onLoadMore: Function,
+  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;
+    const previousHeight = scrollingParent.scrollHeight;
+    isLoading.value = true;
+    await props.onLoadMore();
+    isLoading.value = false;
+    await nextTick();
+    scrollingParent.scrollTop += scrollingParent.scrollHeight - previousHeight;
+  }
+});
+
+onMounted(() => observer.observe(root.value));
+onUnmounted(() => observer.disconnect());
 </script>
-<style scoped lang="scss"></style>
+
+<style scoped lang="scss">
+.infinte-loader {
+  min-height: 1px;
+}
+.spinner {
+  margin: 10px auto 0;
+  width: 70px;
+  text-align: center;
+
+  & > div {
+    width: 12px;
+    height: 12px;
+    background-color: var(--primary-color);
+    border-radius: 100%;
+    display: inline-block;
+    animation: sk-bouncedelay 0.8s infinite ease-in-out both;
+  }
+  & .bounce1 {
+    animation-delay: -0.32s;
+  }
+
+  & .bounce2 {
+    animation-delay: -0.16s;
+  }
+}
+
+@keyframes sk-bouncedelay {
+  0%,
+  80%,
+  100% {
+    transform: scale(0);
+  }
+  40% {
+    transform: scale(1);
+  }
+}
+</style>

assets/components/LogActionsToolbar.vue

@@ -0,0 +1,120 @@
+<template>
+  <div class="dropdown is-right is-hoverable">
+    <div class="dropdown-trigger">
+      <button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
+        <span class="icon">
+          <mdi-dots-vertical />
+        </span>
+      </button>
+    </div>
+    <div class="dropdown-menu" id="dropdown-menu" role="menu">
+      <div class="dropdown-content">
+        <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>
+      </div>
+    </div>
+  </div>
+</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);
+  }
+}
+
+.toolbar {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 200px;
+  background-color: var(--action-toolbar-background-color);
+  border-radius: 8em;
+  margin-top: 0.5em;
+
+  & > div {
+    margin: 0 2em;
+    padding: 0.5em 0;
+  }
+
+  .button {
+    background-color: rgba(0, 0, 0, 0) !important;
+
+    &.is-small {
+      font-size: 0.65rem;
+    }
+  }
+}
+</style>

assets/components/LogContainer.vue

@@ -0,0 +1,76 @@
+<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.js

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

assets/components/LogEventSource.spec.ts

@@ -0,0 +1,248 @@
+import { mount } from "@vue/test-utils";
+import { createTestingPinia } from "@pinia/testing";
+// @ts-ignore
+import EventSource, { sources } from "eventsourcemock";
+import debounce from "lodash.debounce";
+import LogEventSource from "./LogEventSource.vue";
+import LogViewer from "./LogViewer.vue";
+import { settings } from "../composables/settings";
+import { useSearchFilter } from "@/composables/search";
+import { mocked } from "ts-jest/utils";
+import { computed, Ref } from "vue";
+
+jest.mock("lodash.debounce", () =>
+  jest.fn((fn) => {
+    fn.cancel = () => {};
+    return fn;
+  })
+);
+
+jest.mock("@/stores/container", () => ({
+  __esModule: true,
+  useContainerStore() {
+    return {
+      currentContainer(id: Ref<string>) {
+        return computed(() => ({ id: id.value }));
+      },
+    };
+  },
+}));
+
+jest.mock("@/stores/config", () => ({ base: "" }));
+
+describe("<LogEventSource />", () => {
+  const search = useSearchFilter();
+
+  beforeEach(() => {
+    // @ts-ignore
+    global.EventSource = EventSource;
+    window.scrollTo = jest.fn();
+    global.IntersectionObserver = jest.fn().mockImplementation(() => ({
+      observe: jest.fn(),
+      disconnect: jest.fn(),
+    }));
+
+    mocked(debounce).mockClear();
+    jest.resetModules();
+  });
+
+  function createLogEventSource(
+    {
+      searchFilter = undefined,
+      hourStyle = "auto",
+    }: { searchFilter?: string | undefined; hourStyle?: "auto" | "24" | "12" } = {
+      hourStyle: "auto",
+    }
+  ) {
+    settings.value.hourStyle = hourStyle;
+    search.searchFilter.value = searchFilter;
+    return mount(LogEventSource, {
+      global: {
+        plugins: [createTestingPinia()],
+        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).toMatchInlineSnapshot(`
+      Object {
+        "date": 2019-06-12T10:55:42.459Z,
+        "message": "\\"This is a message.\\"",
+      }
+    `);
+  });
+
+  test("should parse messages with loki's timestamp format", async () => {
+    const wrapper = createLogEventSource();
+    sources["/api/logs/stream?id=abc&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).toMatchInlineSnapshot(`
+      Object {
+        "date": 2020-04-27T10:35:43.272Z,
+        "message": "xxxxx",
+      }
+    `);
+  });
+
+  test("should pass messages to slot", async () => {
+    const wrapper = createLogEventSource();
+    sources["/api/logs/stream?id=abc&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).toMatchInlineSnapshot(`
+      Object {
+        "date": 2019-06-12T10:55:42.459Z,
+        "message": "\\"This is a message.\\"",
+      }
+    `);
+  });
+
+  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()).toMatchInlineSnapshot(
+        `"<ul class=\\"events medium\\"><li><span class=\\"date\\"><time datetime=\\"2019-06-12T10:55:42.459Z\\">today at 10:55:42 AM</time></span><span class=\\"text\\">\\"This is a message.\\"</span></li></ul>"`
+      );
+    });
+
+    test("should render messages with color", async () => {
+      const wrapper = createLogEventSource();
+      sources["/api/logs/stream?id=abc&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()).toMatchInlineSnapshot(
+        `"<ul class=\\"events medium\\"><li><span class=\\"date\\"><time datetime=\\"2019-06-12T10:55:42.459Z\\">today at 10:55:42 AM</time></span><span class=\\"text\\"><span style=\\"color:#000\\">black<span style=\\"color:#AAA\\">white</span></span></span></li></ul>"`
+      );
+    });
+
+    test("should render messages with html entities", async () => {
+      const wrapper = createLogEventSource();
+      sources["/api/logs/stream?id=abc&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()).toMatchInlineSnapshot(
+        `"<ul class=\\"events medium\\"><li><span class=\\"date\\"><time datetime=\\"2019-06-12T10:55:42.459Z\\">today at 10:55:42 AM</time></span><span class=\\"text\\">&lt;test&gt;foo bar&lt;/test&gt;</span></li></ul>"`
+      );
+    });
+
+    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()).toMatchInlineSnapshot(
+        `"<ul class=\\"events medium\\"><li><span class=\\"date\\"><time datetime=\\"2019-06-12T23:55:42.459Z\\">today at 11:55:42 PM</time></span><span class=\\"text\\">&lt;test&gt;foo bar&lt;/test&gt;</span></li></ul>"`
+      );
+    });
+
+    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()).toMatchInlineSnapshot(
+        `"<ul class=\\"events medium\\"><li><span class=\\"date\\"><time datetime=\\"2019-06-12T23:55:42.459Z\\">today at 23:55:42</time></span><span class=\\"text\\">&lt;test&gt;foo bar&lt;/test&gt;</span></li></ul>"`
+      );
+    });
+
+    test("should render messages with filter", async () => {
+      const wrapper = createLogEventSource({ 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()).toMatchInlineSnapshot(
+        `"<ul class=\\"events medium\\"><li><span class=\\"date\\"><time datetime=\\"2019-06-12T10:55:42.459Z\\">today at 10:55:42 AM</time></span><span class=\\"text\\">This is a <mark>test</mark> &lt;hi&gt;&lt;/hi&gt;</span></li></ul>"`
+      );
+    });
+  });
+});

assets/components/LogEventSource.vue

@@ -1,89 +1,133 @@
-<template lang="html">
-  <div>
-    <infinite-loader :onLoadMore="loadOlderLogs" :enabled="messages.length > 100"></infinite-loader>
-    <slot :messages="messages"></slot>
-  </div>
+<template>
+  <infinite-loader :onLoadMore="loadOlderLogs" :enabled="messages.length > 100"></infinite-loader>
+  <slot :messages="messages"></slot>
 </template>
 
-<script>
+<script lang="ts" setup>
+import { toRefs, ref, watch, onUnmounted } from "vue";
 import debounce from "lodash.debounce";
-import InfiniteLoader from "./InfiniteLoader";
 
-export default {
-  props: ["id"],
-  name: "LogEventSource",
-  components: {
-    InfiniteLoader,
-  },
-  data() {
-    return {
-      messages: [],
-      buffer: [],
-    };
-  },
-  created() {
-    this.es = null;
-    this.loadLogs(this.id);
-  },
-  methods: {
-    loadLogs(id) {
-      if (this.es) {
-        this.es.close();
-        this.messages = [];
-        this.buffer = [];
-        this.es = null;
-      }
-      this.es = new EventSource(`${BASE_PATH}/api/logs/stream?id=${this.id}`);
-      const flushBuffer = debounce(
-        () => {
-          this.messages.push(...this.buffer);
-          this.buffer = [];
-        },
-        250,
-        { maxWait: 1000 }
-      );
-      this.es.onmessage = (e) => {
-        this.buffer.push(this.parseMessage(e.data));
-        flushBuffer();
-      };
-      this.es.onerror = (e) => console.log("EventSource failed." + e);
-      this.$once("hook:beforeDestroy", () => this.es.close());
-    },
-    async loadOlderLogs() {
-      if (this.messages.length < 300) return;
+import { LogEntry } from "@/types/LogEntry";
+import InfiniteLoader from "./InfiniteLoader.vue";
+import config from "@/stores/config";
+import { useContainerStore } from "@/stores/container";
 
-      const to = this.messages[0].date;
-      const last = this.messages[299].date;
-      const delta = to - last;
-      const from = new Date(to.getTime() + delta);
-      const logs = await (
-        await fetch(`/api/logs?id=${this.id}&from=${from.toISOString()}&to=${to.toISOString()}`)
-      ).text();
-      if (logs) {
-        const newMessages = logs
-          .trim()
-          .split("\n")
-          .map((line) => this.parseMessage(line));
-        this.messages.unshift(...newMessages);
-      }
-    },
-    parseMessage(data) {
-      let i = data.indexOf(" ");
-      if (i == -1) {
-        i = data.length;
-      }
-      const key = data.substring(0, i);
-      const date = new Date(key);
-      const message = data.substring(i).trim();
-      return { key, date, message };
-    },
+const props = defineProps({
+  id: {
+    type: String,
+    required: true,
   },
-  watch: {
-    id(newValue, oldValue) {
-      if (oldValue !== newValue) {
-        this.loadLogs(newValue);
-      }
-    },
-  },
-};
+});
+
+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,69 +1,38 @@
-<template lang="html">
-  <ul class="events" :class="settings.size">
-    <li v-for="item in filtered" :key="item.key">
-      <span class="date" v-if="settings.showTimestamp">{{ item.date | relativeTime }}</span>
+<template>
+  <ul class="events" :class="size">
+    <li v-for="item in filtered" :key="item.key" :data-event="item.event">
+      <span class="date" v-if="showTimestamp"> <relative-time :date="item.date"></relative-time></span>
       <span class="text" v-html="colorize(item.message)"></span>
     </li>
   </ul>
 </template>
 
-<script>
-import { mapActions, mapGetters, mapState } from "vuex";
-import { formatRelative } from "date-fns";
+<script lang="ts" setup>
+import { PropType, toRefs } from "vue";
+
+import { size, showTimestamp } 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 });
-
-export default {
-  props: ["messages"],
-  name: "LogViewer",
-  components: {},
-  data() {
-    return {
-      showSearch: false,
-    };
-  },
-  methods: {
-    colorize: function (value) {
-      return ansiConvertor.toHtml(value).replace("&lt;mark&gt;", "<mark>").replace("&lt;/mark&gt;", "</mark>");
-    },
-  },
-  computed: {
-    ...mapState(["searchFilter", "settings"]),
-    filtered() {
-      const { searchFilter, messages } = this;
-      if (searchFilter) {
-        const isSmartCase = searchFilter === searchFilter.toLowerCase();
-        try {
-          const regex = isSmartCase ? new RegExp(searchFilter, "i") : new RegExp(searchFilter);
-          return messages
-            .filter((d) => d.message.match(regex))
-            .map((d) => ({
-              ...d,
-              message: d.message.replace(regex, "<mark>$&</mark>"),
-            }));
-        } catch (e) {
-          if (e instanceof SyntaxError) {
-            console.info(`Ignoring SytaxError from search.`, e);
-            return messages;
-          }
-          throw e;
-        }
-      }
-      return messages;
-    },
-  },
-  filters: {
-    relativeTime(date) {
-      return formatRelative(date, new Date());
-    },
-  },
-};
+const colorize = (value: string) =>
+  ansiConvertor.toHtml(value).replace("&lt;mark&gt;", "<mark>").replace("&lt;/mark&gt;", "</mark>");
+const { messages } = toRefs(props);
+const filtered = useSearchFilter().filteredMessages(messages);
 </script>
 <style scoped lang="scss">
 .events {
-  padding: 10px;
-  font-family: "Roboto Mono", monaco, monospace;
+  padding: 1em;
+  font-family: SFMono-Regular, Consolas, Liberation Mono, monaco, Menlo, monospace;
 
   & > li {
     word-wrap: break-word;
@@ -72,6 +41,12 @@ export default {
       scroll-snap-align: end;
       scroll-margin-block-end: 5rem;
     }
+    &[data-event="container-stopped"] {
+      color: #f14668;
+    }
+    &[data-event="container-started"] {
+      color: hsl(141, 53%, 53%);
+    }
   }
 
   &.small {
@@ -90,16 +65,26 @@ export default {
 .date {
   background-color: #262626;
   color: #258ccd;
+
+  [data-theme="light"] & {
+    background-color: #f0f0f0;
+    color: #009900;
+    padding-left: 5px;
+    padding-right: 5px;
+  }
 }
 
 .text {
   white-space: pre-wrap;
+  &::before {
+    content: " ";
+  }
 }
 
-::v-deep mark {
+:deep(mark) {
   border-radius: 2px;
-  background-color: #ffdd57;
-  animation: pops 0.2s ease-out;
+  background-color: var(--secondary-color);
+  animation: pops 200ms ease-out;
   display: inline-block;
 }
 

assets/components/LogViewerWithSource.vue

@@ -1,19 +1,26 @@
-<template lang="html">
-  <log-event-source :id="id" v-slot="eventSource">
-    <log-viewer :messages="eventSource.messages"></log-viewer>
+<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>
-import LogEventSource from "./LogEventSource";
-import LogViewer from "./LogViewer";
-
-export default {
-  props: ["id"],
-  name: "LogViewerWithSource",
-  components: {
-    LogEventSource,
-    LogViewer,
+<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,23 +1,38 @@
-<template lang="html">
+<template>
   <aside>
-    <a
-      role="button"
-      class="navbar-burger burger is-white is-hidden-tablet is-pulled-right"
-      @click="showNav = !showNav"
-      :class="{ 'is-active': showNav }"
-    >
-      <span></span> <span></span> <span></span>
-    </a>
-    <h1 class="title has-text-warning is-marginless">Dozzle</h1>
+    <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 containers">
+      <li v-for="item in visibleContainers" :key="item.id">
         <router-link
           :to="{ name: 'container', params: { id: item.id, name: item.name } }"
           active-class="is-active"
           :title="item.name"
         >
-          <div class="hide-overflow">
+          <div class="is-ellipsis">
             {{ item.name }}
           </div>
         </router-link>
@@ -26,55 +41,43 @@
   </aside>
 </template>
 
-<script>
-import { mapActions, mapGetters, mapState } from "vuex";
+<script lang="ts" setup>
+import { ref, watch } from "vue";
+import { useContainerStore } from "@/stores/container";
+import { storeToRefs } from "pinia";
+import { useRoute } from "vue-router";
 
-export default {
-  props: [],
-  name: "MobileMenu",
-  data() {
-    return {
-      showNav: false,
-    };
-  },
+const store = useContainerStore();
+const route = useRoute();
+const { visibleContainers, allContainersById } = storeToRefs(store);
 
-  computed: {
-    ...mapState(["containers"]),
-    ...mapGetters(["activeContainersById"]),
-  },
-  methods: {
-    ...mapActions({}),
-  },
-  watch: {
-    $route(to, from) {
-      this.showNav = false;
-    },
-  },
-};
+const showNav = ref(false);
+
+watch(route, () => {
+  showNav.value = false;
+});
 </script>
 <style scoped lang="scss">
 aside {
   padding: 1em;
   position: fixed;
-  top: 0;
   left: 0;
   right: 0;
-  background: #222;
-  z-index: 2;
+  background: var(--scheme-main-ter);
+  z-index: 10;
   max-height: 100vh;
   overflow: auto;
 
   .menu-label {
     margin-top: 1em;
   }
-  .hide-overflow {
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow: hidden;
+
+  .title {
+    text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2);
   }
 
-  .burger.is-white {
-    color: #fff;
+  .burger {
+    color: var(--body-color);
   }
 
   .is-hidden-mobile.is-active {
@@ -84,5 +87,15 @@ aside {
   .navbar-burger {
     height: 2.35rem;
   }
+
+  .logo {
+    width: 82px;
+    height: 36px;
+    fill: var(--logo-color);
+  }
+
+  .column.push-right {
+    margin-left: auto;
+  }
 }
 </style>

assets/components/PastTime.vue

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

assets/components/RelativeTime.vue

@@ -0,0 +1,48 @@
+<template>
+  <time :datetime="date.toISOString()">{{ relativeTime(date, locale) }}</time>
+</template>
+
+<script lang="ts">
+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";
+
+const use24Hr =
+  new Intl.DateTimeFormat(undefined, {
+    hour: "numeric",
+  })
+    .formatToParts(new Date(2020, 0, 1, 13))
+    .find((part) => part.type === "hour").value.length === 2;
+
+const auto = use24Hr ? enGB : enUS;
+const styles = { auto, 12: enUS, 24: enGB };
+
+export default {
+  props: {
+    date: {
+      required: true,
+      type: Date,
+    },
+  },
+  name: "RelativeTime",
+  components: {},
+  computed: {
+    locale() {
+      const locale = styles[hourStyle.value];
+      const oldFormatter = locale.formatRelative;
+      return {
+        ...locale,
+        formatRelative(token) {
+          return oldFormatter(token) + "p";
+        },
+      };
+    },
+  },
+  methods: {
+    relativeTime(date, locale) {
+      return formatRelative(date, new Date(), { locale });
+    },
+  },
+};
+</script>

assets/components/ScrollProgress.vue

@@ -0,0 +1,143 @@
+<template>
+  <div class="scroll-progress" ref="root">
+    <svg width="100" height="100" viewBox="0 0 100 100" :class="{ indeterminate }">
+      <circle r="44" cx="50" cy="50" :style="{ '--progress': scrollProgress }" />
+    </svg>
+    <div class="is-overlay columns is-vcentered is-centered has-text-weight-light">
+      <template v-if="indeterminate">
+        <div class="column is-narrow is-paddingless is-size-2">&#8734;</div>
+      </template>
+      <template v-else>
+        <span class="column is-narrow is-paddingless is-size-2">
+          {{ Math.ceil(scrollProgress * 100) }}
+        </span>
+        <span class="column is-narrow is-paddingless"> % </span>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useContainerStore } from "@/stores/container";
+import throttle from "lodash.throttle";
+import { storeToRefs } from "pinia";
+import { onMounted, onUnmounted, ref, watchPostEffect } from "vue";
+
+const props = defineProps({
+  indeterminate: {
+    default: false,
+    type: Boolean,
+  },
+  autoHide: {
+    default: true,
+    type: Boolean,
+  },
+});
+
+const scrollProgress = ref(0);
+const animation = ref({ cancel: () => {} });
+const parentElement = ref<Node>(document);
+const root = ref<HTMLElement>();
+const store = useContainerStore();
+const { activeContainers } = storeToRefs(store);
+const onScrollThrottled = throttle(onScroll, 150);
+
+function onScroll() {
+  const parent = parentElement.value == document ? document.documentElement : (parentElement.value as HTMLElement);
+  scrollProgress.value = parent.scrollTop / (parent.scrollHeight - parent.clientHeight);
+  animation.value.cancel();
+  if (props.autoHide && root.value) {
+    animation.value = root.value.animate(
+      { opacity: [1, 0] },
+      {
+        duration: 500,
+        delay: 2000,
+        fill: "both",
+        easing: "ease-out",
+      }
+    );
+  }
+}
+
+function attachEvents() {
+  parentElement.value = root.value?.closest("[data-scrolling]") || document;
+  parentElement.value.addEventListener("scroll", onScrollThrottled);
+}
+
+function detachEvents() {
+  parentElement.value.removeEventListener("scroll", onScrollThrottled);
+}
+
+onMounted(() => {
+  attachEvents();
+});
+
+onUnmounted(() => {
+  detachEvents();
+});
+
+watchPostEffect(() => {
+  activeContainers.value.length;
+  detachEvents();
+  attachEvents();
+});
+</script>
+<style scoped lang="scss">
+.scroll-progress {
+  display: inline-block;
+  position: relative;
+  pointer-events: none;
+
+  svg {
+    filter: drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.2));
+    margin-top: 5px;
+    &.indeterminate {
+      animation: 2s linear infinite svg-animation;
+
+      circle {
+        animation: 1.4s ease-in-out infinite both circle-animation;
+      }
+    }
+    circle {
+      fill: var(--scheme-main-ter);
+      fill-opacity: 0.8;
+      transition: stroke-dashoffset 250ms ease-out;
+      transform: rotate(-90deg);
+      transform-origin: 50% 50%;
+      stroke: var(--primary-color);
+      stroke-dashoffset: calc(276.32px - var(--progress) * 276.32px);
+      stroke-dasharray: 276.32px 276.32px;
+      stroke-linecap: round;
+      stroke-width: 3;
+      will-change: stroke-dashoffset;
+    }
+  }
+}
+
+@keyframes svg-animation {
+  0% {
+    transform: rotateZ(0deg);
+  }
+  100% {
+    transform: rotateZ(360deg);
+  }
+}
+
+@keyframes circle-animation {
+  0%,
+  25% {
+    stroke-dashoffset: 275px;
+    transform: rotate(0);
+  }
+  50%,
+  75% {
+    stroke-dashoffset: 70px;
+    transform: rotate(45deg);
+  }
+
+  100% {
+    stroke-dashoffset: 275px;
+    transform: rotate(360deg);
+  }
+}
+</style>

assets/components/ScrollableView.vue

@@ -1,30 +1,27 @@
-<template lang="html">
+<template>
   <section :class="{ 'is-full-height-scrollable': scrollable }">
     <header v-if="$slots.header">
       <slot name="header"></slot>
     </header>
-    <main ref="content" :data-scrolling="scrollable">
-      <slot></slot>
-      <div ref="scrollObserver"></div>
+    <main ref="content" :data-scrolling="scrollable ? true : undefined">
+      <div class="is-scrollbar-progress is-hidden-mobile">
+        <scroll-progress v-show="paused" :indeterminate="loading" :auto-hide="!loading"></scroll-progress>
+      </div>
+      <slot :setLoading="setLoading"></slot>
+      <div ref="scrollObserver" class="is-scroll-observer"></div>
     </main>
-    <div class="scroll-bar-notification">
+
+    <div class="is-scrollbar-notification">
       <transition name="fade">
-        <button
-          class="button"
-          :class="hasMore ? 'is-warning' : 'is-primary'"
-          @click="scrollToBottom('instant')"
-          v-show="paused"
-        >
-          <icon name="download"></icon>
+        <button class="button" :class="hasMore ? 'has-more' : ''" @click="scrollToBottom('instant')" v-show="paused">
+          <mdi-light-chevron-double-down />
         </button>
       </transition>
     </div>
   </section>
 </template>
 
-<script>
-import Icon from "./Icon";
-
+<script lang="ts">
 export default {
   props: {
     scrollable: {
@@ -32,39 +29,51 @@ export default {
       default: true,
     },
   },
-  components: {
-    Icon,
-  },
+
   name: "ScrollableView",
   data() {
     return {
       paused: false,
       hasMore: false,
+      loading: false,
+      mutationObserver: null,
+      intersectionObserver: null,
     };
   },
   mounted() {
     const { content } = this.$refs;
-    new MutationObserver((e) => {
+    this.mutationObserver = new MutationObserver((e) => {
       if (!this.paused) {
         this.scrollToBottom("instant");
       } else {
-        this.hasMore = true;
+        const record = e[e.length - 1];
+        if (
+          record.target.children[record.target.children.length - 1] == record.addedNodes[record.addedNodes.length - 1]
+        ) {
+          this.hasMore = true;
+        }
       }
-    }).observe(content, { childList: true, subtree: true });
+    });
+    this.mutationObserver.observe(content, { childList: true, subtree: true });
 
-    const intersectionObserver = new IntersectionObserver(
+    this.intersectionObserver = new IntersectionObserver(
       (entries) => (this.paused = entries[0].intersectionRatio == 0),
       { threshholds: [0, 1], rootMargin: "80px 0px" }
     );
-
-    intersectionObserver.observe(this.$refs.scrollObserver);
+    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;
+    },
   },
 };
 </script>
@@ -73,8 +82,16 @@ section {
   display: flex;
   flex-direction: column;
 
+  header {
+    position: sticky;
+    top: 0;
+    background: var(--body-background-color);
+    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+  }
+
   &.is-full-height-scrollable {
     height: 100vh;
+    min-height: 0;
   }
 
   main {
@@ -83,12 +100,55 @@ section {
     scroll-snap-type: y proximity;
   }
 
-  .scroll-bar-notification {
+  .is-scrollbar-progress {
+    text-align: right;
+    margin-right: 110px;
+    .scroll-progress {
+      position: fixed;
+      top: 60px;
+      z-index: 2;
+    }
+  }
+
+  .is-scroll-observer {
+    height: 1px;
+  }
+
+  .is-scrollbar-notification {
     text-align: right;
     margin-right: 65px;
     button {
       position: fixed;
       bottom: 30px;
+      background-color: var(--secondary-color);
+      transition: background-color 1s ease-out;
+      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+      border: none !important;
+      color: #222;
+
+      &.has-more {
+        background-color: var(--primary-color);
+        animation-name: bounce;
+        animation-duration: 1000ms;
+        animation-fill-mode: both;
+        color: #fff;
+      }
+    }
+  }
+
+  @keyframes bounce {
+    0%,
+    20%,
+    50%,
+    80%,
+    100% {
+      transform: translateY(0);
+    }
+    40% {
+      transform: translateY(-30px);
+    }
+    60% {
+      transform: translateY(-15px);
     }
   }
 

assets/components/Search.vue

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

assets/components/SideMenu.vue

@@ -1,38 +1,50 @@
-<template lang="html">
+<template>
   <aside>
     <div class="columns is-marginless">
-      <div class="column">
-        <h1 class="title has-text-warning is-marginless">Dozzle</h1>
+      <div class="column is-paddingless">
+        <router-link :to="{ name: 'default' }">
+          <svg class="logo">
+            <use href="#logo"></use>
+          </svg>
+        </router-link>
       </div>
-      <div class="column is-narrow has-text-right is-hidden-mobile">
-        <router-link
-          :to="{ name: 'settings' }"
-          active-class="is-active"
-          class="button is-small is-rounded is-settings-control"
-        >
+      <div class="column is-narrow has-text-right px-1">
+        <button class="button is-rounded" @click="$emit('search')" title="Search containers (⌘ + k, ⌃k)">
           <span class="icon">
-            <icon name="cog"></icon>
+            <mdi-light-magnify />
+          </span>
+        </button>
+      </div>
+      <div class="column is-narrow has-text-right px-0">
+        <router-link :to="{ name: 'settings' }" active-class="is-active" class="button is-rounded">
+          <span class="icon">
+            <mdi-light-cog />
           </span>
         </router-link>
       </div>
     </div>
     <p class="menu-label is-hidden-mobile">Containers</p>
     <ul class="menu-list is-hidden-mobile">
-      <li v-for="item in containers">
+      <li v-for="item in visibleContainers" :key="item.id" :class="item.state">
         <router-link
           :to="{ name: 'container', params: { id: item.id, name: item.name } }"
           active-class="is-active"
           :title="item.name"
         >
-          <div class="hide-overflow">
-            <span
-              @click.stop.prevent="appendActiveContainer(item)"
-              class="icon is-small will-append-container"
-              :class="{ 'is-active': activeContainersById[item.id] }"
-            >
-              <icon name="pin"></icon>
-            </span>
-            {{ item.name }}
+          <div class="container is-flex is-align-items-center">
+            <div class="is-flex-grow-1 is-ellipsis">
+              {{ item.name }}
+            </div>
+            <div class="is-flex-shrink-1 column-icon">
+              <span
+                class="icon is-small"
+                @click.stop.prevent="store.appendActiveContainer(item)"
+                v-show="!activeContainersById[item.id]"
+                title="Pin as column"
+              >
+                <cil-columns />
+              </span>
+            </div>
           </div>
         </router-link>
       </li>
@@ -40,30 +52,22 @@
   </aside>
 </template>
 
-<script>
-import { mapActions, mapGetters, mapState } from "vuex";
+<script lang="ts" setup>
+import { computed } from "vue";
+import { storeToRefs } from "pinia";
+import { useContainerStore } from "@/stores/container";
+import type { Container } from "@/types/Container";
 
-import Icon from "./Icon";
+const store = useContainerStore();
 
-export default {
-  props: [],
-  name: "SideMenu",
-  components: {
-    Icon,
-  },
-  data() {
-    return {};
-  },
-  computed: {
-    ...mapState(["containers", "activeContainers"]),
-    ...mapGetters(["activeContainersById"]),
-  },
-  methods: {
-    ...mapActions({
-      appendActiveContainer: "APPEND_ACTIVE_CONTAINER",
-    }),
-  },
-};
+const { activeContainers, visibleContainers } = storeToRefs(store);
+
+const activeContainersById = computed(() =>
+  activeContainers.value.reduce((acc, item) => {
+    acc[item.id] = item;
+    return acc;
+  }, {} as Record<string, Container>)
+);
 </script>
 <style scoped lang="scss">
 aside {
@@ -73,29 +77,35 @@ aside {
   position: fixed;
   width: inherit;
 
-  .hide-overflow {
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow: hidden;
-  }
-
-  .burger.is-white {
-    color: #fff;
-  }
-
   .is-hidden-mobile.is-active {
     display: block !important;
   }
 }
 
-.will-append-container.icon {
-  transition: transform 0.2s ease-out;
-  &.is-active {
-    pointer-events: none;
-    color: #00d1b2;
-  }
-  .router-link-exact-active & {
+li.exited a {
+  color: #777;
+}
+
+.logo {
+  width: 122px;
+  height: 54px;
+  fill: var(--logo-color);
+}
+
+.menu-list li {
+  .column-icon {
     visibility: hidden;
+
+    & > span {
+      vertical-align: middle;
+    }
+  }
+
+  &:hover .column-icon {
+    visibility: visible;
+    &:hover {
+      color: var(--secondary-color);
+    }
   }
 }
 </style>

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

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

assets/composables/media.ts

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

assets/composables/search.ts

@@ -0,0 +1,39 @@
+import { ref, computed, Ref } from "vue";
+
+const searchFilter = ref<string>();
+const showSearch = ref(false);
+
+import type { LogEntry } from "@/types/LogEntry";
+
+export function useSearchFilter() {
+  function filteredMessages(messages: Ref<LogEntry[]>) {
+    return computed(() => {
+      if (searchFilter && searchFilter.value) {
+        const isSmartCase = searchFilter.value === searchFilter.value.toLowerCase();
+        try {
+          const regex = isSmartCase ? new RegExp(searchFilter.value, "i") : new RegExp(searchFilter.value);
+          return messages.value
+            .filter((d) => d.message.match(regex))
+            .map((d) => ({
+              ...d,
+              message: d.message.replace(regex, "<mark>$&</mark>"),
+            }));
+        } catch (e) {
+          if (e instanceof SyntaxError) {
+            console.info(`Ignoring SytaxError from search.`, e);
+            return messages.value;
+          }
+          throw e;
+        }
+      }
+
+      return messages.value;
+    });
+  }
+
+  return {
+    filteredMessages,
+    searchFilter,
+    showSearch
+  };
+}

assets/composables/settings.ts

@@ -0,0 +1,65 @@
+import { useStorage } from "@vueuse/core";
+import { computed } from "vue";
+
+export const DOZZLE_SETTINGS_KEY = "DOZZLE_SETTINGS";
+
+export const DEFAULT_SETTINGS: {
+  search: boolean;
+  size: "small" | "medium" | "large";
+  menuWidth: number;
+  smallerScrollbars: boolean;
+  showTimestamp: boolean;
+  showAllContainers: boolean;
+  lightTheme: boolean;
+  hourStyle: "auto" | "24" | "12";
+} = {
+  search: true,
+  size: "medium",
+  menuWidth: 15,
+  smallerScrollbars: false,
+  showTimestamp: true,
+  showAllContainers: false,
+  lightTheme: false,
+  hourStyle: "auto",
+};
+
+export const settings = useStorage(DOZZLE_SETTINGS_KEY, DEFAULT_SETTINGS);
+
+export const search = computed({
+  get: () => settings.value.search,
+  set: (value) => (settings.value.search = value),
+});
+
+export const size = computed({
+  get: () => settings.value.size,
+  set: (value) => (settings.value.size = value),
+});
+
+export const menuWidth = computed({
+  get: () => settings.value.menuWidth,
+  set: (value) => (settings.value.menuWidth = value),
+});
+export const smallerScrollbars = computed({
+  get: () => settings.value.smallerScrollbars,
+  set: (value) => (settings.value.smallerScrollbars = value),
+});
+
+export const showTimestamp = computed({
+  get: () => settings.value.showTimestamp,
+  set: (value) => (settings.value.showTimestamp = value),
+});
+
+export const showAllContainers = computed({
+  get: () => settings.value.showAllContainers,
+  set: (value) => (settings.value.showAllContainers = value),
+});
+
+export const lightTheme = computed({
+  get: () => settings.value.lightTheme,
+  set: (value) => (settings.value.lightTheme = value),
+});
+
+export const hourStyle = computed({
+  get: () => settings.value.hourStyle,
+  set: (value) => (settings.value.hourStyle = value),
+});

assets/composables/title.ts

@@ -0,0 +1,12 @@
+import { useTitle } from "@vueuse/core";
+import { ref, computed } from "vue";
+
+const subtitle = ref("");
+
+const title = computed(() => `${subtitle.value} - Dozzle`);
+
+useTitle(title);
+
+export function setTitle(t: string) {
+  subtitle.value = t;
+}

assets/index.ejs

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

assets/main.js

@@ -1,46 +0,0 @@
-import Vue from "vue";
-import VueRouter from "vue-router";
-import Meta from "vue-meta";
-import Dropdown from "buefy/dist/esm/dropdown";
-import Switch from "buefy/dist/esm/switch";
-import store from "./store";
-import App from "./App.vue";
-import Container from "./pages/Container.vue";
-import Settings from "./pages/Settings.vue";
-import Index from "./pages/Index.vue";
-
-Vue.use(VueRouter);
-Vue.use(Meta);
-Vue.use(Dropdown);
-Vue.use(Switch);
-
-const routes = [
-  {
-    path: "/",
-    component: Index,
-    name: "default",
-  },
-  {
-    path: "/container/:id",
-    component: Container,
-    name: "container",
-    props: true,
-  },
-  {
-    path: "/settings",
-    component: Settings,
-    name: "settings",
-  },
-];
-
-const router = new VueRouter({
-  mode: "history",
-  base: BASE_PATH + "/",
-  routes,
-});
-
-new Vue({
-  router,
-  store,
-  render: (h) => h(App),
-}).$mount("#app");

assets/main.ts

@@ -0,0 +1,67 @@
+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 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 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");

assets/pages/Container.vue

@@ -1,53 +1,37 @@
-<template lang="html">
-  <scrollable-view :scrollable="activeContainers.length > 0">
-    <template v-slot:header v-if="activeContainers.length > 0">
-      <container-title :value="allContainersById[id].name"></container-title>
-    </template>
-    <log-viewer-with-source :id="id"></log-viewer-with-source>
-  </scrollable-view>
+<template>
+  <div>
+    <search></search>
+    <log-container :id="id" show-title :scrollable="activeContainers.length > 0"> </log-container>
+  </div>
 </template>
 
-<script>
-import { mapActions, mapGetters, mapState } from "vuex";
+<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";
 
-import LogViewerWithSource from "../components/LogViewerWithSource";
-import ScrollableView from "../components/ScrollableView";
-import ContainerTitle from "../components/ContainerTitle";
+const store = useContainerStore();
 
-export default {
-  props: ["id", "name"],
-  name: "Container",
-  components: {
-    LogViewerWithSource,
-    ScrollableView,
-    ContainerTitle,
+const props = defineProps({
+  id: {
+    type: String,
+    required: true,
   },
-  data() {
-    return {
-      title: "loading",
-    };
-  },
-  metaInfo() {
-    return {
-      title: this.title,
-    };
-  },
-  mounted() {
-    if (this.allContainersById[this.id]) {
-      this.title = this.allContainersById[this.id].name;
-    }
-  },
-  computed: {
-    ...mapState(["activeContainers"]),
-    ...mapGetters(["allContainersById"]),
-  },
-  watch: {
-    id() {
-      this.title = this.allContainersById[this.id].name;
-    },
-    allContainersById() {
-      this.title = this.allContainersById[this.id].name;
-    },
-  },
-};
+});
+
+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

@@ -0,0 +1,23 @@
+<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.spec.js

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

assets/pages/Index.vue

@@ -1,22 +1,145 @@
-<template lang="html">
-  <div class="hero is-fullheight is-dark">
-    <div class="hero-body">
-      <div class="container has-text-centered">
-        <h1 class="title">Please choose a container from the list to view the logs</h1>
+<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>
-    </div>
+    </section>
+    <section class="level section is-mobile">
+      <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">{{ 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>
-export default {
-  props: [],
-  name: "Default",
-};
+<script lang="ts" setup>
+import { ref, computed } from "vue";
+import { storeToRefs } from "pinia";
+import { useRouter } from "vue-router";
+import { useContainerStore } from "@/stores/container";
+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"));
+
+function onEnter() {
+  if (results.value.length == 1) {
+    const [item] = results.value;
+    router.push({ name: "container", params: { id: item.id, name: item.name } });
+  }
+}
 </script>
-<style scoped>
-.hero.is-dark {
-  color: #ddd;
-  background-color: #111;
+<style lang="scss" scoped>
+.panel {
+  border: 1px solid var(--border-color);
+  .panel-block,
+  .panel-tabs {
+    border-color: var(--border-color);
+    .is-active {
+      border-color: var(--border-hover-color);
+    }
+    .name {
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      overflow: hidden;
+    }
+    .status {
+      margin-left: auto;
+      white-space: nowrap;
+    }
+  }
+}
+
+.icon {
+  padding: 10px 3px;
 }
 </style>

assets/pages/Login.vue

@@ -0,0 +1,83 @@
+<template>
+  <div class="hero is-halfheight">
+    <div class="hero-body">
+      <div class="container">
+        <section class="columns is-centered section">
+          <div class="column is-4">
+            <div class="card">
+              <div class="card-content">
+                <form action="" method="post" @submit.prevent="onLogin" ref="form">
+                  <div class="field">
+                    <label class="label">Username</label>
+                    <div class="control">
+                      <input
+                        class="input"
+                        type="text"
+                        name="username"
+                        autocomplete="username"
+                        v-model="username"
+                        autofocus
+                      />
+                    </div>
+                  </div>
+
+                  <div class="field">
+                    <label class="label">Password</label>
+                    <div class="control">
+                      <input
+                        class="input"
+                        type="password"
+                        name="password"
+                        autocomplete="current-password"
+                        v-model="password"
+                      />
+                    </div>
+                    <p class="help is-danger" v-if="error">Username and password are not valid.</p>
+                  </div>
+                  <div class="field is-grouped is-grouped-centered mt-5">
+                    <p class="control">
+                      <button class="button is-primary" type="submit">Login</button>
+                    </p>
+                  </div>
+                </form>
+              </div>
+            </div>
+          </div>
+        </section>
+      </div>
+    </div>
+  </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",
+      });
+
+      if (response.status == 200) {
+        this.error = false;
+        window.location.href = `${config.base}/`;
+      } else {
+        this.error = true;
+      }
+    },
+  },
+};
+</script>

assets/pages/PageNotFound.vue

@@ -0,0 +1,22 @@
+<template>
+  <div class="hero is-halfheight">
+    <div class="hero-body">
+      <div class="container has-text-centered">
+        <h1 class="title">
+          404.
+          <small class="subtitle">This page does not exist.</small>
+        </h1>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { setTitle } from "@/composables/title";
+export default {
+  name: "PageNotFound",
+  setup() {
+    setTitle("Page not found");
+  },
+};
+</script>

assets/pages/Settings.vue

@@ -1,4 +1,4 @@
-<template lang="html">
+<template>
   <div>
     <section class="section">
       <div class="has-underline">
@@ -10,122 +10,144 @@
         >.
         <span v-if="hasUpdate">
           New version is available! Update to
-          <a :href="nextRelease.html_url" class="next-release" target="_blank" rel="noopener">{{ nextRelease.name }}</a
+          <a :href="nextRelease.html_url" class="next-release" target="_blank" rel="noreferrer noopener">
+            {{ nextRelease.name }}</a
           >.
         </span>
       </div>
     </section>
+
     <section class="section">
       <div class="has-underline">
         <h2 class="title is-4">Display</h2>
       </div>
       <div class="item">
-        <b-switch v-model="search">
+        <div class="columns is-vcentered">
+          <div class="column is-narrow">
+            <o-field>
+              <o-dropdown v-model="hourStyle" aria-role="list">
+                <template #trigger>
+                  <o-button variant="primary" type="button">
+                    <span class="is-capitalized">{{ hourStyle }}</span>
+                    <span class="icon">
+                      <carbon-caret-down />
+                    </span>
+                  </o-button>
+                </template>
+
+                <o-dropdown-item :value="value" aria-role="listitem" v-for="value in ['auto', '12', '24']" :key="value">
+                  <span class="is-capitalized">{{ value }}</span>
+                </o-dropdown-item>
+              </o-dropdown>
+            </o-field>
+          </div>
+          <div class="column">
+            By default, Dozzle will use your browser's locale to format time. You can force to 12 or 24 hour style.
+          </div>
+        </div>
+
+        <div class="item">
+          <o-switch v-model="smallerScrollbars"> Use smaller scrollbars </o-switch>
+        </div>
+        <div class="item">
+          <o-switch v-model="showTimestamp"> Show timestamps </o-switch>
+        </div>
+      </div>
+
+      <div class="item">
+        <div class="columns is-vcentered">
+          <div class="column is-narrow">
+            <o-field>
+              <o-dropdown v-model="size" aria-role="list">
+                <template #trigger>
+                  <o-button variant="primary" type="button">
+                    <span class="is-capitalized">{{ size }}</span>
+                    <span class="icon">
+                      <carbon-caret-down />
+                    </span>
+                  </o-button>
+                </template>
+
+                <o-dropdown-item
+                  :value="value"
+                  aria-role="listitem"
+                  v-for="value in ['small', 'medium', 'large']"
+                  :key="value"
+                >
+                  <span class="is-capitalized">{{ value }}</span>
+                </o-dropdown-item>
+              </o-dropdown>
+            </o-field>
+          </div>
+          <div class="column">Font size to use for logs</div>
+        </div>
+      </div>
+    </section>
+    <section class="section">
+      <div class="has-underline">
+        <h2 class="title is-4">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>
-        </b-switch>
+        </o-switch>
       </div>
 
       <div class="item">
-        <b-switch v-model="smallerScrollbars">
-          Use smaller scrollbars
-        </b-switch>
+        <o-switch v-model="showAllContainers"> Show stopped containers </o-switch>
       </div>
 
       <div class="item">
-        <b-switch v-model="showTimestamp">
-          Show timestamps
-        </b-switch>
-      </div>
-
-      <div class="item">
-        <h2 class="title is-6 is-marginless">Font size</h2>
-        Modify the font size when viewing logs.
-
-        <b-dropdown v-model="size" aria-role="list" style="margin: -8px 10px 0;">
-          <button class="button is-primary" type="button" slot="trigger">
-            <span class="is-capitalized">{{ size }}</span>
-            <span class="icon"><icon name="chevron-down"></icon></span>
-          </button>
-          <b-dropdown-item
-            :value="value"
-            aria-role="listitem"
-            v-for="value in ['small', 'medium', 'large']"
-            :key="value"
-          >
-            <div class="media">
-              <span class="icon keep-size">
-                <icon name="check" v-if="value == size"></icon>
-              </span>
-              <div class="media-content">
-                <h3 class="is-capitalized">{{ value }}</h3>
-              </div>
-            </div>
-          </b-dropdown-item>
-        </b-dropdown>
+        <o-switch v-model="lightTheme"> Use light theme </o-switch>
       </div>
     </section>
   </div>
 </template>
 
-<script>
+<script lang="ts" setup>
+import { ref } from "vue";
 import gt from "semver/functions/gt";
-import valid from "semver/functions/valid";
-import { mapActions, mapState } from "vuex";
-import Icon from "../components/Icon";
+import config from "@/stores/config";
+import { setTitle } from "@/composables/title";
+import {
+  search,
+  lightTheme,
+  smallerScrollbars,
+  showTimestamp,
+  hourStyle,
+  showAllContainers,
+  size,
+} from "@/composables/settings";
 
-export default {
-  props: [],
-  name: "Settings",
-  components: {
-    Icon,
-  },
-  data() {
-    return {
-      currentVersion: VERSION,
-      nextRelease: null,
-      hasUpdate: false,
-    };
-  },
-  async created() {
-    const releases = await (await fetch("https://api.github.com/repos/amir20/dozzle/releases")).json();
-    this.hasUpdate = gt(releases[0].tag_name, this.currentVersion);
-    this.nextRelease = releases[0];
-  },
-  metaInfo() {
-    return {
-      title: "Settings",
-    };
-  },
-  methods: {
-    ...mapActions({
-      updateSetting: "UPDATE_SETTING",
-    }),
-  },
-  computed: {
-    ...mapState(["settings"]),
-    ...["search", "size", "smallerScrollbars", "showTimestamp"].reduce((map, name) => {
-      map[name] = {
-        get() {
-          return this.settings[name];
-        },
-        set(value) {
-          this.updateSetting({ [name]: value });
-        },
-      };
-      return map;
-    }, {}),
-  },
-};
+setTitle("Settings");
+
+const currentVersion = config.version;
+const nextRelease = ref({ html_url: "", name: "" });
+const hasUpdate = ref(false);
+
+async function fetchNextRelease() {
+  if (!["dev", "master"].includes(currentVersion)) {
+    const response = await fetch("https://api.github.com/repos/dozzle/dozzle/releases/latest");
+    if (response.ok) {
+      const releases = await response.json();
+      hasUpdate.value = gt(releases[0].tag_name, currentVersion);
+      nextRelease.value = releases[0];
+    }
+  } else {
+    hasUpdate.value = true;
+  }
+}
+
+fetchNextRelease();
 </script>
-<style lang="scss">
+<style lang="scss" scoped>
 .title {
-  color: #eee;
+  color: var(--title-color);
 }
 
 a.next-release {
   text-decoration: underline;
-  color: #00d1b2;
-
   &:hover {
     text-decoration: none;
   }
@@ -136,7 +158,7 @@ a.next-release {
 }
 
 .has-underline {
-  border-bottom: 1px solid #fff;
+  border-bottom: 1px solid var(--border-color);
   padding: 1em 0px;
   margin-bottom: 1em;
 }

assets/pages/Show.vue

@@ -0,0 +1,29 @@
+<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();
+
+const store = useContainerStore();
+const { visibleContainers } = storeToRefs(store);
+
+watch(visibleContainers, (newValue) => {
+  if (newValue) {
+    if (route.query.name) {
+      const [container, _] = visibleContainers.value.filter((c) => c.name == route.query.name);
+      if (container) {
+        router.push({ name: "container", params: { id: container.id } });
+      } else {
+        console.error(`No containers found matching name=${route.query.name}. Redirecting to /`);
+        router.push({ name: "default" });
+      }
+    } else {
+      console.error(`Expection query parameter name to be set. Redirecting to /`);
+      router.push({ name: "default" });
+    }
+  }
+});
+</script>

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

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

assets/pages/index.ts

@@ -0,0 +1,7 @@
+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/shims-vue.d.ts

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

assets/store/index.js

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

assets/store/settings.js

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

assets/stores/config.ts

@@ -0,0 +1,14 @@
+const text = document.querySelector("script#config__json")?.textContent || "{}";
+
+const config = JSON.parse(text);
+if (config.version == "{{ .Version }}") {
+  config.version = "master";
+  config.base = "";
+  config.authorizationNeeded = false;
+  config.secured = false;
+} else {
+  config.version = config.version.replace(/^v/, "");
+  config.authorizationNeeded = config.authorizationNeeded === "true";
+  config.secured = config.secured === "true";
+}
+export default config;

assets/stores/container.ts

@@ -0,0 +1,66 @@
+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";
+
+export const useContainerStore = defineStore("container", () => {
+  const containers = ref<Container[]>([]);
+  const activeContainerIds = ref<string[]>([]);
+
+  const allContainersById = computed(() =>
+    containers.value.reduce((acc, container) => {
+      acc[container.id] = container;
+      return acc;
+    }, {} as Record<string, Container>)
+  );
+
+  const visibleContainers = computed(() => {
+    const filter = showAllContainers.value ? () => true : (c: Container) => c.state === "running";
+    return containers.value.filter(filter);
+  });
+
+  const activeContainers = computed(() => activeContainerIds.value.map((id) => allContainersById.value[id]));
+
+  const es = new EventSource(`${config.base}/api/events/stream`);
+  es.addEventListener(
+    "containers-changed",
+    (e: Event) => (containers.value = JSON.parse((e as MessageEvent).data)),
+    false
+  );
+  es.addEventListener(
+    "container-stat",
+    (e) => {
+      const stat = JSON.parse((e as MessageEvent).data) as ContainerStat;
+      const container = allContainersById.value[stat.id];
+      if (container) {
+        container.stat = stat;
+      }
+    },
+    false
+  );
+  // es.addEventListener("container-die", (e) => store.dispatch("UPDATE_CONTAINER", JSON.parse(e.data)), false);
+
+  const currentContainer = (id: Ref<string>) => computed(() => allContainersById.value[id.value]);
+  const appendActiveContainer = ({ id }: Container) => activeContainerIds.value.push(id);
+  const removeActiveContainer = ({ id }: Container) =>
+    activeContainerIds.value.splice(activeContainerIds.value.indexOf(id), 1);
+    
+  return {
+    containers,
+    activeContainerIds,
+    allContainersById,
+    visibleContainers,
+    activeContainers,
+    currentContainer,
+    appendActiveContainer,
+    removeActiveContainer,
+  };
+});
+
+// @ts-ignore
+if (import.meta.hot) {
+  // @ts-ignore
+  import.meta.hot.accept(acceptHMRUpdate(useContainerStore, import.meta.hot));
+}

assets/styles.scss

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

assets/types/Container.d.ts

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

assets/types/LogEntry.d.ts

@@ -0,0 +1,6 @@
+export interface LogEntry {
+  date: Date;
+  message: string;
+  key: string;
+  event?: string;
+}

docker/client.go

@@ -1,10 +1,8 @@
 package docker
 
 import (
-	"bufio"
-	"bytes"
 	"context"
-	"encoding/binary"
+	"encoding/json"
 	"fmt"
 	"io"
 	"sort"
@@ -29,27 +27,26 @@ type dockerProxy interface {
 	ContainerLogs(context.Context, string, types.ContainerLogsOptions) (io.ReadCloser, error)
 	Events(context.Context, types.EventsOptions) (<-chan events.Message, <-chan error)
 	ContainerInspect(ctx context.Context, containerID string) (types.ContainerJSON, error)
+	ContainerStats(ctx context.Context, containerID string, stream bool) (types.ContainerStats, error)
 }
 
 // Client is a proxy around the docker client
 type Client interface {
-	ListContainers(showAll bool) ([]Container, error)
+	ListContainers() ([]Container, error)
 	FindContainer(string) (Container, error)
-	ContainerLogs(context.Context, string, int) (<-chan string, <-chan error)
-	Events(context.Context) (<-chan events.Message, <-chan error)
-	ContainerLogsBetweenDates(context.Context, string, time.Time, time.Time) ([]string, error)
-}
-
-// NewClient creates a new instance of Client
-func NewClient() Client {
-	return NewClientWithFilters(map[string]string{})
+	ContainerLogs(context.Context, string, int, string) (io.ReadCloser, error)
+	Events(context.Context) (<-chan ContainerEvent, <-chan error)
+	ContainerLogsBetweenDates(context.Context, string, time.Time, time.Time) (io.ReadCloser, error)
+	ContainerStats(context.Context, string, chan<- ContainerStat) error
 }
 
 // NewClientWithFilters creates a new instance of Client with docker filters
-func NewClientWithFilters(f map[string]string) Client {
+func NewClientWithFilters(f map[string][]string) Client {
 	filterArgs := filters.NewArgs()
-	for k, v := range f {
-		filterArgs.Add(k, v)
+	for key, values := range f {
+		for _, value := range values {
+			filterArgs.Add(key, value)
+		}
 	}
 
 	log.Debugf("filterArgs = %v", filterArgs)
@@ -65,7 +62,7 @@ func NewClientWithFilters(f map[string]string) Client {
 
 func (d *dockerClient) FindContainer(id string) (Container, error) {
 	var container Container
-	containers, err := d.ListContainers(true)
+	containers, err := d.ListContainers()
 	if err != nil {
 		return container, err
 	}
@@ -85,19 +82,18 @@ func (d *dockerClient) FindContainer(id string) (Container, error) {
 	return container, nil
 }
 
-func (d *dockerClient) ListContainers(showAll bool) ([]Container, error) {
+func (d *dockerClient) ListContainers() ([]Container, error) {
 	containerListOptions := types.ContainerListOptions{
 		Filters: d.filters,
-		All:     showAll,
+		All:     true,
 	}
 	list, err := d.cli.ContainerList(context.Background(), containerListOptions)
 	if err != nil {
 		return nil, err
 	}
 
-	var containers []Container
+	var containers = make([]Container, 0, len(list))
 	for _, c := range list {
-
 		container := Container{
 			ID:      c.ID[:12],
 			Names:   c.Names,
@@ -113,89 +109,114 @@ func (d *dockerClient) ListContainers(showAll bool) ([]Container, error) {
 	}
 
 	sort.Slice(containers, func(i, j int) bool {
-		return containers[i].Name < containers[j].Name
+		return strings.ToLower(containers[i].Name) < strings.ToLower(containers[j].Name)
 	})
 
-	if containers == nil {
-		containers = []Container{}
-	}
-
 	return containers, nil
 }
 
-func logReader(reader io.ReadCloser, tty bool) func() (string, error) {
-	if tty {
-		scanner := bufio.NewScanner(reader)
-		return func() (string, error) {
-			if scanner.Scan() {
-				return scanner.Text(), nil
-			}
-
-			return "", io.EOF
-		}
-	}
-	hdr := make([]byte, 8)
-	var buffer bytes.Buffer
-	return func() (string, error) {
-		buffer.Reset()
-		_, err := reader.Read(hdr)
-		if err != nil {
-			return "", err
-		}
-		count := binary.BigEndian.Uint32(hdr[4:])
-		_, err = io.CopyN(&buffer, reader, int64(count))
-		if err != nil {
-			return "", err
-		}
-		return strings.TrimSpace(buffer.String()), nil
-	}
-}
-
-func (d *dockerClient) ContainerLogs(ctx context.Context, id string, tailSize int) (<-chan string, <-chan error) {
-	options := types.ContainerLogsOptions{ShowStdout: true, ShowStderr: true, Follow: true, Tail: strconv.Itoa(tailSize), Timestamps: true}
-	reader, err := d.cli.ContainerLogs(ctx, id, options)
-	errChannel := make(chan error, 1)
+func (d *dockerClient) ContainerStats(ctx context.Context, id string, stats chan<- ContainerStat) error {
+	response, err := d.cli.ContainerStats(ctx, id, true)
 
 	if err != nil {
-		errChannel <- err
-		close(errChannel)
-		return nil, errChannel
+		return err
 	}
 
-	messages := make(chan string)
 	go func() {
-		<-ctx.Done()
-		reader.Close()
+		log.Debugf("starting to stream stats for: %s", id)
+		defer response.Body.Close()
+		decoder := json.NewDecoder(response.Body)
+		var v *types.StatsJSON
+		for {
+			if err := decoder.Decode(&v); err != nil {
+				if err == context.Canceled || err == io.EOF {
+					log.Debugf("stopping stats streaming for container %s", id)
+					return
+				}
+				log.Errorf("decoder for stats api returned an unknown error %v", err)
+			}
+
+			var (
+				cpuDelta    = float64(v.CPUStats.CPUUsage.TotalUsage) - float64(v.PreCPUStats.CPUUsage.TotalUsage)
+				systemDelta = float64(v.CPUStats.SystemUsage) - float64(v.PreCPUStats.SystemUsage)
+				cpuPercent  = int64((cpuDelta / systemDelta) * float64(len(v.CPUStats.CPUUsage.PercpuUsage)) * 100)
+				memUsage    = int64(v.MemoryStats.Usage - v.MemoryStats.Stats["cache"])
+				memPercent  = int64(float64(memUsage) / float64(v.MemoryStats.Limit) * 100)
+			)
+
+			if cpuPercent > 0 || memUsage > 0 {
+				select {
+				case <-ctx.Done():
+					return
+				case stats <- ContainerStat{
+					ID:            id,
+					CPUPercent:    cpuPercent,
+					MemoryPercent: memPercent,
+					MemoryUsage:   memUsage,
+				}:
+				}
+			}
+		}
 	}()
 
-	containerJSON, _ := d.cli.ContainerInspect(ctx, id)
+	return nil
+}
+
+func (d *dockerClient) ContainerLogs(ctx context.Context, id string, tailSize int, since string) (io.ReadCloser, error) {
+	log.WithField("id", id).WithField("since", since).Debug("streaming logs for container")
+
+	options := types.ContainerLogsOptions{
+		ShowStdout: true,
+		ShowStderr: true,
+		Follow:     true,
+		Tail:       strconv.Itoa(tailSize),
+		Timestamps: true,
+		Since:      since,
+	}
+
+	reader, err := d.cli.ContainerLogs(ctx, id, options)
+	if err != nil {
+		return nil, err
+	}
+
+	containerJSON, err := d.cli.ContainerInspect(ctx, id)
+	if err != nil {
+		return nil, err
+	}
+
+	return newLogReader(reader, containerJSON.Config.Tty), nil
+}
+
+func (d *dockerClient) Events(ctx context.Context) (<-chan ContainerEvent, <-chan error) {
+	dockerMessages, errors := d.cli.Events(ctx, types.EventsOptions{})
+	messages := make(chan ContainerEvent)
 
 	go func() {
 		defer close(messages)
-		defer close(errChannel)
-		defer reader.Close()
-		nextEntry := logReader(reader, containerJSON.Config.Tty)
+
 		for {
-			line, err := nextEntry()
-			if err != nil {
-				errChannel <- err
-				break
-			}
 			select {
-			case messages <- line:
 			case <-ctx.Done():
+				return
+			case message, ok := <-dockerMessages:
+				if !ok {
+					return
+				}
+
+				if message.Type == "container" && len(message.Actor.ID) > 0 {
+					messages <- ContainerEvent{
+						ActorID: message.Actor.ID[:12],
+						Name:    message.Action,
+					}
+				}
 			}
 		}
 	}()
 
-	return messages, errChannel
+	return messages, errors
 }
 
-func (d *dockerClient) Events(ctx context.Context) (<-chan events.Message, <-chan error) {
-	return d.cli.Events(ctx, types.EventsOptions{})
-}
-
-func (d *dockerClient) ContainerLogsBetweenDates(ctx context.Context, id string, from time.Time, to time.Time) ([]string, error) {
+func (d *dockerClient) ContainerLogsBetweenDates(ctx context.Context, id string, from time.Time, to time.Time) (io.ReadCloser, error) {
 	options := types.ContainerLogsOptions{
 		ShowStdout: true,
 		ShowStderr: true,
@@ -203,25 +224,17 @@ func (d *dockerClient) ContainerLogsBetweenDates(ctx context.Context, id string,
 		Since:      strconv.FormatInt(from.Unix(), 10),
 		Until:      strconv.FormatInt(to.Unix(), 10),
 	}
-	reader, _ := d.cli.ContainerLogs(ctx, id, options)
-	defer reader.Close()
 
-	containerJSON, _ := d.cli.ContainerInspect(ctx, id)
+	reader, err := d.cli.ContainerLogs(ctx, id, options)
 
-	nextEntry := logReader(reader, containerJSON.Config.Tty)
-
-	var messages []string
-	for {
-		line, err := nextEntry()
-		if err != nil {
-			if err == io.EOF {
-				break
-			} else {
-				return nil, err
-			}
-		}
-		messages = append(messages, line)
+	if err != nil {
+		return nil, err
 	}
 
-	return messages, nil
+	containerJSON, err := d.cli.ContainerInspect(ctx, id)
+	if err != nil {
+		return nil, err
+	}
+
+	return newLogReader(reader, containerJSON.Config.Tty), nil
 }

docker/client_test.go

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

docker/reader.go

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

docker/types.go

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

e2e/.gitignore

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

e2e/Dockerfile

@@ -0,0 +1,12 @@
+FROM cypress/included:9.0.0
+
+RUN curl -f https://get.pnpm.io/v6.16.js | node - add --global pnpm
+
+WORKDIR /e2e
+
+COPY pnpm-lock.yaml ./
+RUN pnpm fetch
+
+COPY package.json ./
+RUN pnpm install -r --offline
+

e2e/cypress.env.json

@@ -0,0 +1,3 @@
+{
+  "DOZZLE_DEFAULT": "http://localhost:3000/"
+}

e2e/cypress.json

@@ -0,0 +1,3 @@
+{
+  "fixturesFolder": false
+}

e2e/cypress/integration/dozze_dark.spec.js

@@ -0,0 +1,25 @@
+/// <reference types="cypress" />
+
+context("Dozzle default mode", { baseUrl: Cypress.env("DOZZLE_DEFAULT") }, () => {
+  beforeEach(() => {
+    cy.visit("/");
+  });
+
+  it("home screen", () => {
+    cy.get("li.running", { timeout: 10000 }).removeDates().matchImageSnapshot();
+  });
+
+  it("correct title", () => {
+    cy.title().should("eq", "1 containers - Dozzle");
+
+    cy.get("li.running:first a").click();
+
+    cy.title().should("include", "- Dozzle");
+  });
+
+  it("settings page", () => {
+    cy.get("a[href='/settings']").click();
+
+    cy.contains("About");
+  });
+});

e2e/cypress/integration/dozze_settings.spec.js

@@ -0,0 +1,20 @@
+/// <reference types="cypress" />
+
+context("Dozzle settings mode", { baseUrl: Cypress.env("DOZZLE_DEFAULT") }, () => {
+  beforeEach(() => {
+    cy.visit("/version").clearLocalStorage().visit("/settings");
+  });
+
+  it("scrollbars", () => {
+    cy.contains("Use smaller scrollbars").click();
+    cy.get("html").should("have.class", "has-custom-scrollbars");
+  });
+
+  it("stopped containers", () => {
+    cy.contains("Show stopped containers")
+      .click()
+      .then(() => {
+        expect(JSON.parse(localStorage.getItem("DOZZLE_SETTINGS")).showAllContainers).to.be.true;
+      });
+  });
+});

e2e/cypress/integration/dozzle_light.spec.js

@@ -0,0 +1,15 @@
+/// <reference types="cypress" />
+
+context("Dozzle light mode", { baseUrl: Cypress.env("DOZZLE_DEFAULT") }, () => {
+  before(() => {
+    cy.visit("/settings");
+    cy.contains("Use light theme").click();
+  });
+  beforeEach(() => {
+    cy.visit("/");
+  });
+
+  it("home screen", () => {
+    cy.get("li.running", { timeout: 10000 }).removeDates().matchImageSnapshot();
+  });
+});

e2e/cypress/integration/dozzle_routes.spec.js

@@ -0,0 +1,7 @@
+/// <reference types="cypress" />
+
+context("Dozzle routes", { baseUrl: Cypress.env("DOZZLE_DEFAULT") }, () => {
+  it("show", () => {
+    cy.visit("/show?name=dozzle").url().should("include", "/container/");
+  });
+});

e2e/cypress/plugins/index.js

@@ -0,0 +1,26 @@
+/// <reference types="cypress" />
+// ***********************************************************
+// This example plugins/index.js can be used to load plugins
+//
+// You can change the location of this file or turn off loading
+// the plugins file with the 'pluginsFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/plugins-guide
+// ***********************************************************
+
+// This function is called when a project is opened or re-opened (e.g. due to
+// the project's config changing)
+
+const { addMatchImageSnapshotPlugin } = require("cypress-image-snapshot/plugin");
+
+/**
+ * @type {Cypress.PluginConfig}
+ */
+// eslint-disable-next-line no-unused-vars
+module.exports = (on, config) => {
+  // `on` is used to hook into various events Cypress emits
+  // `config` is the resolved Cypress config
+
+  addMatchImageSnapshotPlugin(on, config);
+};

e2e/cypress/support/commands.js

@@ -0,0 +1,33 @@
+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
+
+import { addMatchImageSnapshotCommand } from "cypress-image-snapshot/command";
+
+addMatchImageSnapshotCommand();
+
+Cypress.Commands.add("removeDates", () => {
+  cy.window().then((win) => win.document.querySelectorAll("time").forEach((el) => el.remove()));
+});

e2e/cypress/support/index.js

@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/index.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import "./commands";
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')

e2e/docker-compose.yml

@@ -0,0 +1,38 @@
+version: "3.4"
+services:
+  custom_base:
+    container_name: custom_base
+    volumes:
+      - /var/run/docker.sock:/var/run/docker.sock
+    environment:
+      - DOZZLE_FILTER=name=custom_base
+      - DOZZLE_BASE=/foobarbase
+      - DOZZLE_NO_ANALYTICS=1
+    ports:
+      - "8080:8080"
+    build:
+      context: ..
+  dozzle:
+    container_name: dozzle
+    volumes:
+      - /var/run/docker.sock:/var/run/docker.sock
+    environment:
+      - DOZZLE_FILTER=name=dozzle
+      - DOZZLE_NO_ANALYTICS=1
+    ports:
+      - "9090:8080"
+    build:
+      context: ..
+  cypress:
+    build:
+      context: .
+    working_dir: /e2e
+    volumes:
+      - ./cypress:/e2e/cypress
+      - ./cypress.json:/e2e/cypress.json
+    environment:
+      - CYPRESS_DOZZLE_DEFAULT=http://dozzle:8080/
+      - CYPRESS_CUSTOM_DEFAULT=http://custom_base:8080/foobarbase
+    depends_on:
+      - dozzle
+      - custom_base

e2e/package.json

@@ -0,0 +1,10 @@
+{
+  "name": "e2e",
+  "version": "1.0.0",
+  "scripts": {},
+  "license": "ISC",
+  "dependencies": {
+    "cypress": "^9.0.0",
+    "cypress-image-snapshot": "^4.0.1"
+  }
+}

go.mod

@@ -1,55 +1,44 @@
 module github.com/amir20/dozzle
 
-replace github.com/docker/docker v0.0.0-20190827232753-32688a47f341 => github.com/docker/engine v0.0.0-20190827232753-32688a47f341
-
-// github.com/docker/engine v19.06.1-ce
-replace github.com/docker/docker => github.com/docker/engine v0.0.0-20190827232753-32688a47f341
-
-// github.com/docker/distribution master
-// a proper tagged release is expected in early fall(September 2018)
-// see; https://github.com/docker/distribution/issues/2693
-replace github.com/docker/distribution => github.com/docker/distribution v0.0.0-20190711223531-1fb7fffdb266
-
 require (
-	github.com/Azure/go-ansiterm v0.0.0-20170929234023-d6e3b3328b78 // indirect
-	github.com/Microsoft/go-winio v0.4.14 // indirect
+	github.com/Microsoft/go-winio v0.5.1 // indirect
+	github.com/alexflint/go-arg v1.4.2
 	github.com/beme/abide v0.0.0-20190723115211-635a09831760
-	github.com/containerd/containerd v1.3.3 // indirect
+	github.com/containerd/containerd v1.5.7 // indirect
 	github.com/docker/distribution v2.7.1+incompatible // indirect
-	github.com/docker/docker v0.0.0-20190827232753-32688a47f341
+	github.com/docker/docker v20.10.11+incompatible
 	github.com/docker/go-connections v0.4.0 // indirect
 	github.com/docker/go-units v0.4.0 // indirect
-	github.com/gobuffalo/envy v1.9.0 // indirect
-	github.com/gobuffalo/packd v1.0.0 // indirect
-	github.com/gobuffalo/packr v1.30.1
-	github.com/gogo/protobuf v1.3.1 // indirect
-	github.com/golang/protobuf v1.3.4 // indirect
-	github.com/google/go-cmp v0.3.1 // indirect
-	github.com/gorilla/mux v1.7.4
-	github.com/magiconair/properties v1.8.1
-	github.com/morikuni/aec v0.0.0-20170113033406-39771216ff4c // indirect
-	github.com/opencontainers/go-digest v1.0.0-rc1 // indirect
+	github.com/dustin/go-humanize v1.0.0
+	github.com/gogo/protobuf v1.3.2 // indirect
+	github.com/gorilla/mux v1.8.0
+	github.com/gorilla/sessions v1.2.1
+	github.com/magiconair/properties v1.8.5
+	github.com/moby/term v0.0.0-20201216013528-df9cb8a40635 // indirect
+	github.com/morikuni/aec v1.0.0 // indirect
+	github.com/opencontainers/go-digest v1.0.0 // indirect
 	github.com/opencontainers/image-spec v1.0.1 // indirect
-	github.com/pelletier/go-toml v1.6.0 // indirect
-	github.com/pkg/errors v0.9.1 // indirect
-	github.com/rogpeppe/go-internal v1.5.2 // indirect
-	github.com/sergi/go-diff v1.0.0 // indirect
-	github.com/sirupsen/logrus v1.6.0
-	github.com/spf13/afero v1.2.2 // indirect
-	github.com/spf13/cast v1.3.1 // indirect
-	github.com/spf13/jwalterweatherman v1.1.0 // indirect
-	github.com/spf13/pflag v1.0.5
-	github.com/spf13/viper v1.6.3
-	github.com/stretchr/objx v0.2.0 // indirect
-	github.com/stretchr/testify v1.5.1
-	golang.org/x/net v0.0.0-20200226121028-0de0cce0169b // indirect
-	golang.org/x/sys v0.0.0-20200223170610-d5e6a3e2c0ae // indirect
-	golang.org/x/text v0.3.2 // indirect
-	google.golang.org/genproto v0.0.0-20200226201735-46b91f19d98c // indirect
-	google.golang.org/grpc v1.27.1 // indirect
-	gopkg.in/ini.v1 v1.52.0 // indirect
-	gopkg.in/yaml.v2 v2.2.8 // indirect
-	gotest.tools v2.2.0+incompatible // indirect
+	github.com/sergi/go-diff v1.1.0 // indirect
+	github.com/sirupsen/logrus v1.8.1
+	github.com/spf13/afero v1.6.0
+	github.com/stretchr/objx v0.3.0 // indirect
+	github.com/stretchr/testify v1.7.0
+	golang.org/x/net v0.0.0-20211104170005-ce137452f963 // indirect
+	golang.org/x/sys v0.0.0-20211103235746-7861aae1554b // indirect
+	google.golang.org/genproto v0.0.0-20211104193956-4c6863e31247 // indirect
+	google.golang.org/grpc v1.42.0 // indirect
+	gopkg.in/yaml.v3 v3.0.0-20210107192922-496545a6307b // indirect
 )
 
-go 1.14
+require (
+	github.com/alexflint/go-scalar v1.1.0 // indirect
+	github.com/davecgh/go-spew v1.1.1 // indirect
+	github.com/golang/protobuf v1.5.2 // indirect
+	github.com/gorilla/securecookie v1.1.1 // indirect
+	github.com/pkg/errors v0.9.1 // indirect
+	github.com/pmezard/go-difflib v1.0.0 // indirect
+	golang.org/x/text v0.3.6 // indirect
+	google.golang.org/protobuf v1.27.1 // indirect
+)
+
+go 1.17

integration/.gitignore

@@ -1 +0,0 @@
-__diff_output__

integration/Dockerfile

@@ -1,8 +0,0 @@
-FROM amir20/docker-alpine-puppeteer:edge
-
-COPY --chown=pptruser:pptruser package*.json yarn.lock /app/
-RUN yarn 
-
-COPY --chown=pptruser:pptruser . /app/
-
-CMD [ "yarn", "test"]

integration/docker-compose.test.yml

@@ -1,18 +0,0 @@
-version: "3.4"
-services:
-  dozzle:
-    container_name: dozzle
-    volumes:
-      - /var/run/docker.sock:/var/run/docker.sock
-    environment:
-      - DOZZLE_FILTER=name=dozzle
-    build:
-      context: ..
-  integration:
-    build:
-      context: .
-    command: yarn test
-    environment:
-      - BASE=http://dozzle:8080/
-    depends_on:
-      - dozzle

integration/jest-puppeteer.config.js

@@ -1,9 +0,0 @@
-module.exports = {
-  launch: {
-    headless: process.env.HEADLESS !== "false",
-    defaultViewport: { width: 1920, height: 1200 },
-    args: ["--no-sandbox", "--disable-setuid-sandbox"],
-    executablePath: process.env.CHROME_EXE_PATH || "",
-  },
-  browserContext: "incognito",
-};

integration/jest-setup.js

@@ -1,5 +0,0 @@
-const { toMatchImageSnapshot } = require("jest-image-snapshot");
-
-expect.extend({ toMatchImageSnapshot });
-
-jest.setTimeout(5000);