Release 1.22.0

* Use iconmoon

* Adds icons

* Use go to update BASE

* Changes more icons

* Uses html inline

* Reverts css changes

* Fixes icons

* Fixes tests and icons

* Adds --rm to int tests

* Fixes unit tests

.dockerignore

@@ -4,3 +4,5 @@ node_modules
 dist
 .git
 static
+integration
+demo.gif

.github/workflows/push.yml

@@ -7,9 +7,9 @@ jobs:
     steps:
       - name: Checkout code
         uses: actions/checkout@v2
-      - name: npm test
+      - name: Install Node
         uses: actions/setup-node@v1
-      - name: npm it
+      - name: Run NPM Tests
         run: npm it
   go-test:
     name: go test
@@ -21,5 +21,13 @@ jobs:
           go-version: 1.14.x
       - name: Checkout code
         uses: actions/checkout@v2
-      - name: Test
+      - name: Run Go Tests
         run: go test -cover ./...
+  docker-build:
+    name: Integration Tests
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v2
+      - name: Run tests
+        run: docker-compose -f integration/docker-compose.test.yml run integration

.htmlnanorc.js

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

.prettierrc.js

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

.prettierrc.json

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

Dockerfile

@@ -6,14 +6,18 @@ RUN apk add --no-cache git openssh python make g++ util-linux
 WORKDIR /build
 
 # Install dependencies
-COPY package*.json ./
-RUN npm install
+COPY package*.json yarn.lock ./
+RUN yarn install --network-timeout 1000000
+
+# Copy config files
+COPY .* ./
 
 # Copy assets to build
 COPY assets ./assets
 
+
 # Do the build
-RUN npm run build
+RUN yarn build
 
 
 FROM golang:1.14-alpine AS builder

README.md

