feat: add codeflare terminal command

Plus updates to the Terminal component to support user input and resize events flowing back to the controller.

Author: starpit

package-lock.json

@@ -86,10 +86,10 @@
     "printWidth": 120
   },
   "devDependencies": {
-    "@kui-shell/builder": "11.5.0-dev-20220728-192258",
-    "@kui-shell/proxy": "11.5.0-dev-20220728-192258",
-    "@kui-shell/react": "11.5.0-dev-20220728-192258",
-    "@kui-shell/webpack": "11.5.0-dev-20220728-192258",
+    "@kui-shell/builder": "11.5.0-dev-20220729-154103",
+    "@kui-shell/proxy": "11.5.0-dev-20220729-154103",
+    "@kui-shell/react": "11.5.0-dev-20220729-154103",
+    "@kui-shell/webpack": "11.5.0-dev-20220729-154103",
     "@playwright/test": "^1.23.2",
     "@types/debug": "^4.1.7",
     "@types/node": "14.11.8",
@@ -113,16 +113,16 @@
   },
   "dependencies": {
     "@kui-shell/client": "file:./plugins/plugin-client-default",
-    "@kui-shell/core": "11.5.0-dev-20220728-192258",
-    "@kui-shell/plugin-bash-like": "11.5.0-dev-20220728-192258",
-    "@kui-shell/plugin-client-common": "11.5.0-dev-20220728-192258",
+    "@kui-shell/core": "11.5.0-dev-20220729-154103",
+    "@kui-shell/plugin-bash-like": "11.5.0-dev-20220729-154103",
+    "@kui-shell/plugin-client-common": "11.5.0-dev-20220729-154103",
     "@kui-shell/plugin-codeflare": "file:./plugins/plugin-codeflare",
-    "@kui-shell/plugin-core-support": "11.5.0-dev-20220728-192258",
-    "@kui-shell/plugin-electron-components": "11.5.0-dev-20220728-192258",
-    "@kui-shell/plugin-kubectl": "11.5.0-dev-20220728-192258",
+    "@kui-shell/plugin-core-support": "11.5.0-dev-20220729-154103",
+    "@kui-shell/plugin-electron-components": "11.5.0-dev-20220729-154103",
+    "@kui-shell/plugin-kubectl": "11.5.0-dev-20220729-154103",
     "@kui-shell/plugin-madwizard": "file:./plugins/plugin-madwizard",
-    "@kui-shell/plugin-patternfly4-themes": "11.5.0-dev-20220728-192258",
-    "@kui-shell/plugin-proxy-support": "11.5.0-dev-20220728-192258",
-    "@kui-shell/plugin-s3": "11.5.0-dev-20220728-192258"
+    "@kui-shell/plugin-patternfly4-themes": "11.5.0-dev-20220729-154103",
+    "@kui-shell/plugin-proxy-support": "11.5.0-dev-20220729-154103",
+    "@kui-shell/plugin-s3": "11.5.0-dev-20220729-154103"
   }
 }

package.json

@@ -21,32 +21,52 @@ and machine learning pipelines on the cloud.
 
 ---
 
-=== "See CodeFlare in Action"
+=== "Gallery"
+    === "CodeFlare CLI"
+        ```shell
+        ---
+        execute: now
+        outputOnly: true
+        maximize: true
+        ---
+        codeflare gallery
+        ```
+
+    === "CodeFlare Dashboard"
+        ```shell
+        ---
+        execute: now
+        outputOnly: true
+        maximize: true
+        ---
+        codeflare dashboard-gallery
+        ```
+
+=== "Your Profiles"
     ```shell
     ---
     execute: now
     outputOnly: true
-    maximize: true
     ---
-    codeflare gallery
+    codeflare get profile
     ```
 
-=== "See Example Dashboards"
+=== "Use the CodeFlare CLI"
     ```shell
     ---
     execute: now
     outputOnly: true
     maximize: true
     ---
-    codeflare dashboard-gallery
+    codeflare terminal codeflare
     ```
 
-=== "Your Profiles"
-
+=== "Terminal"
     ```shell
     ---
     execute: now
     outputOnly: true
+    maximize: true
     ---
-    codeflare get profile
+    codeflare terminal $SHELL
     ```

plugins/plugin-client-default/notebooks/hello.md

@@ -30,14 +30,28 @@ type WatchInit = () => {
    */
   on(eventType: "data", cb: (data: any) => void): void
 
+  /** Does the caller want to handle input? */
+  onInput?(data: string): void
+
+  /** Does the caller want to handle resizes? */
+  onResize?(rows: number, cols: number): void
+
   /**
    * Terminate any streaming. Will be invoked un unmount, whenever
    * `this.props.streamer` is given.
    */
   unwatch(): void
 }
 
