Fetch more (#209)

* Adds code to fetch more

* Adds working in progress

* Adds debugging test

* Cleans up and creates a new component

* Adds debug logs

* Adds debounce for messages

* Fixes scrolling

* Fixes go code to handle length

* Fixes tests

* Adds loader

* Fixes tests

assets/components/LogEventSource.vue

@@ -1,15 +1,18 @@
 <template lang="html">
   <div>
+    <infinite-loader :onLoadMore="loadOlderLogs" :enabled="messages.length > 100"></infinite-loader>
     <slot v-bind:messages="messages"></slot>
   </div>
 </template>
 
 <script>
-let nextId = 0;
+import debounce from "lodash.debounce";
+import InfiniteLoader from "./InfiniteLoader";
+
 function parseMessage(data) {
   const date = new Date(data.substring(0, 30));
-  const message = data.substring(30);
-  const key = nextId++;
+  const key = data.substring(0, 30);
+  const message = data.substring(30).trim();
   return {
     key,
     date,
@@ -20,9 +23,13 @@ function parseMessage(data) {
 export default {
   props: ["id"],
   name: "LogEventSource",
+  components: {
+    InfiniteLoader
+  },
   data() {
     return {
-      messages: []
+      messages: [],
+      buffer: []
     };
   },
   created() {
@@ -37,11 +44,37 @@ export default {
         this.es = null;
       }
       this.es = new EventSource(`${BASE_PATH}/api/logs/stream?id=${this.id}`);
-      this.es.onmessage = e => this.messages.push(parseMessage(e.data));
-      this.es.onerror = function(e) {
-        console.log("EventSource failed." + e);
+      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 < 100) return;
+
+      const to = this.messages[0].date;
+      const from = new Date(to);
+      from.setMinutes(from.getMinutes() - 10);
+      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: {