Release 3.0.0

Co-authored-by: dependabot-preview[bot] <27856297+dependabot-preview[bot]@users.noreply.github.com>

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,32 @@
+---
+name: Bug report
+about: Create a report to help us improve
+title: ''
+labels: ''
+assignees: amir20
+
+---
+
+**Describe the bug**
+A clear and concise description of what the bug is.
+
+**To Reproduce**
+Steps to reproduce the behavior:
+1. Go to '...'
+2. Click on '....'
+3. Scroll down to '....'
+4. See error
+
+**Expected behavior**
+A clear and concise description of what you expected to happen.
+
+**Screenshots**
+If applicable, add screenshots to help explain your problem.
+
+**Desktop (please complete the following information):**
+ - OS: [e.g. iOS, Windows or Mac Os]
+ - Docker version [e.g. `docker version`'s output]
+ - Browser & version [e.g. chrome, safari]
+ - Version [e.g. 1.26.1. Can be found at `<Dozzle-host>/version`]
+
+**If applicable include logs with `--level debug` and browser logs**

.github/ISSUE_TEMPLATE/feature_request.md

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

.github/stale.yml

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

.github/workflows/deploy.yml

@@ -23,7 +23,7 @@ jobs:
       - name: Install Go
         uses: actions/setup-go@v1
         with:
-          go-version: 1.14.x
+          go-version: 1.15.x
       - name: Checkout code
         uses: actions/checkout@v2
       - name: Run Go Tests with Coverage

.github/workflows/test.yml

@@ -20,7 +20,7 @@ jobs:
       - name: Install Go
         uses: actions/setup-go@v1
         with:
-          go-version: 1.14.x
+          go-version: 1.15.x
       - name: Checkout code
         uses: actions/checkout@v2
       - name: Run Go Tests with Coverage

.reflex

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

Dockerfile

@@ -1,5 +1,5 @@
 # Build assets
-FROM node:14-alpine as node
+FROM node:current-alpine as node
 
 RUN apk add --no-cache git openssh python make g++ util-linux
 
@@ -18,7 +18,7 @@ COPY assets ./assets
 # Do the build
 RUN yarn build
 
-FROM golang:1.14-alpine AS builder
+FROM golang:1.15-alpine AS builder
 
 RUN apk add --no-cache git ca-certificates
 RUN mkdir /dozzle
@@ -54,4 +54,6 @@ ENV PATH=/bin
 COPY --from=builder /etc/ssl/certs/ca-certificates.crt /etc/ssl/certs/ca-certificates.crt
 COPY --from=builder /dozzle/dozzle /dozzle
 
+EXPOSE 8080
+
 ENTRYPOINT ["/dozzle"]

Makefile

@@ -1,5 +1,5 @@
 TAG := $(shell git describe --tags)
-PLATFROMS := linux/amd64,linux/arm64,linux/arm/v7
+PLATFROMS := linux/amd64,linux/arm/v7,linux/arm64/v8
 
 .PHONY: publish
 publish:

README.md

@@ -138,6 +138,6 @@ To Build and test locally:
 2. Install Go.
 3. Globally install [packr utility](https://github.com/gobuffalo/packr) with `go get -u github.com/gobuffalo/packr/packr` outside of dozzle directory.
 4. Install [reflex](https://github.com/cespare/reflex) with `get -u github.com/cespare/reflex` outside of dozzle.
-5. Install node modules with `npm install`.
-6. Do `npm start`
+5. Install node modules with `yarn`.
+6. Do `yarn dev`
 

__snapshots__/dozzle.snapshot

@@ -31,20 +31,16 @@ Content-Type: text/plain; charset=utf-8
 
 dev
 
-/* snapshot: Test_handler_listContainers_happy */
-HTTP/1.1 200 OK
-Connection: close
-Content-Type: text/plain; charset=utf-8
-
-[{"id":"1234567890","names":null,"name":"test","image":"image","imageId":"image_id","command":"command","created":0,"state":"state","status":"status"}]
-
 /* snapshot: Test_handler_streamEvents_error */
 HTTP/1.1 200 OK
 Connection: close
 Cache-Control: no-cache
 Connection: keep-alive
 Content-Type: text/event-stream
-X-Accel-Buffering: no
+X-Accel-Buffering: no
+
+event: containers-changed
+data: []
 
 /* snapshot: Test_handler_streamEvents_error_request */
 HTTP/1.1 200 OK
@@ -52,7 +48,10 @@ Connection: close
 Cache-Control: no-cache
 Connection: keep-alive
 Content-Type: text/event-stream
-X-Accel-Buffering: no
+X-Accel-Buffering: no
+
+event: containers-changed
+data: []
 
 /* snapshot: Test_handler_streamEvents_happy */
 HTTP/1.1 200 OK
@@ -63,7 +62,7 @@ Content-Type: text/event-stream
 X-Accel-Buffering: no
 
 event: containers-changed
-data: start
+data: []
 
 /* snapshot: Test_handler_streamLogs_error_finding_container */
 HTTP/1.1 404 Not Found
@@ -91,6 +90,9 @@ X-Accel-Buffering: no
 
 data: INFO Testing logs...
 
+event: container-stopped
+data: end of stream
+
 /* snapshot: Test_handler_streamLogs_happy_container_stopped */
 HTTP/1.1 200 OK
 Connection: close
@@ -102,6 +104,9 @@ X-Accel-Buffering: no
 event: container-stopped
 data: end of stream
 
+event: container-stopped
+data: end of stream
+
 /* snapshot: Test_handler_streamLogs_happy_with_id */
 HTTP/1.1 200 OK
 Connection: close
@@ -111,4 +116,7 @@ Content-Type: text/event-stream
 X-Accel-Buffering: no
 
 data: 2020-05-13T18:55:37.772853839Z INFO Testing logs...
-id: 2020-05-13T18:55:37.772853839Z
+id: 2020-05-13T18:55:37.772853839Z
+
+event: container-stopped
+data: end of stream

assets/App.spec.js

@@ -17,31 +17,32 @@ describe("<App />", () => {
     global.EventSource = EventSource;
     const state = {
       settings: { menuWidth: 15 },
+      containers: [{ id: "abc", name: "Test 1" }],
     };
 
     const getters = {
-      visibleContainers() {
-        return [
-          { id: "abc", name: "Test 1" },
-          { id: "xyz", name: "Test 2" },
-        ];
+      visibleContainers(store) {
+        return store.containers;
+      },
+      activeContainers() {
+        return [];
       },
-    };
-
-    const actions = {
-      FETCH_CONTAINERS: () => Promise.resolve(),
     };
 
     store = new Vuex.Store({
       state,
       getters,
-      actions,
     });
   });
 
   test("has right title", async () => {
     const wrapper = shallowMount(App, { stubs, store, localVue });
+    wrapper.vm.$store.state.containers = [
+      { id: "abc", name: "Test 1" },
+      { id: "xyz", name: "Test 2" },
+    ];
     await wrapper.vm.$nextTick();
+
     expect(wrapper.vm.title).toContain("2 containers");
   });
 

assets/App.vue

@@ -8,17 +8,18 @@
       </pane>
       <pane min-size="10">
         <splitpanes>
-          <pane class="has-min-height">
+          <pane class="has-min-height router-view">
             <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>
+            <log-container
+              :id="other.id"
+              show-title
+              scrollable
+              closable
+              @close="removeActiveContainer(other)"
+            ></log-container>
           </pane>
         </splitpanes>
       </pane>
@@ -41,26 +42,22 @@
 import { mapActions, mapGetters, mapState } from "vuex";
 import { Splitpanes, Pane } from "splitpanes";
 
-import LogViewerWithSource from "./components/LogViewerWithSource";
-import ScrollableView from "./components/ScrollableView";
+import LogContainer from "./components/LogContainer";
 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,
+    LogContainer,
     MobileMenu,
-    ScrollableView,
     Splitpanes,
     Pane,
     Search,
-    ContainerTitle,
   },
   data() {
     return {
@@ -74,14 +71,13 @@ export default {
       titleTemplate: "%s - Dozzle",
     };
   },
-  async created() {
-    await this.fetchContainerList();
-    this.title = `${this.visibleContainers.length} containers`;
-  },
   mounted() {
     if (this.hasSmallerScrollbars) {
       document.documentElement.classList.add("has-custom-scrollbars");
     }
+    if (this.hasLightTheme) {
+      document.documentElement.setAttribute("data-theme", "light");
+    }
     this.menuWidth = this.settings.menuWidth;
   },
   watch: {
@@ -92,17 +88,29 @@ export default {
         document.documentElement.classList.remove("has-custom-scrollbars");
       }
     },
+    hasLightTheme(newValue, oldValue) {
+      if (newValue) {
+        document.documentElement.setAttribute("data-theme", "light");
+      } else {
+        document.documentElement.removeAttribute("data-theme");
+      }
+    },
+    visibleContainers() {
+      this.title = `${this.visibleContainers.length} containers`;
+    },
   },
   computed: {
-    ...mapState(["activeContainers", "isMobile", "settings"]),
-    ...mapGetters(["visibleContainers"]),
+    ...mapState(["isMobile", "settings"]),
+    ...mapGetters(["visibleContainers", "activeContainers"]),
     hasSmallerScrollbars() {
       return this.settings.smallerScrollbars;
     },
+    hasLightTheme() {
+      return this.settings.lightTheme;
+    },
   },
   methods: {
     ...mapActions({
-      fetchContainerList: "FETCH_CONTAINERS",
       removeActiveContainer: "REMOVE_ACTIVE_CONTAINER",
       updateSetting: "UPDATE_SETTING",
     }),
@@ -119,9 +127,15 @@ export default {
 <style scoped lang="scss">
 ::v-deep .splitpanes--vertical > .splitpanes__splitter {
   min-width: 3px;
-  background: #666;
+  background: var(--border-color);
   &:hover {
-    background: rgb(255, 221, 87);
+    background: var(--border-hover-color);
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .router-view {
+    padding-top: 75px;
   }
 }
 

assets/__snapshots__/App.spec.js.snap

@@ -25,7 +25,7 @@ exports[`<App /> renders correctly 1`] = `
         pushotherpanes="true"
       >
         <pane-stub
-          class="has-min-height"
+          class="has-min-height router-view"
           maxsize="100"
           minsize="0"
         >

assets/components/ContainerStat.vue

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

assets/components/ContainerTitle.vue

@@ -1,9 +1,6 @@
 <template>
-  <div class="name columns is-marginless">
+  <div class="columns is-marginless has-text-weight-bold is-family-monospace">
     <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>
 
@@ -11,20 +8,9 @@
 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>
+<style lang="scss" scoped></style>

assets/components/InfiniteLoader.vue

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

assets/components/LogContainer.vue

@@ -0,0 +1,76 @@
+<template>
+  <scrollable-view :scrollable="scrollable" v-if="container">
+    <template v-slot:header v-if="showTitle">
+      <div class="columns is-vcentered pr-4">
+        <div class="column is-narrow">
+          <container-title :value="container.name" @close="$emit('close')"></container-title>
+        </div>
+        <div class="column is-clipped">
+          <container-stat :stat="container.stat" :state="container.state"></container-stat>
+        </div>
+        <div class="column is-narrow" v-if="closable">
+          <button class="delete is-medium" @click="$emit('close')"></button>
+        </div>
+      </div>
+    </template>
+    <template v-slot="{ setLoading }">
+      <log-viewer-with-source :id="id" @loading-more="setLoading($event)"></log-viewer-with-source>
+    </template>
+  </scrollable-view>
+</template>
+
+<script>
+import { mapGetters } from "vuex";
+
+import LogViewerWithSource from "./LogViewerWithSource";
+import ScrollableView from "./ScrollableView";
+import ContainerTitle from "./ContainerTitle";
+import ContainerStat from "./ContainerStat";
+
+export default {
+  props: {
+    id: {
+      type: String,
+    },
+    showTitle: {
+      type: Boolean,
+      default: false,
+    },
+    scrollable: {
+      type: Boolean,
+      default: false,
+    },
+    closable: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  name: "LogContainer",
+  components: {
+    LogViewerWithSource,
+    ScrollableView,
+    ContainerTitle,
+    ContainerStat,
+  },
+  computed: {
+    ...mapGetters(["allContainersById"]),
+    container() {
+      return this.allContainersById[this.id];
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+button.delete {
+  background-color: var(--scheme-main-ter);
+  opacity: 0.6;
+  &:after,
+  &:before {
+    background-color: var(--text-color);
+  }
+
+  &:hover {
+    opacity: 1;
+  }
+}
+</style>

assets/components/LogEventSource.spec.js

@@ -19,10 +19,10 @@ describe("<LogEventSource />", () => {
     global.EventSource = EventSource;
     window.scrollTo = jest.fn();
     const observe = jest.fn();
-    const unobserve = jest.fn();
+    const disconnect = jest.fn();
     global.IntersectionObserver = jest.fn(() => ({
       observe,
-      unobserve,
+      disconnect,
     }));
     debounce.mockClear();
   });
@@ -144,7 +144,7 @@ describe("<LogEventSource />", () => {
       await wrapper.vm.$nextTick();
       expect(wrapper.find("ul.events")).toMatchInlineSnapshot(`
         <ul class="events medium">
-          <li class=""><span class="date">today at 10:55 AM</span> <span class="text">"This is a message."</span></li>
+          <li class=""><span class="date"><time datetime="2019-06-12T10:55:42.459Z">today at 10:55 AM</time></span> <span class="text">"This is a message."</span></li>
         </ul>
       `);
     });
@@ -159,7 +159,7 @@ describe("<LogEventSource />", () => {
       await wrapper.vm.$nextTick();
       expect(wrapper.find("ul.events")).toMatchInlineSnapshot(`
         <ul class="events medium">
-          <li class=""><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>
+          <li class=""><span class="date"><time datetime="2019-06-12T10:55:42.459Z">today at 10:55 AM</time></span> <span class="text"><span style="color:#000">black<span style="color:#AAA">white</span></span></span></li>
         </ul>
       `);
     });
@@ -174,7 +174,7 @@ describe("<LogEventSource />", () => {
       await wrapper.vm.$nextTick();
       expect(wrapper.find("ul.events")).toMatchInlineSnapshot(`
         <ul class="events medium">
-          <li class=""><span class="date">today at 10:55 AM</span> <span class="text">&lt;test&gt;foo bar&lt;/test&gt;</span></li>
+          <li class=""><span class="date"><time datetime="2019-06-12T10:55:42.459Z">today at 10:55 AM</time></span> <span class="text">&lt;test&gt;foo bar&lt;/test&gt;</span></li>
         </ul>
       `);
     });
@@ -192,7 +192,7 @@ describe("<LogEventSource />", () => {
       await wrapper.vm.$nextTick();
       expect(wrapper.find("ul.events")).toMatchInlineSnapshot(`
         <ul class="events medium">
-          <li class=""><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>
+          <li class=""><span class="date"><time datetime="2019-06-12T10:55:42.459Z">today at 10:55 AM</time></span> <span class="text">This is a <mark>test</mark> &lt;hi&gt;&lt;/hi&gt;</span></li>
         </ul>
       `);
     });

assets/components/LogEventSource.vue

@@ -25,44 +25,48 @@ export default {
   created() {
     this.es = null;
     this.loadLogs(this.id);
+    this.flushBuffer = debounce(this.flushNow, 250, { maxWait: 1000 });
   },
   methods: {
     loadLogs(id) {
-      if (this.es) {
-        this.es.close();
-        this.messages = [];
-        this.buffer = [];
-        this.es = null;
-      }
+      this.reset();
       this.es = new EventSource(`${config.base}/api/logs/stream?id=${this.id}`);
-
       this.es.addEventListener("container-stopped", (e) => {
         this.es.close();
         this.buffer.push({ event: "container-stopped", message: "Container stopped", date: new Date() });
-        flushNow();
+        this.flushBuffer();
+        this.flushBuffer.flush();
       });
-      this.es.addEventListener("error", (e) => console.log("EventSource failed: " + JSON.stringify(e)));
-
-      const flushBuffer = debounce(() => flushNow(), 250, { maxWait: 1000 });
-      const flushNow = () => {
-        this.messages.push(...this.buffer);
-        this.buffer = [];
-      };
+      this.es.addEventListener("error", (e) => console.error("EventSource failed: " + JSON.stringify(e)));
       this.es.onmessage = (e) => {
         this.buffer.push(this.parseMessage(e.data));
-        flushBuffer();
+        this.flushBuffer();
       };
       this.$once("hook:beforeDestroy", () => this.es.close());
     },
+    flushNow() {
+      this.messages.push(...this.buffer);
+      this.buffer = [];
+    },
+    reset() {
+      if (this.es) {
+        this.es.close();
+        this.es = null;
+        this.flushBuffer.cancel();
+      }
+      this.messages = [];
+      this.buffer = [];
+    },
     async loadOlderLogs() {
       if (this.messages.length < 300) return;
 
+      this.$emit("loading-more", true);
       const to = this.messages[0].date;
       const last = this.messages[299].date;
       const delta = to - last;
       const from = new Date(to.getTime() + delta);
       const logs = await (
-        await fetch(`/api/logs?id=${this.id}&from=${from.toISOString()}&to=${to.toISOString()}`)
+        await fetch(`${config.base}/api/logs?id=${this.id}&from=${from.toISOString()}&to=${to.toISOString()}`)
       ).text();
       if (logs) {
         const newMessages = logs
@@ -71,6 +75,7 @@ export default {
           .map((line) => this.parseMessage(line));
         this.messages.unshift(...newMessages);
       }
+      this.$emit("loading-more", false);
     },
     parseMessage(data) {
       let i = data.indexOf(" ");

assets/components/LogViewer.vue

@@ -1,17 +1,16 @@
 <template>
   <ul class="events" :class="settings.size">
     <li v-for="item in filtered" :key="item.key" :class="{ event: !!item.event }">
-      <span class="date" v-if="settings.showTimestamp">{{ item.date | relativeTime }}</span>
+      <span class="date" v-if="settings.showTimestamp"><relative-time :date="item.date"></relative-time></span>
       <span class="text" v-html="colorize(item.message)"></span>
     </li>
   </ul>
 </template>
-
 <script>
 import { mapActions, mapGetters, mapState } from "vuex";
-import { formatRelative } from "date-fns";
 import AnsiConvertor from "ansi-to-html";
 import DOMPurify from "dompurify";
+import RelativeTime from "./RelativeTime";
 
 const ansiConvertor = new AnsiConvertor({ escapeXML: true });
 
@@ -24,7 +23,7 @@ if (window.trustedTypes && trustedTypes.createPolicy) {
 export default {
   props: ["messages"],
   name: "LogViewer",
-  components: {},
+  components: { RelativeTime },
   data() {
     return {
       showSearch: false,
@@ -60,11 +59,6 @@ export default {
       return messages;
     },
   },
-  filters: {
-    relativeTime(date) {
-      return formatRelative(date, new Date());
-    },
-  },
 };
 </script>
 <style scoped lang="scss">
@@ -97,6 +91,13 @@ export default {
 .date {
   background-color: #262626;
   color: #258ccd;
+
+  [data-theme="light"] & {
+    background-color: #f0f0f0;
+    color: #009900;
+    padding-left: 5px;
+    padding-right: 5px;
+  }
 }
 
 .text {
@@ -109,8 +110,8 @@ li.event {
 
 ::v-deep mark {
   border-radius: 2px;
-  background-color: #ffdd57;
-  animation: pops 0.2s ease-out;
+  background-color: var(--secondary-color);
+  animation: pops 200ms ease-out;
   display: inline-block;
 }
 

assets/components/LogViewerWithSource.vue

@@ -1,5 +1,5 @@
 <template>
-  <log-event-source :id="id" v-slot="eventSource">
+  <log-event-source :id="id" v-slot="eventSource" @loading-more="$emit('loading-more', $event)">
     <log-viewer :messages="eventSource.messages"></log-viewer>
   </log-event-source>
 </template>

assets/components/MobileMenu.vue

@@ -1,14 +1,29 @@
 <template>
   <aside>
-    <a
-      role="button"
-      class="navbar-burger burger is-white is-hidden-tablet is-pulled-right"
-      @click="showNav = !showNav"
-      :class="{ 'is-active': showNav }"
-    >
-      <span></span> <span></span> <span></span>
-    </a>
-    <h1 class="title has-text-warning is-marginless">Dozzle</h1>
+    <div class="columns is-marginless is-gapless is-mobile is-vcentered">
+      <div class="column is-narrow">
+        <router-link :to="{ name: 'default' }">
+          <svg class="logo">
+            <use href="#logo"></use>
+          </svg>
+        </router-link>
+      </div>
+      <div class="column ml-4 is-family-monospace is-ellipsis" v-if="$route.name == 'container'">
+        {{ allContainersById[$route.params.id].name }}
+      </div>
+
+      <div class="column is-narrow push-right">
+        <a
+          role="button"
+          class="navbar-burger burger is-hidden-tablet is-pulled-right"
+          @click="showNav = !showNav"
+          :class="{ 'is-active': showNav }"
+        >
+          <span></span> <span></span> <span></span>
+        </a>
+      </div>
+    </div>
+
     <p class="menu-label is-hidden-mobile" :class="{ 'is-active': showNav }">Containers</p>
     <ul class="menu-list is-hidden-mobile" :class="{ 'is-active': showNav }">
       <li v-for="item in visibleContainers" :key="item.id">
@@ -17,7 +32,7 @@
           active-class="is-active"
           :title="item.name"
         >
-          <div class="hide-overflow">
+          <div class="is-ellipsis">
             {{ item.name }}
           </div>
         </router-link>
@@ -38,7 +53,7 @@ export default {
     };
   },
   computed: {
-    ...mapGetters(["activeContainersById", "visibleContainers"]),
+    ...mapGetters(["visibleContainers", "allContainersById"]),
   },
   watch: {
     $route(to, from) {
@@ -54,7 +69,7 @@ aside {
   top: 0;
   left: 0;
   right: 0;
-  background: #222;
+  background: var(--scheme-main-ter);
   z-index: 2;
   max-height: 100vh;
   overflow: auto;
@@ -62,14 +77,13 @@ aside {
   .menu-label {
     margin-top: 1em;
   }
-  .hide-overflow {
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow: hidden;
+
+  .title {
+    text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2);
   }
 
-  .burger.is-white {
-    color: #fff;
+  .burger {
+    color: var(--body-color);
   }
 
   .is-hidden-mobile.is-active {
@@ -79,5 +93,15 @@ aside {
   .navbar-burger {
     height: 2.35rem;
   }
+
+  .logo {
+    width: 82px;
+    height: 36px;
+    fill: var(--logo-color);
+  }
+
+  .column.push-right {
+    margin-left: auto;
+  }
 }
 </style>

assets/components/PastTime.vue

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

assets/components/RelativeTime.vue

@@ -0,0 +1,34 @@
+<template>
+  <time :datetime="date.toISOString()">{{ date | relativeTime }}</time>
+</template>
+
+<script>
+import { formatRelative } from "date-fns";
+import { enGB, enUS } from "date-fns/locale";
+
+const use24Hr =
+  new Intl.DateTimeFormat(undefined, {
+    hour: "numeric",
+  })
+    .formatToParts(new Date(2020, 0, 1, 13))
+    .find((part) => part.type === "hour").value.length === 2;
+
+const locale = use24Hr ? enGB : enUS;
+
+export default {
+  props: {
+    date: {
+      required: true,
+      type: Date,
+    },
+  },
+  name: "RelativeTime",
+  components: {},
+
+  filters: {
+    relativeTime(date) {
+      return formatRelative(date, new Date(), { locale });
+    },
+  },
+};
+</script>

assets/components/ScrollProgress.vue

@@ -0,0 +1,146 @@
+<template>
+  <div class="scroll-progress">
+    <svg width="100" height="100" viewBox="0 0 100 100" :class="{ indeterminate }">
+      <circle r="44" cx="50" cy="50" :style="{ '--progress': scrollProgress }" />
+    </svg>
+    <div class="is-overlay columns is-vcentered is-centered has-text-weight-light">
+      <template v-if="indeterminate">
+        <div class="column is-narrow is-paddingless is-size-2">&#8734;</div>
+      </template>
+      <template v-else>
+        <span class="column is-narrow is-paddingless is-size-2">
+          {{ Math.ceil(scrollProgress * 100) }}
+        </span>
+        <span class="column is-narrow is-paddingless"> % </span>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from "vuex";
+import throttle from "lodash.throttle";
+
+export default {
+  name: "ScrollProgress",
+  props: {
+    indeterminate: {
+      default: false,
+      type: Boolean,
+    },
+    autoHide: {
+      default: true,
+      type: Boolean,
+    },
+  },
+  data() {
+    return {
+      scrollProgress: 0,
+      animation: { cancel: () => {} },
+      parentElement: document,
+    };
+  },
+  created() {
+    this.onScrollThrottled = throttle(this.onScroll, 150);
+  },
+  mounted() {
+    this.attachEvents();
+    this.$once("hook:beforeDestroy", this.detachEvents);
+  },
+  watch: {
+    activeContainers() {
+      this.detachEvents();
+      this.attachEvents();
+    },
+    indeterminate() {
+      this.$nextTick(() => this.onScroll());
+    },
+  },
+  computed: {
+    ...mapGetters(["activeContainers"]),
+  },
+  methods: {
+    attachEvents() {
+      this.parentElement = this.$el.closest("[data-scrolling]") || document;
+      this.parentElement.addEventListener("scroll", this.onScrollThrottled);
+    },
+    detachEvents() {
+      this.parentElement.removeEventListener("scroll", this.onScrollThrottled);
+    },
+    onScroll() {
+      const p = this.parentElement == document ? document.documentElement : this.parentElement;
+      this.scrollProgress = p.scrollTop / (p.scrollHeight - p.clientHeight);
+      this.animation.cancel();
+      if (this.autoHide) {
+        this.animation = this.$el.animate(
+          { opacity: [1, 0] },
+          {
+            duration: 500,
+            delay: 2000,
+            fill: "both",
+            easing: "ease-out",
+          }
+        );
+      }
+    },
+  },
+};
+</script>
+<style scoped lang="scss">
+.scroll-progress {
+  display: inline-block;
+  position: relative;
+
+  svg {
+    filter: drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.2));
+    margin-top: 5px;
+    &.indeterminate {
+      animation: 2s linear infinite svg-animation;
+
+      circle {
+        animation: 1.4s ease-in-out infinite both circle-animation;
+      }
+    }
+    circle {
+      fill: var(--scheme-main-ter);
+      fill-opacity: 0.8;
+      transition: stroke-dashoffset 250ms ease-out;
+      transform: rotate(-90deg);
+      transform-origin: 50% 50%;
+      stroke: var(--primary-color);
+      stroke-dashoffset: calc(276.32px - var(--progress) * 276.32px);
+      stroke-dasharray: 276.32px 276.32px;
+      stroke-linecap: round;
+      stroke-width: 3;
+      will-change: stroke-dashoffset;
+    }
+  }
+}
+
+@keyframes svg-animation {
+  0% {
+    transform: rotateZ(0deg);
+  }
+  100% {
+    transform: rotateZ(360deg);
+  }
+}
+
+@keyframes circle-animation {
+  0%,
+  25% {
+    stroke-dashoffset: 275px;
+    transform: rotate(0);
+  }
+  50%,
+  75% {
+    stroke-dashoffset: 70px;
+    transform: rotate(45deg);
+  }
+
+  100% {
+    stroke-dashoffset: 275px;
+    transform: rotate(360deg);
+  }
+}
+</style>

assets/components/ScrollableView.vue

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

assets/components/Search.vue

@@ -75,17 +75,36 @@ export default {
   width: 350px;
   position: fixed;
   padding: 10px;
-  background: rgba(50, 50, 50, 0.9);
+  background: var(--scheme-main-ter);
   top: 0;
   right: 0;
   border-radius: 0 0 0 5px;
   z-index: 10;
-}
-.delete {
-  margin-left: 1em;
-}
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
 
-.icon {
-  padding: 10px 3px;
+  button.delete {
+    margin-left: 1em;
+    background-color: var(--scheme-main-ter);
+    opacity: 0.6;
+    &:after,
+    &:before {
+      background-color: var(--text-color);
+    }
+
+    &:hover {
+      opacity: 1;
+    }
+  }
+
+  .icon {
+    padding: 10px 3px;
+  }
+
+  .input {
+    color: var(--body-color);
+    &::placeholder {
+      color: var(--border-color);
+    }
+  }
 }
 </style>

assets/components/SideMenu.vue

@@ -1,10 +1,14 @@
 <template>
   <aside>
     <div class="columns is-marginless">
-      <div class="column">
-        <h1 class="title has-text-warning is-marginless">Dozzle</h1>
+      <div class="column is-paddingless">
+        <router-link :to="{ name: 'default' }">
+          <svg class="logo">
+            <use href="#logo"></use>
+          </svg>
+        </router-link>
       </div>
-      <div class="column is-narrow has-text-right is-hidden-mobile">
+      <div class="column is-narrow has-text-right x">
         <router-link
           :to="{ name: 'settings' }"
           active-class="is-active"
@@ -24,7 +28,7 @@
           active-class="is-active"
           :title="item.name"
         >
-          <div class="hide-overflow">
+          <div class="is-ellipsis">
             <span
               @click.stop.prevent="appendActiveContainer(item)"
               class="icon is-small will-append-container"
@@ -55,8 +59,13 @@ export default {
     return {};
   },
   computed: {
-    ...mapState(["activeContainers"]),
-    ...mapGetters(["activeContainersById", "visibleContainers"]),
+    ...mapGetters(["visibleContainers", "activeContainers"]),
+    activeContainersById() {
+      return this.activeContainers.reduce((map, obj) => {
+        map[obj.id] = obj;
+        return map;
+      }, {});
+    },
   },
   methods: {
     ...mapActions({
@@ -73,16 +82,6 @@ aside {
   position: fixed;
   width: inherit;
 
-  .hide-overflow {
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow: hidden;
-  }
-
-  .burger.is-white {
-    color: #fff;
-  }
-
   .is-hidden-mobile.is-active {
     display: block !important;
   }
@@ -92,11 +91,17 @@ li.exited a {
   color: #777;
 }
 
+.logo {
+  width: 122px;
+  height: 54px;
+  fill: var(--logo-color);
+}
+
 .will-append-container.icon {
   transition: transform 0.2s ease-out;
   &.is-active {
     pointer-events: none;
-    color: #00d1b2;
+    color: var(--primary-color);
   }
   .router-link-exact-active & {
     visibility: hidden;

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

@@ -3,8 +3,25 @@
 exports[`<LogEventSource /> renders correctly 1`] = `
 <div>
   <div
-    class="control"
-  />
+    class="infinte-loader"
+  >
+    <div
+      class="spinner"
+      style="display: none;"
+    >
+      <div
+        class="bounce1"
+      />
+       
+      <div
+        class="bounce2"
+      />
+       
+      <div
+        class="bounce3"
+      />
+    </div>
+  </div>
    
   <ul
     class="events medium"

assets/main.js

@@ -6,10 +6,7 @@ import Switch from "buefy/dist/esm/switch";
 import store from "./store";
 import config from "./store/config";
 import App from "./App.vue";
-import Container from "./pages/Container.vue";
-import Settings from "./pages/Settings.vue";
-import Index from "./pages/Index.vue";
-import Show from "./pages/Show.vue";
+import { Container, Settings, Index, Show, ContainerNotFound, PageNotFound } from "./pages";
 
 Vue.use(VueRouter);
 Vue.use(Meta);
@@ -28,6 +25,11 @@ const routes = [
     name: "container",
     props: true,
   },
+  {
+    path: "/container/*",
+    component: ContainerNotFound,
+    name: "container-not-found",
+  },
   {
     path: "/settings",
     component: Settings,
@@ -38,6 +40,11 @@ const routes = [
     component: Show,
     name: "show",
   },
+  {
+    path: "/*",
+    component: PageNotFound,
+    name: "page-not-found",
+  },
 ];
 
 const router = new VueRouter({

assets/pages/Container.vue

@@ -1,26 +1,18 @@
 <template>
-  <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>
+  <log-container :id="id" show-title :scrollable="activeContainers.length > 0"> </log-container>
 </template>
 
 <script>
 import { mapActions, mapGetters, mapState } from "vuex";
 
-import LogViewerWithSource from "../components/LogViewerWithSource";
-import ScrollableView from "../components/ScrollableView";
-import ContainerTitle from "../components/ContainerTitle";
+import LogContainer from "../components/LogContainer";
+import store from "../store";
 
 export default {
-  props: ["id", "name"],
+  props: ["id"],
   name: "Container",
   components: {
-    LogViewerWithSource,
-    ScrollableView,
-    ContainerTitle,
+    LogContainer,
   },
   data() {
     return {
@@ -38,8 +30,7 @@ export default {
     }
   },
   computed: {
-    ...mapState(["activeContainers"]),
-    ...mapGetters(["allContainersById"]),
+    ...mapGetters(["allContainersById", "activeContainers"]),
   },
   watch: {
     id() {

assets/pages/ContainerNotFound.vue

@@ -0,0 +1,18 @@
+<template>
+  <div class="hero is-halfheight">
+    <div class="hero-body">
+      <div class="container has-text-centered">
+        <h1 class="title">
+          Container not found.
+          <small class="subtitle">It may have been removed.</small>
+        </h1>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ContainerNotFound",
+};
+</script>

assets/pages/Index.spec.js

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

assets/pages/Index.vue

@@ -1,22 +1,149 @@
 <template>
-  <div class="hero is-fullheight is-dark">
-    <div class="hero-body">
-      <div class="container has-text-centered">
-        <h1 class="title">Please choose a container from the list to view the logs</h1>
+  <div>
+    <section class="hero is-small mt-4">
+      <div class="hero-body">
+        <div class="container">
+          <h1 class="title">Hello, there!</h1>
+        </div>
       </div>
-    </div>
+    </section>
+    <section class="level section is-mobile">
+      <div class="level-item has-text-centered">
+        <div>
+          <p class="title">{{ containers.length }}</p>
+          <p class="heading">Total Containers</p>
+        </div>
+      </div>
+      <div class="level-item has-text-centered">
+        <div>
+          <p class="title">{{ runningContainers.length }}</p>
+          <p class="heading">Running</p>
+        </div>
+      </div>
+      <div class="level-item has-text-centered">
+        <div>
+          <p class="title">{{ version }}</p>
+          <p class="heading">Dozzle Version</p>
+        </div>
+      </div>
+    </section>
+
+    <section class="columns is-centered section">
+      <div class="column is-4">
+        <div class="panel">
+          <p class="panel-heading">Containers</p>
+          <div class="panel-block">
+            <p class="control has-icons-left">
+              <input
+                class="input"
+                type="text"
+                placeholder="Search Containers"
+                v-model="search"
+                @keyup.esc="search = null"
+                @keyup.enter="onEnter()"
+              />
+              <span class="icon is-left">
+                <icon name="search"></icon>
+              </span>
+            </p>
+          </div>
+          <p class="panel-tabs" v-if="!search">
+            <a :class="{ 'is-active': sort === 'running' }" @click="sort = 'running'">Running</a>
+            <a :class="{ 'is-active': sort === 'all' }" @click="sort = 'all'">All</a>
+          </p>
+          <router-link
+            :to="{ name: 'container', params: { id: item.id, name: item.name } }"
+            v-for="item in results.slice(0, 10)"
+            :key="item.id"
+            class="panel-block"
+          >
+            <span class="name">{{ item.name }}</span>
+
+            <div class="subtitle is-7 status">
+              <past-time :date="new Date(item.created * 1000)"></past-time>
+            </div>
+          </router-link>
+        </div>
+      </div>
+    </section>
   </div>
 </template>
 
 <script>
+import { mapActions, mapGetters, mapState } from "vuex";
+import Icon from "../components/Icon";
+import PastTime from "../components/PastTime";
+import config from "../store/config";
+
 export default {
-  props: [],
-  name: "Default",
+  name: "Index",
+  components: { Icon, PastTime },
+  data() {
+    return {
+      version: config.version,
+      search: null,
+      sort: "running",
+    };
+  },
+  methods: {
+    onEnter() {
+      if (this.results.length == 1) {
+        const [item] = this.results;
+        this.$router.push({ name: "container", params: { id: item.id, name: item.name } });
+      }
+    },
+  },
+  computed: {
+    ...mapState(["containers"]),
+    mostRecentContainers() {
+      return [...this.containers].sort((a, b) => b.created - a.created);
+    },
+    runningContainers() {
+      return this.mostRecentContainers.filter((c) => c.state === "running");
+    },
+    allContainers() {
+      return this.containers;
+    },
+    results() {
+      if (this.search) {
+        const term = this.search.toLowerCase();
+        return this.allContainers.filter((c) => c.name.toLowerCase().includes(term));
+      }
+      switch (this.sort) {
+        case "all":
+          return this.mostRecentContainers;
+        case "running":
+          return this.runningContainers;
+
+        default:
+          throw `Invalid sort order: ${this.sort}`;
+      }
+    },
+  },
 };
 </script>
-<style scoped>
-.hero.is-dark {
-  color: #ddd;
-  background-color: #111;
+<style lang="scss" scoped>
+.panel {
+  border: 1px solid var(--border-color);
+  .panel-block,
+  .panel-tabs {
+    border-color: var(--border-color);
+    .is-active {
+      border-color: var(--border-hover-color);
+    }
+    .name {
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      overflow: hidden;
+    }
+    .status {
+      margin-left: auto;
+      white-space: nowrap;
+    }
+  }
+}
+
+.icon {
+  padding: 10px 3px;
 }
 </style>

assets/pages/PageNotFound.vue

@@ -0,0 +1,18 @@
+<template>
+  <div class="hero is-halfheight">
+    <div class="hero-body">
+      <div class="container has-text-centered">
+        <h1 class="title">
+          Oops,
+          <small class="subtitle">this page doesn't exist</small>
+        </h1>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "PageNotFound",
+};
+</script>

assets/pages/Settings.vue

@@ -46,30 +46,40 @@
       </div>
 
       <div class="item">
-        <h2 class="title is-6 is-marginless">Font size</h2>
-        Modify the font size when viewing logs.
+        <b-switch v-model="lightTheme">
+          Use light theme
+        </b-switch>
+      </div>
 
-        <b-dropdown v-model="size" aria-role="list" style="margin: -8px 10px 0;">
-          <button class="button is-primary" type="button" slot="trigger">
-            <span class="is-capitalized">{{ size }}</span>
-            <span class="icon"><icon name="chevron-down"></icon></span>
-          </button>
-          <b-dropdown-item
-            :value="value"
-            aria-role="listitem"
-            v-for="value in ['small', 'medium', 'large']"
-            :key="value"
-          >
-            <div class="media">
-              <span class="icon keep-size">
-                <icon name="check" v-if="value == size"></icon>
-              </span>
-              <div class="media-content">
-                <h3 class="is-capitalized">{{ value }}</h3>
-              </div>
-            </div>
-          </b-dropdown-item>
-        </b-dropdown>
+      <div class="item">
+        <div class="columns is-vcentered is-mobile is-variable is-2">
+          <div class="column is-narrow">
+            <b-dropdown v-model="size" aria-role="list">
+              <button class="button is-primary" type="button" slot="trigger">
+                <span class="is-capitalized">{{ size }}</span>
+                <span class="icon"><icon name="chevron-down"></icon></span>
+              </button>
+              <b-dropdown-item
+                :value="value"
+                aria-role="listitem"
+                v-for="value in ['small', 'medium', 'large']"
+                :key="value"
+              >
+                <div class="media">
+                  <span class="icon keep-size">
+                    <icon name="check" v-if="value == size"></icon>
+                  </span>
+                  <div class="media-content">
+                    <h3 class="is-capitalized">{{ value }}</h3>
+                  </div>
+                </div>
+              </b-dropdown-item>
+            </b-dropdown>
+          </div>
+          <div class="column">
+            Font size to use for logs
+          </div>
+        </div>
       </div>
     </section>
   </div>
@@ -97,7 +107,11 @@ export default {
   },
   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);
+    if (this.currentVersion !== "dev") {
+      this.hasUpdate = gt(releases[0].tag_name, this.currentVersion);
+    } else {
+      this.hasUpdate = true;
+    }
     this.nextRelease = releases[0];
   },
   metaInfo() {
@@ -112,29 +126,30 @@ export default {
   },
   computed: {
     ...mapState(["settings"]),
-    ...["search", "size", "smallerScrollbars", "showTimestamp", "showAllContainers"].reduce((map, name) => {
-      map[name] = {
-        get() {
-          return this.settings[name];
-        },
-        set(value) {
-          this.updateSetting({ [name]: value });
-        },
-      };
-      return map;
-    }, {}),
+    ...["search", "size", "smallerScrollbars", "showTimestamp", "showAllContainers", "lightTheme"].reduce(
+      (map, name) => {
+        map[name] = {
+          get() {
+            return this.settings[name];
+          },
+          set(value) {
+            this.updateSetting({ [name]: value });
+          },
+        };
+        return map;
+      },
+      {}
+    ),
   },
 };
 </script>
 <style lang="scss" scoped>
 .title {
-  color: #eee;
+  color: var(--title-color);
 }
 
 a.next-release {
   text-decoration: underline;
-  color: #00d1b2;
-
   &:hover {
     text-decoration: none;
   }
@@ -145,7 +160,7 @@ a.next-release {
 }
 
 .has-underline {
-  border-bottom: 1px solid #fff;
+  border-bottom: 1px solid var(--border-color);
   padding: 1em 0px;
   margin-bottom: 1em;
 }

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

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

assets/pages/index.js

@@ -0,0 +1,6 @@
+export { default as Index } from "./Index.vue";
+export { default as ContainerNotFound } from "./ContainerNotFound.vue";
+export { default as Show } from "./Show.vue";
+export { default as Container } from "./Container.vue";
+export { default as Settings } from "./Settings.vue";
+export { default as PageNotFound } from "./PageNotFound.vue";

assets/store/config.js

@@ -1,2 +1,9 @@
 const config = JSON.parse(document.querySelector("script#config__json").textContent);
+if (config.version == "{{ .Version }}") {
+  config.version = "dev";
+  config.base = "";
+} else {
+  config.version = config.version.replace(/^v/, "");
+}
+
 export default config;

assets/store/index.js

@@ -12,7 +12,7 @@ storage.set(DOZZLE_SETTINGS_KEY, { ...DEFAULT_SETTINGS, ...storage.get(DOZZLE_SE
 
 const state = {
   containers: [],
-  activeContainers: [],
+  activeContainerIds: [],
   searchFilter: null,
   isMobile: mql.matches,
   settings: storage.get(DOZZLE_SETTINGS_KEY),
@@ -20,13 +20,26 @@ const state = {
 
 const mutations = {
   SET_CONTAINERS(state, containers) {
+    const containersById = state.containers.reduce((map, obj) => {
+      map[obj.id] = obj;
+      return map;
+    }, {});
+
+    containers.forEach(
+      (container) =>
+        (container.stat =
+          containersById[container.id] && containersById[container.id].stat
+            ? containersById[container.id].stat
+            : { memoryUsage: 0, cpu: 0 })
+    );
+
     state.containers = containers;
   },
-  ADD_ACTIVE_CONTAINERS(state, container) {
-    state.activeContainers.push(container);
+  ADD_ACTIVE_CONTAINERS(state, { id }) {
+    state.activeContainerIds.push(id);
   },
-  REMOVE_ACTIVE_CONTAINER(state, container) {
-    state.activeContainers.splice(state.activeContainers.indexOf(container), 1);
+  REMOVE_ACTIVE_CONTAINER(state, { id }) {
+    state.activeContainerIds.splice(state.activeContainerIds.indexOf(id), 1);
   },
   SET_SEARCH(state, filter) {
     state.searchFilter = filter;
@@ -38,6 +51,9 @@ const mutations = {
     state.settings = { ...state.settings, ...newValues };
     storage.set(DOZZLE_SETTINGS_KEY, state.settings);
   },
+  UPDATE_STAT(state, { container, stat }) {
+    Vue.set(container, "stat", stat);
+  },
 };
 
 const actions = {
@@ -50,21 +66,18 @@ const actions = {
   SET_SEARCH({ commit }, filter) {
     commit("SET_SEARCH", filter);
   },
-  async FETCH_CONTAINERS({ commit }) {
-    const containers = await (await fetch(`${config.base}/api/containers.json`)).json();
-    commit("SET_CONTAINERS", containers);
-  },
   UPDATE_SETTING({ commit }, setting) {
     commit("UPDATE_SETTINGS", setting);
   },
+  UPDATE_STATS({ commit, getters }, stat) {
+    const { allContainersById } = getters;
+    const container = allContainersById[stat.id];
+    if (container) {
+      commit("UPDATE_STAT", { container, stat });
+    }
+  },
 };
 const getters = {
-  activeContainersById({ activeContainers }) {
-    return activeContainers.reduce((map, obj) => {
-      map[obj.id] = obj;
-      return map;
-    }, {});
-  },
   allContainersById({ containers }) {
     return containers.reduce((map, obj) => {
       map[obj.id] = obj;
@@ -75,10 +88,15 @@ const getters = {
     const filter = showAllContainers ? () => true : (c) => c.state === "running";
     return containers.filter(filter);
   },
+  activeContainers({ activeContainerIds }, { allContainersById }) {
+    return activeContainerIds.map((id) => allContainersById[id]);
+  },
 };
 
 const es = new EventSource(`${config.base}/api/events/stream`);
-es.addEventListener("containers-changed", (e) => setTimeout(() => store.dispatch("FETCH_CONTAINERS"), 1000), false);
+es.addEventListener("containers-changed", (e) => store.commit("SET_CONTAINERS", JSON.parse(e.data)), false);
+es.addEventListener("container-stat", (e) => store.dispatch("UPDATE_STATS", JSON.parse(e.data)), false);
+
 mql.addListener((e) => store.commit("SET_MOBILE_WIDTH", e.matches));
 
 const store = new Vuex.Store({

assets/store/settings.js

@@ -6,4 +6,5 @@ export const DEFAULT_SETTINGS = {
   smallerScrollbars: false,
   showTimestamp: true,
   showAllContainers: false,
+  lightTheme: false
 };

assets/styles.scss

@@ -1,7 +1,29 @@
 @charset "utf-8";
+@import "~bulma/sass/utilities/initial-variables.sass";
 
-$menu-item-active-background-color: hsl(171, 100%, 41%);
-$menu-item-color: hsl(0, 6%, 87%);
+$body-family: "Roboto", sans-serif;
+$body-background-color: var(--body-background-color);
+
+$scheme-main: var(--scheme-main);
+$scheme-main-bis: var(--scheme-main-bis);
+$scheme-main-ter: var(--scheme-main-ter);
+
+$border: var(--border-color);
+$border-hover: var(--border-hover-color);
+
+$menu-item-active-background-color: var(--menu-item-active-background-color);
+$menu-item-color: var(--menu-item-color);
+$menu-item-hover-background-color: var(--menu-item-hover-background-color);
+$menu-item-hover-color: var(--menu-item-hover-color);
+
+$text-strong: var(--text-strong-color);
+$text: var(--text-color);
+
+$panel-heading-background-color: var(--panel-heading-background-color);
+$panel-heading-color: var(--panel-heading-color);
+
+$link: $turquoise;
+$link-active: $grey-dark;
 
 @import "~bulma";
 @import "../node_modules/splitpanes/dist/splitpanes.css";
@@ -9,14 +31,56 @@ $menu-item-color: hsl(0, 6%, 87%);
 @import "~buefy/src/scss/components/_dropdown";
 @import "~buefy/src/scss/components/_switch";
 
-body {
-  font-family: "Roboto", sans-serif;
-  color: #ddd;
-  background-color: #111;
+html {
+  --scheme-main: #{$black};
+  --scheme-main-bis: #{$black-bis};
+  --scheme-main-ter: #{$black-ter};
+
+  --border-color: #{$grey-darker};
+  --border-hover-color: var(--secondary-color);
+  --logo-color: var(--secondary-color);
+
+  --primary-color: #{$turquoise};
+  --secondary-color: #{$yellow};
+
+  --body-background-color: #{$black-bis};
+
+  --menu-item-active-background-color: var(--primary-color);
+  --menu-item-color: hsl(0, 6%, 87%);
+  --menu-item-hover-background-color: #{$white-ter};
+  --menu-item-hover-color: #{$black-ter};
+
+  --panel-heading-background-color: var(--secondary-color);
+  --panel-heading-color: var(--scheme-main-bis);
+
+  --text-strong-color: #{$grey-lightest};
+  --text-color: #{$grey-lighter};
 }
 
-h1.title {
-  font-family: "Gafata", sans-serif;
+[data-theme="light"] {
+  --scheme-main: #{$white};
+  --scheme-main-bis: #{$white-bis};
+  --scheme-main-ter: #{$white-ter};
+
+  --border-color: #{$grey-lighter};
+  --border-hover-color: var(--secondary-color);
+  --logo-color: #{$grey-darker};
+
+  --primary-color: #{$turquoise};
+  --secondary-color: #d8f0ca;
+
+  --body-background-color: #{$white-bis};
+  --body-color: #{$grey-darker};
+
+  --menu-item-color: #{$grey-dark};
+  --menu-item-hover-background-color: #eee8e7;
+  --menu-item-hover-color: #{black-ter};
+
+  --panel-heading-background-color: var(--secondary-color);
+  --panel-heading-color: var(--text-strong-color);
+
+  --text-strong-color: #{$grey-dark};
+  --text-color: #{$grey-darker};
 }
 
 html {
@@ -60,7 +124,7 @@ html.has-custom-scrollbars {
   color: #fff;
   border-color: transparent;
   &:hover {
-    border-color: rgb(255, 221, 87) !important;
+    border-color: var(--border-hover-color) !important;
     background: rgba(0, 0, 0, 0.8) !important;
     color: #fff !important;
   }
@@ -71,3 +135,13 @@ html.has-custom-scrollbars {
     border-color: transparent;
   }
 }
+
+.splitpanes__pane {
+  overflow: unset;
+}
+
+.is-ellipsis {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}

docker/client.go

@@ -5,6 +5,7 @@ import (
 	"bytes"
 	"context"
 	"encoding/binary"
+	"encoding/json"
 	"fmt"
 	"io"
 	"sort"
@@ -29,6 +30,7 @@ type dockerProxy interface {
 	ContainerLogs(context.Context, string, types.ContainerLogsOptions) (io.ReadCloser, error)
 	Events(context.Context, types.EventsOptions) (<-chan events.Message, <-chan error)
 	ContainerInspect(ctx context.Context, containerID string) (types.ContainerJSON, error)
+	ContainerStats(ctx context.Context, containerID string, stream bool) (types.ContainerStats, error)
 }
 
 // Client is a proxy around the docker client
@@ -38,6 +40,7 @@ type Client interface {
 	ContainerLogs(context.Context, string, int, string) (<-chan string, <-chan error)
 	Events(context.Context) (<-chan events.Message, <-chan error)
 	ContainerLogsBetweenDates(context.Context, string, time.Time, time.Time) ([]string, error)
+	ContainerStats(context.Context, string, chan<- ContainerStat) error
 }
 
 // NewClient creates a new instance of Client
@@ -95,9 +98,8 @@ func (d *dockerClient) ListContainers() ([]Container, error) {
 		return nil, err
 	}
 
-	var containers []Container
+	var containers = make([]Container, 0, len(list))
 	for _, c := range list {
-
 		container := Container{
 			ID:      c.ID[:12],
 			Names:   c.Names,
@@ -116,10 +118,6 @@ func (d *dockerClient) ListContainers() ([]Container, error) {
 		return strings.ToLower(containers[i].Name) < strings.ToLower(containers[j].Name)
 	})
 
-	if containers == nil {
-		containers = []Container{}
-	}
-
 	return containers, nil
 }
 
@@ -151,6 +149,48 @@ func logReader(reader io.ReadCloser, tty bool) func() (string, error) {
 	}
 }
 
+func (d *dockerClient) ContainerStats(ctx context.Context, id string, stats chan<- ContainerStat) error {
+	response, err := d.cli.ContainerStats(ctx, id, true)
+
+	if err != nil {
+		return err
+	}
+
+	go func() {
+		defer response.Body.Close()
+		decoder := json.NewDecoder(response.Body)
+		var v *types.StatsJSON
+		for {
+			if err := decoder.Decode(&v); err != nil {
+				if err == context.Canceled || err == io.EOF {
+					log.Debugf("stopping stats streaming for container %s", id)
+					break
+				}
+				log.Errorf("decoder for stats api returned an unknown error %v", err)
+			}
+
+			var (
+				cpuDelta    = float64(v.CPUStats.CPUUsage.TotalUsage) - float64(v.PreCPUStats.CPUUsage.TotalUsage)
+				systemDelta = float64(v.CPUStats.SystemUsage) - float64(v.PreCPUStats.SystemUsage)
+				cpuPercent  = int64((cpuDelta / systemDelta) * float64(len(v.CPUStats.CPUUsage.PercpuUsage)) * 100)
+				memUsage    = int64(v.MemoryStats.Usage - v.MemoryStats.Stats["cache"])
+				memPercent  = int64(float64(memUsage) / float64(v.MemoryStats.Limit) * 100)
+			)
+
+			if cpuPercent > 0 || memUsage > 0 {
+				stats <- ContainerStat{
+					ID:            id,
+					CPUPercent:    cpuPercent,
+					MemoryPercent: memPercent,
+					MemoryUsage:   memUsage,
+				}
+			}
+		}
+	}()
+
+	return nil
+}
+
 func (d *dockerClient) ContainerLogs(ctx context.Context, id string, tailSize int, since string) (<-chan string, <-chan error) {
 	log.WithField("id", id).WithField("since", since).Debug("Streaming logs for container")
 

docker/client_test.go

@@ -40,6 +40,7 @@ func (m *mockedProxy) ContainerLogs(ctx context.Context, id string, options type
 	}
 	return reader, args.Error(1)
 }
+
 func (m *mockedProxy) ContainerInspect(ctx context.Context, containerID string) (types.ContainerJSON, error) {
 	args := m.Called(ctx, containerID)
 	json, ok := args.Get(0).(types.ContainerJSON)
@@ -50,6 +51,10 @@ func (m *mockedProxy) ContainerInspect(ctx context.Context, containerID string)
 	return json, args.Error(1)
 }
 
+func (m *mockedProxy) ContainerStats(ctx context.Context, containerID string, stream bool) (types.ContainerStats, error) {	
+	return types.ContainerStats{}, nil
+}
+
 func Test_dockerClient_ListContainers_null(t *testing.T) {
 	proxy := new(mockedProxy)
 	proxy.On("ContainerList", mock.Anything, mock.Anything).Return(nil, nil)

docker/types.go

@@ -12,3 +12,11 @@ type Container struct {
 	State   string   `json:"state"`
 	Status  string   `json:"status"`
 }
+
+// ContainerStat represent stats instant for a container
+type ContainerStat struct {
+	ID            string `json:"id"`
+	CPUPercent    int64  `json:"cpu"`
+	MemoryPercent int64  `json:"memory"`
+	MemoryUsage   int64  `json:"memoryUsage"`
+}

go.mod

@@ -14,40 +14,41 @@ require (
 	github.com/Azure/go-ansiterm v0.0.0-20170929234023-d6e3b3328b78 // indirect
 	github.com/Microsoft/go-winio v0.4.14 // indirect
 	github.com/beme/abide v0.0.0-20190723115211-635a09831760
-	github.com/containerd/containerd v1.3.3 // indirect
+	github.com/containerd/containerd v1.4.0 // 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/fsnotify/fsnotify v1.4.9 // indirect
 	github.com/gobuffalo/envy v1.9.0 // indirect
 	github.com/gobuffalo/packd v1.0.0 // indirect
 	github.com/gobuffalo/packr v1.30.1
 	github.com/gogo/protobuf v1.3.1 // indirect
-	github.com/golang/protobuf v1.3.4 // indirect
-	github.com/google/go-cmp v0.3.1 // indirect
-	github.com/gorilla/mux v1.7.4
-	github.com/magiconair/properties v1.8.1
+	github.com/golang/protobuf v1.4.2 // indirect
+	github.com/gorilla/mux v1.8.0
+	github.com/magiconair/properties v1.8.2
+	github.com/mitchellh/mapstructure v1.3.3 // indirect
 	github.com/morikuni/aec v0.0.0-20170113033406-39771216ff4c // indirect
-	github.com/opencontainers/go-digest v1.0.0-rc1 // indirect
+	github.com/opencontainers/go-digest v1.0.0 // indirect
 	github.com/opencontainers/image-spec v1.0.1 // indirect
-	github.com/pelletier/go-toml v1.6.0 // indirect
+	github.com/pelletier/go-toml v1.8.0 // indirect
 	github.com/pkg/errors v0.9.1 // indirect
-	github.com/rogpeppe/go-internal v1.5.2 // indirect
+	github.com/rogpeppe/go-internal v1.6.2 // indirect
 	github.com/sergi/go-diff v1.0.0 // indirect
 	github.com/sirupsen/logrus v1.6.0
-	github.com/spf13/afero v1.2.2 // indirect
+	github.com/spf13/afero v1.3.5 // indirect
 	github.com/spf13/cast v1.3.1 // indirect
 	github.com/spf13/jwalterweatherman v1.1.0 // indirect
 	github.com/spf13/pflag v1.0.5
-	github.com/spf13/viper v1.7.0
+	github.com/spf13/viper v1.7.1
 	github.com/stretchr/objx v0.2.0 // indirect
-	github.com/stretchr/testify v1.6.0
-	golang.org/x/net v0.0.0-20200226121028-0de0cce0169b // indirect
-	golang.org/x/sys v0.0.0-20200223170610-d5e6a3e2c0ae // 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
+	github.com/stretchr/testify v1.6.1
+	golang.org/x/net v0.0.0-20200904194848-62affa334b73 // indirect
+	golang.org/x/sys v0.0.0-20200905004654-be1d3432aa8f // indirect
+	google.golang.org/genproto v0.0.0-20200904004341-0bd0a958aa1d // indirect
+	google.golang.org/grpc v1.31.1
+	google.golang.org/protobuf v1.25.0 // indirect
+	gopkg.in/ini.v1 v1.61.0 // indirect
 	gotest.tools v2.2.0+incompatible // indirect
 )
 

go.sum

@@ -45,8 +45,11 @@ github.com/bugsnag/panicwrap v0.0.0-20151223152923-e2c28503fcd0/go.mod h1:D/8v3k
 github.com/census-instrumentation/opencensus-proto v0.2.1/go.mod h1:f6KPmirojxKA12rnyqOA5BBL4O983OfeGPqjHWSTneU=
 github.com/cespare/xxhash v1.1.0/go.mod h1:XrSqR1VqqWfGrhpAt58auRo0WTKS1nRRg3ghfAqPWnc=
 github.com/client9/misspell v0.3.4/go.mod h1:qj6jICC3Q7zFZvVWo7KLAzC3yx5G7kyvSDkc90ppPyw=
+github.com/cncf/udpa/go v0.0.0-20191209042840-269d4d468f6f/go.mod h1:M8M6+tZqaGXZJjfX53e64911xZQV5JYwmTeXPW+k8Sc=
 github.com/containerd/containerd v1.3.3 h1:LoIzb5y9x5l8VKAlyrbusNPXqBY0+kviRloxFUMFwKc=
 github.com/containerd/containerd v1.3.3/go.mod h1:bC6axHOhabU15QhwfG7w5PipXdVtMXFTttgp+kVtyUA=
+github.com/containerd/containerd v1.4.0 h1:aWJB3lbDEaOxg1mkTBAINY2a+NsoKbAeRYefJPPRY+o=
+github.com/containerd/containerd v1.4.0/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=
@@ -74,11 +77,15 @@ 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.0/go.mod h1:YTl/9mNaCwkRvm6d1a2C3ymFceY/DCBVvsKhRF0iEA4=
 github.com/envoyproxy/go-control-plane v0.9.1-0.20191026205805-5f8ba28d4473/go.mod h1:YTl/9mNaCwkRvm6d1a2C3ymFceY/DCBVvsKhRF0iEA4=
+github.com/envoyproxy/go-control-plane v0.9.4/go.mod h1:6rpuAdCZL397s3pYoYcLgu1mIlRU8Am5FuJP05cCM98=
 github.com/envoyproxy/protoc-gen-validate v0.1.0/go.mod h1:iSmxcyjqTsJpI2R4NaDN7+kN2VEUnK/pcBlmesArF7c=
 github.com/fatih/color v1.7.0/go.mod h1:Zm6kSWBoL9eyXnKyktHP6abPY2pDugNf5KwzbycvMj4=
 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/fsnotify/fsnotify v1.4.9 h1:hsms1Qyu0jgnwNXIxa+/V/PDsU6CfLf6CNO8H7IWoS4=
+github.com/fsnotify/fsnotify v1.4.9/go.mod h1:znqG4EE+3YCdAaPaxE2ZRY/06pZUdp0tY4IgpuI1SZQ=
 github.com/garyburd/redigo v0.0.0-20150301180006-535138d7bcd7/go.mod h1:NR3MbYisc3/PwhQ00EMzDiPmrwpPxAn5GI05/YaO1SY=
 github.com/ghodss/yaml v1.0.0/go.mod h1:4dBDuWmgqj2HViK6kFavaiC9ZROes6MMH2rRYeMEF04=
 github.com/go-gl/glfw v0.0.0-20190409004039-e6da0acd62b1/go.mod h1:vR7hzQXu2zJy9AVAgeJqvqgH9Q5CA+iKCZ2gyEVpxRU=
@@ -119,12 +126,22 @@ github.com/golang/protobuf v1.3.2/go.mod h1:6lQm79b+lXiMfvg/cZm0SGofjICqVBUtrP5y
 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/golang/protobuf v1.4.0-rc.1/go.mod h1:ceaxUfeHdC40wWswd/P6IGgMaK3YpKi5j83Wpe3EHw8=
+github.com/golang/protobuf v1.4.0-rc.1.0.20200221234624-67d41d38c208/go.mod h1:xKAWHe0F5eneWXFV3EuXVDTCmh+JuBKY0li0aMyXATA=
+github.com/golang/protobuf v1.4.0-rc.2/go.mod h1:LlEzMj4AhA7rCAGe4KMBDvJI+AwstrUpVNzEA03Pprs=
+github.com/golang/protobuf v1.4.0-rc.4.0.20200313231945-b860323f09d0/go.mod h1:WU3c8KckQ9AFe+yFwt9sWVRKCVIyN9cPHBJSNnbL67w=
+github.com/golang/protobuf v1.4.0/go.mod h1:jodUvKwWbYaEsadDk5Fwe5c77LiNKVO9IDvqG2KuDX0=
+github.com/golang/protobuf v1.4.1/go.mod h1:U8fpvMrcmy5pZrNK1lt4xCsGvpyWQ/VVv6QDs8UjoX8=
+github.com/golang/protobuf v1.4.2 h1:+Z5KGCizgyZCbGh1KZqA0fcLLkwbsjIzS4aV2v7wJX0=
+github.com/golang/protobuf v1.4.2/go.mod h1:oDoupMAO8OvCJWAcko0GGGIgR6R6ocIYbsSw735rRwI=
 github.com/google/btree v0.0.0-20180813153112-4030bb1f1f0c/go.mod h1:lNA+9X1NB3Zf8V7Ke586lFgjr2dZNuvo3lPJSGZ5JPQ=
 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.0/go.mod h1:8QqcDgzrUqlUb/G2PQTWiueGozuR1884gddMywk6iLU=
 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/go-cmp v0.4.0/go.mod h1:v8dTdLbMG2kIc/vJvl+f65V22dbkXbowE6jgT/gNBxE=
+github.com/google/go-cmp v0.5.0/go.mod h1:v8dTdLbMG2kIc/vJvl+f65V22dbkXbowE6jgT/gNBxE=
 github.com/google/gofuzz v1.0.0/go.mod h1:dBl0BpW6vV/+mYPU4Po3pmUjxk6FQPldtuIdl/M65Eg=
 github.com/google/martian v2.1.0+incompatible/go.mod h1:9I4somxYTbIHy5NJKHRl3wXiIaQGbYVAs8BPL6v8lEs=
 github.com/google/pprof v0.0.0-20181206194817-3ea8567a2e57/go.mod h1:zfwlbNMJ+OItoe0UupaVj+oy1omPYYDuagoSzA8v9mc=
@@ -138,6 +155,8 @@ github.com/gorilla/handlers v0.0.0-20150720190736-60c7bfde3e33/go.mod h1:Qkdc/uu
 github.com/gorilla/mux v1.7.2/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/mux v1.8.0 h1:i40aqfkR1h2SlN9hojwV5ZA91wcXFOvkdNIeFDP5koI=
+github.com/gorilla/mux v1.8.0/go.mod h1:DVbg23sWSpFRCP0SfiEN6jmj59UnW/n46BH5rLB71So=
 github.com/gorilla/websocket v1.4.0/go.mod h1:E7qHFY5m1UJ88s3WnNqhKjPHQ0heANvMoAMk2YaljkQ=
 github.com/gorilla/websocket v1.4.2/go.mod h1:YR8l580nyteQvAITg2hZ9XVh4b55+EU/adAjf1fMHhE=
 github.com/grpc-ecosystem/go-grpc-middleware v1.0.0/go.mod h1:FiyG127CGDf3tlThmgyCl78X/SZQqEOJBCDaAfeWzPs=
@@ -185,6 +204,7 @@ github.com/konsorten/go-windows-terminal-sequences v1.0.2 h1:DB17ag19krx9CFsz4o3
 github.com/konsorten/go-windows-terminal-sequences v1.0.2/go.mod h1:T0+1ngSBFLxvqU3pZ+m/2kptfBszLMUkC4ZK/EgS/cQ=
 github.com/konsorten/go-windows-terminal-sequences v1.0.3 h1:CE8S1cTafDpPvMhIxNJKvHsGVBgn1xWYf1NbHQhywc8=
 github.com/konsorten/go-windows-terminal-sequences v1.0.3/go.mod h1:T0+1ngSBFLxvqU3pZ+m/2kptfBszLMUkC4ZK/EgS/cQ=
+github.com/kr/fs v0.1.0/go.mod h1:FFnZGqtBN9Gxj7eW1uZ42v5BccTP0vu6NEaFoC2HwRg=
 github.com/kr/logfmt v0.0.0-20140226030751-b84e30acd515/go.mod h1:+0opPa2QZZtGFBFZlji/RkVcI2GknAs/DXo4wKdlNEc=
 github.com/kr/pretty v0.1.0 h1:L/CwN0zerZDmRFUapSPitk6f+Q3+0za1rQkzVuMiMFI=
 github.com/kr/pretty v0.1.0/go.mod h1:dAy3ld7l9f0ibDNOQOHHMYYIIbhfbHSm3C4ZsoJORNo=
@@ -194,6 +214,8 @@ github.com/kr/text v0.1.0/go.mod h1:4Jbv+DJW3UT/LiOwJeYQe1efqtUx/iVham/4vfdArNI=
 github.com/magiconair/properties v1.8.0/go.mod h1:PppfXfuXeibc/6YijjN8zIbojt8czPbwD3XqdrwzmxQ=
 github.com/magiconair/properties v1.8.1 h1:ZC2Vc7/ZFkGmsVC9KvOjumD+G5lXy2RtTKyzRKO2BQ4=
 github.com/magiconair/properties v1.8.1/go.mod h1:PppfXfuXeibc/6YijjN8zIbojt8czPbwD3XqdrwzmxQ=
+github.com/magiconair/properties v1.8.2 h1:znVR8Q4g7/WlcvsxLBRWvo+vtFJUAbDn3w+Yak2xVMI=
+github.com/magiconair/properties v1.8.2/go.mod h1:y3VJvCyxH9uVvJTWEGAELF3aiYNyPKd5NZ3oSwXrF60=
 github.com/marstr/guid v1.1.0/go.mod h1:74gB1z2wpxxInTG6yaqA7KrtM0NZ+RbrcqDvYHefzho=
 github.com/mattn/go-colorable v0.0.9/go.mod h1:9vuHe8Xs5qXnSaW/c/ABM9alt+Vo+STaOChaDxuIBZU=
 github.com/mattn/go-isatty v0.0.3/go.mod h1:M+lRXTBqGeGNdLjl/ufCoiOlB5xdOkqRJdNxMWT7Zi4=
@@ -208,6 +230,8 @@ github.com/mitchellh/iochan v1.0.0/go.mod h1:JwYml1nuB7xOzsp52dPpHFffvOCDupsG0Qu
 github.com/mitchellh/mapstructure v0.0.0-20160808181253-ca63d7c062ee/go.mod h1:FVVH3fgwuzCH5S8UJGiWEs2h04kUh9fWfEaFds41c1Y=
 github.com/mitchellh/mapstructure v1.1.2 h1:fmNYVwqnSfB9mZU6OS2O6GsXM+wcskZDuKQzvN1EDeE=
 github.com/mitchellh/mapstructure v1.1.2/go.mod h1:FVVH3fgwuzCH5S8UJGiWEs2h04kUh9fWfEaFds41c1Y=
+github.com/mitchellh/mapstructure v1.3.3 h1:SzB1nHZ2Xi+17FP0zVQBHIZqvwRN9408fJO8h+eeNA8=
+github.com/mitchellh/mapstructure v1.3.3/go.mod h1:bFUtVrKA4DC2yAKiSyO/QUcy7e+RRV2QTWOzhPopBRo=
 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/concurrent v0.0.0-20180306012644-bacd9c7ef1dd/go.mod h1:6dJC0mAP4ikYIbvyc7fijjWJddQyLn8Ig3JB5CqoB9Q=
@@ -221,6 +245,8 @@ github.com/oklog/ulid v1.3.1/go.mod h1:CirwcVhetQ6Lv90oh/F+FBtV6XMibvdAFo93nm5qn
 github.com/opencontainers/go-digest v0.0.0-20170106003457-a6d0ee40d420/go.mod h1:cMLVZDEM3+U2I4VmLI6N8jQYUd2OVphdqWwCJHrFt2s=
 github.com/opencontainers/go-digest v1.0.0-rc1 h1:WzifXhOVOEOuFYOJAW6aQqW0TooG2iki3E3Ii+WN7gQ=
 github.com/opencontainers/go-digest v1.0.0-rc1/go.mod h1:cMLVZDEM3+U2I4VmLI6N8jQYUd2OVphdqWwCJHrFt2s=
+github.com/opencontainers/go-digest v1.0.0 h1:apOUWs51W5PlhuyGyz9FCeeBIOUDA/6nW8Oi/yOhh5U=
+github.com/opencontainers/go-digest v1.0.0/go.mod h1:0JzlMkj0TRzQZfJkVvzbP0HBR3IKzErnv2BNG4W4MAM=
 github.com/opencontainers/image-spec v1.0.0/go.mod h1:BtxoFyWECRxE4U/7sNtV5W15zMzWCbyJoFRP3s7yZA0=
 github.com/opencontainers/image-spec v1.0.1 h1:JMemWkRwHx4Zj+fVxWoMCFm/8sYGGrUVojFA6h/TRcI=
 github.com/opencontainers/image-spec v1.0.1/go.mod h1:BtxoFyWECRxE4U/7sNtV5W15zMzWCbyJoFRP3s7yZA0=
@@ -229,12 +255,15 @@ github.com/pelletier/go-toml v1.2.0 h1:T5zMGML61Wp+FlcbWjRDT7yAxhJNAiPPLOFECq181
 github.com/pelletier/go-toml v1.2.0/go.mod h1:5z9KED0ma1S8pY6P1sdut58dfprrGBbd/94hg7ilaic=
 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/pelletier/go-toml v1.8.0 h1:Keo9qb7iRJs2voHvunFtuuYFsbWeOBh8/P9v/kVMFtw=
+github.com/pelletier/go-toml v1.8.0/go.mod h1:D6yutnOGMveHEPV7VQOuvI/gXY61bv+9bAOTRnLElKs=
 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/pkg/sftp v1.10.1/go.mod h1:lYOWFsE0bwd1+KfKJaKeuokY15vzFx25BLbzYYoAxZI=
 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/posener/complete v1.1.1/go.mod h1:em0nMJCgc9GFtwrmVmEMR/ZL6WyhyjMBndrE9hABlRI=
@@ -260,6 +289,8 @@ github.com/rogpeppe/go-internal v1.3.2 h1:XU784Pr0wdahMY2bYcyK6N1KuaRAdLtqD4qd8D
 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/rogpeppe/go-internal v1.6.2 h1:aIihoIOHCiLZHxyoNQ+ABL4NKhFTgKLBdMLyEAh98m0=
+github.com/rogpeppe/go-internal v1.6.2/go.mod h1:xXDCJY+GAPziupqXw64V24skbSoqbTEfhy4qGm1nDQc=
 github.com/russross/blackfriday v1.5.2/go.mod h1:JO/DiYxRf+HjHt06OyowR9PTA263kcR/rfWxYHBV53g=
 github.com/ryanuber/columnize v0.0.0-20160712163229-9b3edd62028f/go.mod h1:sm1tb6uqfes/u+d4ooFouqFdy9/2g9QGwK3SQygK0Ts=
 github.com/satori/go.uuid v1.2.0/go.mod h1:dA0hQrYB0VpLJoorglMZABFdXlWrHn1NEOzdhQKdks0=
@@ -285,6 +316,8 @@ github.com/spf13/afero v1.1.2 h1:m8/z1t7/fwjysjQRYbP0RD+bUIF/8tJwPdEZsI83ACI=
 github.com/spf13/afero v1.1.2/go.mod h1:j4pytiNVoe2o6bmDsKpLACNPDBIoEAkihy7loJ1B0CQ=
 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/afero v1.3.5 h1:AWZ/w4lcfxuh52NVL78p9Eh8j6r1mCTEGSRFBJyIHAE=
+github.com/spf13/afero v1.3.5/go.mod h1:Ai8FlHk4v/PARR026UzYexafAt9roJ7LcLMAmO6Z93I=
 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=
@@ -305,6 +338,8 @@ 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/spf13/viper v1.7.0 h1:xVKxvI7ouOI5I+U9s2eeiUfMaWBVoXA3AWskkrqK0VM=
 github.com/spf13/viper v1.7.0/go.mod h1:8WkrPz2fc9jxqZNCJI/76HCieCp4Q8HaLFoCha5qpdg=
+github.com/spf13/viper v1.7.1 h1:pM5oEahlgWv/WnHXpgbKz7iLIxRf65tye2Ci+XFK5sk=
+github.com/spf13/viper v1.7.1/go.mod h1:8WkrPz2fc9jxqZNCJI/76HCieCp4Q8HaLFoCha5qpdg=
 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=
@@ -318,6 +353,8 @@ github.com/stretchr/testify v1.5.1 h1:nOGnQDM7FYENwehXlg/kFVnos3rEvtKTjRvOWSzb6H
 github.com/stretchr/testify v1.5.1/go.mod h1:5W2xD1RspED5o8YsWQXVCued0rvSQ+mT+I5cxcmMvtA=
 github.com/stretchr/testify v1.6.0 h1:jlIyCplCJFULU/01vCkhKuTyc3OorI3bJFuw6obfgho=
 github.com/stretchr/testify v1.6.0/go.mod h1:6Fq8oRcR53rry900zMqJjRRixrwX3KX962/h/Wwjteg=
+github.com/stretchr/testify v1.6.1 h1:hDPOHmpOpP40lSULcqw7IrRb/u7w6RpDC9399XyoNd0=
+github.com/stretchr/testify v1.6.1/go.mod h1:6Fq8oRcR53rry900zMqJjRRixrwX3KX962/h/Wwjteg=
 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=
@@ -340,6 +377,8 @@ golang.org/x/crypto v0.0.0-20190308221718-c2843e01d9a2/go.mod h1:djNgcEr1/C05ACk
 golang.org/x/crypto v0.0.0-20190510104115-cbcb75029529/go.mod h1:yigFU9vqHzYiE8UmvKecakEJjdnWj3jj499lnFckfCI=
 golang.org/x/crypto v0.0.0-20190605123033-f99c8df09eb5/go.mod h1:yigFU9vqHzYiE8UmvKecakEJjdnWj3jj499lnFckfCI=
 golang.org/x/crypto v0.0.0-20190621222207-cc06ce4a13d4/go.mod h1:yigFU9vqHzYiE8UmvKecakEJjdnWj3jj499lnFckfCI=
+golang.org/x/crypto v0.0.0-20190820162420-60c769a6c586/go.mod h1:yigFU9vqHzYiE8UmvKecakEJjdnWj3jj499lnFckfCI=
+golang.org/x/crypto v0.0.0-20200622213623-75b288015ac9/go.mod h1:LzIPMQfyMNhhGPhUkYOs5KpL4U8rLKemX1yGLhDgUto=
 golang.org/x/exp v0.0.0-20190121172915-509febef88a4/go.mod h1:CJ0aWSM057203Lf6IL+f9T1iT9GByDxfZKAQTCR3kQA=
 golang.org/x/exp v0.0.0-20190306152737-a1d7652674e8/go.mod h1:CJ0aWSM057203Lf6IL+f9T1iT9GByDxfZKAQTCR3kQA=
 golang.org/x/exp v0.0.0-20190510132918-efd6b22b2522/go.mod h1:ZjyILWgesfNpC6sMxTJOJm9Kp84zZh5NQWvqDGG3Qr8=
@@ -378,6 +417,8 @@ golang.org/x/net v0.0.0-20190619014844-b5b0513f8c1b/go.mod h1:z5CRVTTTmAJ677TzLL
 golang.org/x/net v0.0.0-20190620200207-3b0461eec859/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/net v0.0.0-20200904194848-62affa334b73 h1:MXfv8rhZWmFeqX3GNZRsd6vOLoaCHjYEX3qkRo3YBUA=
+golang.org/x/net v0.0.0-20200904194848-62affa334b73/go.mod h1:/O7V0waA8r7cgGh81Ro3o1hOxt32SMVPicZroKQ2sZA=
 golang.org/x/oauth2 v0.0.0-20180821212333-d2e6202438be/go.mod h1:N/0e6XlmueqKjAGxoOufVs8QHGRruUQn6yWY3a++T0U=
 golang.org/x/oauth2 v0.0.0-20190226205417-e64efc72b421/go.mod h1:gOpvHmFTYa4IltrdGE7lF6nIHvwfUNPOp7c8zoXwtLw=
 golang.org/x/oauth2 v0.0.0-20190604053449-0f29369cfe45/go.mod h1:gOpvHmFTYa4IltrdGE7lF6nIHvwfUNPOp7c8zoXwtLw=
@@ -406,12 +447,18 @@ golang.org/x/sys v0.0.0-20190515120540-06a5c4944438/go.mod h1:h1NjWce9XRLGQEsW7w
 golang.org/x/sys v0.0.0-20190602015325-4c4f7f33c9ed/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
 golang.org/x/sys v0.0.0-20190606165138-5da285871e9c/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
 golang.org/x/sys v0.0.0-20190624142023-c5567b49c5d0/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
+golang.org/x/sys v0.0.0-20191005200804-aed5e4c7ecf9/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/sys v0.0.0-20200323222414-85ca7c5b95cd/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
+golang.org/x/sys v0.0.0-20200905004654-be1d3432aa8f h1:Fqb3ao1hUmOR3GkUOg/Y+BadLwykBIzs5q8Ez2SbHyc=
+golang.org/x/sys v0.0.0-20200905004654-be1d3432aa8f/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
 golang.org/x/text v0.3.0/go.mod h1:NqM8EUOU14njkJ3fqMW+pc6Ldnwhi/IjpwHt7yyuwOQ=
 golang.org/x/text v0.3.1-0.20180807135948-17ff2d5776d2/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=
+golang.org/x/text v0.3.3 h1:cokOdA+Jmi5PJGXLlLllQSgYigAEfHXJAERHVMaCc2k=
+golang.org/x/text v0.3.3/go.mod h1:5Zoc/QRtKVWzQhOtBMvqHzDpF6irO9z98xDceosuGiQ=
 golang.org/x/time v0.0.0-20181108054448-85acf8d2951c/go.mod h1:tRJNPiyCQ0inRvYxbN9jk5I+vvW/OXSQhTDSoE431IQ=
 golang.org/x/time v0.0.0-20190308202827-9d24e82272b4 h1:SvFZT6jyqRaOeXpc5h/JSfZenJ2O330aBsf7JfSUXmQ=
 golang.org/x/time v0.0.0-20190308202827-9d24e82272b4/go.mod h1:tRJNPiyCQ0inRvYxbN9jk5I+vvW/OXSQhTDSoE431IQ=
@@ -436,6 +483,7 @@ golang.org/x/tools v0.0.0-20190911174233-4f2ddba30aff/go.mod h1:b+2E5dAYhXwXZwtn
 golang.org/x/tools v0.0.0-20191012152004-8de300cfc20a/go.mod h1:b+2E5dAYhXwXZwtnZ6UAqBI28+e2cm9otk0dWdXHAEo=
 golang.org/x/tools v0.0.0-20191112195655-aa38f8e97acc/go.mod h1:b+2E5dAYhXwXZwtnZ6UAqBI28+e2cm9otk0dWdXHAEo=
 golang.org/x/xerrors v0.0.0-20190717185122-a985d3407aa7/go.mod h1:I/5z698sn9Ka8TeJc9MKroUUfqBBauWjQqLJ2OPfmY0=
+golang.org/x/xerrors v0.0.0-20191204190536-9bdfabe68543/go.mod h1:I/5z698sn9Ka8TeJc9MKroUUfqBBauWjQqLJ2OPfmY0=
 google.golang.org/api v0.0.0-20160322025152-9bf6e6e569ff/go.mod h1:4mhQ8q/RsB7i+udVvVy5NUi08OU8ZlA0gRVgrF7VFY0=
 google.golang.org/api v0.4.0/go.mod h1:8k5glujaEP+g9n7WNsDg8QP6cUVNI86fCNMcbazEtwE=
 google.golang.org/api v0.7.0/go.mod h1:WtwebWUNSVBH/HAw79HIFXZNqEvBhG+Ra+ax0hx3E3M=
@@ -459,6 +507,9 @@ google.golang.org/genproto v0.0.0-20190911173649-1774047e7e51/go.mod h1:IbNlFCBr
 google.golang.org/genproto v0.0.0-20191108220845-16a3f7862a1a/go.mod h1:n3cpQtvxv34hfy77yVDNjmbRyujviMdxYliBSkLhpCc=
 google.golang.org/genproto v0.0.0-20200226201735-46b91f19d98c h1:xFOdgVPpeowWAH0MJ5i0XMp+3yWiWamMtN/kx9xThIQ=
 google.golang.org/genproto v0.0.0-20200226201735-46b91f19d98c/go.mod h1:55QSHmfGQM9UVYDPBsyGGes0y52j32PQ3BqQfXhyH3c=
+google.golang.org/genproto v0.0.0-20200526211855-cb27e3aa2013/go.mod h1:NbSheEEYHJ7i3ixzK3sjbqSGDJWnxyFXZblF3eUsNvo=
+google.golang.org/genproto v0.0.0-20200904004341-0bd0a958aa1d h1:92D1fum1bJLKSdr11OJ+54YeCMCGYIygTA7R/YZxH5M=
+google.golang.org/genproto v0.0.0-20200904004341-0bd0a958aa1d/go.mod h1:FWY/as6DDZQgahTzZj3fqbO1CbirC29ZNUFHwi0/+no=
 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.20.1/go.mod h1:10oTOabMzJvdu6/UiuZezV6QK5dSlG84ov/aaiqXj38=
@@ -466,9 +517,24 @@ 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.21.1/go.mod h1:oYelfM1adQP15Ek0mdvEgi9Df8B9CZIaU1084ijfRaM=
 google.golang.org/grpc v1.23.0/go.mod h1:Y5yQAOtifL1yxbo5wqy6BxZv8vAUGQwXBOALyacEbxg=
+google.golang.org/grpc v1.25.1/go.mod h1:c3i+UQWmh7LiEpx4sFZnkU36qjEYZ0imhYfXVyQciAY=
 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=
+google.golang.org/grpc v1.31.1 h1:SfXqXS5hkufcdZ/mHtYCh53P2b+92WQq/DZcKLgsFRs=
+google.golang.org/grpc v1.31.1/go.mod h1:N36X2cJ7JwdamYAgDz+s+rVMFjt3numwzf/HckM8pak=
+google.golang.org/protobuf v0.0.0-20200109180630-ec00e32a8dfd/go.mod h1:DFci5gLYBciE7Vtevhsrf46CRTquxDuWsQurQQe4oz8=
+google.golang.org/protobuf v0.0.0-20200221191635-4d8936d0db64/go.mod h1:kwYJMbMJ01Woi6D6+Kah6886xMZcty6N08ah7+eCXa0=
+google.golang.org/protobuf v0.0.0-20200228230310-ab0ca4ff8a60/go.mod h1:cfTl7dwQJ+fmap5saPgwCLgHXTUD7jkjRqWcaiX5VyM=
+google.golang.org/protobuf v1.20.1-0.20200309200217-e05f789c0967/go.mod h1:A+miEFZTKqfCUM6K7xSMQL9OKL/b6hQv+e19PK+JZNE=
+google.golang.org/protobuf v1.21.0/go.mod h1:47Nbq4nVaFHyn7ilMalzfO3qCViNmqZ2kzikPIcrTAo=
+google.golang.org/protobuf v1.22.0/go.mod h1:EGpADcykh3NcUnDUJcl1+ZksZNG86OlYog2l/sGQquU=
+google.golang.org/protobuf v1.23.0/go.mod h1:EGpADcykh3NcUnDUJcl1+ZksZNG86OlYog2l/sGQquU=
+google.golang.org/protobuf v1.23.1-0.20200526195155-81db48ad09cc/go.mod h1:EGpADcykh3NcUnDUJcl1+ZksZNG86OlYog2l/sGQquU=
+google.golang.org/protobuf v1.24.0 h1:UhZDfRO8JRQru4/+LlLE0BRKGF8L+PICnvYZmx/fEGA=
+google.golang.org/protobuf v1.24.0/go.mod h1:r/3tXBNzIEhYS9I1OUVjXDlt8tc493IdKGjtUeSXeh4=
+google.golang.org/protobuf v1.25.0 h1:Ejskq+SyPohKW+1uil0JJMtmHCgJPJ/qWTxr8qp+R4c=
+google.golang.org/protobuf v1.25.0/go.mod h1:9JNX74DMeImyA3h4bdi1ymwjUzf21/xIlbajtzgsN7c=
 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=
@@ -479,6 +545,8 @@ 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/ini.v1 v1.61.0 h1:LBCdW4FmFYL4s/vDZD1RQYX7oAR6IjujCYgMdbHBR10=
+gopkg.in/ini.v1 v1.61.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=
@@ -488,6 +556,8 @@ 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=
+gopkg.in/yaml.v2 v2.3.0 h1:clyUAQHOM3G0M3f5vQj7LuJrETvjVot3Z5el9nffUtU=
+gopkg.in/yaml.v2 v2.3.0/go.mod h1:hI93XBmqTisBFMUTm0b8Fm+jr3Dg1NNxqwp+5A1VGuI=
 gopkg.in/yaml.v3 v3.0.0-20200313102051-9f266ea9e77c h1:dUUwHk2QECo/6vqA44rthZ8ie2QXMNeKRTHCNY2nXvo=
 gopkg.in/yaml.v3 v3.0.0-20200313102051-9f266ea9e77c/go.mod h1:K4uyk7z7BCEPqu6E+C64Yfv1cQ7kz7rIZviUmN+EgEM=
 gotest.tools v2.2.0+incompatible h1:VsBPFP1AI068pPrMxtb/S8Zkgf9xEmTLJjfM+P5UIEo=

integration/.dockerignore

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

integration/Dockerfile

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

integration/__tests__/custom_base.js

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

integration/__tests__/default.js

@@ -1,15 +1,17 @@
 const puppeteer = require("puppeteer");
+const { removeTimes } = require("../utils");
 const iPhoneX = puppeteer.devices["iPhone X"];
 const iPadLandscape = puppeteer.devices["iPad landscape"];
 
-const { BASE } = process.env;
+const { DEFAULT_URL: URL } = process.env;
 
 describe("home page", () => {
   beforeEach(async () => {
-    await page.goto(BASE, { waitUntil: "networkidle2" });
+    await page.goto(URL, { waitUntil: "networkidle2" });
   });
 
   it("renders full page on desktop", async () => {
+    await removeTimes(page);
     const image = await page.screenshot({ fullPage: true });
 
     expect(image).toMatchImageSnapshot();
@@ -17,6 +19,7 @@ describe("home page", () => {
 
   it("renders ipad viewport", async () => {
     await page.emulate(iPadLandscape);
+    await removeTimes(page);
     const image = await page.screenshot();
 
     expect(image).toMatchImageSnapshot();
@@ -24,6 +27,7 @@ describe("home page", () => {
 
   it("renders iphone viewport", async () => {
     await page.emulate(iPhoneX);
+    await removeTimes(page);
     const image = await page.screenshot();
 
     expect(image).toMatchImageSnapshot();
@@ -43,7 +47,7 @@ describe("home page", () => {
     });
 
     beforeEach(async () => {
-      await page.goto(BASE, { waitUntil: "networkidle2" });
+      await page.goto(URL, { waitUntil: "networkidle2" });
     });
 
     it("and shows one container with correct title", async () => {

integration/__tests__/light_mode.js

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

integration/docker-compose.test.yml

@@ -1,5 +1,14 @@
 version: "3.4"
 services:
+  custom_base:
+    container_name: custom_base
+    volumes:
+      - /var/run/docker.sock:/var/run/docker.sock
+    environment:
+      - DOZZLE_FILTER=name=custom_base
+      - DOZZLE_BASE=/foobarbase
+    build:
+      context: ..
   dozzle:
     container_name: dozzle
     volumes:
@@ -12,7 +21,11 @@ services:
     build:
       context: .
     command: yarn test
+    volumes:
+      - ./__tests__:/app/__tests__
     environment:
-      - BASE=http://dozzle:8080/
+      - DEFAULT_URL=http://dozzle:8080/
+      - CUSTOM_URL=http://custom_base:8080/foobarbase
     depends_on:
       - dozzle
+      - custom_base

integration/package.json

@@ -10,7 +10,7 @@
  "dependencies": {
   "jest": "^26.0.1",
   "jest-image-snapshot": "^4.0.0",
-  "puppeteer": "^3.0.4"
+  "puppeteer": "^5.0.0"
  },
  "jest": {
   "preset": "jest-puppeteer",

integration/utils.js

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

main_test.go

@@ -70,32 +70,8 @@ func (m *MockedClient) Events(ctx context.Context) (<-chan events.Message, <-cha
 	return channel, err
 }
 
-func Test_handler_listContainers_happy(t *testing.T) {
-	req, err := http.NewRequest("GET", "/api/containers.json", nil)
-	require.NoError(t, err, "NewRequest should not return an error.")
-
-	rr := httptest.NewRecorder()
-
-	mockedClient := new(MockedClient)
-	containers := []docker.Container{
-		{
-			ID:      "1234567890",
-			Status:  "status",
-			State:   "state",
-			Name:    "test",
-			Created: 0,
-			Command: "command",
-			ImageID: "image_id",
-			Image:   "image",
-		},
-	}
-	mockedClient.On("ListContainers", mock.Anything).Return(containers, nil)
-
-	h := handler{client: mockedClient}
-	handler := http.HandlerFunc(h.listContainers)
-	handler.ServeHTTP(rr, req)
-	abide.AssertHTTPResponse(t, t.Name(), rr.Result())
-	mockedClient.AssertExpectations(t)
+func (m *MockedClient) ContainerStats(context.Context, string, chan<- docker.ContainerStat) error {
+	return nil
 }
 
 func Test_handler_streamLogs_happy(t *testing.T) {
@@ -232,6 +208,7 @@ func Test_handler_streamEvents_happy(t *testing.T) {
 	messages := make(chan events.Message)
 	errChannel := make(chan error)
 	mockedClient.On("Events", mock.Anything).Return(messages, errChannel)
+	mockedClient.On("ListContainers").Return([]docker.Container{}, nil)
 
 	go func() {
 		messages <- events.Message{
@@ -258,6 +235,7 @@ func Test_handler_streamEvents_error(t *testing.T) {
 	messages := make(chan events.Message)
 	errChannel := make(chan error)
 	mockedClient.On("Events", mock.Anything).Return(messages, errChannel)
+	mockedClient.On("ListContainers").Return([]docker.Container{}, nil)
 
 	go func() {
 		errChannel <- errors.New("fake error")
@@ -281,6 +259,7 @@ func Test_handler_streamEvents_error_request(t *testing.T) {
 	messages := make(chan events.Message)
 	errChannel := make(chan error)
 	mockedClient.On("Events", mock.Anything).Return(messages, errChannel)
+	mockedClient.On("ListContainers").Return([]docker.Container{}, nil)
 
 	ctx, cancel := context.WithCancel(context.Background())
 	req = req.WithContext(ctx)

package.json

@@ -1,18 +1,20 @@
 {
  "name": "dozzle",
- "version": "1.26.1",
+ "version": "3.0.0",
  "description": "Realtime log viewer for docker containers. ",
  "scripts": {
   "prestart": "yarn clean",
-  "start": "npm-run-all -p watch:*",
+  "watch": "npm-run-all -p watch:*",
   "watch:assets": "webpack --mode=development --watch",
   "watch:server": "reflex -c .reflex",
+  "dev": "npm-run-all -p dev-server watch:server",
+  "dev-server": "webpack-dev-server --open",
   "prebuild": "yarn clean",
   "build": "yarn webpack --mode=production",
   "clean": "rm -rf static/ a_main-packr.go",
   "release": "release-it",
   "test": "TZ=UTC jest",
-  "integration": "docker-compose -f integration/docker-compose.test.yml up --build --force-recreate integration"
+  "integration": "docker-compose -f integration/docker-compose.test.yml up --build --force-recreate --exit-code-from integration"
  },
  "repository": {
   "type": "git",
@@ -26,52 +28,54 @@
  "homepage": "https://github.com/amir20/dozzle#readme",
  "dependencies": {
   "ansi-to-html": "^0.6.14",
-  "buefy": "^0.8.20",
-  "bulma": "^0.8.2",
-  "date-fns": "^2.14.0",
-  "dompurify": "^2.0.11",
+  "buefy": "^0.9.3",
+  "bulma": "^0.9.0",
+  "date-fns": "^2.16.1",
+  "dompurify": "^2.0.15",
   "hotkeys-js": "^3.8.1",
   "lodash.debounce": "^4.0.8",
+  "lodash.throttle": "^4.1.1",
   "semver": "^7.3.2",
   "splitpanes": "^2.2.1",
   "store": "^2.0.12",
-  "vue": "^2.6.11",
-  "vue-meta": "^2.3.4",
-  "vue-router": "^3.3.2",
-  "vuex": "^3.4.0"
+  "vue": "^2.6.12",
+  "vue-meta": "^2.4.0",
+  "vue-router": "^3.4.3",
+  "vuex": "^3.5.1"
  },
  "devDependencies": {
-  "@babel/core": "^7.10.2",
-  "@babel/plugin-transform-runtime": "^7.10.1",
-  "@vue/component-compiler-utils": "^3.1.2",
-  "@vue/test-utils": "^1.0.3",
+  "@babel/core": "^7.11.6",
+  "@babel/plugin-transform-runtime": "^7.11.5",
+  "@vue/component-compiler-utils": "^3.2.0",
+  "@vue/test-utils": "^1.0.5",
   "babel-core": "^7.0.0-bridge.0",
-  "babel-jest": "^26.0.1",
+  "babel-jest": "^26.3.0",
   "babel-preset-env": "^1.7.0",
-  "caniuse-lite": "^1.0.30001066",
-  "css-loader": "^3.5.3",
+  "caniuse-lite": "^1.0.30001124",
+  "css-loader": "^4.2.2",
   "eventsourcemock": "^2.0.0",
-  "html-webpack-plugin": "^4.3.0",
+  "html-webpack-plugin": "^4.4.1",
   "husky": "^4.2.5",
-  "jest": "^26.0.1",
+  "jest": "^26.4.2",
   "jest-serializer-vue": "^2.0.2",
-  "lint-staged": "^10.2.7",
-  "mini-css-extract-plugin": "^0.9.0",
+  "lint-staged": "^10.3.0",
+  "mini-css-extract-plugin": "^0.11.0",
   "npm-run-all": "^4.1.5",
   "postcss-cssnext": "^3.1.0",
   "postcss-import": "^12.0.1",
   "postcss-loader": "^3.0.0",
-  "prettier": "^2.0.5",
-  "release-it": "^13.6.1",
-  "sass": "^1.26.7",
-  "sass-loader": "^8.0.2",
+  "prettier": "^2.1.1",
+  "release-it": "^14.0.2",
+  "sass": "^1.26.10",
+  "sass-loader": "^10.0.2",
   "vue-hot-reload-api": "^2.3.4",
-  "vue-jest": "^3.0.5",
-  "vue-loader": "^15.9.2",
+  "vue-jest": "^3.0.6",
+  "vue-loader": "^15.9.3",
   "vue-style-loader": "^4.1.2",
-  "vue-template-compiler": "^2.6.11",
-  "webpack": "^4.43.0",
-  "webpack-cli": "^3.3.11",
+  "vue-template-compiler": "^2.6.12",
+  "webpack": "^4.44.1",
+  "webpack-cli": "^3.3.12",
+  "webpack-dev-server": "^3.11.0",
   "webpack-pwa-manifest": "^4.2.0"
  },
  "husky": {

routes.go

@@ -8,8 +8,10 @@ import (
 	"net/http"
 	"runtime"
 	"strings"
+	"sync"
 	"time"
 
+	"github.com/amir20/dozzle/docker"
 	"github.com/gorilla/mux"
 	log "github.com/sirupsen/logrus"
 )
@@ -23,7 +25,6 @@ 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)
@@ -69,19 +70,6 @@ func (h *handler) index(w http.ResponseWriter, req *http.Request) {
 	}
 }
 
-func (h *handler) listContainers(w http.ResponseWriter, r *http.Request) {
-	containers, err := h.client.ListContainers()
-	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")
 
@@ -126,6 +114,7 @@ Loop:
 		select {
 		case message, ok := <-messages:
 			if !ok {
+				fmt.Fprintf(w, "event: container-stopped\ndata: end of stream\n\n")
 				break Loop
 			}
 			fmt.Fprintf(w, "data: %s\n", message)
@@ -165,24 +154,65 @@ func (h *handler) streamEvents(w http.ResponseWriter, r *http.Request) {
 	w.Header().Set("X-Accel-Buffering", "no")
 
 	ctx := r.Context()
+
 	messages, err := h.client.Events(ctx)
+	stats := make(chan docker.ContainerStat)
+
+	runningContainers := map[string]docker.Container{}
+	if containers, err := h.client.ListContainers(); err == nil {
+		for _, c := range containers {
+			if c.State == "running" {
+				h.client.ContainerStats(ctx, c.ID, stats)
+				runningContainers[c.ID] = c
+			}
+		}
+	}
+
+	if err := sendContainersJSON(h.client, w); err != nil {
+		log.Errorf("Error while encoding containers to stream: %v", err)
+	}
+
+	f.Flush()
+
+	delayer := delayedFunc(time.Second)
 
 Loop:
 	for {
 		select {
+		case stat := <-stats:
+			bytes, _ := json.Marshal(stat)
+			_, err := fmt.Fprintf(w, "event: container-stat\ndata: %s\n\n", string(bytes))
+			if err != nil {
+				log.Debugf("Error while writing to event stream: %v", err)
+				break
+			}
+			f.Flush()
 		case message, ok := <-messages:
 			if !ok {
 				break Loop
 			}
 			switch message.Action {
-			case "connect", "disconnect", "create", "destroy", "start", "stop":
+			case "start", "connect", "disconnect", "die":
 				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
+				if message.Action == "start" {
+					log.Debugf("Scanning for new containers")
+					if containers, err := h.client.ListContainers(); err == nil {
+						for _, c := range containers {
+							if _, ok = runningContainers[c.ID]; c.State == "running" && !ok {
+								log.Debugf("Found a new container %v", c.ID)
+								h.client.ContainerStats(ctx, c.ID, stats)
+								runningContainers[c.ID] = c
+							}
+						}
+					}
 				}
+
+				delayer(func() {
+					if err := sendContainersJSON(h.client, w); err != nil {
+						log.Errorf("Error while encoding containers to stream: %v", err)
+					}
+				})
+
 				f.Flush()
 			default:
 				log.Debugf("Ignoring docker event: %v", message.Action)
@@ -198,3 +228,47 @@ Loop:
 func (h *handler) version(w http.ResponseWriter, r *http.Request) {
 	fmt.Fprintln(w, version)
 }
+
+func sendContainersJSON(client docker.Client, w http.ResponseWriter) error {
+	if containers, err := client.ListContainers(); err != nil {
+		return err
+	} else {
+		if _, err := fmt.Fprint(w, "event: containers-changed\ndata: "); err != nil {
+			return err
+		}
+
+		if err := json.NewEncoder(w).Encode(containers); err != nil {
+			return err
+		}
+
+		if _, err := fmt.Fprint(w, "\n\n"); err != nil {
+			return err
+		}
+	}
+
+	return nil
+}
+
+type delayedFun struct {
+	mu    sync.Mutex
+	after time.Duration
+	timer *time.Timer
+}
+
+func delayedFunc(after time.Duration) func(f func()) {
+	d := &delayedFun{after: after}
+
+	return func(f func()) {
+		d.add(f)
+	}
+}
+
+func (d *delayedFun) add(f func()) {
+	d.mu.Lock()
+	defer d.mu.Unlock()
+
+	if d.timer != nil {
+		d.timer.Stop()
+	}
+	d.timer = time.AfterFunc(d.after, f)
+}

webpack.config.js

@@ -10,12 +10,12 @@ module.exports = (env, argv) => ({
     maxAssetSize: 350000,
     maxEntrypointSize: 600000,
   },
-  devtool: argv.mode === "development" ? "inline-cheap-source-map" : false,
+  devtool: argv.mode !== "production" ? "inline-cheap-source-map" : false,
   entry: ["./assets/main.js", "./assets/styles.scss"],
   output: {
     path: path.resolve(__dirname, "./static"),
     filename: "[name].js",
-    publicPath: "{{ .Base }}",
+    publicPath: process.env.WEBPACK_DEV_SERVER ? "/" : "{{ .Base }}",
   },
   module: {
     rules: [
@@ -26,19 +26,18 @@ module.exports = (env, argv) => ({
       {
         test: /\.(sass|scss|css)$/,
         use: [
-          MiniCssExtractPlugin.loader,
           {
-            loader: "css-loader",
-            query: {
-              importLoaders: 1,
+            loader: MiniCssExtractPlugin.loader,
+            options: {
+              hmr: argv.mode !== "production",
             },
           },
+          "css-loader",
           {
             loader: "postcss-loader",
             options: {
               ident: "postcss",
               plugins: (loader) => [
-                require("postcss-import")(),
                 require("postcss-cssnext")({
                   features: {
                     customProperties: { warnings: false },
@@ -75,4 +74,15 @@ module.exports = (env, argv) => ({
     },
     extensions: ["*", ".js", ".vue", ".json"],
   },
+  devServer: {
+    port: 8081,
+    inline: true,
+    hot: true,
+    historyApiFallback: true,
+    proxy: {
+      "/api": {
+        target: "http://localhost:8080",
+      },
+    },
+  },
 });