Add description and alerts for job commands on Lookout UI

Add optional descriptions and alerts for commands for a job displayed on the Lookout UI. These can be specified in Markdown.

config/lookoutv2/config.yaml

@@ -32,3 +32,7 @@ uiConfig:
       template: "kubectl --context {{ runs[runs.length - 1].cluster }} -n {{ namespace }} logs armada-{{ jobId }}-0"
     - name: Exec
       template: "kubectl --context {{ runs[runs.length - 1].cluster }} -n {{ namespace }} exec -it armada-{{ jobId }}-0 /bin/sh"
+      descriptionMd: Execute a command on the job's container.
+      alertMessageMd: |
+        This will only work if the container is still running.
+      alertLevel: info

internal/lookout/ui/package.json

@@ -38,6 +38,8 @@
     "date-fns-tz": "^1.3.7",
     "js-yaml": "^4.0.0",
     "lodash": "^4.17.21",
+    "markdown-to-jsx": "^7.7.3",
+    "mui-markdown": "^1.2.5",
     "notistack": "^3.0.1",
     "oidc-client-ts": "^2.3.0",
     "prism-react-renderer": "^2.4.1",

internal/lookout/ui/src/components/lookoutV2/sidebar/SidebarTabJobCommands.tsx

@@ -1,6 +1,7 @@
 import { OpenInNew } from "@mui/icons-material"
-import { Link, Stack } from "@mui/material"
+import { Alert, AlertColor, Link, Stack } from "@mui/material"
 import { template, templateSettings } from "lodash"
+import { MuiMarkdown } from "mui-markdown"
 import { Fragment } from "react/jsx-runtime"
 import validator from "validator"
 
@@ -11,6 +12,8 @@ import { SPACING } from "../../../styling/spacing"
 import { CommandSpec } from "../../../utils"
 import { CodeBlock } from "../../CodeBlock"
 
