feat: add Dashboard tray menu, with MLFlow entry

This menu item uses the ml/ray/start/kubernetes/port-forward/mlflow guidebook to set up a port forward to the mlflow service started by the codeflare ray helm chart. It opens a kui window to localhost:thatPort, and then tears down the port-forward when the user closes that popup window.

Author: starpit

package-lock.json

@@ -86,10 +86,10 @@
     "printWidth": 120
   },
   "devDependencies": {
-    "@kui-shell/builder": "11.5.0-dev-20220718-153910",
-    "@kui-shell/proxy": "11.5.0-dev-20220718-153910",
-    "@kui-shell/react": "11.5.0-dev-20220718-153910",
-    "@kui-shell/webpack": "11.5.0-dev-20220718-153910",
+    "@kui-shell/builder": "11.5.0-dev-20220722-172700",
+    "@kui-shell/proxy": "11.5.0-dev-20220722-172700",
+    "@kui-shell/react": "11.5.0-dev-20220722-172700",
+    "@kui-shell/webpack": "11.5.0-dev-20220722-172700",
     "@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-20220718-153910",
-    "@kui-shell/plugin-bash-like": "11.5.0-dev-20220718-153910",
-    "@kui-shell/plugin-client-common": "11.5.0-dev-20220718-153910",
+    "@kui-shell/core": "11.5.0-dev-20220722-172700",
+    "@kui-shell/plugin-bash-like": "11.5.0-dev-20220722-172700",
+    "@kui-shell/plugin-client-common": "11.5.0-dev-20220722-172700",
     "@kui-shell/plugin-codeflare": "file:./plugins/plugin-codeflare",
-    "@kui-shell/plugin-core-support": "11.5.0-dev-20220718-153910",
-    "@kui-shell/plugin-electron-components": "11.5.0-dev-20220718-153910",
-    "@kui-shell/plugin-kubectl": "11.5.0-dev-20220718-153910",
+    "@kui-shell/plugin-core-support": "11.5.0-dev-20220722-172700",
+    "@kui-shell/plugin-electron-components": "11.5.0-dev-20220722-172700",
+    "@kui-shell/plugin-kubectl": "11.5.0-dev-20220722-172700",
     "@kui-shell/plugin-madwizard": "file:./plugins/plugin-madwizard",
-    "@kui-shell/plugin-patternfly4-themes": "11.5.0-dev-20220718-153910",
-    "@kui-shell/plugin-proxy-support": "11.5.0-dev-20220718-153910",
-    "@kui-shell/plugin-s3": "11.5.0-dev-20220718-153910"
+    "@kui-shell/plugin-patternfly4-themes": "11.5.0-dev-20220722-172700",
+    "@kui-shell/plugin-proxy-support": "11.5.0-dev-20220722-172700",
+    "@kui-shell/plugin-s3": "11.5.0-dev-20220722-172700"
   }
 }

package.json

@@ -42,8 +42,8 @@ export default function registerCodeflareCommands(registrar: Registrar) {
   registrar.listen("/help", help)
 
   registrar.listen("/codeflare/version", () => import("@kui-shell/client/package.json").then((_) => _.version))
-
   registrar.listen("/codeflare/gui/guide", (args) => import("./guide").then((_) => _.default(args)), {
+    needsUI: true,
     width: 1280,
     height: 800,
   })

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

@@ -0,0 +1,23 @@
+/*
+ * 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 { MenuItemConstructorOptions } from "electron"
+import { CreateWindowFunction } from "@kui-shell/core"
+
+/** @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)) }]
+}

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

@@ -0,0 +1,49 @@
+/*
+ * 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 { cli } from "madwizard/dist/fe/cli"
+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"
+
+  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")
+    } 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
+      )
+
+      // now the window has closed, so we can clean up any
+      // subprocesses spawned by the guidebook
+      if (typeof resp.cleanExit === "function") {
+        resp.cleanExit()
+      }
+    }
+  }
+}

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

@@ -18,10 +18,12 @@ 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 runs from "./runs"
+import dashboards from "./dashboards"
 
+import section from "../section"
 import UpdateFunction from "../../update"
 import { profileIcon } from "../../icons"
 import ProfileStatusWatcher from "../../watchers/profile/status"
@@ -36,27 +38,26 @@ function status(profile: string, updateFunction: UpdateFunction) {
   }
   const watcher = watchers[profile]
 
-  return [{ label: "Status", enabled: false }, watcher.head, watcher.workers]
+  return [watcher.head, watcher.workers]
 }
 
 /** @return a menu for the given `profile` */
 async function profileMenu(
-  profile: string,
+  profileObj: Profiles.Profile,
   createWindow: CreateWindowFunction,
   updateFunction: UpdateFunction
 ): Promise<MenuItemConstructorOptions> {
+  const profile = profileObj.name
+
   return {
     label: profile,
     icon: profileIcon,
     submenu: [
       boot(profile, createWindow),
       shutdown(profile, createWindow),
-
-      { type: "separator" },
-      ...status(profile, updateFunction),
-
-      { type: "separator" },
-      ...(await runs(profile, createWindow)),
+      ...section("Status", status(profile, updateFunction), true),
+      ...section("Dashboards", dashboards(profile, createWindow), true),
+      ...section("Recent Runs", await runs(profile, createWindow), true),
     ],
   }
 }
@@ -66,13 +67,13 @@ export default async function profilesMenu(
   createWindow: CreateWindowFunction,
   updateFn: UpdateFunction
 ): Promise<MenuItemConstructorOptions[]> {
-  const profiles = await Profiles.list({})
+  // this will be a list of menu items, one per profile, and sorted by
+  // profile name
+  const profiles = await Promise.all(
+    (await Profiles.list({}))
+      .sort((a, b) => a.profile.name.localeCompare(b.profile.name))
+      .map((_) => profileMenu(_.profile, createWindow, updateFn))
+  )
 
-  return [
-    {
-      label: "Profiles",
-      enabled: false,
-    },
-    ...(await Promise.all(profiles.map((_) => profileMenu(_.profile.name, createWindow, updateFn)))),
-  ]
+  return section("Profiles", profiles)
 }

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

@@ -61,8 +61,5 @@ export default async function submenuForRuns(
 ): Promise<MenuItemConstructorOptions[]> {
   const runs = await readRunsDir(profile)
 
-  return [
-    { label: "Recent Runs", enabled: false },
-    ...(runs.length && runs[0] !== RUNS_ERROR ? runMenuItems(profile, createWindow, runs) : [{ label: RUNS_ERROR }]),
-  ]
+  return runs.length && runs[0] !== RUNS_ERROR ? runMenuItems(profile, createWindow, runs) : [{ label: RUNS_ERROR }]
 }

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

@@ -0,0 +1,35 @@
+/*
+ * 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 { MenuItemConstructorOptions } from "electron"
+
+/**
+ * @return the given list of menu `items`, with a prepended "header"
+ * item that has the given `label`. If `separator` is true, an additional
+ * initial separator menu item will be prepended to the returned list.
+ *
+ */
+export default function section(
+  label: string,
+  items: MenuItemConstructorOptions[],
+  separator = false
+): MenuItemConstructorOptions[] {
+  return [
+    ...(separator ? [{ type: "separator" as const }] : []),
+    { label, enabled: false }, // at least on macOS, this gives a nice header-like appearance
+    ...items,
+  ]
+}