Release 3.8.5

Bump node from 16-alpine to 17-alpine

.babelrc

@@ -1,12 +1,8 @@
 {
-  "presets": ["env"],
-  "plugins": [
-    [
-      "transform-runtime",
-      {
-        "polyfill": false,
-        "regenerator": true
-      }
-    ]
-  ]
+  "presets": [["env", { "modules": false }]],
+  "env": {
+    "test": {
+      "presets": [["env", { "targets": { "node": "current" } }]]
+    }
+  }
 }

.dockerignore

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

.editorconfig

@@ -0,0 +1,20 @@
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+max_line_length = 120
+
+[*.go]
+indent_style = tab
+indent_size = 4
+
+[Makefile]
+indent_style = tab
+
+[package.json]
+indent_size = 1

.gitattributes

@@ -0,0 +1 @@
+*.snapshot binary

.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: "/integration"
+    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

@@ -0,0 +1,86 @@
+on:
+  push:
+    tags:
+      - "v*"
+name: Test and Release
+jobs:
+  npm-test:
+    name: JavaScript Tests
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v2.3.5
+      - name: Install Node
+        uses: actions/setup-node@v2.4.1
+      - name: Install dependencies
+        run: yarn
+      - name: Run Tests
+        run: yarn test
+  go-test:
+    name: Go Tests
+    runs-on: ubuntu-latest
+    steps:
+      - name: Install Go
+        uses: actions/setup-go@v2.1.4
+        with:
+          go-version: 1.17.x
+      - name: Checkout code
+        uses: actions/checkout@v2.3.5
+      - name: Run Go Tests with Coverage
+        run: make test SKIP_ASSET=1
+  int-test:
+    name: Integration Tests
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v2.3.5
+      - name: Build images
+        run: docker-compose -f integration/docker-compose.test.yml build
+      - name: Run tests
+        run: docker-compose -f integration/docker-compose.test.yml run integration
+  buildx:
+    needs: [go-test, npm-test, int-test]
+    name: Release
+    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,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.3.5
+        with:
+          fetch-depth: 0
+      - name: Install Node
+        uses: actions/setup-node@v2.4.1
+      - name: Install dependencies
+        run: yarn
+      - name: Release to Github
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        run: yarn release --github.release --no-increment --no-git --ci

.github/workflows/dev.yml

@@ -0,0 +1,34 @@
+on:
+  push:
+    branches:
+      - master
+name: Push master container
+jobs:
+  buildx:
+    name: Push master
+    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

@@ -0,0 +1,37 @@
+on: push
+name: Test
+jobs:
+  npm-test:
+    name: JavaScript Tests
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v2.3.5
+      - name: Install Node
+        uses: actions/setup-node@v2.4.1
+      - name: Install dependencies
+        run: yarn
+      - name: Run Tests
+        run: yarn test
+  go-test:
+    name: Go Tests
+    runs-on: ubuntu-latest
+    steps:
+      - name: Install Go
+        uses: actions/setup-go@v2.1.4
+        with:
+          go-version: 1.17.x
+      - name: Checkout code
+        uses: actions/checkout@v2.3.5
+      - name: Run Go Tests with Coverage
+        run: make test SKIP_ASSET=1
+  int-test:
+    name: Integration Tests
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v2.3.5
+      - name: Build images
+        run: docker-compose -f integration/docker-compose.test.yml build
+      - name: Run tests
+        run: docker-compose -f integration/docker-compose.test.yml run integration

.gitignore

@@ -4,4 +4,5 @@ node_modules
 .cache
 static
 a_main-packr.go
-dozzle
+dozzle
+gin-bin

.goreleaser.yml

@@ -1,37 +0,0 @@
-before:
-  hooks:
-    - npm run build
-    - packr
-builds:
-  - env:
-      - CGO_ENABLED=0
-    goos:
-      - linux
-      - darwin
-    goarch:
-      - amd64
-      - arm
-      - arm64
-archive:
-  replacements:
-    amd64: 64-bit
-    386: 32-bit
-    arm64: ARM_64-bit
-    arm: ARM_32-bit
-    linux: Linux
-    darwin: Darwin
-checksum:
-  name_template: "checksums.txt"
-snapshot:
-  name_template: "{{ .Tag }}-next"
-changelog:
-  sort: asc
-  filters:
-    exclude:
-      - "^docs:"
-      - "^test:"
-dockers:
-  - image_templates:
-      - "amir20/dozzle:{{ .Tag }}"
-      - "amir20/dozzle:v{{ .Major }}.{{ .Minor }}"
-      - amir20/dozzle:latest

.husky/.gitignore

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

.husky/pre-commit

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

.prettierrc.js

@@ -0,0 +1,3 @@
+module.exports = {
+  printWidth: 120,
+};

.reflex

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

CODE_OF_CONDUCT.md

@@ -0,0 +1,76 @@
+# Contributor Covenant Code of Conduct
+
+## Our Pledge
+
+In the interest of fostering an open and welcoming environment, we as
+contributors and maintainers pledge to making participation in our project and
+our community a harassment-free experience for everyone, regardless of age, body
+size, disability, ethnicity, sex characteristics, gender identity and expression,
+level of experience, education, socio-economic status, nationality, personal
+appearance, race, religion, or sexual identity and orientation.
+
+## Our Standards
+
+Examples of behavior that contributes to creating a positive environment
+include:
+
+* Using welcoming and inclusive language
+* Being respectful of differing viewpoints and experiences
+* Gracefully accepting constructive criticism
+* Focusing on what is best for the community
+* Showing empathy towards other community members
+
+Examples of unacceptable behavior by participants include:
+
+* The use of sexualized language or imagery and unwelcome sexual attention or
+ advances
+* Trolling, insulting/derogatory comments, and personal or political attacks
+* Public or private harassment
+* Publishing others' private information, such as a physical or electronic
+ address, without explicit permission
+* Other conduct which could reasonably be considered inappropriate in a
+ professional setting
+
+## Our Responsibilities
+
+Project maintainers are responsible for clarifying the standards of acceptable
+behavior and are expected to take appropriate and fair corrective action in
+response to any instances of unacceptable behavior.
+
+Project maintainers have the right and responsibility to remove, edit, or
+reject comments, commits, code, wiki edits, issues, and other contributions
+that are not aligned to this Code of Conduct, or to ban temporarily or
+permanently any contributor for other behaviors that they deem inappropriate,
+threatening, offensive, or harmful.
+
+## Scope
+
+This Code of Conduct applies both within project spaces and in public spaces
+when an individual is representing the project or its community. Examples of
+representing a project or community include using an official project e-mail
+address, posting via an official social media account, or acting as an appointed
+representative at an online or offline event. Representation of a project may be
+further defined and clarified by project maintainers.
+
+## Enforcement
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be
+reported by contacting the project team at findamir@gmail.com. All
+complaints will be reviewed and investigated and will result in a response that
+is deemed necessary and appropriate to the circumstances. The project team is
+obligated to maintain confidentiality with regard to the reporter of an incident.
+Further details of specific enforcement policies may be posted separately.
+
+Project maintainers who do not follow or enforce the Code of Conduct in good
+faith may face temporary or permanent repercussions as determined by other
+members of the project's leadership.
+
+## Attribution
+
+This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
+available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html
+
+[homepage]: https://www.contributor-covenant.org
+
+For answers to common questions about this code of conduct, see
+https://www.contributor-covenant.org/faq

Dockerfile

@@ -1,10 +1,55 @@
-FROM alpine:latest as certs
-RUN apk --update add ca-certificates
+# Build assets
+FROM node:17-alpine as node
+
+RUN apk add --no-cache git openssh make g++ util-linux curl python3 && curl -f https://get.pnpm.io/v6.16.js | node - add --global pnpm
+
+WORKDIR /build
+
+# Install dependencies from lock file
+COPY pnpm-lock.yaml ./
+RUN pnpm fetch --prod
+
+# Copy files
+COPY package.json .* webpack*.js ./
+
+# Copy assets to build
+COPY assets ./assets
+
+# Install dependencies
+RUN pnpm install -r --offline --prod
+
+# Do the build
+RUN pnpm build
+
+FROM golang:1.17.2-alpine AS builder
+
+RUN apk add --no-cache git ca-certificates && mkdir /dozzle
+
+WORKDIR /dozzle
+
+# Copy go mod files
+COPY go.* ./
+RUN go mod download
+
+# Copy assets built with node
+COPY --from=node /build/static ./static
+
+# Copy all other files
+COPY . .
+
+# Args
+ARG TAG=dev
+
+# Build binary
+RUN CGO_ENABLED=0 go build -ldflags "-s -w -X main.version=$TAG"  -o dozzle
 
 FROM scratch
+
 ENV PATH=/bin
-ENV DOCKER_API_VERSION 1.38
-COPY --from=certs /etc/ssl/certs/ca-certificates.crt /etc/ssl/certs/ca-certificates.crt
-COPY dozzle /
+
+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"]
-EXPOSE 8080

Makefile

@@ -0,0 +1,34 @@
+.PHONY: clean
+clean:
+	@rm -rf static
+	@go clean -i
+
+.PHONY: static
+static:
+	@pnpm build
+
+.PHONY: fake_static
+fake_static:
+	@echo 'Skipping asset build'
+	@mkdir -p static
+	@echo "assets build was skipped" > static/index.html
+
+.PHONY: test
+test: fake_static
+	go test -cover ./...
+
+.PHONY: build
+build: static
+	CGO_ENABLED=0 go build -ldflags "-s -w"
+
+.PHONY: docker
+docker:
+	@docker build -t amir20/dozzle .
+
+.PHONY: dev
+dev:
+	pnpm dev
+
+.PHONY: int
+int:
+	docker-compose -f integration/docker-compose.test.yml up --build --force-recreate --exit-code-from integration

README.md

@@ -1,47 +1,176 @@
-# dozzle
+# Dozzle - [dozzle.dev](https://dozzle.dev/)
 
-Dozzle is a log viewer for Docker. It's free. It's small. And it's right in your browser. Oh, did I mention it is also real-time?
+Dozzle is a small lightweight application with a web based interface to monitor Docker logs. It doesn’t store any log files. It is for live monitoring of your container logs only.
 
