pt/superset
1
0
Fork 0
mirror of https://github.com/apache/superset.git synced 2024-09-17 11:09:47 -04:00
Code Issues Packages Projects Releases Wiki Activity

[QuerySearch] Add loading status to QuerySearch page (#1657)

Browse Source 
* Add loading state to QuerySearch
 * Move ajax call to ComponentDidMount
 * Show loading image during ajax call
This commit is contained in:
vera-liu 2016-11-21 13:18:18 -08:00 committed by GitHub
parent c90dd4902f
commit bd6a439e0b
1 changed files with 19 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
superset/assets/javascripts/SqlLab/components/QuerySearch.jsx
View File

@ -25,10 +25,13 @@ class QuerySearch extends React.PureComponent {
to: null, to: null,
status: 'success', status: 'success',
queriesArray: [], queriesArray: [],
queriesLoading: true,
}; };
} }
componentWillMount() { componentWillMount() {
this.fetchUsers(); this.fetchUsers();
}
componentDidMount() {
this.refreshQueries(); this.refreshQueries();
} }
onUserClicked(userId) { onUserClicked(userId) {
@ -100,6 +103,7 @@ class QuerySearch extends React.PureComponent {
}); });
} }
refreshQueries() { refreshQueries() {
this.setState({ queriesLoading: true });
const params = [ const params = [
this.state.userId ? `user_id=${this.state.userId}` : '', this.state.userId ? `user_id=${this.state.userId}` : '',
this.state.databaseId ? `database_id=${this.state.databaseId}` : '', this.state.databaseId ? `database_id=${this.state.databaseId}` : '',
@ -116,7 +120,7 @@ class QuerySearch extends React.PureComponent {
for (const id in data) { for (const id in data) {
newQueriesArray.push(data[id]); newQueriesArray.push(data[id]);
} }
this.setState({ queriesArray: newQueriesArray }); this.setState({ queriesArray: newQueriesArray, queriesLoading: false });
} }
}); });
} }
@ -185,16 +189,20 @@ class QuerySearch extends React.PureComponent {
Search Search
</Button> </Button>
</div> </div>
<QueryTable {this.state.queriesLoading ?
columns={[ (<img className="loading" alt="Loading..." src="/static/assets/images/loading.gif" />)
'state', 'db', 'user', 'date', :
'progress', 'rows', 'sql', 'querylink', (<QueryTable
]} columns={[
onUserClicked={this.onUserClicked.bind(this)} 'state', 'db', 'user', 'date',
onDbClicked={this.onDbClicked.bind(this)} 'progress', 'rows', 'sql', 'querylink',
queries={this.state.queriesArray} ]}
actions={this.props.actions} onUserClicked={this.onUserClicked.bind(this)}
/> onDbClicked={this.onDbClicked.bind(this)}
queries={this.state.queriesArray}
actions={this.props.actions}
/>)
}
</div> </div>
); );
} }