Merge branch '19045-runtime-status-details-fix'. Closes #19045

[arvados-workbench2.git] / 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 26e0459d45e2672314ca90dd018c2367f26bf62d..3858e49e2372be08549f81816327138ffb09c046 100644 (file)
--- a/src/views-components/process-runtime-status/process-runtime-status.tsx
+++ b/src/views-components/process-runtime-status/process-runtime-status.tsx
@@ -17,9 +17,21 @@ import { RuntimeStatus } from "models/runtime-status";
 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';
 
 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
+    root: {
+        marginBottom: theme.spacing.unit * 1,
+    },
     heading: {
         fontSize: '1rem',
     },
@@ -27,10 +39,19 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
         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,
     },
@@ -53,16 +74,16 @@ type ProcessRuntimeStatusProps = ProcessRuntimeStatusDataProps & WithStyles<CssR
 
 export const ProcessRuntimeStatus = withStyles(styles)(
     ({ runtimeStatus, classes }: ProcessRuntimeStatusProps) => {
-    return <>
+    return <div className={classes.root}>
         { runtimeStatus?.error &&
         <div data-cy='process-runtime-status-error'><ExpansionPanel className={classes.error} elevation={0}>
-            <ExpansionPanelSummary className={classes.summary} expandIcon={<ExpandMoreIcon />}>
+            <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>
@@ -70,17 +91,17 @@ export const ProcessRuntimeStatus = withStyles(styles)(
         }
         { runtimeStatus?.warning &&
         <div data-cy='process-runtime-status-warning' ><ExpansionPanel className={classes.warning} elevation={0}>
-            <ExpansionPanelSummary className={classes.summary} expandIcon={<ExpandMoreIcon />}>
+            <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></div>
         }
-    </>
+    </div>
 });
\ No newline at end of file