import { Process } from '~/store/processes/process';
import { getProcessStatus, getProcessStatusColor } from '~/store/processes/process';
import { formatDate } from '~/common/formatters';
-import { openWorkflow } from "~/store/process-panel/process-panel-actions";
+import * as classNames from 'classnames';
+import { ContainerState } from '~/models/container';
-type CssRules = 'card' | 'iconHeader' | 'label' | 'value' | 'chip' | 'link' | 'content' | 'title' | 'avatar';
+type CssRules = 'card' | 'iconHeader' | 'label' | 'value' | 'chip' | 'link' | 'content' | 'title' | 'avatar' | 'cancelButton';
const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
card: {
title: {
overflow: 'hidden',
paddingTop: theme.spacing.unit * 0.5
+ },
+ cancelButton: {
+ paddingRight: theme.spacing.unit * 2,
+ fontSize: '14px',
+ color: theme.customs.colors.red900,
+ "&:hover": {
+ cursor: 'pointer'
+ }
}
});
onContextMenu: (event: React.MouseEvent<HTMLElement>) => void;
openProcessInputDialog: (uuid: string) => void;
navigateToOutput: (uuid: string) => void;
- navigateToWorkflow: (uuid: string) => void;
+ openWorkflow: (uuid: string) => void;
+ cancelProcess: (uuid: string) => void;
}
type ProcessInformationCardProps = ProcessInformationCardDataProps & WithStyles<CssRules, true>;
export const ProcessInformationCard = withStyles(styles, { withTheme: true })(
- ({ classes, process, onContextMenu, theme, openProcessInputDialog, navigateToOutput, navigateToWorkflow }: ProcessInformationCardProps) => {
+ ({ classes, process, onContextMenu, theme, openProcessInputDialog, navigateToOutput, openWorkflow, cancelProcess }: ProcessInformationCardProps) => {
const { container } = process;
const startedAt = container ? formatDate(container.startedAt) : 'N/A';
const finishedAt = container ? formatDate(container.finishedAt) : 'N/A';
content: classes.title,
avatar: classes.avatar
}}
- avatar={<ProcessIcon className={classes.iconHeader}/>}
+ avatar={<ProcessIcon className={classes.iconHeader} />}
action={
<div>
+ {process.container && process.container.state === ContainerState.RUNNING &&
+ <span className={classes.cancelButton} onClick={() => cancelProcess(process.containerRequest.uuid)}>Cancel</span>}
<Chip label={getProcessStatus(process)}
- className={classes.chip}
- style={{backgroundColor: getProcessStatusColor(getProcessStatus(process), theme as ArvadosTheme)}}/>
+ className={classes.chip}
+ style={{ backgroundColor: getProcessStatusColor(getProcessStatus(process), theme as ArvadosTheme) }} />
<Tooltip title="More options" disableFocusListener>
<IconButton
aria-label="More options"
onClick={event => onContextMenu(event)}>
- <MoreOptionsIcon/>
+ <MoreOptionsIcon />
</IconButton>
</Tooltip>
</div>
<Typography noWrap variant='body1' color='inherit'>
{getDescription(process)}
</Typography>
- </Tooltip>}/>
+ </Tooltip>} />
<CardContent className={classes.content}>
<Grid container>
<Grid item xs={6}>
<DetailsAttribute classLabel={classes.label} classValue={classes.value}
- label='From'
- value={process.container ? formatDate(startedAt) : 'N/A'}/>
+ label='From'
+ value={process.container ? formatDate(startedAt) : 'N/A'} />
<DetailsAttribute classLabel={classes.label} classValue={classes.value}
- label='To'
- value={process.container ? formatDate(finishedAt) : 'N/A'}/>
- {process.containerRequest.properties.templateUuid &&
- <DetailsAttribute label='Workflow' classLabel={classes.label} classValue={classes.link}
- value={process.containerRequest.properties.templateUuid}
- onValueClick={() => navigateToWorkflow(process.containerRequest.properties.templateUuid)}
- />}
+ label='To'
+ value={process.container ? formatDate(finishedAt) : 'N/A'} />
+ {process.containerRequest.properties.workflowUuid &&
+ <span onClick={() => openWorkflow(process.containerRequest.properties.workflowUuid)}>
+ <DetailsAttribute classLabel={classes.label} classValue={classNames(classes.value, classes.link)}
+ label='Workflow' value={process.containerRequest.properties.workflowName} />
+ </span>}
</Grid>
<Grid item xs={6}>
<span onClick={() => navigateToOutput(process.containerRequest.outputUuid!)}>
- <DetailsAttribute classLabel={classes.link} label='Outputs'/>
+ <DetailsAttribute classLabel={classes.link} label='Outputs' />
</span>
<span onClick={() => openProcessInputDialog(process.containerRequest.uuid)}>
- <DetailsAttribute classLabel={classes.link} label='Inputs'/>
+ <DetailsAttribute classLabel={classes.link} label='Inputs' />
</span>
</Grid>
</Grid>