Release 3.8.4

Moves everything to pnpm

.github/.kodiak.toml

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

.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/workflows/codeql-analysis.yml

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

.github/workflows/deploy.yml

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

@@ -6,10 +6,10 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout code
-        uses: actions/checkout@v2
+        uses: actions/checkout@v2.3.5
       - name: Install Node
-        uses: actions/setup-node@v1
-      - name: Install depdencies
+        uses: actions/setup-node@v2.4.1
+      - name: Install dependencies
         run: yarn
       - name: Run Tests
         run: yarn test
@@ -18,11 +18,11 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Install Go
-        uses: actions/setup-go@v1
+        uses: actions/setup-go@v2.1.4
         with:
-          go-version: 1.16.x
+          go-version: 1.17.x
       - name: Checkout code
-        uses: actions/checkout@v2
+        uses: actions/checkout@v2.3.5
       - name: Run Go Tests with Coverage
         run: make test SKIP_ASSET=1
   int-test:
@@ -30,7 +30,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout code
-        uses: actions/checkout@v2
+        uses: actions/checkout@v2.3.5
       - name: Build images
         run: docker-compose -f integration/docker-compose.test.yml build
       - name: Run tests

.reflex

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

Dockerfile

@@ -1,27 +1,29 @@
 # Build assets
-FROM node:current-alpine as node
+FROM node:16-alpine as node
 
-RUN apk add --no-cache git openssh python make g++ util-linux
+RUN apk add --no-cache git openssh make g++ util-linux curl python3 && curl -f https://get.pnpm.io/v6.16.js | node - add --global pnpm
 
 WORKDIR /build
 
-# Install dependencies
-COPY package*.json yarn.lock ./
-RUN yarn install --ignore-scripts --network-timeout 1000000
+# Install dependencies from lock file
+COPY pnpm-lock.yaml ./
+RUN pnpm fetch
 
-# Copy config files
-COPY .* webpack*.js ./
+# Copy files
+COPY package.json .* webpack*.js ./
 
 # Copy assets to build
 COPY assets ./assets
 
+# Install dependencies
+RUN pnpm install -r --offline
+
 # Do the build
-RUN yarn build
+RUN pnpm build
 
-FROM golang:1.16-alpine AS builder
+FROM golang:1.17.2-alpine AS builder
 
-RUN apk add --no-cache git ca-certificates
-RUN mkdir /dozzle
+RUN apk add --no-cache git ca-certificates && mkdir /dozzle
 
 WORKDIR /dozzle
 

Makefile

@@ -1,32 +1,34 @@
-TAG := $(shell git describe --tags)
-PLATFROMS := linux/amd64,linux/arm/v7,linux/arm64/v8
-
-
-.PHONY: publish
-publish:
-	docker buildx build --build-arg TAG=$(TAG) --platform $(PLATFROMS) -t amir20/dozzle:latest -t amir20/dozzle:$(TAG) --push .
-
 .PHONY: clean
 clean:
 	@rm -rf static
-	@go clean
+	@go clean -i
 
 .PHONY: static
 static:
-	@yarn build
+	@pnpm build
 
 .PHONY: fake_static
 fake_static:
-	@echo 'Skipping yarn build'
+	@echo 'Skipping asset build'
 	@mkdir -p static
