CardContent,
Tooltip,
Typography,
+ Button,
} from '@material-ui/core';
import { ArvadosTheme } from 'common/custom-theme';
-import { CloseIcon, MoreOptionsIcon, ProcessIcon } from 'components/icon/icon';
+import { CloseIcon, MoreOptionsIcon, ProcessIcon, StartIcon } from 'components/icon/icon';
import { Process } from 'store/processes/process';
import { MPVPanelProps } from 'components/multi-panel-view/multi-panel-view';
import { ProcessDetailsAttributes } from './process-details-attributes';
import { ProcessStatus } from 'views-components/data-explorer/renderers';
import { ContainerState } from 'models/container';
+import { ContainerRequestState } from 'models/container-request';
-type CssRules = 'card' | 'content' | 'title' | 'header' | 'cancelButton' | 'avatar' | 'iconHeader';
+type CssRules = 'card' | 'content' | 'title' | 'header' | 'cancelButton' | 'avatar' | 'iconHeader' | 'runButton';
const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
card: {
},
iconHeader: {
fontSize: '1.875rem',
- color: theme.customs.colors.green700,
+ color: theme.customs.colors.greyL,
},
avatar: {
alignSelf: 'flex-start',
paddingTop: theme.spacing.unit * 0.5
},
content: {
+ padding: theme.spacing.unit * 1.0,
+ paddingTop: theme.spacing.unit * 0.5,
'&:last-child': {
- paddingBottom: theme.spacing.unit * 2,
+ paddingBottom: theme.spacing.unit * 1,
}
},
title: {
overflow: 'hidden',
- paddingTop: theme.spacing.unit * 0.5
+ paddingTop: theme.spacing.unit * 0.5,
+ color: theme.customs.colors.green700,
},
cancelButton: {
paddingRight: theme.spacing.unit * 2,
cursor: 'pointer'
}
},
+ runButton: {
+ padding: "0px 5px 0 0",
+ marginRight: "5px",
+ },
});
export interface ProcessDetailsCardDataProps {
process: Process;
cancelProcess: (uuid: string) => void;
+ startProcess: (uuid: string) => void;
+ resumeOnHoldWorkflow: (uuid: string) => void;
onContextMenu: (event: React.MouseEvent<HTMLElement>) => void;
}
type ProcessDetailsCardProps = ProcessDetailsCardDataProps & WithStyles<CssRules> & MPVPanelProps;
export const ProcessDetailsCard = withStyles(styles)(
- ({ cancelProcess, onContextMenu, classes, process, doHidePanel, panelName }: ProcessDetailsCardProps) => {
+ ({ cancelProcess, startProcess, resumeOnHoldWorkflow, onContextMenu, classes, process, doHidePanel, panelName }: ProcessDetailsCardProps) => {
+ let runAction: ((uuid: string) => void) | undefined = undefined;
+ if (process.containerRequest.state === ContainerRequestState.UNCOMMITTED) {
+ runAction = startProcess;
+ } else if (process.containerRequest.state === ContainerRequestState.COMMITTED &&
+ process.containerRequest.priority === 0) {
+ runAction = resumeOnHoldWorkflow;
+ }
+
return <Card className={classes.card}>
<CardHeader
className={classes.header}
avatar={<ProcessIcon className={classes.iconHeader} />}
title={
<Tooltip title={process.containerRequest.name} placement="bottom-start">
- <Typography noWrap variant='h6' color='inherit'>
+ <Typography noWrap variant='h6'>
{process.containerRequest.name}
</Typography>
</Tooltip>
</Tooltip>}
action={
<div>
- {process.container && process.container.state === ContainerState.RUNNING &&
- <span className={classes.cancelButton} onClick={() => cancelProcess(process.containerRequest.uuid)}>Cancel</span>}
+ {runAction !== undefined &&
+ <Button
+ variant="contained"
+ size="small"
+ color="primary"
+ className={classes.runButton}
+ onClick={() => runAction && runAction(process.containerRequest.uuid)}>
+ <StartIcon />
+ Run
+ </Button>}
+ {process.container &&
+ (process.container.state === ContainerState.QUEUED ||
+ process.container.state === ContainerState.LOCKED ||
+ process.container.state === ContainerState.RUNNING) &&
+ process.containerRequest.priority !== null &&
+ process.containerRequest.priority > 0 &&
+ <span data-cy="process-cancel" className={classes.cancelButton} onClick={() => cancelProcess(process.containerRequest.uuid)}>Cancel</span>}
<ProcessStatus uuid={process.containerRequest.uuid} />
<Tooltip title="More options" disableFocusListener>
<IconButton