fix: in follow mode, switching from/back-to Application Logs results in blank tab content

We are not re-initializing the tailf stream

Author: starpit

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

@@ -19,13 +19,35 @@ import { ITheme, Terminal } from "xterm"
 import { FitAddon } from "xterm-addon-fit"
 import { Events } from "@kui-shell/core"
 
+type WatchInit = () => {
+  /**
+   * Will be used to attach to an underlying streaming
+   * provider of additional terminal output.
+   */
+  on(eventType: "data", cb: (data: any) => void): void
+
+  /**
+   * Terminate any streaming. Will be invoked un unmount, whenever
+   * `this.props.streamer` is given.
+   */
+  unwatch(): void
+}
+
 interface Props {
+  /** If given, the initial terminal output to render */
   initialContent?: string
-  on?(eventType: "data", cb: (data: any) => void): void
-  unwatch?(): void
+
+  /**
+   * Commence/recommence streaming. Will be invoked on mount.
+   */
+  watch?: WatchInit
+}
+
+interface State {
+  streamer?: ReturnType<WatchInit>
 }
 
-export default class XTerm extends React.PureComponent<Props> {
+export default class XTerm extends React.PureComponent<Props, State> {
   private terminal: Terminal = new Terminal({
     convertEol: true,
     scrollback: 5000,
@@ -37,17 +59,19 @@ export default class XTerm extends React.PureComponent<Props> {
   public componentDidMount() {
     this.mountTerminal()
 
-    if (this.props.on) {
-      this.props.on("data", this.terminal.write.bind(this.terminal))
+    if (this.props.watch) {
+      const streamer = this.props.watch()
+      streamer.on("data", this.terminal.write.bind(this.terminal))
+      this.setState({ streamer })
     }
   }
 
   public componentWillUnmount() {
     this.unmountTerminal()
     this.cleaners.forEach((cleaner) => cleaner())
 
-    if (this.props.unwatch) {
-      this.props.unwatch()
+    if (this.state.streamer) {
+      this.state.streamer.unwatch()
     }
   }
 

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

@@ -33,14 +33,19 @@ async function tail(args: Arguments<FollowOptions>) {
 
   if (process.env.FOLLOW) {
     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 {
       react: React.createElement(Terminal, {
-        on: tail.on.bind(tail),
-        unwatch: tail.quit.bind(tail),
+        watch: () => {
+          const tail = new TailFile(fp, { startPos: 0, pollFileIntervalMs: 500 })
+          tail.start()
+          tail.on("tail_error", (err) => console.error(err))
+
+          return {
+            on: tail.on.bind(tail),
+            unwatch: tail.quit.bind(tail),
+          }
+        },
       }),
     }
   } else {