feat: initial "welcome" popup

starpit · starpit · commit 6b98b4e9922b · 2022-07-15T09:08:32.000-04:00
Show this, instead of a blank terminal window when opening a new window.
Also update the tray menu to open this new popup rather than visiting the codeflare home page, when clicking the first menu item.

The design here is still largely a work in progress.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -86,10 +86,10 @@
     "printWidth": 120
   },
   "devDependencies": {
-    "@kui-shell/builder": "11.5.0-dev-20220713-201002",
-    "@kui-shell/proxy": "11.5.0-dev-20220713-201002",
-    "@kui-shell/react": "11.5.0-dev-20220713-201002",
-    "@kui-shell/webpack": "11.5.0-dev-20220713-201002",
+    "@kui-shell/builder": "11.5.0-dev-20220714-155044",
+    "@kui-shell/proxy": "11.5.0-dev-20220714-155044",
+    "@kui-shell/react": "11.5.0-dev-20220714-155044",
+    "@kui-shell/webpack": "11.5.0-dev-20220714-155044",
     "@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-20220713-201002",
-    "@kui-shell/plugin-bash-like": "11.5.0-dev-20220713-201002",
-    "@kui-shell/plugin-client-common": "11.5.0-dev-20220713-201002",
+    "@kui-shell/core": "11.5.0-dev-20220714-155044",
+    "@kui-shell/plugin-bash-like": "11.5.0-dev-20220714-155044",
+    "@kui-shell/plugin-client-common": "11.5.0-dev-20220714-155044",
     "@kui-shell/plugin-codeflare": "file:./plugins/plugin-codeflare",
-    "@kui-shell/plugin-core-support": "11.5.0-dev-20220713-201002",
-    "@kui-shell/plugin-electron-components": "11.5.0-dev-20220713-201002",
-    "@kui-shell/plugin-kubectl": "11.5.0-dev-20220713-201002",
+    "@kui-shell/plugin-core-support": "11.5.0-dev-20220714-155044",
+    "@kui-shell/plugin-electron-components": "11.5.0-dev-20220714-155044",
+    "@kui-shell/plugin-kubectl": "11.5.0-dev-20220714-155044",
     "@kui-shell/plugin-madwizard": "file:./plugins/plugin-madwizard",
-    "@kui-shell/plugin-patternfly4-themes": "11.5.0-dev-20220713-201002",
-    "@kui-shell/plugin-proxy-support": "11.5.0-dev-20220713-201002",
-    "@kui-shell/plugin-s3": "11.5.0-dev-20220713-201002"
+    "@kui-shell/plugin-patternfly4-themes": "11.5.0-dev-20220714-155044",
+    "@kui-shell/plugin-proxy-support": "11.5.0-dev-20220714-155044",
+    "@kui-shell/plugin-s3": "11.5.0-dev-20220714-155044"
   }
 }
diff --git a/plugins/plugin-client-default/config.d/style.json b/plugins/plugin-client-default/config.d/style.json
@@ -1,3 +1,5 @@
 {
+  "width": 800,
+  "height": 600,
   "defaultTheme": "PatternFly4 Light"
 }
