type ProcessInformationCardProps = ProcessInformationCardDataProps & WithStyles<CssRules, true>;
export const ProcessInformationCard = withStyles(styles, { withTheme: true })(
- ({ classes, process, onContextMenu, theme, openProcessInputDialog, navigateToOutput, navigateToWorkflow }: ProcessInformationCardProps) =>
- <Card className={classes.card}>
+ ({ classes, process, onContextMenu, theme, openProcessInputDialog, navigateToOutput, navigateToWorkflow }: ProcessInformationCardProps) => {
+ const { container } = process;
+ const startedAt = container ? formatDate(container.startedAt) : 'N/A';
+ const finishedAt = container ? formatDate(container.finishedAt) : 'N/A';
+ return <Card className={classes.card}>
<CardHeader
classes={{
content: classes.title,
avatar: classes.avatar
}}
- avatar={<ProcessIcon className={classes.iconHeader} />}
+ avatar={<ProcessIcon className={classes.iconHeader}/>}
action={
<div>
<Chip label={getProcessStatus(process)}
className={classes.chip}
- style={{backgroundColor: getProcessStatusColor(getProcessStatus(process), theme as ArvadosTheme)}} />
+ 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="body2" 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(process.container.startedAt!) : 'N/A'} />
+ value={process.container ? formatDate(startedAt) : 'N/A'}/>
<DetailsAttribute classLabel={classes.label} classValue={classes.value}
label='To'
- value={process.container ? formatDate(process.container.finishedAt!) : 'N/A'} />
+ 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)}
- />}
+ <DetailsAttribute label='Workflow' classLabel={classes.label} classValue={classes.link}
+ value={process.containerRequest.properties.templateUuid}
+ onValueClick={() => navigateToWorkflow(process.containerRequest.properties.templateUuid)}
+ />}
</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>
</CardContent>
- </Card>
+ </Card>;
+ }
);
const getDescription = (process: Process) =>