-While dozzle should work for most, it is not meant to be a full logging solution. For enterprise use, I recommend you look at [Loggly](https://www.loggly.com), [Papertrail](https://papertrailapp.com) or [Kibana](https://www.elastic.co/products/kibana).
+![Image](https://github.com/amir20/dozzle/blob/master/.github/demo.gif?raw=true)
 
-But if you don't want to pay for those service, then you are in luck! Dozzle will be able capture all logs from your containers and send them in real-time to your browser. Installation is also very easy.
+[![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)
 
-![Image](demo.gif)
+## Features
 
-## Getting dozzle
+- Intelligent fuzzy search for container names 🤖
+- Search logs using regex 🔦
+- Small memory footprint 🏎
+- Split screen for viewing multiple logs
+- Download logs easy
+- Live stats with memory and CPU usage
+- Authentication with username and password 🚨
 
-Dozzle is a very small Docker container (13.3MB virtual). Pull the latest release from the index:
+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`:
+The simplest way to use dozzle is to run the docker container. Also, mount the Docker Unix socket with `--volume` to `/var/run/docker.sock`:
 
     $ docker run --name dozzle -d --volume=/var/run/docker.sock:/var/run/docker.sock -p 8888:8080 amir20/dozzle:latest
 
-dozzle will be available at [http://localhost:8888/](http://localhost:8888/). You can change `-p 8888:8080` to any port. For example, if you want to view dozzle over port 4040 then you would do `-p 4040:8080`.
+Dozzle will be available at [http://localhost:8888/](http://localhost:8888/). You can change `-p 8888:8080` to any port. For example, if you want to view dozzle over port 4040 then you would do `-p 4040:8080`.
+
+### With Docker swarm
+
+    docker service create \
+    --name=dozzle \
+    --publish=8888:8080 \
+    --constraint=node.role==manager \
+    --mount=type=bind,src=/var/run/docker.sock,dst=/var/run/docker.sock \
+    amir20/dozzle:latest
+
+### With Docker compose
+
+    version: "3"
+    services:
+      dozzle:
+        container_name: dozzle
+        image: amir20/dozzle:latest
+        volumes:
+          - /var/run/docker.sock:/var/run/docker.sock
+        ports:
+          - 9999:8080
 
 #### 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
+    $ docker run --volume=/var/run/docker.sock:/var/run/docker.sock -p 8888:1224 amir20/dozzle:latest --addr localhost:1224
 
-will bind to `localhost` on port `1224`. You can then use use reverse proxy to control who can see the dozzle.
+will bind to `localhost` on port `1224`. You can then use a reverse proxy to control who can see dozzle.
 
-#### Environment variable, DOCKER_API_VERSION
+If you wish to restrict the containers shown you can pass the `--filter` parameter. For example,
 
-If you see
+    $ docker run --volume=/var/run/docker.sock:/var/run/docker.sock -p 8888:1224 amir20/dozzle:latest --filter name=foo
 
-    2018/10/31 08:53:17 Error response from daemon: client version 1.40 is too new. Maximum supported API version is 1.38
+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.
 
-Then you need to modify `DOCKER_API_VERSION` to let dozzle know which version of the API is supported. By default, `DOCKER_API_VERSION=1.38` and you can change it to by passing `-e` flag. For example, this would change the `DOCKER_API_VERSION` to `1.20`
+#### Authentication
 
-$ docker run --volume=/var/run/docker.sock:/var/run/docker.sock -e DOCKER_API_VERSION=1.20 -p 8888:8080 amir20/dozzle:latest
+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`.
 
-If you are not sure what to set `DOCKER_API_VERSION` then run `docker version` which will show supported API version.
+#### 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",
+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/).
+
+#### 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 environment variables. The table below outlines all supported options and their respective env vars.
+
+| Flag             | Env Variable          | Default |
+| ---------------- | --------------------- | ------- |
+| `--addr`         | `DOZZLE_ADDR`         | `:8080` |
+| `--base`         | `DOZZLE_BASE`         | `/`     |
+| `--level`        | `DOZZLE_LEVEL`        | `info`  |
+| n/a              | `DOCKER_API_VERSION`  | not set |
+| `--tailSize`     | `DOZZLE_TAILSIZE`     | `300`   |
+| `--filter`       | `DOZZLE_FILTER`       | `""`    |
+| `--username`     | `DOZZLE_USERNAME`     | `""`    |
+| `--password`     | `DOZZLE_PASSWORD`     | `""`    |
+| `--key`          | `DOZZLE_KEY`          | `""`    |
+| `--no-analytics` | `DOZZLE_NO_ANALYTICS` | false   |
+
+Note: When using username and password `DOZZLE_KEY` is required for session management.
+
+## Troubleshooting and FAQs
+
+<details>
+ <summary>I installed Dozzle, but logs are slow or they never load. Help!</summary>
+
+Dozzle uses Server Sent Events (SSE) which connects to a server using a HTTP stream without closing the connection. If any proxy tries to buffer this connection, then Dozzle never receives the data and hangs forever waiting for the reverse proxy to flush the buffer. Since version `1.23.0`, Dozzle sends the `X-Accel-Buffering: no` header which should stop reverse proxies buffering. However, some proxies may ignore this header. In those cases, you need to explicitly disable any buffering.
+
+Below is an example with nginx and using `proxy_pass` to disable buffering.
+
+```
+    server {
+        ...
+
+        location / {
+            proxy_pass                  http://<dozzle.container.ip.address>:8080;
+        }
+
+        location /api {
+            proxy_pass                  http://<dozzle.container.ip.address>:8080;
+
+            proxy_buffering             off;
+            proxy_cache                 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)
+
+## Building
+
+To Build and test locally:
+
+1. Install NodeJs.
+2. Install Go.
+3. Install [reflex](https://github.com/cespare/reflex) with `get -u github.com/cespare/reflex` outside of dozzle.
+4. Install node modules with `pnpm`.
+5. Do `pnpm dev`

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

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

assets/App.vue

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

assets/__snapshots__/App.spec.js.snap

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

assets/components/ContainerStat.vue

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

assets/components/ContainerTitle.vue

@@ -0,0 +1,18 @@
+<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: {
+    container: Object,
+  },
+  name: "ContainerTitle",
+};
+</script>
+
+<style lang="scss" scoped></style>

assets/components/FuzzySearchModal.vue

@@ -0,0 +1,134 @@
+<template>
+  <div class="panel">
+    <b-autocomplete
+      ref="autocomplete"
+      v-model="query"
+      placeholder="Search containers using ⌘ + k, ⌃k"
+      field="name"
+      open-on-focus
+      keep-first
+      expanded
+      :data="results"
+      @select="selected"
+    >
+      <template slot-scope="props">
+        <div class="media">
+          <div class="media-left">
+            <span class="icon is-small" :class="props.option.state"><icon name="crate"></icon></span>
+          </div>
+          <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">
+              <icon name="column"></icon>
+            </span>
+          </div>
+        </div>
+      </template>
+    </b-autocomplete>
+  </div>
+</template>
+
+<script>
+import { mapState, mapActions } from "vuex";
+import fuzzysort from "fuzzysort";
+
+import PastTime from "./PastTime";
+import Icon from "./Icon";
+
+export default {
+  props: {
+    maxResults: {
+      default: 20,
+      type: Number,
+    },
+  },
+  data() {
+    return {
+      query: "",
+    };
+  },
+  name: "FuzzySearchModal",
+  components: {
+    Icon,
+    PastTime,
+  },
+  mounted() {
+    this.$nextTick(() => this.$refs.autocomplete.focus());
+  },
+  watch: {},
+  methods: {
+    ...mapActions({
+      appendActiveContainer: "APPEND_ACTIVE_CONTAINER",
+    }),
+    selected(item) {
+      this.$router.push({ name: "container", params: { id: item.id, name: item.name } });
+      this.$emit("close");
+    },
+    addColumn(container) {
+      this.appendActiveContainer(container);
+      this.$emit("close");
+    },
+  },
+  computed: {
+    ...mapState(["containers"]),
+    preparedContainers() {
+      return this.containers.map((c) => ({
+        name: c.name,
+        id: c.id,
+        created: c.created,
+        state: c.state,
+        preparedName: fuzzysort.prepare(c.name),
+      }));
+    },
+    results() {
+      const options = {
+        limit: this.maxResults,
+        key: "preparedName",
+      };
+      if (this.query) {
+        const results = fuzzysort.go(this.query, this.preparedContainers, options);
+        results.forEach((result) => {
+          if (result.obj.state === "running") {
+            result.score += 1;
+          }
+        });
+        return results.sort((a, b) => b.score - a.score).map((i) => i.obj);
+      } else {
+        return [...this.containers].sort((a, b) => b.created - a.created);
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.panel {
+  min-height: 400px;
+}
+
+.running {
+  color: var(--primary-color);
+}
+
+.exited {
+  color: var(--scheme-main-ter);
+}
+
+.column-icon {
+  &:hover {
+    color: var(--secondary-color);
+  }
+}
+
+::v-deep a.dropdown-item {
+  padding-right: 1em;
+  .media-right {
+    visibility: hidden;
+  }
+  &:hover .media-right {
+    visibility: visible;
+  }
+}
+</style>

assets/components/Icon.vue

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

@@ -0,0 +1,81 @@
+<template>
+  <div ref="observer" class="infinte-loader">
+    <div class="spinner" v-show="isLoading">
+      <div class="bounce1"></div>
+      <div class="bounce2"></div>
+      <div class="bounce3"></div>
+    </div>
+  </div>
+</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 }
+    );
+
+    intersectionObserver.observe(this.$refs.observer);
+
+    this.$once("hook:beforeDestroy", () => intersectionObserver.disconnect());
+  },
+};
+</script>
+<style scoped lang="scss">
+.infinte-loader {
+  min-height: 1px;
+}
+.spinner {
+  margin: 10px auto 0;
+  width: 70px;
+  text-align: center;
+
+  & > div {
+    width: 12px;
+    height: 12px;
+    background-color: var(--primary-color);
+    border-radius: 100%;
+    display: inline-block;
+    animation: sk-bouncedelay 0.8s infinite ease-in-out both;
+  }
+  & .bounce1 {
+    animation-delay: -0.32s;
+  }
+
+  & .bounce2 {
+    animation-delay: -0.16s;
+  }
+}
+
+@keyframes sk-bouncedelay {
+  0%,
+  80%,
+  100% {
+    transform: scale(0);
+  }
+  40% {
+    transform: scale(1);
+  }
+}
+</style>

assets/components/LogContainer.vue

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

assets/components/LogEventSource.spec.js

@@ -0,0 +1,246 @@
+import debounce from "lodash.debounce";
+import EventSource from "eventsourcemock";
+import { sources } from "eventsourcemock";
+import { shallowMount, mount, createLocalVue } from "@vue/test-utils";
+import Vuex from "vuex";
+import LogEventSource from "./LogEventSource.vue";
+import LogViewer from "./LogViewer.vue";
+
+jest.mock("lodash.debounce", () =>
+  jest.fn((fn) => {
+    fn.cancel = () => {};
+    return fn;
+  })
+);
+
+jest.mock("../store/config.js", () => ({ base: "" }));
+
+describe("<LogEventSource />", () => {
+  beforeEach(() => {
+    global.EventSource = EventSource;
+    window.scrollTo = jest.fn();
+    const observe = jest.fn();
+    const disconnect = jest.fn();
+    global.IntersectionObserver = jest.fn(() => ({
+      observe,
+      disconnect,
+    }));
+    debounce.mockClear();
+  });
+
+  function createLogEventSource({ hourStyle = "auto", searchFilter = null } = {}) {
+    const localVue = createLocalVue();
+    localVue.use(Vuex);
+
+    localVue.component("log-viewer", LogViewer);
+
+    const state = { searchFilter, settings: { size: "medium", showTimestamp: true, hourStyle } };
+    const getters = {
+      allContainersById() {
+        return {
+          abc: { state: "running" },
+        };
+      },
+    };
+
+    const store = new Vuex.Store({
+      state,
+      getters,
+    });
+
+    return mount(LogEventSource, {
+      localVue,
+      store,
+      scopedSlots: {
+        default: `
+        <log-viewer :messages="props.messages"></log-viewer>
+        `,
+      },
+      propsData: { id: "abc" },
+    });
+  }
+
+  test("renders correctly", async () => {
+    const wrapper = createLogEventSource();
+    expect(wrapper.element).toMatchSnapshot();
+  });
+
+  test("should connect to EventSource", async () => {
+    const wrapper = createLogEventSource();
+    sources["/api/logs/stream?id=abc&lastEventId="].emitOpen();
+    expect(sources["/api/logs/stream?id=abc&lastEventId="].readyState).toBe(1);
+    wrapper.destroy();
+  });
+
+  test("should close EventSource", async () => {
+    const wrapper = createLogEventSource();
+    sources["/api/logs/stream?id=abc&lastEventId="].emitOpen();
+    wrapper.destroy();
+    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.findComponent(LogViewer).vm.messages;
+
+    const { key, ...messageWithoutKey } = message;
+
+    expect(key).toBe("2019-06-12T10:55:42.459034602Z");
+
+    expect(messageWithoutKey).toMatchInlineSnapshot(`
+      Object {
+        "date": 2019-06-12T10:55:42.459Z,
+        "message": "\\"This is a message.\\"",
+      }
+    `);
+  });
+
+  describe("render html correctly", () => {
+    const RealDate = Date;
+    beforeAll(() => {
+      global.Date = class extends RealDate {
+        constructor(arg) {
+          if (arg) {
+            return new RealDate(arg);
+          } else {
+            return new RealDate(1560336936000);
+          }
+        }
+      };
+    });
+    afterAll(() => (global.Date = RealDate));
+
+    test("should render messages", async () => {
+      const wrapper = createLogEventSource();
+      sources["/api/logs/stream?id=abc&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")).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")).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")).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")).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")).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")).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

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

assets/components/LogViewer.vue

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

assets/components/LogViewerWithSource.vue

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

assets/components/MobileMenu.vue

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

assets/components/PastTime.vue

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

assets/components/RelativeTime.vue

@@ -0,0 +1,50 @@
+<template>
+  <time :datetime="date.toISOString()">{{ date | relativeTime(locale) }}</time>
+</template>
+
+<script>
+import { mapState } from "vuex";
+import { formatRelative } from "date-fns";
+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: {
+    ...mapState(["settings"]),
+    locale() {
+      const locale = styles[this.settings.hourStyle];
+      const oldFormatter = locale.formatRelative;
+      return {
+        ...locale,
+        formatRelative(token) {
+          return oldFormatter(token) + "p";
+        },
+      };
+    },
+  },
+  filters: {
+    relativeTime(date, locale) {
+      return formatRelative(date, new Date(), { locale });
+    },
+  },
+};
+</script>

assets/components/ScrollProgress.vue

@@ -0,0 +1,146 @@
+<template>
+  <div class="scroll-progress">
+    <svg width="100" height="100" viewBox="0 0 100 100" :class="{ indeterminate }">
+      <circle r="44" cx="50" cy="50" :style="{ '--progress': scrollProgress }" />
+    </svg>
+    <div class="is-overlay columns is-vcentered is-centered has-text-weight-light">
+      <template v-if="indeterminate">
+        <div class="column is-narrow is-paddingless is-size-2">&#8734;</div>
+      </template>
+      <template v-else>
+        <span class="column is-narrow is-paddingless is-size-2">
+          {{ Math.ceil(scrollProgress * 100) }}
+        </span>
+        <span class="column is-narrow is-paddingless"> % </span>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from "vuex";
+import throttle from "lodash.throttle";
+
+export default {
+  name: "ScrollProgress",
+  props: {
+    indeterminate: {
+      default: false,
+      type: Boolean,
+    },
+    autoHide: {
+      default: true,
+      type: Boolean,
+    },
+  },
+  data() {
+    return {
+      scrollProgress: 0,
+      animation: { cancel: () => {} },
+      parentElement: document,
+    };
+  },
+  created() {
+    this.onScrollThrottled = throttle(this.onScroll, 150);
+  },
+  mounted() {
+    this.attachEvents();
+    this.$once("hook:beforeDestroy", this.detachEvents);
+  },
+  watch: {
+    activeContainers() {
+      this.detachEvents();
+      this.attachEvents();
+    },
+    indeterminate() {
+      this.$nextTick(() => this.onScroll());
+    },
+  },
+  computed: {
+    ...mapGetters(["activeContainers"]),
+  },
+  methods: {
+    attachEvents() {
+      this.parentElement = this.$el.closest("[data-scrolling]") || document;
+      this.parentElement.addEventListener("scroll", this.onScrollThrottled);
+    },
+    detachEvents() {
+      this.parentElement.removeEventListener("scroll", this.onScrollThrottled);
+    },
+    onScroll() {
+      const p = this.parentElement == document ? document.documentElement : this.parentElement;
+      this.scrollProgress = p.scrollTop / (p.scrollHeight - p.clientHeight);
+      this.animation.cancel();
+      if (this.autoHide) {
+        this.animation = this.$el.animate(
+          { opacity: [1, 0] },
+          {
+            duration: 500,
+            delay: 2000,
+            fill: "both",
+            easing: "ease-out",
+          }
+        );
+      }
+    },
+  },
+};
+</script>
+<style scoped lang="scss">
+.scroll-progress {
+  display: inline-block;
+  position: relative;
+
+  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

@@ -0,0 +1,167 @@
+<template>
+  <section :class="{ 'is-full-height-scrollable': scrollable }">
+    <header v-if="$slots.header">
+      <slot name="header"></slot>
+    </header>
+    <main ref="content" :data-scrolling="scrollable">
+      <div class="is-scrollbar-progress is-hidden-mobile">
+        <scroll-progress v-show="paused" :indeterminate="loading" :auto-hide="!loading"></scroll-progress>
+      </div>
+      <slot :setLoading="setLoading"></slot>
+      <div ref="scrollObserver" class="is-scroll-observer"></div>
+    </main>
+
+    <div class="is-scrollbar-notification">
+      <transition name="fade">
+        <button class="button" :class="hasMore ? 'has-more' : ''" @click="scrollToBottom('instant')" v-show="paused">
+          <icon name="chevrons-down"></icon>
+        </button>
+      </transition>
+    </div>
+  </section>
+</template>
+
+<script>
+import Icon from "./Icon";
+import ScrollProgress from "./ScrollProgress";
+
+export default {
+  props: {
+    scrollable: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  components: {
+    Icon,
+    ScrollProgress,
+  },
+  name: "ScrollableView",
+  data() {
+    return {
+      paused: false,
+      hasMore: false,
+      loading: false,
+    };
+  },
+  mounted() {
+    const { content } = this.$refs;
+    const mutationObserver = new MutationObserver((e) => {
+      if (!this.paused) {
+        this.scrollToBottom("instant");
+      } else {
+        const record = e[e.length - 1];
+        if (
+          record.target.children[record.target.children.length - 1] == record.addedNodes[record.addedNodes.length - 1]
+        ) {
+          this.hasMore = true;
+        }
+      }
+    });
+    mutationObserver.observe(content, { childList: true, subtree: true });
+    this.$once("hook:beforeDestroy", () => mutationObserver.disconnect());
+
+    const intersectionObserver = new IntersectionObserver(
+      (entries) => (this.paused = entries[0].intersectionRatio == 0),
+      { threshholds: [0, 1], rootMargin: "80px 0px" }
+    );
+    intersectionObserver.observe(this.$refs.scrollObserver);
+    this.$once("hook:beforeDestroy", () => intersectionObserver.disconnect());
+  },
+
+  methods: {
+    scrollToBottom(behavior = "instant") {
+      this.$refs.scrollObserver.scrollIntoView({ behavior });
+      this.hasMore = false;
+    },
+    setLoading(loading) {
+      this.loading = loading;
+    },
+  },
+};
+</script>
+<style scoped lang="scss">
+section {
+  display: flex;
+  flex-direction: column;
+
+  header {
+    position: sticky;
+    top: 0;
+    background: var(--body-background-color);
+    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+  }
+
+  &.is-full-height-scrollable {
+    height: 100vh;
+    min-height: 0;
+  }
+
+  main {
+    flex: 1;
+    overflow: auto;
+    scroll-snap-type: y proximity;
+  }
+
+  .is-scrollbar-progress {
+    text-align: right;
+    margin-right: 110px;
+    .scroll-progress {
+      position: fixed;
+      top: 60px;
+      z-index: 2;
+    }
+  }
+
+  .is-scroll-observer {
+    height: 1px;
+  }
+
+  .is-scrollbar-notification {
+    text-align: right;
+    margin-right: 65px;
+    button {
+      position: fixed;
+      bottom: 30px;
+      background-color: var(--secondary-color);
+      transition: background-color 1s ease-out;
+      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+      border: none !important;
+      color: #222;
+
+      &.has-more {
+        background-color: var(--primary-color);
+        animation-name: bounce;
+        animation-duration: 1000ms;
+        animation-fill-mode: both;
+        color: #fff;
+      }
+    }
+  }
+
+  @keyframes bounce {
+    0%,
+    20%,
+    50%,
+    80%,
+    100% {
+      transform: translateY(0);
+    }
+    40% {
+      transform: translateY(-30px);
+    }
+    60% {
+      transform: translateY(-15px);
+    }
+  }
+
+  .fade-enter-active,
+  .fade-leave-active {
+    transition: opacity 0.15s ease-in;
+  }
+  .fade-enter,
+  .fade-leave-to {
+    opacity: 0;
+  }
+}
+</style>

assets/components/Search.vue

@@ -0,0 +1,114 @@
+<template>
+  <div class="search columns is-gapless is-vcentered" v-show="showSearch" v-if="settings.search">
+    <div class="column">
+      <p class="control has-icons-left">
+        <input
+          class="input"
+          type="text"
+          placeholder="Find / RegEx"
+          ref="filter"
+          v-model="filter"
+          @keyup.esc="resetSearch()"
+        />
+        <span class="icon is-left">
+          <icon name="search"></icon>
+        </span>
+      </p>
+    </div>
+    <div class="column is-1 has-text-centered">
+      <button class="delete is-medium" @click="resetSearch()"></button>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapActions, mapState } from "vuex";
+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();
+    });
+  },
+  beforeDestroy() {
+    this.updateSearchFilter("");
+    hotkeys.unbind("command+f, ctrl+f, esc");
+  },
+  methods: {
+    ...mapActions({
+      updateSearchFilter: "SET_SEARCH",
+    }),
+    resetSearch() {
+      this.showSearch = false;
+      this.filter = "";
+    },
+  },
+  computed: {
+    ...mapState(["searchFilter", "settings"]),
+    filter: {
+      get() {
+        return this.searchFilter;
+      },
+      set(value) {
+        this.updateSearchFilter(value);
+      },
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.search {
+  width: 350px;
+  position: fixed;
+  padding: 10px;
+  background: var(--scheme-main-ter);
+  top: 0;
+  right: 0;
+  border-radius: 0 0 0 5px;
+  z-index: 10;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+
+  button.delete {
+    margin-left: 1em;
+    background-color: var(--scheme-main-ter);
+    opacity: 0.6;
+    &:after,
+    &:before {
+      background-color: var(--text-color);
+    }
+
+    &:hover {
+      opacity: 1;
+    }
+  }
+
+  .icon {
+    padding: 10px 3px;
+  }
+
+  .input {
+    color: var(--body-color);
+    &::placeholder {
+      color: var(--border-color);
+    }
+  }
+}
+</style>

assets/components/SideMenu.vue

@@ -0,0 +1,128 @@
+<template>
+  <aside>
+    <div class="columns is-marginless">
+      <div class="column is-paddingless">
+        <router-link :to="{ name: 'default' }">
+          <svg class="logo">
+            <use href="#logo"></use>
+          </svg>
+        </router-link>
+      </div>
+      <div class="column is-narrow has-text-right px-1">
+        <button
+          class="button is-small is-rounded is-settings-control"
+          @click="$emit('search')"
+          title="Search containers (⌘ + k, ⌃k)"
+        >
+          <span class="icon">
+            <icon name="search"></icon>
+          </span>
+        </button>
+      </div>
+      <div class="column is-narrow has-text-right px-0">
+        <router-link
+          :to="{ name: 'settings' }"
+          active-class="is-active"
+          class="button is-small is-rounded is-settings-control"
+        >
+          <span class="icon">
+            <icon name="cog"></icon>
+          </span>
+        </router-link>
+      </div>
+    </div>
+    <p class="menu-label is-hidden-mobile">Containers</p>
+    <ul class="menu-list is-hidden-mobile">
+      <li v-for="item in visibleContainers" :key="item.id" :class="item.state">
+        <router-link
+          :to="{ name: 'container', params: { id: item.id, name: item.name } }"
+          active-class="is-active"
+          :title="item.name"
+        >
+          <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="appendActiveContainer(item)"
+                v-show="!activeContainersById[item.id]"
+                title="Pin as column"
+              >
+                <icon name="column"></icon>
+              </span>
+            </div>
+          </div>
+        </router-link>
+      </li>
+    </ul>
+  </aside>
+</template>
+
+<script>
+import { mapActions, mapGetters, mapState } from "vuex";
+
+import Icon from "./Icon";
+
+export default {
+  props: [],
+  name: "SideMenu",
+  components: {
+    Icon,
+  },
+  data() {
+    return {};
+  },
+  computed: {
+    ...mapGetters(["visibleContainers", "activeContainers"]),
+    activeContainersById() {
+      return this.activeContainers.reduce((map, obj) => {
+        map[obj.id] = obj;
+        return map;
+      }, {});
+    },
+  },
+  methods: {
+    ...mapActions({
+      appendActiveContainer: "APPEND_ACTIVE_CONTAINER",
+    }),
+  },
+};
+</script>
+<style scoped lang="scss">
+aside {
+  padding: 1em;
+  height: 100vh;
+  overflow: auto;
+  position: fixed;
+  width: inherit;
+
+  .is-hidden-mobile.is-active {
+    display: block !important;
+  }
+}
+
+li.exited a {
+  color: #777;
+}
+
+.logo {
+  width: 122px;
+  height: 54px;
+  fill: var(--logo-color);
+}
+
+.menu-list li {
+  .column-icon {
+    visibility: hidden;
+  }
+
+  &:hover .column-icon {
+    visibility: visible;
+    &:hover {
+      color: var(--secondary-color);
+    }
+  }
+}
+</style>

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

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

assets/components/mixins/container.js

@@ -0,0 +1,19 @@
+import { mapGetters } from "vuex";
+export default {
+  computed: {
+    ...mapGetters(["allContainersById"]),
+    container() {
+      return this.allContainersById[this.id];
+    },
+  },
+  watch: {
+    ["container.state"](newValue, oldValue) {
+      if (newValue == "running" && newValue != oldValue) {
+        this.onContainerStateChange(newValue, oldValue);
+      }
+    },
+  },
+  methods: {
+    onContainerStateChange(newValue, oldValue) {},
+  },
+};

assets/favicon.svg

@@ -0,0 +1,5 @@
+<svg width="128" height="128" viewBox="0 0 128 128" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="128" height="128" rx="6" fill="#222222"/>
+<path d="M82.3248 94.3863H123V104.093H67.8025V95.3506L106.164 44.3736H68.3808V34.5382H121.072V42.9594L82.3248 94.3863Z" fill="#FFDD57"/>
+<path d="M8 107.107L17.5656 14L43.8372 16.7013C51.9339 17.5338 58.9091 20.0604 64.7629 24.2812C70.6166 28.5019 74.8873 34.0893 77.5749 41.0432C80.3052 48.0016 81.2514 55.7674 80.4137 64.3407L79.8027 70.2877C78.9005 79.0698 76.4053 86.5894 72.3173 92.8468C68.2719 99.1084 62.914 103.684 56.2436 106.574C49.6158 109.468 42.1213 110.529 33.7602 109.755L8 107.107ZM28.8005 25.3655L21.3043 98.3288L34.2164 99.6565C43.6767 100.629 51.3299 98.4435 57.1758 93.0993C63.0644 87.7595 66.5671 79.6542 67.684 68.7832L68.2424 63.3477C69.3286 52.7752 67.6788 44.3123 63.293 37.9592C58.9542 31.5678 52.2295 27.8607 43.1188 26.8377L28.8005 25.3655Z" fill="#FFDD57"/>
+</svg>

assets/index.html

@@ -1,19 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>Dozzle</title>
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css">
-    <script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
-</head>
-
-<body>
-    <section class="section is-fullwidth">
-        <div id="app"></div>
-    </section>
-    <script src="/main.js"></script>
-</body>
-
-</html>

assets/main.js

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

assets/pages/Container.vue

@@ -1,70 +1,47 @@
-<template lang="html">
-    <ul ref="events" class="events"></ul>
+<template>
+  <div>
+    <search></search>
+    <log-container :id="id" show-title :scrollable="activeContainers.length > 0"> </log-container>
+  </div>
 </template>
 
 <script>
-import { formatRelative } from "date-fns";
-let ws;
-
-const parseMessage = data => {
-  const date = new Date(data.substring(0, 30));
-  const dateRelative = formatRelative(date, new Date());
-  const message = data.substring(30);
-  return {
-    date,
-    dateRelative,
-    message
-  };
-};
+import { mapGetters } from "vuex";
+import Search from "../components/Search";
+import LogContainer from "../components/LogContainer";
 
 export default {
   props: ["id"],
   name: "Container",
-  mounted() {
-    ws = new WebSocket(`ws://${window.location.host}/api/logs?id=${this.id}`);
-    ws.onopen = e => console.log("Connection opened.");
-    ws.onclose = e => console.log("Connection closed.");
-    ws.onerror = e => console.error("Connection error: " + e.data);
-    ws.onmessage = e => {
-      const data = parseMessage(e.data);
-      const parent = this.$refs.events;
-      const item = document.createElement("li");
-      item.className = "event";
-
-      const date = document.createElement("span");
-      date.className = "date";
-      date.innerHTML = data.dateRelative;
-      item.appendChild(date);
-
-      const message = document.createElement("span");
-      message.className = "text";
-      message.innerHTML = data.message;
-      item.appendChild(message);
-
-      parent.appendChild(item);
-
-      this.$nextTick(() => item.scrollIntoView());
+  components: {
+    LogContainer,
+    Search,
+  },
+  data() {
+    return {
+      title: "loading",
     };
-  }
+  },
+  metaInfo() {
+    return {
+      title: this.title,
+    };
+  },
+  mounted() {
+    if (this.allContainersById[this.id]) {
+      this.title = this.allContainersById[this.id].name;
+    }
+  },
+  computed: {
+    ...mapGetters(["allContainersById", "activeContainers"]),
+  },
+  watch: {
+    id() {
+      this.title = this.allContainersById[this.id].name;
+    },
+    allContainersById() {
+      this.title = this.allContainersById[this.id].name;
+    },
+  },
 };
 </script>
-<style>
-.events {
-  color: #ddd;
-  background-color: #111;
-  padding: 10px;
-}
-
-.event {
-  font-family: monaco, monospace;
-  font-size: 12px;
-  line-height: 16px;
-  padding: 0 15px 0 30px;
-  word-wrap: break-word;
-}
-
-.date {
-  background-color: #262626;
-  color: #258ccd;
-}
-</style>

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>
+export default {
+  name: "ContainerNotFound",
+  metaInfo() {
+    return {
+      title: "Not Found",
+    };
+  },
+};
+</script>

assets/pages/Index.vue

@@ -1,55 +1,158 @@
-<template lang="html">
-<div class="container">
-    <div class="content">
-        <section class="section">
-            <ul class="is-marginless is-paddless">
-                <li v-for="item in containers" class=" unstyled box">
-                    <router-link :to="{name: 'container', params: {id: item.Id}}" class="columns">
-                        <div class="column is-7">
-                            <h2 class="is-2 hide-overflow">{{ item.Names[0] }}</h2>
-                            <span class="subtitle is-6 code hide-overflow">{{ item.Command}}</span>
-                        </div>
-                        <div class="column is-4">
-                            <span class="code hide-overflow">{{ item.Image }}</span>
-                        </div>
-                        <div class="column is-narrow">
-                            <span class="subtitle is-7">{{ item.Status}}</span>
-                        </div>
-                    </router-link>
-                </li>
-            </ul>
-        </section>
-    </div>
-</div>
+<template>
+  <div>
+    <section class="hero is-small mt-4">
+      <div class="hero-body">
+        <div class="container">
+          <div class="columns">
+            <div class="column">
+              <h1 class="title">Hello, there!</h1>
+            </div>
+            <div class="column is-narrow" v-if="secured">
+              <a class="button is-primary is-small" :href="`${base}/logout`">Logout</a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+    <section class="level section 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">
+                <icon name="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>
+import { mapState } from "vuex";
+import Icon from "../components/Icon";
+import PastTime from "../components/PastTime";
+import config from "../store/config";
+import fuzzysort from "fuzzysort";
+
 export default {
   name: "Index",
+  components: { Icon, PastTime },
   data() {
     return {
-      containers: []
+      version: config.version,
+      search: null,
+      sort: "running",
+      secured: config.secured,
+      base: config.base,
     };
   },
-  async created() {
-    this.containers = await (await fetch(`/api/containers.json`)).json();
-  }
+  methods: {
+    onEnter() {
+      if (this.results.length == 1) {
+        const [item] = this.results;
+        this.$router.push({ name: "container", params: { id: item.id, name: item.name } });
+      }
+    },
+  },
+  computed: {
+    ...mapState(["containers"]),
+    mostRecentContainers() {
+      return [...this.containers].sort((a, b) => b.created - a.created);
+    },
+    runningContainers() {
+      return this.mostRecentContainers.filter((c) => c.state === "running");
+    },
+    allContainers() {
+      return this.containers;
+    },
+    results() {
+      if (this.search) {
+        return fuzzysort.go(this.search, this.allContainers, { key: "name" }).map((i) => i.obj);
+      }
+      switch (this.sort) {
+        case "all":
+          return this.mostRecentContainers;
+        case "running":
+          return this.runningContainers;
+
+        default:
+          throw `Invalid sort order: ${this.sort}`;
+      }
+    },
+  },
 };
 </script>
-
-<style lang="css">
-.hide-overflow {
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
+<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;
+    }
+  }
 }
