Release 1.22.6

Bumps [lint-staged](https://github.com/okonet/lint-staged) from 10.1.7 to 10.2.0.
- [Release notes](https://github.com/okonet/lint-staged/releases)
- [Commits](https://github.com/okonet/lint-staged/compare/v10.1.7...v10.2.0)

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

.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 bash bzr curl docker rpm && \
-  npm i -g npm && \
-  wget https://github.com/goreleaser/goreleaser/releases/latest/download/goreleaser_Linux_arm64.tar.gz && \
-  tar -xvzf goreleaser_Linux_arm64.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/publish-dev-dockerimage.yaml

@@ -0,0 +1,19 @@
+name: Docker image (latest-dev)
+
+on:
+  push:
+    branches:
+      - master
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: jerray/publish-docker-action@master
+        with:
+          username: ${{ secrets.DOCKER_USERNAME }}
+          password: ${{ secrets.DOCKER_PASSWORD }}
+          file: Dockerfile
+          repository: amir20/dozzle
+          tags: latest-dev

.github/workflows/push.yml

@@ -1,24 +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/npm@master
-        with:
-          args: 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."

.htmlnanorc.js

@@ -0,0 +1,3 @@
+module.exports = {
+  minifySvg: false,
+};

.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 --showAll
+-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,59 @@
-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 .* ./
+
+# 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

@@ -1,18 +1,18 @@
 [![Go Report Card](https://goreportcard.com/badge/github.com/amir20/dozzle)](https://goreportcard.com/report/github.com/amir20/dozzle)
-[![Build Status](https://wdp9fww0r9.execute-api.us-west-2.amazonaws.com/production/badge/amir20/dozzle)](https://wdp9fww0r9.execute-api.us-west-2.amazonaws.com/production/results/amir20/dozzle)
 [![Docker Pulls](https://img.shields.io/docker/pulls/amir20/dozzle.svg)](https://hub.docker.com/r/amir20/dozzle/)
 [![Docker Size](https://images.microbadger.com/badges/image/amir20/dozzle.svg)](https://hub.docker.com/r/amir20/dozzle/)
 [![Docker Version](https://images.microbadger.com/badges/version/amir20/dozzle.svg)](https://hub.docker.com/r/amir20/dozzle/)
+![Test](https://github.com/amir20/dozzle/workflows/Test/badge.svg)
 
 # Dozzle - [dozzle.dev](https://dozzle.dev/)
 
-Dozzle is a real-time log viewer for Docker. It's free. It's small. And it's right in your browser.
+Dozzle is a real-time log viewer for Docker. It's free. It's small. And it's in your browser.
 
 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).
 
-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.
+But if you don't want to pay for these services, then Dozzle can help! 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.
 
-![Image](demo.gif)
+![Image](.github/demo.gif)
 
 ## Getting dozzle
 
@@ -44,8 +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
         volumes:
           - /var/run/docker.sock:/var/run/docker.sock
         ports:
@@ -63,7 +61,7 @@ If you wish to restrict the containers shown you can pass the `--filter` paramet
 
     $ docker run --volume=/var/run/docker.sock:/var/run/docker.sock -p 8888:1224 amir20/dozzle:latest --filter name=foo
 
-this would then only allow you to view containers with a name starting with "foo"
+this would then only allow you to view containers with a name starting with "foo". You can use other filters like `status` as well, please check the official docker [command line docs](https://docs.docker.com/engine/reference/commandline/ps/#filtering) for available filters.
 
 #### Changing base URL
 
@@ -84,7 +82,7 @@ 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`      | `""`    |
 

__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

assets/App.spec.js

@@ -1,45 +1,51 @@
-import fetchMock from "fetch-mock";
 import EventSource from "eventsourcemock";
-import { shallowMount, RouterLinkStub } from "@vue/test-utils";
+import { shallowMount, RouterLinkStub, createLocalVue } from "@vue/test-utils";
+import Vuex from "vuex";
 import App from "./App";
 
+const localVue = createLocalVue();
+
+localVue.use(Vuex);
+
 describe("<App />", () => {
-  const stubs = { RouterLink: RouterLinkStub, "router-view": true };
+  const stubs = { RouterLink: RouterLinkStub, "router-view": true, icon: true };
+  let store;
+
   beforeEach(() => {
     global.BASE_PATH = "";
     global.EventSource = EventSource;
-    fetchMock.getOnce("/api/containers.json", [{ id: "abc", name: "Test 1" }, { id: "xyz", name: "Test 2" }]);
+    const state = {
+      containers: [
+        { id: "abc", name: "Test 1" },
+        { id: "xyz", name: "Test 2" },
+      ],
+      settings: { menuWidth: 15 },
+    };
+
+    const actions = {
+      FETCH_CONTAINERS: () => Promise.resolve(),
+    };
+
+    store = new Vuex.Store({
+      state,
+      actions,
+    });
   });
-  afterEach(() => fetchMock.reset());
 
   test("is a Vue instance", async () => {
-    const wrapper = shallowMount(App, { stubs });
+    const wrapper = shallowMount(App, { stubs, store, localVue });
     expect(wrapper.isVueInstance()).toBeTruthy();
   });
 
   test("has right title", async () => {
-    const wrapper = shallowMount(App, { stubs });
-    await fetchMock.flush();
+    const wrapper = shallowMount(App, { stubs, store, localVue });
+    await wrapper.vm.$nextTick();
     expect(wrapper.vm.title).toContain("2 containers");
   });
 
   test("renders correctly", async () => {
-    const wrapper = shallowMount(App, { stubs });
-    await fetchMock.flush();
+    const wrapper = shallowMount(App, { stubs, store, localVue });
+    await wrapper.vm.$nextTick();
     expect(wrapper.element).toMatchSnapshot();
   });
-
-  test("renders router-link correctly", async () => {
-    const wrapper = shallowMount(App, { stubs });
-    await fetchMock.flush();
-    expect(wrapper.find(RouterLinkStub).props().to).toMatchInlineSnapshot(`
-      Object {
-        "name": "container",
-        "params": Object {
-          "id": "abc",
-          "name": "Test 1",
-        },
-      }
-    `);
-  });
 });

assets/App.vue

@@ -1,115 +1,150 @@
 <template lang="html">
-  <div class="columns is-marginless">
-    <aside class="column menu is-3-tablet is-2-widescreen">
-      <a
-        role="button"
-        class="navbar-burger burger is-white is-hidden-tablet is-pulled-right"
-        @click="showNav = !showNav"
-        :class="{ 'is-active': showNav }"
-      >
-        <span></span> <span></span> <span></span>
-      </a>
-      <h1 class="title has-text-warning is-marginless">Dozzle</h1>
-      <p class="menu-label is-hidden-mobile" :class="{ 'is-active': showNav }">Containers</p>
-      <ul class="menu-list is-hidden-mobile" :class="{ 'is-active': showNav }">
-        <li v-for="item in containers">
-          <router-link :to="{ name: 'container', params: { id: item.id, name: item.name } }" active-class="is-active">
-            <div class="hide-overflow">{{ item.name }}</div>
-          </router-link>
-        </li>
-      </ul>
-    </aside>
-    <div class="column is-offset-3-tablet is-offset-2-widescreen is-9-tablet is-10-widescreen">
-      <router-view></router-view>
-    </div>
-  </div>
+  <main>
+    <mobile-menu v-if="isMobile"></mobile-menu>
+
+    <splitpanes @resized="onResized($event)">
+      <pane min-size="10" :size="settings.menuWidth" v-if="!isMobile && !collapseNav">
+        <side-menu></side-menu>
+      </pane>
+      <pane min-size="10">
+        <splitpanes>
+          <pane class="has-min-height">
+            <search></search>
+            <router-view></router-view>
+          </pane>
+          <pane v-for="other in activeContainers" :key="other.id" v-if="!isMobile">
+            <scrollable-view>
+              <template v-slot:header>
+                <container-title :value="other.name" closable @close="removeActiveContainer(other)"></container-title>
+              </template>
+              <log-viewer-with-source :id="other.id"></log-viewer-with-source>
+            </scrollable-view>
+          </pane>
+        </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>
 
 <script>
-let es;
+import { mapActions, mapGetters, mapState } from "vuex";
+import { Splitpanes, Pane } from "splitpanes";
+
+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,
+    Search,
+    ContainerTitle,
+  },
   data() {
     return {
       title: "",
-      containers: [],
-      showNav: false
+      collapseNav: false,
     };
   },
   metaInfo() {
     return {
       title: this.title,
-      titleTemplate: "%s - Dozzle"
+      titleTemplate: "%s - Dozzle",
     };
   },
   async created() {
     await this.fetchContainerList();
-    es = new EventSource(`${BASE_PATH}/api/events/stream`);
-    es.addEventListener("containers-changed", e => setTimeout(this.fetchContainerList, 1000), false);
+    this.title = `${this.containers.length} containers`;
   },
-  beforeDestroy() {
-    if (es) {
-      es.close();
-      es = null;
-    }
-  },
-  methods: {
-    async fetchContainerList() {
-      this.containers = await (await fetch(`${BASE_PATH}/api/containers.json`)).json();
-      this.title = `${this.containers.length} containers`;
+  mounted() {
+    if (this.hasSmallerScrollbars) {
+      document.documentElement.classList.add("has-custom-scrollbars");
     }
+    this.menuWidth = this.settings.menuWidth;
   },
   watch: {
-    $route(to, from) {
-      this.showNav = false;
-    }
-  }
+    hasSmallerScrollbars(newValue, oldValue) {
+      if (newValue) {
+        document.documentElement.classList.add("has-custom-scrollbars");
+      } else {
+        document.documentElement.classList.remove("has-custom-scrollbars");
+      }
+    },
+  },
+  computed: {
+    ...mapState(["containers", "activeContainers", "isMobile", "settings"]),
+    hasSmallerScrollbars() {
+      return this.settings.smallerScrollbars;
+    },
+  },
+  methods: {
+    ...mapActions({
+      fetchContainerList: "FETCH_CONTAINERS",
+      removeActiveContainer: "REMOVE_ACTIVE_CONTAINER",
+      updateSetting: "UPDATE_SETTING",
+    }),
+    onResized(e) {
+      if (e.length == 2) {
+        const menuWidth = e[0].size;
+        this.updateSetting({ menuWidth });
+      }
+    },
+  },
 };
 </script>
 
 <style scoped lang="scss">
-.is-hidden-mobile.is-active {
-  display: block !important;
+::v-deep .splitpanes__splitter {
+  min-width: 4px;
+  background: #666;
+  &:hover {
+    background: rgb(255, 221, 87);
+  }
 }
 
-.navbar-burger {
-  height: 2.35rem;
+.button.has-no-border {
+  border-color: transparent !important;
 }
 
-aside {
+.has-min-height {
+  min-height: 100vh;
+}
+
+#hide-nav {
   position: fixed;
-  z-index: 2;
-  padding: 1em;
+  left: 10px;
+  bottom: 10px;
+  &.collapsed {
+    left: -40px;
+    width: 60px;
+    padding-left: 40px;
+    background: rgba(0, 0, 0, 0.95);
 
-  @media screen and (min-width: 769px) {
-    & {
-      height: 100vh;
-      overflow: auto;
+    &:hover {
+      left: -25px;
     }
   }
-
-  @media screen and (max-width: 768px) {
-    & {
-      position: sticky;
-      top: 0;
-      left: 0;
-      right: 0;
-      background: #222;
-    }
-
-    .menu-label {
-      margin-top: 1em;
-    }
-  }
-}
-
-.hide-overflow {
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-}
-
-.burger.is-white {
-  color: #fff;
 }
 </style>

assets/__snapshots__/App.spec.js.snap

@@ -1,63 +1,54 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<App /> renders correctly 1`] = `
-<div
-  class="columns is-marginless"
->
-  <aside
-    class="column menu is-3-tablet is-2-widescreen"
-  >
-    <a
-      class="navbar-burger burger is-white is-hidden-tablet is-pulled-right"
-      role="button"
-    >
-      <span />
-       
-      <span />
-       
-      <span />
-    </a>
-     
-    <h1
-      class="title has-text-warning is-marginless"
-    >
-      Dozzle
-    </h1>
-     
-    <p
-      class="menu-label is-hidden-mobile"
-    >
-      Containers
-    </p>
-     
-    <ul
-      class="menu-list is-hidden-mobile"
-    >
-      <li>
-        <a>
-          <div
-            class="hide-overflow"
-          >
-            Test 1
-          </div>
-        </a>
-      </li>
-      <li>
-        <a>
-          <div
-            class="hide-overflow"
-          >
-            Test 2
-          </div>
-        </a>
-      </li>
-    </ul>
-  </aside>
+<main>
+  <!---->
    
-  <div
-    class="column is-offset-3-tablet is-offset-2-widescreen is-9-tablet is-10-widescreen"
+  <splitpanes-stub
+    dblclicksplitter="true"
+    pushotherpanes="true"
   >
-    <router-view-stub />
-  </div>
-</div>
+    <pane-stub
+      maxsize="100"
+      minsize="10"
+      size="15"
+    >
+      <side-menu-stub />
+    </pane-stub>
+     
+    <pane-stub
+      maxsize="100"
+      minsize="10"
+    >
+      <splitpanes-stub
+        dblclicksplitter="true"
+        pushotherpanes="true"
+      >
+        <pane-stub
+          class="has-min-height"
+          maxsize="100"
+          minsize="0"
+        >
+          <search-stub />
+           
+          <router-view-stub />
+        </pane-stub>
+         
+      </splitpanes-stub>
+    </pane-stub>
+  </splitpanes-stub>
+   
+  <button
+    class="button is-small is-rounded is-settings-control"
+    id="hide-nav"
+  >
+    <span
+      class="icon"
+    >
+      <icon-stub
+        name="chevron-left"
+      />
+    </span>
+  </button>
+</main>
 `;

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

assets/components/InfiniteLoader.vue

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

assets/components/LogEventSource.spec.js

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

assets/components/LogEventSource.vue

@@ -0,0 +1,88 @@
+<template lang="html">
+  <div>
+    <infinite-loader :onLoadMore="loadOlderLogs" :enabled="messages.length > 100"></infinite-loader>
+    <slot :messages="messages"></slot>
+  </div>
+</template>
+
+<script>
+import debounce from "lodash.debounce";
+import InfiniteLoader from "./InfiniteLoader";
+
+export default {
+  props: ["id"],
+  name: "LogEventSource",
+  components: {
+    InfiniteLoader,
+  },
+  data() {
+    return {
+      messages: [],
+      buffer: [],
+    };
+  },
+  created() {
+    this.es = null;
+    this.loadLogs(this.id);
+  },
+  methods: {
+    loadLogs(id) {
+      if (this.es) {
+        this.es.close();
+        this.messages = [];
+        this.es = null;
+      }
+      this.es = new EventSource(`${BASE_PATH}/api/logs/stream?id=${this.id}`);
+      const flushBuffer = debounce(
+        () => {
+          this.messages.push(...this.buffer);
+          this.buffer = [];
+        },
+        250,
+        { maxWait: 1000 }
+      );
+      this.es.onmessage = (e) => {
+        this.buffer.push(this.parseMessage(e.data));
+        flushBuffer();
+      };
+      this.es.onerror = (e) => console.log("EventSource failed." + e);
+      this.$once("hook:beforeDestroy", () => this.es.close());
+    },
+    async loadOlderLogs() {
+      if (this.messages.length < 300) return;
+
+      const to = this.messages[0].date;
+      const last = this.messages[299].date;
+      const delta = to - last;
+      const from = new Date(to.getTime() + delta);
+      const logs = await (
+        await fetch(`/api/logs?id=${this.id}&from=${from.toISOString()}&to=${to.toISOString()}`)
+      ).text();
+      if (logs) {
+        const newMessages = logs
+          .trim()
+          .split("\n")
+          .map((line) => this.parseMessage(line));
+        this.messages.unshift(...newMessages);
+      }
+    },
+    parseMessage(data) {
+      let i = data.indexOf(" ");
+      if (i == -1) {
+        i = data.length;
+      }
+      const key = data.substring(0, i);
+      const date = new Date(key);
+      const message = data.substring(i).trim();
+      return { key, date, message };
+    },
+  },
+  watch: {
+    id(newValue, oldValue) {
+      if (oldValue !== newValue) {
+        this.loadLogs(newValue);
+      }
+    },
+  },
+};
+</script>

assets/components/LogViewer.vue

@@ -0,0 +1,114 @@
+<template lang="html">
+  <ul class="events" :class="settings.size">
+    <li v-for="item in filtered" :key="item.key">
+      <span class="date" v-if="settings.showTimestamp">{{ item.date | relativeTime }}</span>
+      <span class="text" v-html="colorize(item.message)"></span>
+    </li>
+  </ul>
+</template>
+
+<script>
+import { mapActions, mapGetters, mapState } from "vuex";
+import { formatRelative } from "date-fns";
+import AnsiConvertor from "ansi-to-html";
+
+const ansiConvertor = new AnsiConvertor({ escapeXML: true });
+
+export default {
+  props: ["messages"],
+  name: "LogViewer",
+  components: {},
+  data() {
+    return {
+      showSearch: false,
+    };
+  },
+  methods: {
+    colorize: function (value) {
+      return ansiConvertor.toHtml(value).replace("&lt;mark&gt;", "<mark>").replace("&lt;/mark&gt;", "</mark>");
+    },
+  },
+  computed: {
+    ...mapState(["searchFilter", "settings"]),
+    filtered() {
+      const { searchFilter, messages } = this;
+      if (searchFilter) {
+        const isSmartCase = searchFilter === searchFilter.toLowerCase();
+        try {
+          const regex = isSmartCase ? new RegExp(searchFilter, "i") : new RegExp(searchFilter);
+          return messages
+            .filter((d) => d.message.match(regex))
+            .map((d) => ({
+              ...d,
+              message: d.message.replace(regex, "<mark>$&</mark>"),
+            }));
+        } catch (e) {
+          if (e instanceof SyntaxError) {
+            console.info(`Ignoring SytaxError from search.`, e);
+            return messages;
+          }
+          throw e;
+        }
+      }
+      return messages;
+    },
+  },
+  filters: {
+    relativeTime(date) {
+      return formatRelative(date, new Date());
+    },
+  },
+};
+</script>
+<style scoped lang="scss">
+.events {
+  padding: 10px;
+  font-family: "Roboto Mono", monaco, monospace;
+
+  & > li {
+    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%;
+  }
+}
+
+.date {
+  background-color: #262626;
+  color: #258ccd;
+}
+
+.text {
+  white-space: pre-wrap;
+}
+
+::v-deep mark {
+  border-radius: 2px;
+  background-color: #ffdd57;
+  animation: pops 0.2s ease-out;
+  display: inline-block;
+}
+
+@keyframes pops {
+  0% {
+    transform: scale(1.5);
+  }
+  100% {
+    transform: scale(1.05);
+  }
+}
+</style>

assets/components/LogViewerWithSource.vue

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

assets/components/MobileMenu.vue

@@ -0,0 +1,88 @@
+<template lang="html">
+  <aside>
+    <a
+      role="button"
+      class="navbar-burger burger is-white is-hidden-tablet is-pulled-right"
+      @click="showNav = !showNav"
+      :class="{ 'is-active': showNav }"
+    >
+      <span></span> <span></span> <span></span>
+    </a>
+    <h1 class="title has-text-warning is-marginless">Dozzle</h1>
+    <p class="menu-label is-hidden-mobile" :class="{ 'is-active': showNav }">Containers</p>
+    <ul class="menu-list is-hidden-mobile" :class="{ 'is-active': showNav }">
+      <li v-for="item in containers">
+        <router-link
+          :to="{ name: 'container', params: { id: item.id, name: item.name } }"
+          active-class="is-active"
+          :title="item.name"
+        >
+          <div class="hide-overflow">
+            {{ item.name }}
+          </div>
+        </router-link>
+      </li>
+    </ul>
+  </aside>
+</template>
+
+<script>
+import { mapActions, mapGetters, mapState } from "vuex";
+
+export default {
+  props: [],
+  name: "MobileMenu",
+  data() {
+    return {
+      showNav: false,
+    };
+  },
+
+  computed: {
+    ...mapState(["containers"]),
+    ...mapGetters(["activeContainersById"]),
+  },
+  methods: {
+    ...mapActions({}),
+  },
+  watch: {
+    $route(to, from) {
+      this.showNav = false;
+    },
+  },
+};
+</script>
+<style scoped lang="scss">
+aside {
+  padding: 1em;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  background: #222;
+  z-index: 2;
+  max-height: 100vh;
+  overflow: auto;
+
+  .menu-label {
+    margin-top: 1em;
+  }
+  .hide-overflow {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+  }
+
+  .burger.is-white {
+    color: #fff;
+  }
+
+  .is-hidden-mobile.is-active {
+    display: block !important;
+  }
+
+  .navbar-burger {
+    height: 2.35rem;
+  }
+}
+</style>

assets/components/ScrollableView.vue

@@ -0,0 +1,104 @@
+<template lang="html">
+  <section :class="{ 'is-full-height-scrollable': scrollable }">
+    <header v-if="$slots.header">
+      <slot name="header"></slot>
+    </header>
+    <main ref="content" :data-scrolling="scrollable">
+      <slot></slot>
+      <div ref="scrollObserver"></div>
+    </main>
+    <div class="scroll-bar-notification">
+      <transition name="fade">
+        <button
+          class="button"
+          :class="hasMore ? 'is-warning' : 'is-primary'"
+          @click="scrollToBottom('instant')"
+          v-show="paused"
+        >
+          <icon name="download"></icon>
+        </button>
+      </transition>
+    </div>
+  </section>
+</template>
+
+<script>
+import Icon from "./Icon";
+
+export default {
+  props: {
+    scrollable: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  components: {
+    Icon,
+  },
+  name: "ScrollableView",
+  data() {
+    return {
+      paused: false,
+      hasMore: false,
+    };
+  },
+  mounted() {
+    const { content } = this.$refs;
+    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") {
+      this.$refs.scrollObserver.scrollIntoView({ behavior });
+      this.hasMore = false;
+    },
+  },
+};
+</script>
+<style scoped lang="scss">
+section {
+  display: flex;
+  flex-direction: column;
+
+  &.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;
+    button {
+      position: fixed;
+      bottom: 30px;
+    }
+  }
+
+  .fade-enter-active,
+  .fade-leave-active {
+    transition: opacity 0.15s ease-in;
+  }
+  .fade-enter,
+  .fade-leave-to {
+    opacity: 0;
+  }
+}
+</style>

assets/components/ScrollbarNotification.vue

@@ -1,71 +0,0 @@
-<template lang="html">
-  <transition name="fade">
-    <button
-      class="button scroll-notification"
-      :class="hasNew ? 'is-warning' : 'is-primary'"
-      @click="scrollToBottom"
-      v-show="visible"
-    >
-      <span class="icon large"> <i class="fas fa-chevron-down"></i> </span>
-    </button>
-  </transition>
-</template>
-
-<script>
-export default {
-  props: ["messages"],
-  data() {
-    return {
-      visible: false,
-      hasNew: false
-    };
-  },
-  mounted() {
-    document.addEventListener("scroll", this.onScroll, { passive: true });
-    setTimeout(() => this.scrollToBottom(), 500);
-  },
-  beforeDestroy() {
-    document.removeEventListener("scroll", this.onScroll);
-  },
-  methods: {
-    scrollToBottom() {
-      this.visible = false;
-      window.scrollTo(0, document.documentElement.scrollHeight || document.body.scrollHeight);
-    },
-    onScroll() {
-      const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
-      const scrollBottom =
-        (document.documentElement.scrollHeight || document.body.scrollHeight) - document.documentElement.clientHeight;
-      const diff = Math.abs(scrollTop - scrollBottom);
-      this.visible = diff > 50;
-      if (!this.visible) {
-        this.hasNew = false;
-      }
-    }
-  },
-  watch: {
-    messages() {
-      if (this.visible) {
-        this.hasNew = true;
-      } else {
-        this.scrollToBottom();
-      }
-    }
-  }
-};
-</script>
-<style scoped>
-.scroll-notification {
-  position: fixed;
-  right: 40px;
-  bottom: 30px;
-}
-.fade-enter-active,
-.fade-leave-active {
-  transition: opacity 0.15s ease-in;
-}
-.fade-enter,
-.fade-leave-to {
-  opacity: 0;
-}
-</style>

assets/components/Search.vue

@@ -0,0 +1,91 @@
+<template lang="html">
+  <div class="search columns is-gapless is-vcentered" v-show="showSearch" v-if="settings.search">
+    <div class="column">
+      <p class="control has-icons-left">
+        <input
+          class="input"
+          type="text"
+          placeholder="Find / RegEx"
+          ref="filter"
+          v-model="filter"
+          @keyup.esc="resetSearch()"
+        />
+        <span class="icon is-left">
+          <icon name="search"></icon>
+        </span>
+      </p>
+    </div>
+    <div class="column is-1 has-text-centered">
+      <button class="delete is-medium" @click="resetSearch()"></button>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapActions, mapState } from "vuex";
+import hotkeys from "hotkeys-js";
+import Icon from "./Icon";
+
+export default {
+  props: [],
+  name: "Search",
+  components: {
+    Icon,
+  },
+  data() {
+    return {
+      showSearch: false,
+    };
+  },
+  mounted() {
+    hotkeys("command+f, ctrl+f", (event, handler) => {
+      this.showSearch = true;
+      this.$nextTick(() => this.$refs.filter.focus() || this.$refs.filter.select());
+      event.preventDefault();
+    });
+    hotkeys("esc", (event, handler) => {
+      this.resetSearch();
+    });
+  },
+  methods: {
+    ...mapActions({
+      updateSearchFilter: "SET_SEARCH",
+    }),
+    resetSearch() {
+      this.showSearch = false;
+      this.filter = "";
+    },
+  },
+  computed: {
+    ...mapState(["searchFilter", "settings"]),
+    filter: {
+      get() {
+        return this.searchFilter;
+      },
+      set(value) {
+        this.updateSearchFilter(value);
+      },
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.search {
+  width: 350px;
+  position: fixed;
+  padding: 10px;
+  background: rgba(50, 50, 50, 0.9);
+  top: 0;
+  right: 0;
+  border-radius: 0 0 0 5px;
+  z-index: 10;
+}
+.delete {
+  margin-left: 1em;
+}
+
+.icon {
+  padding: 10px 3px;
+}
+</style>

assets/components/SideMenu.vue

@@ -0,0 +1,101 @@
+<template lang="html">
+  <aside>
+    <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">
+        <router-link
+          :to="{ name: 'container', params: { id: item.id, name: item.name } }"
+          active-class="is-active"
+          :title="item.name"
+        >
+          <div class="hide-overflow">
+            <span
+              @click.stop.prevent="appendActiveContainer(item)"
+              class="icon is-small will-append-container"
+              :class="{ 'is-active': activeContainersById[item.id] }"
+            >
+              <icon name="pin"></icon>
+            </span>
+            {{ item.name }}
+          </div>
+        </router-link>
+      </li>
+    </ul>
+  </aside>
+</template>
+
+<script>
+import { mapActions, mapGetters, mapState } from "vuex";
+
+import Icon from "./Icon";
+
+export default {
+  props: [],
+  name: "SideMenu",
+  components: {
+    Icon,
+  },
+  data() {
+    return {};
+  },
+  computed: {
+    ...mapState(["containers", "activeContainers"]),
+    ...mapGetters(["activeContainersById"]),
+  },
+  methods: {
+    ...mapActions({
+      appendActiveContainer: "APPEND_ACTIVE_CONTAINER",
+    }),
+  },
+};
+</script>
+<style scoped lang="scss">
+aside {
+  padding: 1em;
+  height: 100vh;
+  overflow: auto;
+  position: fixed;
+  width: inherit;
+
+  .hide-overflow {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+  }
+
+  .burger.is-white {
+    color: #fff;
+  }
+
+  .is-hidden-mobile.is-active {
+    display: block !important;
+  }
+}
+
+.will-append-container.icon {
+  transition: transform 0.2s ease-out;
+  &.is-active {
+    pointer-events: none;
+    color: #00d1b2;
+  }
+  .router-link-exact-active & {
+    visibility: hidden;
+  }
+}
+</style>

assets/index.html

@@ -7,14 +7,67 @@
     <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">
+    <link rel="icon" href="favicon.ico" />
     <script>
       window["BASE_PATH"] = "{{ .Base }}";
+      window["VERSION"] = "{{ .Version }}";
     </script>
-    <script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
   </head>
 
-  <body class="is-dark">
+  <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>
     <script src="main.js"></script>
   </body>

assets/main.js

@@ -1,34 +1,46 @@
 import Vue from "vue";
 import VueRouter from "vue-router";
 import Meta from "vue-meta";
+import Dropdown from "buefy/dist/esm/dropdown";
+import Switch from "buefy/dist/esm/switch";
+import store from "./store";
 import App from "./App.vue";
 import Container from "./pages/Container.vue";
+import Settings from "./pages/Settings.vue";
 import Index from "./pages/Index.vue";
 
 Vue.use(VueRouter);
 Vue.use(Meta);
+Vue.use(Dropdown);
+Vue.use(Switch);
 
 const routes = [
   {
     path: "/",
     component: Index,
-    name: "default"
+    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,
-  render: h => h(App)
+  store,
+  render: (h) => h(App),
 }).$mount("#app");

assets/pages/Container.spec.js

@@ -1,89 +0,0 @@
-import EventSource from "eventsourcemock";
-import { sources } from "eventsourcemock";
-import { shallowMount } from "@vue/test-utils";
-import MockDate from "mockdate";
-import Container from "./Container";
-
-describe("<Container />", () => {
-  beforeEach(() => {
-    global.BASE_PATH = "";
-    global.EventSource = EventSource;
-    MockDate.set("6/12/2019", 0);
-  });
-
-  afterEach(() => MockDate.reset());
-
-  test("is a Vue instance", async () => {
-    const wrapper = shallowMount(Container);
-    expect(wrapper.isVueInstance()).toBeTruthy();
-  });
-
-  test("renders correctly", async () => {
-    const wrapper = shallowMount(Container);
-    expect(wrapper.element).toMatchSnapshot();
-  });
-
-  test("should connect to EventSource", async () => {
-    shallowMount(Container, {
-      propsData: { id: "abc" }
-    });
-    sources["/api/logs/stream?id=abc"].emitOpen();
-    expect(sources["/api/logs/stream?id=abc"].readyState).toBe(1);
-  });
-
-  test("should close EventSource", async () => {
-    const wrapper = shallowMount(Container, {
-      propsData: { id: "abc" }
-    });
-    sources["/api/logs/stream?id=abc"].emitOpen();
-    wrapper.destroy();
-    expect(sources["/api/logs/stream?id=abc"].readyState).toBe(2);
-  });
-
-  test("should parse messages", async () => {
-    const wrapper = shallowMount(Container, {
-      propsData: { id: "abc" }
-    });
-    sources["/api/logs/stream?id=abc"].emitOpen();
-    sources["/api/logs/stream?id=abc"].emitMessage({ data: `2019-06-12T10:55:42.459034602Z "This is a message."` });
-    const [message, _] = wrapper.vm.messages;
-
-    expect(message).toMatchInlineSnapshot(`
-      Object {
-        "date": 2019-06-12T10:55:42.459Z,
-        "key": 0,
-        "message": " \\"This is a message.\\"",
-      }
-    `);
-  });
-
-  test("should render messages", async () => {
-    const wrapper = shallowMount(Container, {
-      propsData: { id: "abc" }
-    });
-    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."` });
-
-    expect(wrapper.find("ul.events")).toMatchInlineSnapshot(`
-      <ul class="events">
-        <li class="event"><span class="date">today at 10:55 AM</span> <span class="text"> "This is a message."</span></li>
-      </ul>
-    `);
-  });
-
-  test("should render messages with color", async () => {
-    const wrapper = shallowMount(Container, {
-      propsData: { id: "abc" }
-    });
-    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`
-    });
-
-    expect(wrapper.find("ul.events")).toMatchInlineSnapshot(`
-      <ul class="events">
-        <li class="event"><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>
-    `);
-  });
-});

assets/pages/Container.vue

@@ -1,194 +1,53 @@
 <template lang="html">
-  <div class="is-fullheight">
-    <div class="search columns is-gapless is-vcentered" v-show="showSearch">
-      <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>
-        </p>
-      </div>
-      <div class="column is-1 has-text-centered">
-        <button class="delete is-medium" @click="resetSearch()"></button>
-      </div>
-    </div>
-
-    <ul class="events">
-      <li v-for="item in filtered" class="event" :key="item.key">
-        <span class="date">{{ item.date | relativeTime }}</span>
-        <span class="text" v-html="colorize(item.message)"></span>
-      </li>
-    </ul>
-    <scrollbar-notification :messages="messages"></scrollbar-notification>
-  </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 { formatRelative } from "date-fns";
-import AnsiConvertor from "ansi-to-html";
-import ScrollbarNotification from "../components/ScrollbarNotification";
+import { mapActions, mapGetters, mapState } from "vuex";
 
-const ansiConvertor = new AnsiConvertor();
-
-let es = null;
-let nextId = 0;
-
-function parseMessage(data) {
-  const date = new Date(data.substring(0, 30));
-  const message = data.substring(30);
-  const key = nextId++;
-  return {
-    key,
-    date,
-    message
-  };
-}
+import LogViewerWithSource from "../components/LogViewerWithSource";
+import ScrollableView from "../components/ScrollableView";
+import ContainerTitle from "../components/ContainerTitle";
 
 export default {
   props: ["id", "name"],
   name: "Container",
   components: {
-    ScrollbarNotification
+    LogViewerWithSource,
+    ScrollableView,
+    ContainerTitle,
   },
   data() {
     return {
-      messages: [],
-      showSearch: false,
-      title: "",
-      filter: ""
+      title: "loading",
     };
   },
   metaInfo() {
     return {
       title: this.title,
-      titleTemplate: "%s - Dozzle"
     };
   },
   mounted() {
-    window.addEventListener("keydown", this.onKeyDown);
-  },
-  destroyed() {
-    window.removeEventListener("keydown", this.onKeyDown);
-  },
-  created() {
-    this.loadLogs(this.id);
-  },
-  beforeDestroy() {
-    if (es) {
-      es.close();
-      es = null;
-    }
-  },
-  watch: {
-    id(newValue, oldValue) {
-      if (oldValue !== newValue) {
-        this.loadLogs(newValue);
-      }
-    }
-  },
-  methods: {
-    loadLogs(id) {
-      if (es) {
-        es.close();
-        es = null;
-        this.messages = [];
-      }
-      es = new EventSource(`${BASE_PATH}/api/logs/stream?id=${id}`);
-      es.onmessage = e => this.messages.push(parseMessage(e.data));
-      this.title = `${this.name}`;
-    },
-    onKeyDown(e) {
-      if ((e.metaKey || e.ctrlKey) && e.key === "f") {
-        this.showSearch = true;
-        this.$nextTick(() => this.$refs.filter.focus());
-        e.preventDefault();
-      } else if ((e.metaKey || e.ctrlKey) && e.key === "k") {
-        this.messages = [];
-      } else if (e.key === "Escape") {
-        this.resetSearch();
-      }
-    },
-    resetSearch() {
-      this.showSearch = false;
-      this.filter = "";
-    },
-    colorize: function(value) {
-      return ansiConvertor.toHtml(value);
+    if (this.allContainersById[this.id]) {
+      this.title = this.allContainersById[this.id].name;
     }
   },
   computed: {
-    filtered() {
-      const { filter } = this;
-      if (filter) {
-        const isSmartCase = filter === filter.toLowerCase();
-        const regex = isSmartCase ? new RegExp(filter, "i") : new RegExp(filter);
-        return this.messages
-          .filter(d => d.message.match(regex))
-          .map(d => ({
-            ...d,
-            message: d.message.replace(regex, "<mark>$&</mark>")
-          }));
-      }
-      return this.messages;
-    }
+    ...mapState(["activeContainers"]),
+    ...mapGetters(["allContainersById"]),
+  },
+  watch: {
+    id() {
+      this.title = this.allContainersById[this.id].name;
+    },
+    allContainersById() {
+      this.title = this.allContainersById[this.id].name;
+    },
   },
-  filters: {
-    relativeTime(date) {
-      return formatRelative(date, new Date());
-    }
-  }
 };
 </script>
-<style scoped>
-.events {
-  padding: 10px;
-  font-family: "Roboto Mono", monaco, monospace;
-}
-
-.event {
-  font-size: 13px;
-  line-height: 16px;
-  word-wrap: break-word;
-}
-
-.date {
-  background-color: #262626;
-  color: #258ccd;
-}
-
-.is-fullheight {
-  min-height: 100vh;
-}
-
-.text {
-  white-space: pre-wrap;
-}
-
-.search {
-  width: 350px;
-  position: fixed;
-  padding: 10px;
-  background: rgba(50, 50, 50, 0.9);
-  top: 0;
-  right: 0;
-  border-radius: 0 0 0 5px;
-}
-.delete {
-  margin-left: 1em;
-}
-
-/deep/ mark {
-  border-radius: 2px;
-  background-color: #ffdd57;
-  animation: pops 0.2s ease-out;
-  display: inline-block;
-}
-
-@keyframes pops {
-  0% {
-    transform: scale(1.5);
-  }
-  100% {
-    transform: scale(1.05);
-  }
-}
-</style>

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,147 @@
+<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">{{ 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']">
+            <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/pages/__snapshots__/Container.spec.js.snap

@@ -1,50 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<Container /> renders correctly 1`] = `
-<div
-  class="is-fullheight"
->
-  <div
-    class="search columns is-gapless is-vcentered"
-    style="display: none;"
-  >
-    <div
-      class="column"
-    >
-      <p
-        class="control has-icons-left"
-      >
-        <input
-          class="input"
-          placeholder="Filter"
-          type="text"
-        />
-         
-        <span
-          class="icon is-small is-left"
-        >
-          <i
-            class="fas fa-search"
-          />
-        </span>
-      </p>
-    </div>
-     
-    <div
-      class="column is-1 has-text-centered"
-    >
-      <button
-        class="delete is-medium"
-      />
-    </div>
-  </div>
-   
-  <ul
-    class="events"
-  />
-   
-  <scrollbar-notification-stub
-    messages=""
-  />
-</div>
-`;

assets/store/index.js

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

assets/store/settings.js

@@ -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,17 +3,74 @@
 $menu-item-active-background-color: hsl(171, 100%, 41%);
 $menu-item-color: hsl(0, 6%, 87%);
 
-@import "../node_modules/bulma/bulma.sass";
-
-.is-dark {
-  color: #ddd;
-  background-color: #111;
-}
+@import "~bulma";
+@import "../node_modules/splitpanes/dist/splitpanes.css";
+@import "~buefy/src/scss/utils/_all";
+@import "~buefy/src/scss/components/_dropdown";
+@import "~buefy/src/scss/components/_switch";
 
 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

@@ -1,6 +1,7 @@
 package docker
 
 import (
+	"bufio"
 	"bytes"
 	"context"
 	"encoding/binary"
@@ -9,6 +10,7 @@ import (
 	"sort"
 	"strconv"
 	"strings"
+	"time"
 
 	"github.com/docker/docker/api/types"
 	"github.com/docker/docker/api/types/events"
@@ -26,6 +28,7 @@ type dockerProxy interface {
 	ContainerList(context.Context, types.ContainerListOptions) ([]types.Container, error)
 	ContainerLogs(context.Context, string, types.ContainerLogsOptions) (io.ReadCloser, error)
 	Events(context.Context, types.EventsOptions) (<-chan events.Message, <-chan error)
+	ContainerInspect(ctx context.Context, containerID string) (types.ContainerJSON, error)
 }
 
 // Client is a proxy around the docker client
@@ -34,6 +37,7 @@ type Client interface {
 	FindContainer(string) (Container, error)
 	ContainerLogs(context.Context, string, int) (<-chan string, <-chan error)
 	Events(context.Context) (<-chan events.Message, <-chan error)
+	ContainerLogsBetweenDates(context.Context, string, time.Time, time.Time) ([]string, error)
 }
 
 // NewClient creates a new instance of Client
@@ -50,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)
@@ -84,7 +88,7 @@ func (d *dockerClient) FindContainer(id string) (Container, error) {
 func (d *dockerClient) ListContainers(showAll bool) ([]Container, error) {
 	containerListOptions := types.ContainerListOptions{
 		Filters: d.filters,
-		All: showAll,
+		All:     showAll,
 	}
 	list, err := d.cli.ContainerList(context.Background(), containerListOptions)
 	if err != nil {
@@ -119,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)
@@ -136,30 +168,23 @@ func (d *dockerClient) ContainerLogs(ctx context.Context, id string, tailSize in
 		reader.Close()
 	}()
 
+	containerJSON, _ := d.cli.ContainerInspect(ctx, id)
+
 	go func() {
 		defer close(messages)
 		defer close(errChannel)
 		defer reader.Close()
-
-		hdr := make([]byte, 8)
-		var buffer bytes.Buffer
+		nextEntry := logReader(reader, containerJSON.Config.Tty)
 		for {
-			_, err := reader.Read(hdr)
-			if err != nil {
-				errChannel <- err
-				break
-			}
-			count := binary.BigEndian.Uint32(hdr[4:])
-			_, err = io.CopyN(&buffer, reader, int64(count))
+			line, err := nextEntry()
 			if err != nil {
 				errChannel <- err
 				break
 			}
 			select {
-			case messages <- buffer.String():
+			case messages <- line:
 			case <-ctx.Done():
 			}
-			buffer.Reset()
 		}
 	}()
 
@@ -169,3 +194,34 @@ func (d *dockerClient) ContainerLogs(ctx context.Context, id string, tailSize in
 func (d *dockerClient) Events(ctx context.Context) (<-chan events.Message, <-chan error) {
 	return d.cli.Events(ctx, types.EventsOptions{})
 }
+
+func (d *dockerClient) ContainerLogsBetweenDates(ctx context.Context, id string, from time.Time, to time.Time) ([]string, error) {
+	options := types.ContainerLogsOptions{
+		ShowStdout: true,
+		ShowStderr: true,
+		Timestamps: true,
+		Since:      strconv.FormatInt(from.Unix(), 10),
+		Until:      strconv.FormatInt(to.Unix(), 10),
+	}
+	reader, _ := d.cli.ContainerLogs(ctx, id, options)
+	defer reader.Close()
+
+	containerJSON, _ := d.cli.ContainerInspect(ctx, id)
+
+	nextEntry := logReader(reader, containerJSON.Config.Tty)
+
+	var messages []string
+	for {
+		line, err := nextEntry()
+		if err != nil {
+			if err == io.EOF {
+				break
+			} else {
+				return nil, err
+			}
+		}
+		messages = append(messages, line)
+	}
+
+	return messages, nil
+}

docker/client_test.go

@@ -5,14 +5,16 @@ import (
 	"context"
 	"encoding/binary"
 	"errors"
+	"io"
+	"io/ioutil"
+	"testing"
+
 	"github.com/docker/docker/api/types"
+	"github.com/docker/docker/api/types/container"
 	"github.com/docker/docker/api/types/filters"
 	"github.com/stretchr/testify/assert"
 	"github.com/stretchr/testify/mock"
 	"github.com/stretchr/testify/require"
-	"io"
-	"io/ioutil"
-	"testing"
 )
 
 type mockedProxy struct {
@@ -38,6 +40,15 @@ func (m *mockedProxy) ContainerLogs(ctx context.Context, id string, options type
 	}
 	return reader, args.Error(1)
 }
+func (m *mockedProxy) ContainerInspect(ctx context.Context, containerID string) (types.ContainerJSON, error) {
+	args := m.Called(ctx, containerID)
+	json, ok := args.Get(0).(types.ContainerJSON)
+	if !ok && args.Get(0) != nil {
+		panic("proxies return value is not of type types.ContainerJSON")
+	}
+
+	return json, args.Error(1)
+}
 
 func Test_dockerClient_ListContainers_null(t *testing.T) {
 	proxy := new(mockedProxy)
@@ -108,11 +119,37 @@ func Test_dockerClient_ContainerLogs_happy(t *testing.T) {
 	binary.BigEndian.PutUint32(b[4:], uint32(len(expected)))
 	b = append(b, []byte(expected)...)
 
-	var reader io.ReadCloser
-	reader = ioutil.NopCloser(bytes.NewReader(b))
+	reader := ioutil.NopCloser(bytes.NewReader(b))
 	options := types.ContainerLogsOptions{ShowStdout: true, ShowStderr: true, Follow: true, Tail: "300", Timestamps: true}
 	proxy.On("ContainerLogs", mock.Anything, id, options).Return(reader, nil)
 
+	json := types.ContainerJSON{Config: &container.Config{Tty: false}}
+	proxy.On("ContainerInspect", mock.Anything, id).Return(json, nil)
+
+	client := &dockerClient{proxy, filters.NewArgs()}
+	messages, _ := client.ContainerLogs(context.Background(), id, 300)
+
+	actual, _ := <-messages
+	assert.Equal(t, expected, actual, "message doesn't match expected")
+
+	_, ok := <-messages
+	assert.False(t, ok, "channel should have been closed")
+	proxy.AssertExpectations(t)
+}
+
+func Test_dockerClient_ContainerLogs_happy_with_tty(t *testing.T) {
+	id := "123456"
+
+	proxy := new(mockedProxy)
+	expected := "INFO Testing logs..."
+
+	reader := ioutil.NopCloser(bytes.NewReader([]byte(expected)))
+	options := types.ContainerLogsOptions{ShowStdout: true, ShowStderr: true, Follow: true, Tail: "300", Timestamps: true}
+	proxy.On("ContainerLogs", mock.Anything, id, options).Return(reader, nil)
+
+	json := types.ContainerJSON{Config: &container.Config{Tty: true}}
+	proxy.On("ContainerInspect", mock.Anything, id).Return(json, nil)
+
 	client := &dockerClient{proxy, filters.NewArgs()}
 	messages, _ := client.ContainerLogs(context.Background(), id, 300)
 

go.mod

@@ -14,34 +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.2.8 // 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.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.4.0 // indirect
-	github.com/rogpeppe/go-internal v1.3.1 // indirect
+	github.com/pelletier/go-toml v1.6.0 // indirect
+	github.com/pkg/errors v0.9.1 // indirect
+	github.com/rogpeppe/go-internal v1.5.2 // indirect
 	github.com/sergi/go-diff v1.0.0 // indirect
-	github.com/sirupsen/logrus v1.4.2
+	github.com/sirupsen/logrus v1.5.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.3
-	github.com/spf13/viper v1.4.0
+	github.com/spf13/pflag v1.0.5
+	github.com/spf13/viper v1.6.3
 	github.com/stretchr/objx v0.2.0 // indirect
-	github.com/stretchr/testify v1.4.0
-	golang.org/x/net v0.0.0-20190827160401-ba9fcec4b297 // indirect
-	golang.org/x/sys v0.0.0-20190826190057-c7b8b68b1456 // 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-20190819201941-24fa4b261c55 // indirect
-	google.golang.org/grpc v1.23.0 // 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

@@ -25,12 +25,14 @@ github.com/bshuster-repo/logrus-logstash-hook v0.4.1/go.mod h1:zsTqEiSzDgAa/8GZR
 github.com/bugsnag/bugsnag-go v0.0.0-20141110184014-b1d153021fcd/go.mod h1:2oa8nejYd4cQ/b0hMIopN0lCRxU0bueqREvZLWFrtK8=
 github.com/bugsnag/osext v0.0.0-20130617224835-0dd3f918b21b/go.mod h1:obH5gd0BsqsP2LwDJ9aOkm/6J86V6lyAXCoQWGw3K50=
 github.com/bugsnag/panicwrap v0.0.0-20151223152923-e2c28503fcd0/go.mod h1:D/8v3kj0zr8ZAKg1AQ6crr+5VwKN5eIywRkfhyM/+dE=
+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.8 h1:oM84oDW6+A0FQ4aWW5wnnexazvrQA5Hw6iXAi4rczWw=
-github.com/containerd/containerd v1.2.8/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=
@@ -54,6 +56,8 @@ github.com/docker/go-metrics v0.0.0-20180209012529-399ea8c73916/go.mod h1:/u0gXw
 github.com/docker/go-units v0.4.0 h1:3uh0PgVws3nIA0Q+MwDC8yjEPf9zjRfZZWXZYDct3Tw=
 github.com/docker/go-units v0.4.0/go.mod h1:fgPhTUdO+D/Jk86RDLlptpiXQzgHJF7gydDDbaIK4Dk=
 github.com/docker/libtrust v0.0.0-20150114040149-fa567046d9b1/go.mod h1:cyGadeNEkKy96OOhEzfZl+yxihPEzKnqJwvfuSUqbZE=
+github.com/envoyproxy/go-control-plane v0.9.1-0.20191026205805-5f8ba28d4473/go.mod h1:YTl/9mNaCwkRvm6d1a2C3ymFceY/DCBVvsKhRF0iEA4=
+github.com/envoyproxy/protoc-gen-validate v0.1.0/go.mod h1:iSmxcyjqTsJpI2R4NaDN7+kN2VEUnK/pcBlmesArF7c=
 github.com/fsnotify/fsnotify v1.4.7 h1:IXs+QLmnXW2CcXuY+8Mzv/fWEsPGWxqefPtCP5CnV9I=
 github.com/fsnotify/fsnotify v1.4.7/go.mod h1:jwhsz4b93w/PPRr/qN1Yymfu8t87LnFCMoQvtojpjFo=
 github.com/garyburd/redigo v0.0.0-20150301180006-535138d7bcd7/go.mod h1:NR3MbYisc3/PwhQ00EMzDiPmrwpPxAn5GI05/YaO1SY=
@@ -65,15 +69,21 @@ 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.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.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=
 github.com/golang/glog v0.0.0-20160126235308-23def4e6c14b/go.mod h1:SBH7ygxi8pfUlaOkMMuAQtPIUF8ecWP5IEl/CR7VP2Q=
 github.com/golang/groupcache v0.0.0-20190129154638-5b532d6fd5ef/go.mod h1:cIg4eruTrX1D+g88fzRXU5OdNfaM+9IcxsU14FzY7Hc=
@@ -84,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=
@@ -105,10 +120,13 @@ 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=
 github.com/kisielk/errcheck v1.1.0/go.mod h1:EZBBE59ingxPouuu3KfxchcWSUPOHkagtvWXihfKN4Q=
+github.com/kisielk/errcheck v1.2.0/go.mod h1:/BMXB+zMLi60iA8Vv6Ksmxu/1UDYcXs4uQLJ+jE2L00=
 github.com/kisielk/gotool v1.0.0/go.mod h1:XhKaO+MFFWcvkIS/tQcRk01m1F5IRFswLeQ+oQHNcck=
 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=
@@ -128,6 +146,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=
@@ -141,12 +162,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=
@@ -155,6 +178,7 @@ github.com/prometheus/client_golang v0.9.3/go.mod h1:/TN21ttK/J9q6uSwhBd54HahCDf
 github.com/prometheus/client_model v0.0.0-20171117100541-99fa1f4be8e5/go.mod h1:MbSGuTsp3dbXC40dX6PRTWyKYBIrTGTE9sqQNg2J8bo=
 github.com/prometheus/client_model v0.0.0-20180712105110-5c3871d89910/go.mod h1:MbSGuTsp3dbXC40dX6PRTWyKYBIrTGTE9sqQNg2J8bo=
 github.com/prometheus/client_model v0.0.0-20190129233127-fd36f4220a90/go.mod h1:xMI15A0UPsDsEKsMN9yxemIoYk6Tm2C1GtYGdfGttqA=
+github.com/prometheus/client_model v0.0.0-20190812154241-14fe0d1b01d4/go.mod h1:xMI15A0UPsDsEKsMN9yxemIoYk6Tm2C1GtYGdfGttqA=
 github.com/prometheus/common v0.0.0-20180110214958-89604d197083/go.mod h1:daVV7qP5qjZbuso7PdcryaAu0sAZbrN9i7WWcTMWvro=
 github.com/prometheus/common v0.0.0-20181113130724-41aa239b4cce/go.mod h1:daVV7qP5qjZbuso7PdcryaAu0sAZbrN9i7WWcTMWvro=
 github.com/prometheus/common v0.4.0/go.mod h1:TNfzLD0ON7rHzMJeJkieUDPYmFC7Snx/y86RQel1bk4=
@@ -166,8 +190,10 @@ github.com/rogpeppe/fastuuid v0.0.0-20150106093220-6724a57986af/go.mod h1:XWv6So
 github.com/rogpeppe/go-internal v1.1.0/go.mod h1:M8bDsm7K2OlrFYOpmOWEs/qY81heoFRclV5y23lUDJ4=
 github.com/rogpeppe/go-internal v1.3.0 h1:RR9dF3JtopPvtkroDZuVD7qquD0bnHlKSqaQhgwt8yk=
 github.com/rogpeppe/go-internal v1.3.0/go.mod h1:M8bDsm7K2OlrFYOpmOWEs/qY81heoFRclV5y23lUDJ4=
-github.com/rogpeppe/go-internal v1.3.1 h1:pgz0lCb+F99TrCwoy7d83j5kI//45fBQ34KzZ7t5as0=
-github.com/rogpeppe/go-internal v1.3.1/go.mod h1:xXDCJY+GAPziupqXw64V24skbSoqbTEfhy4qGm1nDQc=
+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.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=
@@ -176,8 +202,13 @@ 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/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=
 github.com/spf13/afero v1.1.2 h1:m8/z1t7/fwjysjQRYbP0RD+bUIF/8tJwPdEZsI83ACI=
@@ -186,6 +217,8 @@ github.com/spf13/afero v1.2.2 h1:5jhuqJyZCZf2JRofRvN/nIFgIWNzPa3/Vz8mYylgbWc=
 github.com/spf13/afero v1.2.2/go.mod h1:9ZxEEn6pIJ8Rxe320qSDBk6AsU0r9pR7Q4OcevTdifk=
 github.com/spf13/cast v1.3.0 h1:oget//CVOEoFewqQxwr0Ej5yjygnqGkvggSE/gB35Q8=
 github.com/spf13/cast v1.3.0/go.mod h1:Qx5cxh0v+4UWYiBimWS+eyWzqEqokIECu5etghLkUJE=
+github.com/spf13/cast v1.3.1 h1:nFm6S0SMdyzrzcmThSipiEubIDy8WEXKNZ0UOgiRpng=
+github.com/spf13/cast v1.3.1/go.mod h1:Qx5cxh0v+4UWYiBimWS+eyWzqEqokIECu5etghLkUJE=
 github.com/spf13/cobra v0.0.3/go.mod h1:1l0Ry5zgKvJasoi3XT1TypsSe7PqH0Sj9dhYf7v3XqQ=
 github.com/spf13/cobra v0.0.5/go.mod h1:3K3wKZymM7VvHMDS9+Akkh4K60UwM26emMESw8tLCHU=
 github.com/spf13/jwalterweatherman v1.0.0 h1:XHEdyB+EcvlqZamSM4ZOMGlc93t6AcsBEu9Gc1vn7yk=
@@ -194,10 +227,12 @@ github.com/spf13/jwalterweatherman v1.1.0 h1:ue6voC5bR5F8YxI5S67j9i582FU4Qvo2bmq
 github.com/spf13/jwalterweatherman v1.1.0/go.mod h1:aNWZUN0dPAAO/Ljvb5BEdw96iTZ0EXowPYD95IqWIGo=
 github.com/spf13/pflag v1.0.3 h1:zPAT6CGy6wXeQ7NtTnaTerfKOsV6V6F8agHXFiazDkg=
 github.com/spf13/pflag v1.0.3/go.mod h1:DYY7MBk1bdzusC3SYhjObp+wFpr4gzcvqqNjLnInEg4=
+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.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=
@@ -207,8 +242,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=
@@ -239,8 +277,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-20190827160401-ba9fcec4b297 h1:k7pJ2yAPLPgbskkFdhRCsA77k2fySZ1zf2zCjvQCiIM=
-golang.org/x/net v0.0.0-20190827160401-ba9fcec4b297/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=
@@ -261,8 +299,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-20190826190057-c7b8b68b1456 h1:ng0gs1AKnRRuEMZoTLLlbOd+C17zUDepwGQBb/n+JVg=
-golang.org/x/sys v0.0.0-20190826190057-c7b8b68b1456/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=
@@ -270,6 +308,7 @@ golang.org/x/time v0.0.0-20190308202827-9d24e82272b4 h1:SvFZT6jyqRaOeXpc5h/JSfZe
 golang.org/x/time v0.0.0-20190308202827-9d24e82272b4/go.mod h1:tRJNPiyCQ0inRvYxbN9jk5I+vvW/OXSQhTDSoE431IQ=
 golang.org/x/tools v0.0.0-20180221164845-07fd8470d635/go.mod h1:n7NCudcB/nEzxVGmLbDWY5pfWTLqBcC2KZ6jyYvM4mQ=
 golang.org/x/tools v0.0.0-20180917221912-90fa682c2a6e/go.mod h1:n7NCudcB/nEzxVGmLbDWY5pfWTLqBcC2KZ6jyYvM4mQ=
+golang.org/x/tools v0.0.0-20181030221726-6c7e314b6563/go.mod h1:n7NCudcB/nEzxVGmLbDWY5pfWTLqBcC2KZ6jyYvM4mQ=
 golang.org/x/tools v0.0.0-20190114222345-bf090417da8b/go.mod h1:n7NCudcB/nEzxVGmLbDWY5pfWTLqBcC2KZ6jyYvM4mQ=
 golang.org/x/tools v0.0.0-20190226205152-f727befe758c/go.mod h1:9Yl7xja0Znq3iFh3HoIrodX9oNMXvdceNzlUR8zjMvY=
 golang.org/x/tools v0.0.0-20190311212946-11955173bddd/go.mod h1:LCzVGOaR6xXOjkQ3onu1FJEFr0SW1gC7cKk1uF8kGRs=
@@ -282,25 +321,36 @@ google.golang.org/appengine v1.4.0/go.mod h1:xpcJRLb0r/rnEns0DIKYYv+WjYCduHsrkT7
 google.golang.org/cloud v0.0.0-20151119220103-975617b05ea8/go.mod h1:0H1ncTHf11KCFhTc/+EFRbzSCOZx+VUbRMk55Yv5MYk=
 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 h1:gSJIx1SDwno+2ElGhA4+qG2zF97qiUzTM+rQ0klBOcE=
 google.golang.org/genproto v0.0.0-20190819201941-24fa4b261c55/go.mod h1:DMBHOl98Agz4BDEuKkezgsaosCRResVns1a3J2ZsMNc=
+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 h1:AzbTB6ux+okLTzP8Ru1Xs41C303zdcfEht7MQnYJt5A=
 google.golang.org/grpc v1.23.0/go.mod h1:Y5yQAOtifL1yxbo5wqy6BxZv8vAUGQwXBOALyacEbxg=
+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=
 gopkg.in/check.v1 v1.0.0-20180628173108-788fd7840127 h1:qIbj1fsPNlZgppZ+VLlY7N33q108Sa+fhmuc+sWQYwY=
 gopkg.in/check.v1 v1.0.0-20180628173108-788fd7840127/go.mod h1:Co6ibVJAznAaIkqp8huTwlJQCZ016jof/cbN4VW5Yz0=
 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=
 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.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 /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: npm 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": "^25.2.6",
+  "jest-image-snapshot": "^3.0.1",
+  "puppeteer": "^2.1.1"
+ },
+ "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");
+    });
+  });
+});

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,14 +25,12 @@ var (
 	tailSize = 300
 	filters  map[string]string
 	version  = "dev"
-	commit   = "none"
-	date     = "unknown"
 )
 
 type handler struct {
-	client docker.Client
+	client  docker.Client
 	showAll bool
-	box    packr.Box
+	box     packr.Box
 }
 
 func init() {
@@ -91,6 +85,7 @@ func createRoutes(base string, h *handler) *mux.Router {
 	s := r.PathPrefix(base).Subrouter()
 	s.HandleFunc("/api/containers.json", h.listContainers)
 	s.HandleFunc("/api/logs/stream", h.streamLogs)
+	s.HandleFunc("/api/logs", h.fetchLogsBetweenDates)
 	s.HandleFunc("/api/events/stream", h.streamEvents)
 	s.HandleFunc("/version", h.version)
 	s.PathPrefix("/").Handler(http.StripPrefix(base, http.HandlerFunc(h.index)))
@@ -108,9 +103,9 @@ func main() {
 
 	box := packr.NewBox("./static")
 	r := createRoutes(base, &handler{
-		client: dockerClient,
+		client:  dockerClient,
 		showAll: showAll,
-		box: box,
+		box:     box,
 	})
 	srv := &http.Server{Addr: addr, Handler: r}
 
@@ -131,139 +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) 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.15.2",
+ "version": "1.22.6",
  "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 --public-url '__BASE__' assets/index.html -d static",
+  "start": "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",
   "watch-server": "reflex -c .reflex",
   "prebuild": "npm run clean",
   "build": "npx parcel build --no-source-maps --public-url '__BASE__' assets/index.html -d static",
   "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,35 +25,43 @@
  },
  "homepage": "https://github.com/amir20/dozzle#readme",
  "dependencies": {
-  "ansi-to-html": "^0.6.11",
-  "bulma": "^0.7.5",
-  "date-fns": "^2.1.0",
-  "vue": "^2.6.10",
-  "vue-meta": "^2.2.2",
-  "vue-router": "^3.1.3"
+  "ansi-to-html": "^0.6.14",
+  "buefy": "^0.8.17",
+  "bulma": "^0.8.2",
+  "caniuse-lite": "^1.0.30001048",
+  "date-fns": "^2.12.0",
+  "hotkeys-js": "^3.7.6",
+  "lodash.debounce": "^4.0.8",
+  "semver": "^7.3.2",
+  "splitpanes": "^2.2.1",
+  "store": "^2.0.12",
+  "vue": "^2.6.11",
+  "vue-meta": "^2.3.3",
+  "vue-router": "^3.1.6",
+  "vuex": "^3.3.0"
  },
  "devDependencies": {
-  "@babel/core": "^7.6.0",
-  "@babel/plugin-transform-runtime": "^7.6.0",
-  "@vue/component-compiler-utils": "^3.0.0",
-  "@vue/test-utils": "^1.0.0-beta.29",
+  "@babel/core": "^7.9.0",
+  "@babel/plugin-transform-runtime": "^7.9.0",
+  "@vue/component-compiler-utils": "^3.1.2",
+  "@vue/test-utils": "^1.0.0-beta.33",
   "babel-core": "^7.0.0-bridge.0",
-  "babel-jest": "^24.9.0",
-  "concurrently": "^4.1.2",
+  "babel-jest": "^25.4.0",
+  "concurrently": "^5.2.0",
   "eventsourcemock": "^2.0.0",
-  "fetch-mock": "^7.3.9",
-  "husky": "^3.0.5",
-  "jest": "^24.9.0",
+  "husky": "^4.2.5",
+  "jest": "^25.4.0",
   "jest-serializer-vue": "^2.0.2",
-  "lint-staged": "^9.2.5",
+  "lint-staged": "^10.2.0",
   "mockdate": "^2.0.5",
   "node-fetch": "^2.6.0",
-  "parcel-bundler": "^1.12.3",
-  "prettier": "^1.18.2",
-  "sass": "^1.22.10",
-  "vue-hot-reload-api": "^2.3.3",
-  "vue-jest": "^3.0.4",
-  "vue-template-compiler": "^2.6.10"
+  "parcel-bundler": "^1.12.4",
+  "prettier": "^2.0.5",
+  "release-it": "^13.5.7",
+  "sass": "^1.26.5",
+  "vue-hot-reload-api": "^2.3.4",
+  "vue-jest": "^3.0.5",
+  "vue-template-compiler": "^2.6.11"
  },
  "husky": {
   "hooks": {
@@ -61,18 +70,17 @@
  },
  "lint-staged": {
   "*.{js,vue,css}": [
-   "prettier --write",
-   "git add"
+   "prettier --write"
   ]
  },
  "browserslist": [
-  ">5%",
-  "not ie <= 8"
+  ">5%"
  ],
  "alias": {
-  "vue": "./node_modules/vue/dist/vue.esm.js"
+  "vue": "./node_modules/vue/dist/vue.runtime.esm.js"
  },
  "jest": {
+  "clearMocks": true,
   "moduleFileExtensions": [
    "js",
    "json",
@@ -82,7 +90,8 @@
    "node_modules"
   ],
   "testPathIgnorePatterns": [
-   "node_modules"
+   "node_modules",
+   "<rootDir>/integration/"
   ],
   "transformIgnorePatterns": [
    "node_modules"
@@ -97,5 +106,13 @@
    ".*\\.vue$": "vue-jest",
    ".+\\.js$": "babel-jest"
   }
+ },
+ "release-it": {
+  "github": {
+   "release": true
+  },
+  "npm": {
+   "publish": false
+  }
  }
 }

routes.go

@@ -0,0 +1,167 @@
+package main
+
+import (
+	"encoding/json"
+	"fmt"
+	"html/template"
+	"net/http"
+	"runtime"
+	"strings"
+	"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)
+		}
+		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
+			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("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)
+}