Fixes reconnection bugs (#1256)

* Fixes reconnect by sending lastEventId see #1246 * Cleans up colors and spacing * Fixes tests
2025-12-21 21:33:18 +01:00 · 2021-05-26 12:05:55 -07:00
parent 64f744a5d4
commit 920acf4256
5 changed files with 81 additions and 60 deletions
--- a/assets/components/LogContainer.vue
+++ b/assets/components/LogContainer.vue
@@ -27,7 +27,7 @@
      </div>
    </template>
    <template v-slot="{ setLoading }">
-      <log-viewer-with-source :id="id" @loading-more="setLoading($event)" ref="source"></log-viewer-with-source>
+      <log-viewer-with-source :id="id" @loading-more="setLoading($event)"></log-viewer-with-source>
    </template>
  </scrollable-view>
 </template>
--- a/assets/components/LogEventSource.spec.js
+++ b/assets/components/LogEventSource.spec.js
@@ -66,22 +66,24 @@ describe("<LogEventSource />", () => {

  test("should connect to EventSource", async () => {
    const wrapper = createLogEventSource();
-    sources["/api/logs/stream?id=abc"].emitOpen();
-    expect(sources["/api/logs/stream?id=abc"].readyState).toBe(1);
+    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;
@@ -90,15 +92,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;
@@ -107,15 +109,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;
@@ -125,7 +129,7 @@ describe("<LogEventSource />", () => {
    expect(messageWithoutKey).toMatchInlineSnapshot(`
      Object {
        "date": 2019-06-12T10:55:42.459Z,
-        "message": " \\"This is a message.\\"",
+        "message": "\\"This is a message.\\"",
      }
    `);
  });
@@ -147,91 +151,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>
      `);
    });
--- a/assets/components/LogEventSource.vue
+++ b/assets/components/LogEventSource.vue
@@ -22,10 +22,11 @@ export default {
    return {
      messages: [],
      buffer: [],
+      es: null,
+      lastEventId: null,
    };
  },
  created() {
-    this.es = null;
    this.loadLogs();
    this.flushBuffer = debounce(this.flushNow, 250, { maxWait: 1000 });
  },
@@ -33,28 +34,37 @@ export default {
    this.es.close();
  },
  methods: {
-    onContainerStateChange(newValue, oldValue) {
-      if (newValue == "running" && newValue != oldValue) {
-        this.connect();
-      }
-    },
    loadLogs() {
      this.reset();
      this.connect();
    },
-    connect() {
-      this.es = new EventSource(`${config.base}/api/logs/stream?id=${this.id}`);
-      this.es.addEventListener("container-stopped", (e) => {
+    onContainerStopped() {
      this.es.close();
-        this.buffer.push({ event: "container-stopped", message: "Container stopped", date: new Date() });
+      this.buffer.push({ event: "container-stopped", message: "Container stopped", date: new Date(), key: new Date() });
      this.flushBuffer();
      this.flushBuffer.flush();
-      });
-      this.es.addEventListener("error", (e) => console.error("EventSource failed: " + JSON.stringify(e)));
-      this.es.onmessage = (e) => {
+    },
+    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.onMessage(e);
    },
    flushNow() {
      this.messages.push(...this.buffer);
@@ -96,7 +106,7 @@ 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 };
    },
  },
--- a/assets/components/LogViewer.vue
+++ b/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);
--- a/web/logs.go
+++ b/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,7 +104,6 @@ func (h *handler) streamLogs(w http.ResponseWriter, r *http.Request) {
 	}
 	defer reader.Close()

-
 	buffered := bufio.NewReader(reader)
 	var readerError error
 	var message string