add new hello layout page with asciinema thumbnails and profiles listings

Author: Pablo Carmona

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

@@ -6,13 +6,33 @@ layout:
         position: default
     2:
         position: default
+    3:
+        position: default
 ---
 
 <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.
 
+From your terminal, try running `codeflare` to be guided through running jobs against the Cloud.
+
 ---
 
-## Next Steps
+```shell
+---
+execute: now
+outputOnly: true
+---
+codeflare gallery
+```
 
-From your terminal, try running `codeflare` to be guided through running jobs against the Cloud.
+---
+
+## Available Appliances
+
+```shell
+---
+execute: now
+outputOnly: true
+---
+codeflare get profile
+```

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

@@ -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 React from "react"
+import { Gallery, GalleryItem } from "@patternfly/react-core"
+
+export default class CodeFlareGallery extends React.PureComponent {
+  public render() {
+    return (
+      <Gallery className="hello__use-cases" hasGutter>
+        <GalleryItem>
+          <a href="https://asciinema.org/a/kYps2jg978lUwvyLfQXKrBsUZ" target="_blank">
+            <img src="https://asciinema.org/a/kYps2jg978lUwvyLfQXKrBsUZ.svg" />
+          </a>
+        </GalleryItem>
+        <GalleryItem>
+          <a href="https://asciinema.org/a/kYps2jg978lUwvyLfQXKrBsUZ" target="_blank">
+            <img src="https://asciinema.org/a/kYps2jg978lUwvyLfQXKrBsUZ.svg" />
+          </a>
+        </GalleryItem>
+        <GalleryItem>
+          <a href="https://asciinema.org/a/kYps2jg978lUwvyLfQXKrBsUZ" target="_blank">
+            <img src="https://asciinema.org/a/kYps2jg978lUwvyLfQXKrBsUZ.svg" />
+          </a>
+        </GalleryItem>
+        <GalleryItem>
+          <a href="https://asciinema.org/a/kYps2jg978lUwvyLfQXKrBsUZ" target="_blank">
+            <img src="https://asciinema.org/a/kYps2jg978lUwvyLfQXKrBsUZ.svg" />
+          </a>
+        </GalleryItem>
+      </Gallery>
+    )
+  }
+}

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

@@ -18,6 +18,14 @@ import { Arguments } from "@kui-shell/core"
 
 import "../../web/scss/components/Hello/_index.scss"
 
+export async function gallery() {
+  const React = await import("react")
+  const CodeFlareGallery = await import("../components/CodeFlareGallery")
+  return {
+    react: React.createElement(CodeFlareGallery.default, {}),
+  }
+}
+
 export default function hello(args: Arguments) {
   return args.REPL.qexec("commentary --readonly -f /kui/client/hello.md")
 }

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

@@ -50,7 +50,7 @@ export default function registerCodeflareCommands(registrar: Registrar) {
 
   registrar.listen("/codeflare/rename/profile", (args) => import("./profile/rename").then((_) => _.default(args)))
 
-  registrar.listen("/codeflare/get/profile", (args) => import("./profile/get").then((_) => _.default(args)), {
+  registrar.listen("/codeflare/get/profile", () => import("./profile/get").then((_) => _.default()), {
     needsUI: true,
   })
   registrar.listen("/codeflare/get/run", (args) => import("./run/get").then((_) => _.default(args)), {
@@ -66,6 +66,10 @@ export default function registerCodeflareCommands(registrar: Registrar) {
     height: 600,
   })
 
+  registrar.listen("/codeflare/gallery", () => import("./hello").then((_) => _.gallery()), {
+    outputOnly: true,
+  })
+
   /**
    * Register a catch-all command handler: any `/^codeflare/` command
    * lines, send to madwizard.

plugins/plugin-codeflare/src/controller/profile/get.tsx

@@ -16,11 +16,10 @@
 
 import React from "react"
 import { Profiles } from "madwizard"
-import { Arguments } from "@kui-shell/core"
 import { Grid, GridItem, Tile } from "@patternfly/react-core"
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-export default async function getProfiles(args: Arguments) {
+export default async function getProfiles() {
   const profiles = await Profiles.list({})
 
   return {

plugins/plugin-codeflare/web/scss/components/Hello/_index.scss

@@ -25,6 +25,12 @@
       grid-template-columns: 1fr;
       grid-template-areas: "T1" "T2";
     }
+
+    @include Split(3) {
+      grid-template-rows: 1fr 1fr 1fr;
+      grid-template-columns: 1fr;
+      grid-template-areas: "T1" "T2" "T3";
+    }
   }
 }