fix: polling data optimization and unique key fixed

newrelic · Jul 16, 2020 · df0f54d · df0f54d
1 parent 9ba5c19
commit df0f54d
Show file tree

Hide file tree

Showing 4 changed files with 67 additions and 32 deletions.
diff --git a/components/status-page.js b/components/status-page.js
@@ -66,13 +66,22 @@ export default class StatusPage extends React.PureComponent {
     this.setupDataPolling();
   }
 
-  setupDataPolling = () => {
+  componentWillUnmount() {
+    this.stopPollingData();
+  }
+
+  stopPollingData() {
     if (this.StatusPageNetwork) {
       this.StatusPageNetwork.clear();
     }
+  }
+
+  setupDataPolling = () => {
+    this.stopPollingData();
 
     const { refreshRate, accountId } = this.props;
     const { editedHostProvider, editedHostName, editedNrqlQuery } = this.state;
+
     if (editedHostProvider === NRQL_PROVIDER_NAME) {
       this.StatusPageNetwork = new NRQLHelper(
         editedNrqlQuery,
@@ -88,8 +97,14 @@ export default class StatusPage extends React.PureComponent {
         editedHostProvider
       );
 
-      this.StatusPageNetwork.pollCurrentIncidents(this.setIncidentsData);
-      this.StatusPageNetwork.pollSummaryData(this.setSummaryData);
+      const isSameDataSource = this.StatusPageNetwork.checkIfTheSameDataSource();
+
+      if (isSameDataSource) {
+        this.StatusPageNetwork.pollCurrentIncidents(this.setData);
+      } else {
+        this.StatusPageNetwork.pollCurrentIncidents(this.setIncidentsData);
+        this.StatusPageNetwork.pollSummaryData(this.setSummaryData);
+      }
     }
 
     this.FormatService = new FormatService(editedHostProvider);
@@ -292,7 +307,7 @@ export default class StatusPage extends React.PureComponent {
             refreshRate: refreshRate,
             hostname: hostname,
             provider: provider,
-            nrqlQuery: nrqlQuery,
+            nrqlQuery: this.state.editedNrqlQuery,
             accountId: this.props.accountId,
             timelineItemIndex: selectedIndex
           }
@@ -346,6 +361,7 @@ export default class StatusPage extends React.PureComponent {
     this.props.editHostName()(hostNameObject);
     e.stopPropagation();
     this.handleTileSettingsAnimation();
+    this.setupDataPolling();
   }
 
   handleSettingsButtonMouseLeave = () => {
@@ -563,9 +579,9 @@ export default class StatusPage extends React.PureComponent {
           this.handleTileClick(
             statusPageIoSummaryData,
             refreshRate,
-            hostname.hostName,
-            hostname.provider,
-            hostname.nrqlQuery
+            this.state.editedHostName,
+            this.state.editedHostProvider,
+            this.state.editedNrqlQuery
           )
         }
       >
@@ -637,9 +653,9 @@ export default class StatusPage extends React.PureComponent {
             this.handleTileClick(
               statusPageIoSummaryData,
               refreshRate,
-              hostname.hostName,
-              hostname.provider,
-              hostname.nrqlQuery,
+              this.state.editedHostName,
+              this.state.editedHostProvider,
+              this.state.editedNrqlQuery,
               i
             );
           }}

diff --git a/nerdlets/service-details/service-details.js b/nerdlets/service-details/service-details.js
@@ -14,9 +14,9 @@ export default class ServiceDetails extends React.PureComponent {
     hostname: PropTypes.string,
     provider: PropTypes.string.isRequired,
     refreshRate: PropTypes.number,
-    timelineItemIndex: PropTypes.object,
+    timelineItemIndex: PropTypes.number,
     nrqlQuery: PropTypes.string,
-    accountId: PropTypes.string
+    accountId: PropTypes.number
   };
 
   constructor(props) {
@@ -39,14 +39,20 @@ export default class ServiceDetails extends React.PureComponent {
   }
 
   componentDidUpdate(prevProps) {
-    const { timelineItemIndex, hostname, refreshRate, provider } = this.props;
+    const {
+      timelineItemIndex,
+      hostname,
+      refreshRate,
+      provider,
+      nrqlQuery
+    } = this.props;
 
     if (prevProps.timelineItemIndex !== timelineItemIndex) {
       // eslint-disable-next-line react/no-did-update-set-state
       this.setState({ expandedTimelineItem: timelineItemIndex });
     }
 
-    if (prevProps.hostname !== hostname) {
+    if (prevProps.hostname !== hostname || prevProps.nrqlQuery !== nrqlQuery) {
       // eslint-disable-next-line react/no-did-update-set-state
       this.setState({ currentIncidents: undefined });
       this.setupTimelinePolling(hostname, refreshRate, provider);
@@ -58,7 +64,7 @@ export default class ServiceDetails extends React.PureComponent {
 
     this.FormatService = new FormatService(provider);
 
-    if (NRQL_PROVIDER_NAME === provider) {
+    if (provider === NRQL_PROVIDER_NAME) {
       const { nrqlQuery, accountId } = this.props;
       this.statusPageNetwork = new NRQLHelper(
         nrqlQuery,
@@ -122,19 +128,21 @@ export default class ServiceDetails extends React.PureComponent {
   }
 
   buildTimelineItemDetails(incident) {
-    const incident_updates = incident.incident_updates.map(incident_update => {
-      return (
-        <li
-          key={incident_update.created_at}
-          className="timeline-item-contents-item"
-        >
-          <span className="key">
-            {dayjs(incident_update.display_at).format('h:mm a')}:
-          </span>
-          <span className="value">{incident_update.body}</span>
-        </li>
-      );
-    });
+    const incident_updates = incident.incident_updates.map(
+      (incident_update, index) => {
+        return (
+          <li
+            key={`${incident_update.created_at}-${index}`}
+            className="timeline-item-contents-item"
+          >
+            <span className="key">
+              {dayjs(incident_update.display_at).format('h:mm a')}:
+            </span>
+            <span className="value">{incident_update.body}</span>
+          </li>
+        );
+      }
+    );
 
     return incident_updates;
   }

diff --git a/nerdlets/status-page-dashboard/main-page.js b/nerdlets/status-page-dashboard/main-page.js
@@ -317,7 +317,6 @@ export default class StatusPagesDashboard extends React.PureComponent {
       searchQuery,
       hostNames,
       requestForHostnamesMade,
-      keyObject,
       entityGuid
     } = this.state;
 

diff --git a/utilities/network.js b/utilities/network.js
@@ -7,16 +7,21 @@ export default class Network {
     this.statusPageUrl = statusPageUrl;
     this.refreshRateInSeconds = refreshRateInSeconds;
     this.provider = provider;
-    this.setTimeoutId = undefined;
+    this.setTimeoutIds = [];
   }
 
   clear = () => {
-    clearTimeout(this.setTimeoutId);
+    this.setTimeoutIds.forEach(timeoutId => {
+      clearTimeout(timeoutId);
+    });
+
+    this.setTimeoutIds = [];
   };
 
   async _fetchAndPopulateData(url, callbackSetterFunction) {
     let networkResponse;
 
+    console.log('polling network');
     try {
       networkResponse = await axios.get(url);
     } catch {
@@ -28,7 +33,7 @@ export default class Network {
   }
 
   _pollData(url, callbackSetterFunction, callbackBeforePolling) {
-    this.setTimeoutId = setTimeout(async () => {
+    const setTimeoutId = setTimeout(async () => {
       callbackBeforePolling && callbackBeforePolling();
 
       try {
@@ -39,6 +44,8 @@ export default class Network {
         this._pollData(url, callbackSetterFunction);
       }
     }, this.refreshRateInSeconds * 1000);
+
+    this.setTimeoutIds.push(setTimeoutId);
   }
 
   async pollSummaryData(callbackSetterFunction) {
@@ -56,6 +63,11 @@ export default class Network {
     this._pollData(url, callbackSetterFunction, callbackBeforePolling);
   }
 
+  checkIfTheSameDataSource() {
+    const provider = getProvider(this.provider);
+    return provider.summaryUrl === provider.incidentUrl;
+  }
+
   // helper function to get correct url
   // pass either 'summaryUrl' or 'incidentUrl'
   _getUrl(providerUrlProperty) {