diff --git a/plugins/plugin-client-default/notebooks/welcome.md b/plugins/plugin-client-default/notebooks/welcome.md
@@ -0,0 +1,45 @@
+---
+title: Welcome
+className: codeflare--welcome-guidebook
+layout:
+    1:
+        position: default
+        maximized: true
+    2: 
+        position: default
+        maximized: true
+    3: 
+        position: default
+        maximized: true
+        inverseColors: true
+---
+
+<img alt="CodeFlare Icon" src="@kui-shell/client/icons/svg/codeflare.svg" width="80" height="80" />
+
+---
+
+<!-- TODO find some content to place here? -->
+
+---
+
+=== "Job Runs"
+
+    ```shell
+    ---
+    execute: now
+    maximize: true
+    outputOnly: true
+    ---
+    codeflare get run
+    ```
+
+=== "Profiles"
+
+    ```shell
+    ---
+    execute: now
+    maximize: true
+    outputOnly: true
+    ---
+    codeflare get profile
+    ```
diff --git a/plugins/plugin-client-default/src/index.tsx b/plugins/plugin-client-default/src/index.tsx
@@ -1,5 +1,5 @@
 /*
- * Copyright 2020 The Kubernetes Authors
+ * 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.
@@ -26,6 +26,8 @@ import { productTitle } from "@kui-shell/client/config.d/name.json"
 
 import CodeFlareWidget from "./CodeFlareWidget"
 
+import "../web/scss/guidebooks/welcome.scss"
+
 /**
  * We will set this bit when the user dismisses the Welcome to Kui
  * tab, so as to avoid opening it again and bothering that user for
@@ -54,9 +56,14 @@ export default function renderMain(props: KuiProps) {
       noNewTabButton
       noNewSplitButton
       {...props}
-      initialTabTitle="Dashboard"
+      initialTabTitle="Welcome"
       isPopup={false}
       quietExecCommand={false}
+      commandLine={
+        process.env.RUNNING_KUI_TEST
+          ? undefined
+          : props.commandLine || ["commentary", "--readonly", "-f", "/kui/client/welcome.md"]
+      }
     >
       <ContextWidgets>
         <GitHubIcon />
diff --git a/plugins/plugin-client-default/web/scss/guidebooks/welcome.scss b/plugins/plugin-client-default/web/scss/guidebooks/welcome.scss
@@ -0,0 +1,28 @@
+/*
+ * 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 "@kui-shell/plugin-client-common/web/scss/components/Terminal/mixins";
+@import "@kui-shell/plugin-client-common/web/scss/components/TopLevelTab/mixins";
+
+@include TopLevelTab {
+  &.codeflare--welcome-guidebook {
+    @include Split(3) {
+      grid-template-rows: 80px 1fr;
+      grid-template-columns: 80px 1fr;
+      grid-template-areas: "T1 T2" "T3 T3";
+    }
+  }
+}
diff --git a/plugins/plugin-codeflare/src/controller/dashboard.ts b/plugins/plugin-codeflare/src/controller/dashboard.ts
@@ -58,6 +58,12 @@ async function dashboardui(args: Arguments<DashboardOptions>) {
   return args.REPL.qexec(`commentary -f /kui/client/dashboard.md`)
 }
 
+/** Desired window width */
+export const width = 1280
+
+/** Desired window height */
+export const height = 960
+
 export default function registerDashboardCommands(registrar: Registrar) {
   const flags = followFlags
 
@@ -68,7 +74,7 @@ export default function registerDashboardCommands(registrar: Registrar) {
     needsUI: true,
     outputOnly: true,
     flags,
-    width: 1280,
-    height: 960,
+    width,
+    height,
   })
 }
