sdnr/wt-odlux/odlux/apps/faultApp/src/components/faultStatus.tsx

   1 /**
   2  * ============LICENSE_START========================================================================
   3  * ONAP : ccsdk feature sdnr wt odlux
   4  * =================================================================================================
   5  * Copyright (C) 2019 highstreet technologies GmbH Intellectual Property. All rights reserved.
   6  * =================================================================================================
   7  * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except
   8  * in compliance with the License. You may obtain a copy of the License at
   9  *
  10  * http://www.apache.org/licenses/LICENSE-2.0
  11  *
  12  * Unless required by applicable law or agreed to in writing, software distributed under the License
  13  * is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
  14  * or implied. See the License for the specific language governing permissions and limitations under
  15  * the License.
  16  * ============LICENSE_END==========================================================================
  17  */
  18 import React from 'react';
  19
  20 import { faExclamationTriangle } from '@fortawesome/free-solid-svg-icons'; // select app icon
  21 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
  22 import Typography from '@mui/material/Typography';
  23 import { WithStyles } from '@mui/styles';
  24 import createStyles from '@mui/styles/createStyles';
  25 import withStyles from '@mui/styles/withStyles';
  26 import Tooltip from '@mui/material/Tooltip';
  27
  28 import { connect, Connect } from '../../../../framework/src/flux/connect';
  29 import { IApplicationStoreState } from '../../../../framework/src/store/applicationStore';
  30
  31
  32 const styles = () => createStyles({
  33   icon: {
  34     marginLeft: 8,
  35     marginRight: 8,
  36   },
  37   critical: {
  38     color: 'red',
  39   },
  40   major: {
  41     color: 'orange',
  42   },
  43   minor: {
  44     color: '#f7f700',
  45   },
  46   warning: {
  47     color: '#428bca',
  48   },
  49 });
  50
  51 const mapProps = (state: IApplicationStoreState) => ({
  52   faultStatus: state.fault.faultStatus,
  53 });
  54
  55
  56 type FaultStatusComponentProps = & WithStyles<typeof styles> & Connect<typeof mapProps>;
  57
  58 class FaultStatusComponent extends React.Component<FaultStatusComponentProps> {
  59   render(): JSX.Element {
  60     const { classes, faultStatus } = this.props;
  61
  62     return (
  63       <>
  64         <Typography variant="body1" color="inherit">
  65           Alarm Status:
  66           <Tooltip title="Critical Alarms" arrow>
  67             <span aria-label="critical-alarms">
  68               <FontAwesomeIcon className={`${classes.icon} ${classes.critical}`} icon={faExclamationTriangle} />
  69             </span>
  70           </Tooltip>
  71           {faultStatus.critical} |
  72         </Typography>
  73
  74         <Typography variant="body1" color="inherit">
  75           <Tooltip title="Major Alarms" arrow>
  76             <span aria-label="major-alarms">
  77               <FontAwesomeIcon className={`${classes.icon} ${classes.major}`} icon={faExclamationTriangle} />
  78             </span>
  79           </Tooltip>
  80           {faultStatus.major} |
  81         </Typography>
  82
  83         <Typography variant="body1" color="inherit">
  84           <Tooltip title="Minor Alarms" arrow>
  85             <span aria-label="minor-alarms">
  86               <FontAwesomeIcon className={`${classes.icon} ${classes.minor}`} icon={faExclamationTriangle} />
  87             </span>
  88           </Tooltip>
  89           {faultStatus.minor} |
  90         </Typography>
  91
  92         <Typography variant="body1" color="inherit">
  93           <Tooltip title="Warning Alarms" arrow>
  94             <span aria-label="warning-alarms">
  95               <FontAwesomeIcon className={`${classes.icon} ${classes.warning}`} icon={faExclamationTriangle} />
  96             </span>
  97           </Tooltip>
  98           {faultStatus.warning} |
  99         </Typography>
 100       </>
 101     );
 102   }
 103 }
 104
 105 export const FaultStatus = withStyles(styles)(connect(mapProps)(FaultStatusComponent));
 106 export default FaultStatus;