ExpansionPanel,
ExpansionPanelDetails,
ExpansionPanelSummary,
+ Paper,
StyleRulesCallback,
Typography,
withStyles,
import { ArvadosTheme } from 'common/custom-theme';
import classNames from 'classnames';
-type CssRules = 'heading' | 'summary' | 'details' | 'error' | 'errorColor' | 'warning' | 'warningColor';
+type CssRules = 'root'
+ | 'heading'
+ | 'summary'
+ | 'summaryText'
+ | 'details'
+ | 'detailsText'
+ | 'error'
+ | 'errorColor'
+ | 'warning'
+ | 'warningColor'
+ | 'paperRoot';
const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
+ root: {
+ marginBottom: theme.spacing.unit * 1,
+ },
heading: {
fontSize: '1rem',
},
paddingLeft: theme.spacing.unit * 1,
paddingRight: theme.spacing.unit * 1,
},
+ summaryText: {
+ whiteSpace: 'pre-line',
+ },
details: {
paddingLeft: theme.spacing.unit * 1,
paddingRight: theme.spacing.unit * 1,
},
+ detailsText: {
+ fontSize: '0.8rem',
+ marginTop: '0px',
+ marginBottom: '0px',
+ whiteSpace: 'pre-line',
+ },
errorColor: {
- color: theme.customs.colors.red900,
+ color: theme.customs.colors.grey700,
},
error: {
backgroundColor: theme.customs.colors.red100,
backgroundColor: theme.customs.colors.yellow100,
},
warningColor: {
- color: theme.customs.colors.yellow900,
+ color: theme.customs.colors.grey700,
+ },
+ paperRoot: {
+ minHeight: theme.spacing.unit * 6,
+ display: 'flex',
+ alignItems: 'center',
},
});
export interface ProcessRuntimeStatusDataProps {
runtimeStatus: RuntimeStatus | undefined;
+ containerCount: number;
}
type ProcessRuntimeStatusProps = ProcessRuntimeStatusDataProps & WithStyles<CssRules>;
export const ProcessRuntimeStatus = withStyles(styles)(
- ({ runtimeStatus, classes }: ProcessRuntimeStatusProps) => {
- return <>
+ ({ runtimeStatus, containerCount, classes }: ProcessRuntimeStatusProps) => {
+ return <div className={classes.root}>
{ runtimeStatus?.error &&
- <ExpansionPanel className={classes.error} elevation={0}>
- <ExpansionPanelSummary className={classes.summary} expandIcon={<ExpandMoreIcon />}>
+ <div data-cy='process-runtime-status-error'><ExpansionPanel className={classes.error} elevation={0}>
+ <ExpansionPanelSummary className={classNames(classes.summary, classes.detailsText)} expandIcon={<ExpandMoreIcon />}>
<Typography className={classNames(classes.heading, classes.errorColor)}>
{`Error: ${runtimeStatus.error }`}
</Typography>
</ExpansionPanelSummary>
<ExpansionPanelDetails className={classes.details}>
- <Typography className={classes.errorColor}>
+ <Typography className={classNames(classes.errorColor, classes.detailsText)}>
{runtimeStatus?.errorDetail || 'No additional error details available'}
</Typography>
</ExpansionPanelDetails>
- </ExpansionPanel>
+ </ExpansionPanel></div>
}
{ runtimeStatus?.warning &&
- <ExpansionPanel className={classes.warning} elevation={0}>
- <ExpansionPanelSummary className={classes.summary} expandIcon={<ExpandMoreIcon />}>
+ <div data-cy='process-runtime-status-warning' ><ExpansionPanel className={classes.warning} elevation={0}>
+ <ExpansionPanelSummary className={classNames(classes.summary, classes.detailsText)} expandIcon={<ExpandMoreIcon />}>
<Typography className={classNames(classes.heading, classes.warningColor)}>
{`Warning: ${runtimeStatus.warning }`}
</Typography>
</ExpansionPanelSummary>
<ExpansionPanelDetails className={classes.details}>
- <Typography className={classes.warningColor}>
+ <Typography className={classNames(classes.warningColor, classes.detailsText)}>
{runtimeStatus?.warningDetail || 'No additional warning details available'}
</Typography>
</ExpansionPanelDetails>
- </ExpansionPanel>
+ </ExpansionPanel></div>
}
- </>
-});
\ No newline at end of file
+ { containerCount > 1 &&
+ <div data-cy='process-runtime-status-retry-warning' >
+ <Paper className={classNames(classes.warning, classes.paperRoot)} elevation={0}>
+ <Typography className={classNames(classes.heading, classes.summary, classes.warningColor)}>
+ {`Warning: Process retried ${containerCount - 1} time${containerCount > 2 ? 's' : ''} due to failure.`}
+ </Typography>
+ </Paper>
+ </div>
+ }
+ </div>
+});