-.code {
-  background-color: #f5f5f5;
-  color: #ff3860;
-  font-size: 0.875em;
-  font-weight: 400;
-  padding: 0.25em 0.5em 0.25em;
-  display: block;
-  border-radius: 2px;
+
+.icon {
+  padding: 10px 3px;
 }
 </style>

assets/pages/Login.vue

@@ -0,0 +1,84 @@
+<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>
+import config from "../store/config";
+export default {
+  name: "Login",
+  data() {
+    return {
+      username: null,
+      password: null,
+      error: false,
+    };
+  },
+  metaInfo() {
+    return {
+      title: "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,23 @@
+<template>
+  <div class="hero is-halfheight">
+    <div class="hero-body">
+      <div class="container has-text-centered">
+        <h1 class="title">
+          Oops,
+          <small class="subtitle">this page doesn't exist</small>
+        </h1>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "PageNotFound",
+  metaInfo() {
+    return {
+      title: "404 Error",
+    };
+  },
+};
+</script>

assets/pages/Settings.vue

@@ -0,0 +1,179 @@
+<template>
+  <div>
+    <section class="section">
+      <div class="has-underline">
+        <h2 class="title is-4">About</h2>
+      </div>
+
+      <div>
+        You are using Dozzle <i>{{ currentVersion }}</i
+        >.
+        <span v-if="hasUpdate">
+          New version is available! Update to
+          <a :href="nextRelease.html_url" class="next-release" target="_blank" rel="noreferrer noopener">{{
+            nextRelease.name
+          }}</a
+          >.
+        </span>
+      </div>
+    </section>
+
+    <section class="section">
+      <div class="has-underline">
+        <h2 class="title is-4">Display</h2>
+      </div>
+      <div class="item">
+        <div class="columns is-vcentered">
+          <div class="column is-narrow">
+            <b-field>
+              <b-radio-button
+                v-model="hourStyle"
+                :native-value="value"
+                v-for="value in ['auto', '12', '24']"
+                :key="value"
+              >
+                <span class="is-capitalized">{{ value }}</span>
+              </b-radio-button>
+            </b-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">
+          <b-switch v-model="smallerScrollbars"> Use smaller scrollbars </b-switch>
+        </div>
+        <div class="item">
+          <b-switch v-model="showTimestamp"> Show timestamps </b-switch>
+        </div>
+      </div>
+
+      <div class="item">
+        <div class="columns is-vcentered">
+          <div class="column is-narrow">
+            <b-field>
+              <b-radio-button
+                v-model="size"
+                :native-value="value"
+                v-for="value in ['small', 'medium', 'large']"
+                :key="value"
+              >
+                <span class="is-capitalized">{{ value }}</span>
+              </b-radio-button>
+            </b-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">
+        <b-switch v-model="search">
+          Enable searching with Dozzle using <code>command+f</code> or <code>ctrl+f</code>
+        </b-switch>
+      </div>
+
+      <div class="item">
+        <b-switch v-model="showAllContainers"> Show stopped containers </b-switch>
+      </div>
+
+      <div class="item">
+        <b-switch v-model="lightTheme"> Use light theme </b-switch>
+      </div>
+    </section>
+  </div>
+</template>
+
+<script>
+import gt from "semver/functions/gt";
+import { mapActions, mapState } from "vuex";
+import Icon from "../components/Icon";
+import config from "../store/config";
+
+export default {
+  props: [],
+  name: "Settings",
+  components: {
+    Icon,
+  },
+  data() {
+    return {
+      currentVersion: config.version,
+      nextRelease: null,
+      hasUpdate: false,
+    };
+  },
+  async created() {
+    const releases = await (await fetch("https://api.github.com/repos/amir20/dozzle/releases")).json();
+    if (this.currentVersion !== "master") {
+      this.hasUpdate = gt(releases[0].tag_name, this.currentVersion);
+    } else {
+      this.hasUpdate = true;
+    }
+    this.nextRelease = releases[0];
+  },
+  metaInfo() {
+    return {
+      title: "Settings",
+    };
+  },
+  methods: {
+    ...mapActions({
+      updateSetting: "UPDATE_SETTING",
+    }),
+  },
+  computed: {
+    ...mapState(["settings"]),
+    ...["search", "size", "smallerScrollbars", "showTimestamp", "showAllContainers", "lightTheme", "hourStyle"].reduce(
+      (map, name) => {
+        map[name] = {
+          get() {
+            return this.settings[name];
+          },
+          set(value) {
+            this.updateSetting({ [name]: value });
+          },
+        };
+        return map;
+      },
+      {}
+    ),
+  },
+};
+</script>
+<style lang="scss" scoped>
+.title {
+  color: var(--title-color);
+}
+
+a.next-release {
+  text-decoration: underline;
+  &:hover {
+    text-decoration: none;
+  }
+}
+
+.section {
+  padding: 1rem 1.5rem;
+}
+
+.has-underline {
+  border-bottom: 1px solid var(--border-color);
+  padding: 1em 0px;
+  margin-bottom: 1em;
+}
+
+.item {
+  padding: 1em 0;
+}
+
+code {
+  border-radius: 4px;
+  background-color: #444;
+}
+</style>

assets/pages/Show.vue

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

assets/pages/index.js

@@ -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/store/config.js

@@ -0,0 +1,13 @@
+const config = JSON.parse(document.querySelector("script#config__json").textContent);
+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/store/index.js

@@ -0,0 +1,120 @@
+import Vue from "vue";
+import Vuex from "vuex";
+import storage from "store/dist/store.modern";
+import { DEFAULT_SETTINGS, DOZZLE_SETTINGS_KEY } from "./settings";
+import config from "./config";
+
+Vue.use(Vuex);
+
+const mql = window.matchMedia("(max-width: 770px)");
+
+storage.set(DOZZLE_SETTINGS_KEY, { ...DEFAULT_SETTINGS, ...storage.get(DOZZLE_SETTINGS_KEY) });
+
+const state = {
+  containers: [],
+  activeContainerIds: [],
+  searchFilter: null,
+  isMobile: mql.matches,
+  settings: storage.get(DOZZLE_SETTINGS_KEY),
+  authorizationNeeded: config.authorizationNeeded,
+};
+
+const mutations = {
+  SET_CONTAINERS(state, containers) {
+    const containersById = getters.allContainersById({ containers });
+
+    containers.forEach((container) => {
+      container.stat =
+        containersById[container.id] && containersById[container.id].stat
+          ? containersById[container.id].stat
+          : { memoryUsage: 0, cpu: 0 };
+    });
+
+    state.containers = containers;
+  },
+  ADD_ACTIVE_CONTAINERS(state, { id }) {
+    state.activeContainerIds.push(id);
+  },
+  REMOVE_ACTIVE_CONTAINER(state, { id }) {
+    state.activeContainerIds.splice(state.activeContainerIds.indexOf(id), 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);
+  },
+  UPDATE_CONTAINER(_, { container, data }) {
+    for (const [key, value] of Object.entries(data)) {
+      Vue.set(container, key, value);
+    }
+  },
+};
+
+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);
+  },
+  UPDATE_SETTING({ commit }, setting) {
+    commit("UPDATE_SETTINGS", setting);
+  },
+  UPDATE_STATS({ commit, getters: { allContainersById } }, stat) {
+    const container = allContainersById[stat.id];
+    if (container) {
+      commit("UPDATE_CONTAINER", { container, data: { stat } });
+    }
+  },
+  UPDATE_CONTAINER({ commit, getters: { allContainersById } }, event) {
+    switch (event.name) {
+      case "die":
+        const container = allContainersById[event.actorId];
+        commit("UPDATE_CONTAINER", { container, data: { state: "exited" } });
+        break;
+      default:
+    }
+  },
+};
+
+const getters = {
+  allContainersById({ containers }) {
+    return containers.reduce((map, obj) => {
+      map[obj.id] = obj;
+      return map;
+    }, {});
+  },
+  visibleContainers({ containers, settings: { showAllContainers } }) {
+    const filter = showAllContainers ? () => true : (c) => c.state === "running";
+    return containers.filter(filter);
+  },
+  activeContainers({ activeContainerIds }, { allContainersById }) {
+    return activeContainerIds.map((id) => allContainersById[id]);
+  },
+};
+
+if (!config.authorizationNeeded) {
+  const es = new EventSource(`${config.base}/api/events/stream`);
+  es.addEventListener("containers-changed", (e) => store.commit("SET_CONTAINERS", JSON.parse(e.data)), false);
+  es.addEventListener("container-stat", (e) => store.dispatch("UPDATE_STATS", JSON.parse(e.data)), false);
+  es.addEventListener("container-die", (e) => store.dispatch("UPDATE_CONTAINER", JSON.parse(e.data)), false);
+}
+
+mql.addEventListener("change", (e) => store.commit("SET_MOBILE_WIDTH", e.matches));
+
+const store = new Vuex.Store({
+  state,
+  getters,
+  actions,
+  mutations,
+});
+
+export default store;

