/** * ============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 React from 'react'; import { Theme } from '@mui/material/styles'; import { WithStyles } from '@mui/styles'; import withStyles from '@mui/styles/withStyles'; import createStyles from '@mui/styles/createStyles'; import Modal from '@mui/material/Modal'; import Button from '@mui/material/Button'; import Card from '@mui/material/Card'; import CardActions from '@mui/material/CardActions'; import CardContent from '@mui/material/CardContent'; import Typography from '@mui/material/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 & Connect; // function getModalStyle() { // const top = 50 + rand(); // const left = 50 + rand(); // return { // top: `${ top }%`, // left: `${ left }%`, // transform: `translate(-${ top }%, -${ left }%)`, // }; // } /** * Represents a component for formatting and displaying errors. */ class ErrorDisplayComponent extends React.Component { 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 ( 0} onClose={() => this.props.dispatch(new ClearErrorInfoAction())} > {errorInfo &&
{errorInfo.title != null ? errorInfo.title : "Something went wrong."} {errorInfo.error && errorInfo.error.toString()} {errorInfo.message && errorInfo.message.toString()} {errorInfo.info && errorInfo.info.componentStack && errorInfo.info.componentStack.split('\n').map(line => { return [line,
]; })} {errorInfo.info && errorInfo.info.extra && errorInfo.info.extra.split('\n').map(line => { return [line,
]; })}
||
}
); } } export const ErrorDisplay = withStyles(styles)(connect()(ErrorDisplayComponent)); export default ErrorDisplay;