mirror of https://github.com/linkerd/linkerd2.git
105 lines
2.6 KiB
JavaScript
105 lines
2.6 KiB
JavaScript
import CloseIcon from '@material-ui/icons/Close';
|
|
import IconButton from '@material-ui/core/IconButton';
|
|
import Linkify from 'react-linkify';
|
|
import React from 'react';
|
|
import Slide from '@material-ui/core/Slide';
|
|
import Snackbar from '@material-ui/core/Snackbar';
|
|
import WarningIcon from '@material-ui/icons/Warning';
|
|
import _isEmpty from 'lodash/isEmpty';
|
|
import { apiErrorPropType } from './util/ApiHelpers.jsx';
|
|
import classNames from 'classnames';
|
|
import { withStyles } from '@material-ui/core/styles';
|
|
|
|
const defaultMessage = 'An error has occurred.';
|
|
|
|
const styles = theme => ({
|
|
close: {
|
|
padding: theme.spacing(2),
|
|
},
|
|
error: {
|
|
backgroundColor: theme.palette.error.dark,
|
|
},
|
|
backgroundColor: theme.palette.error.dark,
|
|
iconVariant: {
|
|
opacity: 0.9,
|
|
marginRight: theme.spacing(1),
|
|
},
|
|
margin: {
|
|
margin: theme.spacing(1),
|
|
},
|
|
message: {
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
},
|
|
});
|
|
|
|
class ErrorSnackbar extends React.Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = {
|
|
open: true,
|
|
};
|
|
}
|
|
|
|
handleClose = () => {
|
|
this.setState({ open: false });
|
|
};
|
|
|
|
render() {
|
|
const { open } = this.state;
|
|
const { message, classes } = this.props;
|
|
const { statusText, error, url, status } = message;
|
|
|
|
return (
|
|
<Snackbar
|
|
anchorOrigin={{
|
|
vertical: 'bottom',
|
|
horizontal: 'left',
|
|
}}
|
|
open={open}
|
|
autoHideDuration={6000}
|
|
onClose={this.handleClose}
|
|
TransitionComponent={props => <Slide direction="up" {...props} />}
|
|
ContentProps={{
|
|
'aria-describedby': 'message-id',
|
|
className: classNames(classes.error, classes.margin),
|
|
}}
|
|
message={(
|
|
<div id="message-id" className="errorMessage">
|
|
<div className={classes.message}>
|
|
<WarningIcon className={classNames(classes.icon, classes.iconVariant)} />
|
|
{ !status ? null : `${status} ` }{ _isEmpty(statusText) ? defaultMessage : statusText }
|
|
</div>
|
|
<Linkify>{ !error ? null : <div>{error}</div> }</Linkify>
|
|
{ !url ? null : <div>{url}</div> }
|
|
</div>
|
|
)}
|
|
action={[
|
|
<IconButton
|
|
key="close"
|
|
aria-label="Close"
|
|
color="inherit"
|
|
className={classes.close}
|
|
onClick={this.handleClose}>
|
|
<CloseIcon />
|
|
</IconButton>,
|
|
]} />
|
|
);
|
|
}
|
|
}
|
|
|
|
ErrorSnackbar.propTypes = {
|
|
message: apiErrorPropType,
|
|
};
|
|
|
|
ErrorSnackbar.defaultProps = {
|
|
message: {
|
|
status: null,
|
|
statusText: defaultMessage,
|
|
url: '',
|
|
error: '',
|
|
},
|
|
};
|
|
|
|
export default withStyles(styles)(ErrorSnackbar);
|