From 449096c0a3b9e4cf0cc44b123f09d2546487def1 Mon Sep 17 00:00:00 2001
From: Simone Gotti <simone.gotti@gmail.com>
Date: Sun, 19 May 2019 14:17:12 +0200
Subject: [PATCH] logs: handle line feed and always use streaming

remove the use of http server sent events, just use the streaming api

handle line feeds by rewriting the current line. This isn't perfect since it
won't handle subtle cases where the colors are change between lines but will
work in all standard cases

Now commands that writes a progess will work correctly without adding a new line
every time and users will see the progress in realtime.
---
 src/components/log.vue | 95 +++++++++++++++++++++++-------------------
 1 file changed, 52 insertions(+), 43 deletions(-)

diff --git a/src/components/log.vue b/src/components/log.vue
index d68dfb6..2aee263 100644
--- a/src/components/log.vue
+++ b/src/components/log.vue
@@ -4,12 +4,15 @@
       <div class="stream-line" v-for="(item, index) in items" :key="index">
         <div v-html="item"/>
       </div>
+      <div v-if="lastitem" class="stream-line">
+        <div v-html="lastitem"/>
+      </div>
     </div>
   </div>
 </template>
 
 <script>
-import { apiurl, apiurlwithtoken, fetch } from "@/util/auth";
+import { apiurl, fetch } from "@/util/auth";
 import AnsiUp from "ansi_up";
 
 export default {
@@ -29,6 +32,7 @@ export default {
 
     return {
       items: [],
+      lastitem: "",
       lines: [],
       formatter: formatter,
       es: null,
@@ -40,61 +44,71 @@ export default {
       if (this.fetching) {
         return;
       }
-      this.fetching = true;
+
+      let follow = false;
       if (this.stepphase == "running") {
-        this.streamLogs();
+        follow = true;
       }
 
-      if (this.stepphase == "success" || this.stepphase == "failed") {
-        this.getLogs();
-      }
+      this.getLogs(follow);
     },
-    streamLogs() {
+    async getLogs(follow) {
+      this.items = [];
       let path = "/logs?runID=" + this.runid + "&taskID=" + this.taskid;
       if (this.setup) {
         path += "&setup";
       } else {
         path += "&step=" + this.step;
       }
-      path += "&follow&stream";
-
-      this.es = new EventSource(apiurlwithtoken(path));
-      this.es.onmessage = event => {
-        var data = event.data;
-        // TODO(sgotti) ansi_up doesn't handle carriage return (\r), find a way to also handle it
-        this.items.push(this.formatter.ansi_to_html(data));
-      };
-      // don't reconnect on error
-      this.es.onerror = () => {
-        this.es.close();
-      };
-    },
-    async getLogs() {
-      let path = "/logs?runID=" + this.runid + "&taskID=" + this.taskid;
-      if (this.setup) {
-        path += "&setup";
-      } else {
-        path += "&step=" + this.step;
+      if (follow) {
+        path += "&follow";
       }
+
       let res = await fetch(apiurl(path));
       if (res.status == 200) {
         const reader = res.body.getReader();
 
-        let items = this.items;
-        let formatter = this.formatter;
-
+        let lastline = "";
+        let j = 0;
         for (;;) {
           let { done, value } = await reader.read();
           if (done) {
             return;
           }
 
-          let data = new TextDecoder("utf-8").decode(value);
+          let data = new TextDecoder("utf-8").decode(value, { stream: true });
 
-          let lines = data.split("\n");
-          lines.forEach(line => {
-            items.push(formatter.ansi_to_html(line));
-          });
+          let part = "";
+          for (var i = 0; i < data.length; i++) {
+            let c = data.charAt(i);
+            if (c == "\r") {
+              // replace lastline from start, simulating line feed (go to start of line)
+              // this isn't perfect since the previous line contents could have
+              // been written using different colors and this will lose them but
+              // in practically all cases this won't happen
+              lastline =
+                lastline.slice(0, j) + part + lastline.slice(j + part.length);
+              j = 0;
+              this.lastitem = this.formatter.ansi_to_html(lastline);
+              part = "";
+            } else if (c == "\n") {
+              lastline =
+                lastline.slice(0, j) + part + lastline.slice(j + part.length);
+              j += part.length;
+              this.lastitem = this.formatter.ansi_to_html(lastline);
+              this.items.push(this.lastitem);
+              this.lastitem = "";
+              lastline = "";
+              j = 0;
+              part = "";
+            } else {
+              part += c;
+            }
+          }
+          lastline =
+            lastline.slice(0, j) + part + lastline.slice(j + part.length);
+          j += part.length;
+          this.lastitem = this.formatter.ansi_to_html(lastline);
         }
       }
     }
@@ -107,14 +121,9 @@ export default {
     },
     stepphase: function(post, pre) {
       if (pre == "notstarted" && post == "running") {
-        this.streamLogs();
-      }
-      if (pre == "notstarted" && (post == "success" || post == "failed")) {
-        this.getLogs();
-      }
-
-      if (pre == "running" && (post == "success" || post == "failed")) {
-        // TODO(sgotti)
+        this.getLogs(true);
+      } else {
+        this.getLogs(false);
       }
     }
   },
@@ -135,7 +144,7 @@ export default {
 .log {
   background-color: #222;
   color: #f1f1f1;
-  font-family: Cousine, monospace;
+  font-family: Cousine, monospace, "Noto Color Emoji";
   font-size: 12px;
   line-height: 19px;
   white-space: pre-wrap;