Release 3.8.2

Bump sass from 1.42.1 to 1.43.2

.github/.kodiak.toml

@@ -0,0 +1,2 @@
+version = 1
+merge.notify_on_conflict = false

.github/workflows/deploy.yml

@@ -9,9 +9,9 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout code
-        uses: actions/checkout@v2
+        uses: actions/checkout@v2.3.4
       - name: Install Node
-        uses: actions/setup-node@v2.1.5
+        uses: actions/setup-node@v2.4.1
       - name: Install dependencies
         run: yarn
       - name: Run Tests
@@ -21,11 +21,11 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Install Go
-        uses: actions/setup-go@v2.1.3
+        uses: actions/setup-go@v2.1.4
         with:
-          go-version: 1.16.x
+          go-version: 1.17.x
       - name: Checkout code
-        uses: actions/checkout@v2
+        uses: actions/checkout@v2.3.4
       - name: Run Go Tests with Coverage
         run: make test SKIP_ASSET=1
   int-test:
@@ -33,7 +33,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout code
-        uses: actions/checkout@v2
+        uses: actions/checkout@v2.3.4
       - name: Build images
         run: docker-compose -f integration/docker-compose.test.yml build
       - name: Run tests
@@ -45,27 +45,27 @@ jobs:
     steps:
       - name: Docker meta
         id: meta
-        uses: crazy-max/ghaction-docker-meta@v2
+        uses: crazy-max/ghaction-docker-meta@v3.5.0
         with:
           images: amir20/dozzle
       - name: Set up QEMU
-        uses: docker/setup-qemu-action@v1
+        uses: docker/setup-qemu-action@v1.2.0
       - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v1
+        uses: docker/setup-buildx-action@v1.6.0
       - name: Login to DockerHub
-        uses: docker/login-action@v1
+        uses: docker/login-action@v1.10.0
         with:
           username: ${{ secrets.DOCKER_USERNAME }}
           password: ${{ secrets.DOCKER_PASSWORD }}
       - name: Cache Docker layers
-        uses: actions/cache@v2
+        uses: actions/cache@v2.1.6
         with:
           path: /tmp/.buildx-cache
           key: ${{ runner.os }}-buildx-${{ github.sha }}
           restore-keys: |
             ${{ runner.os }}-buildx-
       - name: Build and push
-        uses: docker/build-push-action@v2
+        uses: docker/build-push-action@v2.7.0
         with:
           push: true
           platforms: linux/amd64,linux/arm/v7,linux/arm64/v8
@@ -87,11 +87,11 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout code
-        uses: actions/checkout@v2
+        uses: actions/checkout@v2.3.4
         with:
           fetch-depth: 0
       - name: Install Node
-        uses: actions/setup-node@v2.1.5
+        uses: actions/setup-node@v2.4.1
       - name: Install dependencies
         run: yarn
       - name: Release to Github

.github/workflows/dev.yml

@@ -0,0 +1,48 @@
+on:
+  push:
+    branches:
+      - master
+name: Push master container
+jobs:
+  buildx:
+    name: Push master
+    runs-on: ubuntu-latest
+    steps:
+      - name: Docker meta
+        id: meta
+        uses: crazy-max/ghaction-docker-meta@v3.5.0
+        with:
+          images: amir20/dozzle
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v1.2.0
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v1.6.0
+      - name: Login to DockerHub
+        uses: docker/login-action@v1.10.0
+        with:
+          username: ${{ secrets.DOCKER_USERNAME }}
+          password: ${{ secrets.DOCKER_PASSWORD }}
+      - name: Cache Docker layers
+        uses: actions/cache@v2.1.6
+        with:
+          path: /tmp/.buildx-cache
+          key: ${{ runner.os }}-buildx-${{ github.sha }}
+          restore-keys: |
+            ${{ runner.os }}-buildx-
+      - name: Build and push
+        uses: docker/build-push-action@v2.7.0
+        with:
+          push: true
+          platforms: linux/amd64
+          tags: ${{ steps.meta.outputs.tags }}
+          build-args: TAG=${{ steps.meta.outputs.version }}
+          labels: ${{ steps.meta.outputs.labels }}
+          cache-from: type=local,src=/tmp/.buildx-cache
+          cache-to: type=local,dest=/tmp/.buildx-cache-new
+      - # Temp fix
+        # https://github.com/docker/build-push-action/issues/252
+        # https://github.com/moby/buildkit/issues/1896
+        name: Move cache
+        run: |
+          rm -rf /tmp/.buildx-cache
+          mv /tmp/.buildx-cache-new /tmp/.buildx-cache

