mirror of https://github.com/apache/superset.git
[sql lab] fix table dropdown with large schema make UI unresponsive (#2547)
Indexing was done on render, moving to doing it only when the data changes.
This commit is contained in:
parent
db6b2f3ae1
commit
6566377740
|
@ -3,12 +3,15 @@ import Button from '../../components/Button';
|
|||
|
||||
const propTypes = {
|
||||
allowAsync: PropTypes.bool.isRequired,
|
||||
dbId: PropTypes.number.isRequired,
|
||||
dbId: PropTypes.number,
|
||||
queryState: PropTypes.string.isRequired,
|
||||
runQuery: PropTypes.func.isRequired,
|
||||
selectedText: PropTypes.string,
|
||||
stopQuery: PropTypes.func.isRequired,
|
||||
};
|
||||
const defaultProps = {
|
||||
allowAsync: false,
|
||||
};
|
||||
|
||||
export default function RunQueryActionButton(props) {
|
||||
const runBtnText = props.selectedText ? 'Run Selected Query' : 'Run Query';
|
||||
|
@ -69,3 +72,4 @@ export default function RunQueryActionButton(props) {
|
|||
}
|
||||
|
||||
RunQueryActionButton.propTypes = propTypes;
|
||||
RunQueryActionButton.defaultProps = defaultProps;
|
||||
|
|
|
@ -148,7 +148,7 @@ class SqlEditor extends React.PureComponent {
|
|||
<div className="pull-left">
|
||||
<Form inline>
|
||||
<RunQueryActionButton
|
||||
allowAsync={this.props.database && this.props.database.allow_run_async}
|
||||
allowAsync={this.props.database ? this.props.database.allow_run_async : false}
|
||||
dbId={this.props.queryEditor.dbId}
|
||||
queryState={this.props.latestQuery && this.props.latestQuery.state}
|
||||
runQuery={this.runQuery.bind(this)}
|
||||
|
|
|
@ -65,20 +65,22 @@ class SqlEditorLeftBar extends React.PureComponent {
|
|||
`${this.props.queryEditor.schema}/${input}`;
|
||||
return $.get(url).then((data) => ({ options: data.options }));
|
||||
}
|
||||
// TODO: move fetching methods to the actions.
|
||||
fetchTables(dbId, schema, substr) {
|
||||
// This can be large so it shouldn't be put in the Redux store
|
||||
if (dbId && schema) {
|
||||
this.setState({ tableLoading: true, tableOptions: [] });
|
||||
const url = `/superset/tables/${dbId}/${schema}/${substr}/`;
|
||||
$.get(url, (data) => {
|
||||
const filterOptions = createFilterOptions({ options: data.options });
|
||||
this.setState({
|
||||
filterOptions,
|
||||
tableLoading: false,
|
||||
tableOptions: data.options,
|
||||
tableLength: data.tableLength,
|
||||
});
|
||||
});
|
||||
} else {
|
||||
this.setState({ tableLoading: false, tableOptions: [] });
|
||||
this.setState({ tableLoading: false, tableOptions: [], filterOptions: null });
|
||||
}
|
||||
}
|
||||
changeTable(tableOpt) {
|
||||
|
@ -126,8 +128,6 @@ class SqlEditorLeftBar extends React.PureComponent {
|
|||
}
|
||||
render() {
|
||||
const shouldShowReset = window.location.search === '?reset=1';
|
||||
const options = this.state.tableOptions;
|
||||
const filterOptions = createFilterOptions({ options });
|
||||
return (
|
||||
<div className="scrollbar-container">
|
||||
<div className="clearfix sql-toolbar scrollbar-content">
|
||||
|
@ -173,7 +173,7 @@ class SqlEditorLeftBar extends React.PureComponent {
|
|||
placeholder={`Add a table (${this.state.tableOptions.length})`}
|
||||
autosize={false}
|
||||
onChange={this.changeTable.bind(this)}
|
||||
filterOptions={filterOptions}
|
||||
filterOptions={this.state.filterOptions}
|
||||
options={this.state.tableOptions}
|
||||
/>
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue