X-Git-Url: https://git.arvados.org/arvados-workbench2.git/blobdiff_plain/38d27e9783f7f760cee84cc225e86144069848c4..aa48015966dd61d462f43a1a336b1700c78624aa:/src/store/processes/process.ts diff --git a/src/store/processes/process.ts b/src/store/processes/process.ts index 60505be0..2a81669c 100644 --- a/src/store/processes/process.ts +++ b/src/store/processes/process.ts @@ -19,10 +19,12 @@ export enum ProcessStatus { CANCELLED = 'Cancelled', COMPLETED = 'Completed', DRAFT = 'Draft', + FAILING = 'Failing', FAILED = 'Failed', - LOCKED = 'Locked', + ONHOLD = 'On hold', QUEUED = 'Queued', RUNNING = 'Running', + WARNING = 'Warning', UNKNOWN = 'Unknown', } @@ -71,44 +73,86 @@ export const getProcessRuntime = ({ container }: Process) => { } }; -export const getProcessStatusColor = (status: string, { customs, palette }: ArvadosTheme) => { + +export const getProcessStatusStyles = (status: string, theme: ArvadosTheme): React.CSSProperties => { + let color = theme.customs.colors.grey500; + let running = false; switch (status) { case ProcessStatus.RUNNING: - return customs.colors.blue500; + color = theme.customs.colors.green800; + running = true; + break; case ProcessStatus.COMPLETED: - return customs.colors.green700; + color = theme.customs.colors.green800; + break; + case ProcessStatus.WARNING: + color = theme.customs.colors.green800; + running = true; + break; + case ProcessStatus.FAILING: + color = theme.customs.colors.red900; + running = true; + break; case ProcessStatus.CANCELLED: case ProcessStatus.FAILED: - return customs.colors.red900; + color = theme.customs.colors.red900; + break; + case ProcessStatus.QUEUED: + color = theme.customs.colors.grey600; + running = true; + break; default: - return palette.grey["500"]; + color = theme.customs.colors.grey600; + break; } + + // Using color and running we build the text, border, and background style properties + return { + // Set background color when not running, otherwise use white + backgroundColor: running ? theme.palette.common.white : color, + // Set text color to status color when running, else use white text for solid button + color: running ? color : theme.palette.common.white, + // Set border color when running, else omit the style entirely + ...(running ? {border: `2px solid ${color}`} : {}), + }; }; export const getProcessStatus = ({ containerRequest, container }: Process): ProcessStatus => { switch (true) { + case containerRequest.state === ContainerRequestState.FINAL && + container?.state !== ContainerState.COMPLETE: + // Request was finalized before its container started (or the + // container was cancelled) + return ProcessStatus.CANCELLED; + case containerRequest.state === ContainerRequestState.UNCOMMITTED: return ProcessStatus.DRAFT; - case container && container.state === ContainerState.COMPLETE && container.exitCode === 0: - return ProcessStatus.COMPLETED; + case container?.state === ContainerState.COMPLETE: + if (container?.exitCode === 0) { + return ProcessStatus.COMPLETED; + } + return ProcessStatus.FAILED; - case containerRequest.priority === 0: - case container && container.state === ContainerState.CANCELLED: + case container?.state === ContainerState.CANCELLED: return ProcessStatus.CANCELLED; - case container && container.state === ContainerState.QUEUED: + case container?.state === ContainerState.QUEUED || + container?.state === ContainerState.LOCKED: + if (containerRequest.priority === 0) { + return ProcessStatus.ONHOLD; + } return ProcessStatus.QUEUED; - case container && container.state === ContainerState.LOCKED: - return ProcessStatus.LOCKED; - - case container && container.state === ContainerState.RUNNING: + case container?.state === ContainerState.RUNNING: + if (!!container?.runtimeStatus.error) { + return ProcessStatus.FAILING; + } + if (!!container?.runtimeStatus.warning) { + return ProcessStatus.WARNING; + } return ProcessStatus.RUNNING; - case container && container.state === ContainerState.COMPLETE && container.exitCode !== 0: - return ProcessStatus.FAILED; - default: return ProcessStatus.UNKNOWN; }