@@ -44,9 +44,6 @@ dozzle will be available at [http://localhost:8888/](http://localhost:8888/). Yo
       dozzle:
         container_name: dozzle
         image: amir20/dozzle:latest
-        environment:
-          - DOZZLE_TAILSIZE=100
-          - DOZZLE_FILTER=status=running
         volumes:
           - /var/run/docker.sock:/var/run/docker.sock
         ports:

assets/App.spec.js

@@ -8,7 +8,7 @@ const localVue = createLocalVue();
 localVue.use(Vuex);
 
 describe("<App />", () => {
-  const stubs = { RouterLink: RouterLinkStub, "router-view": true, "ion-icon": true };
+  const stubs = { RouterLink: RouterLinkStub, "router-view": true, icon: true };
   let store;
 
   beforeEach(() => {
@@ -17,18 +17,18 @@ describe("<App />", () => {
     const state = {
       containers: [
         { id: "abc", name: "Test 1" },
-        { id: "xyz", name: "Test 2" }
+        { id: "xyz", name: "Test 2" },
       ],
-      settings: { menuWidth: 15 }
+      settings: { menuWidth: 15 },
     };
 
     const actions = {
-      FETCH_CONTAINERS: () => Promise.resolve()
+      FETCH_CONTAINERS: () => Promise.resolve(),
     };
 
     store = new Vuex.Store({
       state,
-      actions
+      actions,
     });
   });
 

assets/App.vue

@@ -3,7 +3,7 @@
     <mobile-menu v-if="isMobile"></mobile-menu>
 
     <splitpanes @resized="onResized($event)">
-      <pane min-size="10" :size="settings.menuWidth" v-if="!isMobile" v-show="!collapseNav">
+      <pane min-size="10" :size="settings.menuWidth" v-if="!isMobile && !collapseNav">
         <side-menu></side-menu>
       </pane>
       <pane min-size="10">
@@ -31,7 +31,7 @@
       v-if="!isMobile"
     >
       <span class="icon">
-        <ion-icon :name="collapseNav ? 'arrow-dropright' : 'arrow-dropleft'" size="large"></ion-icon>
+        <icon :name="collapseNav ? 'chevron-right' : 'chevron-left'"></icon>
       </span>
     </button>
   </main>
@@ -47,10 +47,12 @@ import SideMenu from "./components/SideMenu";
 import MobileMenu from "./components/MobileMenu";
 import Search from "./components/Search";
 import ContainerTitle from "./components/ContainerTitle";
+import Icon from "./components/Icon";
 
 export default {
   name: "App",
   components: {
+    Icon,
     LogViewerWithSource,
     SideMenu,
     MobileMenu,
@@ -58,18 +60,18 @@ export default {
     Splitpanes,
     Pane,
     Search,
-    ContainerTitle
+    ContainerTitle,
   },
   data() {
     return {
       title: "",
-      collapseNav: false
+      collapseNav: false,
     };
   },
   metaInfo() {
     return {
       title: this.title,
-      titleTemplate: "%s - Dozzle"
+      titleTemplate: "%s - Dozzle",
     };
   },
   async created() {
@@ -89,27 +91,27 @@ export default {
       } else {
         document.documentElement.classList.remove("has-custom-scrollbars");
       }
-    }
+    },
   },
   computed: {
     ...mapState(["containers", "activeContainers", "isMobile", "settings"]),
     hasSmallerScrollbars() {
       return this.settings.smallerScrollbars;
-    }
+    },
   },
   methods: {
     ...mapActions({
       fetchContainerList: "FETCH_CONTAINERS",
       removeActiveContainer: "REMOVE_ACTIVE_CONTAINER",
-      updateSetting: "UPDATE_SETTING"
+      updateSetting: "UPDATE_SETTING",
     }),
     onResized(e) {
       if (e.length == 2) {
         const menuWidth = e[0].size;
         this.updateSetting({ menuWidth });
       }
-    }
-  }
+    },
+  },
 };
 </script>
 

assets/__snapshots__/App.spec.js.snap

@@ -45,9 +45,8 @@ exports[`<App /> renders correctly 1`] = `
     <span
       class="icon"
     >
-      <ion-icon-stub
-        name="arrow-dropleft"
-        size="large"
+      <icon-stub
+        name="chevron-left"
       />
     </span>
   </button>

assets/components/ContainerTitle.vue

@@ -13,10 +13,10 @@ export default {
     value: String,
     closable: {
       type: Boolean,
-      default: false
-    }
+      default: false,
+    },
   },
-  name: "ContainerTitle"
+  name: "ContainerTitle",
 };
 </script>
 

assets/components/Icon.vue

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

assets/components/InfiniteLoader.vue

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

assets/components/LogEventSource.spec.js

@@ -1,13 +1,17 @@
+import debounce from "lodash.debounce";
 import EventSource from "eventsourcemock";
 import { sources } from "eventsourcemock";
 import { shallowMount, mount, createLocalVue } from "@vue/test-utils";
 import Vuex from "vuex";
 import MockDate from "mockdate";
-import debounce from "lodash.debounce";
 import LogEventSource from "./LogEventSource.vue";
 import LogViewer from "./LogViewer.vue";
 
-jest.mock("lodash.debounce", () => jest.fn(fn => fn));
+jest.mock("lodash.debounce", () =>
+  jest.fn((fn) => {
+    return fn;
+  })
+);
 
 describe("<LogEventSource />", () => {
   beforeEach(() => {
@@ -20,7 +24,7 @@ describe("<LogEventSource />", () => {
     const unobserve = jest.fn();
     global.IntersectionObserver = jest.fn(() => ({
       observe,
-      unobserve
+      unobserve,
     }));
     debounce.mockClear();
   });
@@ -31,13 +35,12 @@ describe("<LogEventSource />", () => {
     const localVue = createLocalVue();
     localVue.use(Vuex);
 
-    localVue.component("log-event-source", LogEventSource);
     localVue.component("log-viewer", LogViewer);
 
     const state = { searchFilter, settings: { size: "medium" } };
 
     const store = new Vuex.Store({
-      state
+      state,
     });
 
     return mount(LogEventSource, {
@@ -46,9 +49,9 @@ describe("<LogEventSource />", () => {
       scopedSlots: {
         default: `
         <log-viewer :messages="props.messages"></log-viewer>
-        `
+        `,
       },
