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               | 'schedulingStatus'
  27               | 'schedulingText';
  28
  29 const styles: CustomStyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  30     root: {
  31         marginBottom: theme.spacing(1),
  32     },
  33     heading: {
  34         fontSize: '1rem',
  35     },
  36     summary: {
  37         paddingLeft: theme.spacing(1),
  38         paddingRight: theme.spacing(1),
  39     },
  40     summaryText: {
  41         whiteSpace: 'pre-line',
  42     },
  43     details: {
  44         paddingLeft: theme.spacing(1),
  45         paddingRight: theme.spacing(1),
  46     },
  47     detailsText: {
  48         fontSize: '0.8rem',
  49         marginTop: '0px',
  50         marginBottom: '0px',
  51         whiteSpace: 'pre-line',
  52     },
  53     errorColor: {
  54         color: theme.customs.colors.grey700,
  55     },
  56     error: {
  57         backgroundColor: theme.customs.colors.red100,
  58
  59     },
  60     warning: {
  61         backgroundColor: theme.customs.colors.yellow100,
  62     },
  63     warningColor: {
  64         color: theme.customs.colors.grey700,
  65     },
  66     schedulingStatus: {
  67         backgroundColor: theme.palette.common.white,
  68         color: theme.customs.colors.grey600,
  69         border: `2px solid ${theme.customs.colors.grey600}`,
  70         borderRadius: `5px`,
  71         marginTop: '8px',
  72     },
  73     schedulingText: {
  74         paddingTop: theme.spacing(1),
  75         paddingBottom: theme.spacing(1),
  76     },
  77     paperRoot: {
  78         minHeight: theme.spacing(6),
  79         display: 'flex',
  80         alignItems: 'center',
  81     },
  82 });
  83 export interface ProcessRuntimeStatusDataProps {
  84     runtimeStatus: RuntimeStatus | undefined;
  85     containerCount: number;
  86     schedulingStatus: string;
  87 }
  88
  89 type ProcessRuntimeStatusProps = ProcessRuntimeStatusDataProps & WithStyles<CssRules>;
  90
  91 export const ProcessRuntimeStatus = withStyles(styles)(
  92     ({ runtimeStatus, containerCount, schedulingStatus, classes }: ProcessRuntimeStatusProps) => {
  93         return <div className={classes.root}>
  94         { schedulingStatus !== "" &&
  95           <div data-cy='process-runtime-scheduling-status' className={classes.schedulingStatus}>
  96               <Typography className={classNames(classes.heading, classes.summary, classes.schedulingText)}>
  97                   {`Scheduling status: ${schedulingStatus}`}
  98               </Typography>
  99           </div>
 100         }
 101         { runtimeStatus?.error &&
 102           <div data-cy='process-runtime-status-error'><Accordion className={classes.error} elevation={0}>
 103               <AccordionSummary className={classNames(classes.summary, classes.detailsText)} expandIcon={<ExpandMoreIcon />}>
 104                   <Typography className={classNames(classes.heading, classes.errorColor)}>
 105                       {`Error: ${runtimeStatus.error }`}
 106                   </Typography>
 107               </AccordionSummary>
 108               <AccordionDetails className={classes.details}>
 109                   <Typography className={classNames(classes.errorColor, classes.detailsText)}>
 110                       {runtimeStatus?.errorDetail || 'No additional error details available'}
 111                   </Typography>
 112               </AccordionDetails>
 113           </Accordion></div>
 114         }
 115             { runtimeStatus?.warning &&
 116               <div data-cy='process-runtime-status-warning' ><Accordion className={classes.warning} elevation={0}>
 117                   <AccordionSummary className={classNames(classes.summary, classes.detailsText)} expandIcon={<ExpandMoreIcon />}>
 118                       <Typography className={classNames(classes.heading, classes.warningColor)}>
 119                           {`Warning: ${runtimeStatus.warning }`}
 120                       </Typography>
 121                   </AccordionSummary>
 122                   <AccordionDetails className={classes.details}>
 123                       <Typography className={classNames(classes.warningColor, classes.detailsText)}>
 124                           {runtimeStatus?.warningDetail || 'No additional warning details available'}
 125                       </Typography>
 126                   </AccordionDetails>
 127               </Accordion></div>
 128             }
 129             { containerCount > 1 &&
 130               <div data-cy='process-runtime-status-retry-warning' >
 131                   <Paper className={classNames(classes.warning, classes.paperRoot)} elevation={0}>
 132                       <Typography className={classNames(classes.heading, classes.summary, classes.warningColor)}>
 133                           {`Warning: Process retried ${containerCount - 1} time${containerCount > 2 ? 's' : ''} due to failure.`}
 134                       </Typography>
 135                   </Paper>
 136               </div>
 137             }
 138         </div>
 139 });