sdnr/wt/odlux/framework/src/components/errorDisplay.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 * as React from 'react';
  19 import { withStyles, WithStyles, createStyles, Theme } from '@material-ui/core/styles';
  20
  21 import Modal from '@material-ui/core/Modal';
  22 import Button from '@material-ui/core/Button';
  23 import Card from '@material-ui/core/Card';
  24 import CardActions from '@material-ui/core/CardActions';
  25 import CardContent from '@material-ui/core/CardContent';
  26 import Typography from '@material-ui/core/Typography';
  27
  28 import { ClearErrorInfoAction, RemoveErrorInfoAction } from '../actions/errorActions';
  29
  30 import connect, { Connect } from '../flux/connect';
  31
  32 const styles = (theme: Theme) => createStyles({
  33   modal: {
  34     display: "flex",
  35     alignItems: "center",
  36     justifyContent: "center",
  37   },
  38   paper: {
  39     width: theme.spacing.unit * 50,
  40     backgroundColor: theme.palette.background.paper,
  41     boxShadow: theme.shadows[5],
  42     padding: theme.spacing.unit * 4,
  43   },
  44   card: {
  45     minWidth: 275,
  46   },
  47   bullet: {
  48     display: 'inline-block',
  49     margin: '0 2px',
  50     transform: 'scale(0.8)',
  51   },
  52   title: {
  53     marginBottom: 16,
  54     fontSize: 14,
  55   },
  56   pos: {
  57     marginBottom: 12,
  58   },
  59 });
  60
  61 type ErrorDisplayProps = WithStyles<typeof styles> & Connect;
  62
  63 // function getModalStyle() {
  64 //   const top = 50 + rand();
  65 //   const left = 50 + rand();
  66
  67 //   return {
  68 //     top: `${ top }%`,
  69 //     left: `${ left }%`,
  70 //     transform: `translate(-${ top }%, -${ left }%)`,
  71 //   };
  72 // }
  73
  74 /**
  75  * Represents a compnent for formaing and displaying errors.
  76  */
  77 class ErrorDisplayComponent extends React.Component<ErrorDisplayProps> {
  78   render(): JSX.Element {
  79     const { classes, state } = this.props;
  80     const errorInfo = state.framework.applicationState.errors.length && state.framework.applicationState.errors[state.framework.applicationState.errors.length - 1];
  81     return (
  82       <Modal className={ classes.modal }
  83         aria-labelledby="simple-modal-title"
  84         aria-describedby="simple-modal-description"
  85         open={ state.framework.applicationState.errors && state.framework.applicationState.errors.length > 0 }
  86         onClose={ () => this.props.dispatch(new ClearErrorInfoAction()) }
  87       >
  88         { errorInfo &&
  89           <div className={ classes.paper }>
  90             <Card className={ classes.card }>
  91               <CardContent>
  92                 <Typography className={ classes.title } color="textSecondary">
  93                   Something went wrong.
  94                 </Typography>
  95                 <Typography variant="headline" component="h2">
  96                 { errorInfo.error && errorInfo.error.toString() }
  97                 </Typography>
  98                 <Typography className={ classes.pos } color="textSecondary">
  99                 { errorInfo.message && errorInfo.message .toString() }
 100                 </Typography>
 101                 <Typography component="p">
 102                 { errorInfo.info && errorInfo.info.componentStack && errorInfo.info.componentStack.split('\n').map(line => {
 103                   return [line, <br />];
 104                 }) }
 105                 { errorInfo.info && errorInfo.info.extra && errorInfo.info.extra.split('\n').map(line => {
 106                   return [line, <br />];
 107                 }) }
 108                 </Typography>
 109               </CardContent>
 110               <CardActions>
 111               <Button size="small" onClick={ () => this.props.dispatch(new RemoveErrorInfoAction(errorInfo)) } >Close</Button>
 112               </CardActions>
 113             </Card>
 114           </div> || null
 115         }
 116       </Modal>
 117     );
 118   }
 119 }
 120
 121 export const ErrorDisplay = withStyles(styles)(connect()(ErrorDisplayComponent));
 122 export default ErrorDisplay;