-      propsData: { id: "abc" }
+      propsData: { id: "abc" },
     });
   }
 
@@ -125,6 +128,7 @@ describe("<LogEventSource />", () => {
     sources["/api/logs/stream?id=abc"].emitOpen();
     sources["/api/logs/stream?id=abc"].emitMessage({ data: `2019-06-12T10:55:42.459034602Z "This is a message."` });
 
+    await wrapper.vm.$nextTick();
     expect(wrapper.find("ul.events")).toMatchInlineSnapshot(`
       <ul class="events medium">
         <li><span class="date">today at 10:55 AM</span> <span class="text">"This is a message."</span></li>
@@ -136,9 +140,10 @@ describe("<LogEventSource />", () => {
     const wrapper = createLogEventSource();
     sources["/api/logs/stream?id=abc"].emitOpen();
     sources["/api/logs/stream?id=abc"].emitMessage({
-      data: `2019-06-12T10:55:42.459034602Z \x1b[30mblack\x1b[37mwhite`
+      data: `2019-06-12T10:55:42.459034602Z \x1b[30mblack\x1b[37mwhite`,
     });
 
+    await wrapper.vm.$nextTick();
     expect(wrapper.find("ul.events")).toMatchInlineSnapshot(`
       <ul class="events 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>
@@ -150,9 +155,10 @@ describe("<LogEventSource />", () => {
     const wrapper = createLogEventSource();
     sources["/api/logs/stream?id=abc"].emitOpen();
     sources["/api/logs/stream?id=abc"].emitMessage({
-      data: `2019-06-12T10:55:42.459034602Z <test>foo bar</test>`
+      data: `2019-06-12T10:55:42.459034602Z <test>foo bar</test>`,
     });
 
+    await wrapper.vm.$nextTick();
     expect(wrapper.find("ul.events")).toMatchInlineSnapshot(`
       <ul class="events medium">
         <li><span class="date">today at 10:55 AM</span> <span class="text">&lt;test&gt;foo bar&lt;/test&gt;</span></li>
@@ -164,12 +170,13 @@ describe("<LogEventSource />", () => {
     const wrapper = createLogEventSource("test");
     sources["/api/logs/stream?id=abc"].emitOpen();
     sources["/api/logs/stream?id=abc"].emitMessage({
-      data: `2019-06-11T10:55:42.459034602Z Foo bar`
+      data: `2019-06-11T10:55:42.459034602Z Foo bar`,
     });
     sources["/api/logs/stream?id=abc"].emitMessage({
-      data: `2019-06-12T10:55:42.459034602Z This is a test <hi></hi>`
+      data: `2019-06-12T10:55:42.459034602Z This is a test <hi></hi>`,
     });
 
+    await wrapper.vm.$nextTick();
     expect(wrapper.find("ul.events")).toMatchInlineSnapshot(`
       <ul class="events 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>

assets/components/LogEventSource.vue

@@ -16,7 +16,7 @@ function parseMessage(data) {
   return {
     key,
     date,
-    message
+    message,
   };
 }
 
@@ -24,12 +24,12 @@ export default {
   props: ["id"],
   name: "LogEventSource",
   components: {
-    InfiniteLoader
+    InfiniteLoader,
   },
   data() {
     return {
       messages: [],
-      buffer: []
+      buffer: [],
     };
   },
   created() {
@@ -52,11 +52,11 @@ export default {
         250,
         { maxWait: 1000 }
       );
-      this.es.onmessage = e => {
+      this.es.onmessage = (e) => {
         this.buffer.push(parseMessage(e.data));
         flushBuffer();
       };
-      this.es.onerror = e => console.log("EventSource failed." + e);
+      this.es.onerror = (e) => console.log("EventSource failed." + e);
       this.$once("hook:beforeDestroy", () => this.es.close());
     },
     async loadOlderLogs() {
@@ -73,17 +73,17 @@ export default {
         const newMessages = logs
           .trim()
           .split("\n")
-          .map(line => parseMessage(line));
+          .map((line) => parseMessage(line));
         this.messages.unshift(...newMessages);
       }
-    }
+    },
   },
   watch: {
     id(newValue, oldValue) {
       if (oldValue !== newValue) {
         this.loadLogs(newValue);
       }
-    }
-  }
+    },
+  },
 };
 </script>

assets/components/LogViewer.vue

@@ -20,16 +20,13 @@ export default {
   components: {},
   data() {
     return {
-      showSearch: false
+      showSearch: false,
     };
   },
   methods: {
-    colorize: function(value) {
-      return ansiConvertor
-        .toHtml(value)
-        .replace("&lt;mark&gt;", "<mark>")
-        .replace("&lt;/mark&gt;", "</mark>");
-    }
+    colorize: function (value) {
+      return ansiConvertor.toHtml(value).replace("&lt;mark&gt;", "<mark>").replace("&lt;/mark&gt;", "</mark>");
+    },
   },
   computed: {
     ...mapState(["searchFilter", "settings"]),
@@ -40,10 +37,10 @@ export default {
         try {
           const regex = isSmartCase ? new RegExp(searchFilter, "i") : new RegExp(searchFilter);
           return messages
-            .filter(d => d.message.match(regex))
-            .map(d => ({
+            .filter((d) => d.message.match(regex))
+            .map((d) => ({
               ...d,
-              message: d.message.replace(regex, "<mark>$&</mark>")
+              message: d.message.replace(regex, "<mark>$&</mark>"),
             }));
         } catch (e) {
           if (e instanceof SyntaxError) {
@@ -54,13 +51,13 @@ export default {
         }
       }
       return messages;
-    }
+    },
   },
   filters: {
     relativeTime(date) {
       return formatRelative(date, new Date());
-    }
-  }
+    },
+  },
 };
 </script>
 <style scoped lang="scss">

assets/components/LogViewerWithSource.vue

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

assets/components/MobileMenu.vue

@@ -34,22 +34,22 @@ export default {
   name: "MobileMenu",
   data() {
     return {
-      showNav: false
+      showNav: false,
     };
   },
 
   computed: {
     ...mapState(["containers"]),
-    ...mapGetters(["activeContainersById"])
+    ...mapGetters(["activeContainersById"]),
   },
   methods: {
-    ...mapActions({})
+    ...mapActions({}),
   },
   watch: {
     $route(to, from) {
       this.showNav = false;
-    }
-  }
+    },
+  },
 };
 </script>
 <style scoped lang="scss">

assets/components/ScrollableView.vue

@@ -15,7 +15,7 @@
           @click="scrollToBottom('instant')"
           v-show="paused"
         >
-          <ion-icon name="download"></ion-icon>
+          <icon name="download"></icon>
         </button>
       </transition>
     </div>
@@ -23,23 +23,28 @@
 </template>
 
 <script>
+import Icon from "./Icon";
+
 export default {
   props: {
     scrollable: {
       type: Boolean,
-      default: true
-    }
+      default: true,
+    },
+  },
+  components: {
+    Icon,
   },
   name: "ScrollableView",
   data() {
     return {
       paused: false,
-      hasMore: false
+      hasMore: false,
     };
   },
   mounted() {
     const { content } = this.$refs;
-    new MutationObserver(e => {
+    new MutationObserver((e) => {
       if (!this.paused) {
         this.scrollToBottom("instant");
       } else {
@@ -48,7 +53,7 @@ export default {
     }).observe(content, { childList: true, subtree: true });
 
     const intersectionObserver = new IntersectionObserver(
-      entries => (this.paused = entries[0].intersectionRatio == 0),
+      (entries) => (this.paused = entries[0].intersectionRatio == 0),
       { threshholds: [0, 1], rootMargin: "80px 0px" }
     );
 
@@ -59,8 +64,8 @@ export default {
     scrollToBottom(behavior = "instant") {
       this.$refs.scrollObserver.scrollIntoView({ behavior });
       this.hasMore = false;
-    }
-  }
+    },
+  },
 };
 </script>
 <style scoped lang="scss">

assets/components/Search.vue

@@ -10,8 +10,8 @@
           v-model="filter"
           @keyup.esc="resetSearch()"
         />
-        <span class="icon is-small is-left">
-          <ion-icon name="search"></ion-icon>
+        <span class="icon is-left">
+          <icon name="search"></icon>
         </span>
       </p>
     </div>
@@ -24,13 +24,17 @@
 <script>
 import { mapActions, mapState } from "vuex";
 import hotkeys from "hotkeys-js";
+import Icon from "./Icon";
 
 export default {
   props: [],
   name: "Search",
+  components: {
+    Icon,
+  },
   data() {
     return {
-      showSearch: false
+      showSearch: false,
     };
   },
   mounted() {
@@ -45,12 +49,12 @@ export default {
   },
   methods: {
     ...mapActions({
-      updateSearchFilter: "SET_SEARCH"
+      updateSearchFilter: "SET_SEARCH",
     }),
     resetSearch() {
       this.showSearch = false;
       this.filter = "";
-    }
+    },
   },
   computed: {
     ...mapState(["searchFilter", "settings"]),
@@ -60,9 +64,9 @@ export default {
       },
       set(value) {
         this.updateSearchFilter(value);
-      }
-    }
-  }
+      },
+    },
+  },
 };
 </script>
 
@@ -80,4 +84,8 @@ export default {
 .delete {
   margin-left: 1em;
 }
+
+.icon {
+  padding: 10px 3px;
+}
 </style>

assets/components/SideMenu.vue

@@ -10,7 +10,9 @@
           active-class="is-active"
           class="button is-small is-rounded is-settings-control"
         >
-          <span class="icon"><ion-icon name="settings" size="large"></ion-icon></span>
+          <span class="icon">
+            <icon name="cog"></icon>
+          </span>
         </router-link>
       </div>
     </div>
@@ -28,7 +30,7 @@
               class="icon is-small will-append-container"
               :class="{ 'is-active': activeContainersById[item.id] }"
             >
-              <ion-icon name="ios-add-circle"></ion-icon>
+              <icon name="pin"></icon>
             </span>
             {{ item.name }}
           </div>
@@ -41,21 +43,26 @@
 <script>
 import { mapActions, mapGetters, mapState } from "vuex";
 
+import Icon from "./Icon";
+
 export default {
   props: [],
   name: "SideMenu",
+  components: {
+    Icon,
+  },
   data() {
     return {};
   },
   computed: {
     ...mapState(["containers", "activeContainers"]),
-    ...mapGetters(["activeContainersById"])
+    ...mapGetters(["activeContainersById"]),
   },
   methods: {
     ...mapActions({
-      appendActiveContainer: "APPEND_ACTIVE_CONTAINER"
-    })
-  }
+      appendActiveContainer: "APPEND_ACTIVE_CONTAINER",
+    }),
+  },
 };
 </script>
 <style scoped lang="scss">

assets/index.html

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

assets/main.js

@@ -13,35 +13,33 @@ Vue.use(Meta);
 Vue.use(Dropdown);
 Vue.use(Switch);
 
-Vue.config.ignoredElements = [/^ion-/];
-
 const routes = [
   {
     path: "/",
     component: Index,
-    name: "default"
+    name: "default",
   },
   {
     path: "/container/:id",
     component: Container,
     name: "container",
-    props: true
+    props: true,
   },
   {
     path: "/settings",
     component: Settings,
-    name: "settings"
-  }
+    name: "settings",
+  },
 ];
 
 const router = new VueRouter({
   mode: "history",
   base: BASE_PATH + "/",
-  routes
+  routes,
 });
 
 new Vue({
   router,
   store,
-  render: h => h(App)
+  render: (h) => h(App),
 }).$mount("#app");

assets/pages/Container.vue

@@ -20,16 +20,16 @@ export default {
   components: {
     LogViewerWithSource,
     ScrollableView,
-    ContainerTitle
+    ContainerTitle,
   },
   data() {
     return {
-      title: "loading"
+      title: "loading",
     };
   },
   metaInfo() {
     return {
-      title: this.title
+      title: this.title,
     };
   },
   mounted() {
@@ -39,7 +39,7 @@ export default {
   },
   computed: {
     ...mapState(["activeContainers"]),
-    ...mapGetters(["allContainersById"])
+    ...mapGetters(["allContainersById"]),
   },
   watch: {
     id() {
@@ -47,7 +47,7 @@ export default {
     },
     allContainersById() {
       this.title = this.allContainersById[this.id].name;
-    }
-  }
+    },
+  },
 };
 </script>

assets/pages/Index.vue

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

assets/pages/Settings.vue

@@ -35,15 +35,15 @@
         <h2 class="title is-6 is-marginless">Font size</h2>
         Modify the font size when viewing logs.
 
-        <b-dropdown v-model="size" aria-role="list" style="margin:-8px 10px 0">
+        <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"><ion-icon name="ios-arrow-down"></ion-icon></span>
+            <span class="icon"><icon name="chevron-down"></icon></span>
           </button>
           <b-dropdown-item :value="value" aria-role="listitem" v-for="value in ['small', 'medium', 'large']">
             <div class="media">
-              <span class="icon">
-                <ion-icon name="checkmark" v-if="value == size"></ion-icon>
+              <span class="icon keep-size">
+                <icon name="check" v-if="value == size"></icon>
               </span>
               <div class="media-content">
                 <h3 class="is-capitalized">{{ value }}</h3>
@@ -60,16 +60,19 @@
 import gt from "semver/functions/gt";
 import valid from "semver/functions/valid";
 import { mapActions, mapState } from "vuex";
+import Icon from "../components/Icon";
 
 export default {
   props: [],
   name: "Settings",
-  components: {},
+  components: {
+    Icon,
+  },
   data() {
     return {
       currentVersion: VERSION,
       nextRelease: null,
-      hasUpdate: false
+      hasUpdate: false,
     };
   },
   async created() {
@@ -79,13 +82,13 @@ export default {
   },
   metaInfo() {
     return {
-      title: "Settings"
+      title: "Settings",
     };
   },
   methods: {
     ...mapActions({
-      updateSetting: "UPDATE_SETTING"
-    })
+      updateSetting: "UPDATE_SETTING",
+    }),
   },
   computed: {
     ...mapState(["settings"]),
@@ -96,11 +99,11 @@ export default {
         },
         set(value) {
           this.updateSetting({ [name]: value });
-        }
+        },
       };
       return map;
