StyleRulesCallback, WithStyles, withStyles, Card,
CardHeader, IconButton, CardContent, Grid, Chip, Typography, Tooltip
} from '@material-ui/core';
-import * as classnames from "classnames";
import { ArvadosTheme } from '~/common/custom-theme';
import { MoreOptionsIcon, ProcessIcon } from '~/components/icon/icon';
import { DetailsAttribute } from '~/components/details-attribute/details-attribute';
import { Process } from '~/store/processes/process';
-import { getProcessStatus } from '~/store/processes/process';
-import { getBackgroundColorStatus } from '~/views/process-panel/process-panel-root';
+import { getProcessStatus, getProcessStatusColor } from '../../store/processes/process';
+import { formatDate } from '~/common/formatters';
-type CssRules = 'card' | 'iconHeader' | 'label' | 'value' | 'chip' | 'link' | 'content' | 'title' | 'avatar'
- | 'headerActive' | 'headerCompleted' | 'headerQueued' | 'headerFailed' | 'headerCanceled';
+
+type CssRules = 'card' | 'iconHeader' | 'label' | 'value' | 'chip' | 'link' | 'content' | 'title' | 'avatar';
const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
card: {
- marginBottom: theme.spacing.unit * 2
+ height: '100%'
},
iconHeader: {
fontSize: '1.875rem',
content: {
'&:last-child': {
paddingBottom: theme.spacing.unit * 2,
- paddingTop: '0px'
}
},
title: {
overflow: 'hidden',
paddingTop: theme.spacing.unit * 0.5
- },
- headerActive: {
- backgroundColor: theme.customs.colors.blue500,
- },
- headerCompleted: {
- backgroundColor: theme.customs.colors.green700,
- },
- headerQueued: {
- backgroundColor: theme.customs.colors.grey500,
- },
- headerFailed: {
- backgroundColor: theme.customs.colors.red900,
- },
- headerCanceled: {
- backgroundColor: theme.customs.colors.red900,
- },
+ }
});
export interface ProcessInformationCardDataProps {
onContextMenu: (event: React.MouseEvent<HTMLElement>) => void;
}
-type ProcessInformationCardProps = ProcessInformationCardDataProps & WithStyles<CssRules>;
+type ProcessInformationCardProps = ProcessInformationCardDataProps & WithStyles<CssRules, true>;
-export const ProcessInformationCard = withStyles(styles)(
- ({ classes, process, onContextMenu }: ProcessInformationCardProps) =>
+export const ProcessInformationCard = withStyles(styles, { withTheme: true })(
+ ({ classes, process, onContextMenu, theme }: ProcessInformationCardProps) =>
<Card className={classes.card}>
<CardHeader
classes={{
action={
<div>
<Chip label={getProcessStatus(process)}
- className={classnames([classes.chip, getBackgroundColorStatus(getProcessStatus(process), classes)])} />
- <IconButton
- aria-label="More options"
- onClick={event => onContextMenu(event)}>
- <MoreOptionsIcon />
- </IconButton>
+ className={classes.chip}
+ style={{ backgroundColor: getProcessStatusColor(getProcessStatus(process), theme as ArvadosTheme) }} />
+ <Tooltip title="More options">
+ <IconButton
+ aria-label="More options"
+ onClick={event => onContextMenu(event)}>
+ <MoreOptionsIcon />
+ </IconButton>
+ </Tooltip>
</div>
}
title={
- <Tooltip title={process.containerRequest.name}>
- <Typography noWrap variant="title">
- {process.containerRequest.name}
+ <Tooltip title={process.containerRequest.name} placement="bottom-start">
+ <Typography noWrap variant="title" color='inherit'>
+ {process.containerRequest.name}
</Typography>
</Tooltip>
}
- subheader={process.containerRequest.description} />
+ subheader={
+ <Tooltip title={getDescription(process)} placement="bottom-start">
+ <Typography noWrap variant="body2" color='inherit'>
+ {getDescription(process)}
+ </Typography>
+ </Tooltip>} />
<CardContent className={classes.content}>
<Grid container>
<Grid item xs={6}>
<DetailsAttribute classLabel={classes.label} classValue={classes.value}
- label='From' value={process.container ? process.container.startedAt : 'N/A'} />
+ label='From' value={process.container ? formatDate(process.container.startedAt!) : 'N/A'} />
<DetailsAttribute classLabel={classes.label} classValue={classes.value}
- label='To' value={process.container ? process.container.finishedAt : 'N/A'} />
+ label='To' value={process.container ? formatDate(process.container.finishedAt!) : 'N/A'} />
<DetailsAttribute classLabel={classes.label} classValue={classes.link}
label='Workflow' value='???' />
</Grid>
</Grid>
</CardContent>
</Card>
-);
\ No newline at end of file
+);
+
+const getDescription = (process: Process) =>
+ process.containerRequest.description || '(no-description)';