RANGER-4687: Updating the Something went wrong page in Ranger React UI
diff --git a/security-admin/src/main/webapp/react-webapp/src/styles/style.css b/security-admin/src/main/webapp/react-webapp/src/styles/style.css
index f5caff0..1de790b 100755
--- a/security-admin/src/main/webapp/react-webapp/src/styles/style.css
+++ b/security-admin/src/main/webapp/react-webapp/src/styles/style.css
@@ -2573,6 +2573,11 @@
padding: 0 2px;
position: relative;
}
+.error-img {
+ max-width: 496px;
+ font-size: 150px;
+ opacity: 0.5;
+}
.text-word-break {
word-break: break-all;
}
diff --git a/security-admin/src/main/webapp/react-webapp/src/views/ErrorBoundary.jsx b/security-admin/src/main/webapp/react-webapp/src/views/ErrorBoundary.jsx
index 85ece43..660252c 100644
--- a/security-admin/src/main/webapp/react-webapp/src/views/ErrorBoundary.jsx
+++ b/security-admin/src/main/webapp/react-webapp/src/views/ErrorBoundary.jsx
@@ -18,13 +18,20 @@
*/
import React, { Component } from "react";
+import { Button, Col, Row } from "react-bootstrap";
+import { isUndefined } from "lodash";
class ErrorBoundary extends Component {
constructor(props) {
super(props);
- this.state = { error: null, errorInfo: null };
+ this.state = {
+ error: null,
+ errorInfo: null
+ };
}
+ refresh = () => window.location.reload();
+
componentDidCatch(error, errorInfo) {
this.setState({
error: error,
@@ -36,12 +43,71 @@
if (this.state.errorInfo) {
return (
<div>
- <h2>Something went wrong.</h2>
- <details style={{ whiteSpace: "pre-wrap" }}>
- {this.state.error && this.state.error.toString()}
- <br />
- {this.state.errorInfo.componentStack}
- </details>
+ <div className="wrapper">
+ <nav id="sidebar">
+ <div className="sidebar-header"></div>
+ </nav>
+ </div>
+ <div id="content" className="content-body">
+ <div className="wrap">
+ <Row className="justify-content-center mb-3">
+ <Col sm={6}>
+ <i className="fa-fw fa fa-exclamation-triangle p-3 d-block mx-auto error-img"></i>
+ </Col>
+ </Row>
+ <Row className="justify-content-center text-center mb-2">
+ <Col sm={6}>
+ <h2>Oops! Something went wrong...</h2>
+ </Col>
+ </Row>
+ <Row className="justify-content-center text-center mb-3">
+ <Col
+ sm={4}
+ className="p-0 mt-3 mb-5 d-flex justify-content-center"
+ >
+ {!isUndefined(this.state.error?.name) &&
+ this.state.error?.name !== "ChunkLoadError" && (
+ <Button
+ variant="primary"
+ size="sm"
+ className="mr-2"
+ onClick={() => {
+ this.setState({
+ error: null,
+ errorInfo: null
+ });
+ this.props.history.push("/userprofile");
+ }}
+ >
+ <i className="fa-fw fa fa-long-arrow-left"></i> Go Back
+ to Profile page
+ </Button>
+ )}
+ <Button
+ variant="primary"
+ size="sm"
+ className="mr-2"
+ onClick={this.refresh}
+ >
+ <i className="fa-fw fa fa-refresh"></i> Try Again
+ </Button>
+ </Col>
+ </Row>
+ </div>
+ <footer>
+ <div className="main-footer">
+ <p className="text-left">
+ <a
+ target="_blank"
+ href="http://www.apache.org/licenses/LICENSE-2.0"
+ rel="noopener noreferrer"
+ >
+ Licensed under the Apache License, Version 2.0
+ </a>
+ </p>
+ </div>
+ </footer>
+ </div>
</div>
);
}
