feat: add tensorboard support to tray menu

This PR also rejiggers the "hello.md" guidebook. This needs a lot of work. The goal is to introduce codeflare and point people to next steps.

Author: starpit

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

@@ -4,36 +4,30 @@ className: codeflare--welcome-guidebook
 layout:
     1:
         position: default
-        maximized: true
-    2: 
+    2:
         position: default
         maximized: true
-        inverseColors: true
 ---
 
-<!-- <img alt="CodeFlare Icon" src="@kui-shell/client/icons/svg/codeflare.svg" width="80" height="80" /> -->
-
-=== "Profiles"
-
-    ```shell
-    ---
-    execute: now
-    maximize: true
-    outputOnly: true
-    ---
-    codeflare get profile
-    ```
+<img alt="CodeFlare Icon" src="@kui-shell/client/icons/svg/codeflare.svg" width="200" height="200" align="left" />
+CodeFlare is a framework to simplify the integration, scaling and acceleration of complex multi-step analytics and machine learning pipelines on the cloud.
 
+```shell
+---
+execute: now
+outputOnly: true
 ---
+codeflare version
+```
 
-=== "Job Runs"
+---
 
+=== "Profiles"
     ```shell
     ---
     execute: now
     maximize: true
     outputOnly: true
     ---
-    codeflare get run
+    codeflare get profile
     ```
-

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

@@ -0,0 +1,8 @@
+```shell
+---
+execute: now
+maximize: true
+outputOnly: true
+---
+codeflare get run
+```

plugins/plugin-client-default/src/index.tsx

