Button,
} from '@material-ui/core';
import { ArvadosTheme } from 'common/custom-theme';
-import { CloseIcon, MoreOptionsIcon, ProcessIcon, StartIcon } from 'components/icon/icon';
-import { Process } from 'store/processes/process';
+import { CloseIcon, MoreVerticalIcon, ProcessIcon, StartIcon, StopIcon } from 'components/icon/icon';
+import { Process, isProcessRunnable, isProcessResumable, isProcessCancelable } 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';
+import classNames from 'classnames';
-type CssRules = 'card' | 'content' | 'title' | 'header' | 'cancelButton' | 'avatar' | 'iconHeader' | 'runButton';
+type CssRules = 'card' | 'content' | 'title' | 'header' | 'cancelButton' | 'avatar' | 'iconHeader' | 'actionButton';
const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
card: {
paddingTop: theme.spacing.unit * 0.5,
color: theme.customs.colors.green700,
},
- cancelButton: {
- paddingRight: theme.spacing.unit * 2,
- fontSize: '14px',
- color: theme.customs.colors.red900,
- "&:hover": {
- cursor: 'pointer'
- }
- },
- runButton: {
+ actionButton: {
padding: "0px 5px 0 0",
marginRight: "5px",
+ fontSize: '0.78rem',
+ },
+ cancelButton: {
+ color: theme.palette.common.white,
+ backgroundColor: theme.customs.colors.red900,
+ '&:hover': {
+ backgroundColor: theme.customs.colors.red900,
+ },
+ '& svg': {
+ fontSize: '22px',
+ },
},
});
export const ProcessDetailsCard = withStyles(styles)(
({ cancelProcess, startProcess, resumeOnHoldWorkflow, onContextMenu, classes, process, doHidePanel, panelName }: ProcessDetailsCardProps) => {
let runAction: ((uuid: string) => void) | undefined = undefined;
- if (process.containerRequest.state === ContainerRequestState.UNCOMMITTED) {
+ if (isProcessRunnable(process)) {
runAction = startProcess;
- } else if (process.containerRequest.state === ContainerRequestState.COMMITTED &&
- process.containerRequest.priority === 0) {
+ } else if (isProcessResumable(process)) {
runAction = resumeOnHoldWorkflow;
}
<div>
{runAction !== undefined &&
<Button
+ data-cy="process-run-button"
variant="contained"
size="small"
color="primary"
- className={classes.runButton}
+ className={classes.actionButton}
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>}
+ {isProcessCancelable(process) &&
+ <Button
+ data-cy="process-cancel-button"
+ variant="contained"
+ size="small"
+ color="primary"
+ className={classNames(classes.actionButton, classes.cancelButton)}
+ onClick={() => cancelProcess(process.containerRequest.uuid)}>
+ <StopIcon />
+ Cancel
+ </Button>}
<ProcessStatus uuid={process.containerRequest.uuid} />
<Tooltip title="More options" disableFocusListener>
<IconButton
aria-label="More options"
onClick={event => onContextMenu(event)}>
- <MoreOptionsIcon />
+ <MoreVerticalIcon />
</IconButton>
</Tooltip>
- { doHidePanel &&
- <Tooltip title={`Close ${panelName || 'panel'}`} disableFocusListener>
- <IconButton onClick={doHidePanel}><CloseIcon /></IconButton>
- </Tooltip> }
+ {doHidePanel &&
+ <Tooltip title={`Close ${panelName || 'panel'}`} disableFocusListener>
+ <IconButton onClick={doHidePanel}><CloseIcon /></IconButton>
+ </Tooltip>}
</div>
} />
<CardContent className={classes.content}>