pt/superset
1
0
Fork 0
mirror of https://github.com/apache/superset.git synced 2024-09-12 00:29:39 -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,
status: 'success',
queriesArray: [],
queriesLoading: true,
};
}
componentWillMount() {
this.fetchUsers();
}
componentDidMount() {
this.refreshQueries();
}
onUserClicked(userId) {
@ -100,6 +103,7 @@ class QuerySearch extends React.PureComponent {
});
}
refreshQueries() {
this.setState({ queriesLoading: true });
const params = [
this.state.userId ? `user_id=${this.state.userId}` : '',
this.state.databaseId ? `database_id=${this.state.databaseId}` : '',
@ -116,7 +120,7 @@ class QuerySearch extends React.PureComponent {
for (const id in data) {
newQueriesArray.push(data[id]);
}
this.setState({ queriesArray: newQueriesArray });
this.setState({ queriesArray: newQueriesArray, queriesLoading: false });
}
});
}
@ -185,16 +189,20 @@ class QuerySearch extends React.PureComponent {
Search
</Button>
</div>
<QueryTable
columns={[
'state', 'db', 'user', 'date',
'progress', 'rows', 'sql', 'querylink',
]}
onUserClicked={this.onUserClicked.bind(this)}
onDbClicked={this.onDbClicked.bind(this)}
queries={this.state.queriesArray}
actions={this.props.actions}
/>
{this.state.queriesLoading ?
(<img className="loading" alt="Loading..." src="/static/assets/images/loading.gif" />)
:
(<QueryTable
columns={[
'state', 'db', 'user', 'date',
'progress', 'rows', 'sql', 'querylink',
]}
onUserClicked={this.onUserClicked.bind(this)}
onDbClicked={this.onDbClicked.bind(this)}
queries={this.state.queriesArray}
actions={this.props.actions}
/>)
}
</div>
);
}