fix: dashboard Application Logs tail -f incorrectly splits newlines

we should just pass the raw buffer data directly to the xterm, so that it can handle cursor motion properly. e.g. moving cursors to previous lines, deleting lines...

Author: starpit

plugins/plugin-codeflare/src/components/Terminal.tsx

@@ -27,6 +27,7 @@ interface Props {
 
 export default class XTerm extends React.PureComponent<Props> {
   private terminal: Terminal = new Terminal({
+    convertEol: true,
     scrollback: 5000,
   })
 
@@ -37,7 +38,7 @@ export default class XTerm extends React.PureComponent<Props> {
     this.mountTerminal()
 
     if (this.props.on) {
-      this.props.on("data", this.writeln)
+      this.props.on("data", this.terminal.write.bind(this.terminal))
     }
   }
 
@@ -50,12 +51,6 @@ export default class XTerm extends React.PureComponent<Props> {
     }
   }
 
-  private writeln = (data: any) => {
-    if (typeof data === "string") {
-      this.terminal.writeln(data)
-    }
-  }
-
   private unmountTerminal() {
     if (this.terminal) {
       this.terminal.dispose()
@@ -78,8 +73,8 @@ export default class XTerm extends React.PureComponent<Props> {
 
     if (this.props.initialContent) {
       // @starpit i don't know why we have to split the newlines...
-      this.props.initialContent.split(/\n/).forEach(this.writeln)
-      //this.terminal.write(this.props.initialContent)
+      //this.props.initialContent.split(/\n/).forEach(this.writeln)
+      this.terminal.write(this.props.initialContent)
     }
 
     this.terminal.open(xtermContainer)

plugins/plugin-codeflare/src/controller/tailf.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { Arguments, ReactResponse, Registrar, encodeComponent } from "@kui-shell/core"
+import { Arguments, Registrar, encodeComponent } from "@kui-shell/core"
 
 import { expand } from "../lib/util"
 import { followFlags, FollowOptions } from "./dashboard"
@@ -32,29 +32,17 @@ async function tail(args: Arguments<FollowOptions>) {
   ])
 
   if (process.env.FOLLOW) {
-    const [TailFile, split2] = await Promise.all([
-      import("@logdna/tail-file").then((_) => _.default),
-      import("split2").then((_) => _.default),
-    ])
+    const TailFile = await import("@logdna/tail-file").then((_) => _.default)
+    const tail = new TailFile(fp, { startPos: 0, pollFileIntervalMs: 500 })
+    tail.start()
+    tail.on("tail_error", (err) => console.error(err))
 
-    return new Promise<ReactResponse>((resolve, reject) => {
-      try {
-        const tail = new TailFile(fp, { startPos: 0, pollFileIntervalMs: 500 })
-        tail.start()
-        tail.on("tail_error", reject)
-
-        const splitter = tail.pipe(split2())
-
-        resolve({
-          react: React.createElement(Terminal, {
-            on: splitter.on.bind(splitter),
-            unwatch: tail.quit.bind(tail),
-          }),
-        })
-      } catch (err) {
-        reject(err)
-      }
-    })
+    return {
+      react: React.createElement(Terminal, {
+        on: tail.on.bind(tail),
+        unwatch: tail.quit.bind(tail),
+      }),
+    }
   } else {
     const initialContent = await args.REPL.qexec<string>(`vfs fslice ${encodeComponent(fp)} 0`)