From: Lucas Di Pentima Date: Fri, 1 Apr 2022 15:20:40 +0000 (-0300) Subject: 18881: Fixes process state indicator, with tests. X-Git-Tag: 2.4.1~5^2~7 X-Git-Url: https://git.arvados.org/arvados-workbench2.git/commitdiff_plain/dec2560060035f165662cff34b3a8916927a7ee6 18881: Fixes process state indicator, with tests. Arvados-DCO-1.1-Signed-off-by: Lucas Di Pentima --- diff --git a/src/common/custom-theme.ts b/src/common/custom-theme.ts index 74dee7f6..cff18538 100644 --- a/src/common/custom-theme.ts +++ b/src/common/custom-theme.ts @@ -26,10 +26,12 @@ interface Colors { yellow700: string; red900: string; blue500: string; + grey500: string; purple: string; } const arvadosPurple = '#361336'; +const grey500 = grey["500"]; const grey600 = grey["600"]; const grey700 = grey["700"]; const grey900 = grey["900"]; @@ -44,6 +46,7 @@ export const themeOptions: ArvadosThemeOptions = { yellow700: yellow["700"], red900: red['900'], blue500: blue['500'], + grey500: grey500, purple: arvadosPurple } }, diff --git a/src/store/process-panel/process-panel-actions.ts b/src/store/process-panel/process-panel-actions.ts index 962f5dfc..e77c300d 100644 --- a/src/store/process-panel/process-panel-actions.ts +++ b/src/store/process-panel/process-panel-actions.ts @@ -56,6 +56,8 @@ export const initProcessPanelFilters = processPanelActions.SET_PROCESS_PANEL_FIL ProcessStatus.COMPLETED, ProcessStatus.FAILED, ProcessStatus.RUNNING, - ProcessStatus.LOCKED, + ProcessStatus.ONHOLD, + ProcessStatus.FAILING, + ProcessStatus.WARNING, ProcessStatus.CANCELLED ]); diff --git a/src/store/processes/process.ts b/src/store/processes/process.ts index 60505be0..37cdd2b3 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,17 +73,20 @@ export const getProcessRuntime = ({ container }: Process) => { } }; -export const getProcessStatusColor = (status: string, { customs, palette }: ArvadosTheme) => { +export const getProcessStatusColor = (status: string, { customs }: ArvadosTheme) => { switch (status) { case ProcessStatus.RUNNING: return customs.colors.blue500; case ProcessStatus.COMPLETED: return customs.colors.green700; + case ProcessStatus.WARNING: + return customs.colors.yellow700; + case ProcessStatus.FAILING: case ProcessStatus.CANCELLED: case ProcessStatus.FAILED: return customs.colors.red900; default: - return palette.grey["500"]; + return customs.colors.grey500; } }; @@ -90,18 +95,26 @@ export const getProcessStatus = ({ containerRequest, container }: Process): Proc case containerRequest.state === ContainerRequestState.UNCOMMITTED: return ProcessStatus.DRAFT; + case containerRequest.priority === 0: + return ProcessStatus.ONHOLD; + case container && container.state === ContainerState.COMPLETE && container.exitCode === 0: return ProcessStatus.COMPLETED; - case containerRequest.priority === 0: case container && container.state === ContainerState.CANCELLED: return ProcessStatus.CANCELLED; - case container && container.state === ContainerState.QUEUED: + case container && (container.state === ContainerState.QUEUED || + container.state === ContainerState.LOCKED): return ProcessStatus.QUEUED; - case container && container.state === ContainerState.LOCKED: - return ProcessStatus.LOCKED; + case container && container.state === ContainerState.RUNNING && + !!container.runtimeStatus.error: + return ProcessStatus.FAILING; + + case container && container.state === ContainerState.RUNNING && + !!container.runtimeStatus.warning: + return ProcessStatus.WARNING; case container && container.state === ContainerState.RUNNING: return ProcessStatus.RUNNING; diff --git a/src/views-components/data-explorer/renderers.test.tsx b/src/views-components/data-explorer/renderers.test.tsx index f0efdf74..fc9325bd 100644 --- a/src/views-components/data-explorer/renderers.test.tsx +++ b/src/views-components/data-explorer/renderers.test.tsx @@ -4,11 +4,14 @@ import React from 'react'; import { mount, configure } from 'enzyme'; -import { ResourceFileSize } from './renderers'; +import { ProcessStatus, ResourceFileSize } from './renderers'; import Adapter from "enzyme-adapter-react-16"; import { Provider } from 'react-redux'; import configureMockStore from 'redux-mock-store' import { ResourceKind } from '../../models/resource'; +import { ContainerRequestState as CR } from '../../models/container-request'; +import { ContainerState as C } from '../../models/container'; +import { ProcessStatus as PS } from '../../store/processes/process'; const middlewares = []; const mockStore = configureMockStore(middlewares); @@ -18,6 +21,65 @@ configure({ adapter: new Adapter() }); describe('renderers', () => { let props = null; + describe('ProcessStatus', () => { + props = { + uuid: 'zzzzz-xvhdp-zzzzzzzzzzzzzzz', + theme: { + customs: { + colors: { + // Color values are arbitrary, but they should be + // representative of the colors used in the UI. + blue500: 'rgb(0, 0, 255)', + green700: 'rgb(0, 255, 0)', + yellow700: 'rgb(255, 255, 0)', + red900: 'rgb(255, 0, 0)', + grey500: 'rgb(128, 128, 128)', + } + } + }, + }; + + [ + // CR Status ; Priority ; C Status ; Exit Code ; C RuntimeStatus ; Expected label ; Expected Color + [CR.COMMITTED, 1, C.RUNNING, null, {}, PS.RUNNING, props.theme.customs.colors.blue500], + [CR.COMMITTED, 1, C.RUNNING, null, {error: 'whoops'}, PS.FAILING, props.theme.customs.colors.red900], + [CR.COMMITTED, 1, C.RUNNING, null, {warning: 'watch out!'}, PS.WARNING, props.theme.customs.colors.yellow700], + [CR.FINAL, 1, C.CANCELLED, null, {}, PS.CANCELLED, props.theme.customs.colors.red900], + [CR.FINAL, 1, C.COMPLETE, 137, {}, PS.FAILED, props.theme.customs.colors.red900], + [CR.FINAL, 1, C.COMPLETE, 0, {}, PS.COMPLETED, props.theme.customs.colors.green700], + [CR.COMMITTED, 0, C.LOCKED, null, {}, PS.ONHOLD, props.theme.customs.colors.grey500], + [CR.COMMITTED, 0, C.QUEUED, null, {}, PS.ONHOLD, props.theme.customs.colors.grey500], + [CR.COMMITTED, 1, C.LOCKED, null, {}, PS.QUEUED, props.theme.customs.colors.grey500], + [CR.COMMITTED, 1, C.QUEUED, null, {}, PS.QUEUED, props.theme.customs.colors.grey500], + ].forEach(([crState, crPrio, cState, exitCode, rs, eLabel, eColor]) => { + it(`should render the state label '${eLabel}' and color '${eColor}' for CR state=${crState}, priority=${crPrio}, C state=${cState}, exitCode=${exitCode} and RuntimeStatus=${JSON.stringify(rs)}`, () => { + const containerUuid = 'zzzzz-dz642-zzzzzzzzzzzzzzz'; + const store = mockStore({ resources: { + [props.uuid]: { + kind: ResourceKind.CONTAINER_REQUEST, + state: crState, + containerUuid: containerUuid, + priority: crPrio, + }, + [containerUuid]: { + kind: ResourceKind.CONTAINER, + state: cState, + runtimeStatus: rs, + exitCode: exitCode, + }, + }}); + + const wrapper = mount( + + ); + + expect(wrapper.text()).toEqual(eLabel); + expect(getComputedStyle(wrapper.getDOMNode()) + .getPropertyValue('color')).toEqual(eColor); + }); + }) + }); + describe('ResourceFileSize', () => { beforeEach(() => { props = {