X-Git-Url: https://git.arvados.org/arvados.git/blobdiff_plain/e93453d8882428f0cfeda3f7692e843185b734c7..956c32a410df8789ab179ab23893ad92c0aeaada:/src/views-components/process-runtime-status/process-runtime-status.tsx

diff --git a/src/views-components/process-runtime-status/process-runtime-status.tsx b/src/views-components/process-runtime-status/process-runtime-status.tsx
index a2cd455c51..4761e12f4c 100644
--- a/src/views-components/process-runtime-status/process-runtime-status.tsx
+++ b/src/views-components/process-runtime-status/process-runtime-status.tsx
@@ -7,6 +7,7 @@ import {
     ExpansionPanel,
     ExpansionPanelDetails,
     ExpansionPanelSummary,
+    Paper,
     StyleRulesCallback,
     Typography,
     withStyles,
@@ -17,7 +18,8 @@ import { RuntimeStatus } from "models/runtime-status";
 import { ArvadosTheme } from 'common/custom-theme';
 import classNames from 'classnames';
 
-type CssRules = 'heading'
+type CssRules = 'root'
+    | 'heading'
     | 'summary'
     | 'summaryText'
     | 'details'
@@ -25,9 +27,13 @@ type CssRules = 'heading'
     | 'error'
     | 'errorColor'
     | 'warning'
-    | 'warningColor';
+    | 'warningColor'
+    | 'paperRoot';
 
 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
+    root: {
+        marginBottom: theme.spacing.unit * 1,
+    },
     heading: {
         fontSize: '1rem',
     },
@@ -49,7 +55,7 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
         whiteSpace: 'pre-line',
     },
     errorColor: {
-        color: theme.customs.colors.red900,
+        color: theme.customs.colors.grey700,
     },
     error: {
         backgroundColor: theme.customs.colors.red100,
@@ -59,18 +65,24 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
         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 &&
         <div data-cy='process-runtime-status-error'><ExpansionPanel className={classes.error} elevation={0}>
             <ExpansionPanelSummary className={classNames(classes.summary, classes.detailsText)} expandIcon={<ExpandMoreIcon />}>
@@ -99,5 +111,14 @@ export const ProcessRuntimeStatus = withStyles(styles)(
             </ExpansionPanelDetails>
         </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>
+});