mirror of
https://github.com/apache/superset.git
synced 2024-09-17 11:09:47 -04:00
[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 = {
|
const propTypes = {
|
||||||
allowAsync: PropTypes.bool.isRequired,
|
allowAsync: PropTypes.bool.isRequired,
|
||||||
dbId: PropTypes.number.isRequired,
|
dbId: PropTypes.number,
|
||||||
queryState: PropTypes.string.isRequired,
|
queryState: PropTypes.string.isRequired,
|
||||||
runQuery: PropTypes.func.isRequired,
|
runQuery: PropTypes.func.isRequired,
|
||||||
selectedText: PropTypes.string,
|
selectedText: PropTypes.string,
|
||||||
stopQuery: PropTypes.func.isRequired,
|
stopQuery: PropTypes.func.isRequired,
|
||||||
};
|
};
|
||||||
|
const defaultProps = {
|
||||||
|
allowAsync: false,
|
||||||
|
};
|
||||||
|
|
||||||
export default function RunQueryActionButton(props) {
|
export default function RunQueryActionButton(props) {
|
||||||
const runBtnText = props.selectedText ? 'Run Selected Query' : 'Run Query';
|
const runBtnText = props.selectedText ? 'Run Selected Query' : 'Run Query';
|
||||||
@ -69,3 +72,4 @@ export default function RunQueryActionButton(props) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
RunQueryActionButton.propTypes = propTypes;
|
RunQueryActionButton.propTypes = propTypes;
|
||||||
|
RunQueryActionButton.defaultProps = defaultProps;
|
||||||
|
@ -148,7 +148,7 @@ class SqlEditor extends React.PureComponent {
|
|||||||
<div className="pull-left">
|
<div className="pull-left">
|
||||||
<Form inline>
|
<Form inline>
|
||||||
<RunQueryActionButton
|
<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}
|
dbId={this.props.queryEditor.dbId}
|
||||||
queryState={this.props.latestQuery && this.props.latestQuery.state}
|
queryState={this.props.latestQuery && this.props.latestQuery.state}
|
||||||
runQuery={this.runQuery.bind(this)}
|
runQuery={this.runQuery.bind(this)}
|
||||||
|
@ -65,20 +65,22 @@ class SqlEditorLeftBar extends React.PureComponent {
|
|||||||
`${this.props.queryEditor.schema}/${input}`;
|
`${this.props.queryEditor.schema}/${input}`;
|
||||||
return $.get(url).then((data) => ({ options: data.options }));
|
return $.get(url).then((data) => ({ options: data.options }));
|
||||||
}
|
}
|
||||||
// TODO: move fetching methods to the actions.
|
|
||||||
fetchTables(dbId, schema, substr) {
|
fetchTables(dbId, schema, substr) {
|
||||||
|
// This can be large so it shouldn't be put in the Redux store
|
||||||
if (dbId && schema) {
|
if (dbId && schema) {
|
||||||
this.setState({ tableLoading: true, tableOptions: [] });
|
this.setState({ tableLoading: true, tableOptions: [] });
|
||||||
const url = `/superset/tables/${dbId}/${schema}/${substr}/`;
|
const url = `/superset/tables/${dbId}/${schema}/${substr}/`;
|
||||||
$.get(url, (data) => {
|
$.get(url, (data) => {
|
||||||
|
const filterOptions = createFilterOptions({ options: data.options });
|
||||||
this.setState({
|
this.setState({
|
||||||
|
filterOptions,
|
||||||
tableLoading: false,
|
tableLoading: false,
|
||||||
tableOptions: data.options,
|
tableOptions: data.options,
|
||||||
tableLength: data.tableLength,
|
tableLength: data.tableLength,
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
this.setState({ tableLoading: false, tableOptions: [] });
|
this.setState({ tableLoading: false, tableOptions: [], filterOptions: null });
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
changeTable(tableOpt) {
|
changeTable(tableOpt) {
|
||||||
@ -126,8 +128,6 @@ class SqlEditorLeftBar extends React.PureComponent {
|
|||||||
}
|
}
|
||||||
render() {
|
render() {
|
||||||
const shouldShowReset = window.location.search === '?reset=1';
|
const shouldShowReset = window.location.search === '?reset=1';
|
||||||
const options = this.state.tableOptions;
|
|
||||||
const filterOptions = createFilterOptions({ options });
|
|
||||||
return (
|
return (
|
||||||
<div className="scrollbar-container">
|
<div className="scrollbar-container">
|
||||||
<div className="clearfix sql-toolbar scrollbar-content">
|
<div className="clearfix sql-toolbar scrollbar-content">
|
||||||
@ -173,7 +173,7 @@ class SqlEditorLeftBar extends React.PureComponent {
|
|||||||
placeholder={`Add a table (${this.state.tableOptions.length})`}
|
placeholder={`Add a table (${this.state.tableOptions.length})`}
|
||||||
autosize={false}
|
autosize={false}
|
||||||
onChange={this.changeTable.bind(this)}
|
onChange={this.changeTable.bind(this)}
|
||||||
filterOptions={filterOptions}
|
filterOptions={this.state.filterOptions}
|
||||||
options={this.state.tableOptions}
|
options={this.state.tableOptions}
|
||||||
/>
|
/>
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user