From 1eb9e15f4a385669ba00f4221d8840fd520152c1 Mon Sep 17 00:00:00 2001
From: Risha Mars <mars@buoyant.io>
Date: Thu, 10 May 2018 15:14:59 -0700
Subject: [PATCH] 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.
---
 web/app/js/components/ResourceList.jsx | 25 +++++++++++++++++--------
 1 file changed, 17 insertions(+), 8 deletions(-)

diff --git a/web/app/js/components/ResourceList.jsx b/web/app/js/components/ResourceList.jsx
index 4dbb502db..e932d8b7a 100644
--- a/web/app/js/components/ResourceList.jsx
+++ b/web/app/js/components/ResourceList.jsx
@@ -16,7 +16,7 @@ export default class ResourceList extends React.Component {
     this.handleApiError = this.handleApiError.bind(this);
     this.loadFromServer = this.loadFromServer.bind(this);
 
-    this.state = this.getInitialState();
+    this.state = this.getInitialState(this.props);
   }
 
   getInitialState() {
@@ -30,29 +30,38 @@ export default class ResourceList extends React.Component {
   }
 
   componentDidMount() {
-    this.loadFromServer();
-    this.timerId = window.setInterval(this.loadFromServer, this.state.pollingInterval);
+    this.startServerPolling(this.props.resource);
   }
 
-  componentWillReceiveProps() {
+  componentWillReceiveProps(newProps) {
     // React won't unmount this component when switching resource pages so we need to clear state
-    this.api.cancelCurrentRequests();
-    this.setState(this.getInitialState());
+    this.stopServerPolling();
+    this.setState(this.getInitialState(newProps));
+    this.startServerPolling(newProps.resource);
   }
 
   componentWillUnmount() {
+    this.stopServerPolling();
+  }
+
+  startServerPolling(resource) {
+    this.loadFromServer(resource);
+    this.timerId = window.setInterval(this.loadFromServer, this.state.pollingInterval, resource);
+  }
+
+  stopServerPolling() {
     window.clearInterval(this.timerId);
     this.api.cancelCurrentRequests();
   }
 
-  loadFromServer() {
+  loadFromServer(resource) {
     if (this.state.pendingRequests) {
       return; // don't make more requests if the ones we sent haven't completed
     }
     this.setState({ pendingRequests: true });
 
     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())