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