.github/workflows/test.yml

@@ -6,9 +6,9 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout code
-        uses: actions/checkout@v2
+        uses: actions/checkout@v2.3.4
       - name: Install Node
-        uses: actions/setup-node@v2.1.5
+        uses: actions/setup-node@v2.4.1
       - name: Install dependencies
         run: yarn
       - name: Run Tests
@@ -18,11 +18,11 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Install Go
-        uses: actions/setup-go@v2.1.3
+        uses: actions/setup-go@v2.1.4
         with:
-          go-version: 1.16.x
+          go-version: 1.17.x
       - name: Checkout code
-        uses: actions/checkout@v2
+        uses: actions/checkout@v2.3.4
       - name: Run Go Tests with Coverage
         run: make test SKIP_ASSET=1
   int-test:
@@ -30,7 +30,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout code
-        uses: actions/checkout@v2
+        uses: actions/checkout@v2.3.4
       - name: Build images
         run: docker-compose -f integration/docker-compose.test.yml build
       - name: Run tests

.kodiak.toml

@@ -1 +0,0 @@
-version = 1

Dockerfile

@@ -18,7 +18,7 @@ COPY assets ./assets
 # Do the build
 RUN yarn build
 
-FROM golang:1.16-alpine AS builder
+FROM golang:1.17.2-alpine AS builder
 
 RUN apk add --no-cache git ca-certificates
 RUN mkdir /dozzle

assets/App.vue

@@ -85,6 +85,7 @@ export default {
     }
     this.menuWidth = this.settings.menuWidth;
     hotkeys("command+k, ctrl+k", (event, handler) => {
+      event.preventDefault();
       this.showFuzzySearch();
     });
   },

assets/components/LogContainer.vue

@@ -33,16 +33,16 @@
 </template>
 
 <script>
-import { mapGetters } from "vuex";
-
 import LogViewerWithSource from "./LogViewerWithSource";
 import ScrollableView from "./ScrollableView";
 import ContainerTitle from "./ContainerTitle";
 import ContainerStat from "./ContainerStat";
 import Icon from "./Icon";
 import config from "../store/config";
