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
  31 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  32     root: {
  33         marginBottom: theme.spacing.unit * 1,
  34     },
  35     heading: {
  36         fontSize: '1rem',
  37     },
  38     summary: {
  39         paddingLeft: theme.spacing.unit * 1,
  40         paddingRight: theme.spacing.unit * 1,
  41     },
  42     summaryText: {
  43         whiteSpace: 'pre-line',
  44     },
  45     details: {
  46         paddingLeft: theme.spacing.unit * 1,
  47         paddingRight: theme.spacing.unit * 1,
  48     },
  49     detailsText: {
  50         fontSize: '0.8rem',
  51         marginTop: '0px',
  52         marginBottom: '0px',
  53         whiteSpace: 'pre-line',
  54     },
  55     errorColor: {
  56         color: theme.customs.colors.red900,
  57     },
  58     error: {
  59         backgroundColor: theme.customs.colors.red100,
  60
  61     },
  62     warning: {
  63         backgroundColor: theme.customs.colors.yellow100,
  64     },
  65     warningColor: {
  66         color: theme.customs.colors.yellow900,
  67     },
  68 });
  69 export interface ProcessRuntimeStatusDataProps {
  70     runtimeStatus: RuntimeStatus | undefined;
  71 }
  72
  73 type ProcessRuntimeStatusProps = ProcessRuntimeStatusDataProps & WithStyles<CssRules>;
  74
  75 export const ProcessRuntimeStatus = withStyles(styles)(
  76     ({ runtimeStatus, classes }: ProcessRuntimeStatusProps) => {
  77     return <div className={classes.root}>
  78         { runtimeStatus?.error &&
  79         <div data-cy='process-runtime-status-error'><ExpansionPanel className={classes.error} elevation={0}>
  80             <ExpansionPanelSummary className={classNames(classes.summary, classes.detailsText)} expandIcon={<ExpandMoreIcon />}>
  81                 <Typography className={classNames(classes.heading, classes.errorColor)}>
  82                     {`Error: ${runtimeStatus.error }`}
  83                 </Typography>
  84             </ExpansionPanelSummary>
  85             <ExpansionPanelDetails className={classes.details}>
  86                 <Typography className={classNames(classes.errorColor, classes.detailsText)}>
  87                     {runtimeStatus?.errorDetail || 'No additional error details available'}
  88                 </Typography>
  89             </ExpansionPanelDetails>
  90         </ExpansionPanel></div>
  91         }
  92         { runtimeStatus?.warning &&
  93         <div data-cy='process-runtime-status-warning' ><ExpansionPanel className={classes.warning} elevation={0}>
  94             <ExpansionPanelSummary className={classNames(classes.summary, classes.detailsText)} expandIcon={<ExpandMoreIcon />}>
  95                 <Typography className={classNames(classes.heading, classes.warningColor)}>
  96                     {`Warning: ${runtimeStatus.warning }`}
  97                 </Typography>
  98             </ExpansionPanelSummary>
  99             <ExpansionPanelDetails className={classes.details}>
 100                 <Typography className={classNames(classes.warningColor, classes.detailsText)}>
 101                     {runtimeStatus?.warningDetail || 'No additional warning details available'}
 102                 </Typography>
 103             </ExpansionPanelDetails>
 104         </ExpansionPanel></div>
 105         }
 106     </div>
 107 });