assets/store/settings.js

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

assets/styles.scss

@@ -0,0 +1,158 @@
+@charset "utf-8";
+@import "~bulma/sass/utilities/initial-variables.sass";
+
+
+$body-background-color: var(--body-background-color);
+
+$scheme-main: var(--scheme-main);
+$scheme-main-bis: var(--scheme-main-bis);
+$scheme-main-ter: var(--scheme-main-ter);
+
+$border: var(--border-color);
+$border-hover: var(--border-hover-color);
+
+$menu-item-active-background-color: var(--menu-item-active-background-color);
+$menu-item-color: var(--menu-item-color);
+$menu-item-hover-background-color: var(--menu-item-hover-background-color);
+$menu-item-hover-color: var(--menu-item-hover-color);
+
+$text-strong: var(--text-strong-color);
+$text: var(--text-color);
+
+$panel-heading-background-color: var(--panel-heading-background-color);
+$panel-heading-color: var(--panel-heading-color);
+
+$link: $turquoise;
+$link-active: $grey-dark;
+
+@import "~bulma";
+@import "../node_modules/splitpanes/dist/splitpanes.css";
+@import "~buefy/src/scss/utils/_all";
+@import "~buefy/src/scss/components/_switch";
+@import "~buefy/src/scss/components/_radio";
+@import "~buefy/src/scss/components/_modal";
+@import "~buefy/src/scss/components/_autocomplete";
+
+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};
+
+  --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};
+}
+
+[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};
+  --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 {
+  overflow-x: unset;
+  overflow-y: unset;
+  scroll-snap-type: y proximity;
+}
+
+html.has-custom-scrollbars {
+  ::-webkit-scrollbar {
+    width: 8px;
+    display: content;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background-color: rgba(128, 128, 128, 0.33);
+    outline: 1px solid slategrey;
+    border-radius: 4px;
+  }
+
+  ::-webkit-scrollbar-thumb:active {
+    background-color: #777;
+  }
+
+  ::-webkit-scrollbar-track {
+    background-color: transparent;
+  }
+
+  ::-webkit-scrollbar-track:hover {
+    background-color: rgba(64, 64, 64, 0.33);
+  }
+
+  section main {
+    scrollbar-color: #353535 transparent;
+    scrollbar-width: thin;
+  }
+}
+
+.is-settings-control {
+  background: rgba(0, 0, 0, 0.4);
+  color: #fff;
+  border-color: transparent;
+  &:hover {
+    border-color: var(--border-hover-color) !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;
+}

docker/client.go

@@ -0,0 +1,240 @@
+package docker
+
+import (
+	"context"
+	"encoding/json"
+	"fmt"
+	"io"
+	"sort"
+	"strconv"
+	"strings"
+	"time"
+
+	"github.com/docker/docker/api/types"
+	"github.com/docker/docker/api/types/events"
+	"github.com/docker/docker/api/types/filters"
+	"github.com/docker/docker/client"
+	log "github.com/sirupsen/logrus"
+)
+
+type dockerClient struct {
+	cli     dockerProxy
+	filters filters.Args
+}
+
+type dockerProxy interface {
+	ContainerList(context.Context, types.ContainerListOptions) ([]types.Container, error)
+	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() ([]Container, error)
+	FindContainer(string) (Container, error)
+	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 {
+	filterArgs := filters.NewArgs()
+	for key, values := range f {
+		for _, value := range values {
+			filterArgs.Add(key, value)
+		}
+	}
+
+	log.Debugf("filterArgs = %v", filterArgs)
+
+	cli, err := client.NewClientWithOpts(client.FromEnv, client.WithAPIVersionNegotiation())
+
+	if err != nil {
+		log.Fatal(err)
+	}
+
+	return &dockerClient{cli, filterArgs}
+}
+
+func (d *dockerClient) FindContainer(id string) (Container, error) {
+	var container Container
+	containers, err := d.ListContainers()
+	if err != nil {
+		return container, err
+	}
+
+	found := false
+	for _, c := range containers {
+		if c.ID == id {
+			container = c
+			found = true
+			break
+		}
+	}
+	if found == false {
+		return container, fmt.Errorf("Unable to find container with id: %s", id)
+	}
+
+	return container, nil
+}
+
+func (d *dockerClient) ListContainers() ([]Container, error) {
+	containerListOptions := types.ContainerListOptions{
+		Filters: d.filters,
+		All:     true,
+	}
+	list, err := d.cli.ContainerList(context.Background(), containerListOptions)
+	if err != nil {
+		return nil, err
+	}
+
+	var containers = make([]Container, 0, len(list))
+	for _, c := range list {
+		container := Container{
+			ID:      c.ID[:12],
+			Names:   c.Names,
+			Name:    strings.TrimPrefix(c.Names[0], "/"),
+			Image:   c.Image,
+			ImageID: c.ImageID,
+			Command: c.Command,
+			Created: c.Created,
+			State:   c.State,
+			Status:  c.Status,
+		}
+		containers = append(containers, container)
+	}
+
+	sort.Slice(containers, func(i, j int) bool {
+		return strings.ToLower(containers[i].Name) < strings.ToLower(containers[j].Name)
+	})
+
+	return containers, nil
+}
+
+func (d *dockerClient) ContainerStats(ctx context.Context, id string, stats chan<- ContainerStat) error {
+	response, err := d.cli.ContainerStats(ctx, id, true)
+
+	if err != nil {
+		return err
+	}
+
+	go func() {
+		log.Debugf("starting to stream stats for: %s", id)
+		defer response.Body.Close()
+		decoder := json.NewDecoder(response.Body)
+		var v *types.StatsJSON
+		for {
+			if err := decoder.Decode(&v); err != nil {
+				if err == context.Canceled || err == io.EOF {
+					log.Debugf("stopping stats streaming for container %s", id)
+					return
+				}
+				log.Errorf("decoder for stats api returned an unknown error %v", err)
+			}
+
+			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,
+				}:
+				}
+			}
+		}
+	}()
+
+	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)
+
+		for {
+			select {
+			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, errors
+}
+
+func (d *dockerClient) ContainerLogsBetweenDates(ctx context.Context, id string, from time.Time, to time.Time) (io.ReadCloser, error) {
+	options := types.ContainerLogsOptions{
+		ShowStdout: true,
+		ShowStderr: true,
+		Timestamps: true,
+		Since:      strconv.FormatInt(from.Unix(), 10),
+		Until:      strconv.FormatInt(to.Unix(), 10),
+	}
+
+	reader, 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
+}

docker/client_test.go

@@ -0,0 +1,227 @@
+package docker
+
+import (
+	"bytes"
+	"context"
+	"encoding/binary"
+	"errors"
+	"io"
+	"io/ioutil"
+	"strings"
+	"testing"
+
+	"github.com/docker/docker/api/types"
+	"github.com/docker/docker/api/types/container"
+	"github.com/docker/docker/api/types/filters"
+	"github.com/stretchr/testify/assert"
+	"github.com/stretchr/testify/mock"
+	"github.com/stretchr/testify/require"
+)
+
+type mockedProxy struct {
+	mock.Mock
+	dockerProxy
+}
+
+func (m *mockedProxy) ContainerList(context.Context, types.ContainerListOptions) ([]types.Container, error) {
+	args := m.Called()
+	containers, ok := args.Get(0).([]types.Container)
+	if !ok && args.Get(0) != nil {
+		panic("containers is not of type []types.Container")
+	}
+	return containers, args.Error(1)
+
+}
+
+func (m *mockedProxy) ContainerLogs(ctx context.Context, id string, options types.ContainerLogsOptions) (io.ReadCloser, error) {
+	args := m.Called(ctx, id, options)
+	reader, ok := args.Get(0).(io.ReadCloser)
+	if !ok && args.Get(0) != nil {
+		panic("reader is not of type io.ReadCloser")
+	}
+	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)
+	if !ok && args.Get(0) != nil {
+		panic("proxies return value is not of type types.ContainerJSON")
+	}
+
+	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()
+	assert.Empty(t, list, "list should be empty")
+	require.NoError(t, err, "error should not return an error.")
+
+	proxy.AssertExpectations(t)
+}
+
+func Test_dockerClient_ListContainers_error(t *testing.T) {
+	proxy := new(mockedProxy)
+	proxy.On("ContainerList", mock.Anything, mock.Anything).Return(nil, errors.New("test"))
+	client := &dockerClient{proxy, filters.NewArgs()}
+
+	list, err := client.ListContainers()
+	assert.Nil(t, list, "list should be nil")
+	require.Error(t, err, "test.")
+
+	proxy.AssertExpectations(t)
+}
+
+func Test_dockerClient_ListContainers_happy(t *testing.T) {
+	containers := []types.Container{
+		{
+			ID:    "abcdefghijklmnopqrst",
+			Names: []string{"/z_test_container"},
+		},
+		{
+			ID:    "1234567890_abcxyzdef",
+			Names: []string{"/a_test_container"},
+		},
+	}
+
+	proxy := new(mockedProxy)
+	proxy.On("ContainerList", mock.Anything, mock.Anything).Return(containers, nil)
+	client := &dockerClient{proxy, filters.NewArgs()}
+
+	list, err := client.ListContainers()
+	require.NoError(t, err, "error should not return an error.")
+
+	assert.Equal(t, list, []Container{
+		{
+			ID:    "1234567890_a",
+			Name:  "a_test_container",
+			Names: []string{"/a_test_container"},
+		},
+		{
+			ID:    "abcdefghijkl",
+			Name:  "z_test_container",
+			Names: []string{"/z_test_container"},
+		},
+	})
+
+	proxy.AssertExpectations(t)
+}
+
+func Test_dockerClient_ContainerLogs_happy(t *testing.T) {
+	id := "123456"
+
+	proxy := new(mockedProxy)
+	expected := "INFO Testing logs..."
+	b := make([]byte, 8)
+
+	binary.BigEndian.PutUint32(b[4:], uint32(len(expected)))
+	b = append(b, []byte(expected)...)
+
+	reader := ioutil.NopCloser(bytes.NewReader(b))
+	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()}
+	logReader, _ := client.ContainerLogs(context.Background(), id, 300, "since")
+
+	actual, _ := ioutil.ReadAll(logReader)
+	assert.Equal(t, expected, string(actual), "message doesn't match expected")
+	proxy.AssertExpectations(t)
+}
+
+func Test_dockerClient_ContainerLogs_happy_with_tty(t *testing.T) {
+	id := "123456"
+
+	proxy := new(mockedProxy)
+	expected := "INFO Testing logs..."
+
+	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)
+
+	json := types.ContainerJSON{Config: &container.Config{Tty: true}}
+	proxy.On("ContainerInspect", mock.Anything, id).Return(json, nil)
+
+	client := &dockerClient{proxy, filters.NewArgs()}
+	logReader, _ := client.ContainerLogs(context.Background(), id, 300, "")
+
+	actual, _ := ioutil.ReadAll(logReader)
+	assert.Equal(t, expected, string(actual), "message doesn't match expected")
+
+	proxy.AssertExpectations(t)
+}
+
+func Test_dockerClient_ContainerLogs_error(t *testing.T) {
+	id := "123456"
+	proxy := new(mockedProxy)
+
+	proxy.On("ContainerLogs", mock.Anything, id, mock.Anything).Return(nil, errors.New("test"))
+
+	client := &dockerClient{proxy, filters.NewArgs()}
+
+	reader, err := client.ContainerLogs(context.Background(), id, 300, "")
+
+	assert.Nil(t, reader, "reader should be nil")
+	assert.Error(t, err, "error should have been returned")
+	proxy.AssertExpectations(t)
+}
+
+func Test_dockerClient_FindContainer_happy(t *testing.T) {
+	containers := []types.Container{
+		{
+			ID:    "abcdefghijklmnopqrst",
+			Names: []string{"/z_test_container"},
+		},
+		{
+			ID:    "1234567890_abcxyzdef",
+			Names: []string{"/a_test_container"},
+		},
+	}
+
+	proxy := new(mockedProxy)
+	proxy.On("ContainerList", mock.Anything, mock.Anything).Return(containers, nil)
+	client := &dockerClient{proxy, filters.NewArgs()}
+
+	container, err := client.FindContainer("abcdefghijkl")
+	require.NoError(t, err, "error should not be thrown")
+
+	assert.Equal(t, container, Container{
+		ID:    "abcdefghijkl",
+		Name:  "z_test_container",
+		Names: []string{"/z_test_container"},
+	})
+
+	proxy.AssertExpectations(t)
+}
+func Test_dockerClient_FindContainer_error(t *testing.T) {
+	containers := []types.Container{
+		{
+			ID:    "abcdefghijklmnopqrst",
+			Names: []string{"/z_test_container"},
+		},
+		{
+			ID:    "1234567890_abcxyzdef",
+			Names: []string{"/a_test_container"},
+		},
+	}
+
+	proxy := new(mockedProxy)
+	proxy.On("ContainerList", mock.Anything, mock.Anything).Return(containers, nil)
+	client := &dockerClient{proxy, filters.NewArgs()}
+
+	_, err := client.FindContainer("not_valid")
+	require.Error(t, err, "error should be thrown")
+
+	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

@@ -0,0 +1,28 @@
+package docker
+
+// Container represents an internal representation of docker containers
+type Container struct {
+	ID      string   `json:"id"`
+	Names   []string `json:"names"`
+	Name    string   `json:"name"`
+	Image   string   `json:"image"`
+	ImageID string   `json:"imageId"`
+	Command string   `json:"command"`
+	Created int64    `json:"created"`
+	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"`
+}

go.mod

@@ -0,0 +1,44 @@
+module github.com/amir20/dozzle
+
+require (
+	github.com/Microsoft/go-winio v0.5.0 // indirect
+	github.com/alexflint/go-arg v1.4.2
+	github.com/beme/abide v0.0.0-20190723115211-635a09831760
+	github.com/containerd/containerd v1.5.5 // indirect
+	github.com/docker/distribution v2.7.1+incompatible // indirect
+	github.com/docker/docker v20.10.10+incompatible
+	github.com/docker/go-connections v0.4.0 // indirect
+	github.com/docker/go-units v0.4.0 // 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/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-20210420072503-d25e30425868 // indirect
+	golang.org/x/sys v0.0.0-20210510120138-977fb7262007 // indirect
+	google.golang.org/genproto v0.0.0-20210903162649-d08c68adba83 // indirect
+	google.golang.org/grpc v1.40.0 // indirect
+	gopkg.in/yaml.v3 v3.0.0-20210107192922-496545a6307b // indirect
+)
+
+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/.dockerignore

@@ -0,0 +1 @@
+node_modules

integration/.gitignore

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

integration/Dockerfile

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

integration/__tests__/custom_base.js

@@ -0,0 +1,22 @@
+const { removeTimes } = require("../utils");
+const { CUSTOM_URL: URL } = process.env;
+
+describe("Dozzle with custom base", () => {
+  beforeEach(async () => {
+    await page.goto(URL, { waitUntil: "networkidle2" });
+  });
+
+  it("renders full page on desktop", async () => {
+    await removeTimes(page);
+    const image = await page.screenshot({ fullPage: true });
+
+    expect(image).toMatchImageSnapshot();
+  });
+
+  it("and shows one container with correct title", async () => {
+    await removeTimes(page);
+    const menuTitle = await page.$eval("aside ul.menu-list li a", (e) => e.title);
+
+    expect(menuTitle).toEqual("custom_base");
+  });
+});

integration/__tests__/default.js

@@ -0,0 +1,76 @@
+const puppeteer = require("puppeteer");
+const { removeTimes } = require("../utils");
+const iPhoneX = puppeteer.devices["iPhone X"];
+const iPadLandscape = puppeteer.devices["iPad landscape"];
+
+const { DEFAULT_URL: URL } = process.env;
+
+describe("home page", () => {
+  beforeEach(async () => {
+    await page.goto(URL, { waitUntil: "networkidle2" });
+  });
+
+  it("renders full page on desktop", async () => {
+    await removeTimes(page);
+    const image = await page.screenshot({ fullPage: true });
+
+    expect(image).toMatchImageSnapshot();
+  });
+
+  it("renders ipad viewport", async () => {
+    await page.emulate(iPadLandscape);
+    await removeTimes(page);
+    const image = await page.screenshot();
+
+    expect(image).toMatchImageSnapshot();
+  });
+
+  it("renders iphone viewport", async () => {
+    await page.emulate(iPhoneX);
+    await removeTimes(page);
+    const image = await page.screenshot();
+
+    expect(image).toMatchImageSnapshot();
+  });
+
+  it("displays iphone menu", async () => {
+    await page.emulate(iPhoneX);
+    await page.click("a.navbar-burger");
+
+    const menuText = await page.$eval("aside ul.menu-list.is-hidden-mobile li a", (e) => e.textContent);
+    expect(menuText.trim()).toEqual("dozzle");
+  });
+
+  describe("has menu visible", () => {
+    beforeAll(async () => {
+      await jestPuppeteer.resetBrowser();
+    });
+
+    beforeEach(async () => {
+      await page.goto(URL, { waitUntil: "networkidle2" });
+    });
+
+    it("and shows one container with correct title", async () => {
+      const menuTitle = await page.$eval("aside ul.menu-list li a", (e) => e.title);
+
+      expect(menuTitle).toEqual("dozzle");
+    });
+
+    it("and menu is clickable", async () => {
+      await page.click("aside ul.menu-list li a");
+
+      const className = await page.$eval("aside ul.menu-list li a", (e) => e.className);
+
+      expect(className).toContain("router-link-exact-active");
+    });
+
+    it("and when clicked shows logs", async () => {
+      await page.click("aside ul.menu-list li a");
+
+      await page.waitForSelector("ul.events li span.text");
+      const text = await page.$eval("ul.events li:nth-child(1) span.text", (e) => e.textContent);
+
+      expect(text).toContain("Dozzle version dev");
+    });
+  });
+});

integration/__tests__/light_mode.js

@@ -0,0 +1,41 @@
+const puppeteer = require("puppeteer");
+const { removeTimes } = require("../utils");
+const iPhoneX = puppeteer.devices["iPhone X"];
+const iPadLandscape = puppeteer.devices["iPad landscape"];
+
+const { DEFAULT_URL: URL } = process.env;
+
+describe("Dozzle with light mode", () => {
+  beforeAll(async () => {
+    await page.goto(URL + "/settings", { waitUntil: "networkidle2" });
+    await page.$$eval("label.switch", (elements) => {
+      elements.filter((e) => e.textContent.trim() === "Use light theme")[0].click();
+    });
+  });
+  beforeEach(async () => {
+    await page.goto(URL, { waitUntil: "networkidle2" });
+  });
+
+  it("renders full page on desktop", async () => {
+    await removeTimes(page);
+    const image = await page.screenshot({ fullPage: true });
+
+    expect(image).toMatchImageSnapshot();
+  });
+
+  it("renders ipad viewport", async () => {
+    await page.emulate(iPadLandscape);
+    await removeTimes(page);
+    const image = await page.screenshot();
+
+    expect(image).toMatchImageSnapshot();
+  });
+
+  it("renders iphone viewport", async () => {
+    await page.emulate(iPhoneX);
+    await removeTimes(page);
+    const image = await page.screenshot();
+
+    expect(image).toMatchImageSnapshot();
+  });
+});

integration/docker-compose.test.yml

@@ -0,0 +1,34 @@
+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
+    build:
+      context: ..
+  dozzle:
+    container_name: dozzle
+    volumes:
+      - /var/run/docker.sock:/var/run/docker.sock
+    environment:
+      - DOZZLE_FILTER=name=dozzle
+      - DOZZLE_NO_ANALYTICS=1
+    build:
+      context: ..
+  integration:
+    build:
+      context: .
+    command: yarn test
+    volumes:
+      - ./__tests__:/app/__tests__
+    environment:
+      - DEFAULT_URL=http://dozzle:8080/
+      - CUSTOM_URL=http://custom_base:8080/foobarbase
+      - DOZZLE_NO_ANALYTICS=1
+    depends_on:
+      - dozzle
+      - custom_base

integration/jest-puppeteer.config.js

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

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

integration/package.json

@@ -0,0 +1,24 @@
+{
+ "name": "test",
+ "version": "1.0.0",
+ "description": "",
+ "scripts": {
+  "test": "jest"
+ },
+ "author": "",
+ "license": "ISC",
+ "dependencies": {
+  "jest": "^27.0.6",
+  "jest-image-snapshot": "^4.0.0",
+  "puppeteer": "^10.4.0"
+ },
+ "jest": {
+  "preset": "jest-puppeteer",
+  "setupFilesAfterEnv": [
+   "<rootDir>/jest-setup.js"
+  ]
+ },
+ "devDependencies": {
+  "jest-puppeteer": "^6.0.0"
+ }
+}

integration/utils.js

@@ -0,0 +1,8 @@
+async function removeTimes(page) {
+  await page.waitForSelector("time");
+  await page.evaluate(() => {
+    (document.querySelectorAll("time") || []).forEach((el) => el.remove());
+  });
+}
+
+module.exports = { removeTimes };

jest.config.js

@@ -0,0 +1,14 @@
+module.exports = {
+  clearMocks: true,
+  testEnvironment: "jsdom",
+  moduleFileExtensions: ["js", "json", "vue"],
+  coveragePathIgnorePatterns: ["node_modules"],
+  testPathIgnorePatterns: ["node_modules", "<rootDir>/integration/"],
+  transformIgnorePatterns: ["node_modules"],
+  watchPathIgnorePatterns: ["<rootDir>/node_modules/"],
+  snapshotSerializers: ["jest-serializer-vue"],
+  transform: {
+    ".*\\.vue$": "vue-jest",
+    "^.+\\.js$": "babel-jest",
+  },
+};

jsconfig.json

@@ -0,0 +1,3 @@
+{
+  "include": ["./assets/**/*"]
+}

main.go

@@ -2,94 +2,151 @@ package main
 
 import (
 	"context"
-	"encoding/binary"
-	"encoding/json"
-	"flag"
-	"log"
+	"embed"
+	"io/fs"
 	"net/http"
+	_ "net/http/pprof"
+	"os"
+	"os/signal"
+	"strings"
+	"syscall"
+	"time"
 
-	"github.com/docker/docker/api/types"
-	"github.com/docker/docker/client"
-	"github.com/gobuffalo/packr"
-	"github.com/gorilla/websocket"
+	"github.com/alexflint/go-arg"
+	"github.com/amir20/dozzle/analytics"
+	"github.com/amir20/dozzle/docker"
+	"github.com/amir20/dozzle/web"
+
+	log "github.com/sirupsen/logrus"
 )
 
 var (
-	cli      *client.Client
-	addr     = flag.String("addr", ":8080", "http service address")
-	upgrader = websocket.Upgrader{}
-	version  = "dev"
-	commit   = "none"
-	date     = "unknown"
+	version = "head"
 )
 
-func init() {
-	var err error
-	cli, err = client.NewClientWithOpts(client.FromEnv)
-	if err != nil {
-		log.Fatal(err)
-	}
-	flag.Parse()
+type args struct {
+	Addr          string              `arg:"env:DOZZLE_ADDR" default:":8080" help:"sets host:port to bind for server. This is rarely needed inside a docker container."`
+	Base          string              `arg:"env:DOZZLE_BASE" default:"/" help:"sets the base for http router."`
+	Level         string              `arg:"env:DOZZLE_LEVEL" default:"info" help:"set Dozzle log level. Use debug for more logging."`
+	TailSize      int                 `arg:"env:DOZZLE_TAILSIZE" default:"300" help:"update the initial tail size when fetching logs."`
+	Key           string              `arg:"env:DOZZLE_KEY" help:"set a random key for username and password. This is required for auth."`
+	Username      string              `arg:"env:DOZZLE_USERNAME" help:"sets the username for auth."`
+	Password      string              `arg:"env:DOZZLE_PASSWORD" help:"sets password for auth"`
+	NoAnalytics   bool                `arg:"--no-analytics,env:DOZZLE_NO_ANALYTICS" help:"disables anonymous analytics"`
+	FilterStrings []string            `arg:"env:DOZZLE_FILTER,--filter,separate" help:"filters docker containers using Docker syntax."`
+	Filter        map[string][]string `arg:"-"`
 }
 
+func (args) Version() string {
+	return version
+}
+
+//go:embed static
+var content embed.FS
+
 func main() {
-	box := packr.NewBox("./static")
-	http.HandleFunc("/api/containers.json", listContainers)
-	http.HandleFunc("/api/logs", logs)
-	http.Handle("/", http.HandlerFunc(func(w http.ResponseWriter, req *http.Request) {
-		fileServer := http.FileServer(box)
-		if box.Has(req.URL.Path) {
-			fileServer.ServeHTTP(w, req)
-		} else {
-			bytes, _ := box.Find("index.html")
-			w.Write(bytes)
+	var args args
+	parser := arg.MustParse(&args)
+	args.Filter = make(map[string][]string)
+
+	for _, filter := range args.FilterStrings {
+		pos := strings.Index(filter, "=")
+		if pos == -1 {
+			parser.Fail("each filter should be of the form key=value")
 		}
-	}))
-
-	log.Fatal(http.ListenAndServe(*addr, nil))
-}
-
-func listContainers(w http.ResponseWriter, r *http.Request) {
-	containers, err := cli.ContainerList(context.Background(), types.ContainerListOptions{})
-	if err != nil {
-		log.Fatal(err)
+		key := filter[:pos]
+		val := filter[pos+1:]
+		args.Filter[key] = append(args.Filter[key], val)
 	}
-	json.NewEncoder(w).Encode(containers)
+
+	level, _ := log.ParseLevel(args.Level)
+	log.SetLevel(level)
+
+	log.SetFormatter(&log.TextFormatter{
+		DisableTimestamp:       true,
+		DisableLevelTruncation: true,
+	})
+
+	log.Infof("Dozzle version %s", version)
+	dockerClient := docker.NewClientWithFilters(args.Filter)
+	_, err := dockerClient.ListContainers()
+
+	if err != nil {
+		log.Fatalf("Could not connect to Docker Engine: %v", err)
+	}
+
+	if args.Username != "" || args.Password != "" {
+		if args.Username == "" || args.Password == "" {
+			log.Fatalf("Username AND password are required for authentication")
+		}
+
+		if args.Key == "" {
+			log.Fatalf("Key is required for authentication")
+		}
+	}
+
+	config := web.Config{
+		Addr:     args.Addr,
+		Base:     args.Base,
+		Version:  version,
+		TailSize: args.TailSize,
+		Key:      args.Key,
+		Username: args.Username,
+		Password: args.Password,
+	}
+
+	static, err := fs.Sub(content, "static")
+	if err != nil {
+		log.Fatalf("Could not open embedded static folder: %v", err)
+	}
+
+	if _, ok := os.LookupEnv("LIVE_FS"); ok {
+		log.Info("Using live filesystem at ./static")
+		static = os.DirFS("./static")
+	}
+
+	srv := web.CreateServer(dockerClient, static, config)
+	go doStartEvent(args)
+	go func() {
+		log.Infof("Accepting connections on %s", srv.Addr)
+		if err := srv.ListenAndServe(); err != http.ErrServerClosed {
+			log.Fatal(err)
+		}
+	}()
+
+	c := make(chan os.Signal, 1)
+	signal.Notify(c, os.Interrupt)
+	signal.Notify(c, syscall.SIGTERM)
+	<-c
+	log.Info("Shutting down...")
+	ctx, cancel := context.WithTimeout(context.Background(), 2*time.Second)
+	defer cancel()
+	srv.Shutdown(ctx)
+	os.Exit(0)
 }
 
-func logs(w http.ResponseWriter, r *http.Request) {
-	id := r.URL.Query().Get("id")
-	c, err := upgrader.Upgrade(w, r, nil)
-	if err != nil {
-		log.Fatal(err)
+func doStartEvent(arg args) {
+	if arg.NoAnalytics {
+		log.Debug("Analytics disabled.")
 		return
 	}
-	defer c.Close()
-
-	options := types.ContainerLogsOptions{ShowStdout: true, ShowStderr: true, Follow: true, Tail: "500", Timestamps: true}
-	reader, err := cli.ContainerLogs(context.Background(), id, options)
-	defer reader.Close()
+	host, err := os.Hostname()
 	if err != nil {
-		log.Fatal(err)
+		log.Debug(err)
+		return
 	}
 
-	hdr := make([]byte, 8)
-	content := make([]byte, 1024, 1024*1024)
-	for {
-		_, err := reader.Read(hdr)
-		if err != nil {
-			panic(err)
-		}
-		count := binary.BigEndian.Uint32(hdr[4:])
-		n, err := reader.Read(content[:count])
-		if err != nil {
-			log.Println(err)
-			break
-		}
-		err = c.WriteMessage(websocket.TextMessage, content[:n])
-		if err != nil {
-			log.Println(err)
-			break
-		}
+	event := analytics.StartEvent{
+		ClientId:      host,
+		Version:       version,
+		FilterLength:  len(arg.Filter),
+		CustomAddress: arg.Addr != ":8080",
+		CustomBase:    arg.Base != "/",
+		TailSize:      arg.TailSize,
+		Protected:     arg.Username != "",
+	}
+
+	if err := analytics.SendStartEvent(event); err != nil {
+		log.Debug(err)
 	}
 }

package.json

@@ -1,13 +1,18 @@
 {
   "name": "dozzle",
-  "version": "1.0.5",
-  "description": "",
-  "main": "index.js",
+  "version": "3.8.5",
+  "description": "Realtime log viewer for docker containers. ",
   "scripts": {
-    "start": "concurrently 'go run main.go' 'npm run watch-assets'",
-    "watch-assets": "parcel watch assets/index.html -d static",
-    "build": "parcel build assets/index.html -d static",
-    "clean": "rm -rf static"
+    "watch": "npm-run-all -p watch:*",
+    "watch:assets": "webpack --mode=development --watch",
+    "watch:server": "LIVE_FS=true reflex -c .reflex",
+    "dev": "make fake_static && npm-run-all -p dev-server watch:server",
+    "dev-server": "webpack serve --mode=development",
+    "build": "rm -rf static && webpack --mode=production --progress",
+    "clean": "rm -rf static",
+    "release": "release-it",
+    "test": "TZ=UTC jest",
+    "postinstall": "husky install"
   },
   "repository": {
     "type": "git",
@@ -20,22 +25,70 @@
   },
   "homepage": "https://github.com/amir20/dozzle#readme",
   "dependencies": {
-    "vue": "^2.5.17",
-    "vue-router": "^3.0.1"
+    "@babel/core": "^7.15.8",
+    "@babel/plugin-transform-runtime": "^7.15.8",
+    "@vue/component-compiler-utils": "^3.3.0",
+    "@vue/test-utils": "^1.2.2",
+    "ansi-to-html": "^0.7.2",
+    "autoprefixer": "^10.4.0",
+    "babel-core": "^7.0.0-bridge.0",
+    "babel-jest": "^27.3.1",
+    "babel-preset-env": "^1.7.0",
+    "buefy": "^0.9.10",
+    "bulma": "^0.9.3",
+    "caniuse-lite": "^1.0.30001272",
+    "css-loader": "^6.5.0",
+    "date-fns": "^2.25.0",
+    "dompurify": "^2.3.3",
+    "eventsourcemock": "^2.0.0",
+    "fuzzysort": "^1.1.4",
+    "hotkeys-js": "^3.8.7",
+    "html-webpack-plugin": "^5.5.0",
+    "lodash.debounce": "^4.0.8",
+    "lodash.throttle": "^4.1.1",
+    "mini-css-extract-plugin": "^2.4.3",
+    "postcss": "^8.3.11",
+    "postcss-loader": "^6.2.0",
+    "sass": "^1.43.4",
+    "sass-loader": "^12.3.0",
+    "semver": "^7.3.5",
+    "splitpanes": "^2.3.8",
+    "store": "^2.0.12",
+    "vue": "^2.6.14",
+    "vue-loader": "^15.9.8",
+    "vue-meta": "^2.4.0",
+    "vue-router": "^3.5.3",
+    "vue-style-loader": "^4.1.3",
+    "vue-template-compiler": "^2.6.14",
+    "vuex": "^3.6.2",
+    "webpack": "^5.61.0",
+    "webpack-cli": "^4.9.1",
+    "webpack-pwa-manifest": "^4.3.0"
   },
   "devDependencies": {
-    "@vue/component-compiler-utils": "^2.3.0",
-    "babel-core": "^6.26.3",
-    "babel-plugin-transform-runtime": "^6.23.0",
-    "babel-preset-env": "^1.7.0",
-    "babel-runtime": "^6.26.0",
-    "concurrently": "^4.0.1",
-    "date-fns": "^2.0.0-alpha.25",
-    "parcel-bundler": "^1.10.3",
-    "vue-hot-reload-api": "^2.3.1",
-    "vue-template-compiler": "^2.5.17"
+    "husky": "^7.0.4",
+    "jest": "^27.3.1",
+    "jest-serializer-vue": "^2.0.2",
+    "lint-staged": "^11.2.6",
+    "npm-run-all": "^4.1.5",
+    "prettier": "^2.4.1",
+    "release-it": "^14.11.6",
+    "vue-hot-reload-api": "^2.3.4",
+    "vue-jest": "^3.0.7",
+    "webpack-dev-server": "^4.4.0"
   },
-  "browserslist": [
-    ">5%"
-  ]
+  "lint-staged": {
+    "*.{js,vue,css}": [
+      "prettier --write"
+    ]
+  },
+  "release-it": {
+    "github": {
+      "release": false,
+      "releaseNotes": "git log --pretty=format:\"* %s (%h)\" $(git describe --abbrev=0 --tags $(git rev-list --tags --skip=1 --max-count=1))...HEAD~1"
+    },
+    "npm": {
+      "publish": false
+    }
+  }
 }

web/__snapshots__/web.snapshot

@@ -0,0 +1,177 @@
+/* snapshot: Test_createRoutes_foobar */
+HTTP/1.1 200 OK
+Connection: close
+Content-Security-Policy: default-src 'none'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self'; manifest-src 'self'; connect-src 'self' api.github.com; require-trusted-types-for 'script'
+Content-Type: text/plain; charset=utf-8
+
+foo page
+
+/* snapshot: Test_createRoutes_index */
+HTTP/1.1 200 OK
+Connection: close
+Content-Security-Policy: default-src 'none'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self'; manifest-src 'self'; connect-src 'self' api.github.com; require-trusted-types-for 'script'
+Content-Type: text/plain; charset=utf-8
+
+index page
+
+/* snapshot: Test_createRoutes_redirect */
+HTTP/1.1 301 Moved Permanently
+Connection: close
+Content-Security-Policy: default-src 'none'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self'; manifest-src 'self'; connect-src 'self' api.github.com; require-trusted-types-for 'script'
+Content-Type: text/html; charset=utf-8
+Location: /foobar/
+
+<a href="/foobar/">Moved Permanently</a>.
+
+/* snapshot: Test_createRoutes_redirect_with_auth */
+HTTP/1.1 307 Temporary Redirect
+Connection: close
+Content-Security-Policy: default-src 'none'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self'; manifest-src 'self'; connect-src 'self' api.github.com; require-trusted-types-for 'script'
+Content-Type: text/html; charset=utf-8
+Location: /foobar/login
+
+<a href="/foobar/login">Temporary Redirect</a>.
+
+/* snapshot: Test_createRoutes_username_password */
+HTTP/1.1 307 Temporary Redirect
+Connection: close
+Content-Security-Policy: default-src 'none'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self'; manifest-src 'self'; connect-src 'self' api.github.com; require-trusted-types-for 'script'
+Content-Type: text/html; charset=utf-8
+Location: /login
+
+<a href="/login">Temporary Redirect</a>.
+
+/* snapshot: Test_createRoutes_username_password_invalid */
+HTTP/1.1 401 Unauthorized
+Connection: close
+Content-Security-Policy: default-src 'none'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self'; manifest-src 'self'; connect-src 'self' api.github.com; require-trusted-types-for 'script'
+Content-Type: text/plain; charset=utf-8
+X-Content-Type-Options: nosniff
+
+Unauthorized
+
+/* snapshot: Test_createRoutes_username_password_valid_session */
+HTTP/1.1 200 OK
+Connection: close
+Cache-Control: no-transform
+Cache-Control: no-cache
+Connection: keep-alive
+Content-Security-Policy: default-src 'none'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self'; manifest-src 'self'; connect-src 'self' api.github.com; require-trusted-types-for 'script'
+Content-Type: text/event-stream
+X-Accel-Buffering: no
+
+event: container-stopped
+data: end of stream
+
+/* snapshot: Test_createRoutes_version */
+HTTP/1.1 200 OK
+Connection: close
+Content-Security-Policy: default-src 'none'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self'; manifest-src 'self'; connect-src 'self' api.github.com; require-trusted-types-for 'script'
+Content-Type: text/plain; charset=utf-8
+
+dev
+
+/* snapshot: Test_handler_streamEvents_error */
+HTTP/1.1 200 OK
+Connection: close
+Cache-Control: no-transform
+Cache-Control: no-cache
+Connection: keep-alive
+Content-Type: text/event-stream
+X-Accel-Buffering: no
+
+event: containers-changed
+data: []
+
+/* snapshot: Test_handler_streamEvents_error_request */
+HTTP/1.1 200 OK
+Connection: close
+Cache-Control: no-transform
+Cache-Control: no-cache
+Connection: keep-alive
+Content-Type: text/event-stream
+X-Accel-Buffering: no
+
+event: containers-changed
+data: []
+
+/* snapshot: Test_handler_streamEvents_happy */
+HTTP/1.1 200 OK
+Connection: close
+Cache-Control: no-transform
+Cache-Control: no-cache
+Connection: keep-alive
+Content-Type: text/event-stream
+X-Accel-Buffering: no
+
+event: containers-changed
+data: []
+
+
+event: containers-changed
+data: []
+
+
+event: container-start
+data: {"actorId":"1234","name":"start"}
+
+/* snapshot: Test_handler_streamLogs_error_finding_container */
+HTTP/1.1 404 Not Found
+Connection: close
+Content-Type: text/plain; charset=utf-8
+X-Content-Type-Options: nosniff
+
+error finding container
+
+/* snapshot: Test_handler_streamLogs_error_reading */
+HTTP/1.1 500 Internal Server Error
+Connection: close
+Cache-Control: no-transform
+Cache-Control: no-cache
+Connection: keep-alive
+Content-Type: text/plain; charset=utf-8
+X-Accel-Buffering: no
+X-Content-Type-Options: nosniff
+
+test error
+
+/* snapshot: Test_handler_streamLogs_happy */
+HTTP/1.1 200 OK
+Connection: close
+Cache-Control: no-transform
+Cache-Control: no-cache
+Connection: keep-alive
+Content-Type: text/event-stream
+X-Accel-Buffering: no
+
+data: INFO Testing logs...
+
+event: container-stopped
+data: end of stream
+
+/* snapshot: Test_handler_streamLogs_happy_container_stopped */
+HTTP/1.1 200 OK
+Connection: close
+Cache-Control: no-transform
+Cache-Control: no-cache
+Connection: keep-alive
+Content-Type: text/event-stream
+X-Accel-Buffering: no
+
+event: container-stopped
+data: end of stream
+
+/* snapshot: Test_handler_streamLogs_happy_with_id */
+HTTP/1.1 200 OK
+Connection: close
+Cache-Control: no-transform
+Cache-Control: no-cache
+Connection: keep-alive
+Content-Type: text/event-stream
+X-Accel-Buffering: no
+
+data: 2020-05-13T18:55:37.772853839Z INFO Testing logs...
+id: 2020-05-13T18:55:37.772853839Z
+
+event: container-stopped
+data: end of stream

web/auth.go

@@ -0,0 +1,117 @@
+package web
+
+import (
+	"net/http"
+	"time"
+
+	"github.com/gorilla/sessions"
+	log "github.com/sirupsen/logrus"
+)
+
+var secured = false
+var store *sessions.CookieStore
+
+const authorityKey = "AUTH_TIMESTAMP"
+const sessionName = "session"
+
+func initializeAuth(h *handler) {
+	secured = false
+	if h.config.Username != "" && h.config.Password != "" {
+		store = sessions.NewCookieStore([]byte(h.config.Key))
+		store.Options.HttpOnly = true
+		store.Options.SameSite = http.SameSiteLaxMode
+		store.Options.MaxAge = 0
+		secured = true
+	}
+}
+
+func authorizationRequired(f http.HandlerFunc) http.Handler {
+	if secured {
+		return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
+			if isAuthorized(r) {
+				f(w, r)
+			} else {
+				http.Error(w, http.StatusText(http.StatusUnauthorized), http.StatusUnauthorized)
+			}
+		})
+	} else {
+		return http.HandlerFunc(f)
+	}
+}
+
+func isAuthorized(r *http.Request) bool {
+	if !secured {
+		return true
+	}
+
+	session, _ := store.Get(r, sessionName)
+	if session.IsNew {
+		return false
+	}
+
+	if _, ok := session.Values[authorityKey]; ok {
+		// TODO check for timestamp
+		return true
+	}
+
+	return false
+}
+
+func (h *handler) isAuthorizationNeeded(r *http.Request) bool {
+	return secured && !isAuthorized(r)
+}
+
+func (h *handler) validateCredentials(w http.ResponseWriter, r *http.Request) {
+	if !secured {
+		log.Panic("Validating credentials without username and password should not happen")
+	}
+
+	if r.Method != "POST" {
+		log.Fatal("Expecting credential validation method to be POST")
+		http.Error(w, http.StatusText(http.StatusNotAcceptable), http.StatusNotAcceptable)
+		return
+	}
+
+	if err := r.ParseMultipartForm(4 * 1024); err != nil {
+		log.Fatalf("Error while parsing form data: %v", err)
+		http.Error(w, err.Error(), http.StatusInternalServerError)
+		return
+	}
+
+	user := r.PostFormValue("username")
+	pass := r.PostFormValue("password")
+	session, _ := store.Get(r, sessionName)
+
+	if user == h.config.Username && pass == h.config.Password {
+		session.Values[authorityKey] = time.Now().Unix()
+
+		if err := session.Save(r, w); err != nil {
+			log.Fatalf("Error while parsing saving session: %v", err)
+			http.Error(w, err.Error(), http.StatusInternalServerError)
+			return
+		}
+
+		w.WriteHeader(http.StatusOK)
+		w.Write([]byte(http.StatusText(http.StatusOK)))
+		return
+	}
+
+	http.Error(w, http.StatusText(http.StatusUnauthorized), http.StatusUnauthorized)
+}
+
+func (h *handler) clearSession(w http.ResponseWriter, r *http.Request) {
+	if !secured {
+		log.Panic("Validating credentials with secured=false should not happen")
+	}
+
+	session, _ := store.Get(r, sessionName)
+	delete(session.Values, authorityKey)
+
+	if err := session.Save(r, w); err != nil {
+		log.Fatalf("Error while parsing saving session: %v", err)
+		http.Error(w, err.Error(), http.StatusInternalServerError)
+		return
+	}
+
+	http.Redirect(w, r, h.config.Base, http.StatusTemporaryRedirect)
+}

web/csp.go

@@ -0,0 +1,12 @@
+package web
+
+import (
+	"net/http"
+)
+
+func cspHeaders(next http.Handler) http.Handler {
+	return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
+		w.Header().Set("Content-Security-Policy", "default-src 'none'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self'; manifest-src 'self'; connect-src 'self' api.github.com; require-trusted-types-for 'script'")
+		next.ServeHTTP(w, r)
+	})
+}

web/events.go

@@ -0,0 +1,111 @@
+package web
+
+import (
+	"encoding/json"
+	"fmt"
+	"net/http"
+
+	"github.com/amir20/dozzle/docker"
+
+	log "github.com/sirupsen/logrus"
+)
+
+func (h *handler) streamEvents(w http.ResponseWriter, r *http.Request) {
+	f, ok := w.(http.Flusher)
+	if !ok {
+		http.Error(w, "Streaming unsupported!", http.StatusInternalServerError)
+		return
+	}
+
+	w.Header().Set("Content-Type", "text/event-stream")
+	w.Header().Set("Cache-Control", "no-transform")
+	w.Header().Add("Cache-Control", "no-cache")
+	w.Header().Set("Connection", "keep-alive")
+	w.Header().Set("X-Accel-Buffering", "no")
+
+	ctx := r.Context()
+
+	events, err := h.client.Events(ctx)
+	stats := make(chan docker.ContainerStat)
+
+	if containers, err := h.client.ListContainers(); err == nil {
+		for _, c := range containers {
+			if c.State == "running" {
+				if err := h.client.ContainerStats(ctx, c.ID, stats); err != nil {
+					log.Errorf("error while streaming container stats: %v", err)
+				}
+			}
+		}
+	}
+
+	if err := sendContainersJSON(h.client, w); err != nil {
+		log.Errorf("error while encoding containers to stream: %v", err)
+	}
+
+	f.Flush()
+
+	for {
+		select {
+		case stat := <-stats:
+			bytes, _ := json.Marshal(stat)
+			if _, err := fmt.Fprintf(w, "event: container-stat\ndata: %s\n\n", string(bytes)); err != nil {
+				log.Errorf("error writing stat to event stream: %v", err)
+				return
+			}
+			f.Flush()
+		case event, ok := <-events:
+			if !ok {
+				return
+			}
+			switch event.Name {
+			case "start", "die":
+				log.Debugf("triggering docker event: %v", event.Name)
+				if event.Name == "start" {
+					log.Debugf("found new container with id: %v", event.ActorID)
+					if err := h.client.ContainerStats(ctx, event.ActorID, stats); err != nil {
+						log.Errorf("error when streaming new container stats: %v", err)
+					}
+					if err := sendContainersJSON(h.client, w); err != nil {
+						log.Errorf("error encoding containers to stream: %v", err)
+						return
+					}
+				}
+
+				bytes, _ := json.Marshal(event)
+				if _, err := fmt.Fprintf(w, "event: container-%s\ndata: %s\n\n", event.Name, string(bytes)); err != nil {
+					log.Errorf("error writing event to event stream: %v", err)
+					return
+				}
+
+				f.Flush()
+			default:
+				// do nothing
+			}
+		case <-ctx.Done():
+			return
+		case <-err:
+			return
+		}
+	}
+}
+
+func sendContainersJSON(client docker.Client, w http.ResponseWriter) error {
+	containers, err := client.ListContainers()
+	if err != nil {
+		return err
+	}
+
+	if _, err := fmt.Fprint(w, "event: containers-changed\ndata: "); err != nil {
+		return err
+	}
+
+	if err := json.NewEncoder(w).Encode(containers); err != nil {
+		return err
+	}
+
+	if _, err := fmt.Fprint(w, "\n\n"); err != nil {
+		return err
+	}
+
+	return nil
+}

web/logs.go

@@ -0,0 +1,149 @@
+package web
+
+import (
+	"bufio"
+	"compress/gzip"
+	"context"
+
+	"fmt"
+	"io"
+	"net/http"
+	"runtime"
+	"strings"
+
+	"time"
+
+	"github.com/dustin/go-humanize"
+
+	log "github.com/sirupsen/logrus"
+)
+
+func (h *handler) fetchLogsBetweenDates(w http.ResponseWriter, r *http.Request) {
+	w.Header().Set("Content-Type", "text/plain; charset=UTF-8")
+
+	from, _ := time.Parse(time.RFC3339, r.URL.Query().Get("from"))
+	to, _ := time.Parse(time.RFC3339, r.URL.Query().Get("to"))
+	id := r.URL.Query().Get("id")
+
+	reader, err := h.client.ContainerLogsBetweenDates(r.Context(), id, from, to)
+	defer reader.Close()
+
+	if err != nil {
+		http.Error(w, err.Error(), http.StatusInternalServerError)
+		return
+	}
+
+	io.Copy(w, reader)
+}
+
+func (h *handler) downloadLogs(w http.ResponseWriter, r *http.Request) {
+	id := r.URL.Query().Get("id")
+	container, err := h.client.FindContainer(id)
+	if err != nil {
+		http.Error(w, err.Error(), http.StatusBadRequest)
+		return
+	}
+
+	now := time.Now()
+	from := time.Unix(container.Created, 0)
+
+	w.Header().Set("Content-Disposition", fmt.Sprintf("attachment; filename=%v.log.gz", container.ID))
+	w.Header().Set("Content-Type", "application/gzip")
+	zw := gzip.NewWriter(w)
+	defer zw.Close()
+	zw.Name = fmt.Sprintf("%v.log", container.ID)
+	zw.Comment = "Logs generated by Dozzle"
+	zw.ModTime = now
+
+	reader, err := h.client.ContainerLogsBetweenDates(r.Context(), container.ID, from, now)
+	if err != nil {
+		http.Error(w, err.Error(), http.StatusInternalServerError)
+		return
+	}
+	io.Copy(zw, reader)
+}
+
+func (h *handler) streamLogs(w http.ResponseWriter, r *http.Request) {
+	id := r.URL.Query().Get("id")
+	if id == "" {
+		http.Error(w, "id is required", http.StatusBadRequest)
+		return
+	}
+
+	f, ok := w.(http.Flusher)
+	if !ok {
+		http.Error(w, "Streaming unsupported!", http.StatusInternalServerError)
+		return
+	}
+
+	container, err := h.client.FindContainer(id)
+	if err != nil {
+		http.Error(w, err.Error(), http.StatusNotFound)
+		return
+	}
+
+	w.Header().Set("Content-Type", "text/event-stream")
+	w.Header().Set("Cache-Control", "no-transform")
+	w.Header().Add("Cache-Control", "no-cache")
+	w.Header().Set("Connection", "keep-alive")
+	w.Header().Set("X-Accel-Buffering", "no")
+
+	lastEventId := r.Header.Get("Last-Event-ID")
+	if len(r.URL.Query().Get("lastEventId")) > 0 {
+		lastEventId = r.URL.Query().Get("lastEventId")
+	}
+
+	reader, err := h.client.ContainerLogs(r.Context(), container.ID, h.config.TailSize, lastEventId)
+	if err != nil {
+		if err == io.EOF {
+			fmt.Fprintf(w, "event: container-stopped\ndata: end of stream\n\n")
+			f.Flush()
+		} else {
+			http.Error(w, err.Error(), http.StatusInternalServerError)
+		}
+		return
+	}
+	defer reader.Close()
+
+	buffered := bufio.NewReader(reader)
+	var readerError error
+	var message string
+	for {
+		message, readerError = buffered.ReadString('\n')
+		fmt.Fprintf(w, "data: %s\n", message)
+		if index := strings.IndexAny(message, " "); index != -1 {
+			id := message[:index]
+			if _, err := time.Parse(time.RFC3339Nano, id); err == nil {
+				fmt.Fprintf(w, "id: %s\n", id)
+			}
+		}
+		fmt.Fprintf(w, "\n")
+		f.Flush()
+		if readerError != nil {
+			break
+		}
+	}
+
+	log.Debugf("streaming stopped: %v", container.ID)
+
+	if readerError == io.EOF {
+		log.Debugf("container stopped: %v", container.ID)
+		fmt.Fprintf(w, "event: container-stopped\ndata: end of stream\n\n")
+		f.Flush()
+	} else if readerError != context.Canceled {
+		log.Errorf("unknown error while streaming %v", readerError.Error())
+	}
+
+	log.WithField("routines", runtime.NumGoroutine()).Debug("runtime goroutine stats")
+
+	if log.IsLevelEnabled(log.DebugLevel) {
+		var m runtime.MemStats
+		runtime.ReadMemStats(&m)
+		// For info on each, see: https://golang.org/pkg/runtime/#MemStats
+		log.WithFields(log.Fields{
+			"allocated":      humanize.Bytes(m.Alloc),
+			"totalAllocated": humanize.Bytes(m.TotalAlloc),
+			"system":         humanize.Bytes(m.Sys),
+		}).Debug("runtime mem stats")
+	}
+}

web/routes.go

@@ -0,0 +1,133 @@
+package web
+
+import (
+	"fmt"
+	"html/template"
+	"io/fs"
+	"io/ioutil"
+	"net/http"
+	"path"
+
+	"github.com/amir20/dozzle/docker"
+
+	"github.com/gorilla/mux"
+	log "github.com/sirupsen/logrus"
+)
+
+// Config is a struct for configuring the web service
+type Config struct {
+	Base     string
+	Addr     string
+	Version  string
+	TailSize int
+	Key      string
+	Username string
+	Password string
+}
+
+type handler struct {
+	client  docker.Client
+	content fs.FS
+	config  *Config
+}
+
+// CreateServer creates a service for http handler
+func CreateServer(c docker.Client, content fs.FS, config Config) *http.Server {
+	handler := &handler{
+		client:  c,
+		content: content,
+		config:  &config,
+	}
+	return &http.Server{Addr: config.Addr, Handler: createRouter(handler)}
+}
+
+var fileServer http.Handler
+
+func createRouter(h *handler) *mux.Router {
+	initializeAuth(h)
+
+	base := h.config.Base
+	r := mux.NewRouter()
+	r.Use(cspHeaders)
+	if base != "/" {
+		r.HandleFunc(base, http.HandlerFunc(func(w http.ResponseWriter, req *http.Request) {
+			http.Redirect(w, req, base+"/", http.StatusMovedPermanently)
+		}))
+	}
+	s := r.PathPrefix(base).Subrouter()
+	s.Handle("/api/logs/stream", authorizationRequired(h.streamLogs))
+	s.Handle("/api/logs/download", authorizationRequired(h.downloadLogs))
+	s.Handle("/api/logs", authorizationRequired(h.fetchLogsBetweenDates))
+	s.Handle("/api/events/stream", authorizationRequired(h.streamEvents))
+	s.HandleFunc("/api/validateCredentials", h.validateCredentials)
+	s.Handle("/logout", authorizationRequired(h.clearSession))
+	s.Handle("/version", authorizationRequired(h.version))
+
+	if log.IsLevelEnabled(log.DebugLevel) {
+		s.PathPrefix("/debug/pprof/").Handler(http.DefaultServeMux)
+	}
+
+	if base != "/" {
+		s.PathPrefix("/").Handler(http.StripPrefix(base+"/", http.HandlerFunc(h.index)))
+	} else {
+		s.PathPrefix("/").Handler(http.StripPrefix(base, http.HandlerFunc(h.index)))
+	}
+
+	fileServer = http.FileServer(http.FS(h.content))
+
+	return r
+}
+
+func (h *handler) index(w http.ResponseWriter, req *http.Request) {
+	_, err := h.content.Open(req.URL.Path)
+	if err == nil && req.URL.Path != "" && req.URL.Path != "/" {
+		fileServer.ServeHTTP(w, req)
+	} else {
+		if !isAuthorized(req) && req.URL.Path != "login" {
+			http.Redirect(w, req, path.Clean(h.config.Base+"/login"), http.StatusTemporaryRedirect)
+			return
+		}
+		h.executeTemplate(w, req)
+	}
+}
+
+func (h *handler) executeTemplate(w http.ResponseWriter, req *http.Request) {
+	file, err := h.content.Open("index.html")
+	if err != nil {
+		log.Panic(err)
+	}
+	bytes, err := ioutil.ReadAll(file)
+	if err != nil {
+		log.Panic(err)
+	}
+	tmpl, err := template.New("index.html").Parse(string(bytes))
+	if err != nil {
+		log.Panic(err)
+	}
+
+	path := ""
+	if h.config.Base != "/" {
+		path = h.config.Base
+	}
+
+	data := struct {
+		Base                string
+		Version             string
+		AuthorizationNeeded bool
+		Secured             bool
+	}{
+		path,
+		h.config.Version,
+		h.isAuthorizationNeeded(req),
+		secured,
+	}
+	err = tmpl.Execute(w, data)
+	if err != nil {
+		log.Panic(err)
+		http.Error(w, err.Error(), http.StatusInternalServerError)
+	}
+}
+
+func (h *handler) version(w http.ResponseWriter, r *http.Request) {
+	fmt.Fprintf(w, "%v", h.config.Version)
+}