-interface Props {
+type ClassName = {
+  /** Optional class for the top-level component */
+  className?: string
+}
+
+interface Props extends ClassName {
+  /** Optional font size for terminal */
+  fontSize?: number
+
   /** If given, the initial terminal output to render */
   initialContent?: string
 
@@ -47,7 +61,7 @@ interface Props {
   watch?: WatchInit
 }
 
-interface State {
+interface State extends ClassName {
   /** Ouch, something bad happened during the render */
   catastrophicError?: Error
 
@@ -74,7 +88,10 @@ export default class XTerm extends React.PureComponent<Props, State> {
 
   public constructor(props: Props) {
     super(props)
-    this.state = {}
+    this.state = {
+      className:
+        "flex-layout flex-column flex-align-stretch flex-fill" + (props.className ? ` ${props.className}` : ""),
+    }
   }
 
   public static getDerivedStateFromError(error: Error) {
@@ -91,6 +108,18 @@ export default class XTerm extends React.PureComponent<Props, State> {
     if (this.props.watch) {
       const streamer = this.props.watch()
       streamer.on("data", this.terminal.write.bind(this.terminal))
+
+      if (streamer.onInput) {
+        // pass user input from the terminal to the watcher
+        this.terminal.onData(streamer.onInput)
+        this.terminal.focus()
+      }
+
+      if (streamer.onResize) {
+        const onResize = streamer.onResize
+        this.terminal.onResize(({ rows, cols }) => onResize(rows, cols))
+      }
+
       this.setState({ streamer })
     }
   }
@@ -221,13 +250,17 @@ export default class XTerm extends React.PureComponent<Props, State> {
       const standIn = document.querySelector("body .repl .repl-input input")
       if (standIn) {
         const fontTheme = getComputedStyle(standIn)
-        xterm.setOption("fontSize", parseInt(fontTheme.fontSize.replace(/px$/, ""), 10))
+        xterm.setOption("fontSize", this.props.fontSize || parseInt(fontTheme.fontSize.replace(/px$/, ""), 10))
         // terminal.setOption('lineHeight', )//parseInt(fontTheme.lineHeight.replace(/px$/, ''), 10))
 
         // FIXME. not tied to theme
         xterm.setOption("fontWeight", 400)
         xterm.setOption("fontWeightBold", 600)
       }
+
+      if (this.props.fontSize) {
+        xterm.setOption("fontSize", this.props.fontSize)
+      }
     } catch (err) {
       console.error("Error setting terminal font size", err)
     }
@@ -318,7 +351,7 @@ export default class XTerm extends React.PureComponent<Props, State> {
       return "InternalError"
     } else {
       return (
-        <div className="flex-layout flex-column flex-align-stretch flex-fill">
+        <div className={this.state.className}>
           <div ref={this.container} className="xterm-container" onKeyUp={this.onKeyUp} />
           {this.toolbar()}
         </div>

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

@@ -78,6 +78,11 @@ export default function registerCodeflareCommands(registrar: Registrar) {
    */
   registrar.listen("/codeflare/dashboard-gallery", (args) => import("./hello").then((_) => _.dashboardGallery(args)))
 
+  /** Open a terminal */
+  registrar.listen("/codeflare/terminal", (args) => import("./terminal").then((_) => _.default(args)), {
+    needsUI: true,
+  })
+
   /**
    * Register a catch-all command handler: any `/^codeflare/` command
    * lines, send to madwizard.

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

@@ -0,0 +1,78 @@
+/*
+ * Copyright 2022 The Kubernetes Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Arguments, Job, ReactResponse, encodeComponent, isResizable } from "@kui-shell/core"
+
+import React from "react"
+import { PassThrough } from "stream"
+
+import respawn from "./respawn"
+import Terminal from "../components/Terminal"
+
+/**
+ * This is our impl of the `watch` property that our Terminal
+ * component needs, in order to support live updates.
+ */
+function watch(stream: PassThrough, job: Job) {
+  return {
+    on: stream.on.bind(stream), // data from pty to terminal
+    onInput: job.write.bind(job), // user input from terminal to pty
+    unwatch: job.abort.bind(job), // unmount, abort pty job
+    onResize: isResizable(job) ? job.resize.bind(job) : undefined,
+  }
+}
+
+/**
+ * This is a command handler that opens up a terminal. The expectation
+ * is that the command line to be executed is the "rest" after:
+ * `codeflare terminal <rest...>`.
+ */
+export default function openTerminal(args: Arguments) {
+  // eslint-disable-next-line no-async-promise-executor
+  return new Promise<ReactResponse>(async (resolve, reject) => {
+    try {
+      // we need this to wire the pty output through to the Terminal
+      // component, which expects something stream-like
+      const passthrough = new PassThrough()
+
+      const { argv, env } = respawn(args.command.replace(/^\s*codeflare\s+terminal\s+/, ""))
+
+      await args.REPL.qexec(argv.map((_) => encodeComponent(_)).join(" "), undefined, undefined, {
+        tab: args.tab,
+        env,
+        quiet: true,
+        onInit: () => (_) => {
+          // hooks pty output to our passthrough stream
+          passthrough.write(_)
+        },
+        onReady: (job) => {
+          resolve({
+            react: (
+              <div
+                className="kui--inverted-color-context flex-fill flex-layout flex-align-stretch"
+                style={{ backgroundColor: "var(--color-sidecar-background-02)" }}
+              >
+                <Terminal watch={() => watch(passthrough, job)} />
+              </div>
+            ),
+          })
+        },
+      })
+    } catch (err) {
+      reject(err)
+    }
+  })
+}