1.20.15

* Uses intersectionObserver instead

* Use intersectionObserver

* Updates mods

* Adds title when more than one container is active

* Updates logic to use native scrolling when only one logger view is open

* Fixes broken test

* Uses close instead of closed

* Fixes scrollingParent

.goreleaser.yml

@@ -2,7 +2,7 @@ before:
   hooks:
     - npm run clean
     - npm run build
-    - packr
+    - packr -z
 builds:
   - env:
       - CGO_ENABLED=0

README.md

@@ -45,6 +45,7 @@ dozzle will be available at [http://localhost:8888/](http://localhost:8888/). Yo
         image: amir20/dozzle:latest
         environment:
           - DOZZLE_TAILSIZE=100
+          - DOZZLE_FILTER='status:running'
         volumes:
           - /var/run/docker.sock:/var/run/docker.sock
         ports:
@@ -62,7 +63,7 @@ If you wish to restrict the containers shown you can pass the `--filter` paramet
 
     $ docker run --volume=/var/run/docker.sock:/var/run/docker.sock -p 8888:1224 amir20/dozzle:latest --filter name=foo
 
-this would then only allow you to view containers with a name starting with "foo"
+this would then only allow you to view containers with a name starting with "foo". You can use other filters like `status` as well, please check the official docker [command line docs](https://docs.docker.com/engine/reference/commandline/ps/#filtering) for available filters.
 
 #### Changing base URL
 

assets/App.spec.js

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

assets/App.vue

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

assets/__snapshots__/App.spec.js.snap

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

assets/components/ContainerTitle.vue

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

assets/components/InfiniteLoader.vue

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

assets/components/LogEventSource.spec.js

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

assets/components/LogEventSource.vue

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

assets/components/LogViewer.vue

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

assets/components/LogViewerWithSource.vue

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

assets/components/MobileMenu.vue

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

assets/components/ScrollableView.vue

@@ -0,0 +1,98 @@
+<template lang="html">
+  <section :class="{ 'is-full-height-scrollable': scrollable }">
+    <header v-if="$slots.header">
+      <slot name="header"></slot>
+    </header>
+    <main ref="content" :data-scrolling="scrollable">
+      <slot></slot>
+      <div ref="scrollObserver"></div>
+    </main>
+    <div class="scroll-bar-notification">
+      <transition name="fade">
+        <button
+          class="button"
+          :class="hasMore ? 'is-warning' : 'is-primary'"
+          @click="scrollToBottom('instant')"
+          v-show="paused"
+        >
+          <ion-icon name="download"></ion-icon>
+        </button>
+      </transition>
+    </div>
+  </section>
+</template>
+
+<script>
+export default {
+  props: {
+    scrollable: {
+      type: Boolean,
+      default: true
+    }
+  },
+  name: "ScrollableView",
+  data() {
+    return {
+      paused: false,
+      hasMore: false
+    };
+  },
+  mounted() {
+    const { content } = this.$refs;
+    new MutationObserver(e => {
+      if (!this.paused) {
+        this.scrollToBottom("instant");
+      } else {
+        this.hasMore = true;
+      }
+    }).observe(content, { childList: true, subtree: true });
+
+    const intersectionObserver = new IntersectionObserver(
+      entries => (this.paused = entries[0].intersectionRatio == 0),
+      { threshholds: [0, 1] }
+    );
+
+    intersectionObserver.observe(this.$refs.scrollObserver);
+  },
+
+  methods: {
+    scrollToBottom(behavior = "instant") {
+      this.$refs.scrollObserver.scrollIntoView({ behavior });
+      this.hasMore = false;
+    }
+  }
+};
+</script>
+<style scoped lang="scss">
+section {
+  display: flex;
+  flex-direction: column;
+
+  &.is-full-height-scrollable {
+    height: 100vh;
+  }
+
+  main {
+    flex: 1;
+    overflow: auto;
+  }
+
+  .scroll-bar-notification {
+    text-align: right;
+    margin-right: 65px;
+    button {
+      position: fixed;
+      bottom: 30px;
+    }
+  }
+
+  .fade-enter-active,
+  .fade-leave-active {
+    transition: opacity 0.15s ease-in;
+  }
+  .fade-enter,
+  .fade-leave-to {
+    opacity: 0;
+  }
+}
+</style>

assets/components/ScrollbarNotification.vue

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

assets/components/Search.vue

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

assets/components/SideMenu.vue

@@ -0,0 +1,94 @@
+<template lang="html">
+  <aside>
+    <div class="columns is-marginless">
+      <div class="column">
+        <h1 class="title has-text-warning is-marginless">Dozzle</h1>
+      </div>
+      <div class="column is-narrow has-text-right is-hidden-mobile">
+        <router-link
+          :to="{ name: 'settings' }"
+          active-class="is-active"
+          class="button is-small is-primary is-rounded is-inverted is-outlined "
+        >
+          <span class="icon"><ion-icon name="settings" size="large"></ion-icon></span>
+        </router-link>
+      </div>
+    </div>
+    <p class="menu-label is-hidden-mobile">Containers</p>
+    <ul class="menu-list is-hidden-mobile">
+      <li v-for="item in containers">
+        <router-link
+          :to="{ name: 'container', params: { id: item.id, name: item.name } }"
+          active-class="is-active"
+          :title="item.name"
+        >
+          <div class="hide-overflow">
+            <span
+              @click.stop.prevent="appendActiveContainer(item)"
+              class="icon is-small will-append-container"
+              :class="{ 'is-active': activeContainersById[item.id] }"
+            >
+              <ion-icon name="ios-add-circle"></ion-icon>
+            </span>
+            {{ item.name }}
+          </div>
+        </router-link>
+      </li>
+    </ul>
+  </aside>
+</template>
+
+<script>
+import { mapActions, mapGetters, mapState } from "vuex";
+
+export default {
+  props: [],
+  name: "SideMenu",
+  data() {
+    return {};
+  },
+  computed: {
+    ...mapState(["containers", "activeContainers"]),
+    ...mapGetters(["activeContainersById"])
+  },
+  methods: {
+    ...mapActions({
+      appendActiveContainer: "APPEND_ACTIVE_CONTAINER"
+    })
+  }
+};
+</script>
+<style scoped lang="scss">
+aside {
+  padding: 1em;
+  height: 100vh;
+  overflow: auto;
+  position: fixed;
+  width: inherit;
+
+  .hide-overflow {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+  }
+
+  .burger.is-white {
+    color: #fff;
+  }
+
+  .is-hidden-mobile.is-active {
+    display: block !important;
+  }
+}
+
+.will-append-container.icon {
+  transition: transform 0.2s ease-out;
+  &.is-active {
+    pointer-events: none;
+    color: #00d1b2;
+  }
+  .router-link-exact-active & {
+    visibility: hidden;
+  }
+}
+</style>

assets/index.html

@@ -7,11 +7,13 @@
     <link href="https://fonts.googleapis.com/css?family=Roboto|Roboto+Mono|Gafata" rel="stylesheet" />
     <link rel="manifest" href="manifest.webmanifest" />
     <link href="styles.scss" rel="stylesheet" />
-    <link rel="icon" href="favicon.ico">
+    <link rel="icon" href="favicon.ico" />
     <script>
       window["BASE_PATH"] = "{{ .Base }}";
+      window["VERSION"] = "{{ .Version }}";
     </script>
-    <script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
+    <script type="module" src="https://unpkg.com/ionicons@4.5.10-0/dist/ionicons/ionicons.esm.js"></script>
+    <script nomodule="" src="https://unpkg.com/ionicons@4.5.10-0/dist/ionicons/ionicons.js"></script>
   </head>
 
   <body class="is-dark">

assets/main.js

@@ -1,12 +1,19 @@
 import Vue from "vue";
 import VueRouter from "vue-router";
 import Meta from "vue-meta";
+import { Dropdown, Switch } from "buefy";
+import store from "./store";
 import App from "./App.vue";
 import Container from "./pages/Container.vue";
+import Settings from "./pages/Settings.vue";
 import Index from "./pages/Index.vue";
 
 Vue.use(VueRouter);
 Vue.use(Meta);
+Vue.use(Dropdown);
+Vue.use(Switch);
+
+Vue.config.ignoredElements = [/^ion-/];
 
 const routes = [
   {
@@ -19,6 +26,11 @@ const routes = [
     component: Container,
     name: "container",
     props: true
+  },
+  {
+    path: "/settings",
+    component: Settings,
+    name: "settings"
   }
 ];
 
@@ -30,5 +42,6 @@ const router = new VueRouter({
 
 new Vue({
   router,
+  store,
   render: h => h(App)
 }).$mount("#app");

assets/pages/Container.spec.js

@@ -1,126 +0,0 @@
-import EventSource from "eventsourcemock";
-import { sources } from "eventsourcemock";
-import { shallowMount } from "@vue/test-utils";
-import MockDate from "mockdate";
-import Container from "./Container";
-
-describe("<Container />", () => {
-  beforeEach(() => {
-    global.BASE_PATH = "";
-    global.EventSource = EventSource;
-    MockDate.set("6/12/2019", 0);
-  });
-
-  afterEach(() => MockDate.reset());
-
-  test("is a Vue instance", async () => {
-    const wrapper = shallowMount(Container);
-    expect(wrapper.isVueInstance()).toBeTruthy();
-  });
-
-  test("renders correctly", async () => {
-    const wrapper = shallowMount(Container);
-    expect(wrapper.element).toMatchSnapshot();
-  });
-
-  test("should connect to EventSource", async () => {
-    shallowMount(Container, {
-      propsData: { id: "abc" }
-    });
-    sources["/api/logs/stream?id=abc"].emitOpen();
-    expect(sources["/api/logs/stream?id=abc"].readyState).toBe(1);
-  });
-
-  test("should close EventSource", async () => {
-    const wrapper = shallowMount(Container, {
-      propsData: { id: "abc" }
-    });
-    sources["/api/logs/stream?id=abc"].emitOpen();
-    wrapper.destroy();
-    expect(sources["/api/logs/stream?id=abc"].readyState).toBe(2);
-  });
-
-  test("should parse messages", async () => {
-    const wrapper = shallowMount(Container, {
-      propsData: { id: "abc" }
-    });
-    sources["/api/logs/stream?id=abc"].emitOpen();
-    sources["/api/logs/stream?id=abc"].emitMessage({ data: `2019-06-12T10:55:42.459034602Z "This is a message."` });
-    const [message, _] = wrapper.vm.messages;
-
-    expect(message).toMatchInlineSnapshot(`
-      Object {
-        "date": 2019-06-12T10:55:42.459Z,
-        "key": 0,
-        "message": " \\"This is a message.\\"",
-      }
-    `);
-  });
-
-  test("should render messages", async () => {
-    const wrapper = shallowMount(Container, {
-      propsData: { id: "abc" }
-    });
-    sources["/api/logs/stream?id=abc"].emitOpen();
-    sources["/api/logs/stream?id=abc"].emitMessage({ data: `2019-06-12T10:55:42.459034602Z "This is a message."` });
-
-    expect(wrapper.find("ul.events")).toMatchInlineSnapshot(`
-      <ul class="events">
-        <li class="event"><span class="date">today at 10:55 AM</span> <span class="text"> "This is a message."</span></li>
-      </ul>
-    `);
-  });
-
-  test("should render messages with color", async () => {
-    const wrapper = shallowMount(Container, {
-      propsData: { id: "abc" }
-    });
-    sources["/api/logs/stream?id=abc"].emitOpen();
-    sources["/api/logs/stream?id=abc"].emitMessage({
-      data: `2019-06-12T10:55:42.459034602Z \x1b[30mblack\x1b[37mwhite`
-    });
-
-    expect(wrapper.find("ul.events")).toMatchInlineSnapshot(`
-      <ul class="events">
-        <li class="event"><span class="date">today at 10:55 AM</span> <span class="text"> <span style="color:#000">black<span style="color:#AAA">white</span></span></span></li>
-      </ul>
-    `);
-  });
-
-  test("should render messages with html entities", async () => {
-    const wrapper = shallowMount(Container, {
-      propsData: { id: "abc" }
-    });
-    sources["/api/logs/stream?id=abc"].emitOpen();
-    sources["/api/logs/stream?id=abc"].emitMessage({
-      data: `2019-06-12T10:55:42.459034602Z <test>foo bar</test>`
-    });
-
-    expect(wrapper.find("ul.events")).toMatchInlineSnapshot(`
-      <ul class="events">
-        <li class="event"><span class="date">today at 10:55 AM</span> <span class="text"> &lt;test&gt;foo bar&lt;/test&gt;</span></li>
-      </ul>
-    `);
-  });
-
-  test("should render messages with filter", async () => {
-    const wrapper = shallowMount(Container, {
-      propsData: { id: "abc" }
-    });
-    sources["/api/logs/stream?id=abc"].emitOpen();
-    sources["/api/logs/stream?id=abc"].emitMessage({
-      data: `2019-06-11T10:55:42.459034602Z Foo bar`
-    });
-    sources["/api/logs/stream?id=abc"].emitMessage({
-      data: `2019-06-12T10:55:42.459034602Z This is a test <hi></hi>`
-    });
-
-    wrapper.setData({ filter: "test" });
-
-    expect(wrapper.find("ul.events")).toMatchInlineSnapshot(`
-      <ul class="events">
-        <li class="event"><span class="date">today at 10:55 AM</span> <span class="text"> This is a <mark>test</mark> &lt;hi&gt;&lt;/hi&gt;</span></li>
-      </ul>
-    `);
-  });
-});

assets/pages/Container.vue

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

assets/pages/Settings.vue

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

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

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

assets/store/index.js

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

assets/store/settings.js

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

assets/styles.scss

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

docker/client.go

@@ -10,6 +10,7 @@ import (
 	"sort"
 	"strconv"
 	"strings"
+	"time"
 
 	"github.com/docker/docker/api/types"
 	"github.com/docker/docker/api/types/events"
@@ -36,6 +37,7 @@ type Client interface {
 	FindContainer(string) (Container, error)
 	ContainerLogs(context.Context, string, int) (<-chan string, <-chan error)
 	Events(context.Context) (<-chan events.Message, <-chan error)
+	ContainerLogsBetweenDates(context.Context, string, time.Time, time.Time) ([]string, error)
 }
 
 // NewClient creates a new instance of Client
@@ -121,6 +123,34 @@ func (d *dockerClient) ListContainers(showAll bool) ([]Container, error) {
 	return containers, nil
 }
 
+func logReader(reader io.ReadCloser, tty bool) func() (string, error) {
+	if tty {
+		scanner := bufio.NewScanner(reader)
+		return func() (string, error) {
+			if scanner.Scan() {
+				return scanner.Text(), nil
+			}
+
+			return "", io.EOF
+		}
+	}
+	hdr := make([]byte, 8)
+	var buffer bytes.Buffer
+	return func() (string, error) {
+		buffer.Reset()
+		_, err := reader.Read(hdr)
+		if err != nil {
+			return "", err
+		}
+		count := binary.BigEndian.Uint32(hdr[4:])
+		_, err = io.CopyN(&buffer, reader, int64(count))
+		if err != nil {
+			return "", err
+		}
+		return strings.TrimSpace(buffer.String()), nil
+	}
+}
+
 func (d *dockerClient) ContainerLogs(ctx context.Context, id string, tailSize int) (<-chan string, <-chan error) {
 	options := types.ContainerLogsOptions{ShowStdout: true, ShowStderr: true, Follow: true, Tail: strconv.Itoa(tailSize), Timestamps: true}
 	reader, err := d.cli.ContainerLogs(ctx, id, options)
@@ -140,49 +170,23 @@ func (d *dockerClient) ContainerLogs(ctx context.Context, id string, tailSize in
 
 	containerJSON, _ := d.cli.ContainerInspect(ctx, id)
 
-	if containerJSON.Config.Tty {
-		go func() {
-			defer close(messages)
-			defer close(errChannel)
-			defer reader.Close()
-			scanner := bufio.NewScanner(reader)
-			for scanner.Scan() {
-				line := scanner.Text()
-				select {
-				case messages <- line:
-				case <-ctx.Done():
-				}
+	go func() {
+		defer close(messages)
+		defer close(errChannel)
+		defer reader.Close()
+		nextEntry := logReader(reader, containerJSON.Config.Tty)
+		for {
+			line, err := nextEntry()
+			if err != nil {
+				errChannel <- err
+				break
 			}
-		}()
-	} else {
-		go func() {
-			defer close(messages)
-			defer close(errChannel)
-			defer reader.Close()
-
-			hdr := make([]byte, 8)
-			var buffer bytes.Buffer
-			for {
-				_, err := reader.Read(hdr)
-				if err != nil {
-					errChannel <- err
-					break
-				}
-				count := binary.BigEndian.Uint32(hdr[4:])
-				_, err = io.CopyN(&buffer, reader, int64(count))
-
-				if err != nil {
-					errChannel <- err
-					break
-				}
-				select {
-				case messages <- buffer.String():
-				case <-ctx.Done():
-				}
-				buffer.Reset()
+			select {
+			case messages <- line:
+			case <-ctx.Done():
 			}
-		}()
-	}
+		}
+	}()
 
 	return messages, errChannel
 }
@@ -190,3 +194,34 @@ func (d *dockerClient) ContainerLogs(ctx context.Context, id string, tailSize in
 func (d *dockerClient) Events(ctx context.Context) (<-chan events.Message, <-chan error) {
 	return d.cli.Events(ctx, types.EventsOptions{})
 }
+
+func (d *dockerClient) ContainerLogsBetweenDates(ctx context.Context, id string, from time.Time, to time.Time) ([]string, error) {
+	options := types.ContainerLogsOptions{
+		ShowStdout: true,
+		ShowStderr: true,
+		Timestamps: true,
+		Since:      strconv.FormatInt(from.Unix(), 10),
+		Until:      strconv.FormatInt(to.Unix(), 10),
+	}
+	reader, _ := d.cli.ContainerLogs(ctx, id, options)
+	defer reader.Close()
+
+	containerJSON, _ := d.cli.ContainerInspect(ctx, id)
+
+	nextEntry := logReader(reader, containerJSON.Config.Tty)
+
+	var messages []string
+	for {
+		line, err := nextEntry()
+		if err != nil {
+			if err == io.EOF {
+				break
+			} else {
+				return nil, err
+			}
+		}
+		messages = append(messages, line)
+	}
+
+	return messages, nil
+}

go.mod

@@ -14,34 +14,37 @@ require (
 	github.com/Azure/go-ansiterm v0.0.0-20170929234023-d6e3b3328b78 // indirect
 	github.com/Microsoft/go-winio v0.4.14 // indirect
 	github.com/beme/abide v0.0.0-20190723115211-635a09831760
-	github.com/containerd/containerd v1.2.9 // indirect
+	github.com/containerd/containerd v1.3.2 // indirect
 	github.com/docker/distribution v2.7.1+incompatible // indirect
 	github.com/docker/docker v0.0.0-20190827232753-32688a47f341
 	github.com/docker/go-connections v0.4.0 // indirect
 	github.com/docker/go-units v0.4.0 // indirect
-	github.com/gobuffalo/envy v1.7.1 // indirect
+	github.com/gobuffalo/envy v1.8.1 // indirect
 	github.com/gobuffalo/packr v1.30.1
-	github.com/gogo/protobuf v1.3.0 // indirect
+	github.com/gogo/protobuf v1.3.1 // indirect
 	github.com/google/go-cmp v0.3.1 // indirect
 	github.com/gorilla/mux v1.7.3
 	github.com/magiconair/properties v1.8.1
 	github.com/morikuni/aec v0.0.0-20170113033406-39771216ff4c // indirect
 	github.com/opencontainers/go-digest v1.0.0-rc1 // indirect
 	github.com/opencontainers/image-spec v1.0.1 // indirect
-	github.com/pelletier/go-toml v1.4.0 // indirect
+	github.com/pelletier/go-toml v1.6.0 // indirect
+	github.com/rogpeppe/go-internal v1.5.1 // indirect
 	github.com/sergi/go-diff v1.0.0 // indirect
 	github.com/sirupsen/logrus v1.4.2
 	github.com/spf13/afero v1.2.2 // indirect
+	github.com/spf13/cast v1.3.1 // indirect
 	github.com/spf13/jwalterweatherman v1.1.0 // indirect
 	github.com/spf13/pflag v1.0.5
-	github.com/spf13/viper v1.5.0
+	github.com/spf13/viper v1.6.1
 	github.com/stretchr/objx v0.2.0 // indirect
 	github.com/stretchr/testify v1.4.0
-	golang.org/x/net v0.0.0-20190918130420-a8b05e9114ab // indirect
-	golang.org/x/sys v0.0.0-20190916202348-b4ddaad3f8a3 // indirect
+	golang.org/x/net v0.0.0-20191209160850-c0dbc17a3553 // indirect
+	golang.org/x/sys v0.0.0-20191218084908-4a24b4065292 // indirect
 	golang.org/x/text v0.3.2 // indirect
-	google.golang.org/genproto v0.0.0-20190916214212-f660b8655731 // indirect
-	google.golang.org/grpc v1.23.1 // indirect
+	google.golang.org/genproto v0.0.0-20191216205247-b31c10ee225f // indirect
+	google.golang.org/grpc v1.26.0 // indirect
+	gopkg.in/yaml.v2 v2.2.7 // indirect
 	gotest.tools v2.2.0+incompatible // indirect
 )
 

go.sum

@@ -25,10 +25,13 @@ github.com/bshuster-repo/logrus-logstash-hook v0.4.1/go.mod h1:zsTqEiSzDgAa/8GZR
 github.com/bugsnag/bugsnag-go v0.0.0-20141110184014-b1d153021fcd/go.mod h1:2oa8nejYd4cQ/b0hMIopN0lCRxU0bueqREvZLWFrtK8=
 github.com/bugsnag/osext v0.0.0-20130617224835-0dd3f918b21b/go.mod h1:obH5gd0BsqsP2LwDJ9aOkm/6J86V6lyAXCoQWGw3K50=
 github.com/bugsnag/panicwrap v0.0.0-20151223152923-e2c28503fcd0/go.mod h1:D/8v3kj0zr8ZAKg1AQ6crr+5VwKN5eIywRkfhyM/+dE=
+github.com/census-instrumentation/opencensus-proto v0.2.1/go.mod h1:f6KPmirojxKA12rnyqOA5BBL4O983OfeGPqjHWSTneU=
 github.com/cespare/xxhash v1.1.0/go.mod h1:XrSqR1VqqWfGrhpAt58auRo0WTKS1nRRg3ghfAqPWnc=
 github.com/client9/misspell v0.3.4/go.mod h1:qj6jICC3Q7zFZvVWo7KLAzC3yx5G7kyvSDkc90ppPyw=
 github.com/containerd/containerd v1.2.9 h1:6tyNjBmAMG47QuFPIT9LgiiexoVxC6qpTGR+eD0R0Z8=
 github.com/containerd/containerd v1.2.9/go.mod h1:bC6axHOhabU15QhwfG7w5PipXdVtMXFTttgp+kVtyUA=
+github.com/containerd/containerd v1.3.2 h1:ForxmXkA6tPIvffbrDAcPUIB32QgXkt2XFj+F0UxetA=
+github.com/containerd/containerd v1.3.2/go.mod h1:bC6axHOhabU15QhwfG7w5PipXdVtMXFTttgp+kVtyUA=
 github.com/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/go-etcd v2.0.0+incompatible/go.mod h1:Jez6KQU2B/sWsbdaef3ED8NzMklzPG4d5KIOhIy30Tk=
@@ -54,6 +57,8 @@ github.com/docker/go-metrics v0.0.0-20180209012529-399ea8c73916/go.mod h1:/u0gXw
 github.com/docker/go-units v0.4.0 h1:3uh0PgVws3nIA0Q+MwDC8yjEPf9zjRfZZWXZYDct3Tw=
 github.com/docker/go-units v0.4.0/go.mod h1:fgPhTUdO+D/Jk86RDLlptpiXQzgHJF7gydDDbaIK4Dk=
 github.com/docker/libtrust v0.0.0-20150114040149-fa567046d9b1/go.mod h1:cyGadeNEkKy96OOhEzfZl+yxihPEzKnqJwvfuSUqbZE=
+github.com/envoyproxy/go-control-plane v0.9.1-0.20191026205805-5f8ba28d4473/go.mod h1:YTl/9mNaCwkRvm6d1a2C3ymFceY/DCBVvsKhRF0iEA4=
+github.com/envoyproxy/protoc-gen-validate v0.1.0/go.mod h1:iSmxcyjqTsJpI2R4NaDN7+kN2VEUnK/pcBlmesArF7c=
 github.com/fsnotify/fsnotify v1.4.7 h1:IXs+QLmnXW2CcXuY+8Mzv/fWEsPGWxqefPtCP5CnV9I=
 github.com/fsnotify/fsnotify v1.4.7/go.mod h1:jwhsz4b93w/PPRr/qN1Yymfu8t87LnFCMoQvtojpjFo=
 github.com/garyburd/redigo v0.0.0-20150301180006-535138d7bcd7/go.mod h1:NR3MbYisc3/PwhQ00EMzDiPmrwpPxAn5GI05/YaO1SY=
@@ -67,6 +72,8 @@ github.com/gobuffalo/envy v1.7.0 h1:GlXgaiBkmrYMHco6t4j7SacKO4XUjvh5pwXh0f4uxXU=
 github.com/gobuffalo/envy v1.7.0/go.mod h1:n7DRkBerg/aorDM8kbduw5dN3oXGswK5liaSCx4T5NI=
 github.com/gobuffalo/envy v1.7.1 h1:OQl5ys5MBea7OGCdvPbBJWRgnhC/fGona6QKfvFeau8=
 github.com/gobuffalo/envy v1.7.1/go.mod h1:FurDp9+EDPE4aIUS3ZLyD+7/9fpx7YRt/ukY6jIHf0w=
+github.com/gobuffalo/envy v1.8.1 h1:RUr68liRvs0TS1D5qdW3mQv2SjAsu1QWMCx1tG4kDjs=
+github.com/gobuffalo/envy v1.8.1/go.mod h1:FurDp9+EDPE4aIUS3ZLyD+7/9fpx7YRt/ukY6jIHf0w=
 github.com/gobuffalo/logger v1.0.0/go.mod h1:2zbswyIUa45I+c+FLXuWl9zSWEiVuthsk8ze5s8JvPs=
 github.com/gobuffalo/packd v0.3.0 h1:eMwymTkA1uXsqxS0Tpoop3Lc0u3kTfiMBE6nKtQU4g4=
 github.com/gobuffalo/packd v0.3.0/go.mod h1:zC7QkmNkYVGKPw4tHpBQ+ml7W/3tIebgeo1b36chA3Q=
@@ -78,6 +85,8 @@ github.com/gogo/protobuf v1.2.1 h1:/s5zKNz0uPFCZ5hddgPdo2TK2TVrUNMn0OOX8/aZMTE=
 github.com/gogo/protobuf v1.2.1/go.mod h1:hp+jE20tsWTFYpLwKvXlhS1hjn+gTNwPg2I6zVXpSg4=
 github.com/gogo/protobuf v1.3.0 h1:G8O7TerXerS4F6sx9OV7/nRfJdnXgHZu/S/7F2SN+UE=
 github.com/gogo/protobuf v1.3.0/go.mod h1:SlYgWuQ5SjCEi6WLHjHCa1yvBfUnHcTbrrZtXPKa29o=
+github.com/gogo/protobuf v1.3.1 h1:DqDEcV5aeaTmdFBePNpYsp3FlcVH/2ISVVM9Qf8PSls=
+github.com/gogo/protobuf v1.3.1/go.mod h1:SlYgWuQ5SjCEi6WLHjHCa1yvBfUnHcTbrrZtXPKa29o=
 github.com/golang/glog v0.0.0-20160126235308-23def4e6c14b h1:VKtxabqXZkF25pY9ekfRL6a582T4P37/31XEstQ5p58=
 github.com/golang/glog v0.0.0-20160126235308-23def4e6c14b/go.mod h1:SBH7ygxi8pfUlaOkMMuAQtPIUF8ecWP5IEl/CR7VP2Q=
 github.com/golang/groupcache v0.0.0-20190129154638-5b532d6fd5ef/go.mod h1:cIg4eruTrX1D+g88fzRXU5OdNfaM+9IcxsU14FzY7Hc=
@@ -148,6 +157,8 @@ 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.4.0 h1:u3Z1r+oOXJIkxqw34zVhyPgjBsm6X2wn21NWs/HfSeg=
 github.com/pelletier/go-toml v1.4.0/go.mod h1:PN7xzY2wHTK0K9p34ErDQMlFxa51Fk0OUruD3k1mMwo=
+github.com/pelletier/go-toml v1.6.0 h1:aetoXYr0Tv7xRU/V4B4IZJ2QcbtMUFoNb3ORp7TzIK4=
+github.com/pelletier/go-toml v1.6.0/go.mod h1:5N711Q9dKgbdkxHL+MEfF31hpT7l0S0s/t2kKREewys=
 github.com/pkg/errors v0.8.0 h1:WdK/asTD0HN+q6hsWO3/vpuAkAr+tw6aNJNDFFf0+qw=
 github.com/pkg/errors v0.8.0/go.mod h1:bwawxfHBFNV+L2hUp1rHADufV3IMtnDRdf1r5NINEl0=
 github.com/pkg/errors v0.8.1 h1:iURUrRGxPUNPdy5/HRSm+Yj6okJ6UtLINN0Q9M4+h3I=
@@ -160,6 +171,7 @@ github.com/prometheus/client_golang v0.9.3/go.mod h1:/TN21ttK/J9q6uSwhBd54HahCDf
 github.com/prometheus/client_model v0.0.0-20171117100541-99fa1f4be8e5/go.mod h1:MbSGuTsp3dbXC40dX6PRTWyKYBIrTGTE9sqQNg2J8bo=
 github.com/prometheus/client_model v0.0.0-20180712105110-5c3871d89910/go.mod h1:MbSGuTsp3dbXC40dX6PRTWyKYBIrTGTE9sqQNg2J8bo=
 github.com/prometheus/client_model v0.0.0-20190129233127-fd36f4220a90/go.mod h1:xMI15A0UPsDsEKsMN9yxemIoYk6Tm2C1GtYGdfGttqA=
+github.com/prometheus/client_model v0.0.0-20190812154241-14fe0d1b01d4/go.mod h1:xMI15A0UPsDsEKsMN9yxemIoYk6Tm2C1GtYGdfGttqA=
 github.com/prometheus/common v0.0.0-20180110214958-89604d197083/go.mod h1:daVV7qP5qjZbuso7PdcryaAu0sAZbrN9i7WWcTMWvro=
 github.com/prometheus/common v0.0.0-20181113130724-41aa239b4cce/go.mod h1:daVV7qP5qjZbuso7PdcryaAu0sAZbrN9i7WWcTMWvro=
 github.com/prometheus/common v0.4.0/go.mod h1:TNfzLD0ON7rHzMJeJkieUDPYmFC7Snx/y86RQel1bk4=
@@ -173,6 +185,8 @@ github.com/rogpeppe/go-internal v1.3.0 h1:RR9dF3JtopPvtkroDZuVD7qquD0bnHlKSqaQhg
 github.com/rogpeppe/go-internal v1.3.0/go.mod h1:M8bDsm7K2OlrFYOpmOWEs/qY81heoFRclV5y23lUDJ4=
 github.com/rogpeppe/go-internal v1.3.2 h1:XU784Pr0wdahMY2bYcyK6N1KuaRAdLtqD4qd8D18Bfs=
 github.com/rogpeppe/go-internal v1.3.2/go.mod h1:xXDCJY+GAPziupqXw64V24skbSoqbTEfhy4qGm1nDQc=
+github.com/rogpeppe/go-internal v1.5.1 h1:asQ0uD7BN9RU5Im41SEEZTwCi/zAXdMOLS3npYaos2g=
+github.com/rogpeppe/go-internal v1.5.1/go.mod h1:xXDCJY+GAPziupqXw64V24skbSoqbTEfhy4qGm1nDQc=
 github.com/russross/blackfriday v1.5.2/go.mod h1:JO/DiYxRf+HjHt06OyowR9PTA263kcR/rfWxYHBV53g=
 github.com/satori/go.uuid v1.2.0/go.mod h1:dA0hQrYB0VpLJoorglMZABFdXlWrHn1NEOzdhQKdks0=
 github.com/sergi/go-diff v1.0.0 h1:Kpca3qRNrduNnOQeazBd0ysaKrUJiIuISHxogkT9RPQ=
@@ -183,6 +197,7 @@ github.com/sirupsen/logrus v1.4.2 h1:SPIRibHv4MatM3XXNO2BJeFLZwZ2LvZgfQ5+UNI2im4
 github.com/sirupsen/logrus v1.4.2/go.mod h1:tLMulIdttU9McNUspp0xgXVQah82FyeX6MwdIuYE2rE=
 github.com/smartystreets/assertions v0.0.0-20180927180507-b2de0cb4f26d/go.mod h1:OnSkiWE9lh6wB0YB77sQom3nweQdgAjqCqsofrRNTgc=
 github.com/smartystreets/goconvey v0.0.0-20190330032615-68dc04aab96a/go.mod h1:syvi0/a8iFYH4r/RixwvyeAJjdLS9QV7WQ/tjFTllLA=
+github.com/smartystreets/goconvey v1.6.4/go.mod h1:syvi0/a8iFYH4r/RixwvyeAJjdLS9QV7WQ/tjFTllLA=
 github.com/soheilhy/cmux v0.1.4/go.mod h1:IM3LyeVVIOuxMH7sFAkER9+bJ4dT7Ms6E4xg4kGIyLM=
 github.com/spaolacci/murmur3 v0.0.0-20180118202830-f09979ecbc72/go.mod h1:JwIasOWyU6f++ZhiEuf87xNszmSA2myDM2Kzu9HwQUA=
 github.com/spf13/afero v1.1.2 h1:m8/z1t7/fwjysjQRYbP0RD+bUIF/8tJwPdEZsI83ACI=
@@ -191,6 +206,8 @@ github.com/spf13/afero v1.2.2 h1:5jhuqJyZCZf2JRofRvN/nIFgIWNzPa3/Vz8mYylgbWc=
 github.com/spf13/afero v1.2.2/go.mod h1:9ZxEEn6pIJ8Rxe320qSDBk6AsU0r9pR7Q4OcevTdifk=
 github.com/spf13/cast v1.3.0 h1:oget//CVOEoFewqQxwr0Ej5yjygnqGkvggSE/gB35Q8=
 github.com/spf13/cast v1.3.0/go.mod h1:Qx5cxh0v+4UWYiBimWS+eyWzqEqokIECu5etghLkUJE=
+github.com/spf13/cast v1.3.1 h1:nFm6S0SMdyzrzcmThSipiEubIDy8WEXKNZ0UOgiRpng=
+github.com/spf13/cast v1.3.1/go.mod h1:Qx5cxh0v+4UWYiBimWS+eyWzqEqokIECu5etghLkUJE=
 github.com/spf13/cobra v0.0.3/go.mod h1:1l0Ry5zgKvJasoi3XT1TypsSe7PqH0Sj9dhYf7v3XqQ=
 github.com/spf13/cobra v0.0.5/go.mod h1:3K3wKZymM7VvHMDS9+Akkh4K60UwM26emMESw8tLCHU=
 github.com/spf13/jwalterweatherman v1.0.0 h1:XHEdyB+EcvlqZamSM4ZOMGlc93t6AcsBEu9Gc1vn7yk=
@@ -207,6 +224,8 @@ github.com/spf13/viper v1.4.0 h1:yXHLWeravcrgGyFSyCgdYpXQ9dR9c/WED3pg1RhxqEU=
 github.com/spf13/viper v1.4.0/go.mod h1:PTJ7Z/lr49W6bUbkmS1V3by4uWynFiR9p7+dSq/yZzE=
 github.com/spf13/viper v1.5.0 h1:GpsTwfsQ27oS/Aha/6d1oD7tpKIqWnOA6tgOX9HHkt4=
 github.com/spf13/viper v1.5.0/go.mod h1:AkYRkVJF8TkSG/xet6PzXX+l39KhhXa2pdqVSxnTcn4=
+github.com/spf13/viper v1.6.1 h1:VPZzIkznI1YhVMRi6vNFLHSwhnhReBfgTxIPccpfdZk=
+github.com/spf13/viper v1.6.1/go.mod h1:t3iDnF5Jlj76alVNuyFBk5oUMCvsrkbvZK0WQdfDi5k=
 github.com/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=
@@ -252,6 +271,8 @@ golang.org/x/net v0.0.0-20190522155817-f3200d17e092/go.mod h1:HSz+uSET+XFnRR8LxR
 golang.org/x/net v0.0.0-20190619014844-b5b0513f8c1b/go.mod h1:z5CRVTTTmAJ677TzLLGU+0bjPO0LkuOLi4/5GtJWs/s=
 golang.org/x/net v0.0.0-20190918130420-a8b05e9114ab h1:h5tBRKZ1aY/bo6GNqe/4zWC8GkaLOFQ5wPKIOQ0i2sA=
 golang.org/x/net v0.0.0-20190918130420-a8b05e9114ab/go.mod h1:z5CRVTTTmAJ677TzLLGU+0bjPO0LkuOLi4/5GtJWs/s=
+golang.org/x/net v0.0.0-20191209160850-c0dbc17a3553 h1:efeOvDhwQ29Dj3SdAV/MJf8oukgn+8D8WgaCaRMchF8=
+golang.org/x/net v0.0.0-20191209160850-c0dbc17a3553/go.mod h1:z5CRVTTTmAJ677TzLLGU+0bjPO0LkuOLi4/5GtJWs/s=
 golang.org/x/oauth2 v0.0.0-20180821212333-d2e6202438be/go.mod h1:N/0e6XlmueqKjAGxoOufVs8QHGRruUQn6yWY3a++T0U=
 golang.org/x/oauth2 v0.0.0-20190604053449-0f29369cfe45/go.mod h1:gOpvHmFTYa4IltrdGE7lF6nIHvwfUNPOp7c8zoXwtLw=
 golang.org/x/sync v0.0.0-20180314180146-1d60e4601c6f/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM=
@@ -274,6 +295,8 @@ 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-20190916202348-b4ddaad3f8a3 h1:7TYNF4UdlohbFwpNH04CoPMp1cHUZgO1Ebq5r2hIjfo=
 golang.org/x/sys v0.0.0-20190916202348-b4ddaad3f8a3/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
+golang.org/x/sys v0.0.0-20191218084908-4a24b4065292 h1:Y8q0zsdcgAd+JU8VUA8p8Qv2YhuY9zevDG2ORt5qBUI=
+golang.org/x/sys v0.0.0-20191218084908-4a24b4065292/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
 golang.org/x/text v0.3.0/go.mod h1:NqM8EUOU14njkJ3fqMW+pc6Ldnwhi/IjpwHt7yyuwOQ=
 golang.org/x/text v0.3.2 h1:tW2bmiBqwgJj/UpqtC8EpXEZVYOwU0yG4iWbprSVAcs=
 golang.org/x/text v0.3.2/go.mod h1:bEr9sfX3Q8Zfm5fL9x+3itogRgK3+ptLWKqgva+5dAk=
@@ -294,20 +317,28 @@ google.golang.org/appengine v1.4.0/go.mod h1:xpcJRLb0r/rnEns0DIKYYv+WjYCduHsrkT7
 google.golang.org/cloud v0.0.0-20151119220103-975617b05ea8/go.mod h1:0H1ncTHf11KCFhTc/+EFRbzSCOZx+VUbRMk55Yv5MYk=
 google.golang.org/genproto v0.0.0-20180817151627-c66870c02cf8 h1:Nw54tB0rB7hY/N0NQvRW8DG4Yk3Q6T9cu9RcFQDu1tc=
 google.golang.org/genproto v0.0.0-20180817151627-c66870c02cf8/go.mod h1:JiN7NxoALGmiZfu7CAH4rXhgtRTLTxftemlI0sWmxmc=
+google.golang.org/genproto v0.0.0-20190819201941-24fa4b261c55/go.mod h1:DMBHOl98Agz4BDEuKkezgsaosCRResVns1a3J2ZsMNc=
 google.golang.org/genproto v0.0.0-20190916214212-f660b8655731 h1:Phvl0+G5t5k/EUFUi0wPdUUeTL2HydMQUXHnunWgSb0=
 google.golang.org/genproto v0.0.0-20190916214212-f660b8655731/go.mod h1:IbNlFCBrqXvoKpeg0TB2l7cyZUmoaFKYIwrEpbDKLA8=
+google.golang.org/genproto v0.0.0-20191216205247-b31c10ee225f h1:0RYv5T9ZdroAqqfM2taEB0nJrArv0X1JpIdgUmY4xg8=
+google.golang.org/genproto v0.0.0-20191216205247-b31c10ee225f/go.mod h1:n3cpQtvxv34hfy77yVDNjmbRyujviMdxYliBSkLhpCc=
 google.golang.org/grpc v0.0.0-20160317175043-d3ddb4469d5a/go.mod h1:yo6s7OP7yaDglbqo1J04qKzAhqBH6lvTonzMVmEdcZw=
 google.golang.org/grpc v1.19.0/go.mod h1:mqu4LbDTu4XGKhr4mRzUsmM4RtVoemTSY81AxZiDr8c=
 google.golang.org/grpc v1.21.0 h1:G+97AoqBnmZIT91cLG/EkCoK9NSelj64P8bOHHNmGn0=
 google.golang.org/grpc v1.21.0/go.mod h1:oYelfM1adQP15Ek0mdvEgi9Df8B9CZIaU1084ijfRaM=
+google.golang.org/grpc v1.23.0/go.mod h1:Y5yQAOtifL1yxbo5wqy6BxZv8vAUGQwXBOALyacEbxg=
 google.golang.org/grpc v1.23.1 h1:q4XQuHFC6I28BKZpo6IYyb3mNO+l7lSOxRuYTCiDfXk=
 google.golang.org/grpc v1.23.1/go.mod h1:Y5yQAOtifL1yxbo5wqy6BxZv8vAUGQwXBOALyacEbxg=
+google.golang.org/grpc v1.26.0 h1:2dTRdpdFEEhJYQD8EMLB61nnrzSCTbG38PhqdhvOltg=
+google.golang.org/grpc v1.26.0/go.mod h1:qbnxyOmOxrQa7FizSgH+ReBfzJrCY1pSN7KXBS8abTk=
 gopkg.in/alecthomas/kingpin.v2 v2.2.6/go.mod h1:FMv+mEhP44yOT+4EoQTLFTRgOQ1FBLkstjWtayDeSgw=
 gopkg.in/check.v1 v0.0.0-20161208181325-20d25e280405/go.mod h1:Co6ibVJAznAaIkqp8huTwlJQCZ016jof/cbN4VW5Yz0=
 gopkg.in/check.v1 v1.0.0-20141024133853-64131543e789/go.mod h1:Co6ibVJAznAaIkqp8huTwlJQCZ016jof/cbN4VW5Yz0=
 gopkg.in/check.v1 v1.0.0-20180628173108-788fd7840127 h1:qIbj1fsPNlZgppZ+VLlY7N33q108Sa+fhmuc+sWQYwY=
 gopkg.in/check.v1 v1.0.0-20180628173108-788fd7840127/go.mod h1:Co6ibVJAznAaIkqp8huTwlJQCZ016jof/cbN4VW5Yz0=
 gopkg.in/errgo.v2 v2.1.0/go.mod h1:hNsd1EY+bozCKY1Ytp96fpM3vjJbqLJn88ws8XvfDNI=
+gopkg.in/ini.v1 v1.51.0 h1:AQvPpx3LzTDM0AjnIRlVFwFFGC+npRopjZxLJj6gdno=
+gopkg.in/ini.v1 v1.51.0/go.mod h1:pNLf8WUiyNEtQjuu5G5vTm06TEv9tsIgeAvK8hOrP4k=
 gopkg.in/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=
@@ -315,6 +346,8 @@ gopkg.in/yaml.v2 v2.2.2 h1:ZCJp+EgiOT7lHqUV2J862kp8Qj64Jo6az82+3Td9dZw=
 gopkg.in/yaml.v2 v2.2.2/go.mod h1:hI93XBmqTisBFMUTm0b8Fm+jr3Dg1NNxqwp+5A1VGuI=
 gopkg.in/yaml.v2 v2.2.4 h1:/eiJrUcujPVeJ3xlSWaiNi3uSVmDGBK1pDHUHAnao1I=
 gopkg.in/yaml.v2 v2.2.4/go.mod h1:hI93XBmqTisBFMUTm0b8Fm+jr3Dg1NNxqwp+5A1VGuI=
+gopkg.in/yaml.v2 v2.2.7 h1:VUgggvou5XRW9mHwD/yXxIYSMtY0zoKQf/v226p2nyo=
+gopkg.in/yaml.v2 v2.2.7/go.mod h1:hI93XBmqTisBFMUTm0b8Fm+jr3Dg1NNxqwp+5A1VGuI=
 gotest.tools v2.2.0+incompatible h1:VsBPFP1AI068pPrMxtb/S8Zkgf9xEmTLJjfM+P5UIEo=
 gotest.tools v2.2.0+incompatible/go.mod h1:DsYFclhRJ6vuDpmuTbkuFWG+y2sxOXAzmJt81HFBacw=
 honnef.co/go/tools v0.0.0-20190102054323-c2f93a96b099/go.mod h1:rf3lG4BRIbNafJWhAfAdb/ePZxsR/4RtNHQocxwk9r4=

main.go

@@ -34,9 +34,9 @@ var (
 )
 
 type handler struct {
-	client docker.Client
+	client  docker.Client
 	showAll bool
-	box    packr.Box
+	box     packr.Box
 }
 
 func init() {
@@ -91,6 +91,7 @@ func createRoutes(base string, h *handler) *mux.Router {
 	s := r.PathPrefix(base).Subrouter()
 	s.HandleFunc("/api/containers.json", h.listContainers)
 	s.HandleFunc("/api/logs/stream", h.streamLogs)
+	s.HandleFunc("/api/logs", h.fetchLogsBetweenDates)
 	s.HandleFunc("/api/events/stream", h.streamEvents)
 	s.HandleFunc("/version", h.version)
 	s.PathPrefix("/").Handler(http.StripPrefix(base, http.HandlerFunc(h.index)))
@@ -108,9 +109,9 @@ func main() {
 
 	box := packr.NewBox("./static")
 	r := createRoutes(base, &handler{
-		client: dockerClient,
+		client:  dockerClient,
 		showAll: showAll,
-		box: box,
+		box:     box,
 	})
 	srv := &http.Server{Addr: addr, Handler: r}
 
@@ -149,7 +150,10 @@ func (h *handler) index(w http.ResponseWriter, req *http.Request) {
 			path = base
 		}
 
-		data := struct{ Base string }{path}
+		data := struct {
+			Base    string
+			Version string
+		}{path, version}
 		err = tmpl.Execute(w, data)
 		if err != nil {
 			http.Error(w, err.Error(), http.StatusInternalServerError)
@@ -170,6 +174,20 @@ func (h *handler) listContainers(w http.ResponseWriter, r *http.Request) {
 	}
 }
 
+func (h *handler) fetchLogsBetweenDates(w http.ResponseWriter, r *http.Request) {
+	w.Header().Set("Content-Type", "text/plain; charset=UTF-8")
+
+	from, _ := time.Parse(time.RFC3339, r.URL.Query().Get("from"))
+	to, _ := time.Parse(time.RFC3339, r.URL.Query().Get("to"))
+	id := r.URL.Query().Get("id")
+
+	messages, _ := h.client.ContainerLogsBetweenDates(r.Context(), id, from, to)
+
+	for _, m := range messages {
+		fmt.Fprintln(w, m)
+	}
+}
+
 func (h *handler) streamLogs(w http.ResponseWriter, r *http.Request) {
 	id := r.URL.Query().Get("id")
 	if id == "" {

package.json

@@ -1,11 +1,11 @@
 {
  "name": "dozzle",
- "version": "1.16.2",
+ "version": "1.20.15",
  "description": "Realtime log viewer for docker containers. ",
  "scripts": {
   "prestart": "npm run clean",
   "start": "DOCKER_API_VERSION=1.38 concurrently 'npm run watch-server' 'npm run watch-assets'",
-  "watch-assets": "npx parcel watch --public-url '__BASE__' assets/index.html -d static",
+  "watch-assets": "npx parcel watch --no-source-maps --public-url '__BASE__' assets/index.html -d static",
   "watch-server": "reflex -c .reflex",
   "prebuild": "npm run clean",
   "build": "npx parcel build --no-source-maps --public-url '__BASE__' assets/index.html -d static",
@@ -25,34 +25,41 @@
  "homepage": "https://github.com/amir20/dozzle#readme",
  "dependencies": {
   "ansi-to-html": "^0.6.13",
+  "buefy": "^0.8.9",
   "bulma": "^0.8.0",
-  "date-fns": "^2.7.0",
-  "vue": "^2.6.10",
+  "date-fns": "^2.9.0",
+  "hotkeys-js": "^3.7.3",
+  "lodash.debounce": "^4.0.8",
+  "semver": "^7.1.1",
+  "splitpanes": "^2.2.1",
+  "store": "^2.0.12",
+  "vue": "^2.6.11",
   "vue-meta": "^2.3.1",
-  "vue-router": "^3.1.3"
+  "vue-router": "^3.1.3",
+  "vuex": "^3.1.2"
  },
  "devDependencies": {
-  "@babel/core": "^7.7.2",
-  "@babel/plugin-transform-runtime": "^7.6.2",
-  "@vue/component-compiler-utils": "^3.0.2",
+  "@babel/core": "^7.7.7",
+  "@babel/plugin-transform-runtime": "^7.7.6",
+  "@vue/component-compiler-utils": "^3.1.1",
   "@vue/test-utils": "^1.0.0-beta.29",
   "babel-core": "^7.0.0-bridge.0",
   "babel-jest": "^24.9.0",
-  "concurrently": "^5.0.0",
+  "concurrently": "^5.0.2",
+  "cz-conventional-changelog": "^3.0.2",
   "eventsourcemock": "^2.0.0",
-  "fetch-mock": "^7.7.3",
-  "husky": "^3.0.9",
+  "husky": "^4.0.6",
   "jest": "^24.9.0",
   "jest-serializer-vue": "^2.0.2",
-  "lint-staged": "^9.4.2",
+  "lint-staged": "^9.5.0",
   "mockdate": "^2.0.5",
   "node-fetch": "^2.6.0",
   "parcel-bundler": "^1.12.4",
-  "prettier": "^1.18.2",
-  "sass": "^1.23.3",
+  "prettier": "^1.19.1",
+  "sass": "^1.24.4",
   "vue-hot-reload-api": "^2.3.4",
   "vue-jest": "^3.0.5",
-  "vue-template-compiler": "^2.6.10"
+  "vue-template-compiler": "^2.6.11"
  },
  "husky": {
   "hooks": {
@@ -73,6 +80,7 @@
   "vue": "./node_modules/vue/dist/vue.esm.js"
  },
  "jest": {
+  "clearMocks": true,
   "moduleFileExtensions": [
    "js",
    "json",
@@ -97,5 +105,10 @@
    ".*\\.vue$": "vue-jest",
    ".+\\.js$": "babel-jest"
   }
+ },
+ "config": {
+  "commitizen": {
+   "path": "./node_modules/cz-conventional-changelog"
+  }
  }
 }