+import containerMixin from "./mixins/container";
 
 export default {
+  mixins: [containerMixin],
   props: {
     id: {
       type: String,
@@ -69,10 +69,6 @@ export default {
     Icon,
   },
   computed: {
-    ...mapGetters(["allContainersById"]),
-    container() {
-      return this.allContainersById[this.id];
-    },
     base() {
       return config.base;
     },

assets/components/LogEventSource.spec.js

@@ -8,6 +8,7 @@ import LogViewer from "./LogViewer.vue";
 
 jest.mock("lodash.debounce", () =>
   jest.fn((fn) => {
+    fn.cancel = () => {};
     return fn;
   })
 );
@@ -34,9 +35,17 @@ describe("<LogEventSource />", () => {
     localVue.component("log-viewer", LogViewer);
 
     const state = { searchFilter, settings: { size: "medium", showTimestamp: true, hourStyle } };
+    const getters = {
+      allContainersById() {
+        return {
+          abc: { state: "running" },
+        };
+      },
+    };
 
     const store = new Vuex.Store({
       state,
+      getters,
     });
 
     return mount(LogEventSource, {
@@ -57,22 +66,25 @@ describe("<LogEventSource />", () => {
   });
 
   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);
+    const wrapper = createLogEventSource();
+    sources["/api/logs/stream?id=abc&lastEventId="].emitOpen();
+    expect(sources["/api/logs/stream?id=abc&lastEventId="].readyState).toBe(1);
+    wrapper.destroy();
   });
 
   test("should close EventSource", async () => {
     const wrapper = createLogEventSource();
-    sources["/api/logs/stream?id=abc"].emitOpen();
+    sources["/api/logs/stream?id=abc&lastEventId="].emitOpen();
     wrapper.destroy();
-    expect(sources["/api/logs/stream?id=abc"].readyState).toBe(2);
+    expect(sources["/api/logs/stream?id=abc&lastEventId="].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."` });
+    sources["/api/logs/stream?id=abc&lastEventId="].emitOpen();
+    sources["/api/logs/stream?id=abc&lastEventId="].emitMessage({
+      data: `2019-06-12T10:55:42.459034602Z "This is a message."`,
+    });
 
     const [message, _] = wrapper.vm.messages;
     const { key, ...messageWithoutKey } = message;
@@ -81,15 +93,15 @@ describe("<LogEventSource />", () => {
     expect(messageWithoutKey).toMatchInlineSnapshot(`
       Object {
         "date": 2019-06-12T10:55:42.459Z,
-        "message": " \\"This is a message.\\"",
+        "message": "\\"This is a message.\\"",
       }
     `);
   });
 
   test("should parse messages with loki's timestamp format", async () => {
     const wrapper = createLogEventSource();
-    sources["/api/logs/stream?id=abc"].emitOpen();
-    sources["/api/logs/stream?id=abc"].emitMessage({ data: `2020-04-27T12:35:43.272974324+02:00 xxxxx` });
+    sources["/api/logs/stream?id=abc&lastEventId="].emitOpen();
+    sources["/api/logs/stream?id=abc&lastEventId="].emitMessage({ data: `2020-04-27T12:35:43.272974324+02:00 xxxxx` });
 
     const [message, _] = wrapper.vm.messages;
     const { key, ...messageWithoutKey } = message;
@@ -98,15 +110,17 @@ describe("<LogEventSource />", () => {
     expect(messageWithoutKey).toMatchInlineSnapshot(`
       Object {
         "date": 2020-04-27T10:35:43.272Z,
-        "message": " xxxxx",
+        "message": "xxxxx",
       }
     `);
   });
 
   test("should pass messages to slot", async () => {
     const wrapper = createLogEventSource();
-    sources["/api/logs/stream?id=abc"].emitOpen();
-    sources["/api/logs/stream?id=abc"].emitMessage({ data: `2019-06-12T10:55:42.459034602Z "This is a message."` });
+    sources["/api/logs/stream?id=abc&lastEventId="].emitOpen();
+    sources["/api/logs/stream?id=abc&lastEventId="].emitMessage({
+      data: `2019-06-12T10:55:42.459034602Z "This is a message."`,
+    });
     const [message, _] = wrapper.findComponent(LogViewer).vm.messages;
 
     const { key, ...messageWithoutKey } = message;
@@ -116,7 +130,7 @@ describe("<LogEventSource />", () => {
     expect(messageWithoutKey).toMatchInlineSnapshot(`
       Object {
         "date": 2019-06-12T10:55:42.459Z,
-        "message": " \\"This is a message.\\"",
+        "message": "\\"This is a message.\\"",
       }
     `);
   });
@@ -138,91 +152,93 @@ describe("<LogEventSource />", () => {
 
     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."` });
+      sources["/api/logs/stream?id=abc&lastEventId="].emitOpen();
+      sources["/api/logs/stream?id=abc&lastEventId="].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 class=""><span class="date"><time datetime="2019-06-12T10:55:42.459Z">today at 10:55:42 AM</time></span> <span class="text"> "This is a message."</span></li>
+          <li><span class="date"><time datetime="2019-06-12T10:55:42.459Z">today at 10:55:42 AM</time></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({
+      sources["/api/logs/stream?id=abc&lastEventId="].emitOpen();
+      sources["/api/logs/stream?id=abc&lastEventId="].emitMessage({
         data: `2019-06-12T10:55:42.459034602Z \x1b[30mblack\x1b[37mwhite`,
       });
 
       await wrapper.vm.$nextTick();
       expect(wrapper.find("ul.events")).toMatchInlineSnapshot(`
         <ul class="events medium">
-          <li class=""><span class="date"><time datetime="2019-06-12T10:55:42.459Z">today at 10:55:42 AM</time></span> <span class="text"> <span style="color:#000">black<span style="color:#AAA">white</span></span></span></li>
+          <li><span class="date"><time datetime="2019-06-12T10:55:42.459Z">today at 10:55:42 AM</time></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({
+      sources["/api/logs/stream?id=abc&lastEventId="].emitOpen();
+      sources["/api/logs/stream?id=abc&lastEventId="].emitMessage({
         data: `2019-06-12T10:55:42.459034602Z <test>foo bar</test>`,
       });
 
       await wrapper.vm.$nextTick();
       expect(wrapper.find("ul.events")).toMatchInlineSnapshot(`
         <ul class="events medium">
-          <li class=""><span class="date"><time datetime="2019-06-12T10:55:42.459Z">today at 10:55:42 AM</time></span> <span class="text"> &lt;test&gt;foo bar&lt;/test&gt;</span></li>
+          <li><span class="date"><time datetime="2019-06-12T10:55:42.459Z">today at 10:55:42 AM</time></span> <span class="text">&lt;test&gt;foo bar&lt;/test&gt;</span></li>
         </ul>
       `);
     });
 
     test("should render dates with 12 hour style", async () => {
       const wrapper = createLogEventSource({ hourStyle: "12" });
-      sources["/api/logs/stream?id=abc"].emitOpen();
-      sources["/api/logs/stream?id=abc"].emitMessage({
+      sources["/api/logs/stream?id=abc&lastEventId="].emitOpen();
+      sources["/api/logs/stream?id=abc&lastEventId="].emitMessage({
         data: `2019-06-12T23:55:42.459034602Z <test>foo bar</test>`,
       });
 
       await wrapper.vm.$nextTick();
       expect(wrapper.find("ul.events")).toMatchInlineSnapshot(`
         <ul class="events medium">
-          <li class=""><span class="date"><time datetime="2019-06-12T23:55:42.459Z">today at 11:55:42 PM</time></span> <span class="text"> &lt;test&gt;foo bar&lt;/test&gt;</span></li>
+          <li><span class="date"><time datetime="2019-06-12T23:55:42.459Z">today at 11:55:42 PM</time></span> <span class="text">&lt;test&gt;foo bar&lt;/test&gt;</span></li>
         </ul>
       `);
     });
 
     test("should render dates with 24 hour style", async () => {
       const wrapper = createLogEventSource({ hourStyle: "24" });
-      sources["/api/logs/stream?id=abc"].emitOpen();
-      sources["/api/logs/stream?id=abc"].emitMessage({
+      sources["/api/logs/stream?id=abc&lastEventId="].emitOpen();
+      sources["/api/logs/stream?id=abc&lastEventId="].emitMessage({
         data: `2019-06-12T23:55:42.459034602Z <test>foo bar</test>`,
       });
 
       await wrapper.vm.$nextTick();
       expect(wrapper.find("ul.events")).toMatchInlineSnapshot(`
         <ul class="events medium">
-          <li class=""><span class="date"><time datetime="2019-06-12T23:55:42.459Z">today at 23:55:42</time></span> <span class="text"> &lt;test&gt;foo bar&lt;/test&gt;</span></li>
+          <li><span class="date"><time datetime="2019-06-12T23:55:42.459Z">today at 23:55:42</time></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({ searchFilter: "test" });
-      sources["/api/logs/stream?id=abc"].emitOpen();
-      sources["/api/logs/stream?id=abc"].emitMessage({
+      sources["/api/logs/stream?id=abc&lastEventId="].emitOpen();
+      sources["/api/logs/stream?id=abc&lastEventId="].emitMessage({
         data: `2019-06-11T10:55:42.459034602Z Foo bar`,
       });
-      sources["/api/logs/stream?id=abc"].emitMessage({
+      sources["/api/logs/stream?id=abc&lastEventId="].emitMessage({
         data: `2019-06-12T10:55:42.459034602Z This is a test <hi></hi>`,
       });
 
       await wrapper.vm.$nextTick();
       expect(wrapper.find("ul.events")).toMatchInlineSnapshot(`
         <ul class="events medium">
-          <li class=""><span class="date"><time datetime="2019-06-12T10:55:42.459Z">today at 10:55:42 AM</time></span> <span class="text"> This is a <mark>test</mark> &lt;hi&gt;&lt;/hi&gt;</span></li>
+          <li><span class="date"><time datetime="2019-06-12T10:55:42.459Z">today at 10:55:42 AM</time></span> <span class="text">This is a <mark>test</mark> &lt;hi&gt;&lt;/hi&gt;</span></li>
         </ul>
       `);
     });

assets/components/LogEventSource.vue

@@ -9,9 +9,11 @@
 import debounce from "lodash.debounce";
 import InfiniteLoader from "./InfiniteLoader";
 import config from "../store/config";
+import containerMixin from "./mixins/container";
 
 export default {
   props: ["id"],
+  mixins: [containerMixin],
   name: "LogEventSource",
   components: {
     InfiniteLoader,
@@ -20,29 +22,49 @@ export default {
     return {
       messages: [],
       buffer: [],
+      es: null,
+      lastEventId: null,
     };
   },
   created() {
-    this.es = null;
-    this.loadLogs(this.id);
     this.flushBuffer = debounce(this.flushNow, 250, { maxWait: 1000 });
+    this.loadLogs();
+  },
+  beforeDestroy() {
+    this.es.close();
   },
   methods: {
-    loadLogs(id) {
+    loadLogs() {
       this.reset();
-      this.es = new EventSource(`${config.base}/api/logs/stream?id=${id}`);
-      this.es.addEventListener("container-stopped", (e) => {
-        this.es.close();
-        this.buffer.push({ event: "container-stopped", message: "Container stopped", date: new Date() });
-        this.flushBuffer();
-        this.flushBuffer.flush();
-      });
+      this.connect();
+    },
+    onContainerStopped() {
+      this.es.close();
+      this.buffer.push({ event: "container-stopped", message: "Container stopped", date: new Date(), key: new Date() });
+      this.flushBuffer();
+      this.flushBuffer.flush();
+    },
+    onMessage(e) {
+      this.lastEventId = e.lastEventId;
+      this.buffer.push(this.parseMessage(e.data));
+      this.flushBuffer();
+    },
+    onContainerStateChange(newValue, oldValue) {
+      if (newValue == "running" && newValue != oldValue) {
+        this.buffer.push({
+          event: "container-started",
+          message: "Container started",
+          date: new Date(),
+          key: new Date(),
+        });
+        this.connect();
+      }
+    },
+    connect() {
+      this.es = new EventSource(`${config.base}/api/logs/stream?id=${this.id}&lastEventId=${this.lastEventId ?? ""}`);
+      this.es.addEventListener("container-stopped", (e) => this.onContainerStopped());
       this.es.addEventListener("error", (e) => console.error("EventSource failed: " + JSON.stringify(e)));
-      this.es.onmessage = (e) => {
-        this.buffer.push(this.parseMessage(e.data));
-        this.flushBuffer();
-      };
-      this.$once("hook:beforeDestroy", () => this.es.close());
+      this.es.onmessage = (e) => this.onMessage(e);
     },
     flushNow() {
       this.messages.push(...this.buffer);
@@ -51,11 +73,12 @@ export default {
     reset() {
       if (this.es) {
         this.es.close();
-        this.es = null;
-        this.flushBuffer.cancel();
       }
+      this.flushBuffer.cancel();
+      this.es = null;
       this.messages = [];
       this.buffer = [];
+      this.lastEventId = null;
     },
     async loadOlderLogs() {
       if (this.messages.length < 300) return;
@@ -84,14 +107,14 @@ export default {
       }
       const key = data.substring(0, i);
       const date = new Date(key);
-      const message = data.substring(i);
+      const message = data.substring(i + 1);
       return { key, date, message };
     },
   },
   watch: {
     id(newValue, oldValue) {
       if (oldValue !== newValue) {
-        this.loadLogs(newValue);
+        this.loadLogs();
       }
     },
   },

assets/components/LogViewer.vue

@@ -1,6 +1,6 @@
 <template>
   <ul class="events" :class="settings.size">
-    <li v-for="item in filtered" :key="item.key" :class="{ event: !!item.event }">
+    <li v-for="item in filtered" :key="item.key" :data-event="item.event">
       <span class="date" v-if="settings.showTimestamp"><relative-time :date="item.date"></relative-time></span>
       <span class="text" v-html="colorize(item.message)"></span>
     </li>
@@ -73,6 +73,12 @@ export default {
       scroll-snap-align: end;
       scroll-margin-block-end: 5rem;
     }
+    &[data-event="container-stopped"] {
+      color: #f14668;
+    }
+    &[data-event="container-started"] {
+      color: hsl(141, 53%, 53%);
+    }
   }
 
   &.small {
@@ -104,10 +110,6 @@ export default {
   white-space: pre-wrap;
 }
 
-li.event {
-  color: #f14668;
-}
-
 ::v-deep mark {
   border-radius: 2px;
   background-color: var(--secondary-color);

assets/components/ScrollableView.vue

@@ -14,7 +14,7 @@
     <div class="is-scrollbar-notification">
       <transition name="fade">
         <button class="button" :class="hasMore ? 'has-more' : ''" @click="scrollToBottom('instant')" v-show="paused">
-          <icon name="download"></icon>
+          <icon name="chevrons-down"></icon>
         </button>
       </transition>
     </div>

assets/components/mixins/container.js

@@ -0,0 +1,19 @@
+import { mapGetters } from "vuex";
+export default {
+  computed: {
+    ...mapGetters(["allContainersById"]),
+    container() {
+      return this.allContainersById[this.id];
+    },
+  },
+  watch: {
+    ["container.state"](newValue, oldValue) {
+      if (newValue == "running" && newValue != oldValue) {
+        this.onContainerStateChange(newValue, oldValue);
+      }
+    },
+  },
+  methods: {
+    onContainerStateChange(newValue, oldValue) {},
+  },
+};

assets/pages/Settings.vue

@@ -110,7 +110,7 @@ export default {
   },
   async created() {
     const releases = await (await fetch("https://api.github.com/repos/amir20/dozzle/releases")).json();
-    if (this.currentVersion !== "dev") {
+    if (this.currentVersion !== "master") {
       this.hasUpdate = gt(releases[0].tag_name, this.currentVersion);
     } else {
       this.hasUpdate = true;

assets/store/config.js

@@ -1,6 +1,6 @@
 const config = JSON.parse(document.querySelector("script#config__json").textContent);
 if (config.version == "{{ .Version }}") {
-  config.version = "dev";
+  config.version = "master";
   config.base = "";
   config.authorizationNeeded = false;
   config.secured = false;

assets/store/index.js

@@ -23,13 +23,12 @@ const mutations = {
   SET_CONTAINERS(state, containers) {
     const containersById = getters.allContainersById({ containers });
 
-    containers.forEach(
-      (container) =>
-        (container.stat =
-          containersById[container.id] && containersById[container.id].stat
-            ? containersById[container.id].stat
-            : { memoryUsage: 0, cpu: 0 })
-    );
+    containers.forEach((container) => {
+      container.stat =
+        containersById[container.id] && containersById[container.id].stat
+          ? containersById[container.id].stat
+          : { memoryUsage: 0, cpu: 0 };
+    });
 
     state.containers = containers;
   },

docker/client.go

@@ -203,7 +203,7 @@ func (d *dockerClient) Events(ctx context.Context) (<-chan ContainerEvent, <-cha
 					return
 				}
 
-				if message.Type == "container" {
+				if message.Type == "container" && len(message.Actor.ID) > 0 {
 					messages <- ContainerEvent{
 						ActorID: message.Actor.ID[:12],
 						Name:    message.Action,

go.mod

@@ -1,12 +1,12 @@
 module github.com/amir20/dozzle
 
 require (
-	github.com/Microsoft/go-winio v0.4.18 // indirect
-	github.com/alexflint/go-arg v1.4.1
+	github.com/Microsoft/go-winio v0.5.0 // indirect
+	github.com/alexflint/go-arg v1.4.2
 	github.com/beme/abide v0.0.0-20190723115211-635a09831760
-	github.com/containerd/containerd v1.4.4 // indirect
+	github.com/containerd/containerd v1.5.5 // indirect
 	github.com/docker/distribution v2.7.1+incompatible // indirect
-	github.com/docker/docker v20.10.6+incompatible
+	github.com/docker/docker v20.10.9+incompatible
 	github.com/docker/go-connections v0.4.0 // indirect
 	github.com/docker/go-units v0.4.0 // indirect
 	github.com/dustin/go-humanize v1.0.0
@@ -24,12 +24,21 @@ require (
 	github.com/stretchr/objx v0.3.0 // indirect
 	github.com/stretchr/testify v1.7.0
 	golang.org/x/net v0.0.0-20210420072503-d25e30425868 // indirect
-	golang.org/x/sys v0.0.0-20210420072515-93ed5bcd2bfe // indirect
-	golang.org/x/time v0.0.0-20190308202827-9d24e82272b4 // indirect
-	google.golang.org/genproto v0.0.0-20210420162539-3c870d7478d2 // indirect
-	google.golang.org/grpc v1.37.0 // indirect
+	golang.org/x/sys v0.0.0-20210510120138-977fb7262007 // indirect
+	google.golang.org/genproto v0.0.0-20210903162649-d08c68adba83 // indirect
+	google.golang.org/grpc v1.40.0 // indirect
 	gopkg.in/yaml.v3 v3.0.0-20210107192922-496545a6307b // indirect
-	gotest.tools/v3 v3.0.3 // indirect
 )
 
-go 1.16
+require (
+	github.com/alexflint/go-scalar v1.1.0 // indirect
+	github.com/davecgh/go-spew v1.1.1 // indirect
+	github.com/golang/protobuf v1.5.2 // indirect
+	github.com/gorilla/securecookie v1.1.1 // indirect
+	github.com/pkg/errors v0.9.1 // indirect
+	github.com/pmezard/go-difflib v1.0.0 // indirect
+	golang.org/x/text v0.3.6 // indirect
+	google.golang.org/protobuf v1.27.1 // indirect
+)
+
+go 1.17

integration/package.json

@@ -8,9 +8,9 @@
  "author": "",
  "license": "ISC",
  "dependencies": {
-  "jest": "^26.0.1",
+  "jest": "^27.0.6",
   "jest-image-snapshot": "^4.0.0",
-  "puppeteer": "^9.0.0"
+  "puppeteer": "^10.4.0"
  },
  "jest": {
   "preset": "jest-puppeteer",
@@ -19,6 +19,6 @@
   ]
  },
  "devDependencies": {
-  "jest-puppeteer": "^5.0.1"
+  "jest-puppeteer": "^6.0.0"
  }
 }

jest.config.js

@@ -1,5 +1,6 @@
 module.exports = {
   clearMocks: true,
+  testEnvironment: "jsdom",
   moduleFileExtensions: ["js", "json", "vue"],
   coveragePathIgnorePatterns: ["node_modules"],
   testPathIgnorePatterns: ["node_modules", "<rootDir>/integration/"],

main.go

@@ -21,19 +21,19 @@ import (
 )
 
 var (
-	version = "dev"
+	version = "head"
 )
 
 type args struct {
-	Addr          string              `arg:"env:DOZZLE_ADDR" default:":8080"`
-	Base          string              `arg:"env:DOZZLE_BASE" default:"/"`
-	Level         string              `arg:"env:DOZZLE_LEVEL" default:"info"`
-	TailSize      int                 `arg:"env:DOZZLE_TAILSIZE" default:"300"`
-	Key           string              `arg:"env:DOZZLE_KEY"`
-	Username      string              `arg:"env:DOZZLE_USERNAME"`
-	Password      string              `arg:"env:DOZZLE_PASSWORD"`
-	NoAnalytics   bool                `arg:"--no-analytics,env:DOZZLE_NO_ANALYTICS"`
-	FilterStrings []string            `arg:"env:DOZZLE_FILTER,--filter,separate"`
+	Addr          string              `arg:"env:DOZZLE_ADDR" default:":8080" help:"sets host:port to bind for server. This is rarely needed inside a docker container."`
+	Base          string              `arg:"env:DOZZLE_BASE" default:"/" help:"sets the base for http router."`
+	Level         string              `arg:"env:DOZZLE_LEVEL" default:"info" help:"set Dozzle log level. Use debug for more logging."`
+	TailSize      int                 `arg:"env:DOZZLE_TAILSIZE" default:"300" help:"update the initial tail size when fetching logs."`
+	Key           string              `arg:"env:DOZZLE_KEY" help:"set a random key for username and password. This is required for auth."`
+	Username      string              `arg:"env:DOZZLE_USERNAME" help:"sets the username for auth."`
+	Password      string              `arg:"env:DOZZLE_PASSWORD" help:"sets password for auth"`
+	NoAnalytics   bool                `arg:"--no-analytics,env:DOZZLE_NO_ANALYTICS" help:"disables anonymous analytics"`
+	FilterStrings []string            `arg:"env:DOZZLE_FILTER,--filter,separate" help:"filters docker containers using Docker syntax."`
 	Filter        map[string][]string `arg:"-"`
 }
 

package.json

@@ -1,6 +1,6 @@
 {
  "name": "dozzle",
- "version": "3.6.6",
+ "version": "3.8.2",
  "description": "Realtime log viewer for docker containers. ",
  "scripts": {
   "watch": "npm-run-all -p watch:*",
@@ -27,56 +27,56 @@
  },
  "homepage": "https://github.com/amir20/dozzle#readme",
  "dependencies": {
-  "ansi-to-html": "^0.6.14",
-  "buefy": "^0.9.7",
-  "bulma": "^0.9.2",
-  "date-fns": "^2.21.3",
-  "dompurify": "^2.2.8",
+  "ansi-to-html": "^0.7.2",
+  "buefy": "^0.9.10",
+  "bulma": "^0.9.3",
+  "date-fns": "^2.25.0",
+  "dompurify": "^2.3.3",
   "fuzzysort": "^1.1.4",
-  "hotkeys-js": "^3.8.3",
+  "hotkeys-js": "^3.8.7",
   "lodash.debounce": "^4.0.8",
   "lodash.throttle": "^4.1.1",
   "semver": "^7.3.5",
-  "splitpanes": "^2.3.6",
+  "splitpanes": "^2.3.8",
   "store": "^2.0.12",
-  "vue": "^2.6.12",
+  "vue": "^2.6.14",
   "vue-meta": "^2.4.0",
-  "vue-router": "^3.5.1",
+  "vue-router": "^3.5.2",
   "vuex": "^3.6.2"
  },
  "devDependencies": {
-  "@babel/core": "^7.14.0",
-  "@babel/plugin-transform-runtime": "^7.13.15",
-  "@vue/component-compiler-utils": "^3.2.0",
-  "@vue/test-utils": "^1.2.0",
-  "autoprefixer": "^10.2.5",
+  "@babel/core": "^7.15.8",
+  "@babel/plugin-transform-runtime": "^7.15.8",
+  "@vue/component-compiler-utils": "^3.2.2",
+  "@vue/test-utils": "^1.2.2",
+  "autoprefixer": "^10.3.7",
   "babel-core": "^7.0.0-bridge.0",
-  "babel-jest": "^26.6.3",
+  "babel-jest": "^27.2.5",
   "babel-preset-env": "^1.7.0",
-  "caniuse-lite": "^1.0.30001223",
-  "css-loader": "^5.2.4",
+  "caniuse-lite": "^1.0.30001267",
+  "css-loader": "^6.4.0",
   "eventsourcemock": "^2.0.0",
-  "html-webpack-plugin": "^5.3.1",
-  "husky": "^6.0.0",
-  "jest": "^26.6.3",
+  "html-webpack-plugin": "^5.3.2",
+  "husky": "^7.0.2",
+  "jest": "^27.2.5",
   "jest-serializer-vue": "^2.0.2",
-  "lint-staged": "^11.0.0",
-  "mini-css-extract-plugin": "^1.6.0",
+  "lint-staged": "^11.2.3",
+  "mini-css-extract-plugin": "^2.4.2",
   "npm-run-all": "^4.1.5",
-  "postcss": "^8.2.14",
-  "postcss-loader": "^5.2.0",
-  "prettier": "^2.3.0",
-  "release-it": "^14.6.2",
-  "sass": "^1.32.12",
-  "sass-loader": "^11.0.1",
+  "postcss": "^8.3.9",
+  "postcss-loader": "^6.2.0",
+  "prettier": "^2.4.1",
+  "release-it": "^14.11.6",
+  "sass": "^1.43.2",
+  "sass-loader": "^12.2.0",
   "vue-hot-reload-api": "^2.3.4",
   "vue-jest": "^3.0.7",
-  "vue-loader": "^15.9.6",
+  "vue-loader": "^15.9.8",
   "vue-style-loader": "^4.1.3",
-  "vue-template-compiler": "^2.6.12",
-  "webpack": "^5.36.2",
-  "webpack-cli": "^4.7.0",
-  "webpack-dev-server": "^3.11.2",
+  "vue-template-compiler": "^2.6.14",
+  "webpack": "^5.58.2",
+  "webpack-cli": "^4.9.0",
+  "webpack-dev-server": "^4.3.1",
   "webpack-pwa-manifest": "^4.3.0"
  },
  "lint-staged": {

web/logs.go

@@ -1,4 +1,3 @@
-
 package web
 
 import (
@@ -88,7 +87,12 @@ func (h *handler) streamLogs(w http.ResponseWriter, r *http.Request) {
 	w.Header().Set("Connection", "keep-alive")
 	w.Header().Set("X-Accel-Buffering", "no")
 
-	reader, err := h.client.ContainerLogs(r.Context(), container.ID, h.config.TailSize, r.Header.Get("Last-Event-ID"))
+	lastEventId := r.Header.Get("Last-Event-ID")
+	if len(r.URL.Query().Get("lastEventId")) > 0 {
+		lastEventId = r.URL.Query().Get("lastEventId")
+	}
+
+	reader, err := h.client.ContainerLogs(r.Context(), container.ID, h.config.TailSize, lastEventId)
 	if err != nil {
 		if err == io.EOF {
 			fmt.Fprintf(w, "event: container-stopped\ndata: end of stream\n\n")
@@ -100,11 +104,10 @@ func (h *handler) streamLogs(w http.ResponseWriter, r *http.Request) {
 	}
 	defer reader.Close()
 
-
 	buffered := bufio.NewReader(reader)
 	var readerError error
 	var message string
-	for  {
+	for {
 		message, readerError = buffered.ReadString('\n')
 		fmt.Fprintf(w, "data: %s\n", message)
 		if index := strings.IndexAny(message, " "); index != -1 {