-	@echo "yarn build was skipped" > static/index.html
+	@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,32 +1,42 @@
+# Dozzle - [dozzle.dev](https://dozzle.dev/)
+
+Dozzle is a small lightweight application with a web based interface to monitor Docker logs. It doesn’t store any log files. It is for live monitoring of your container logs only.
+
+![Image](https://github.com/amir20/dozzle/blob/master/.github/demo.gif?raw=true)
+
 [![Go Report Card](https://goreportcard.com/badge/github.com/amir20/dozzle)](https://goreportcard.com/report/github.com/amir20/dozzle)
 [![Docker Pulls](https://img.shields.io/docker/pulls/amir20/dozzle.svg)](https://hub.docker.com/r/amir20/dozzle/)
 [![Docker Size](https://images.microbadger.com/badges/image/amir20/dozzle.svg)](https://hub.docker.com/r/amir20/dozzle/)
 [![Docker Version](https://images.microbadger.com/badges/version/amir20/dozzle.svg)](https://hub.docker.com/r/amir20/dozzle/)
 ![Test](https://github.com/amir20/dozzle/workflows/Test/badge.svg)
 
-# Dozzle - [dozzle.dev](https://dozzle.dev/)
+## Features
 
-Dozzle is a simple, lightweight application that provides you with a web based interface to monitor your Docker container logs live. It doesn’t store log information, it is for live monitoring of your container logs only.
+- 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 🚨
 
-While dozzle should work for most, it is not meant to be a full logging solution. For enterprise applications, products like [Loggly](https://www.loggly.com), [Papertrail](https://papertrailapp.com) or [Kibana](https://www.elastic.co/products/kibana) are more suited.
+Dozzle 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. Dozzle aims to stay simple, small and free.
+Dozzle doesn't cost any money and aims to focus on real-time debugging.
 
-![Image](https://github.com/amir20/dozzle/blob/master/.github/demo.gif?raw=true)
-
-## Getting dozzle
+## Getting Dozzle
 
 Dozzle is a very small Docker container (4 MB compressed). Pull the latest release from the index:
 
     $ docker pull amir20/dozzle:latest
 
-## Using dozzle
+## Using Dozzle
 
 The simplest way to use dozzle is to run the docker container. Also, mount the Docker Unix socket with `--volume` to `/var/run/docker.sock`:
 
     $ docker run --name dozzle -d --volume=/var/run/docker.sock:/var/run/docker.sock -p 8888:8080 amir20/dozzle:latest
 
-dozzle will be available at [http://localhost:8888/](http://localhost:8888/). You can change `-p 8888:8080` to any port. For example, if you want to view dozzle over port 4040 then you would do `-p 4040:8080`.
+Dozzle will be available at [http://localhost:8888/](http://localhost:8888/). You can change `-p 8888:8080` to any port. For example, if you want to view dozzle over port 4040 then you would do `-p 4040:8080`.
 
 ### With Docker swarm
 
@@ -51,7 +61,7 @@ dozzle will be available at [http://localhost:8888/](http://localhost:8888/). Yo
 
 #### Security
 
-dozzle doesn't support authentication out of the box. You can control the device dozzle binds to by passing `--addr` parameter. For example,
+You can control the device Dozzle binds to by passing `--addr` parameter. For example,
 
     $ docker run --volume=/var/run/docker.sock:/var/run/docker.sock -p 8888:1224 amir20/dozzle:latest --addr localhost:1224
 
@@ -61,38 +71,54 @@ If you wish to restrict the containers shown you can pass the `--filter` paramet
 
     $ docker run --volume=/var/run/docker.sock:/var/run/docker.sock -p 8888:1224 amir20/dozzle:latest --filter name=foo
 
-this would then only allow you to view containers with a name starting with "foo". You can use other filters like `status` as well, please check the official docker [command line docs](https://docs.docker.com/engine/reference/commandline/ps/#filtering) for available filters.
+this would then only allow you to view containers with a name starting with "foo". You can use other filters like `status` as well, please check the official docker [command line docs](https://docs.docker.com/engine/reference/commandline/ps/#filtering) for available filters. Multiple `--filter` arguments can be provided.
+
+#### Authentication
+
+Dozzle supports a very simple authentication out of the box with just username and password. You should deploy using SSL to keep the credentials safe. See configuration to use `--username` and `--password`.
 
 #### Changing base URL
 
-dozzle by default mounts to "/". If you want to control the base path you can use the `--base` option. For example, if you want to mount at "/foobar",
+Dozzle by default mounts to "/". If you want to control the base path you can use the `--base` option. For example, if you want to mount at "/foobar",
 then you can override by using `--base /foobar`. See env variables below for using `DOZZLE_BASE` to change this.
 
     $ docker run --volume=/var/run/docker.sock:/var/run/docker.sock -p 8080:8080 amir20/dozzle:latest --base /foobar
 
-dozzle will be available at [http://localhost:8080/foobar/](http://localhost:8080/foobar/).
+Dozzle will be available at [http://localhost:8080/foobar/](http://localhost:8080/foobar/).
+
+#### Analytics collected
+
+Dozzle collects anonymous user configurations using Google Analytics. Why? Dozzle is an open source project with no funding. As a result, there is no time to do user studies of Dozzle. Analytics is collected to prioritize features and fixes based on how people use Dozzle. This data is completely public and can be viewed live using [ Data Studio dashboard](https://datastudio.google.com/s/naeIu0MiWsY).
+
+If you do not want to be tracked at all, see the `--no-analytics` flag below.
 
 #### Environment variables and configuration
 
-Dozzle follows the [12-factor](https://12factor.net/) model. Configurations can use the CLI flags or enviroment variables. The table below outlines all supported options and their respective env vars.
+Dozzle follows the [12-factor](https://12factor.net/) model. Configurations can use the CLI flags or environment variables. The table below outlines all supported options and their respective env vars.
 
-| Flag         | Env Variable         | Default |
-| ------------ | -------------------- | ------- |
-| `--addr`     | `DOZZLE_ADDR`        | `:8080` |
-| `--base`     | `DOZZLE_BASE`        | `/`     |
-| `--level`    | `DOZZLE_LEVEL`       | `info`  |
-| n/a          | `DOCKER_API_VERSION` | not set |
-| `--tailSize` | `DOZZLE_TAILSIZE`    | `300`   |
-| `--filter`   | `DOZZLE_FILTER`      | `""`    |
+| Flag             | Env Variable          | Default |
+| ---------------- | --------------------- | ------- |
+| `--addr`         | `DOZZLE_ADDR`         | `:8080` |
+| `--base`         | `DOZZLE_BASE`         | `/`     |
+| `--level`        | `DOZZLE_LEVEL`        | `info`  |
+| n/a              | `DOCKER_API_VERSION`  | not set |
+| `--tailSize`     | `DOZZLE_TAILSIZE`     | `300`   |
+| `--filter`       | `DOZZLE_FILTER`       | `""`    |
+| `--username`     | `DOZZLE_USERNAME`     | `""`    |
+| `--password`     | `DOZZLE_PASSWORD`     | `""`    |
+| `--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.
+Dozzle uses Server Sent Events (SSE) which connects to a server using a HTTP stream without closing the connection. If any proxy tries to buffer this connection, then Dozzle never receives the data and hangs forever waiting for the reverse proxy to flush the buffer. Since version `1.23.0`, Dozzle sends the `X-Accel-Buffering: no` header which should stop reverse proxies buffering. However, some proxies may ignore this header. In those cases, you need to explicitly disable any buffering.
 
- Below is an example with nginx and using `proxy_pass` to disable buffering.
+Below is an example with nginx and using `proxy_pass` to disable buffering.
 
 ```
     server {
@@ -111,20 +137,29 @@ Dozzle follows the [12-factor](https://12factor.net/) model. Configurations can
     }
 
 ```
+
 </details>
 
 <details>
  <summary>What data does Dozzle collect?</summary>
 
- Dozzle does not collect any metrics or analytics. Dozzle has a [strict](https://github.com/amir20/dozzle/blob/master/routes.go#L33-L38) Content Security Policy which only allows the following policies:
+Dozzle does collect some analytics. Analytics is anonymous usage tracking of the features which are used the most. See the section above on how to disable any analytic collection.
 
- - Allow connect to `api.github.com` to fetch most recent version.
- - Allow fonts from `fonts.gstatic.com` and styles from `fonts.googleapis.com`
- - Only allow `<script>` and `<style>` files from `self`
+In the browser, Dozzle has a [strict](https://github.com/amir20/dozzle/blob/master/web/csp.go#L9) Content Security Policy which only allows the following policies:
+
+- Allow connect to `api.github.com` to fetch most recent version.
+- Only allow `<script>` and `<style>` files from `self`
+
+Dozzle opens all links with `rel="noopener"`.
 
- Dozzle opens all links with `rel="noopener"`.
 </details>
 
+<details>
+ <summary>We have tools that uses Dozzle when a new container is created. How can I get a direct link to a container by name?</summary>
+
+Dozzle has a [special route](https://github.com/amir20/dozzle/blob/master/assets/pages/Show.vue) that can be used to search containers by name and then forward to that container. For example, if you have a container with name `"foo.bar"` and id `abc123`, you can send your users to `/show?name=foo.bar` which will be forwarded to `/container/abc123`.
+
+</details>
 
 ## License
 
@@ -137,6 +172,5 @@ To Build and test locally:
 1. Install NodeJs.
 2. Install Go.
 3. Install [reflex](https://github.com/cespare/reflex) with `get -u github.com/cespare/reflex` outside of dozzle.
-4. Install node modules with `yarn`.
-5. Do `yarn dev`
-
+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.vue

@@ -1,9 +1,9 @@
 <template>
   <main>
-    <mobile-menu v-if="isMobile"></mobile-menu>
+    <mobile-menu v-if="isMobile && !authorizationNeeded"></mobile-menu>
 
     <splitpanes @resized="onResized($event)">
-      <pane min-size="10" :size="settings.menuWidth" v-if="!isMobile && !collapseNav">
+      <pane min-size="10" :size="settings.menuWidth" v-if="!authorizationNeeded && !isMobile && !collapseNav">
         <side-menu @search="showFuzzySearch"></side-menu>
       </pane>
       <pane min-size="10">
@@ -11,15 +11,17 @@
           <pane class="has-min-height router-view">
             <router-view></router-view>
           </pane>
-          <pane v-for="other in activeContainers" :key="other.id" v-if="!isMobile">
-            <log-container
-              :id="other.id"
-              show-title
-              scrollable
-              closable
-              @close="removeActiveContainer(other)"
-            ></log-container>
-          </pane>
+          <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>
@@ -28,7 +30,7 @@
       class="button is-small is-rounded is-settings-control"
       :class="{ collapsed: collapseNav }"
       id="hide-nav"
-      v-if="!isMobile"
+      v-if="!isMobile && !authorizationNeeded"
     >
       <span class="icon">
         <icon :name="collapseNav ? 'chevron-right' : 'chevron-left'"></icon>
@@ -83,6 +85,7 @@ export default {
     }
     this.menuWidth = this.settings.menuWidth;
     hotkeys("command+k, ctrl+k", (event, handler) => {
+      event.preventDefault();
       this.showFuzzySearch();
     });
   },
@@ -106,7 +109,7 @@ export default {
     },
   },
   computed: {
-    ...mapState(["isMobile", "settings", "containers"]),
+    ...mapState(["isMobile", "settings", "containers", "authorizationNeeded"]),
     ...mapGetters(["visibleContainers", "activeContainers"]),
     hasSmallerScrollbars() {
       return this.settings.smallerScrollbars;

assets/components/ContainerTitle.vue

@@ -1,13 +1,15 @@
 <template>
   <div class="columns is-marginless has-text-weight-bold is-family-monospace">
-    <span class="column is-ellipsis">{{ value }}</span>
+    <span class="column is-ellipsis"
+      >{{ container.name }} <span class="tag is-dark">{{ container.image }}</span></span
+    >
   </div>
 </template>
 
 <script>
 export default {
   props: {
-    value: String,
+    container: Object,
   },
   name: "ContainerTitle",
 };

assets/components/LogContainer.vue

@@ -3,7 +3,7 @@
     <template v-slot:header v-if="showTitle">
       <div class="mr-0 columns is-vcentered is-hidden-mobile">
         <div class="column is-clipped">
-          <container-title :value="container.name" @close="$emit('close')"></container-title>
+          <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>
@@ -33,16 +33,16 @@
 </template>
 
 <script>
-import { mapGetters } from "vuex";
-
 import LogViewerWithSource from "./LogViewerWithSource";
 import ScrollableView from "./ScrollableView";
 import ContainerTitle from "./ContainerTitle";
 import ContainerStat from "./ContainerStat";
 import Icon from "./Icon";
 import config from "../store/config";
+import containerMixin from "./mixins/container";
 
 export default {
+  mixins: [containerMixin],
   props: {
     id: {
       type: String,
@@ -69,10 +69,6 @@ export default {
     Icon,
   },
   computed: {
-    ...mapGetters(["allContainersById"]),
-    container() {
-      return this.allContainersById[this.id];
-    },
     base() {
       return config.base;
     },

assets/components/LogEventSource.spec.js

@@ -8,6 +8,7 @@ import LogViewer from "./LogViewer.vue";
 
 jest.mock("lodash.debounce", () =>
   jest.fn((fn) => {
+    fn.cancel = () => {};
     return fn;
   })
 );
@@ -27,16 +28,24 @@ describe("<LogEventSource />", () => {
     debounce.mockClear();
   });
 
-  function createLogEventSource(searchFilter = null) {
+  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 } };
+    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, {
@@ -57,22 +66,25 @@ describe("<LogEventSource />", () => {
   });
 
   test("should connect to EventSource", async () => {
-    shallowMount(LogEventSource);
-    sources["/api/logs/stream?id=abc"].emitOpen();
-    expect(sources["/api/logs/stream?id=abc"].readyState).toBe(1);
+    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"].emitOpen();
+    sources["/api/logs/stream?id=abc&lastEventId="].emitOpen();
     wrapper.destroy();
-    expect(sources["/api/logs/stream?id=abc"].readyState).toBe(2);
+    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"].emitOpen();
-    sources["/api/logs/stream?id=abc"].emitMessage({ data: `2019-06-12T10:55:42.459034602Z "This is a message."` });
+    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;
@@ -81,15 +93,15 @@ describe("<LogEventSource />", () => {
     expect(messageWithoutKey).toMatchInlineSnapshot(`
       Object {
         "date": 2019-06-12T10:55:42.459Z,
-        "message": " \\"This is a message.\\"",
+        "message": "\\"This is a message.\\"",
       }
     `);
   });
 
   test("should parse messages with loki's timestamp format", async () => {
     const wrapper = createLogEventSource();
-    sources["/api/logs/stream?id=abc"].emitOpen();
-    sources["/api/logs/stream?id=abc"].emitMessage({ data: `2020-04-27T12:35:43.272974324+02:00 xxxxx` });
+    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;
@@ -98,15 +110,17 @@ describe("<LogEventSource />", () => {
     expect(messageWithoutKey).toMatchInlineSnapshot(`
       Object {
         "date": 2020-04-27T10:35:43.272Z,
-        "message": " xxxxx",
+        "message": "xxxxx",
       }
     `);
   });
 
   test("should pass messages to slot", async () => {
     const wrapper = createLogEventSource();
-    sources["/api/logs/stream?id=abc"].emitOpen();
-    sources["/api/logs/stream?id=abc"].emitMessage({ data: `2019-06-12T10:55:42.459034602Z "This is a message."` });
+    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;
@@ -116,7 +130,7 @@ describe("<LogEventSource />", () => {
     expect(messageWithoutKey).toMatchInlineSnapshot(`
       Object {
         "date": 2019-06-12T10:55:42.459Z,
-        "message": " \\"This is a message.\\"",
+        "message": "\\"This is a message.\\"",
       }
     `);
   });
@@ -138,61 +152,93 @@ describe("<LogEventSource />", () => {
 
     test("should render messages", async () => {
       const wrapper = createLogEventSource();
-      sources["/api/logs/stream?id=abc"].emitOpen();
-      sources["/api/logs/stream?id=abc"].emitMessage({ data: `2019-06-12T10:55:42.459034602Z "This is a message."` });
+      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 class=""><span class="date"><time datetime="2019-06-12T10:55:42.459Z">today at 10:55 AM</time></span> <span class="text"> "This is a message."</span></li>
+          <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"].emitOpen();
-      sources["/api/logs/stream?id=abc"].emitMessage({
+      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 class=""><span class="date"><time datetime="2019-06-12T10:55:42.459Z">today at 10:55 AM</time></span> <span class="text"> <span style="color:#000">black<span style="color:#AAA">white</span></span></span></li>
+          <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"].emitOpen();
-      sources["/api/logs/stream?id=abc"].emitMessage({
+      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 class=""><span class="date"><time datetime="2019-06-12T10:55:42.459Z">today at 10:55 AM</time></span> <span class="text"> &lt;test&gt;foo bar&lt;/test&gt;</span></li>
+          <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("test");
-      sources["/api/logs/stream?id=abc"].emitOpen();
-      sources["/api/logs/stream?id=abc"].emitMessage({
+      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"].emitMessage({
+      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 class=""><span class="date"><time datetime="2019-06-12T10:55:42.459Z">today at 10:55 AM</time></span> <span class="text"> This is a <mark>test</mark> &lt;hi&gt;&lt;/hi&gt;</span></li>
+          <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

@@ -9,9 +9,11 @@
 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,
@@ -20,29 +22,49 @@ export default {
     return {
       messages: [],
       buffer: [],
+      es: null,
+      lastEventId: null,
     };
   },
   created() {
-    this.es = null;
-    this.loadLogs(this.id);
     this.flushBuffer = debounce(this.flushNow, 250, { maxWait: 1000 });
+    this.loadLogs();
+  },
+  beforeDestroy() {
+    this.es.close();
   },
   methods: {
-    loadLogs(id) {
+    loadLogs() {
       this.reset();
-      this.es = new EventSource(`${config.base}/api/logs/stream?id=${this.id}`);
-      this.es.addEventListener("container-stopped", (e) => {
-        this.es.close();
-        this.buffer.push({ event: "container-stopped", message: "Container stopped", date: new Date() });
-        this.flushBuffer();
-        this.flushBuffer.flush();
-      });
+      this.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.buffer.push(this.parseMessage(e.data));
-        this.flushBuffer();
-      };
-      this.$once("hook:beforeDestroy", () => this.es.close());
+      this.es.onmessage = (e) => this.onMessage(e);
     },
     flushNow() {
       this.messages.push(...this.buffer);
@@ -51,11 +73,12 @@ export default {
     reset() {
       if (this.es) {
         this.es.close();
-        this.es = null;
-        this.flushBuffer.cancel();
       }
+      this.flushBuffer.cancel();
+      this.es = null;
       this.messages = [];
       this.buffer = [];
+      this.lastEventId = null;
     },
     async loadOlderLogs() {
       if (this.messages.length < 300) return;
@@ -84,14 +107,14 @@ export default {
       }
       const key = data.substring(0, i);
       const date = new Date(key);
-      const message = data.substring(i);
+      const message = data.substring(i + 1);
       return { key, date, message };
     },
   },
   watch: {
     id(newValue, oldValue) {
       if (oldValue !== newValue) {
-        this.loadLogs(newValue);
+        this.loadLogs();
       }
     },
   },

assets/components/LogViewer.vue

@@ -1,13 +1,13 @@
 <template>
   <ul class="events" :class="settings.size">
-    <li v-for="item in filtered" :key="item.key" :class="{ event: !!item.event }">
+    <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 { mapActions, mapGetters, mapState } from "vuex";
+import { mapState } from "vuex";
 import AnsiConvertor from "ansi-to-html";
 import DOMPurify from "dompurify";
 import RelativeTime from "./RelativeTime";
@@ -63,8 +63,8 @@ export default {
 </script>
 <style scoped lang="scss">
 .events {
-  padding: 10px;
-  font-family: "Roboto Mono", monaco, monospace;
+  padding: 1em;
+  font-family: SFMono-Regular, Consolas, Liberation Mono, monaco, Menlo, monospace;
 
   & > li {
     word-wrap: break-word;
@@ -73,6 +73,12 @@ export default {
       scroll-snap-align: end;
       scroll-margin-block-end: 5rem;
     }
+    &[data-event="container-stopped"] {
+      color: #f14668;
+    }
+    &[data-event="container-started"] {
+      color: hsl(141, 53%, 53%);
+    }
   }
 
   &.small {
@@ -104,10 +110,6 @@ export default {
   white-space: pre-wrap;
 }
 
-li.event {
-  color: #f14668;
-}
-
 ::v-deep mark {
   border-radius: 2px;
   background-color: var(--secondary-color);

assets/components/MobileMenu.vue

@@ -70,7 +70,7 @@ aside {
   left: 0;
   right: 0;
   background: var(--scheme-main-ter);
-  z-index: 2;
+  z-index: 10;
   max-height: 100vh;
   overflow: auto;
 

assets/components/RelativeTime.vue

@@ -3,9 +3,10 @@
 </template>
 
 <script>
-import { mapActions, mapState } from "vuex";
+import { mapState } from "vuex";
 import { formatRelative } from "date-fns";
-import { enGB, enUS } from "date-fns/locale";
+import enGB from "date-fns/locale/en-GB";
+import enUS from "date-fns/locale/en-US";
 
 const use24Hr =
   new Intl.DateTimeFormat(undefined, {
@@ -30,7 +31,14 @@ export default {
   computed: {
     ...mapState(["settings"]),
     locale() {
-      return styles[this.settings.hourStyle];
+      const locale = styles[this.settings.hourStyle];
+      const oldFormatter = locale.formatRelative;
+      return {
+        ...locale,
+        formatRelative(token) {
+          return oldFormatter(token) + "p";
+        },
+      };
     },
   },
   filters: {

assets/components/ScrollableView.vue

@@ -14,7 +14,7 @@
     <div class="is-scrollbar-notification">
       <transition name="fade">
         <button class="button" :class="hasMore ? 'has-more' : ''" @click="scrollToBottom('instant')" v-show="paused">
-          <icon name="download"></icon>
+          <icon name="chevrons-down"></icon>
         </button>
       </transition>
     </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/index.ejs

@@ -4,14 +4,12 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Dozzle</title>
-    <link
-      href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400&family=Roboto+Mono&display=swap"
-      rel="stylesheet"
-    />
     <script type="application/json" id="config__json">
       {
         "base": "{{ .Base }}",
-        "version": "{{ .Version }}"
+        "version": "{{ .Version }}",
+        "authorizationNeeded": "{{ .AuthorizationNeeded }}",
+        "secured": "{{ .Secured }}"
       }
     </script>
   </head>

assets/main.js

@@ -10,7 +10,7 @@ import Autocomplete from "buefy/dist/esm/autocomplete";
 import store from "./store";
 import config from "./store/config";
 import App from "./App.vue";
-import { Container, Settings, Index, Show, ContainerNotFound, PageNotFound } from "./pages";
+import { Container, Settings, Index, Show, ContainerNotFound, PageNotFound, Login } from "./pages";
 
 Vue.use(VueRouter);
 Vue.use(Meta);
@@ -47,6 +47,11 @@ const routes = [
     component: Show,
     name: "show",
   },
+  {
+    path: "/login",
+    component: Login,
+    name: "login",
+  },
   {
     path: "/*",
     component: PageNotFound,

assets/pages/Container.vue

@@ -6,7 +6,7 @@
 </template>
 
 <script>
-import { mapActions, mapGetters, mapState } from "vuex";
+import { mapGetters } from "vuex";
 import Search from "../components/Search";
 import LogContainer from "../components/LogContainer";
 

assets/pages/ContainerNotFound.vue

@@ -14,5 +14,10 @@
 <script>
 export default {
   name: "ContainerNotFound",
+  metaInfo() {
+    return {
+      title: "Not Found",
+    };
+  },
 };
 </script>

assets/pages/Index.vue

@@ -3,7 +3,14 @@
     <section class="hero is-small mt-4">
       <div class="hero-body">
         <div class="container">
-          <h1 class="title">Hello, there!</h1>
+          <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>
@@ -28,7 +35,7 @@
       </div>
     </section>
 
-    <section class="columns is-centered section">
+    <section class="columns is-centered section is-marginless">
       <div class="column is-4">
         <div class="panel">
           <p class="panel-heading">Containers</p>
@@ -84,6 +91,8 @@ export default {
       version: config.version,
       search: null,
       sort: "running",
+      secured: config.secured,
+      base: config.base,
     };
   },
   methods: {

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

@@ -14,5 +14,10 @@
 <script>
 export default {
   name: "PageNotFound",
+  metaInfo() {
+    return {
+      title: "404 Error",
+    };
+  },
 };
 </script>

assets/pages/Settings.vue

@@ -91,7 +91,6 @@
 
 <script>
 import gt from "semver/functions/gt";
-import valid from "semver/functions/valid";
 import { mapActions, mapState } from "vuex";
 import Icon from "../components/Icon";
 import config from "../store/config";
@@ -111,7 +110,7 @@ export default {
   },
   async created() {
     const releases = await (await fetch("https://api.github.com/repos/amir20/dozzle/releases")).json();
-    if (this.currentVersion !== "dev") {
+    if (this.currentVersion !== "master") {
       this.hasUpdate = gt(releases[0].tag_name, this.currentVersion);
     } else {
       this.hasUpdate = true;

assets/pages/index.js

@@ -4,3 +4,4 @@ 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

@@ -1,9 +1,13 @@
 const config = JSON.parse(document.querySelector("script#config__json").textContent);
 if (config.version == "{{ .Version }}") {
-  config.version = "dev";
+  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

@@ -16,19 +16,19 @@ const state = {
   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 })
-    );
+    containers.forEach((container) => {
+      container.stat =
+        containersById[container.id] && containersById[container.id].stat
+          ? containersById[container.id].stat
+          : { memoryUsage: 0, cpu: 0 };
+    });
 
     state.containers = containers;
   },
@@ -101,10 +101,12 @@ const getters = {
   },
 };
 
-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);
+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));
 

assets/styles.scss

@@ -1,7 +1,7 @@
 @charset "utf-8";
 @import "~bulma/sass/utilities/initial-variables.sass";
 
-$body-family: "Roboto", sans-serif;
+
 $body-background-color: var(--body-background-color);
 
 $scheme-main: var(--scheme-main);

docker/client.go

@@ -40,16 +40,13 @@ type Client interface {
 	ContainerStats(context.Context, string, chan<- ContainerStat) error
 }
 
-// NewClient creates a new instance of Client
-func NewClient() Client {
-	return NewClientWithFilters(map[string]string{})
-}
-
 // NewClientWithFilters creates a new instance of Client with docker filters
-func NewClientWithFilters(f map[string]string) Client {
+func NewClientWithFilters(f map[string][]string) Client {
 	filterArgs := filters.NewArgs()
-	for k, v := range f {
-		filterArgs.Add(k, v)
+	for key, values := range f {
+		for _, value := range values {
+			filterArgs.Add(key, value)
+		}
 	}
 
 	log.Debugf("filterArgs = %v", filterArgs)
@@ -205,9 +202,12 @@ func (d *dockerClient) Events(ctx context.Context) (<-chan ContainerEvent, <-cha
 				if !ok {
 					return
 				}
-				messages <- ContainerEvent{
-					ActorID: message.Actor.ID[:12],
-					Name:    message.Action,
+
+				if message.Type == "container" && len(message.Actor.ID) > 0 {
+					messages <- ContainerEvent{
+						ActorID: message.Actor.ID[:12],
+						Name:    message.Action,
+					}
 				}
 			}
 		}

go.mod

@@ -1,43 +1,44 @@
 module github.com/amir20/dozzle
 
 require (
-	github.com/Microsoft/go-winio v0.4.16 // indirect
+	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.4.4 // indirect
+	github.com/containerd/containerd v1.5.5 // indirect
 	github.com/docker/distribution v2.7.1+incompatible // indirect
-	github.com/docker/docker v20.10.5+incompatible
+	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/fsnotify/fsnotify v1.4.9 // indirect
 	github.com/gogo/protobuf v1.3.2 // indirect
-	github.com/golang/protobuf v1.5.1 // indirect
 	github.com/gorilla/mux v1.8.0
-	github.com/magiconair/properties v1.8.4
-	github.com/mitchellh/mapstructure v1.4.1 // indirect
+	github.com/gorilla/sessions v1.2.1
+	github.com/magiconair/properties v1.8.5
 	github.com/moby/term v0.0.0-20201216013528-df9cb8a40635 // indirect
 	github.com/morikuni/aec v1.0.0 // indirect
 	github.com/opencontainers/go-digest v1.0.0 // indirect
 	github.com/opencontainers/image-spec v1.0.1 // indirect
-	github.com/pelletier/go-toml v1.8.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/spf13/cast v1.3.1 // indirect
-	github.com/spf13/jwalterweatherman v1.1.0 // indirect
-	github.com/spf13/pflag v1.0.5
-	github.com/spf13/viper v1.7.1
 	github.com/stretchr/objx v0.3.0 // indirect
 	github.com/stretchr/testify v1.7.0
-	golang.org/x/net v0.0.0-20210316092652-d523dce5a7f4 // indirect
-	golang.org/x/sys v0.0.0-20210320140829-1e4c9ba3b0c4 // indirect
-	golang.org/x/text v0.3.5 // indirect
-	google.golang.org/genproto v0.0.0-20210319143718-93e7006c17a6 // indirect
-	google.golang.org/grpc v1.36.0 // indirect
-	gopkg.in/ini.v1 v1.62.0 // indirect
-	gopkg.in/yaml.v2 v2.4.0 // indirect
+	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
-	gotest.tools/v3 v3.0.3 // indirect
 )
 
-go 1.16
+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/__tests__/default.js

@@ -68,7 +68,7 @@ describe("home page", () => {
       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(2) span.text", (e) => e.textContent);
+      const text = await page.$eval("ul.events li:nth-child(1) span.text", (e) => e.textContent);
 
       expect(text).toContain("Dozzle version dev");
     });

integration/docker-compose.test.yml

@@ -7,6 +7,7 @@ services:
     environment:
       - DOZZLE_FILTER=name=custom_base
       - DOZZLE_BASE=/foobarbase
+      - DOZZLE_NO_ANALYTICS=1
     build:
       context: ..
   dozzle:
@@ -15,6 +16,7 @@ services:
       - /var/run/docker.sock:/var/run/docker.sock
     environment:
       - DOZZLE_FILTER=name=dozzle
+      - DOZZLE_NO_ANALYTICS=1
     build:
       context: ..
   integration:
@@ -26,6 +28,7 @@ services:
     environment:
       - DEFAULT_URL=http://dozzle:8080/
       - CUSTOM_URL=http://custom_base:8080/foobarbase
+      - DOZZLE_NO_ANALYTICS=1
     depends_on:
       - dozzle
       - custom_base

integration/package.json

@@ -8,9 +8,9 @@
  "author": "",
  "license": "ISC",
  "dependencies": {
-  "jest": "^26.0.1",
+  "jest": "^27.0.6",
   "jest-image-snapshot": "^4.0.0",
-  "puppeteer": "^8.0.0"
+  "puppeteer": "^10.4.0"
  },
  "jest": {
   "preset": "jest-puppeteer",
@@ -19,6 +19,6 @@
   ]
  },
  "devDependencies": {
-  "jest-puppeteer": "^4.4.0"
+  "jest-puppeteer": "^6.0.0"
  }
 }

jest.config.js

@@ -1,5 +1,6 @@
 module.exports = {
   clearMocks: true,
+  testEnvironment: "jsdom",
   moduleFileExtensions: ["js", "json", "vue"],
   coveragePathIgnorePatterns: ["node_modules"],
   testPathIgnorePatterns: ["node_modules", "<rootDir>/integration/"],

main.go

@@ -4,90 +4,95 @@ import (
 	"context"
 	"embed"
 	"io/fs"
-	"net/url"
+	"net/http"
+	_ "net/http/pprof"
 	"os"
 	"os/signal"
 	"strings"
+	"syscall"
 	"time"
 
+	"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"
-	"github.com/spf13/pflag"
-	"github.com/spf13/viper"
 )
 
 var (
-	addr     = ""
-	base     = ""
-	level    = ""
-	tailSize = 300
-	filters  map[string]string
-	version  = "dev"
+	version = "head"
 )
 
+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
 
-type handler struct {
-	client docker.Client
-}
+func main() {
+	var args args
+	parser := arg.MustParse(&args)
+	args.Filter = make(map[string][]string)
 
-func init() {
-	pflag.String("addr", ":8080", "http service address")
-	pflag.String("base", "/", "base address of the application to mount")
-	pflag.String("level", "info", "logging level")
-	pflag.Int("tailSize", 300, "Tail size to use for initial container logs")
-	pflag.StringToStringVar(&filters, "filter", map[string]string{}, "Container filters to use for showing logs")
-	pflag.Parse()
-
-	viper.AutomaticEnv()
-	viper.SetEnvPrefix("DOZZLE")
-	viper.BindPFlags(pflag.CommandLine)
-
-	addr = viper.GetString("addr")
-	base = viper.GetString("base")
-	level = viper.GetString("level")
-	tailSize = viper.GetInt("tailSize")
-
-	// Until https://github.com/spf13/viper/issues/911 is fixed. We have to use this hacky way.
-	// filters = viper.GetStringMapString("filter")
-	if value, ok := os.LookupEnv("DOZZLE_FILTER"); ok {
-		log.Infof("Parsing %s", value)
-		urlValues, err := url.ParseQuery(strings.ReplaceAll(value, ",", "&"))
-		if err != nil {
-			log.Fatal(err)
-		}
-		filters = map[string]string{}
-		for k, v := range urlValues {
-			filters[k] = v[0]
+	for _, filter := range args.FilterStrings {
+		pos := strings.Index(filter, "=")
+		if pos == -1 {
+			parser.Fail("each filter should be of the form key=value")
 		}
+		key := filter[:pos]
+		val := filter[pos+1:]
+		args.Filter[key] = append(args.Filter[key], val)
 	}
 
-	l, _ := log.ParseLevel(level)
-	log.SetLevel(l)
+	level, _ := log.ParseLevel(args.Level)
+	log.SetLevel(level)
 
 	log.SetFormatter(&log.TextFormatter{
 		DisableTimestamp:       true,
 		DisableLevelTruncation: true,
 	})
-}
 
-func main() {
 	log.Infof("Dozzle version %s", version)
-	dockerClient := docker.NewClientWithFilters(filters)
+	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:     addr,
-		Base:     base,
+		Addr:     args.Addr,
+		Base:     args.Base,
 		Version:  version,
-		TailSize: tailSize,
+		TailSize: args.TailSize,
+		Key:      args.Key,
+		Username: args.Username,
+		Password: args.Password,
 	}
 
 	static, err := fs.Sub(content, "static")
@@ -95,22 +100,53 @@ func main() {
 		log.Fatalf("Could not open embedded static folder: %v", err)
 	}
 
-	srv := web.CreateServer(dockerClient, static, config)
+	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 != nil {
+		if err := srv.ListenAndServe(); err != http.ErrServerClosed {
 			log.Fatal(err)
 		}
 	}()
 
 	c := make(chan os.Signal, 1)
 	signal.Notify(c, os.Interrupt)
-	signal.Notify(c, os.Kill)
+	signal.Notify(c, syscall.SIGTERM)
 	<-c
-	log.Infof("Shutting down...")
+	log.Info("Shutting down...")
 	ctx, cancel := context.WithTimeout(context.Background(), 2*time.Second)
 	defer cancel()
 	srv.Shutdown(ctx)
 	os.Exit(0)
 }
+
+func doStartEvent(arg args) {
+	if arg.NoAnalytics {
+		log.Debug("Analytics disabled.")
+		return
+	}
+	host, err := os.Hostname()
+	if err != nil {
+		log.Debug(err)
+		return
+	}
+
+	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,16 +1,14 @@
 {
  "name": "dozzle",
- "version": "3.4.2",
+ "version": "3.8.4",
  "description": "Realtime log viewer for docker containers. ",
  "scripts": {
   "watch": "npm-run-all -p watch:*",
   "watch:assets": "webpack --mode=development --watch",
-  "watch:server": "reflex -c .reflex",
-  "predev": "make fake_static",
-  "dev": "npm-run-all -p dev-server watch:server",
+  "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",
-  "prebuild": "yarn clean",
-  "build": "yarn webpack --mode=production",
+  "build": "rm -rf static && webpack --mode=production --progress",
   "clean": "rm -rf static",
   "release": "release-it",
   "test": "TZ=UTC jest",
@@ -27,56 +25,56 @@
  },
  "homepage": "https://github.com/amir20/dozzle#readme",
  "dependencies": {
-  "ansi-to-html": "^0.6.14",
-  "buefy": "^0.9.5",
-  "bulma": "^0.9.2",
-  "date-fns": "^2.19.0",
-  "dompurify": "^2.2.7",
+  "ansi-to-html": "^0.7.2",
+  "buefy": "^0.9.10",
+  "bulma": "^0.9.3",
+  "date-fns": "^2.25.0",
+  "dompurify": "^2.3.3",
   "fuzzysort": "^1.1.4",
-  "hotkeys-js": "^3.8.3",
+  "hotkeys-js": "^3.8.7",
   "lodash.debounce": "^4.0.8",
   "lodash.throttle": "^4.1.1",
   "semver": "^7.3.5",
-  "splitpanes": "^2.3.6",
+  "splitpanes": "^2.3.8",
   "store": "^2.0.12",
-  "vue": "^2.6.12",
+  "vue": "^2.6.14",
   "vue-meta": "^2.4.0",
-  "vue-router": "^3.5.1",
+  "vue-router": "^3.5.3",
   "vuex": "^3.6.2"
  },
  "devDependencies": {
-  "@babel/core": "^7.13.14",
-  "@babel/plugin-transform-runtime": "^7.13.10",
-  "@vue/component-compiler-utils": "^3.2.0",
-  "@vue/test-utils": "^1.1.3",
-  "autoprefixer": "^10.2.5",
+  "@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",
+  "autoprefixer": "^10.4.0",
   "babel-core": "^7.0.0-bridge.0",
-  "babel-jest": "^26.6.3",
+  "babel-jest": "^27.3.1",
   "babel-preset-env": "^1.7.0",
-  "caniuse-lite": "^1.0.30001204",
-  "css-loader": "^5.2.0",
+  "caniuse-lite": "^1.0.30001272",
+  "css-loader": "^6.5.0",
   "eventsourcemock": "^2.0.0",
-  "html-webpack-plugin": "^5.3.1",
-  "husky": "^6.0.0",
-  "jest": "^26.6.3",
+  "html-webpack-plugin": "^5.5.0",
+  "husky": "^7.0.4",
+  "jest": "^27.3.1",
   "jest-serializer-vue": "^2.0.2",
-  "lint-staged": "^10.5.4",
-  "mini-css-extract-plugin": "^1.4.0",
+  "lint-staged": "^11.2.6",
+  "mini-css-extract-plugin": "^2.4.3",
   "npm-run-all": "^4.1.5",
-  "postcss": "^8.2.9",
-  "postcss-loader": "^5.2.0",
-  "prettier": "^2.2.1",
-  "release-it": "^14.5.0",
-  "sass": "^1.32.8",
-  "sass-loader": "^11.0.1",
+  "postcss": "^8.3.11",
+  "postcss-loader": "^6.2.0",
+  "prettier": "^2.4.1",
+  "release-it": "^14.11.6",
+  "sass": "^1.43.4",
+  "sass-loader": "^12.3.0",
   "vue-hot-reload-api": "^2.3.4",
   "vue-jest": "^3.0.7",
-  "vue-loader": "^15.9.6",
+  "vue-loader": "^15.9.8",
   "vue-style-loader": "^4.1.3",
-  "vue-template-compiler": "^2.6.12",
-  "webpack": "^5.28.0",
-  "webpack-cli": "^4.6.0",
-  "webpack-dev-server": "^3.11.2",
+  "vue-template-compiler": "^2.6.14",
+  "webpack": "^5.60.0",
+  "webpack-cli": "^4.9.1",
+  "webpack-dev-server": "^4.4.0",
   "webpack-pwa-manifest": "^4.3.0"
  },
  "lint-staged": {
@@ -86,7 +84,8 @@
  },
  "release-it": {
   "github": {
-   "release": true
+   "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

@@ -1,7 +1,7 @@
 /* snapshot: Test_createRoutes_foobar */
 HTTP/1.1 200 OK
 Connection: close
-Content-Security-Policy: default-src 'none'; script-src 'self'; style-src 'self' 'unsafe-inline' fonts.googleapis.com; img-src 'self'; manifest-src 'self'; font-src fonts.gstatic.com; connect-src 'self' api.github.com; require-trusted-types-for 'script'
+Content-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
@@ -9,7 +9,7 @@ foo page
 /* snapshot: Test_createRoutes_index */
 HTTP/1.1 200 OK
 Connection: close
-Content-Security-Policy: default-src 'none'; script-src 'self'; style-src 'self' 'unsafe-inline' fonts.googleapis.com; img-src 'self'; manifest-src 'self'; font-src fonts.gstatic.com; connect-src 'self' api.github.com; require-trusted-types-for 'script'
+Content-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
@@ -17,16 +17,56 @@ index page
 /* snapshot: Test_createRoutes_redirect */
 HTTP/1.1 301 Moved Permanently
 Connection: close
-Content-Security-Policy: default-src 'none'; script-src 'self'; style-src 'self' 'unsafe-inline' fonts.googleapis.com; img-src 'self'; manifest-src 'self'; font-src fonts.gstatic.com; connect-src 'self' api.github.com; require-trusted-types-for 'script'
+Content-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' fonts.googleapis.com; img-src 'self'; manifest-src 'self'; font-src fonts.gstatic.com; connect-src 'self' api.github.com; require-trusted-types-for 'script'
+Content-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
@@ -34,6 +74,7 @@ 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
@@ -45,6 +86,7 @@ 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
@@ -56,6 +98,7 @@ 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
@@ -83,6 +126,7 @@ 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
@@ -94,6 +138,7 @@ 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
@@ -107,6 +152,7 @@ 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
@@ -118,6 +164,7 @@ 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

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

@@ -1,25 +1,14 @@
 package web
 
 import (
-	"bufio"
-	"compress/gzip"
-	"context"
-
-	"encoding/json"
 	"fmt"
 	"html/template"
-	"io"
 	"io/fs"
 	"io/ioutil"
 	"net/http"
-	_ "net/http/pprof"
-	"runtime"
-	"strings"
-
-	"time"
+	"path"
 
 	"github.com/amir20/dozzle/docker"
-	"github.com/dustin/go-humanize"
 
 	"github.com/gorilla/mux"
 	log "github.com/sirupsen/logrus"
@@ -31,13 +20,15 @@ type Config struct {
 	Addr     string
 	Version  string
 	TailSize int
+	Key      string
+	Username string
+	Password string
 }
 
 type handler struct {
-	client     docker.Client
-	content    fs.FS
-	config     *Config
-	fileServer http.Handler
+	client  docker.Client
+	content fs.FS
+	config  *Config
 }
 
 // CreateServer creates a service for http handler
@@ -50,21 +41,27 @@ func CreateServer(c docker.Client, content fs.FS, config Config) *http.Server {
 	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(setCSPHeaders)
+	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.HandleFunc("/api/logs/stream", h.streamLogs)
-	s.HandleFunc("/api/logs/download", h.downloadLogs)
-	s.HandleFunc("/api/logs", h.fetchLogsBetweenDates)
-	s.HandleFunc("/api/events/stream", h.streamEvents)
-	s.HandleFunc("/version", h.version)
+	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)
@@ -76,270 +73,61 @@ func createRouter(h *handler) *mux.Router {
 		s.PathPrefix("/").Handler(http.StripPrefix(base, http.HandlerFunc(h.index)))
 	}
 
-	h.fileServer = http.FileServer(http.FS(h.content))
+	fileServer = http.FileServer(http.FS(h.content))
 
 	return r
 }
 
-func setCSPHeaders(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' fonts.googleapis.com; img-src 'self'; manifest-src 'self'; font-src fonts.gstatic.com; connect-src 'self' api.github.com; require-trusted-types-for 'script'")
-		next.ServeHTTP(w, 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 != "/" {
-		h.fileServer.ServeHTTP(w, req)
+		fileServer.ServeHTTP(w, req)
 	} else {
-		file, err := h.content.Open("index.html")
-		if err != nil {
-			panic(err)
-		}
-		bytes, err := ioutil.ReadAll(file)
-		if err != nil {
-			panic(err)
-		}
-		tmpl, err := template.New("index.html").Parse(string(bytes))
-		if err != nil {
-			panic(err)
-		}
-
-		path := ""
-		if h.config.Base != "/" {
-			path = h.config.Base
-		}
-
-		data := struct {
-			Base    string
-			Version string
-		}{path, h.config.Version}
-		err = tmpl.Execute(w, data)
-		if err != nil {
-			http.Error(w, err.Error(), http.StatusInternalServerError)
-		}
-	}
-}
-
-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-cache")
-	w.Header().Set("Connection", "keep-alive")
-	w.Header().Set("X-Accel-Buffering", "no")
-
-	reader, err := h.client.ContainerLogs(r.Context(), container.ID, h.config.TailSize, r.Header.Get("Last-Event-ID"))
-	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()
-
-	scanner := bufio.NewScanner(reader)
-	for scanner.Scan() {
-		message := scanner.Text()
-		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()
-	}
-
-	log.Debugf("streaming stopped: %v", container.ID)
-
-	if scanner.Err() == nil {
-		log.Debugf("container stopped: %v", container.ID)
-		fmt.Fprintf(w, "event: container-stopped\ndata: end of stream\n\n")
-		f.Flush()
-	} else if scanner.Err() != context.Canceled {
-		log.Errorf("unknown error while streaming %v", scanner.Err())
-	}
-
-	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")
-	}
-}
-
-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-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:
+		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)
 }
-
-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/routes_test.go

@@ -1,16 +1,21 @@
 package web
 
 import (
+	"bytes"
 	"context"
 	"errors"
 	"io"
+	"io/fs"
 	"io/ioutil"
+	"mime/multipart"
 	"net/http"
 	"net/http/httptest"
 	"os"
 	"strings"
 	"testing"
+	"time"
 
+	"github.com/gorilla/mux"
 	"github.com/magiconair/properties/assert"
 
 	"github.com/amir20/dozzle/docker"
@@ -238,14 +243,9 @@ func Test_handler_streamEvents_error_request(t *testing.T) {
 }
 
 func Test_createRoutes_index(t *testing.T) {
-	mockedClient := new(MockedClient)
 	fs := afero.NewMemMapFs()
 	require.NoError(t, afero.WriteFile(fs, "index.html", []byte("index page"), 0644), "WriteFile should have no error.")
-	handler := createRouter(&handler{
-		client:  mockedClient,
-		content: afero.NewIOFS(fs),
-		config:  &Config{Base: "/"},
-	})
+	handler := createHandler(nil, afero.NewIOFS(fs), Config{Base: "/"})
 	req, err := http.NewRequest("GET", "/", nil)
 	require.NoError(t, err, "NewRequest should not return an error.")
 	rr := httptest.NewRecorder()
@@ -255,15 +255,10 @@ func Test_createRoutes_index(t *testing.T) {
 }
 
 func Test_createRoutes_redirect(t *testing.T) {
-	mockedClient := new(MockedClient)
 	fs := afero.NewMemMapFs()
 	require.NoError(t, afero.WriteFile(fs, "index.html", []byte("index page"), 0644), "WriteFile should have no error.")
 
-	handler := createRouter(&handler{
-		client:  mockedClient,
-		content: afero.NewIOFS(fs),
-		config:  &Config{Base: "/foobar"},
-	})
+	handler := createHandler(nil, afero.NewIOFS(fs), Config{Base: "/foobar"})
 	req, err := http.NewRequest("GET", "/foobar", nil)
 	require.NoError(t, err, "NewRequest should not return an error.")
 	rr := httptest.NewRecorder()
@@ -272,16 +267,23 @@ func Test_createRoutes_redirect(t *testing.T) {
 	abide.AssertHTTPResponse(t, t.Name(), rr.Result())
 }
 
+func Test_createRoutes_redirect_with_auth(t *testing.T) {
+	fs := afero.NewMemMapFs()
+	require.NoError(t, afero.WriteFile(fs, "index.html", []byte("index page"), 0644), "WriteFile should have no error.")
+
+	handler := createHandler(nil, afero.NewIOFS(fs), Config{Base: "/foobar", Username: "amir", Password: "password", Key: "key"})
+	req, err := http.NewRequest("GET", "/foobar/", nil)
+	require.NoError(t, err, "NewRequest should not return an error.")
+	rr := httptest.NewRecorder()
+
+	handler.ServeHTTP(rr, req)
+	abide.AssertHTTPResponse(t, t.Name(), rr.Result())
+}
+
 func Test_createRoutes_foobar(t *testing.T) {
-	mockedClient := new(MockedClient)
 	fs := afero.NewMemMapFs()
 	require.NoError(t, afero.WriteFile(fs, "index.html", []byte("foo page"), 0644), "WriteFile should have no error.")
-
-	handler := createRouter(&handler{
-		client:  mockedClient,
-		content: afero.NewIOFS(fs),
-		config:  &Config{Base: "/foobar"},
-	})
+	handler := createHandler(nil, afero.NewIOFS(fs), Config{Base: "/foobar"})
 	req, err := http.NewRequest("GET", "/foobar/", nil)
 	require.NoError(t, err, "NewRequest should not return an error.")
 	rr := httptest.NewRecorder()
@@ -291,17 +293,11 @@ func Test_createRoutes_foobar(t *testing.T) {
 }
 
 func Test_createRoutes_foobar_file(t *testing.T) {
-	mockedClient := new(MockedClient)
 	fs := afero.NewMemMapFs()
 	require.NoError(t, afero.WriteFile(fs, "index.html", []byte("index page"), 0644), "WriteFile should have no error.")
 	require.NoError(t, afero.WriteFile(fs, "test", []byte("test page"), 0644), "WriteFile should have no error.")
 
-	handler := createRouter(&handler{
-		client:     mockedClient,
-		content:    afero.NewIOFS(fs),
-		config:     &Config{Base: "/foobar"},
-		fileServer: nil,
-	})
+	handler := createHandler(nil, afero.NewIOFS(fs), Config{Base: "/foobar"})
 	req, err := http.NewRequest("GET", "/foobar/test", nil)
 	require.NoError(t, err, "NewRequest should not return an error.")
 	rr := httptest.NewRecorder()
@@ -311,15 +307,9 @@ func Test_createRoutes_foobar_file(t *testing.T) {
 }
 
 func Test_createRoutes_version(t *testing.T) {
-	mockedClient := new(MockedClient)
 	fs := afero.NewMemMapFs()
 	require.NoError(t, afero.WriteFile(fs, "index.html", []byte("index page"), 0644), "WriteFile should have no error.")
-
-	handler := createRouter(&handler{
-		client:  mockedClient,
-		content: afero.NewIOFS(fs),
-		config:  &Config{Base: "/", Version: "dev"},
-	})
+	handler := createHandler(nil, afero.NewIOFS(fs), Config{Base: "/", Version: "dev"})
 	req, err := http.NewRequest("GET", "/version", nil)
 	require.NoError(t, err, "NewRequest should not return an error.")
 	rr := httptest.NewRecorder()
@@ -328,6 +318,137 @@ func Test_createRoutes_version(t *testing.T) {
 	abide.AssertHTTPResponse(t, t.Name(), rr.Result())
 }
 
+func Test_createRoutes_username_password(t *testing.T) {
+
+	handler := createHandler(nil, nil, Config{Base: "/", Username: "amir", Password: "password", Key: "key"})
+	req, err := http.NewRequest("GET", "/", nil)
+	require.NoError(t, err, "NewRequest should not return an error.")
+	rr := httptest.NewRecorder()
+	handler.ServeHTTP(rr, req)
+	abide.AssertHTTPResponse(t, t.Name(), rr.Result())
+}
+
+func Test_createRoutes_username_password_invalid(t *testing.T) {
+	handler := createHandler(nil, nil, Config{Base: "/", Username: "amir", Password: "password", Key: "key"})
+	req, err := http.NewRequest("GET", "/api/logs/stream?id=123", nil)
+	require.NoError(t, err, "NewRequest should not return an error.")
+	rr := httptest.NewRecorder()
+	handler.ServeHTTP(rr, req)
+	abide.AssertHTTPResponse(t, t.Name(), rr.Result())
+}
+
+func Test_createRoutes_username_password_login_happy(t *testing.T) {
+	handler := createHandler(nil, nil, Config{Base: "/", Username: "amir", Password: "password", Key: "key"})
+
+	body := &bytes.Buffer{}
+	writer := multipart.NewWriter(body)
+
+	fw, err := writer.CreateFormField("username")
+	require.NoError(t, err, "Creating field should not be error.")
+	_, err = io.Copy(fw, strings.NewReader("amir"))
+	require.NoError(t, err, "Copying field should not result in error.")
+
+	fw, err = writer.CreateFormField("password")
+	require.NoError(t, err, "Creating field should not be error.")
+	_, err = io.Copy(fw, strings.NewReader("password"))
+	require.NoError(t, err, "Copying field should not result in error.")
+
+	writer.Close()
+
+	req, err := http.NewRequest("POST", "/api/validateCredentials", bytes.NewReader(body.Bytes()))
+	req.Header.Set("Content-Type", writer.FormDataContentType())
+
+	require.NoError(t, err, "NewRequest should not return an error.")
+	rr := httptest.NewRecorder()
+	handler.ServeHTTP(rr, req)
+
+	assert.Equal(t, rr.Code, 200)
+	cookie := rr.Header().Get("Set-Cookie")
+	assert.Matches(t, cookie, "session=.+")
+}
+
+func Test_createRoutes_username_password_login_failed(t *testing.T) {
+	handler := createHandler(nil, nil, Config{Base: "/", Username: "amir", Password: "password", Key: "key"})
+
+	body := &bytes.Buffer{}
+	writer := multipart.NewWriter(body)
+
+	fw, err := writer.CreateFormField("username")
+	require.NoError(t, err, "Creating field should not be error.")
+	_, err = io.Copy(fw, strings.NewReader("amir"))
+	require.NoError(t, err, "Copying field should not result in error.")
+
+	fw, err = writer.CreateFormField("password")
+	require.NoError(t, err, "Creating field should not be error.")
+	_, err = io.Copy(fw, strings.NewReader("bad"))
+	require.NoError(t, err, "Copying field should not result in error.")
+
+	writer.Close()
+
+	req, err := http.NewRequest("POST", "/api/validateCredentials", bytes.NewReader(body.Bytes()))
+	req.Header.Set("Content-Type", writer.FormDataContentType())
+
+	require.NoError(t, err, "NewRequest should not return an error.")
+	rr := httptest.NewRecorder()
+	handler.ServeHTTP(rr, req)
+	assert.Equal(t, rr.Code, 401)
+}
+
+func Test_createRoutes_username_password_valid_session(t *testing.T) {
+	mockedClient := new(MockedClient)
+	mockedClient.On("FindContainer", "123").Return(docker.Container{ID: "123"}, nil)
+	mockedClient.On("ContainerLogs", mock.Anything, "123", 0).Return(ioutil.NopCloser(strings.NewReader("test data")), io.EOF)
+	handler := createHandler(mockedClient, nil, Config{Base: "/", Username: "amir", Password: "password", Key: "key"})
+
+	// Get cookie first
+	req, err := http.NewRequest("GET", "/api/logs/stream?id=123", nil)
+	require.NoError(t, err, "NewRequest should not return an error.")
+	session, _ := store.Get(req, sessionName)
+	session.Values[authorityKey] = time.Now().Unix()
+	recorder := httptest.NewRecorder()
+	session.Save(req, recorder)
+	cookies := recorder.Result().Cookies()
+
+	// Test with cookie
+	req, err = http.NewRequest("GET", "/api/logs/stream?id=123", nil)
+	require.NoError(t, err, "NewRequest should not return an error.")
+	req.AddCookie(cookies[0])
+	rr := httptest.NewRecorder()
+	handler.ServeHTTP(rr, req)
+	abide.AssertHTTPResponse(t, t.Name(), rr.Result())
+}
+
+func Test_createRoutes_username_password_invalid_session(t *testing.T) {
+	mockedClient := new(MockedClient)
+	mockedClient.On("FindContainer", "123").Return(docker.Container{ID: "123"}, nil)
+	mockedClient.On("ContainerLogs", mock.Anything, "123", 0).Return(ioutil.NopCloser(strings.NewReader("test data")), io.EOF)
+	handler := createHandler(mockedClient, nil, Config{Base: "/", Username: "amir", Password: "password", Key: "key"})
+	req, err := http.NewRequest("GET", "/api/logs/stream?id=123", nil)
+	require.NoError(t, err, "NewRequest should not return an error.")
+	req.AddCookie(&http.Cookie{Name: "session", Value: "baddata"})
+	rr := httptest.NewRecorder()
+	handler.ServeHTTP(rr, req)
+	assert.Equal(t, rr.Code, 401)
+}
+
+func createHandler(client docker.Client, content fs.FS, config Config) *mux.Router {
+	if client == nil {
+		client = new(MockedClient)
+	}
+
+	if content == nil {
+		fs := afero.NewMemMapFs()
+		afero.WriteFile(fs, "index.html", []byte("index page"), 0644)
+		content = afero.NewIOFS(fs)
+	}
+
+	return createRouter(&handler{
+		client:  client,
+		content: content,
+		config:  &config,
+	})
+}
+
 func TestMain(m *testing.M) {
 	exit := m.Run()
 	abide.Cleanup()

webpack.config.js

@@ -68,7 +68,6 @@ module.exports = (env, argv) => ({
   },
   devServer: {
     port: 8081,
-    inline: true,
     hot: true,
     open: true,
     historyApiFallback: true,