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 = 'heading' | 'summary' | 'details' | 'error' | 'errorColor' | 'warning' | 'warningColor';
  21
  22 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  23     heading: {
  24         fontSize: '1rem',
  25     },
  26     summary: {
  27         paddingLeft: theme.spacing.unit * 1,
  28         paddingRight: theme.spacing.unit * 1,
  29     },
  30     details: {
  31         paddingLeft: theme.spacing.unit * 1,
  32         paddingRight: theme.spacing.unit * 1,
  33     },
  34     errorColor: {
  35         color: theme.customs.colors.red900,
  36     },
  37     error: {
  38         backgroundColor: theme.customs.colors.red100,
  39
  40     },
  41     warning: {
  42         backgroundColor: theme.customs.colors.yellow100,
  43     },
  44     warningColor: {
  45         color: theme.customs.colors.yellow900,
  46     },
  47 });
  48 export interface ProcessRuntimeStatusDataProps {
  49     runtimeStatus: RuntimeStatus | undefined;
  50 }
  51
  52 type ProcessRuntimeStatusProps = ProcessRuntimeStatusDataProps & WithStyles<CssRules>;
  53
  54 export const ProcessRuntimeStatus = withStyles(styles)(
  55     ({ runtimeStatus, classes }: ProcessRuntimeStatusProps) => {
  56     return <>
  57         { runtimeStatus?.error &&
  58         <div data-cy='process-runtime-status-error'><ExpansionPanel className={classes.error} elevation={0}>
  59             <ExpansionPanelSummary className={classes.summary} expandIcon={<ExpandMoreIcon />}>
  60                 <Typography className={classNames(classes.heading, classes.errorColor)}>
  61                     {`Error: ${runtimeStatus.error }`}
  62                 </Typography>
  63             </ExpansionPanelSummary>
  64             <ExpansionPanelDetails className={classes.details}>
  65                 <Typography className={classes.errorColor}>
  66                     {runtimeStatus?.errorDetail || 'No additional error details available'}
  67                 </Typography>
  68             </ExpansionPanelDetails>
  69         </ExpansionPanel></div>
  70         }
  71         { runtimeStatus?.warning &&
  72         <div data-cy='process-runtime-status-warning' ><ExpansionPanel className={classes.warning} elevation={0}>
  73             <ExpansionPanelSummary className={classes.summary} expandIcon={<ExpandMoreIcon />}>
  74                 <Typography className={classNames(classes.heading, classes.warningColor)}>
  75                     {`Warning: ${runtimeStatus.warning }`}
  76                 </Typography>
  77             </ExpansionPanelSummary>
  78             <ExpansionPanelDetails className={classes.details}>
  79                 <Typography className={classes.warningColor}>
  80                     {runtimeStatus?.warningDetail || 'No additional warning details available'}
  81                 </Typography>
  82             </ExpansionPanelDetails>
  83         </ExpansionPanel></div>
  84         }
  85     </>
  86 });