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