Release 1.23.0

Bumps [caniuse-lite](https://github.com/ben-eb/caniuse-lite) from 1.0.30001052 to 1.0.30001053.
- [Release notes](https://github.com/ben-eb/caniuse-lite/releases)
- [Changelog](https://github.com/ben-eb/caniuse-lite/blob/master/CHANGELOG.md)
- [Commits](https://github.com/ben-eb/caniuse-lite/compare/v1.0.30001052...v1.0.30001053)

Signed-off-by: dependabot-preview[bot] <support@dependabot.com>

.babelrc

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

.dockerignore

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

.github/golang/Dockerfile

@@ -1,6 +0,0 @@
-FROM golang:1.13
-
-COPY entrypoint.sh /entrypoint.sh
-
-ENTRYPOINT ["/entrypoint.sh"]
-CMD [""]

.github/golang/entrypoint.sh

@@ -1,4 +0,0 @@
-#!/bin/sh
-set -e
-
-go test -cover ./...

.github/goreleaser/Dockerfile

@@ -1,13 +0,0 @@
-FROM golang:1.13-alpine
-
-RUN apk --no-cache add git nodejs-current nodejs-npm make g++ bash bzr curl docker rpm && \
-  npm i -g npm && \
-  wget https://github.com/goreleaser/goreleaser/releases/latest/download/goreleaser_Linux_x86_64.tar.gz && \
-  tar -xvzf *.tar.gz -C /usr/local/bin && \
-  rm *.gz && \
-  go get -u github.com/gobuffalo/packr/packr
-
-COPY entrypoint.sh /entrypoint.sh
-
-ENTRYPOINT ["/entrypoint.sh"]
-CMD [""]

.github/goreleaser/entrypoint.sh

@@ -1,18 +0,0 @@
-#!/usr/bin/env bash
-
-if [ -n "$DOCKER_USERNAME" ] && [ -n "$DOCKER_PASSWORD" ]; then
-    echo "Login to the docker..."
-    docker login -u $DOCKER_USERNAME -p $DOCKER_PASSWORD $DOCKER_REGISTRY
-fi
-
-# Workaround for github actions when access to different repositories is needed.
-# Github actions provides a GITHUB_TOKEN secret that can only access the current
-# repository and you cannot configure it's value.
-# Access to different repositories is needed by brew for example.
-
-if [ -n "$GORELEASER_GITHUB_TOKEN" ] ; then
-  export GITHUB_TOKEN=$GORELEASER_GITHUB_TOKEN
-fi
-
-npm ci
-goreleaser $@

.github/workflows/deploy.yml

@@ -0,0 +1,59 @@
+on:
+  push:
+    tags:
+      - "v*"
+name: Test and Release
+jobs:
+  npm-test:
+    name: JavaScript Tests
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v2
+      - name: Install Node
+        uses: actions/setup-node@v1
+      - name: Install depdencies
+        run: yarn
+      - name: Run Tests
+        run: yarn test
+  go-test:
+    name: Go Tests
+    runs-on: ubuntu-latest
+    steps:
+      - name: Install Go
+        uses: actions/setup-go@v1
+        with:
+          go-version: 1.14.x
+      - name: Checkout code
+        uses: actions/checkout@v2
+      - name: Run Go Tests with Coverage
+        run: go test -cover ./...
+  int-test:
+    needs: [go-test, npm-test]
+    name: Integration Tests
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v2
+      - 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]
+    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
+        with:
+          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

.github/workflows/push.yml

@@ -1,23 +0,0 @@
-on: push
-name: Build, Test and Release
-jobs:
-  build:
-    name: npm test
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@master
-      - name: npm test
-        uses: actions/setup-node@v1
-      - run: npm it
-      - name: go test
-        uses: ./.github/golang/
-      - name: Release
-        uses: ./.github/goreleaser/
-        env:
-          DOCKER_PASSWORD: ${{ secrets.DOCKER_PASSWORD }}
-          DOCKER_USERNAME: ${{ secrets.DOCKER_USERNAME }}
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          REF: ${{ github. ref }}
-        with:
-          args: release
-        if: contains(github.ref, 'tags')

.github/workflows/test.yml

@@ -0,0 +1,37 @@
+on: push
+name: Test
+jobs:
+  npm-test:
+    name: JavaScript Tests
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v2
+      - name: Install Node
+        uses: actions/setup-node@v1
+      - name: Install depdencies
+        run: yarn
+      - name: Run Tests
+        run: yarn test
+  go-test:
+    name: Go Tests
+    runs-on: ubuntu-latest
+    steps:
+      - name: Install Go
+        uses: actions/setup-go@v1
+        with:
+          go-version: 1.14.x
+      - name: Checkout code
+        uses: actions/checkout@v2
+      - name: Run Go Tests with Coverage
+        run: go test -cover ./...
+  int-test:
+    name: Integration Tests
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v2
+      - 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

.goreleaser.yml

@@ -1,47 +0,0 @@
-before:
-  hooks:
-    - npm run clean
-    - npm run build
-    - packr
-builds:
-  - env:
-      - CGO_ENABLED=0
-    goos:
-      - linux
-      - darwin
-    goarch:
-      - amd64
-      - arm
-      - arm64
-archives:
-  - replacements:
-      amd64: 64-bit
-      386: 32-bit
-      arm64: ARM_64-bit
-      arm: ARM_32-bit
-      linux: Linux
-      darwin: Darwin
-checksum:
-  name_template: "checksums.txt"
-snapshot:
-  name_template: "{{ .Tag }}-next"
-changelog:
-  sort: asc
-  filters:
-    exclude:
-      - "^docs:"
-      - "^test:"
-dockers:
-  - image_templates:
-      - "amir20/dozzle:{{ .Tag }}"
-      - "amir20/dozzle:v{{ .Major }}.{{ .Minor }}"
-      - amir20/dozzle:latest
-    build_flag_templates:
-      - "--label=org.label-schema.schema-version=1.0"
-      - "--label=org.label-schema.build-date={{.Date}}"
-      - "--label=org.label-schema.vcs-ref={{.ShortCommit}}"
-      - "--label=org.label-schema.version={{.Version}}"
-      - "--label=org.label-schema.name=Dozzle"
-      - "--label=org.label-schema.url=https://dozzle.dev/"
-      - "--label=org.label-schema.vcs-url=https://github.com/amir20/dozzle"
-      - "--label=org.label-schema.description=Dozzle is a real-time log viewer for docker containers."

.prettierrc.js

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

.prettierrc.json

@@ -1,3 +0,0 @@
-{
-  "printWidth": 120
-}

.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/' -R '^static/' -R '^.cache/' -G '*_test.go' -s -- go run main.go routes.go --level debug

Dockerfile

@@ -1,9 +1,57 @@
-FROM alpine:latest as certs
-RUN apk --update add ca-certificates
+# Build assets
+FROM node:13-alpine as node
+
+RUN apk add --no-cache git openssh python make g++ util-linux
+
+WORKDIR /build
+
+# Install dependencies
+COPY package*.json yarn.lock ./
+RUN yarn install --network-timeout 1000000
+
+# Copy config files
+COPY .* webpack*.js ./
+
+# Copy assets to build
+COPY assets ./assets
+
+# Do the build
+RUN yarn build
+
+FROM golang:1.14-alpine AS builder
+
+RUN apk add --no-cache git ca-certificates
+RUN mkdir /dozzle
+
+WORKDIR /dozzle
+
+# Needed for assets
+RUN go get -u github.com/gobuffalo/packr/packr
+
+# Copy go mod files
+COPY go.* ./
+RUN go mod download
+
+# Copy assets built with node
+COPY --from=node /build/static ./static
+
+# Copy all other files
+COPY . .
+
+# Compile static files
+RUN packr -z
+
+# Args
+ARG TAG=dev
+
+# Build binary
+RUN CGO_ENABLED=0 go build -ldflags "-s -w -X main.version=$TAG"  -o dozzle
 
 FROM scratch
+
 ENV PATH=/bin
-ENV DOCKER_API_VERSION 1.38
-COPY --from=certs /etc/ssl/certs/ca-certificates.crt /etc/ssl/certs/ca-certificates.crt
-COPY dozzle /
+
+COPY --from=builder /etc/ssl/certs/ca-certificates.crt /etc/ssl/certs/ca-certificates.crt
+COPY --from=builder /dozzle/dozzle /dozzle
+
 ENTRYPOINT ["/dozzle"]

Makefile

@@ -0,0 +1,6 @@
+TAG := $(shell git describe --tags)
+PLATFROMS := linux/amd64,linux/arm64,linux/arm/v7
+
+.PHONY: publish
+publish:
+	docker buildx build --build-arg TAG=$(TAG) --platform $(PLATFROMS) -t amir20/dozzle:latest -t amir20/dozzle:$(TAG) --push .

README.md

@@ -2,16 +2,17 @@
 [![Docker Pulls](https://img.shields.io/docker/pulls/amir20/dozzle.svg)](https://hub.docker.com/r/amir20/dozzle/)
 [![Docker Size](https://images.microbadger.com/badges/image/amir20/dozzle.svg)](https://hub.docker.com/r/amir20/dozzle/)
 [![Docker Version](https://images.microbadger.com/badges/version/amir20/dozzle.svg)](https://hub.docker.com/r/amir20/dozzle/)
+![Test](https://github.com/amir20/dozzle/workflows/Test/badge.svg)
 
 # Dozzle - [dozzle.dev](https://dozzle.dev/)
 
-Dozzle is a real-time log viewer for Docker. It's free. It's small. And it's right in your browser.
+Dozzle is a simple, lightweight application that provides you with a web based interface to monitor your Docker container logs live. It doesn’t store log information, it is for live monitoring of your container logs only.
 
-While dozzle should work for most, it is not meant to be a full logging solution. For enterprise use, I recommend you look at [Loggly](https://www.loggly.com), [Papertrail](https://papertrailapp.com) or [Kibana](https://www.elastic.co/products/kibana).
+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.
 
-But if you don't want to pay for those services, then you are in luck! Dozzle will be able to capture all logs from your containers and send them in real-time to your browser. Installation is also very easy. Dozzle is not a database. It does not store or save any logs. You can only see live logs while using Dozzle.
+Dozzle doesn't cost any money. Dozzle aims to stay simple, small and free.
 
-![Image](demo.gif)
+![Image](https://github.com/amir20/dozzle/blob/master/.github/demo.gif?raw=true)
 
 ## Getting dozzle
 
@@ -43,9 +44,6 @@ dozzle will be available at [http://localhost:8888/](http://localhost:8888/). Yo
       dozzle:
         container_name: dozzle
         image: amir20/dozzle:latest
-        environment:
-          - DOZZLE_TAILSIZE=100
-          - DOZZLE_FILTER='status:running'
         volumes:
           - /var/run/docker.sock:/var/run/docker.sock
         ports:
@@ -84,10 +82,50 @@ Dozzle follows the [12-factor](https://12factor.net/) model. Configurations can
 | `--base`     | `DOZZLE_BASE`        | `/`     |
 | `--level`    | `DOZZLE_LEVEL`       | `info`  |
 | `--showAll`  | `DOZZLE_SHOWALL`     | `false` |
-| n/a          | `DOCKER_API_VERSION` | `1.38`  |
+| n/a          | `DOCKER_API_VERSION` | not set |
 | `--tailSize` | `DOZZLE_TAILSIZE`    | `300`   |
 | `--filter`   | `DOZZLE_FILTER`      | `""`    |
 
+## Troubleshooting
+
+### Nginx Config
+
+If you are using nginx as a reverse proxy, then you need to configure `/api` to enable server-sent events.
+
+Below is an example configuration using SSL and `proxy_pass` with correct settings.
+
+```
+    server {
+        listen                          80;
+        server_name                     <example.com>;
+        return                          301 https://<example.com>$request_uri;
+    }
+
+    server {
+        listen                          443 ssl http2;
+        server_name                     <example.com>;
+
+        ssl_certificate                 </path/to/your/certificate>;
+        ssl_certificate_key             </path/to/your/key>;
+
+        location / {
+            proxy_pass                  http://<dozzle.container.ip.address>:8080;
+        }
+
+        location /api {
+            proxy_pass                  http://<dozzle.container.ip.address>:8080;
+
+            proxy_http_version          1.1;
+            proxy_set_header            Connection "";
+            proxy_buffering             off;
+            proxy_cache                 off;
+
+            chunked_transfer_encoding   off;
+        }
+    }
+
+```
+
 ## License
 
 [MIT](LICENSE)
@@ -103,4 +141,3 @@ To Build and test locally:
 5. Install node modules with `npm install`.
 6. Do `npm start`
 
-Instructions for Github actions can be found [here](.github/goreleaser/Dockerfile) which build and tests Dozzle.

__snapshots__/dozzle.snapshot

@@ -26,8 +26,6 @@ Connection: close
 Content-Type: text/plain; charset=utf-8
 
 dev
-none
-unknown
 
 /* snapshot: Test_handler_listContainers_happy */
 HTTP/1.1 200 OK
@@ -41,14 +39,16 @@ HTTP/1.1 200 OK
 Connection: close
 Cache-Control: no-cache
 Connection: keep-alive
-Content-Type: text/event-stream
+Content-Type: text/event-stream
+X-Accel-Buffering: no
 
 /* snapshot: Test_handler_streamEvents_error_request */
 HTTP/1.1 200 OK
 Connection: close
 Cache-Control: no-cache
 Connection: keep-alive
-Content-Type: text/event-stream
+Content-Type: text/event-stream
+X-Accel-Buffering: no
 
 /* snapshot: Test_handler_streamEvents_happy */
 HTTP/1.1 200 OK
@@ -56,6 +56,7 @@ Connection: close
 Cache-Control: no-cache
 Connection: keep-alive
 Content-Type: text/event-stream
+X-Accel-Buffering: no
 
 event: containers-changed
 data: start
@@ -73,7 +74,8 @@ HTTP/1.1 200 OK
 Connection: close
 Cache-Control: no-cache
 Connection: keep-alive
-Content-Type: text/event-stream
+Content-Type: text/event-stream
+X-Accel-Buffering: no
 
 /* snapshot: Test_handler_streamLogs_happy */
 HTTP/1.1 200 OK
@@ -81,5 +83,6 @@ Connection: close
 Cache-Control: no-cache
 Connection: keep-alive
 Content-Type: text/event-stream
+X-Accel-Buffering: no
 
 data: INFO Testing logs...

assets/App.spec.js

@@ -8,7 +8,7 @@ const localVue = createLocalVue();
 localVue.use(Vuex);
 
 describe("<App />", () => {
-  const stubs = { RouterLink: RouterLinkStub, "router-view": true };
+  const stubs = { RouterLink: RouterLinkStub, "router-view": true, icon: true };
   let store;
 
   beforeEach(() => {
@@ -17,25 +17,21 @@ describe("<App />", () => {
     const state = {
       containers: [
         { id: "abc", name: "Test 1" },
-        { id: "xyz", name: "Test 2" }
-      ]
+        { id: "xyz", name: "Test 2" },
+      ],
+      settings: { menuWidth: 15 },
     };
 
     const actions = {
-      FETCH_CONTAINERS: () => Promise.resolve()
+      FETCH_CONTAINERS: () => Promise.resolve(),
     };
 
     store = new Vuex.Store({
       state,
-      actions
+      actions,
     });
   });
 
-  test("is a Vue instance", async () => {
-    const wrapper = shallowMount(App, { stubs, store, localVue });
-    expect(wrapper.isVueInstance()).toBeTruthy();
-  });
-
   test("has right title", async () => {
     const wrapper = shallowMount(App, { stubs, store, localVue });
     await wrapper.vm.$nextTick();

assets/App.vue

@@ -1,24 +1,21 @@
 <template lang="html">
   <main>
     <mobile-menu v-if="isMobile"></mobile-menu>
-    <splitpanes>
-      <pane min-size="10" size="15" v-if="!isMobile">
+
+    <splitpanes @resized="onResized($event)">
+      <pane min-size="10" :size="settings.menuWidth" v-if="!isMobile && !collapseNav">
         <side-menu></side-menu>
       </pane>
-      <pane :size="isMobile ? 100 : 85">
+      <pane min-size="10">
         <splitpanes>
-          <pane>
+          <pane class="has-min-height">
+            <search></search>
             <router-view></router-view>
           </pane>
-          <pane v-for="other in activeContainers" :key="other.id">
+          <pane v-for="other in activeContainers" :key="other.id" v-if="!isMobile">
             <scrollable-view>
               <template v-slot:header>
-                <div class="name columns is-marginless">
-                  <span class="column">{{ other.name }}</span>
-                  <span class="column is-narrow">
-                    <button class="delete is-medium" @click="removeActiveContainer(other)"></button>
-                  </span>
-                </div>
+                <container-title :value="other.name" closable @close="removeActiveContainer(other)"></container-title>
               </template>
               <log-viewer-with-source :id="other.id"></log-viewer-with-source>
             </scrollable-view>
@@ -26,6 +23,17 @@
         </splitpanes>
       </pane>
     </splitpanes>
+    <button
+      @click="collapseNav = !collapseNav"
+      class="button is-small is-rounded is-settings-control"
+      :class="{ collapsed: collapseNav }"
+      id="hide-nav"
+      v-if="!isMobile"
+    >
+      <span class="icon">
+        <icon :name="collapseNav ? 'chevron-right' : 'chevron-left'"></icon>
+      </span>
+    </button>
   </main>
 </template>
 
@@ -37,53 +45,77 @@ import LogViewerWithSource from "./components/LogViewerWithSource";
 import ScrollableView from "./components/ScrollableView";
 import SideMenu from "./components/SideMenu";
 import MobileMenu from "./components/MobileMenu";
+import Search from "./components/Search";
+import ContainerTitle from "./components/ContainerTitle";
+import Icon from "./components/Icon";
 
 export default {
   name: "App",
   components: {
+    Icon,
     LogViewerWithSource,
     SideMenu,
     MobileMenu,
     ScrollableView,
     Splitpanes,
-    Pane
+    Pane,
+    Search,
+    ContainerTitle,
   },
   data() {
     return {
       title: "",
-      showNav: false
+      collapseNav: false,
     };
   },
   metaInfo() {
     return {
       title: this.title,
-      titleTemplate: "%s - Dozzle"
+      titleTemplate: "%s - Dozzle",
     };
   },
   async created() {
     await this.fetchContainerList();
     this.title = `${this.containers.length} containers`;
   },
+  mounted() {
+    if (this.hasSmallerScrollbars) {
+      document.documentElement.classList.add("has-custom-scrollbars");
+    }
+    this.menuWidth = this.settings.menuWidth;
+  },
+  watch: {
+    hasSmallerScrollbars(newValue, oldValue) {
+      if (newValue) {
+        document.documentElement.classList.add("has-custom-scrollbars");
+      } else {
+        document.documentElement.classList.remove("has-custom-scrollbars");
+      }
+    },
+  },
   computed: {
-    ...mapState(["containers", "activeContainers", "isMobile"])
+    ...mapState(["containers", "activeContainers", "isMobile", "settings"]),
+    hasSmallerScrollbars() {
+      return this.settings.smallerScrollbars;
+    },
   },
   methods: {
     ...mapActions({
       fetchContainerList: "FETCH_CONTAINERS",
-      removeActiveContainer: "REMOVE_ACTIVE_CONTAINER"
-    })
-  }
+      removeActiveContainer: "REMOVE_ACTIVE_CONTAINER",
+      updateSetting: "UPDATE_SETTING",
+    }),
+    onResized(e) {
+      if (e.length == 2) {
+        const menuWidth = e[0].size;
+        this.updateSetting({ menuWidth });
+      }
+    },
+  },
 };
 </script>
 
 <style scoped lang="scss">
-.name {
-  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
-  background: rgba(0, 0, 0, 0.1);
-  font-weight: bold;
-  font-family: monospace;
-}
-
 ::v-deep .splitpanes__splitter {
   min-width: 4px;
   background: #666;
@@ -91,4 +123,28 @@ export default {
     background: rgb(255, 221, 87);
   }
 }
+
+.button.has-no-border {
+  border-color: transparent !important;
+}
+
+.has-min-height {
+  min-height: 100vh;
+}
+
+#hide-nav {
+  position: fixed;
+  left: 10px;
+  bottom: 10px;
+  &.collapsed {
+    left: -40px;
+    width: 60px;
+    padding-left: 40px;
+    background: rgba(0, 0, 0, 0.95);
+
+    &:hover {
+      left: -25px;
+    }
+  }
+}
 </style>

assets/__snapshots__/App.spec.js.snap

@@ -18,22 +18,37 @@ exports[`<App /> renders correctly 1`] = `
      
     <pane-stub
       maxsize="100"
-      minsize="0"
-      size="85"
+      minsize="10"
     >
       <splitpanes-stub
         dblclicksplitter="true"
         pushotherpanes="true"
       >
         <pane-stub
+          class="has-min-height"
           maxsize="100"
           minsize="0"
         >
+          <search-stub />
+           
           <router-view-stub />
         </pane-stub>
          
       </splitpanes-stub>
     </pane-stub>
   </splitpanes-stub>
+   
+  <button
+    class="button is-small is-rounded is-settings-control"
+    id="hide-nav"
+  >
+    <span
+      class="icon"
+    >
+      <icon-stub
+        name="chevron-left"
+      />
+    </span>
+  </button>
 </main>
 `;

assets/components/ContainerTitle.vue

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

assets/components/Icon.vue

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

assets/components/InfiniteLoader.vue

@@ -7,32 +7,31 @@ export default {
   name: "InfiniteLoader",
   data() {
     return {
-      scrollingParent: null,
-      isLoading: false
+      isLoading: false,
     };
   },
   props: {
     onLoadMore: Function,
-    enabled: Boolean
+    enabled: Boolean,
   },
   mounted() {
-    this.scrollingParent = this.$el.closest("[data-scrolling]");
     const intersectionObserver = new IntersectionObserver(
-      async entries => {
+      async (entries) => {
         if (entries[0].intersectionRatio <= 0) return;
         if (this.onLoadMore && this.enabled) {
-          const previousHeight = this.scrollingParent.scrollHeight;
+          const scrollingParent = this.$el.closest("[data-scrolling]") || document.documentElement;
+          const previousHeight = scrollingParent.scrollHeight;
           this.isLoading = true;
           await this.onLoadMore();
           this.isLoading = false;
-          this.$nextTick(() => (this.scrollingParent.scrollTop += this.scrollingParent.scrollHeight - previousHeight));
+          this.$nextTick(() => (scrollingParent.scrollTop += scrollingParent.scrollHeight - previousHeight));
         }
       },
       { threshholds: 1 }
     );
 
     intersectionObserver.observe(this.$refs.observer);
-  }
+  },
 };
 </script>
 <style scoped lang="scss"></style>

assets/components/LogEventSource.spec.js

@@ -1,13 +1,17 @@
+import debounce from "lodash.debounce";
 import EventSource from "eventsourcemock";
 import { sources } from "eventsourcemock";
 import { shallowMount, mount, createLocalVue } from "@vue/test-utils";
 import Vuex from "vuex";
 import MockDate from "mockdate";
-import debounce from "lodash.debounce";
 import LogEventSource from "./LogEventSource.vue";
 import LogViewer from "./LogViewer.vue";
 
-jest.mock("lodash.debounce", () => jest.fn(fn => fn));
+jest.mock("lodash.debounce", () =>
+  jest.fn((fn) => {
+    return fn;
+  })
+);
 
 describe("<LogEventSource />", () => {
   beforeEach(() => {
@@ -20,7 +24,7 @@ describe("<LogEventSource />", () => {
     const unobserve = jest.fn();
     global.IntersectionObserver = jest.fn(() => ({
       observe,
-      unobserve
+      unobserve,
     }));
     debounce.mockClear();
   });
@@ -31,13 +35,12 @@ describe("<LogEventSource />", () => {
     const localVue = createLocalVue();
     localVue.use(Vuex);
 
-    localVue.component("log-event-source", LogEventSource);
     localVue.component("log-viewer", LogViewer);
 
-    const state = { searchFilter };
+    const state = { searchFilter, settings: { size: "medium", showTimestamp: true } };
 
     const store = new Vuex.Store({
-      state
+      state,
     });
 
     return mount(LogEventSource, {
@@ -46,17 +49,12 @@ describe("<LogEventSource />", () => {
       scopedSlots: {
         default: `
         <log-viewer :messages="props.messages"></log-viewer>
-        `
+        `,
       },
-      propsData: { id: "abc" }
+      propsData: { id: "abc" },
     });
   }
 
-  test("is a Vue instance", async () => {
-    const wrapper = shallowMount(LogEventSource);
-    expect(wrapper.isVueInstance()).toBeTruthy();
-  });
-
   test("renders correctly", async () => {
     const wrapper = createLogEventSource();
     expect(wrapper.element).toMatchInlineSnapshot(`
@@ -66,7 +64,7 @@ describe("<LogEventSource />", () => {
         />
          
         <ul
-          class="events"
+          class="events medium"
         />
       </div>
     `);
@@ -102,11 +100,28 @@ describe("<LogEventSource />", () => {
     `);
   });
 
+  test("should parse messages with loki's timestamp format", async () => {
+    const wrapper = createLogEventSource();
+    sources["/api/logs/stream?id=abc"].emitOpen();
+    sources["/api/logs/stream?id=abc"].emitMessage({ data: `2020-04-27T12:35:43.272974324+02:00 xxxxx` });
+
+    const [message, _] = wrapper.vm.messages;
+    const { key, ...messageWithoutKey } = message;
+
+    expect(key).toBe("2020-04-27T12:35:43.272974324+02:00");
+    expect(messageWithoutKey).toMatchInlineSnapshot(`
+      Object {
+        "date": 2020-04-27T10:35:43.272Z,
+        "message": "xxxxx",
+      }
+    `);
+  });
+
   test("should pass messages to slot", async () => {
     const wrapper = createLogEventSource();
     sources["/api/logs/stream?id=abc"].emitOpen();
     sources["/api/logs/stream?id=abc"].emitMessage({ data: `2019-06-12T10:55:42.459034602Z "This is a message."` });
-    const [message, _] = wrapper.find(LogViewer).vm.messages;
+    const [message, _] = wrapper.findComponent(LogViewer).vm.messages;
 
     const { key, ...messageWithoutKey } = message;
 
@@ -125,8 +140,9 @@ describe("<LogEventSource />", () => {
     sources["/api/logs/stream?id=abc"].emitOpen();
     sources["/api/logs/stream?id=abc"].emitMessage({ data: `2019-06-12T10:55:42.459034602Z "This is a message."` });
 
+    await wrapper.vm.$nextTick();
     expect(wrapper.find("ul.events")).toMatchInlineSnapshot(`
-      <ul class="events">
+      <ul class="events medium">
         <li><span class="date">today at 10:55 AM</span> <span class="text">"This is a message."</span></li>
       </ul>
     `);
@@ -136,11 +152,12 @@ describe("<LogEventSource />", () => {
     const wrapper = createLogEventSource();
     sources["/api/logs/stream?id=abc"].emitOpen();
     sources["/api/logs/stream?id=abc"].emitMessage({
-      data: `2019-06-12T10:55:42.459034602Z \x1b[30mblack\x1b[37mwhite`
+      data: `2019-06-12T10:55:42.459034602Z \x1b[30mblack\x1b[37mwhite`,
     });
 
+    await wrapper.vm.$nextTick();
     expect(wrapper.find("ul.events")).toMatchInlineSnapshot(`
-      <ul class="events">
+      <ul class="events medium">
         <li><span class="date">today at 10:55 AM</span> <span class="text"><span style="color:#000">black<span style="color:#AAA">white</span></span></span></li>
       </ul>
     `);
@@ -150,11 +167,12 @@ describe("<LogEventSource />", () => {
     const wrapper = createLogEventSource();
     sources["/api/logs/stream?id=abc"].emitOpen();
     sources["/api/logs/stream?id=abc"].emitMessage({
-      data: `2019-06-12T10:55:42.459034602Z <test>foo bar</test>`
+      data: `2019-06-12T10:55:42.459034602Z <test>foo bar</test>`,
     });
 
+    await wrapper.vm.$nextTick();
     expect(wrapper.find("ul.events")).toMatchInlineSnapshot(`
-      <ul class="events">
+      <ul class="events medium">
         <li><span class="date">today at 10:55 AM</span> <span class="text">&lt;test&gt;foo bar&lt;/test&gt;</span></li>
       </ul>
     `);
@@ -164,14 +182,15 @@ describe("<LogEventSource />", () => {
     const wrapper = createLogEventSource("test");
     sources["/api/logs/stream?id=abc"].emitOpen();
     sources["/api/logs/stream?id=abc"].emitMessage({
-      data: `2019-06-11T10:55:42.459034602Z Foo bar`
+      data: `2019-06-11T10:55:42.459034602Z Foo bar`,
     });
     sources["/api/logs/stream?id=abc"].emitMessage({
-      data: `2019-06-12T10:55:42.459034602Z This is a test <hi></hi>`
+      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">
+      <ul class="events medium">
         <li><span class="date">today at 10:55 AM</span> <span class="text">This is a <mark>test</mark> &lt;hi&gt;&lt;/hi&gt;</span></li>
       </ul>
     `);

assets/components/LogEventSource.vue

@@ -1,7 +1,7 @@
 <template lang="html">
   <div>
     <infinite-loader :onLoadMore="loadOlderLogs" :enabled="messages.length > 100"></infinite-loader>
-    <slot v-bind:messages="messages"></slot>
+    <slot :messages="messages"></slot>
   </div>
 </template>
 
@@ -9,27 +9,16 @@
 import debounce from "lodash.debounce";
 import InfiniteLoader from "./InfiniteLoader";
 
-function parseMessage(data) {
-  const date = new Date(data.substring(0, 30));
-  const key = data.substring(0, 30);
-  const message = data.substring(30).trim();
-  return {
-    key,
-    date,
-    message
-  };
-}
-
 export default {
   props: ["id"],
   name: "LogEventSource",
   components: {
-    InfiniteLoader
+    InfiniteLoader,
   },
   data() {
     return {
       messages: [],
-      buffer: []
+      buffer: [],
     };
   },
   created() {
@@ -41,6 +30,7 @@ export default {
       if (this.es) {
         this.es.close();
         this.messages = [];
+        this.buffer = [];
         this.es = null;
       }
       this.es = new EventSource(`${BASE_PATH}/api/logs/stream?id=${this.id}`);
@@ -52,11 +42,11 @@ export default {
         250,
         { maxWait: 1000 }
       );
-      this.es.onmessage = e => {
-        this.buffer.push(parseMessage(e.data));
+      this.es.onmessage = (e) => {
+        this.buffer.push(this.parseMessage(e.data));
         flushBuffer();
       };
-      this.es.onerror = e => console.log("EventSource failed." + e);
+      this.es.onerror = (e) => console.log("EventSource failed." + e);
       this.$once("hook:beforeDestroy", () => this.es.close());
     },
     async loadOlderLogs() {
@@ -73,17 +63,27 @@ export default {
         const newMessages = logs
           .trim()
           .split("\n")
-          .map(line => parseMessage(line));
+          .map((line) => this.parseMessage(line));
         this.messages.unshift(...newMessages);
       }
-    }
+    },
+    parseMessage(data) {
+      let i = data.indexOf(" ");
+      if (i == -1) {
+        i = data.length;
+      }
+      const key = data.substring(0, i);
+      const date = new Date(key);
+      const message = data.substring(i).trim();
+      return { key, date, message };
+    },
   },
   watch: {
     id(newValue, oldValue) {
       if (oldValue !== newValue) {
         this.loadLogs(newValue);
       }
-    }
-  }
+    },
+  },
 };
 </script>

assets/components/LogViewer.vue

@@ -1,7 +1,7 @@
 <template lang="html">
-  <ul class="events">
+  <ul class="events" :class="settings.size">
     <li v-for="item in filtered" :key="item.key">
-      <span class="date">{{ item.date | relativeTime }}</span>
+      <span class="date" v-if="settings.showTimestamp">{{ item.date | relativeTime }}</span>
       <span class="text" v-html="colorize(item.message)"></span>
     </li>
   </ul>
@@ -20,19 +20,16 @@ export default {
   components: {},
   data() {
     return {
-      showSearch: false
+      showSearch: false,
     };
   },
   methods: {
-    colorize: function(value) {
-      return ansiConvertor
-        .toHtml(value)
-        .replace("&lt;mark&gt;", "<mark>")
-        .replace("&lt;/mark&gt;", "</mark>");
-    }
+    colorize: function (value) {
+      return ansiConvertor.toHtml(value).replace("&lt;mark&gt;", "<mark>").replace("&lt;/mark&gt;", "</mark>");
+    },
   },
   computed: {
-    ...mapState(["searchFilter"]),
+    ...mapState(["searchFilter", "settings"]),
     filtered() {
       const { searchFilter, messages } = this;
       if (searchFilter) {
@@ -40,10 +37,10 @@ export default {
         try {
           const regex = isSmartCase ? new RegExp(searchFilter, "i") : new RegExp(searchFilter);
           return messages
-            .filter(d => d.message.match(regex))
-            .map(d => ({
+            .filter((d) => d.message.match(regex))
+            .map((d) => ({
               ...d,
-              message: d.message.replace(regex, "<mark>$&</mark>")
+              message: d.message.replace(regex, "<mark>$&</mark>"),
             }));
         } catch (e) {
           if (e instanceof SyntaxError) {
@@ -54,13 +51,13 @@ export default {
         }
       }
       return messages;
-    }
+    },
   },
   filters: {
     relativeTime(date) {
       return formatRelative(date, new Date());
-    }
-  }
+    },
+  },
 };
 </script>
 <style scoped lang="scss">
@@ -69,9 +66,24 @@ export default {
   font-family: "Roboto Mono", monaco, monospace;
 
   & > li {
-    font-size: 13px;
-    line-height: 16px;
     word-wrap: break-word;
+    line-height: 130%;
+    &:last-child {
+      scroll-snap-align: end;
+      scroll-margin-block-end: 5rem;
+    }
+  }
+
+  &.small {
+    font-size: 60%;
+  }
+
+  &.medium {
+    font-size: 80%;
+  }
+
+  &.large {
+    font-size: 120%;
   }
 }
 
@@ -84,7 +96,7 @@ export default {
   white-space: pre-wrap;
 }
 
->>> mark {
+::v-deep mark {
   border-radius: 2px;
   background-color: #ffdd57;
   animation: pops 0.2s ease-out;

assets/components/LogViewerWithSource.vue

@@ -13,7 +13,7 @@ export default {
   name: "LogViewerWithSource",
   components: {
     LogEventSource,
-    LogViewer
-  }
+    LogViewer,
+  },
 };
 </script>

assets/components/MobileMenu.vue

@@ -34,37 +34,35 @@ export default {
   name: "MobileMenu",
   data() {
     return {
-      showNav: false
+      showNav: false,
     };
   },
 
   computed: {
     ...mapState(["containers"]),
-    activeContainersById() {
-      return this.activeContainers.reduce((map, obj) => {
-        map[obj.id] = obj;
-        return map;
-      }, {});
-    }
+    ...mapGetters(["activeContainersById"]),
   },
   methods: {
-    ...mapActions({})
+    ...mapActions({}),
   },
   watch: {
     $route(to, from) {
       this.showNav = false;
-    }
-  }
+    },
+  },
 };
 </script>
 <style scoped lang="scss">
 aside {
   padding: 1em;
-  position: absolute;
+  position: fixed;
   top: 0;
   left: 0;
   right: 0;
   background: #222;
+  z-index: 2;
+  max-height: 100vh;
+  overflow: auto;
 
   .menu-label {
     margin-top: 1em;

assets/components/ScrollableLogsWithSource.vue

@@ -1,19 +0,0 @@
-<template lang="html">
-  <scrollable-view>
-    <log-viewer-with-source :id="id"></log-viewer-with-source>
-  </scrollable-view>
-</template>
-
-<script>
-import ScrollableView from "./ScrollableView";
-import LogViewerWithSource from "./LogViewerWithSource";
-
-export default {
-  props: ["id"],
-  name: "ScrollableLogsWithSource",
-  components: {
-    LogViewerWithSource,
-    ScrollableView
-  }
-};
-</script>

assets/components/ScrollableView.vue

@@ -1,20 +1,21 @@
 <template lang="html">
-  <section>
+  <section :class="{ 'is-full-height-scrollable': scrollable }">
     <header v-if="$slots.header">
       <slot name="header"></slot>
     </header>
-    <main ref="content" @scroll.passive="onScroll" data-scrolling>
+    <main ref="content" :data-scrolling="scrollable">
       <slot></slot>
+      <div ref="scrollObserver"></div>
     </main>
     <div class="scroll-bar-notification">
       <transition name="fade">
         <button
           class="button"
           :class="hasMore ? 'is-warning' : 'is-primary'"
-          @click="scrollToBottom('smooth')"
+          @click="scrollToBottom('instant')"
           v-show="paused"
         >
-          <span class="icon large"> <i class="fas fa-chevron-down"></i> </span>
+          <icon name="download"></icon>
         </button>
       </transition>
     </div>
@@ -22,52 +23,66 @@
 </template>
 
 <script>
+import Icon from "./Icon";
+
 export default {
+  props: {
+    scrollable: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  components: {
+    Icon,
+  },
   name: "ScrollableView",
   data() {
     return {
       paused: false,
-      hasMore: false
+      hasMore: false,
     };
   },
   mounted() {
     const { content } = this.$refs;
-    new MutationObserver(e => {
+    new MutationObserver((e) => {
       if (!this.paused) {
         this.scrollToBottom("instant");
       } else {
         this.hasMore = true;
       }
     }).observe(content, { childList: true, subtree: true });
+
+    const intersectionObserver = new IntersectionObserver(
+      (entries) => (this.paused = entries[0].intersectionRatio == 0),
+      { threshholds: [0, 1], rootMargin: "80px 0px" }
+    );
+
+    intersectionObserver.observe(this.$refs.scrollObserver);
   },
 
   methods: {
     scrollToBottom(behavior = "instant") {
-      const { content } = this.$refs;
-      if (typeof content.scroll === "function") {
-        content.scroll({ top: content.scrollHeight, behavior });
-      } else {
-        content.scrollTop = content.scrollHeight;
-      }
+      this.$refs.scrollObserver.scrollIntoView({ behavior });
       this.hasMore = false;
     },
-    onScroll(e) {
-      const { content } = this.$refs;
-      this.paused = content.scrollTop + content.clientHeight + 1 < content.scrollHeight;
-    }
-  }
+  },
 };
 </script>
 <style scoped lang="scss">
 section {
   display: flex;
   flex-direction: column;
-  height: 100vh;
+
+  &.is-full-height-scrollable {
+    height: 100vh;
+  }
 
   main {
     flex: 1;
     overflow: auto;
+    scroll-snap-type: y proximity;
   }
+
   .scroll-bar-notification {
     text-align: right;
     margin-right: 65px;

assets/components/Search.vue

@@ -1,9 +1,18 @@
 <template lang="html">
-  <div class="search columns is-gapless is-vcentered" v-show="showSearch">
+  <div class="search columns is-gapless is-vcentered" v-show="showSearch" v-if="settings.search">
     <div class="column">
       <p class="control has-icons-left">
-        <input class="input" type="text" placeholder="Filter" ref="filter" v-model="filter" />
-        <span class="icon is-small is-left"><i class="fas fa-search"></i></span>
+        <input
+          class="input"
+          type="text"
+          placeholder="Find / RegEx"
+          ref="filter"
+          v-model="filter"
+          @keyup.esc="resetSearch()"
+        />
+        <span class="icon is-left">
+          <icon name="search"></icon>
+        </span>
       </p>
     </div>
     <div class="column is-1 has-text-centered">
@@ -14,49 +23,50 @@
 
 <script>
 import { mapActions, mapState } from "vuex";
+import hotkeys from "hotkeys-js";
+import Icon from "./Icon";
+
 export default {
   props: [],
   name: "Search",
+  components: {
+    Icon,
+  },
   data() {
     return {
-      showSearch: false
+      showSearch: false,
     };
   },
   mounted() {
-    window.addEventListener("keydown", this.onKeyDown);
-  },
-  destroyed() {
-    window.removeEventListener("keydown", this.onKeyDown);
+    hotkeys("command+f, ctrl+f", (event, handler) => {
+      this.showSearch = true;
+      this.$nextTick(() => this.$refs.filter.focus() || this.$refs.filter.select());
+      event.preventDefault();
+    });
+    hotkeys("esc", (event, handler) => {
+      this.resetSearch();
+    });
   },
   methods: {
     ...mapActions({
-      updateSearchFilter: "SET_SEARCH"
+      updateSearchFilter: "SET_SEARCH",
     }),
-    onKeyDown(e) {
-      if ((e.metaKey || e.ctrlKey) && e.key === "f") {
-        this.showSearch = true;
-        this.$nextTick(() => this.$refs.filter.focus());
-        e.preventDefault();
-      } else if (e.key === "Escape") {
-        this.resetSearch();
-      }
-    },
     resetSearch() {
       this.showSearch = false;
       this.filter = "";
-    }
+    },
   },
   computed: {
-    ...mapState(["searchFilter"]),
+    ...mapState(["searchFilter", "settings"]),
     filter: {
       get() {
         return this.searchFilter;
       },
       set(value) {
         this.updateSearchFilter(value);
-      }
-    }
-  }
+      },
+    },
+  },
 };
 </script>
 
@@ -74,4 +84,8 @@ export default {
 .delete {
   margin-left: 1em;
 }
+
+.icon {
+  padding: 10px 3px;
+}
 </style>

assets/components/SideMenu.vue

@@ -1,6 +1,21 @@
 <template lang="html">
   <aside>
-    <h1 class="title has-text-warning is-marginless">Dozzle</h1>
+    <div class="columns is-marginless">
+      <div class="column">
+        <h1 class="title has-text-warning is-marginless">Dozzle</h1>
+      </div>
+      <div class="column is-narrow has-text-right is-hidden-mobile">
+        <router-link
+          :to="{ name: 'settings' }"
+          active-class="is-active"
+          class="button is-small is-rounded is-settings-control"
+        >
+          <span class="icon">
+            <icon name="cog"></icon>
+          </span>
+        </router-link>
+      </div>
+    </div>
     <p class="menu-label is-hidden-mobile">Containers</p>
     <ul class="menu-list is-hidden-mobile">
       <li v-for="item in containers">
@@ -15,7 +30,7 @@
               class="icon is-small will-append-container"
               :class="{ 'is-active': activeContainersById[item.id] }"
             >
-              <i class="fas fa-thumbtack"></i>
+              <icon name="pin"></icon>
             </span>
             {{ item.name }}
           </div>
@@ -28,26 +43,26 @@
 <script>
 import { mapActions, mapGetters, mapState } from "vuex";
 
+import Icon from "./Icon";
+
 export default {
   props: [],
   name: "SideMenu",
+  components: {
+    Icon,
+  },
   data() {
     return {};
   },
   computed: {
     ...mapState(["containers", "activeContainers"]),
-    activeContainersById() {
-      return this.activeContainers.reduce((map, obj) => {
-        map[obj.id] = obj;
-        return map;
-      }, {});
-    }
+    ...mapGetters(["activeContainersById"]),
   },
   methods: {
     ...mapActions({
-      appendActiveContainer: "APPEND_ACTIVE_CONTAINER"
-    })
-  }
+      appendActiveContainer: "APPEND_ACTIVE_CONTAINER",
+    }),
+  },
 };
 </script>
 <style scoped lang="scss">
@@ -55,6 +70,8 @@ aside {
   padding: 1em;
   height: 100vh;
   overflow: auto;
+  position: fixed;
+  width: inherit;
 
   .hide-overflow {
     text-overflow: ellipsis;
@@ -74,7 +91,6 @@ aside {
 .will-append-container.icon {
   transition: transform 0.2s ease-out;
   &.is-active {
-    transform: rotate(25deg);
     pointer-events: none;
     color: #00d1b2;
   }

assets/favicon.svg

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

assets/index.ejs

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

assets/index.html

@@ -1,21 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>Dozzle</title>
-    <link href="https://fonts.googleapis.com/css?family=Roboto|Roboto+Mono|Gafata" rel="stylesheet" />
-    <link rel="manifest" href="manifest.webmanifest" />
-    <link href="styles.scss" rel="stylesheet" />
-    <link rel="icon" href="favicon.ico">
-    <script>
-      window["BASE_PATH"] = "{{ .Base }}";
-    </script>
-    <script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
-  </head>
-
-  <body class="is-dark">
-    <div id="app"></div>
-    <script src="main.js"></script>
-  </body>
-</html>

assets/main.js

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

assets/manifest.webmanifest

@@ -1,9 +0,0 @@
-{
-  "name": "Dozzle Log Viewer",
-  "short_name": "Dozzle",
-  "theme_color": "#111111",
-  "background_color": "#111111",
-  "display": "standalone",
-  "scope": "/",
-  "start_url": "/"
-}

assets/pages/Container.vue

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

assets/pages/Index.spec.js

@@ -2,11 +2,6 @@ import { shallowMount } from "@vue/test-utils";
 import Index from "./Index";
 
 describe("<Index />", () => {
-  test("is a Vue instance", () => {
-    const wrapper = shallowMount(Index);
-    expect(wrapper.isVueInstance()).toBeTruthy();
-  });
-
   test("renders correctly", () => {
     const wrapper = shallowMount(Index);
     expect(wrapper.element).toMatchSnapshot();

assets/pages/Index.vue

@@ -11,7 +11,7 @@
 <script>
 export default {
   props: [],
-  name: "Default"
+  name: "Default",
 };
 </script>
 <style scoped>

assets/pages/Settings.vue

@@ -0,0 +1,152 @@
+<template lang="html">
+  <div>
+    <section class="section">
+      <div class="has-underline">
+        <h2 class="title is-4">About</h2>
+      </div>
+
+      <div>
+        You are using Dozzle <i>{{ currentVersion }}</i
+        >.
+        <span v-if="hasUpdate">
+          New version is available! Update to
+          <a :href="nextRelease.html_url" class="next-release" target="_blank" rel="noopener">{{ nextRelease.name }}</a
+          >.
+        </span>
+      </div>
+    </section>
+    <section class="section">
+      <div class="has-underline">
+        <h2 class="title is-4">Display</h2>
+      </div>
+      <div class="item">
+        <b-switch v-model="search">
+          Enable searching with Dozzle using <code>command+f</code> or <code>ctrl+f</code>
+        </b-switch>
+      </div>
+
+      <div class="item">
+        <b-switch v-model="smallerScrollbars">
+          Use smaller scrollbars
+        </b-switch>
+      </div>
+
+      <div class="item">
+        <b-switch v-model="showTimestamp">
+          Show timestamps
+        </b-switch>
+      </div>
+
+      <div class="item">
+        <h2 class="title is-6 is-marginless">Font size</h2>
+        Modify the font size when viewing logs.
+
+        <b-dropdown v-model="size" aria-role="list" style="margin: -8px 10px 0;">
+          <button class="button is-primary" type="button" slot="trigger">
+            <span class="is-capitalized">{{ size }}</span>
+            <span class="icon"><icon name="chevron-down"></icon></span>
+          </button>
+          <b-dropdown-item
+            :value="value"
+            aria-role="listitem"
+            v-for="value in ['small', 'medium', 'large']"
+            :key="value"
+          >
+            <div class="media">
+              <span class="icon keep-size">
+                <icon name="check" v-if="value == size"></icon>
+              </span>
+              <div class="media-content">
+                <h3 class="is-capitalized">{{ value }}</h3>
+              </div>
+            </div>
+          </b-dropdown-item>
+        </b-dropdown>
+      </div>
+    </section>
+  </div>
+</template>
+
+<script>
+import gt from "semver/functions/gt";
+import valid from "semver/functions/valid";
+import { mapActions, mapState } from "vuex";
+import Icon from "../components/Icon";
+
+export default {
+  props: [],
+  name: "Settings",
+  components: {
+    Icon,
+  },
+  data() {
+    return {
+      currentVersion: VERSION,
+      nextRelease: null,
+      hasUpdate: false,
+    };
+  },
+  async created() {
+    const releases = await (await fetch("https://api.github.com/repos/amir20/dozzle/releases")).json();
+    this.hasUpdate = gt(releases[0].tag_name, this.currentVersion);
+    this.nextRelease = releases[0];
+  },
+  metaInfo() {
+    return {
+      title: "Settings",
+    };
+  },
+  methods: {
+    ...mapActions({
+      updateSetting: "UPDATE_SETTING",
+    }),
+  },
+  computed: {
+    ...mapState(["settings"]),
+    ...["search", "size", "smallerScrollbars", "showTimestamp"].reduce((map, name) => {
+      map[name] = {
+        get() {
+          return this.settings[name];
+        },
+        set(value) {
+          this.updateSetting({ [name]: value });
+        },
+      };
+      return map;
+    }, {}),
+  },
+};
+</script>
+<style lang="scss">
+.title {
+  color: #eee;
+}
+
+a.next-release {
+  text-decoration: underline;
+  color: #00d1b2;
+
+  &:hover {
+    text-decoration: none;
+  }
+}
+
+.section {
+  padding: 1rem 1.5rem;
+}
+
+.has-underline {
+  border-bottom: 1px solid #fff;
+  padding: 1em 0px;
+  margin-bottom: 1em;
+}
+
+.item {
+  padding: 1em 0;
+}
+
+code {
+  border-radius: 4px;
+  background-color: #444;
+}
+</style>

assets/store/index.js

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

assets/store/settings.js

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

assets/styles.scss

@@ -3,18 +3,74 @@
 $menu-item-active-background-color: hsl(171, 100%, 41%);
 $menu-item-color: hsl(0, 6%, 87%);
 
-@import "../node_modules/bulma/bulma.sass";
+@import "~bulma";
 @import "../node_modules/splitpanes/dist/splitpanes.css";
-
-.is-dark {
-  color: #ddd;
-  background-color: #111;
-}
+@import "~buefy/src/scss/utils/_all";
+@import "~buefy/src/scss/components/_dropdown";
+@import "~buefy/src/scss/components/_switch";
 
 body {
   font-family: "Roboto", sans-serif;
+  color: #ddd;
+  background-color: #111;
 }
 
 h1.title {
   font-family: "Gafata", sans-serif;
 }
+
+html {
+  overflow-x: unset;
+  overflow-y: unset;
+  scroll-snap-type: y proximity;
+}
+
+html.has-custom-scrollbars {
+  ::-webkit-scrollbar {
+    width: 8px;
+    display: content;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background-color: rgba(128, 128, 128, 0.33);
+    outline: 1px solid slategrey;
+    border-radius: 4px;
+  }
+
+  ::-webkit-scrollbar-thumb:active {
+    background-color: #777;
+  }
+
+  ::-webkit-scrollbar-track {
+    background-color: transparent;
+  }
+
+  ::-webkit-scrollbar-track:hover {
+    background-color: rgba(64, 64, 64, 0.33);
+  }
+
+  section main {
+    scrollbar-color: #353535 transparent;
+    scrollbar-width: thin;
+  }
+}
+
+.is-settings-control {
+
+  background: rgba(0, 0, 0, 0.4);
+  color: #fff;
+  border-color: transparent;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  &:hover {
+    border-color: rgb(255, 221, 87) !important;
+    background: rgba(0, 0, 0, 0.8) !important;
+    color: #fff !important;
+  }
+
+  &:focus {
+    box-shadow: none !important;
+    color: unset;
+    border-color: transparent;
+  }
+}
+

docker/client.go

@@ -54,7 +54,7 @@ func NewClientWithFilters(f map[string]string) Client {
 
 	log.Debugf("filterArgs = %v", filterArgs)
 
-	cli, err := client.NewClientWithOpts(client.FromEnv)
+	cli, err := client.NewClientWithOpts(client.FromEnv, client.WithAPIVersionNegotiation())
 
 	if err != nil {
 		log.Fatal(err)
@@ -123,6 +123,34 @@ func (d *dockerClient) ListContainers(showAll bool) ([]Container, error) {
 	return containers, nil
 }
 
+func logReader(reader io.ReadCloser, tty bool) func() (string, error) {
+	if tty {
+		scanner := bufio.NewScanner(reader)
+		return func() (string, error) {
+			if scanner.Scan() {
+				return scanner.Text(), nil
+			}
+
+			return "", io.EOF
+		}
+	}
+	hdr := make([]byte, 8)
+	var buffer bytes.Buffer
+	return func() (string, error) {
+		buffer.Reset()
+		_, err := reader.Read(hdr)
+		if err != nil {
+			return "", err
+		}
+		count := binary.BigEndian.Uint32(hdr[4:])
+		_, err = io.CopyN(&buffer, reader, int64(count))
+		if err != nil {
+			return "", err
+		}
+		return strings.TrimSpace(buffer.String()), nil
+	}
+}
+
 func (d *dockerClient) ContainerLogs(ctx context.Context, id string, tailSize int) (<-chan string, <-chan error) {
 	options := types.ContainerLogsOptions{ShowStdout: true, ShowStderr: true, Follow: true, Tail: strconv.Itoa(tailSize), Timestamps: true}
 	reader, err := d.cli.ContainerLogs(ctx, id, options)
@@ -142,49 +170,23 @@ func (d *dockerClient) ContainerLogs(ctx context.Context, id string, tailSize in
 
 	containerJSON, _ := d.cli.ContainerInspect(ctx, id)
 
-	if containerJSON.Config.Tty {
-		go func() {
-			defer close(messages)
-			defer close(errChannel)
-			defer reader.Close()
-			scanner := bufio.NewScanner(reader)
-			for scanner.Scan() {
-				line := scanner.Text()
-				select {
-				case messages <- line:
-				case <-ctx.Done():
-				}
+	go func() {
+		defer close(messages)
+		defer close(errChannel)
+		defer reader.Close()
+		nextEntry := logReader(reader, containerJSON.Config.Tty)
+		for {
+			line, err := nextEntry()
+			if err != nil {
+				errChannel <- err
+				break
 			}
-		}()
-	} else {
-		go func() {
-			defer close(messages)
-			defer close(errChannel)
-			defer reader.Close()
-
-			hdr := make([]byte, 8)
-			var buffer bytes.Buffer
-			for {
-				_, err := reader.Read(hdr)
-				if err != nil {
-					errChannel <- err
-					break
-				}
-				count := binary.BigEndian.Uint32(hdr[4:])
-				_, err = io.CopyN(&buffer, reader, int64(count))
-
-				if err != nil {
-					errChannel <- err
-					break
-				}
-				select {
-				case messages <- buffer.String():
-				case <-ctx.Done():
-				}
-				buffer.Reset()
+			select {
+			case messages <- line:
+			case <-ctx.Done():
 			}
-		}()
-	}
+		}
+	}()
 
 	return messages, errChannel
 }
@@ -202,15 +204,15 @@ func (d *dockerClient) ContainerLogsBetweenDates(ctx context.Context, id string,
 		Until:      strconv.FormatInt(to.Unix(), 10),
 	}
 	reader, _ := d.cli.ContainerLogs(ctx, id, options)
-
 	defer reader.Close()
 
+	containerJSON, _ := d.cli.ContainerInspect(ctx, id)
+
+	nextEntry := logReader(reader, containerJSON.Config.Tty)
+
 	var messages []string
-	hdr := make([]byte, 8)
-	var buffer bytes.Buffer
-
 	for {
-		_, err := reader.Read(hdr)
+		line, err := nextEntry()
 		if err != nil {
 			if err == io.EOF {
 				break
@@ -218,18 +220,7 @@ func (d *dockerClient) ContainerLogsBetweenDates(ctx context.Context, id string,
 				return nil, err
 			}
 		}
-		count := binary.BigEndian.Uint32(hdr[4:])
-		_, err = io.CopyN(&buffer, reader, int64(count))
-
-		if err != nil {
-			if err == io.EOF {
-				break
-			} else {
-				return nil, err
-			}
-		}
-		messages = append(messages, strings.TrimSpace(buffer.String()))
-		buffer.Reset()
+		messages = append(messages, line)
 	}
 
 	return messages, nil

go.mod

@@ -14,38 +14,42 @@ require (
 	github.com/Azure/go-ansiterm v0.0.0-20170929234023-d6e3b3328b78 // indirect
 	github.com/Microsoft/go-winio v0.4.14 // indirect
 	github.com/beme/abide v0.0.0-20190723115211-635a09831760
-	github.com/containerd/containerd v1.3.2 // indirect
+	github.com/containerd/containerd v1.3.3 // indirect
 	github.com/docker/distribution v2.7.1+incompatible // indirect
 	github.com/docker/docker v0.0.0-20190827232753-32688a47f341
 	github.com/docker/go-connections v0.4.0 // indirect
 	github.com/docker/go-units v0.4.0 // indirect
-	github.com/gobuffalo/envy v1.8.1 // indirect
+	github.com/gobuffalo/envy v1.9.0 // indirect
+	github.com/gobuffalo/packd v1.0.0 // indirect
 	github.com/gobuffalo/packr v1.30.1
 	github.com/gogo/protobuf v1.3.1 // indirect
+	github.com/golang/protobuf v1.3.4 // indirect
 	github.com/google/go-cmp v0.3.1 // indirect
-	github.com/gorilla/mux v1.7.3
+	github.com/gorilla/mux v1.7.4
 	github.com/magiconair/properties v1.8.1
 	github.com/morikuni/aec v0.0.0-20170113033406-39771216ff4c // indirect
 	github.com/opencontainers/go-digest v1.0.0-rc1 // indirect
 	github.com/opencontainers/image-spec v1.0.1 // indirect
 	github.com/pelletier/go-toml v1.6.0 // indirect
-	github.com/rogpeppe/go-internal v1.5.1 // indirect
+	github.com/pkg/errors v0.9.1 // indirect
+	github.com/rogpeppe/go-internal v1.5.2 // indirect
 	github.com/sergi/go-diff v1.0.0 // indirect
-	github.com/sirupsen/logrus v1.4.2
+	github.com/sirupsen/logrus v1.6.0
 	github.com/spf13/afero v1.2.2 // indirect
 	github.com/spf13/cast v1.3.1 // indirect
 	github.com/spf13/jwalterweatherman v1.1.0 // indirect
 	github.com/spf13/pflag v1.0.5
-	github.com/spf13/viper v1.6.1
+	github.com/spf13/viper v1.6.3
 	github.com/stretchr/objx v0.2.0 // indirect
-	github.com/stretchr/testify v1.4.0
-	golang.org/x/net v0.0.0-20191209160850-c0dbc17a3553 // indirect
-	golang.org/x/sys v0.0.0-20191218084908-4a24b4065292 // indirect
+	github.com/stretchr/testify v1.5.1
+	golang.org/x/net v0.0.0-20200226121028-0de0cce0169b // indirect
+	golang.org/x/sys v0.0.0-20200223170610-d5e6a3e2c0ae // indirect
 	golang.org/x/text v0.3.2 // indirect
-	google.golang.org/genproto v0.0.0-20191216205247-b31c10ee225f // indirect
-	google.golang.org/grpc v1.26.0 // indirect
-	gopkg.in/yaml.v2 v2.2.7 // indirect
+	google.golang.org/genproto v0.0.0-20200226201735-46b91f19d98c // indirect
+	google.golang.org/grpc v1.27.1 // indirect
+	gopkg.in/ini.v1 v1.52.0 // indirect
+	gopkg.in/yaml.v2 v2.2.8 // indirect
 	gotest.tools v2.2.0+incompatible // indirect
 )
 
-go 1.13
+go 1.14

go.sum

@@ -28,12 +28,11 @@ github.com/bugsnag/panicwrap v0.0.0-20151223152923-e2c28503fcd0/go.mod h1:D/8v3k
 github.com/census-instrumentation/opencensus-proto v0.2.1/go.mod h1:f6KPmirojxKA12rnyqOA5BBL4O983OfeGPqjHWSTneU=
 github.com/cespare/xxhash v1.1.0/go.mod h1:XrSqR1VqqWfGrhpAt58auRo0WTKS1nRRg3ghfAqPWnc=
 github.com/client9/misspell v0.3.4/go.mod h1:qj6jICC3Q7zFZvVWo7KLAzC3yx5G7kyvSDkc90ppPyw=
-github.com/containerd/containerd v1.2.9 h1:6tyNjBmAMG47QuFPIT9LgiiexoVxC6qpTGR+eD0R0Z8=
-github.com/containerd/containerd v1.2.9/go.mod h1:bC6axHOhabU15QhwfG7w5PipXdVtMXFTttgp+kVtyUA=
-github.com/containerd/containerd v1.3.2 h1:ForxmXkA6tPIvffbrDAcPUIB32QgXkt2XFj+F0UxetA=
-github.com/containerd/containerd v1.3.2/go.mod h1:bC6axHOhabU15QhwfG7w5PipXdVtMXFTttgp+kVtyUA=
+github.com/containerd/containerd v1.3.3 h1:LoIzb5y9x5l8VKAlyrbusNPXqBY0+kviRloxFUMFwKc=
+github.com/containerd/containerd v1.3.3/go.mod h1:bC6axHOhabU15QhwfG7w5PipXdVtMXFTttgp+kVtyUA=
 github.com/coreos/bbolt v1.3.2/go.mod h1:iRUV2dpdMOn7Bo10OQBFzIJO9kkE559Wcmn+qkEiiKk=
 github.com/coreos/etcd v3.3.10+incompatible/go.mod h1:uF7uidLiAD3TWHmW31ZFd/JWoc32PjwdhPthX9715RE=
+github.com/coreos/etcd v3.3.13+incompatible/go.mod h1:uF7uidLiAD3TWHmW31ZFd/JWoc32PjwdhPthX9715RE=
 github.com/coreos/go-etcd v2.0.0+incompatible/go.mod h1:Jez6KQU2B/sWsbdaef3ED8NzMklzPG4d5KIOhIy30Tk=
 github.com/coreos/go-semver v0.2.0/go.mod h1:nnelYz7RCh+5ahJtPPxZlU+153eP4D4r3EedlOD2RNk=
 github.com/coreos/go-systemd v0.0.0-20190321100706-95778dfbb74e/go.mod h1:F5haX7vjVVG0kc13fIWeqUViNPyEJxv/OmvnBo0Yme4=
@@ -70,21 +69,19 @@ github.com/go-logfmt/logfmt v0.4.0/go.mod h1:3RMwSq7FuexP4Kalkev3ejPJsZTpXXBr9+V
 github.com/go-stack/stack v1.8.0/go.mod h1:v0f6uXyyMGvRgIKkXu+yp6POWl0qKG85gN/melR3HDY=
 github.com/gobuffalo/envy v1.7.0 h1:GlXgaiBkmrYMHco6t4j7SacKO4XUjvh5pwXh0f4uxXU=
 github.com/gobuffalo/envy v1.7.0/go.mod h1:n7DRkBerg/aorDM8kbduw5dN3oXGswK5liaSCx4T5NI=
-github.com/gobuffalo/envy v1.7.1 h1:OQl5ys5MBea7OGCdvPbBJWRgnhC/fGona6QKfvFeau8=
-github.com/gobuffalo/envy v1.7.1/go.mod h1:FurDp9+EDPE4aIUS3ZLyD+7/9fpx7YRt/ukY6jIHf0w=
-github.com/gobuffalo/envy v1.8.1 h1:RUr68liRvs0TS1D5qdW3mQv2SjAsu1QWMCx1tG4kDjs=
-github.com/gobuffalo/envy v1.8.1/go.mod h1:FurDp9+EDPE4aIUS3ZLyD+7/9fpx7YRt/ukY6jIHf0w=
+github.com/gobuffalo/envy v1.9.0 h1:eZR0DuEgVLfeIb1zIKt3bT4YovIMf9O9LXQeCZLXpqE=
+github.com/gobuffalo/envy v1.9.0/go.mod h1:FurDp9+EDPE4aIUS3ZLyD+7/9fpx7YRt/ukY6jIHf0w=
 github.com/gobuffalo/logger v1.0.0/go.mod h1:2zbswyIUa45I+c+FLXuWl9zSWEiVuthsk8ze5s8JvPs=
 github.com/gobuffalo/packd v0.3.0 h1:eMwymTkA1uXsqxS0Tpoop3Lc0u3kTfiMBE6nKtQU4g4=
 github.com/gobuffalo/packd v0.3.0/go.mod h1:zC7QkmNkYVGKPw4tHpBQ+ml7W/3tIebgeo1b36chA3Q=
+github.com/gobuffalo/packd v1.0.0 h1:6ERZvJHfe24rfFmA9OaoKBdC7+c9sydrytMg8SdFGBM=
+github.com/gobuffalo/packd v1.0.0/go.mod h1:6VTc4htmJRFB7u1m/4LeMTWjFoYrUiBkU9Fdec9hrhI=
 github.com/gobuffalo/packr v1.30.1 h1:hu1fuVR3fXEZR7rXNW3h8rqSML8EVAf6KNm0NKO/wKg=
 github.com/gobuffalo/packr v1.30.1/go.mod h1:ljMyFO2EcrnzsHsN99cvbq055Y9OhRrIaviy289eRuk=
 github.com/gobuffalo/packr/v2 v2.5.1/go.mod h1:8f9c96ITobJlPzI44jj+4tHnEKNt0xXWSVlXRN9X1Iw=
 github.com/gogo/protobuf v1.1.1/go.mod h1:r8qH/GZQm5c6nD/R0oafs1akxWv10x8SbQlK7atdtwQ=
 github.com/gogo/protobuf v1.2.1 h1:/s5zKNz0uPFCZ5hddgPdo2TK2TVrUNMn0OOX8/aZMTE=
 github.com/gogo/protobuf v1.2.1/go.mod h1:hp+jE20tsWTFYpLwKvXlhS1hjn+gTNwPg2I6zVXpSg4=
-github.com/gogo/protobuf v1.3.0 h1:G8O7TerXerS4F6sx9OV7/nRfJdnXgHZu/S/7F2SN+UE=
-github.com/gogo/protobuf v1.3.0/go.mod h1:SlYgWuQ5SjCEi6WLHjHCa1yvBfUnHcTbrrZtXPKa29o=
 github.com/gogo/protobuf v1.3.1 h1:DqDEcV5aeaTmdFBePNpYsp3FlcVH/2ISVVM9Qf8PSls=
 github.com/gogo/protobuf v1.3.1/go.mod h1:SlYgWuQ5SjCEi6WLHjHCa1yvBfUnHcTbrrZtXPKa29o=
 github.com/golang/glog v0.0.0-20160126235308-23def4e6c14b h1:VKtxabqXZkF25pY9ekfRL6a582T4P37/31XEstQ5p58=
@@ -97,15 +94,20 @@ github.com/golang/protobuf v1.3.1 h1:YF8+flBXS5eO826T4nzqPrxfhQThhXl0YzfuUPu4SBg
 github.com/golang/protobuf v1.3.1/go.mod h1:6lQm79b+lXiMfvg/cZm0SGofjICqVBUtrP5yJMmIC1U=
 github.com/golang/protobuf v1.3.2 h1:6nsPYzhq5kReh6QImI3k5qWzO4PEbvbIW2cwSfR/6xs=
 github.com/golang/protobuf v1.3.2/go.mod h1:6lQm79b+lXiMfvg/cZm0SGofjICqVBUtrP5yJMmIC1U=
+github.com/golang/protobuf v1.3.3/go.mod h1:vzj43D7+SQXF/4pzW/hwtAqwc6iTitCiVSaWz5lYuqw=
+github.com/golang/protobuf v1.3.4 h1:87PNWwrRvUSnqS4dlcBU/ftvOIBep4sYuBLlh6rX2wk=
+github.com/golang/protobuf v1.3.4/go.mod h1:vzj43D7+SQXF/4pzW/hwtAqwc6iTitCiVSaWz5lYuqw=
 github.com/google/btree v1.0.0/go.mod h1:lNA+9X1NB3Zf8V7Ke586lFgjr2dZNuvo3lPJSGZ5JPQ=
 github.com/google/go-cmp v0.2.0/go.mod h1:oXzfMopK8JAjlY9xF4vHSVASa0yLyX7SntLO5aqRK0M=
 github.com/google/go-cmp v0.3.1 h1:Xye71clBPdm5HgqGwUkwhbynsUJZhDbS20FvLhQ2izg=
 github.com/google/go-cmp v0.3.1/go.mod h1:8QqcDgzrUqlUb/G2PQTWiueGozuR1884gddMywk6iLU=
+github.com/google/gofuzz v1.0.0/go.mod h1:dBl0BpW6vV/+mYPU4Po3pmUjxk6FQPldtuIdl/M65Eg=
+github.com/gopherjs/gopherjs v0.0.0-20181017120253-0766667cb4d1 h1:EGx4pi6eqNxGaHF6qqu48+N2wcFQ5qg5FXgOdqsJ5d8=
 github.com/gopherjs/gopherjs v0.0.0-20181017120253-0766667cb4d1/go.mod h1:wJfORRmW1u3UXTncJ5qlYoELFm8eSnnEO6hX4iZ3EWY=
 github.com/gorilla/handlers v0.0.0-20150720190736-60c7bfde3e33/go.mod h1:Qkdc/uu4tH4g6mTK6auzZ766c4CA0Ng8+o/OAirnOIQ=
 github.com/gorilla/mux v1.7.2/go.mod h1:1lud6UwP+6orDFRuTfBEV8e9/aOM/c4fVVCaMa2zaAs=
-github.com/gorilla/mux v1.7.3 h1:gnP5JzjVOuiZD07fKKToCAOjS0yOpj/qPETTXCCS6hw=
-github.com/gorilla/mux v1.7.3/go.mod h1:1lud6UwP+6orDFRuTfBEV8e9/aOM/c4fVVCaMa2zaAs=
+github.com/gorilla/mux v1.7.4 h1:VuZ8uybHlWmqV03+zRzdwKL4tUnIp1MAQtp1mIFE1bc=
+github.com/gorilla/mux v1.7.4/go.mod h1:DVbg23sWSpFRCP0SfiEN6jmj59UnW/n46BH5rLB71So=
 github.com/gorilla/websocket v1.4.0/go.mod h1:E7qHFY5m1UJ88s3WnNqhKjPHQ0heANvMoAMk2YaljkQ=
 github.com/grpc-ecosystem/go-grpc-middleware v1.0.0/go.mod h1:FiyG127CGDf3tlThmgyCl78X/SZQqEOJBCDaAfeWzPs=
 github.com/grpc-ecosystem/go-grpc-prometheus v1.2.0/go.mod h1:8NvIoxWQoOIhqOTXgfV/d3M/q6VIi02HzZEHgUlZvzk=
@@ -118,6 +120,8 @@ github.com/jmespath/go-jmespath v0.0.0-20160803190731-bd40a432e4c7/go.mod h1:Nht
 github.com/joho/godotenv v1.3.0 h1:Zjp+RcGpHhGlrMbJzXTrZZPrWj+1vfm90La1wgB6Bhc=
 github.com/joho/godotenv v1.3.0/go.mod h1:7hK45KPybAkOC6peb+G5yklZfMxEjkZhHbwpqxOKXbg=
 github.com/jonboulle/clockwork v0.1.0/go.mod h1:Ii8DK3G1RaLaWxj9trq07+26W01tbo22gdxWY5EU2bo=
+github.com/json-iterator/go v1.1.9/go.mod h1:KdQUCv79m/52Kvf8AW2vK1V8akMuk1QjK/uOdHXbAo4=
+github.com/jtolds/gls v4.20.0+incompatible h1:xdiiI2gbIgH/gLH7ADydsJ1uDOEzR8yvV7C0MuV77Wo=
 github.com/jtolds/gls v4.20.0+incompatible/go.mod h1:QJZ7F/aHp+rZTRtaJ1ow/lLfFfVYBRgL+9YlvaHOwJU=
 github.com/julienschmidt/httprouter v1.2.0/go.mod h1:SYymIcj16QtmaHHD7aYtjjsJG7VTCxuUUipMqKk8s4w=
 github.com/karrick/godirwalk v1.10.12/go.mod h1:RoGL9dQei4vP9ilrpETWE8CLOZ1kiN0LhBygSwrAsHA=
@@ -127,6 +131,8 @@ github.com/kisielk/gotool v1.0.0/go.mod h1:XhKaO+MFFWcvkIS/tQcRk01m1F5IRFswLeQ+o
 github.com/konsorten/go-windows-terminal-sequences v1.0.1/go.mod h1:T0+1ngSBFLxvqU3pZ+m/2kptfBszLMUkC4ZK/EgS/cQ=
 github.com/konsorten/go-windows-terminal-sequences v1.0.2 h1:DB17ag19krx9CFsz4o3enTrPXyIXCl+2iCXH/aMAp9s=
 github.com/konsorten/go-windows-terminal-sequences v1.0.2/go.mod h1:T0+1ngSBFLxvqU3pZ+m/2kptfBszLMUkC4ZK/EgS/cQ=
+github.com/konsorten/go-windows-terminal-sequences v1.0.3 h1:CE8S1cTafDpPvMhIxNJKvHsGVBgn1xWYf1NbHQhywc8=
+github.com/konsorten/go-windows-terminal-sequences v1.0.3/go.mod h1:T0+1ngSBFLxvqU3pZ+m/2kptfBszLMUkC4ZK/EgS/cQ=
 github.com/kr/logfmt v0.0.0-20140226030751-b84e30acd515/go.mod h1:+0opPa2QZZtGFBFZlji/RkVcI2GknAs/DXo4wKdlNEc=
 github.com/kr/pretty v0.1.0 h1:L/CwN0zerZDmRFUapSPitk6f+Q3+0za1rQkzVuMiMFI=
 github.com/kr/pretty v0.1.0/go.mod h1:dAy3ld7l9f0ibDNOQOHHMYYIIbhfbHSm3C4ZsoJORNo=
@@ -142,6 +148,9 @@ github.com/mitchellh/go-homedir v1.1.0/go.mod h1:SfyaCUpYCn1Vlf4IUYiD9fPX4A5wJrk
 github.com/mitchellh/mapstructure v1.1.2 h1:fmNYVwqnSfB9mZU6OS2O6GsXM+wcskZDuKQzvN1EDeE=
 github.com/mitchellh/mapstructure v1.1.2/go.mod h1:FVVH3fgwuzCH5S8UJGiWEs2h04kUh9fWfEaFds41c1Y=
 github.com/mitchellh/osext v0.0.0-20151018003038-5e2d6d41470f/go.mod h1:OkQIRizQZAeMln+1tSwduZz7+Af5oFlKirV/MSYes2A=
+github.com/modern-go/concurrent v0.0.0-20180228061459-e0a39a4cb421/go.mod h1:6dJC0mAP4ikYIbvyc7fijjWJddQyLn8Ig3JB5CqoB9Q=
+github.com/modern-go/reflect2 v0.0.0-20180701023420-4b7aa43c6742/go.mod h1:bx2lNnkwVCuqBIxFjflWJWanXIb3RllmbCylyMrvgv0=
+github.com/modern-go/reflect2 v1.0.1/go.mod h1:bx2lNnkwVCuqBIxFjflWJWanXIb3RllmbCylyMrvgv0=
 github.com/morikuni/aec v0.0.0-20170113033406-39771216ff4c h1:nXxl5PrvVm2L/wCy8dQu6DMTwH4oIuGN8GJDAlqDdVE=
 github.com/morikuni/aec v0.0.0-20170113033406-39771216ff4c/go.mod h1:BbKIizmSmc5MMPqRYbxO4ZU0S0+P200+tUnFx7PXmsc=
 github.com/mwitkow/go-conntrack v0.0.0-20161129095857-cc309e4a2223/go.mod h1:qRWi+5nqEBWmkhHvq77mSJWrCKwh8bxhgT7d/eI7P4U=
@@ -155,14 +164,14 @@ github.com/opencontainers/image-spec v1.0.1 h1:JMemWkRwHx4Zj+fVxWoMCFm/8sYGGrUVo
 github.com/opencontainers/image-spec v1.0.1/go.mod h1:BtxoFyWECRxE4U/7sNtV5W15zMzWCbyJoFRP3s7yZA0=
 github.com/pelletier/go-toml v1.2.0 h1:T5zMGML61Wp+FlcbWjRDT7yAxhJNAiPPLOFECq181zc=
 github.com/pelletier/go-toml v1.2.0/go.mod h1:5z9KED0ma1S8pY6P1sdut58dfprrGBbd/94hg7ilaic=
-github.com/pelletier/go-toml v1.4.0 h1:u3Z1r+oOXJIkxqw34zVhyPgjBsm6X2wn21NWs/HfSeg=
-github.com/pelletier/go-toml v1.4.0/go.mod h1:PN7xzY2wHTK0K9p34ErDQMlFxa51Fk0OUruD3k1mMwo=
 github.com/pelletier/go-toml v1.6.0 h1:aetoXYr0Tv7xRU/V4B4IZJ2QcbtMUFoNb3ORp7TzIK4=
 github.com/pelletier/go-toml v1.6.0/go.mod h1:5N711Q9dKgbdkxHL+MEfF31hpT7l0S0s/t2kKREewys=
 github.com/pkg/errors v0.8.0 h1:WdK/asTD0HN+q6hsWO3/vpuAkAr+tw6aNJNDFFf0+qw=
 github.com/pkg/errors v0.8.0/go.mod h1:bwawxfHBFNV+L2hUp1rHADufV3IMtnDRdf1r5NINEl0=
 github.com/pkg/errors v0.8.1 h1:iURUrRGxPUNPdy5/HRSm+Yj6okJ6UtLINN0Q9M4+h3I=
 github.com/pkg/errors v0.8.1/go.mod h1:bwawxfHBFNV+L2hUp1rHADufV3IMtnDRdf1r5NINEl0=
+github.com/pkg/errors v0.9.1 h1:FEBLx1zS214owpjy7qsBeixbURkuhQAwrK5UwLGTwt4=
+github.com/pkg/errors v0.9.1/go.mod h1:bwawxfHBFNV+L2hUp1rHADufV3IMtnDRdf1r5NINEl0=
 github.com/pmezard/go-difflib v1.0.0 h1:4DBwDE0NGyQoBHbLQYPwSUPoCMWR5BEzIk/f1lZbAQM=
 github.com/pmezard/go-difflib v1.0.0/go.mod h1:iKH77koFhYxTK1pcRnkKkqfTogsbg7gZNVY4sRDYZ/4=
 github.com/prometheus/client_golang v0.0.0-20180209125602-c332b6f63c06/go.mod h1:7SWBe2y4D6OKWSNQJUaRYU/AaXPKyh/dDVn+NZz0KFw=
@@ -185,8 +194,8 @@ github.com/rogpeppe/go-internal v1.3.0 h1:RR9dF3JtopPvtkroDZuVD7qquD0bnHlKSqaQhg
 github.com/rogpeppe/go-internal v1.3.0/go.mod h1:M8bDsm7K2OlrFYOpmOWEs/qY81heoFRclV5y23lUDJ4=
 github.com/rogpeppe/go-internal v1.3.2 h1:XU784Pr0wdahMY2bYcyK6N1KuaRAdLtqD4qd8D18Bfs=
 github.com/rogpeppe/go-internal v1.3.2/go.mod h1:xXDCJY+GAPziupqXw64V24skbSoqbTEfhy4qGm1nDQc=
-github.com/rogpeppe/go-internal v1.5.1 h1:asQ0uD7BN9RU5Im41SEEZTwCi/zAXdMOLS3npYaos2g=
-github.com/rogpeppe/go-internal v1.5.1/go.mod h1:xXDCJY+GAPziupqXw64V24skbSoqbTEfhy4qGm1nDQc=
+github.com/rogpeppe/go-internal v1.5.2 h1:qLvObTrvO/XRCqmkKxUlOBc48bI3efyDuAZe25QiF0w=
+github.com/rogpeppe/go-internal v1.5.2/go.mod h1:xXDCJY+GAPziupqXw64V24skbSoqbTEfhy4qGm1nDQc=
 github.com/russross/blackfriday v1.5.2/go.mod h1:JO/DiYxRf+HjHt06OyowR9PTA263kcR/rfWxYHBV53g=
 github.com/satori/go.uuid v1.2.0/go.mod h1:dA0hQrYB0VpLJoorglMZABFdXlWrHn1NEOzdhQKdks0=
 github.com/sergi/go-diff v1.0.0 h1:Kpca3qRNrduNnOQeazBd0ysaKrUJiIuISHxogkT9RPQ=
@@ -195,8 +204,14 @@ github.com/sirupsen/logrus v1.2.0/go.mod h1:LxeOpSwHxABJmUn/MG1IvRgCAasNZTLOkJPx
 github.com/sirupsen/logrus v1.4.1/go.mod h1:ni0Sbl8bgC9z8RoU9G6nDWqqs/fq4eDPysMBDgk/93Q=
 github.com/sirupsen/logrus v1.4.2 h1:SPIRibHv4MatM3XXNO2BJeFLZwZ2LvZgfQ5+UNI2im4=
 github.com/sirupsen/logrus v1.4.2/go.mod h1:tLMulIdttU9McNUspp0xgXVQah82FyeX6MwdIuYE2rE=
+github.com/sirupsen/logrus v1.5.0 h1:1N5EYkVAPEywqZRJd7cwnRtCb6xJx7NH3T3WUTF980Q=
+github.com/sirupsen/logrus v1.5.0/go.mod h1:+F7Ogzej0PZc/94MaYx/nvG9jOFMD2osvC3s+Squfpo=
+github.com/sirupsen/logrus v1.6.0 h1:UBcNElsrwanuuMsnGSlYmtmgbb23qDR5dG+6X6Oo89I=
+github.com/sirupsen/logrus v1.6.0/go.mod h1:7uNnSEd1DgxDLC74fIahvMZmmYsHGZGEOFrfsX/uA88=
+github.com/smartystreets/assertions v0.0.0-20180927180507-b2de0cb4f26d h1:zE9ykElWQ6/NYmHa3jpm/yHnI4xSofP+UP6SpjHcSeM=
 github.com/smartystreets/assertions v0.0.0-20180927180507-b2de0cb4f26d/go.mod h1:OnSkiWE9lh6wB0YB77sQom3nweQdgAjqCqsofrRNTgc=
 github.com/smartystreets/goconvey v0.0.0-20190330032615-68dc04aab96a/go.mod h1:syvi0/a8iFYH4r/RixwvyeAJjdLS9QV7WQ/tjFTllLA=
+github.com/smartystreets/goconvey v1.6.4 h1:fv0U8FUIMPNf1L9lnHLvLhgicrIVChEkdzIKYqbNC9s=
 github.com/smartystreets/goconvey v1.6.4/go.mod h1:syvi0/a8iFYH4r/RixwvyeAJjdLS9QV7WQ/tjFTllLA=
 github.com/soheilhy/cmux v0.1.4/go.mod h1:IM3LyeVVIOuxMH7sFAkER9+bJ4dT7Ms6E4xg4kGIyLM=
 github.com/spaolacci/murmur3 v0.0.0-20180118202830-f09979ecbc72/go.mod h1:JwIasOWyU6f++ZhiEuf87xNszmSA2myDM2Kzu9HwQUA=
@@ -220,12 +235,8 @@ github.com/spf13/pflag v1.0.5 h1:iy+VFUOCP1a+8yFto/drg2CJ5u0yRoB7fZw3DKv/JXA=
 github.com/spf13/pflag v1.0.5/go.mod h1:McXfInJRrz4CZXVZOBLb0bTZqETkiAhM9Iw0y3An2Bg=
 github.com/spf13/viper v1.3.2 h1:VUFqw5KcqRf7i70GOzW7N+Q7+gxVBkSSqiXB12+JQ4M=
 github.com/spf13/viper v1.3.2/go.mod h1:ZiWeW+zYFKm7srdB9IoDzzZXaJaI5eL9QjNiN/DMA2s=
-github.com/spf13/viper v1.4.0 h1:yXHLWeravcrgGyFSyCgdYpXQ9dR9c/WED3pg1RhxqEU=
-github.com/spf13/viper v1.4.0/go.mod h1:PTJ7Z/lr49W6bUbkmS1V3by4uWynFiR9p7+dSq/yZzE=
-github.com/spf13/viper v1.5.0 h1:GpsTwfsQ27oS/Aha/6d1oD7tpKIqWnOA6tgOX9HHkt4=
-github.com/spf13/viper v1.5.0/go.mod h1:AkYRkVJF8TkSG/xet6PzXX+l39KhhXa2pdqVSxnTcn4=
-github.com/spf13/viper v1.6.1 h1:VPZzIkznI1YhVMRi6vNFLHSwhnhReBfgTxIPccpfdZk=
-github.com/spf13/viper v1.6.1/go.mod h1:t3iDnF5Jlj76alVNuyFBk5oUMCvsrkbvZK0WQdfDi5k=
+github.com/spf13/viper v1.6.3 h1:pDDu1OyEDTKzpJwdq4TiuLyMsUgRa/BT5cn5O62NoHs=
+github.com/spf13/viper v1.6.3/go.mod h1:jUMtyi0/lB5yZH/FjyGAoH7IMNrIhlBf6pXZmbMDvzw=
 github.com/stretchr/objx v0.1.0/go.mod h1:HFkY916IF+rwdDfMAkV7OtwuqBVzrE8GR6GFx+wExME=
 github.com/stretchr/objx v0.1.1/go.mod h1:HFkY916IF+rwdDfMAkV7OtwuqBVzrE8GR6GFx+wExME=
 github.com/stretchr/objx v0.2.0 h1:Hbg2NidpLE8veEBkEZTL3CvlkUIVzuU9jDplZO54c48=
@@ -235,10 +246,11 @@ github.com/stretchr/testify v1.3.0 h1:TivCn/peBQ7UY8ooIcPgZFpTNSz0Q2U6UrFlUfqbe0
 github.com/stretchr/testify v1.3.0/go.mod h1:M5WIy9Dh21IEIfnGCwXGc5bZfKNJtfHm1UVUgZn+9EI=
 github.com/stretchr/testify v1.4.0 h1:2E4SXV/wtOkTonXsotYi4li6zVWxYlZuYNCXe9XRJyk=
 github.com/stretchr/testify v1.4.0/go.mod h1:j7eGeouHqKxXV5pUuKE4zz7dFj8WfuZ+81PSLYec5m4=
+github.com/stretchr/testify v1.5.1 h1:nOGnQDM7FYENwehXlg/kFVnos3rEvtKTjRvOWSzb6H4=
+github.com/stretchr/testify v1.5.1/go.mod h1:5W2xD1RspED5o8YsWQXVCued0rvSQ+mT+I5cxcmMvtA=
 github.com/subosito/gotenv v1.2.0 h1:Slr1R9HxAlEKefgq5jn9U+DnETlIUa6HfgEzj0g5d7s=
 github.com/subosito/gotenv v1.2.0/go.mod h1:N0PQaV/YGNqwC0u51sEeR/aUtSLEXKX9iv69rRypqCw=
 github.com/tmc/grpc-websocket-proxy v0.0.0-20190109142713-0ad062ec5ee5/go.mod h1:ncp9v5uamzpCO7NfCPTXjqaC+bZgJeR0sMTm6dMHP7U=
-github.com/ugorji/go v1.1.4/go.mod h1:uQMGLiO92mf5W77hV/PUCpI3pbzQx3CRekS0kk+RGrc=
 github.com/ugorji/go/codec v0.0.0-20181204163529-d75b2dcb6bc8/go.mod h1:VFNgLljTbGfSG7qAOspJ7OScBnGdDN/yBr0sguwnwf0=
 github.com/xiang90/probing v0.0.0-20190116061207-43a291ad63a2/go.mod h1:UETIi67q53MR2AWcXfiuqkDkRtnGDLqkBTpCHuJHxtU=
 github.com/xordataexchange/crypt v0.0.3-0.20170626215501-b2862e3d0a77/go.mod h1:aYKd//L2LvnjZzWKhF00oedf4jCCReLcmhLdhm1A27Q=
@@ -269,10 +281,8 @@ golang.org/x/net v0.0.0-20190404232315-eb5bcb51f2a3/go.mod h1:t9HGtf8HONx5eT2rtn
 golang.org/x/net v0.0.0-20190522155817-f3200d17e092 h1:4QSRKanuywn15aTZvI/mIDEgPQpswuFndXpOj3rKEco=
 golang.org/x/net v0.0.0-20190522155817-f3200d17e092/go.mod h1:HSz+uSET+XFnRR8LxR5pz3Of3rY3CfYBVs4xY44aLks=
 golang.org/x/net v0.0.0-20190619014844-b5b0513f8c1b/go.mod h1:z5CRVTTTmAJ677TzLLGU+0bjPO0LkuOLi4/5GtJWs/s=
-golang.org/x/net v0.0.0-20190918130420-a8b05e9114ab h1:h5tBRKZ1aY/bo6GNqe/4zWC8GkaLOFQ5wPKIOQ0i2sA=
-golang.org/x/net v0.0.0-20190918130420-a8b05e9114ab/go.mod h1:z5CRVTTTmAJ677TzLLGU+0bjPO0LkuOLi4/5GtJWs/s=
-golang.org/x/net v0.0.0-20191209160850-c0dbc17a3553 h1:efeOvDhwQ29Dj3SdAV/MJf8oukgn+8D8WgaCaRMchF8=
-golang.org/x/net v0.0.0-20191209160850-c0dbc17a3553/go.mod h1:z5CRVTTTmAJ677TzLLGU+0bjPO0LkuOLi4/5GtJWs/s=
+golang.org/x/net v0.0.0-20200226121028-0de0cce0169b h1:0mm1VjtFUOIlE1SbDlwjYaDxZVDP2S5ou6y0gSgXHu8=
+golang.org/x/net v0.0.0-20200226121028-0de0cce0169b/go.mod h1:z5CRVTTTmAJ677TzLLGU+0bjPO0LkuOLi4/5GtJWs/s=
 golang.org/x/oauth2 v0.0.0-20180821212333-d2e6202438be/go.mod h1:N/0e6XlmueqKjAGxoOufVs8QHGRruUQn6yWY3a++T0U=
 golang.org/x/oauth2 v0.0.0-20190604053449-0f29369cfe45/go.mod h1:gOpvHmFTYa4IltrdGE7lF6nIHvwfUNPOp7c8zoXwtLw=
 golang.org/x/sync v0.0.0-20180314180146-1d60e4601c6f/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM=
@@ -293,10 +303,8 @@ golang.org/x/sys v0.0.0-20190507160741-ecd444e8653b/go.mod h1:h1NjWce9XRLGQEsW7w
 golang.org/x/sys v0.0.0-20190515120540-06a5c4944438 h1:khxRGsvPk4n2y8I/mLLjp7e5dMTJmH75wvqS6nMwUtY=
 golang.org/x/sys v0.0.0-20190515120540-06a5c4944438/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
 golang.org/x/sys v0.0.0-20190602015325-4c4f7f33c9ed/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
-golang.org/x/sys v0.0.0-20190916202348-b4ddaad3f8a3 h1:7TYNF4UdlohbFwpNH04CoPMp1cHUZgO1Ebq5r2hIjfo=
-golang.org/x/sys v0.0.0-20190916202348-b4ddaad3f8a3/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
-golang.org/x/sys v0.0.0-20191218084908-4a24b4065292 h1:Y8q0zsdcgAd+JU8VUA8p8Qv2YhuY9zevDG2ORt5qBUI=
-golang.org/x/sys v0.0.0-20191218084908-4a24b4065292/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
+golang.org/x/sys v0.0.0-20200223170610-d5e6a3e2c0ae h1:/WDfKMnPU+m5M4xB+6x4kaepxRw6jWvR5iDRdvjHgy8=
+golang.org/x/sys v0.0.0-20200223170610-d5e6a3e2c0ae/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
 golang.org/x/text v0.3.0/go.mod h1:NqM8EUOU14njkJ3fqMW+pc6Ldnwhi/IjpwHt7yyuwOQ=
 golang.org/x/text v0.3.2 h1:tW2bmiBqwgJj/UpqtC8EpXEZVYOwU0yG4iWbprSVAcs=
 golang.org/x/text v0.3.2/go.mod h1:bEr9sfX3Q8Zfm5fL9x+3itogRgK3+ptLWKqgva+5dAk=
@@ -318,19 +326,16 @@ google.golang.org/cloud v0.0.0-20151119220103-975617b05ea8/go.mod h1:0H1ncTHf11K
 google.golang.org/genproto v0.0.0-20180817151627-c66870c02cf8 h1:Nw54tB0rB7hY/N0NQvRW8DG4Yk3Q6T9cu9RcFQDu1tc=
 google.golang.org/genproto v0.0.0-20180817151627-c66870c02cf8/go.mod h1:JiN7NxoALGmiZfu7CAH4rXhgtRTLTxftemlI0sWmxmc=
 google.golang.org/genproto v0.0.0-20190819201941-24fa4b261c55/go.mod h1:DMBHOl98Agz4BDEuKkezgsaosCRResVns1a3J2ZsMNc=
-google.golang.org/genproto v0.0.0-20190916214212-f660b8655731 h1:Phvl0+G5t5k/EUFUi0wPdUUeTL2HydMQUXHnunWgSb0=
-google.golang.org/genproto v0.0.0-20190916214212-f660b8655731/go.mod h1:IbNlFCBrqXvoKpeg0TB2l7cyZUmoaFKYIwrEpbDKLA8=
-google.golang.org/genproto v0.0.0-20191216205247-b31c10ee225f h1:0RYv5T9ZdroAqqfM2taEB0nJrArv0X1JpIdgUmY4xg8=
-google.golang.org/genproto v0.0.0-20191216205247-b31c10ee225f/go.mod h1:n3cpQtvxv34hfy77yVDNjmbRyujviMdxYliBSkLhpCc=
+google.golang.org/genproto v0.0.0-20200226201735-46b91f19d98c h1:xFOdgVPpeowWAH0MJ5i0XMp+3yWiWamMtN/kx9xThIQ=
+google.golang.org/genproto v0.0.0-20200226201735-46b91f19d98c/go.mod h1:55QSHmfGQM9UVYDPBsyGGes0y52j32PQ3BqQfXhyH3c=
 google.golang.org/grpc v0.0.0-20160317175043-d3ddb4469d5a/go.mod h1:yo6s7OP7yaDglbqo1J04qKzAhqBH6lvTonzMVmEdcZw=
 google.golang.org/grpc v1.19.0/go.mod h1:mqu4LbDTu4XGKhr4mRzUsmM4RtVoemTSY81AxZiDr8c=
 google.golang.org/grpc v1.21.0 h1:G+97AoqBnmZIT91cLG/EkCoK9NSelj64P8bOHHNmGn0=
 google.golang.org/grpc v1.21.0/go.mod h1:oYelfM1adQP15Ek0mdvEgi9Df8B9CZIaU1084ijfRaM=
 google.golang.org/grpc v1.23.0/go.mod h1:Y5yQAOtifL1yxbo5wqy6BxZv8vAUGQwXBOALyacEbxg=
-google.golang.org/grpc v1.23.1 h1:q4XQuHFC6I28BKZpo6IYyb3mNO+l7lSOxRuYTCiDfXk=
-google.golang.org/grpc v1.23.1/go.mod h1:Y5yQAOtifL1yxbo5wqy6BxZv8vAUGQwXBOALyacEbxg=
-google.golang.org/grpc v1.26.0 h1:2dTRdpdFEEhJYQD8EMLB61nnrzSCTbG38PhqdhvOltg=
-google.golang.org/grpc v1.26.0/go.mod h1:qbnxyOmOxrQa7FizSgH+ReBfzJrCY1pSN7KXBS8abTk=
+google.golang.org/grpc v1.27.0/go.mod h1:qbnxyOmOxrQa7FizSgH+ReBfzJrCY1pSN7KXBS8abTk=
+google.golang.org/grpc v1.27.1 h1:zvIju4sqAGvwKspUQOhwnpcqSbzi7/H6QomNNjTL4sk=
+google.golang.org/grpc v1.27.1/go.mod h1:qbnxyOmOxrQa7FizSgH+ReBfzJrCY1pSN7KXBS8abTk=
 gopkg.in/alecthomas/kingpin.v2 v2.2.6/go.mod h1:FMv+mEhP44yOT+4EoQTLFTRgOQ1FBLkstjWtayDeSgw=
 gopkg.in/check.v1 v0.0.0-20161208181325-20d25e280405/go.mod h1:Co6ibVJAznAaIkqp8huTwlJQCZ016jof/cbN4VW5Yz0=
 gopkg.in/check.v1 v1.0.0-20141024133853-64131543e789/go.mod h1:Co6ibVJAznAaIkqp8huTwlJQCZ016jof/cbN4VW5Yz0=
@@ -339,6 +344,8 @@ gopkg.in/check.v1 v1.0.0-20180628173108-788fd7840127/go.mod h1:Co6ibVJAznAaIkqp8
 gopkg.in/errgo.v2 v2.1.0/go.mod h1:hNsd1EY+bozCKY1Ytp96fpM3vjJbqLJn88ws8XvfDNI=
 gopkg.in/ini.v1 v1.51.0 h1:AQvPpx3LzTDM0AjnIRlVFwFFGC+npRopjZxLJj6gdno=
 gopkg.in/ini.v1 v1.51.0/go.mod h1:pNLf8WUiyNEtQjuu5G5vTm06TEv9tsIgeAvK8hOrP4k=
+gopkg.in/ini.v1 v1.52.0 h1:j+Lt/M1oPPejkniCg1TkWE2J3Eh1oZTsHSXzMTzUXn4=
+gopkg.in/ini.v1 v1.52.0/go.mod h1:pNLf8WUiyNEtQjuu5G5vTm06TEv9tsIgeAvK8hOrP4k=
 gopkg.in/resty.v1 v1.12.0/go.mod h1:mDo4pnntr5jdWRML875a/NmxYqAlA73dVijT2AXvQQo=
 gopkg.in/yaml.v2 v2.0.0-20170812160011-eb3733d160e7/go.mod h1:JAlM8MvJe8wmxCU4Bli9HhUf9+ttbYbLASfIpnQbh74=
 gopkg.in/yaml.v2 v2.2.1/go.mod h1:hI93XBmqTisBFMUTm0b8Fm+jr3Dg1NNxqwp+5A1VGuI=
@@ -346,8 +353,8 @@ gopkg.in/yaml.v2 v2.2.2 h1:ZCJp+EgiOT7lHqUV2J862kp8Qj64Jo6az82+3Td9dZw=
 gopkg.in/yaml.v2 v2.2.2/go.mod h1:hI93XBmqTisBFMUTm0b8Fm+jr3Dg1NNxqwp+5A1VGuI=
 gopkg.in/yaml.v2 v2.2.4 h1:/eiJrUcujPVeJ3xlSWaiNi3uSVmDGBK1pDHUHAnao1I=
 gopkg.in/yaml.v2 v2.2.4/go.mod h1:hI93XBmqTisBFMUTm0b8Fm+jr3Dg1NNxqwp+5A1VGuI=
-gopkg.in/yaml.v2 v2.2.7 h1:VUgggvou5XRW9mHwD/yXxIYSMtY0zoKQf/v226p2nyo=
-gopkg.in/yaml.v2 v2.2.7/go.mod h1:hI93XBmqTisBFMUTm0b8Fm+jr3Dg1NNxqwp+5A1VGuI=
+gopkg.in/yaml.v2 v2.2.8 h1:obN1ZagJSUGI0Ek/LBmuj4SNLPfIny3KsKFopxRdj10=
+gopkg.in/yaml.v2 v2.2.8/go.mod h1:hI93XBmqTisBFMUTm0b8Fm+jr3Dg1NNxqwp+5A1VGuI=
 gotest.tools v2.2.0+incompatible h1:VsBPFP1AI068pPrMxtb/S8Zkgf9xEmTLJjfM+P5UIEo=
 gotest.tools v2.2.0+incompatible/go.mod h1:DsYFclhRJ6vuDpmuTbkuFWG+y2sxOXAzmJt81HFBacw=
 honnef.co/go/tools v0.0.0-20190102054323-c2f93a96b099/go.mod h1:rf3lG4BRIbNafJWhAfAdb/ePZxsR/4RtNHQocxwk9r4=

integration/.gitignore

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

integration/Dockerfile

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

integration/docker-compose.test.yml

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

integration/jest-puppeteer.config.js

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

integration/jest-setup.js

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

integration/package.json

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

integration/test.js

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

jest.config.js

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

main.go

@@ -2,14 +2,10 @@ package main
 
 import (
 	"context"
-	"encoding/json"
-	"fmt"
-	"html/template"
 	"net/http"
 	"net/url"
 	"os"
 	"os/signal"
-	"runtime"
 	"strings"
 	"time"
 
@@ -29,8 +25,6 @@ var (
 	tailSize = 300
 	filters  map[string]string
 	version  = "dev"
-	commit   = "none"
-	date     = "unknown"
 )
 
 type handler struct {
@@ -132,153 +126,3 @@ func main() {
 	srv.Shutdown(ctx)
 	os.Exit(0)
 }
-
-func (h *handler) index(w http.ResponseWriter, req *http.Request) {
-	fileServer := http.FileServer(h.box)
-	if h.box.Has(req.URL.Path) && req.URL.Path != "" && req.URL.Path != "/" {
-		fileServer.ServeHTTP(w, req)
-	} else {
-		text, _ := h.box.FindString("index.html")
-		text = strings.Replace(text, "__BASE__", "{{ .Base }}", -1)
-		tmpl, err := template.New("index.html").Parse(text)
-		if err != nil {
-			panic(err)
-		}
-
-		path := ""
-		if base != "/" {
-			path = base
-		}
-
-		data := struct{ Base string }{path}
-		err = tmpl.Execute(w, data)
-		if err != nil {
-			http.Error(w, err.Error(), http.StatusInternalServerError)
-		}
-	}
-}
-
-func (h *handler) listContainers(w http.ResponseWriter, r *http.Request) {
-	containers, err := h.client.ListContainers(h.showAll)
-	if err != nil {
-		http.Error(w, err.Error(), http.StatusInternalServerError)
-		return
-	}
-	err = json.NewEncoder(w).Encode(containers)
-	if err != nil {
-		http.Error(w, err.Error(), http.StatusInternalServerError)
-		return
-	}
-}
-
-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")
-
-	messages, _ := h.client.ContainerLogsBetweenDates(r.Context(), id, from, to)
-
-	for _, m := range messages {
-		fmt.Fprintln(w, m)
-	}
-}
-
-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, e := h.client.FindContainer(id)
-	if e != nil {
-		http.Error(w, e.Error(), http.StatusInternalServerError)
-		return
-	}
-
-	messages, err := h.client.ContainerLogs(r.Context(), container.ID, tailSize)
-
-	w.Header().Set("Content-Type", "text/event-stream")
-	w.Header().Set("Cache-Control", "no-cache")
-	w.Header().Set("Connection", "keep-alive")
-	w.Header().Set("Transfer-Encoding", "chunked")
-
-	log.Debugf("Starting to stream logs for %s", id)
-Loop:
-	for {
-		select {
-		case message, ok := <-messages:
-			if !ok {
-				break Loop
-			}
-			_, e := fmt.Fprintf(w, "data: %s\n\n", message)
-			if e != nil {
-				log.Debugf("Error while writing to log stream: %v", e)
-				break Loop
-			}
-			f.Flush()
-		case e := <-err:
-			log.Debugf("Error while reading from log stream: %v", e)
-			break Loop
-		}
-	}
-
-	log.WithField("NumGoroutine", runtime.NumGoroutine()).Debug("runtime 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("Transfer-Encoding", "chunked")
-
-	ctx := r.Context()
-	messages, err := h.client.Events(ctx)
-
-Loop:
-	for {
-		select {
-		case message, ok := <-messages:
-			if !ok {
-				break Loop
-			}
-			switch message.Action {
-			case "connect", "disconnect", "create", "destroy", "start", "stop":
-				log.Debugf("Triggering docker event: %v", message.Action)
-				_, err := fmt.Fprintf(w, "event: containers-changed\ndata: %s\n\n", message.Action)
-
-				if err != nil {
-					log.Debugf("Error while writing to event stream: %v", err)
-					break
-				}
-				f.Flush()
-			default:
-				log.Debugf("Ignoring docker event: %v", message.Action)
-			}
-		case <-ctx.Done():
-			break Loop
-		case <-err:
-			break Loop
-		}
-	}
-}
-
-func (h *handler) version(w http.ResponseWriter, r *http.Request) {
-	fmt.Fprintln(w, version)
-	fmt.Fprintln(w, commit)
-	fmt.Fprintln(w, date)
-}

main_test.go

@@ -259,7 +259,7 @@ func Test_createRoutes_redirect(t *testing.T) {
 	mockedClient := new(MockedClient)
 	box := packr.NewBox("./virtual")
 
-	handler := createRoutes("/foobar", &handler{mockedClient, true,box})
+	handler := createRoutes("/foobar", &handler{mockedClient, true, box})
 	req, err := http.NewRequest("GET", "/foobar", nil)
 	require.NoError(t, err, "NewRequest should not return an error.")
 	rr := httptest.NewRecorder()

package.json

@@ -1,17 +1,18 @@
 {
  "name": "dozzle",
- "version": "1.19.3",
+ "version": "1.23.0",
  "description": "Realtime log viewer for docker containers. ",
  "scripts": {
   "prestart": "npm run clean",
-  "start": "DOCKER_API_VERSION=1.38 concurrently 'npm run watch-server' 'npm run watch-assets'",
-  "watch-assets": "npx parcel watch --no-source-maps --public-url '__BASE__' assets/index.html -d static",
+  "start": "concurrently 'npm run watch-server' 'npm run watch-assets'",
+  "watch-assets": "webpack --mode=development --watch",
   "watch-server": "reflex -c .reflex",
   "prebuild": "npm run clean",
-  "build": "npx parcel build --no-source-maps --public-url '__BASE__' assets/index.html -d static",
+  "build": "yarn webpack --mode=production",
   "clean": "rm -rf static/ a_main-packr.go",
-  "release": "goreleaser --rm-dist",
-  "test": "jest"
+  "release": "release-it",
+  "test": "jest",
+  "integration": "docker-compose -f integration/docker-compose.test.yml run --rm integration"
  },
  "repository": {
   "type": "git",
@@ -24,38 +25,57 @@
  },
  "homepage": "https://github.com/amir20/dozzle#readme",
  "dependencies": {
-  "ansi-to-html": "^0.6.13",
-  "bulma": "^0.8.0",
-  "date-fns": "^2.8.1",
+  "ansi-to-html": "^0.6.14",
+  "buefy": "^0.8.17",
+  "bulma": "^0.8.2",
+  "date-fns": "^2.13.0",
+  "hotkeys-js": "^3.7.6",
   "lodash.debounce": "^4.0.8",
-  "splitpanes": "^2.1.2",
+  "semver": "^7.3.2",
+  "splitpanes": "^2.2.1",
   "store": "^2.0.12",
   "vue": "^2.6.11",
-  "vue-meta": "^2.3.1",
-  "vue-router": "^3.1.3",
-  "vuex": "^3.1.2"
+  "vue-meta": "^2.3.3",
+  "vue-router": "^3.1.6",
+  "vuex": "^3.3.0"
  },
  "devDependencies": {
-  "@babel/core": "^7.7.7",
-  "@babel/plugin-transform-runtime": "^7.7.6",
-  "@vue/component-compiler-utils": "^3.1.0",
-  "@vue/test-utils": "^1.0.0-beta.29",
+  "@babel/core": "^7.9.6",
+  "@babel/plugin-transform-runtime": "^7.9.6",
+  "@vue/component-compiler-utils": "^3.1.2",
+  "@vue/test-utils": "^1.0.2",
   "babel-core": "^7.0.0-bridge.0",
-  "babel-jest": "^24.9.0",
-  "concurrently": "^5.0.2",
+  "babel-jest": "^26.0.1",
+  "babel-loader": "^8.1.0",
+  "babel-preset-env": "^1.7.0",
+  "caniuse-lite": "^1.0.30001053",
+  "concurrently": "^5.2.0",
+  "css-loader": "^3.5.3",
   "eventsourcemock": "^2.0.0",
-  "husky": "^3.1.0",
-  "jest": "^24.9.0",
+  "html-webpack-plugin": "^4.3.0",
+  "husky": "^4.2.5",
+  "jest": "^26.0.1",
   "jest-serializer-vue": "^2.0.2",
-  "lint-staged": "^9.5.0",
+  "lint-staged": "^10.2.2",
+  "mini-css-extract-plugin": "^0.9.0",
   "mockdate": "^2.0.5",
   "node-fetch": "^2.6.0",
-  "parcel-bundler": "^1.12.4",
-  "prettier": "^1.19.1",
-  "sass": "^1.23.7",
+  "postcss-cssnext": "^3.1.0",
+  "postcss-import": "^12.0.1",
+  "postcss-loader": "^3.0.0",
+  "prettier": "^2.0.5",
+  "release-it": "^13.5.8",
+  "sass": "^1.26.5",
+  "sass-loader": "^8.0.2",
   "vue-hot-reload-api": "^2.3.4",
   "vue-jest": "^3.0.5",
-  "vue-template-compiler": "^2.6.11"
+  "vue-loader": "^15.9.2",
+  "vue-style-loader": "^4.1.2",
+  "vue-template-compiler": "^2.6.11",
+  "webpack": "^4.43.0",
+  "webpack-cli": "^3.3.11",
+  "webpack-manifest-plugin": "^2.2.0",
+  "webpack-pwa-manifest": "^4.2.0"
  },
  "husky": {
   "hooks": {
@@ -64,42 +84,15 @@
  },
  "lint-staged": {
   "*.{js,vue,css}": [
-   "prettier --write",
-   "git add"
+   "prettier --write"
   ]
  },
- "browserslist": [
-  ">5%",
-  "not ie <= 8"
- ],
- "alias": {
-  "vue": "./node_modules/vue/dist/vue.esm.js"
- },
- "jest": {
-  "clearMocks": true,
-  "moduleFileExtensions": [
-   "js",
-   "json",
-   "vue"
-  ],
-  "coveragePathIgnorePatterns": [
-   "node_modules"
-  ],
-  "testPathIgnorePatterns": [
-   "node_modules"
-  ],
-  "transformIgnorePatterns": [
-   "node_modules"
-  ],
-  "watchPathIgnorePatterns": [
-   "<rootDir>/node_modules/"
-  ],
-  "snapshotSerializers": [
-   "jest-serializer-vue"
-  ],
-  "transform": {
-   ".*\\.vue$": "vue-jest",
-   ".+\\.js$": "babel-jest"
+ "release-it": {
+  "github": {
+   "release": true
+  },
+  "npm": {
+   "publish": false
   }
  }
 }

routes.go

@@ -0,0 +1,166 @@
+package main
+
+import (
+	"encoding/json"
+	"fmt"
+	"html/template"
+	"net/http"
+	"runtime"
+	"time"
+
+	log "github.com/sirupsen/logrus"
+)
+
+func (h *handler) index(w http.ResponseWriter, req *http.Request) {
+	fileServer := http.FileServer(h.box)
+	if h.box.Has(req.URL.Path) && req.URL.Path != "" && req.URL.Path != "/" {
+		fileServer.ServeHTTP(w, req)
+	} else {
+		text, err := h.box.FindString("index.html")
+		if err != nil {
+			panic(err)
+		}
+		tmpl, err := template.New("index.html").Parse(text)
+		if err != nil {
+			panic(err)
+		}
+
+		path := ""
+		if base != "/" {
+			path = base
+		}
+
+		data := struct {
+			Base    string
+			Version string
+		}{path, version}
+		err = tmpl.Execute(w, data)
+		if err != nil {
+			http.Error(w, err.Error(), http.StatusInternalServerError)
+		}
+	}
+}
+
+func (h *handler) listContainers(w http.ResponseWriter, r *http.Request) {
+	containers, err := h.client.ListContainers(h.showAll)
+	if err != nil {
+		http.Error(w, err.Error(), http.StatusInternalServerError)
+		return
+	}
+	err = json.NewEncoder(w).Encode(containers)
+	if err != nil {
+		http.Error(w, err.Error(), http.StatusInternalServerError)
+		return
+	}
+}
+
+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")
+
+	messages, _ := h.client.ContainerLogsBetweenDates(r.Context(), id, from, to)
+
+	for _, m := range messages {
+		fmt.Fprintln(w, m)
+	}
+}
+
+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, e := h.client.FindContainer(id)
+	if e != nil {
+		http.Error(w, e.Error(), http.StatusInternalServerError)
+		return
+	}
+
+	messages, err := h.client.ContainerLogs(r.Context(), container.ID, tailSize)
+
+	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")
+
+
+	log.Debugf("Starting to stream logs for %s", id)
+Loop:
+	for {
+		select {
+		case message, ok := <-messages:
+			if !ok {
+				break Loop
+			}
+			_, e := fmt.Fprintf(w, "data: %s\n\n", message)
+			if e != nil {
+				log.Debugf("Error while writing to log stream: %v", e)
+				break Loop
+			}
+			f.Flush()
+		case e := <-err:
+			log.Debugf("Error while reading from log stream: %v", e)
+			break Loop
+		}
+	}
+
+	log.WithField("NumGoroutine", runtime.NumGoroutine()).Debug("runtime 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()
+	messages, err := h.client.Events(ctx)
+
+Loop:
+	for {
+		select {
+		case message, ok := <-messages:
+			if !ok {
+				break Loop
+			}
+			switch message.Action {
+			case "connect", "disconnect", "create", "destroy", "start", "stop":
+				log.Debugf("Triggering docker event: %v", message.Action)
+				_, err := fmt.Fprintf(w, "event: containers-changed\ndata: %s\n\n", message.Action)
+
+				if err != nil {
+					log.Debugf("Error while writing to event stream: %v", err)
+					break
+				}
+				f.Flush()
+			default:
+				log.Debugf("Ignoring docker event: %v", message.Action)
+			}
+		case <-ctx.Done():
+			break Loop
+		case <-err:
+			break Loop
+		}
+	}
+}
+
+func (h *handler) version(w http.ResponseWriter, r *http.Request) {
+	fmt.Fprintln(w, version)
+}

webpack.config.js

@@ -0,0 +1,77 @@
+const path = require("path");
+const { VueLoaderPlugin } = require("vue-loader");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+const WebpackPwaManifest = require("webpack-pwa-manifest");
+
+module.exports = {
+  stats: { children: false, entrypoints: false, modules: false },
+  performance: {
+    maxAssetSize: 350000,
+    maxEntrypointSize: 570000,
+  },
+  entry: ["./assets/main.js", "./assets/styles.scss"],
+  output: {
+    path: path.resolve(__dirname, "./static"),
+    filename: "[name].js",
+    publicPath: "{{ .Base }}",
+  },
+  module: {
+    rules: [
+      {
+        test: /\.vue$/,
+        loader: "vue-loader",
+      },
+      {
+        test: /\.(sass|scss|css)$/,
+        use: [
+          MiniCssExtractPlugin.loader,
+          {
+            loader: "css-loader",
+            query: {
+              importLoaders: 1,
+            },
+          },
+          {
+            loader: "postcss-loader",
+            options: {
+              ident: "postcss",
+              plugins: (loader) => [
+                require("postcss-import")(),
+                require("postcss-cssnext")({
+                  features: {
+                    customProperties: { warnings: false },
+                  },
+                }),
+              ],
+            },
+          },
+          "sass-loader",
+        ],
+      },
+    ],
+  },
+  plugins: [
+    new VueLoaderPlugin(),
+    new MiniCssExtractPlugin(),
+    new HtmlWebpackPlugin({
+      hash: true,
+      template: "assets/index.ejs",
+      scriptLoading: "defer",
+      favicon: "assets/favicon.svg",
+    }),
+    new WebpackPwaManifest({
+      name: "Dozzle Log Viewer",
+      short_name: "Dozzle",
+      theme_color: "#222",
+      background_color: "#222",
+      display: "standalone",
+    }),
+  ],
+  resolve: {
+    alias: {
+      vue$: "vue/dist/vue.runtime.esm.js",
+    },
+    extensions: ["*", ".js", ".vue", ".json"],
+  },
+};