pt
/
superset
mirror of https://github.com/apache/superset.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

[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:
Maxime Beauchemin 2017-04-04 12:19:44 -07:00 committed by GitHub
parent db6b2f3ae1
commit 6566377740
3 changed files with 11 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
superset/assets/javascripts/SqlLab/components/RunQueryActionButton.jsx
View File

@ -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;

2
superset/assets/javascripts/SqlLab/components/SqlEditor.jsx
View File

@ -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)}

10
superset/assets/javascripts/SqlLab/components/SqlEditorLeftBar.jsx
View File

@ -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}
/>
}