Present Kong Admin API connection errors to user (#3205)

This commit is contained in:
Opender Singh
2021-03-24 15:38:09 +13:00
committed by GitHub
parent ea711da7e0
commit 3fb647c007
6 changed files with 91 additions and 16 deletions

View File

@@ -545,6 +545,10 @@ i.fa.fa--fixed-width {
overflow: hidden;
}
.overflow-auto {
overflow: auto;
}
.wrap {
white-space: normal;
}

View File

@@ -1,7 +1,8 @@
{
"plugins": [
["@babel/plugin-proposal-decorators", {"legacy": true}],
"@babel/plugin-proposal-class-properties"
"@babel/plugin-proposal-class-properties",
"@babel/plugin-proposal-optional-chaining"
],
"presets": [
"@babel/preset-flow",

View File

@@ -12,5 +12,6 @@
[options]
esproposal.decorators=ignore
esproposal.optional_chaining=enable
[strict]

View File

@@ -280,6 +280,40 @@
"@babel/types": "^7.8.3"
}
},
"@babel/helper-skip-transparent-expression-wrappers": {
"version": "7.12.1",
"resolved": "https://registry.npmjs.org/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.12.1.tgz",
"integrity": "sha512-Mf5AUuhG1/OCChOJ/HcADmvcHM42WJockombn8ATJG3OnyiSxBK/Mm5x78BQWvmtXZKHgbjdGL2kin/HOLlZGA==",
"dev": true,
"requires": {
"@babel/types": "^7.12.1"
},
"dependencies": {
"@babel/helper-validator-identifier": {
"version": "7.12.11",
"resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.12.11.tgz",
"integrity": "sha512-np/lG3uARFybkoHokJUmf1QfEvRVCPbmQeUQpKow5cQ3xWrV9i3rUHodKDJPQfTVX61qKi+UdYk8kik84n7XOw==",
"dev": true
},
"@babel/types": {
"version": "7.13.0",
"resolved": "https://registry.npmjs.org/@babel/types/-/types-7.13.0.tgz",
"integrity": "sha512-hE+HE8rnG1Z6Wzo+MhaKE5lM5eMx71T4EHJgku2E3xIfaULhDcxiiRxUYgwX8qwP1BBSlag+TdGOt6JAidIZTA==",
"dev": true,
"requires": {
"@babel/helper-validator-identifier": "^7.12.11",
"lodash": "^4.17.19",
"to-fast-properties": "^2.0.0"
}
},
"lodash": {
"version": "4.17.21",
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
"integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
"dev": true
}
}
},
"@babel/helper-split-export-declaration": {
"version": "7.8.3",
"resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.8.3.tgz",
@@ -429,13 +463,22 @@
}
},
"@babel/plugin-proposal-optional-chaining": {
"version": "7.9.0",
"resolved": "https://registry.npmjs.org/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.9.0.tgz",
"integrity": "sha512-NDn5tu3tcv4W30jNhmc2hyD5c56G6cXx4TesJubhxrJeCvuuMpttxr0OnNCqbZGhFjLrg+NIhxxC+BK5F6yS3w==",
"version": "7.13.8",
"resolved": "https://registry.npmjs.org/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.13.8.tgz",
"integrity": "sha512-hpbBwbTgd7Cz1QryvwJZRo1U0k1q8uyBmeXOSQUjdg/A2TASkhR/rz7AyqZ/kS8kbpsNA80rOYbxySBJAqmhhQ==",
"dev": true,
"requires": {
"@babel/helper-plugin-utils": "^7.8.3",
"@babel/plugin-syntax-optional-chaining": "^7.8.0"
"@babel/helper-plugin-utils": "^7.13.0",
"@babel/helper-skip-transparent-expression-wrappers": "^7.12.1",
"@babel/plugin-syntax-optional-chaining": "^7.8.3"
},
"dependencies": {
"@babel/helper-plugin-utils": {
"version": "7.13.0",
"resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.13.0.tgz",
"integrity": "sha512-ZPafIPSwzUlAoWT8DKs1W2VyF2gOWthGd5NGFMsBcMMol+ZhK+EQY/e6V96poa6PA/Bh+C9plWN0hXO1uB8AfQ==",
"dev": true
}
}
},
"@babel/plugin-proposal-unicode-property-regex": {

View File

@@ -15,6 +15,7 @@
"@babel/core": "^7.9.0",
"@babel/plugin-proposal-class-properties": "^7.8.3",
"@babel/plugin-proposal-decorators": "^7.8.3",
"@babel/plugin-proposal-optional-chaining": "^7.12.7",
"@babel/preset-env": "^7.9.0",
"@babel/preset-flow": "^7.9.0",
"@babel/preset-react": "^7.9.4",

View File

@@ -26,6 +26,8 @@ type Props = {
},
};
type AxiosError = Object;
type State = {|
workspaceId: string,
kongPortalRbacToken: string,
@@ -33,7 +35,7 @@ type State = {|
kongPortalUrl: string,
kongPortalUserWorkspace: string,
isLoading: boolean,
showConnectionError: boolean,
connectionError: AxiosError | Error | null,
showUploadError: boolean,
forceSpecOverwrite: boolean,
kongSpecFileName: string,
@@ -59,7 +61,7 @@ class DeployToPortal extends React.Component<Props, State> {
kongPortalUserWorkspace: '',
kongSpecFileName: '',
isLoading: false,
showConnectionError: false,
connectionError: null,
showUploadError: false,
kongPortalLegacyMode: false,
kongPortalDeployView: 'edit',
@@ -185,7 +187,7 @@ class DeployToPortal extends React.Component<Props, State> {
const guiHost = response.data.configuration.portal_gui_host;
this.setState({
kongPortalLegacyMode: response.data.configuration.portal_is_legacy,
showConnectionError: false,
connectionError: null,
kongPortalDeployView: 'upload',
kongPortalUrl: urlJoin(`http://${guiHost}`, kongPortalUserWorkspace),
});
@@ -194,8 +196,9 @@ class DeployToPortal extends React.Component<Props, State> {
}
} catch (error) {
trackEvent('Portal', 'Connection Error');
console.log('Connection error', error);
this._handleLoadingToggle(false);
this.setState({ showConnectionError: true });
this.setState({ connectionError: error });
}
}
@@ -237,7 +240,7 @@ class DeployToPortal extends React.Component<Props, State> {
kongSpecFileName,
kongPortalUserWorkspace,
kongPortalDeployView,
showConnectionError,
connectionError,
kongPortalRbacToken,
isLoading,
showUploadError,
@@ -252,14 +255,36 @@ class DeployToPortal extends React.Component<Props, State> {
// Check view
if (kongPortalDeployView === 'edit') {
let connectionErrorElement = null;
if (connectionError) {
const stack = connectionError.stack;
let messageToShow = stack;
if (connectionError?.isAxiosError && connectionError.response) {
const response: Object = connectionError.response;
messageToShow = `${response.status} ${response.statusText}`;
const responseMessage = response.data?.message;
if (responseMessage) {
messageToShow += `: ${responseMessage}`;
}
}
connectionErrorElement = (
<p className="notice error margin-top-sm text-left">
Error. Please check your settings and try again.
<details className="margin-top-sm">
<summary>More details</summary>
<pre className="pad-top-sm selectable">
<code className="wide overflow-auto">{messageToShow}</code>
</pre>
</details>
</p>
);
}
return (
// Kong Connection Details
<form className="pad" onSubmit={this._handleConnectKong}>
{showConnectionError && (
<p className="notice error margin-top-sm">
Error. Please check your settings and try again.
</p>
)}
{connectionErrorElement}
<div className="form-control form-control--outlined">
<label>
Kong API URL