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