fix: try to import ink only at the top level

Author: starpit

plugins/plugin-codeflare-dashboard/src/components/Job/index.tsx

@@ -16,7 +16,7 @@
 
 import React from "react"
 import prettyMillis from "pretty-ms"
-import { Box, Spacer, Text } from "ink"
+import { Box, Spacer, Text, render } from "ink"
 
 import type { GridSpec, UpdatePayload, LogLineUpdate, TimestampedLine, WorkersUpdate, Worker } from "./types.js"
 
@@ -62,7 +62,7 @@ export type State = Pick<WorkersUpdate, "events"> &
     workers: Worker[][]
   }
 
-export default class Dashboard extends React.PureComponent<Props, State> {
+class Job extends React.PureComponent<Props, State> {
   public componentDidMount() {
     this.setState({
       workers: [],
@@ -315,3 +315,9 @@ export default class Dashboard extends React.PureComponent<Props, State> {
     )
   }
 }
+
+/** Wrap the `grids` in a `<Job/>` UI */
+export default async function renderJob(props: Props) {
+  const { waitUntilExit } = render(<Job {...props} />)
+  await waitUntilExit()
+}

plugins/plugin-codeflare-dashboard/src/components/Top/index.tsx

@@ -14,11 +14,12 @@
  * limitations under the License.
  */
 
+import Debug from "debug"
 import React from "react"
 import prettyMillis from "pretty-ms"
 import prettyBytes from "pretty-bytes"
-import { Box, Text, TextProps } from "ink"
 import { emitKeypressEvents } from "readline"
+import { Box, Text, TextProps, render } from "ink"
 
 import type { JobRec, HostRec, PodRec, OnData, UpdatePayload, Resource, ResourceSpec } from "./types.js"
 
@@ -63,7 +64,7 @@ type State = UI & {
   refresher: ReturnType<typeof setInterval>
 }
 
-export default class NodesDashboard extends React.PureComponent<Props, State> {
+class Top extends React.PureComponent<Props, State> {
   /** Text to use for one cell's worth of time */
   private readonly block = "■" // "▇"
 
@@ -342,7 +343,10 @@ export default class NodesDashboard extends React.PureComponent<Props, State> {
   }
 
   public render() {
-    if (!this.state?.groups || this.state.groups.length === 0) {
+    if (!this.state?.groups) {
+      // TODO spinner? this means we haven't received the first data set, yet
+      return <React.Fragment />
+    } else if (this.state.groups.length === 0) {
       return <Text>No active jobs</Text>
     } else {
       return (
@@ -353,3 +357,12 @@ export default class NodesDashboard extends React.PureComponent<Props, State> {
     }
   }
 }
+
+export default async function renderTop(props: Props) {
+  const debug = Debug("plugin-codeflare-dashboard/components/Top")
+
+  debug("rendering")
+  const { waitUntilExit } = await render(<Top {...props} />)
+  debug("initial render done")
+  await waitUntilExit()
+}

plugins/plugin-codeflare-dashboard/src/controller/dashboard/db.tsx

@@ -20,7 +20,6 @@ import type Options from "./options.js"
 
 import tailf from "../tailf.js"
 import usage from "../usage.js"
-import dashboardUI from "../db.js"
 import status from "./status/index.js"
 import utilization from "./utilization/index.js"
 
@@ -114,19 +113,15 @@ export default async function dashboard(args: Arguments<Options>) {
   const grids = await gridForA(kind, historyConfig)
   debug("grids", grids)
 
-  const db = dashboardUI(profile, jobId, grids, { scale })
-
-  if (!db) {
+  if (grids === null || (Array.isArray(grids) && grids.length === 0)) {
     throw new Error(usage("top job"))
   } else {
-    const { render } = await import("ink")
+    const [{ default: render }] = await Promise.all([import("../../../components/Job/index.js")])
 
     if (process.env.ALT !== "false" && !debug.enabled) {
       enterAltBufferMode()
     }
-
-    const { waitUntilExit } = await render(db)
-    await waitUntilExit()
+    await render({ profile, jobId, scale, grids: Array.isArray(grids) ? grids : [grids] })
     return true
   }
 }

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

@@ -264,17 +264,10 @@ export default async function jobsController(args: Arguments<MyOptions>) {
   }
 
   debug("loading UI dependencies")
-  const [{ render }, { createElement }, { default: Top }] = await Promise.all([
-    import("ink"),
-    import("react"),
-    import("../../components/Top/index.js"),
-  ])
+  const [{ default: render }] = await Promise.all([import("../../components/Top/index.js")])
 
   debug("rendering")
-  const { waitUntilExit } = await render(createElement(Top, { initWatcher }))
-  debug("initial render done")
-
-  await waitUntilExit()
+  await render({ initWatcher })
   debug("exiting")
   return true
 }