+const KNOWN_ALERT_COLORS: AlertColor[] = ["success", "info", "warning", "error"]
+
 export interface SidebarTabJobCommandsProps {
   job: Job
   commandSpecs: CommandSpec[]
@@ -35,27 +38,43 @@ export const SidebarTabJobCommands = ({ job, commandSpecs }: SidebarTabJobComman
   return (
     <>
       {commandSpecs.map((commandSpec) => {
-        const { name } = commandSpec
+        const { name, descriptionMd, alertLevel, alertMessageMd } = commandSpec
         const commandText = getCommandText(job, commandSpec)
+
+        const alertSeverity: AlertColor =
+          alertLevel && (KNOWN_ALERT_COLORS as string[]).includes(alertLevel) ? (alertLevel as AlertColor) : "info"
+
         return (
           <Fragment key={name}>
             <SidebarTabHeading>{name}</SidebarTabHeading>
-            {validator.isURL(commandText) ? (
-              <Link href={commandText} target="_blank">
-                <Stack direction="row" spacing={SPACING.xs} alignItems="center">
-                  <div>{commandText}</div>
-                  <OpenInNew fontSize="inherit" />
-                </Stack>
-              </Link>
-            ) : (
-              <CodeBlock
-                code={commandText}
-                language="bash"
-                downloadable={false}
-                showLineNumbers={false}
-                loading={false}
-              />
+            {descriptionMd && (
+              <div>
+                <MuiMarkdown>{descriptionMd}</MuiMarkdown>
+              </div>
+            )}
+            {alertMessageMd && (
+              <Alert severity={alertSeverity} variant="outlined">
+                <MuiMarkdown>{alertMessageMd}</MuiMarkdown>
+              </Alert>
             )}
+            <div>
+              {validator.isURL(commandText) ? (
+                <Link href={commandText} target="_blank">
+                  <Stack direction="row" spacing={SPACING.xs} alignItems="center">
+                    <div>{commandText}</div>
+                    <OpenInNew fontSize="inherit" />
+                  </Stack>
+                </Link>
+              ) : (
+                <CodeBlock
+                  code={commandText}
+                  language="bash"
+                  downloadable={false}
+                  showLineNumbers={false}
+                  loading={false}
+                />
+              )}
+            </div>
           </Fragment>
         )
       })}

internal/lookout/ui/src/services/lookoutV2/useGetUiConfig.ts

@@ -55,10 +55,27 @@ export const useGetUiConfig = (enabled = true) => {
         }
 
         if (json.CommandSpecs) {
-          config.commandSpecs = json.CommandSpecs.map(({ Name, Template }: { Name: string; Template: string }) => ({
-            name: Name,
-            template: Template,
-          }))
+          config.commandSpecs = json.CommandSpecs.map(
+            ({
+              Name,
+              Template,
+              DescriptionMd,
+              AlertMessageMd,
+              AlertLevel,
+            }: {
+              Name: string
+              Template: string
+              DescriptionMd: string
+              AlertMessageMd: string
+              AlertLevel: string
+            }) => ({
+              name: Name,
+              template: Template,
+              descriptionMd: DescriptionMd,
+              alertMessageMd: AlertMessageMd,
+              alertLevel: AlertLevel,
+            }),
+          )
         }
 
         if (json.Backend) config.backend = json.Backend

internal/lookout/ui/src/utils.tsx

@@ -9,9 +9,13 @@ export interface OidcConfig {
   clientId: string
   scope: string
 }
+
 export interface CommandSpec {
   name: string
   template: string
+  descriptionMd?: string
+  alertMessageMd?: string
+  alertLevel?: string
 }
 
 export interface UIConfig {
@@ -75,9 +79,27 @@ export async function getUIConfig(): Promise<UIConfig> {
         scope: json.Oidc.Scope,
       }
       if (json.CommandSpecs) {
-        config.commandSpecs = json.CommandSpecs.map((c: { Name: string; Template: string }) => {
-          return { name: c.Name, template: c.Template }
-        })
+        config.commandSpecs = json.CommandSpecs.map(
+          ({
+            Name,
+            Template,
+            DescriptionMd,
+            AlertMessageMd,
+            AlertLevel,
+          }: {
+            Name: string
+            Template: string
+            DescriptionMd: string
+            AlertMessageMd: string
+            AlertLevel: string
+          }) => ({
+            name: Name,
+            template: Template,
+            descriptionMd: DescriptionMd,
+            alertMessageMd: AlertMessageMd,
+            alertLevel: AlertLevel,
+          }),
+        )
       }
     }
     if (json.Backend) config.backend = json.Backend

internal/lookout/ui/yarn.lock

@@ -3261,6 +3261,11 @@ magic-string@^0.30.17:
   dependencies:
     "@jridgewell/sourcemap-codec" "^1.5.0"
 
+markdown-to-jsx@^7.7.3:
+  version "7.7.3"
+  resolved "https://registry.yarnpkg.com/markdown-to-jsx/-/markdown-to-jsx-7.7.3.tgz#c75927252592696e9e8b2a9557628749d8ab023e"
+  integrity sha512-o35IhJDFP6Fv60zPy+hbvZSQMmgvSGdK5j8NRZ7FeZMY+Bgqw+dSg7SC1ZEzC26++CiOUCqkbq96/c3j/FfTEQ==
+
 math-intrinsics@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/math-intrinsics/-/math-intrinsics-1.1.0.tgz#a0dd74be81e2aa5c2f27e65ce283605ee4e2b7f9"
@@ -3325,6 +3330,13 @@ ms@^2.1.1, ms@^2.1.3:
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.3.tgz#574c8138ce1d2b5861f0b44579dbadd60c6615b2"
   integrity sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==
 
+mui-markdown@^1.2.5:
+  version "1.2.5"
+  resolved "https://registry.yarnpkg.com/mui-markdown/-/mui-markdown-1.2.5.tgz#48e8a800c6707f84b77f56f3e553eb00754f15ff"
+  integrity sha512-zgLSXxYgHmUkUZ6mp2aM8C1vcoAsCyQLyvvaiSf8AAutNnAXhA8tlBiiGg8hOvX77VQs1A1dssbOyT/W2ytonA==
+  optionalDependencies:
+    prism-react-renderer "^2.0.3"
+
 nanoid@^3.3.7:
   version "3.3.8"
   resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.8.tgz#b1be3030bee36aaff18bacb375e5cce521684baf"
@@ -3579,7 +3591,7 @@ pretty-format@^29.0.0, pretty-format@^29.7.0:
     ansi-styles "^5.0.0"
     react-is "^18.0.0"
 
-prism-react-renderer@^2.4.1:
+prism-react-renderer@^2.0.3, prism-react-renderer@^2.4.1:
   version "2.4.1"
   resolved "https://registry.yarnpkg.com/prism-react-renderer/-/prism-react-renderer-2.4.1.tgz#ac63b7f78e56c8f2b5e76e823a976d5ede77e35f"
   integrity sha512-ey8Ls/+Di31eqzUxC46h8MksNuGx/n0AAC8uKpwFau4RPDYLuE3EXTp8N8G2vX2N7UC/+IXeNUnlWBGGcAG+Ig==

internal/lookoutv2/configuration/types.go

@@ -36,9 +36,31 @@ type PrunerConfig struct {
 	Postgres                 configuration.PostgresConfig
 }
 
+// Alert level enum values correspond to the severity levels of the MUI Alert
+// component: https://mui.com/material-ui/react-alert/#severity
+type AlertLevel string
+
+const (
+	AlertLevelSuccess AlertLevel = "success"
+	AlertLevelInfo    AlertLevel = "info"
+	AlertLevelWarning AlertLevel = "warning"
+	AlertLevelError   AlertLevel = "error"
+)
+
+// CommandSpec details a command to be displayed on a job's "Commands" sidebar
+// tab in the Lookout UI
 type CommandSpec struct {
-	Name     string
+	// Name is the title of the command
+	Name string
+	// Tempate is the template string for the command
 	Template string
+	// DescriptionMd is an optional description for the command in Markdown
+	DescriptionMd string
+	// AlertMessageMd is an optional message for the command, to be displayed as
+	// an alert, written in Markdown
+	AlertMessageMd string
+	// AlertLevel is the severity level of the alert
+	AlertLevel AlertLevel
 }
 
 type UIConfig struct {