@@ -51,7 +51,7 @@ export default function renderMain(props: KuiProps) {
     <Kui
       noHelp
       version={version}
-      productName={props.title || productTitle}
+      productName={props.title || "Welcome to " + productTitle}
       lightweightTables
       noNewTabButton
       noNewSplitButton

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

@@ -51,7 +51,10 @@ export default function registerCodeflareCommands(registrar: Registrar) {
   registrar.listen("/codeflare/get/profile", (args) => import("./profile/get").then((_) => _.default(args)), {
     needsUI: true,
   })
-  registrar.listen("/codeflare/get/run", (args) => import("./run/get").then((_) => _.default(args)), { needsUI: true })
+  registrar.listen("/codeflare/get/run", (args) => import("./run/get").then((_) => _.default(args)), {
+    needsUI: true,
+    outputOnly: true,
+  })
 
   // launch our hello guidebook
   registrar.listen("/codeflare/hello", (args) => import("./hello").then((_) => _.default(args)), {

plugins/plugin-codeflare/src/controller/run/get.ts

@@ -18,6 +18,7 @@ import { readdir } from "fs"
 import { Profiles } from "madwizard"
 import { basename, join } from "path"
 import { Arguments, Table } from "@kui-shell/core"
+import { setTabReadonly } from "@kui-shell/plugin-madwizard"
 
 import { productName } from "@kui-shell/client/config.d/name.json"
 
@@ -65,10 +66,13 @@ function statusColor(status: Status) {
 }
 
 export default async function getProfiles(args: Arguments) {
+  setTabReadonly(args)
+  const profile = args.parsedOptions.p || args.parsedOptions.profile
+
   const onClick = openDashboard.bind(args.REPL)
 
   return new Promise<Table>((resolve, reject) => {
-    const runsDir = Profiles.guidebookJobDataPath({})
+    const runsDir = Profiles.guidebookJobDataPath({ profile: profile ? profile.toString() : undefined })
     readdir(runsDir, async (err, runs) => {
       if (err) {
         if (err.code === "ENOENT") {

plugins/plugin-codeflare/src/tray/menus/index.ts

@@ -17,7 +17,7 @@
 import { CreateWindowFunction } from "@kui-shell/core"
 
 import { productName } from "@kui-shell/client/config.d/name.json"
-import { bugs, homepage, version } from "@kui-shell/client/package.json"
+import { bugs, version } from "@kui-shell/client/package.json"
 
 import profilesMenu from "./profiles"
 import UpdateFunction from "../update"
@@ -31,13 +31,10 @@ export default async function buildContextMenu(
   const { Menu } = await import("electron")
 
   const contextMenu = Menu.buildFromTemplate([
-    { label: `Open CodeFlare`, click: () => createWindow([]) },
-    { type: "separator" },
     ...(await profilesMenu(createWindow, updateFn)),
     { type: "separator" },
-    { label: `Version ${version}`, enabled: false },
-    { label: `About CodeFlare`, click: () => import("open").then((_) => _.default(homepage)) },
-    { type: "separator" },
+    { label: `Codeflare ${version}`, enabled: false },
+    // { label: `About`, click: () => import("open").then((_) => _.default(homepage)) },
     { label: `Report a Bug`, icon: bugIcon, click: () => import("open").then((_) => _.default(bugs.url)) },
     { label: `Quit ${productName}`, icon: powerOffIcon, role: "quit" },
   ])

plugins/plugin-codeflare/src/tray/menus/profiles/dashboards/codeflare.ts

@@ -0,0 +1,47 @@
+/*
+ * 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 { join } from "path"
+import { Profiles } from "madwizard"
+import { MenuItemConstructorOptions } from "electron"
+import { CreateWindowFunction } from "@kui-shell/core"
+
+import runs from "../runs"
+import section from "../../section"
+import windowOptions from "../../../window"
+
+/** @return a new Window with a dashboard of the selected job run */
+function openRunInCodeflareDashboard(createWindow: CreateWindowFunction, profile: string, runId: string) {
+  const runsDir = Profiles.guidebookJobDataPath({ profile })
+  createWindow(
+    ["codeflare", "dashboard", join(runsDir, runId)],
+    windowOptions({ title: "CodeFlare Dashboard: " + runId })
+  )
+}
+
+export default async function codeflareDashboards(
+  profile: string,
+  createWindow: CreateWindowFunction
+): Promise<MenuItemConstructorOptions[]> {
+  return [
+    {
+      label: "Run Summary",
+      click: () =>
+        createWindow(["codeflare", "get", "run", "--profile", profile], { title: "Codeflare Run Summary: " + profile }),
+    },
+    ...section("Recent Runs", await runs(profile, openRunInCodeflareDashboard.bind(undefined, createWindow))),
+  ]
+}

plugins/plugin-codeflare/src/tray/menus/profiles/dashboards/index.ts

@@ -17,7 +17,19 @@
 import { MenuItemConstructorOptions } from "electron"
 import { CreateWindowFunction } from "@kui-shell/core"
 
+import codeflare from "./codeflare"
+
 /** @return menu items that open dashboards for the given `profile` */
-export default function dashboards(profile: string, createWindow: CreateWindowFunction): MenuItemConstructorOptions[] {
-  return [{ label: "MLFlow", click: () => import("./mlflow").then((_) => _.default(profile, createWindow)) }]
+export default async function dashboards(
+  profile: string,
+  createWindow: CreateWindowFunction
+): Promise<MenuItemConstructorOptions[]> {
+  const mlflow = { name: "MLFlow", portEnv: "MLFLOW_PORT" }
+  const tensorboard = { name: "Tensorboard", portEnv: "TENSORBOARD_PORT" }
+
+  return [
+    { label: "CodeFlare", submenu: await codeflare(profile, createWindow) },
+    { label: "MLFlow", click: () => import("./open").then((_) => _.default(mlflow, profile, createWindow)) },
+    { label: "Tensorboard", click: () => import("./open").then((_) => _.default(tensorboard, profile, createWindow)) },
+  ]
 }

plugins/plugin-codeflare/src/tray/menus/profiles/dashboards/mlflow.ts renamed to plugins/plugin-codeflare/src/tray/menus/profiles/dashboards/open.ts

@@ -19,24 +19,37 @@ import { CreateWindowFunction } from "@kui-shell/core"
 
 import windowOptions from "../../../window"
 
-export default async function openMLFlow(profile: string, createWindow: CreateWindowFunction) {
-  const guidebook = "ml/ray/start/kubernetes/port-forward/mlflow"
+interface DashboardSpec {
+  /** Label for presentation e.g. "MLFlow" or "Tensorboard" */
+  name: string
 
+  /** If absent, the guidebook is of the form "ml/<name.toLowerCase()>/start/kubernetes/port-forward"; you can provide the full path instead */
+  guidebook?: string
+
+  /** Name of environment variable that stores the dashboard port */
+  portEnv: string
+}
+
+export default async function openDashboard(
+  { name, guidebook = `ml/${name.toLowerCase()}/start/kubernetes/port-forward`, portEnv }: DashboardSpec,
+  profile: string,
+  createWindow: CreateWindowFunction
+) {
   const resp = await cli(["madwizard", "guide", guidebook], undefined, {
     clean: false /* don't kill the port-forward subprocess! we'll manage that */,
     interactive: false,
     store: process.env.GUIDEBOOK_STORE,
   })
 
   if (resp) {
-    if (!resp.env.MLFLOW_PORT) {
-      console.error("Unable to open MLFlow, due to an error in connecting to the remote server")
+    if (!resp.env[portEnv]) {
+      console.error(`Unable to open ${name}, due to an error in connecting to the remote server`)
     } else {
       // the `createWindow` api returns a promise that will resolve
       // when the window closes
       await createWindow(
-        "http://localhost:" + resp.env.MLFLOW_PORT,
-        windowOptions({ title: "MLFlow Dashboard " + profile }) // might not matter, as MLFlow's web page has its own title
+        "http://localhost:" + resp.env[portEnv],
+        windowOptions({ title: `${name} Dashboard ` + profile }) // might not matter, as most dashboards have their own title
       )
 
       // now the window has closed, so we can clean up any

plugins/plugin-codeflare/src/tray/menus/profiles/index.ts

@@ -18,28 +18,13 @@ import { Profiles } from "madwizard"
 import { MenuItemConstructorOptions } from "electron"
 import { CreateWindowFunction } from "@kui-shell/core"
 
-import runs from "./runs"
-import boot from "./boot"
-import shutdown from "./shutdown"
+import status from "./status"
+import tasks from "./tasks"
 import dashboards from "./dashboards"
 
 import section from "../section"
 import UpdateFunction from "../../update"
 import { profileIcon } from "../../icons"
-import ProfileStatusWatcher from "../../watchers/profile/status"
-
-/** Memo of `ProfileStatusWatcher`, keyed by profile name */
-const watchers: Record<string, ProfileStatusWatcher> = {}
-
-/** @return menu items for the status of the given `profile` */
-function status(profile: string, updateFunction: UpdateFunction) {
-  if (!watchers[profile]) {
-    watchers[profile] = new ProfileStatusWatcher(profile, updateFunction)
-  }
-  const watcher = watchers[profile]
-
-  return [watcher.head, watcher.workers]
-}
 
 /** @return a menu for the given `profile` */
 async function profileMenu(
@@ -53,11 +38,9 @@ async function profileMenu(
     label: profile,
     icon: profileIcon,
     submenu: [
-      boot(profile, createWindow),
-      shutdown(profile, createWindow),
-      ...section("Status", status(profile, updateFunction), true),
-      ...section("Dashboards", dashboards(profile, createWindow), true),
-      ...section("Recent Runs", await runs(profile, createWindow), true),
+      ...section("Status", status(profile, updateFunction)),
+      ...section("Dashboards", await dashboards(profile, createWindow)),
+      ...section("Tasks", tasks(profile, createWindow)),
     ],
   }
 }
@@ -75,5 +58,5 @@ export default async function profilesMenu(
       .map((_) => profileMenu(_.profile, createWindow, updateFn))
   )
 
-  return section("Profiles", profiles)
+  return section("Profiles", profiles, false)
 }