feat: format summary as a patterfly DescriptionList

Author: Pablo Carmona

package-lock.json

@@ -1,12 +1,9 @@
 === "Summary"
 
-    ```json
+    ```shell
     ---
-    language: yaml
-    exclude:
-        - .source
-        - .language
-        - .runtimeEnv
+    execute: now
+    outputOnly: true
     ---
-    --8<-- "$LOGDIR/job.json"
+    description $LOGDIR/job.json
     ```

plugins/plugin-client-default/notebooks/dashboard-summary.md

@@ -23,6 +23,7 @@
     "access": "public"
   },
   "dependencies": {
+    "@patternfly/react-core": "^4.221.3",
     "@patternfly/react-charts": "^6.74.3",
     "strip-ansi": "6.0.0"
   }

plugins/plugin-codeflare/package.json

@@ -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 React from "react"
+
+import {
+  DescriptionList,
+  DescriptionListTerm,
+  DescriptionListGroup,
+  DescriptionListDescription,
+} from "@patternfly/react-core"
+
+import { Summary } from "../controller/description"
+
+import "../../web/scss/components/Dashboard/Description.scss"
+
+type Props = {
+  summaryData: Summary
+}
+
+const Description = (props: Props) => {
+  const { summaryData } = props
+
+  return (
+    <DescriptionList>
+      {Object.values(summaryData).map(({ label, value }, index) => (
+        <DescriptionListGroup key={index}>
+          <DescriptionListTerm>{label}</DescriptionListTerm>
+          <DescriptionListDescription>{value}</DescriptionListDescription>
+        </DescriptionListGroup>
+      ))}
+    </DescriptionList>
+  )
+}
+
+export default Description

plugins/plugin-codeflare/src/components/Description.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 { Arguments, Registrar } from "@kui-shell/core"
+import { expand } from "../lib/util"
+
+export type Summary = {
+  appClass: { label: string; value: string }
+  appName: { label: string; value: string }
+  language: { label: string; value: string }
+  pythonVersion: { label: string; value: string }
+  rayVersion: { label: string; value: string }
+  gpuClass: { label: string; value: string }
+  workerGPUs: { label: string; value: string }
+  workerMemory: { label: string; value: string }
+  workerCount: { label: string; value: string }
+  status: { label: string; value: string }
+  parameters: { label: string; value: string }
+  dataSources: { label: string; value: string }
+}
+
+export type SummaryResponse = {
+  jobid: string
+  cmdline: {
+    appPart: string
+    systemPart: string
+  }
+  runtimeEnv: {
+    env_vars: {
+      KUBE_NS: string
+      WORKER_MEMORY: string
+      NUM_GPUS: string
+      MIN_WORKERS: string
+      MAX_WORKERS: string
+      RAY_IMAGE: string
+    }
+  }
+  language: string
+  source: string
+}
+
+async function description(args: Arguments) {
+  const filepath = args.argvNoOptions[1]
+  if (!filepath) {
+    throw new Error("Usage: codeflare description <filepath>")
+  }
+
+  const summaryCmd = JSON.parse(await args.REPL.qexec<string>(`vfs fslice ${expand(filepath)} 0`))
+  const { KUBE_NS, WORKER_MEMORY, NUM_GPUS, MIN_WORKERS, MAX_WORKERS, RAY_IMAGE } = summaryCmd.runtimeEnv.env_vars
+
+  const summaryData = {
+    appClass: { label: "Application Class", value: "Unknown" },
+    appName: { label: "Application Name", value: "Unknown" },
+    language: { label: "Source Language", value: summaryCmd.language },
+    pythonVersion: { label: "Python Version", value: "Unknown" },
+    rayVersion: { label: "Ray Version", value: RAY_IMAGE },
+    gpuClass: { label: "GPU Class", value: KUBE_NS },
+    workerGPUs: { label: "GPUs per Worker", value: NUM_GPUS },
+    workerMemory: { label: "Memory per Worker", value: WORKER_MEMORY },
+    workerCount: { label: "Worker Count", value: `${MIN_WORKERS}-${MAX_WORKERS}` },
+    status: { label: "Status", value: "Unknown" },
+    parameters: { label: "Parameters", value: "Unknown" },
+    dataSources: { label: "Data Sources", value: "Unknown" },
+  }
+
+  const React = await import("react")
+  const Description = await import("../components/Description")
+
+  return {
+    react: React.createElement(Description.default, { summaryData }),
+  }
+}
+
+export default function registerDescriptionCommands(registrar: Registrar) {
+  registrar.listen("/description", description, { needsUI: true, outputOnly: true })
+}

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

@@ -17,6 +17,7 @@
 import { Registrar } from "@kui-shell/core"
 import dashboard from "./controller/dashboard"
 import charts from "./controller/charts"
+import description from "./controller/description"
 
 function help() {
   return `Usage:
@@ -29,5 +30,6 @@ codeflare chart gpu /path/to/logdir`
 export default function registerCodeflareCommands(registrar: Registrar) {
   dashboard(registrar)
   charts(registrar)
+  description(registrar)
   registrar.listen("/help", help)
 }

plugins/plugin-codeflare/src/plugin.ts

@@ -0,0 +1,38 @@
+/*
+ * 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";
+
+@include Scrollback {
+  dd {
+    margin: 0;
+  }
+  .pf-c-description-list {
+    grid-template-columns: 1fr;
+    padding: 0 1em;
+  }
+  .pf-c-description-list__group {
+    grid-template-columns: 1fr;
+  }
+  .pf-c-description-list__term,
+  .pf-c-description-list__description {
+    grid-column-start: unset;
+  }
+  .pf-c-description-list__description {
+    font-weight: 300;
+    color: var(--color-text-02);
+  }
+}

plugins/plugin-codeflare/web/scss/components/Dashboard/Description.scss

@@ -31,13 +31,13 @@
 @include TopLevelTab {
   @include Split(3) {
     @include Rows(5);
-    @include Columns(7);
+    @include Columns(12);
     grid-template-areas:
-      "T1 T1 T3 T3 T3 T3 T3"
-      "T1 T1 T3 T3 T3 T3 T3"
-      "T1 T1 T3 T3 T3 T3 T3"
-      "T2 T2 T2 T2 T2 T2 T2"
-      "T2 T2 T2 T2 T2 T2 T2";
+      "T1 T1 T1 T3 T3 T3 T3 T3 T3 T3 T3 T3"
+      "T1 T1 T1 T3 T3 T3 T3 T3 T3 T3 T3 T3"
+      "T1 T1 T1 T3 T3 T3 T3 T3 T3 T3 T3 T3"
+      "T1 T1 T1 T2 T2 T2 T2 T2 T2 T2 T2 T2"
+      "T1 T1 T1 T2 T2 T2 T2 T2 T2 T2 T2 T2";
   }
 }