diff --git a/plugins/plugin-codeflare/src/controller/description.ts b/plugins/plugin-codeflare/src/controller/description.ts
@@ -48,13 +48,21 @@ function jobDefinition(filepath: string) {
   return encodeComponent(expand(join(filepath.replace(/'/g, ""), "ray-job-definition.json")))
 }
 
+export async function getJobDefinition(runDir: string, REPL: Arguments["REPL"]) {
+  try {
+    return JSON.parse(await REPL.qexec<string>(`vfs fslice ${encodeComponent(jobDefinition(runDir))} 0`))
+  } catch (err) {
+    console.error(runDir, err)
+  }
+}
+
 async function app(args: Arguments) {
   const filepath = args.argvNoOptions[2]
   if (!filepath) {
     throw new Error("Usage: description application <filepath>")
   }
 
-  const jobInfo = JSON.parse(await args.REPL.qexec<string>(`vfs fslice ${jobDefinition(filepath)} 0`))
+  const jobInfo = await getJobDefinition(filepath, args.REPL)
   const { RAY_IMAGE } = jobInfo.runtime_env.env_vars
 
   const status = jobInfo.status.toLowerCase()
diff --git a/plugins/plugin-codeflare/src/controller/index.ts b/plugins/plugin-codeflare/src/controller/index.ts
@@ -39,4 +39,9 @@ export default function registerCodeflareCommands(registrar: Registrar) {
   dashboard(registrar)
   description(registrar)
   registrar.listen("/help", help)
+
+  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 })
 }
diff --git a/plugins/plugin-codeflare/src/controller/profile/get.tsx b/plugins/plugin-codeflare/src/controller/profile/get.tsx
@@ -0,0 +1,39 @@
+/*
+ * 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 React from "react"
+import { Profiles } from "madwizard"
+import { Arguments } from "@kui-shell/core"
+import { Grid, GridItem, Tile } from "@patternfly/react-core"
+
+import "../../../web/scss/components/Welcome/_index.scss"
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export default async function getProfiles(args: Arguments) {
+  const profiles = await Profiles.list({})
+
+  return {
+    react: (
+      <Grid hasGutter className="codeflare--grid">
+        {profiles.map((_) => (
+          <GridItem key={_.profile.name}>
+            <Tile className="codeflare--tile" title={_.profile.name} />
+          </GridItem>
+        ))}
+      </Grid>
+    ),
+  }
+}
diff --git a/plugins/plugin-codeflare/src/controller/run/get.tsx b/plugins/plugin-codeflare/src/controller/run/get.tsx
@@ -0,0 +1,89 @@
+/*
+ * 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 React from "react"
+import { join } from "path"
+import { readdir } from "fs"
+import { Profiles } from "madwizard"
+import { Grid, GridItem, Tile } from "@patternfly/react-core"
+import { Arguments, ReactResponse } from "@kui-shell/core"
+
+import { width, height } from "../dashboard"
+import { getJobDefinition } from "../description"
+
+import "../../../web/scss/components/Welcome/_index.scss"
+
+async function openDashboard(this: Arguments["REPL"], evt: React.MouseEvent<HTMLDivElement>) {
+  const runDir = evt.currentTarget.getAttribute("data-run-dir")
+  if (runDir) {
+    const { ipcRenderer } = await import("electron")
+    ipcRenderer.send(
+      "synchronous-message",
+      JSON.stringify({
+        operation: "new-window",
+        title: "Dashboard",
+        width,
+        height,
+        argv: ["codeflare", "dashboardui", runDir],
+      })
+    )
+  }
+}
+
+export default async function getProfiles(args: Arguments) {
+  const onClick = openDashboard.bind(args.REPL)
+
+  return new Promise<ReactResponse>((resolve, reject) => {
+    const runsDir = Profiles.guidebookJobDataPath({})
+    readdir(runsDir, async (err, runs) => {
+      if (err) {
+        if (err.code === "ENOENT") {
+          return "No runs to show"
+        } else {
+          reject(err)
+        }
+      } else {
+        const runDirs = runs.map((_) => join(runsDir, _))
+        const details = (await Promise.all(runDirs.map((_) => getJobDefinition(_, args.REPL))))
+          .map((info, idx) => ({
+            jobId: runs[idx],
+            runDir: runDirs[idx],
+            info,
+          }))
+          .filter((_) => !!_.info)
+
+        resolve({
+          react: (
+            <Grid span={1} className="codeflare--grid codeflare--mini">
+              {details.map((_) => (
+                <GridItem key={_.jobId}>
+                  <Tile
+                    className="codeflare--tile"
+                    data-job-id={_.jobId}
+                    data-run-dir={_.runDir}
+                    data-status={_.info.status}
+                    title={_.jobId.slice(0, _.jobId.indexOf("-"))}
+                    onClick={onClick}
+                  />
+                </GridItem>
+              ))}
+            </Grid>
+          ),
+        })
+      }
+    })
+  })
+}
diff --git a/plugins/plugin-codeflare/src/electron-main.ts b/plugins/plugin-codeflare/src/electron-main.ts
@@ -14,8 +14,8 @@
  * limitations under the License.
  */
 
-export async function initTray(args: { command: string } /* , _: unknown , createWindow: (argv: string[]) => void */) {
+export async function initTray(args: { command: string }, _: unknown, createWindow: (argv: string[]) => void) {
   if (args.command === "/tray/init") {
-    import("./tray").then((_) => _.main(/* createWindow */))
+    import("./tray").then((_) => _.main(createWindow))
   }
 }
diff --git a/plugins/plugin-codeflare/src/tray.ts b/plugins/plugin-codeflare/src/tray.ts
@@ -19,7 +19,7 @@ import { Choices, Profiles } from "madwizard"
 import { MenuItemConstructorOptions } from "electron"
 
 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"
 
 let tray: null | InstanceType<typeof import("electron").Tray> = null
 
@@ -33,11 +33,11 @@ async function profilesMenu(): Promise<MenuItemConstructorOptions> {
   return { label: "Profiles", submenu: profiles.map(profileMenu) }
 }
 
-async function buildContextMenu(/* createWindow: (argv: string[]) => void */) {
+async function buildContextMenu(createWindow: (argv: string[]) => void) {
   const { Menu } = await import("electron")
 
   const contextMenu = Menu.buildFromTemplate([
-    { label: `CodeFlare v${version}`, click: () => open(homepage) },
+    { label: `CodeFlare v${version}`, click: () => createWindow([]) },
     { type: "separator" },
     await profilesMenu(),
     { type: "separator" },
@@ -58,7 +58,7 @@ async function buildContextMenu(/* createWindow: (argv: string[]) => void */) {
   return contextMenu
 }
 
-export async function main(/* createWindow: (argv: string[]) => void */) {
+export async function main(createWindow: (argv: string[]) => void) {
   if (tray) {
     // only register one tray menu...
     return
@@ -74,7 +74,7 @@ export async function main(/* createWindow: (argv: string[]) => void */) {
         tray = new Tray(require.resolve("@kui-shell/build/icons/png/codeflareTemplate.png"))
 
         tray.setToolTip(productName)
-        tray.setContextMenu(await buildContextMenu(/* createWindow */))
+        tray.setContextMenu(await buildContextMenu(createWindow))
       } catch (err) {
         console.error("Error registering electron tray menu", err)
       }
diff --git a/plugins/plugin-codeflare/web/scss/components/Welcome/_index.scss b/plugins/plugin-codeflare/web/scss/components/Welcome/_index.scss

Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,5 @@`
`1`	`1`	`{`
	`2`	`+ "width": 800,`
	`3`	`+ "height": 600,`
`2`	`4`	`"defaultTheme": "PatternFly4 Light"`
`3`	`5`	`}`