import { formatTime } from '~/common/formatters';
import { getProcessStatusColor } from '~/store/processes/process';
-export type CssRules = 'label' | 'value' | 'title' | 'content' | 'action' | 'options' | 'status' | 'rightSideHeader' | 'titleHeader' | 'header';
+export type CssRules = 'label' | 'value' | 'title' | 'content' | 'action' | 'options' | 'status' | 'rightSideHeader' | 'titleHeader' | 'header' | 'moreOptions';
const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
label: {
color: theme.palette.common.white,
},
status: {
- paddingTop: theme.spacing.unit * 0.5,
+ paddingTop: theme.spacing.unit * 0.75,
color: theme.palette.common.white,
},
rightSideHeader: {
paddingTop: 0,
paddingBottom: 0,
},
+ moreOptions: {
+ position: 'absolute'
+ }
});
export interface SubprocessItemProps {
classes={{ content: classes.title, action: classes.action }}
action={
<div className={classes.rightSideHeader}>
- <Typography noWrap variant="body2" className={classes.status}>
+ <Typography noWrap variant='body1' className={classes.status}>
{getProcessStatus(subprocess)}
</Typography>
- <Tooltip title="More options">
+ <Tooltip title="More options" disableFocusListener>
<IconButton
className={classes.options}
aria-label="More options"
onClick={onContextMenu}>
- <MoreOptionsIcon />
+ <MoreOptionsIcon className={classes.moreOptions} />
</IconButton>
</Tooltip>
</div>
}
title={
<Tooltip title={subprocess.containerRequest.name}>
- <Typography noWrap variant="body2" className={classes.titleHeader}>
+ <Typography noWrap variant='body1' className={classes.titleHeader}>
{subprocess.containerRequest.name}
</Typography>
</Tooltip>
} />
<CardContent className={classes.content}>
<DetailsAttribute classLabel={classes.label} classValue={classes.value}
- label="Runtime" value={formatTime(getProcessRuntime(subprocess))} />
+ label="Runtime" value={subprocess.container && subprocess.container.startedAt && subprocess.container.finishedAt
+ ? formatTime(getProcessRuntime(subprocess)) :
+ '(none)'} />
</CardContent>
</Card>;
});