-    }, {})
-  }
+    }, {}),
+  },
 };
 </script>
 <style lang="scss">

assets/store/index.js

@@ -14,7 +14,7 @@ const state = {
   activeContainers: [],
   searchFilter: null,
   isMobile: mql.matches,
-  settings: storage.get(DOZZLE_SETTINGS_KEY)
+  settings: storage.get(DOZZLE_SETTINGS_KEY),
 };
 
 const mutations = {
@@ -36,7 +36,7 @@ const mutations = {
   UPDATE_SETTINGS(state, newValues) {
     state.settings = { ...state.settings, ...newValues };
     storage.set(DOZZLE_SETTINGS_KEY, state.settings);
-  }
+  },
 };
 
 const actions = {
@@ -55,7 +55,7 @@ const actions = {
   },
   UPDATE_SETTING({ commit }, setting) {
     commit("UPDATE_SETTINGS", setting);
-  }
+  },
 };
 const getters = {
   activeContainersById(state) {
@@ -69,18 +69,18 @@ const getters = {
       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));
+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
+  mutations,
 });
 
 export default store;

assets/store/settings.js

@@ -3,5 +3,5 @@ export const DEFAULT_SETTINGS = {
   search: true,
   size: "medium",
   menuWidth: 15,
-  smallerScrollbars: false
+  smallerScrollbars: false,
 };

