Start polling for new resource type immediately after switching tabs (#926)

* Fix issue where we were waiting for the next polling interval when switching tabs

Fix issue where we were waiting for the next polling interval when switching tabs.
When we switch tabs, we update the Props of the ResourceList component, but we weren't
resetting how we poll the server. This meant we'd wait until the end of the current polling interval
(2s) to get the data for the tab we just switched to.

I've added stopServerPolling and startServerPolling methods so that we can cancel the resource
requests of the page we're leaving and immediately start polling for new data if the resource type
changes.
This commit is contained in:
Risha Mars 2018-05-10 15:14:59 -07:00 committed by GitHub
parent 27345a6d2f
commit 1eb9e15f4a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 17 additions and 8 deletions

View File

@ -16,7 +16,7 @@ export default class ResourceList extends React.Component {
this.handleApiError = this.handleApiError.bind(this); this.handleApiError = this.handleApiError.bind(this);
this.loadFromServer = this.loadFromServer.bind(this); this.loadFromServer = this.loadFromServer.bind(this);
this.state = this.getInitialState(); this.state = this.getInitialState(this.props);
} }
getInitialState() { getInitialState() {
@ -30,29 +30,38 @@ export default class ResourceList extends React.Component {
} }
componentDidMount() { componentDidMount() {
this.loadFromServer(); this.startServerPolling(this.props.resource);
this.timerId = window.setInterval(this.loadFromServer, this.state.pollingInterval);
} }
componentWillReceiveProps() { componentWillReceiveProps(newProps) {
// React won't unmount this component when switching resource pages so we need to clear state // React won't unmount this component when switching resource pages so we need to clear state
this.api.cancelCurrentRequests(); this.stopServerPolling();
this.setState(this.getInitialState()); this.setState(this.getInitialState(newProps));
this.startServerPolling(newProps.resource);
} }
componentWillUnmount() { componentWillUnmount() {
this.stopServerPolling();
}
startServerPolling(resource) {
this.loadFromServer(resource);
this.timerId = window.setInterval(this.loadFromServer, this.state.pollingInterval, resource);
}
stopServerPolling() {
window.clearInterval(this.timerId); window.clearInterval(this.timerId);
this.api.cancelCurrentRequests(); this.api.cancelCurrentRequests();
} }
loadFromServer() { loadFromServer(resource) {
if (this.state.pendingRequests) { if (this.state.pendingRequests) {
return; // don't make more requests if the ones we sent haven't completed return; // don't make more requests if the ones we sent haven't completed
} }
this.setState({ pendingRequests: true }); this.setState({ pendingRequests: true });
this.api.setCurrentRequests([ this.api.setCurrentRequests([
this.api.fetchMetrics(this.api.urlsForResource[this.props.resource].url().rollup) this.api.fetchMetrics(this.api.urlsForResource[resource].url().rollup)
]); ]);
Promise.all(this.api.getCurrentPromises()) Promise.all(this.api.getCurrentPromises())