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 });