assets/styles.scss

@@ -72,3 +72,4 @@ html.has-custom-scrollbars {
     border-color: transparent;
   }
 }
+

integration/.gitignore

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

integration/Dockerfile

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

integration/docker-compose.test.yml

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

integration/jest-puppeteer.config.js

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

integration/jest-setup.js

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

integration/package.json

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

integration/test.js

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

package.json

@@ -1,6 +1,6 @@
 {
  "name": "dozzle",
- "version": "1.21.7",
+ "version": "1.22.0",
  "description": "Realtime log viewer for docker containers. ",
  "scripts": {
   "prestart": "npm run clean",
@@ -11,7 +11,8 @@
   "build": "npx parcel build --no-source-maps --public-url '__BASE__' assets/index.html -d static",
   "clean": "rm -rf static/ a_main-packr.go",
   "release": "release-it",
-  "test": "jest"
+  "test": "jest",
+  "integration": "docker-compose -f integration/docker-compose.test.yml run --rm integration"
  },
  "repository": {
   "type": "git",
@@ -25,13 +26,13 @@
  "homepage": "https://github.com/amir20/dozzle#readme",
  "dependencies": {
   "ansi-to-html": "^0.6.14",
-  "buefy": "^0.8.13",
+  "buefy": "^0.8.15",
   "bulma": "^0.8.1",
-  "caniuse-lite": "^1.0.30001038",
-  "date-fns": "^2.11.1",
+  "caniuse-lite": "^1.0.30001040",
+  "date-fns": "^2.12.0",
   "hotkeys-js": "^3.7.6",
   "lodash.debounce": "^4.0.8",
-  "semver": "^7.1.3",
+  "semver": "^7.2.1",
   "splitpanes": "^2.2.1",
   "store": "^2.0.12",
   "vue": "^2.6.11",
@@ -42,21 +43,21 @@
  "devDependencies": {
   "@babel/core": "^7.9.0",
   "@babel/plugin-transform-runtime": "^7.9.0",
-  "@vue/component-compiler-utils": "^3.1.1",
-  "@vue/test-utils": "^1.0.0-beta.29",
+  "@vue/component-compiler-utils": "^3.1.2",
+  "@vue/test-utils": "^1.0.0-beta.33",
   "babel-core": "^7.0.0-bridge.0",
-  "babel-jest": "^25.2.3",
+  "babel-jest": "^25.3.0",
   "concurrently": "^5.1.0",
   "eventsourcemock": "^2.0.0",
-  "husky": "^4.2.3",
-  "jest": "^25.2.3",
+  "husky": "^4.2.4",
+  "jest": "^25.3.0",
   "jest-serializer-vue": "^2.0.2",
-  "lint-staged": "^10.0.9",
+  "lint-staged": "^10.1.3",
   "mockdate": "^2.0.5",
   "node-fetch": "^2.6.0",
   "parcel-bundler": "^1.12.4",
-  "prettier": "^2.0.2",
-  "release-it": "^13.4.0",
+  "prettier": "^2.0.4",
+  "release-it": "^13.5.2",
   "sass": "^1.26.3",
   "vue-hot-reload-api": "^2.3.4",
   "vue-jest": "^3.0.5",
@@ -76,7 +77,7 @@
   ">5%"
  ],
  "alias": {
-  "vue": "./node_modules/vue/dist/vue.esm.js"
+  "vue": "./node_modules/vue/dist/vue.runtime.esm.js"
  },
  "jest": {
   "clearMocks": true,
@@ -89,7 +90,8 @@
    "node_modules"
   ],
   "testPathIgnorePatterns": [
-   "node_modules"
+   "node_modules",
+   "<rootDir>/integration/"
   ],
   "transformIgnorePatterns": [
    "node_modules"