services/workbench2/src/views-components/process-runtime-status/process-runtime-status.tsx

   1 // Copyright (C) The Arvados Authors. All rights reserved.
   2 //
   3 // SPDX-License-Identifier: AGPL-3.0
   4
   5 import React from 'react';
   6 import { CustomStyleRulesCallback } from 'common/custom-theme';
   7 import { Accordion, AccordionDetails, AccordionSummary, Paper, Typography } from "@mui/material";
   8 import { WithStyles } from '@mui/styles';
   9 import withStyles from '@mui/styles/withStyles';
  10 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
  11 import { RuntimeStatus } from "models/runtime-status";
  12 import { ArvadosTheme } from 'common/custom-theme';
  13 import classNames from 'classnames';
  14
  15 type CssRules = 'root'
  16     | 'heading'
  17     | 'summary'
  18     | 'summaryText'
  19     | 'details'
  20     | 'detailsText'
  21     | 'error'
  22     | 'errorColor'
  23     | 'warning'
  24     | 'warningColor'
  25     | 'paperRoot';
  26
  27 const styles: CustomStyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  28     root: {
  29         marginBottom: theme.spacing(1),
  30     },
  31     heading: {
  32         fontSize: '1rem',
  33     },
  34     summary: {
  35         paddingLeft: theme.spacing(1),
  36         paddingRight: theme.spacing(1),
  37     },
  38     summaryText: {
  39         whiteSpace: 'pre-line',
  40     },
  41     details: {
  42         paddingLeft: theme.spacing(1),
  43         paddingRight: theme.spacing(1),
  44     },
  45     detailsText: {
  46         fontSize: '0.8rem',
  47         marginTop: '0px',
  48         marginBottom: '0px',
  49         whiteSpace: 'pre-line',
  50     },
  51     errorColor: {
  52         color: theme.customs.colors.grey700,
  53     },
  54     error: {
  55         backgroundColor: theme.customs.colors.red100,
  56
  57     },
  58     warning: {
  59         backgroundColor: theme.customs.colors.yellow100,
  60     },
  61     warningColor: {
  62         color: theme.customs.colors.grey700,
  63     },
  64     paperRoot: {
  65         minHeight: theme.spacing(6),
  66         display: 'flex',
  67         alignItems: 'center',
  68     },
  69 });
  70 export interface ProcessRuntimeStatusDataProps {
  71     runtimeStatus: RuntimeStatus | undefined;
  72     containerCount: number;
  73 }
  74
  75 type ProcessRuntimeStatusProps = ProcessRuntimeStatusDataProps & WithStyles<CssRules>;
  76
  77 export const ProcessRuntimeStatus = withStyles(styles)(
  78     ({ runtimeStatus, containerCount, classes }: ProcessRuntimeStatusProps) => {
  79     return <div className={classes.root}>
  80         { runtimeStatus?.error &&
  81         <div data-cy='process-runtime-status-error'><Accordion className={classes.error} elevation={0}>
  82             <AccordionSummary className={classNames(classes.summary, classes.detailsText)} expandIcon={<ExpandMoreIcon />}>
  83                 <Typography className={classNames(classes.heading, classes.errorColor)}>
  84                     {`Error: ${runtimeStatus.error }`}
  85                 </Typography>
  86             </AccordionSummary>
  87             <AccordionDetails className={classes.details}>
  88                 <Typography className={classNames(classes.errorColor, classes.detailsText)}>
  89                     {runtimeStatus?.errorDetail || 'No additional error details available'}
  90                 </Typography>
  91             </AccordionDetails>
  92         </Accordion></div>
  93         }
  94         { runtimeStatus?.warning &&
  95         <div data-cy='process-runtime-status-warning' ><Accordion className={classes.warning} elevation={0}>
  96             <AccordionSummary className={classNames(classes.summary, classes.detailsText)} expandIcon={<ExpandMoreIcon />}>
  97                 <Typography className={classNames(classes.heading, classes.warningColor)}>
  98                     {`Warning: ${runtimeStatus.warning }`}
  99                 </Typography>
 100             </AccordionSummary>
 101             <AccordionDetails className={classes.details}>
 102                 <Typography className={classNames(classes.warningColor, classes.detailsText)}>
 103                     {runtimeStatus?.warningDetail || 'No additional warning details available'}
 104                 </Typography>
 105             </AccordionDetails>
 106         </Accordion></div>
 107         }
 108         { containerCount > 1 &&
 109         <div data-cy='process-runtime-status-retry-warning' >
 110             <Paper className={classNames(classes.warning, classes.paperRoot)} elevation={0}>
 111                 <Typography className={classNames(classes.heading, classes.summary, classes.warningColor)}>
 112                     {`Warning: Process retried ${containerCount - 1} time${containerCount > 2 ? 's' : ''} due to failure.`}
 113                 </Typography>
 114             </Paper>
 115         </div>
 116         }
 117     </div>
 118 });