iop
/
superset
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

chore(ts): refactor and migrate StackTraceMessage to TypeScript (#9663)

This commit is contained in:
Erik Ritter 2020-04-27 13:24:21 -07:00 committed by GitHub
parent f07ca7d836
commit e8c3803336
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 64 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
superset-frontend/package.json
View File

@ -10,6 +10,7 @@
"scripts": {
"tdd": "NODE_ENV=test jest --watch",
"test": "NODE_ENV=test jest",
"type": "tsc --noEmit",
"cover": "NODE_ENV=test jest --coverage",
"dev": "webpack --mode=development --colors --progress --debug --watch",
"dev-server": "NODE_ENV=development BABEL_ENV=development node --max_old_space_size=4096 ./node_modules/webpack-dev-server/bin/webpack-dev-server.js --mode=development --progress",
@ -17,9 +18,9 @@
"build-dev": "cross-env NODE_OPTIONS=--max_old_space_size=8192 NODE_ENV=development webpack --mode=development --colors --progress",
"build-instrumented": "cross-env NODE_ENV=development BABEL_ENV=instrumented webpack --mode=development --colors --progress",
"build": "cross-env NODE_OPTIONS=--max_old_space_size=8192 NODE_ENV=production webpack --mode=production --colors --progress",
"lint": "eslint --ignore-path=.eslintignore --ext .js,.jsx,.ts,.tsx .",
"lint": "eslint --ignore-path=.eslintignore --ext .js,.jsx,.ts,.tsx . && npm run type",
"prettier-check": "prettier --check '{src,stylesheets}/**/*.{css,less,sass,scss}'",
"lint-fix": "eslint --fix --ignore-path=.eslintignore --ext .js,.jsx,.ts,tsx . && npm run clean-css",
"lint-fix": "eslint --fix --ignore-path=.eslintignore --ext .js,.jsx,.ts,tsx . && npm run clean-css && npm run type",
"clean-css": "prettier --write '{src,stylesheets}/**/*.{css,less,sass,scss}'"
},
"repository": {

8
superset-frontend/src/chart/Chart.jsx
View File

@ -24,7 +24,7 @@ import { isFeatureEnabled, FeatureFlag } from 'src/featureFlags';
import { Logger, LOG_ACTIONS_RENDER_CHART_CONTAINER } from '../logger/LogUtils';
import Loading from '../components/Loading';
import RefreshChartOverlay from '../components/RefreshChartOverlay';
import StackTraceMessage from '../components/StackTraceMessage';
import ErrorMessageWithStackTrace from '../components/ErrorMessageWithStackTrace';
import ErrorBoundary from '../components/ErrorBoundary';
import ChartRenderer from './ChartRenderer';
import './chart.less';
@ -138,10 +138,10 @@ class Chart extends React.PureComponent {
});
}
renderStackTraceMessage() {
renderErrorMessage() {
const { chartAlert, chartStackTrace, queryResponse } = this.props;
return (
<StackTraceMessage
<ErrorMessageWithStackTrace
message={chartAlert}
link={queryResponse ? queryResponse.link : null}
stackTrace={chartStackTrace}
@ -167,7 +167,7 @@ class Chart extends React.PureComponent {
const isFaded = refreshOverlayVisible && !errorMessage;
this.renderContainerStartTime = Logger.getTimestamp();
if (chartStatus === 'failed') {
return this.renderStackTraceMessage();
return this.renderErrorMessage();
}
if (errorMessage) {
return <Alert bsStyle="warning">{errorMessage}</Alert>;

4
superset-frontend/src/components/ErrorBoundary.jsx
View File

@ -19,7 +19,7 @@
import React from 'react';
import PropTypes from 'prop-types';
import { t } from '@superset-ui/translation';
import StackTraceMessage from './StackTraceMessage';
import ErrorMessageWithStackTrace from './ErrorMessageWithStackTrace';
const propTypes = {
children: PropTypes.node.isRequired,
@ -54,7 +54,7 @@ export default class ErrorBoundary extends React.Component {
);
if (this.props.showMessage) {
return (
<StackTraceMessage
<ErrorMessageWithStackTrace
message={message}
stackTrace={info ? info.componentStack : null}
/>

55
superset-frontend/src/components/ErrorMessageWithStackTrace.tsx Normal file
View File

@ -0,0 +1,55 @@
/**
* Licensed to the Apache Software Foundation (ASF) under one
* or more contributor license agreements. See the NOTICE file
* distributed with this work for additional information
* regarding copyright ownership. The ASF licenses this file
* to you 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.
*/
import React, { useState } from 'react';
// @ts-ignore
import { Alert, Collapse } from 'react-bootstrap';
interface Props {
message: string;
link?: string;
stackTrace?: string;
}
export default function ErrorMessageWithStackTrace({
message,
link,
stackTrace,
}: Props) {
const [showStackTrace, setShowStackTrace] = useState(false);
return (
<div className={`stack-trace-container${stackTrace ? ' has-trace' : ''}`}>
<Alert
bsStyle="warning"
onClick={() => setShowStackTrace(!showStackTrace)}
>
{message}
{link && (
<a href={link} target="_blank" rel="noopener noreferrer">
(Request Access)
</a>
)}
</Alert>
{stackTrace && (
<Collapse in={showStackTrace}>
<pre>{stackTrace}</pre>
</Collapse>
)}
</div>
);
}

78
superset-frontend/src/components/StackTraceMessage.jsx
View File

@ -1,78 +0,0 @@
/**
* Licensed to the Apache Software Foundation (ASF) under one
* or more contributor license agreements. See the NOTICE file
* distributed with this work for additional information
* regarding copyright ownership. The ASF licenses this file
* to you 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.
*/
/* eslint-disable react/no-danger */
import React from 'react';
import PropTypes from 'prop-types';
import { Alert, Collapse } from 'react-bootstrap';
const propTypes = {
message: PropTypes.node.isRequired,
link: PropTypes.string,
stackTrace: PropTypes.string,
showStackTrace: PropTypes.bool,
};
const defaultProps = {
showStackTrace: false,
link: null,
stackTrace: null,
};
class StackTraceMessage extends React.PureComponent {
constructor(props) {
super(props);
this.state = {
showStackTrace: props.showStackTrace,
};
}
render() {
return (
<div
className={`stack-trace-container${
this.props.stackTrace ? ' has-trace' : ''
}`}
>
<Alert
bsStyle="warning"
onClick={() =>
this.setState({ showStackTrace: !this.state.showStackTrace })
}
>
{this.props.message}
{this.props.link && (
<a href={this.props.link} target="_blank" rel="noopener noreferrer">
(Request Access)
</a>
)}
</Alert>
{this.props.stackTrace && (
<Collapse in={this.state.showStackTrace}>
<pre>{this.props.stackTrace}</pre>
</Collapse>
)}
</div>
);
}
}
StackTraceMessage.propTypes = propTypes;
StackTraceMessage.defaultProps = defaultProps;
export default StackTraceMessage;