diff options
Diffstat (limited to 'sdnr/wt/odlux/framework/src/components/errorDisplay.tsx')
-rw-r--r-- | sdnr/wt/odlux/framework/src/components/errorDisplay.tsx | 126 |
1 files changed, 126 insertions, 0 deletions
diff --git a/sdnr/wt/odlux/framework/src/components/errorDisplay.tsx b/sdnr/wt/odlux/framework/src/components/errorDisplay.tsx new file mode 100644 index 000000000..4cf63e927 --- /dev/null +++ b/sdnr/wt/odlux/framework/src/components/errorDisplay.tsx @@ -0,0 +1,126 @@ +/** + * ============LICENSE_START======================================================================== + * ONAP : ccsdk feature sdnr wt odlux + * ================================================================================================= + * Copyright (C) 2019 highstreet technologies GmbH Intellectual Property. All rights reserved. + * ================================================================================================= + * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except + * in compliance with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software distributed under the License + * is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express + * or implied. See the License for the specific language governing permissions and limitations under + * the License. + * ============LICENSE_END========================================================================== + */ +import * as React from 'react'; +import { withStyles, WithStyles, createStyles, Theme } from '@material-ui/core/styles'; + +import Modal from '@material-ui/core/Modal'; +import Button from '@material-ui/core/Button'; +import Card from '@material-ui/core/Card'; +import CardActions from '@material-ui/core/CardActions'; +import CardContent from '@material-ui/core/CardContent'; +import Typography from '@material-ui/core/Typography'; + +import { ClearErrorInfoAction, RemoveErrorInfoAction } from '../actions/errorActions'; + +import connect, { Connect } from '../flux/connect'; + +const styles = (theme: Theme) => createStyles({ + modal: { + display: "flex", + alignItems: "center", + justifyContent: "center", + }, + paper: { + width: theme.spacing(50), + backgroundColor: theme.palette.background.paper, + boxShadow: theme.shadows[5], + padding: theme.spacing(4), + }, + card: { + minWidth: 275, + }, + bullet: { + display: 'inline-block', + margin: '0 2px', + transform: 'scale(0.8)', + }, + title: { + marginBottom: 16, + fontSize: 14, + }, + pos: { + marginBottom: 12, + }, +}); + +type ErrorDisplayProps = WithStyles<typeof styles> & Connect; + +// function getModalStyle() { +// const top = 50 + rand(); +// const left = 50 + rand(); + +// return { +// top: `${ top }%`, +// left: `${ left }%`, +// transform: `translate(-${ top }%, -${ left }%)`, +// }; +// } + +/** + * Represents a compnent for formaing and displaying errors. + */ +class ErrorDisplayComponent extends React.Component<ErrorDisplayProps> { + constructor(props: ErrorDisplayProps) { + super(props); + } + + render(): JSX.Element { + const { classes, state } = this.props; + const errorInfo = state.framework.applicationState.errors.length && state.framework.applicationState.errors[state.framework.applicationState.errors.length - 1]; + return ( + <Modal className={classes.modal} + aria-labelledby="simple-modal-title" + aria-describedby="simple-modal-description" + open={state.framework.applicationState.errors && state.framework.applicationState.errors.length > 0} + onClose={() => this.props.dispatch(new ClearErrorInfoAction())} + > + {errorInfo && + <div className={classes.paper}> + <Card className={classes.card}> + <CardContent> + <Typography className={classes.title} color="textSecondary"> + {errorInfo.title != null ? errorInfo.title : "Something went wrong."} + </Typography> + <Typography variant="h5" component="h2"> + {errorInfo.error && errorInfo.error.toString()} + </Typography> + <Typography className={classes.pos} color="textSecondary"> + {errorInfo.message && errorInfo.message.toString()} + </Typography> + <Typography component="p"> + {errorInfo.info && errorInfo.info.componentStack && errorInfo.info.componentStack.split('\n').map(line => { + return [line, <br />]; + })} + {errorInfo.info && errorInfo.info.extra && errorInfo.info.extra.split('\n').map(line => { + return [line, <br />]; + })} + </Typography> + </CardContent> + <CardActions> + <Button size="small" onClick={() => this.props.dispatch(new RemoveErrorInfoAction(errorInfo))} >Close</Button> + </CardActions> + </Card> + </div> || <div></div> + } + </Modal> + ); + } +} + +export const ErrorDisplay = withStyles(styles)(connect()(ErrorDisplayComponent)); +export default ErrorDisplay;
\ No newline at end of file |