Skip to content

Commit

Permalink
Add description and alerts for job commands on Lookout UI (armadaproj…
Browse files Browse the repository at this point in the history 
…ect#4152)

Add optional descriptions and alerts for commands for a job displayed on the Lookout UI. These can be specified in Markdown.
  • Loading branch information
@mauriceyap
mauriceyap authored Jan 17, 2025
1 parent 8db0d5e commit 2ca67c9
Show file tree
Hide file tree
Showing 7 changed files with 124 additions and 26 deletions.
4 changes: 4 additions & 0 deletions config/lookoutv2/config.yaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
2 changes: 2 additions & 0 deletions internal/lookout/ui/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
53 changes: 36 additions & 17 deletions internal/lookout/ui/src/components/lookoutV2/sidebar/SidebarTabJobCommands.tsx
View file
Original file line number Diff line number Diff line change
@@ -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"

Expand All @@ -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[]
Expand All @@ -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>
)
})}
Expand Down
25 changes: 21 additions & 4 deletions internal/lookout/ui/src/services/lookoutV2/useGetUiConfig.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
28 changes: 25 additions & 3 deletions internal/lookout/ui/src/utils.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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
Expand Down
14 changes: 13 additions & 1 deletion internal/lookout/ui/yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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==
Expand Down
24 changes: 23 additions & 1 deletion internal/lookoutv2/configuration/types.go
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down

0 comments on commit 2ca67c9

Please sign in to comment.