fix: polling data optimization

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

Hide file tree

Showing 7 changed files with 64 additions and 103 deletions.
diff --git a/components/current-incidents.js b/components/current-incidents.js
@@ -1,72 +1,16 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import Network from '../utilities/network';
 import dayjs from 'dayjs';
 
-import { navigation, Icon, Button } from 'nr1';
-import FormatService from '../utilities/format-service';
-import NRQLHelper from '../utilities/nrql-helper';
-// import { hostname } from 'os';
-
-const NRQL_PROVIDER_NAME = 'nrql';
+import { Icon, Button } from 'nr1';
 
 export default class CurrentIncidents extends React.PureComponent {
   static propTypes = {
     hostname: PropTypes.string,
-    provider: PropTypes.string.isRequired,
-    refreshRate: PropTypes.number,
     handleTileClick: PropTypes.func,
-    accountId: PropTypes.string,
-    nrqlQuery: PropTypes.string
+    currentIncidents: PropTypes.array
   };
 
-  constructor(props) {
-    super(props);
-    this.state = {
-      currentIncidents: undefined,
-      isPolling: false
-    };
-
-    if (this.props.provider !== NRQL_PROVIDER_NAME) {
-      this.statusPageNetwork = new Network(
-        this.props.hostname,
-        this.props.refreshRate,
-        this.props.provider
-      );
-    } else {
-      this.statusPageNetwork = new NRQLHelper(
-        this.props.nrqlQuery,
-        this.props.refreshRate,
-        this.props.accountId
-      );
-    }
-    this.FormatService = new FormatService(this.props.provider);
-
-    this.seeMore = this.seeMore.bind(this);
-  }
-
-  componentDidMount() {
-    this.statusPageNetwork.pollCurrentIncidents(
-      this.setIncidentData.bind(this),
-      () => {
-        const { isPolling } = this.state;
-        this.setState({ isPolling: !isPolling });
-      }
-    );
-  }
-
-  seeMore() {
-    const nerdletWithState = {
-      id: 'incident-details',
-      urlState: {
-        hostname: this.props.hostname,
-        provider: this.props.provider,
-        nrqlQuery: this.props.nrqlQuery
-      }
-    };
-    navigation.openStackedNerdlet(nerdletWithState);
-  }
-
   setTimelineSymbol(incidentImpact) {
     switch (incidentImpact) {
       case 'none':
@@ -110,17 +54,8 @@ export default class CurrentIncidents extends React.PureComponent {
     }
   }
 
-  setIncidentData(data) {
-    if (typeof data === 'string') return;
-    this.setState({
-      currentIncidents: this.FormatService.uniformIncidentData(data),
-      isPolling: false
-    });
-  }
-
   render() {
-    const { handleTileClick, hostname } = this.props;
-    const { currentIncidents } = this.state;
+    const { handleTileClick, hostname, currentIncidents } = this.props;
 
     if (!currentIncidents || currentIncidents.length === 0) {
       return (
@@ -138,14 +73,13 @@ export default class CurrentIncidents extends React.PureComponent {
         </div>
       );
     }
-    // console.table(currentIncidents);
-    // this.statusPageNetwork.refreshRateInSeconds = this.props.refreshRate;
-    const first3Incicdents = currentIncidents.slice(0, 3);
-    const first3TimelineItems = first3Incicdents.map((incident, i) => {
+
+    const first3Incidents = currentIncidents.slice(0, 3);
+    const first3TimelineItems = first3Incidents.map((incident, i) => {
       return (
         <div
           className={`timeline-item impact-${incident.impact}`}
-          key={incident.created_at}
+          key={`${incident.created_at}-${i}`}
           onClick={e => {
             handleTileClick(i);
             e.stopPropagation();

diff --git a/components/status-page.js b/components/status-page.js
@@ -35,31 +35,16 @@ export default class StatusPage extends React.PureComponent {
     handleDeleteTileModal: PropTypes.func,
     editHostName: PropTypes.func,
     setServiceTileRef: PropTypes.object,
-    accountId: PropTypes.string
+    accountId: PropTypes.number
   };
 
   constructor(props) {
     super(props);
-
-    if (this.props.hostname.provider !== NRQL_PROVIDER_NAME) {
-      this.StatusPageNetwork = new Network(
-        this.props.hostname.hostName,
-        this.props.refreshRate,
-        this.props.hostname.provider
-      );
-    } else {
-      this.StatusPageNetwork = new NRQLHelper(
-        this.props.hostname.nrqlQuery,
-        this.props.refreshRate,
-        this.props.accountId
-      );
-    }
-
-    this.FormatService = new FormatService(this.props.hostname.provider);
     this.popupHoverTimer = null;
 
     this.state = {
       statusPageIoSummaryData: undefined,
+      currentIncidents: undefined,
       inputValue: '',
       errorInfo: '',
       value: [],
@@ -78,10 +63,37 @@ export default class StatusPage extends React.PureComponent {
   }
 
   async componentDidMount() {
+    this.setupDataPolling();
+  }
+
+  setupDataPolling = () => {
     if (this.StatusPageNetwork) {
-      this.StatusPageNetwork.pollSummaryData(this.setSummaryData.bind(this));
+      this.StatusPageNetwork.clear();
     }
-  }
+
+    const { refreshRate, accountId } = this.props;
+    const { editedHostProvider, editedHostName, editedNrqlQuery } = this.state;
+    if (editedHostProvider === NRQL_PROVIDER_NAME) {
+      this.StatusPageNetwork = new NRQLHelper(
+        editedNrqlQuery,
+        refreshRate,
+        accountId
+      );
+
+      this.StatusPageNetwork.pollCurrentIncidents(this.setData);
+    } else {
+      this.StatusPageNetwork = new Network(
+        editedHostName,
+        refreshRate,
+        editedHostProvider
+      );
+
+      this.StatusPageNetwork.pollCurrentIncidents(this.setIncidentsData);
+      this.StatusPageNetwork.pollSummaryData(this.setSummaryData);
+    }
+
+    this.FormatService = new FormatService(editedHostProvider);
+  };
 
   handleSelectChange = value => {
     this.setState({ value });
@@ -159,15 +171,32 @@ export default class StatusPage extends React.PureComponent {
     }
   }
 
-  setSummaryData(data) {
+  setSummaryData = data => {
     if (typeof data === 'string') {
       this.setState({ errorInfo: data });
     } else {
       this.setState({
         statusPageIoSummaryData: this.FormatService.uniformSummaryData(data)
       });
     }
-  }
+  };
+
+  setIncidentsData = data => {
+    if (typeof data === 'string') return;
+
+    this.setState({
+      currentIncidents: this.FormatService.uniformIncidentData(data)
+    });
+  };
+
+  setData = data => {
+    if (typeof data === 'string') {
+      this.setState({ errorInfo: data });
+    } else {
+      this.setIncidentsData(data);
+      this.setSummaryData(data);
+    }
+  };
 
   handleTileSettingsAnimation = () => {
     const { settingsViewActive } = this.state;
@@ -524,7 +553,7 @@ export default class StatusPage extends React.PureComponent {
 
   renderSuccessfulState() {
     const { refreshRate, hostname, accountId } = this.props;
-    const { statusPageIoSummaryData = {} } = this.state;
+    const { currentIncidents = [], statusPageIoSummaryData = {} } = this.state;
 
     return (
       <div
@@ -598,6 +627,7 @@ export default class StatusPage extends React.PureComponent {
           </h5>
         </div>
         <CurrentIncidents
+          currentIncidents={currentIncidents}
           refreshRate={refreshRate}
           hostname={hostname.hostName}
           provider={hostname.provider}

diff --git a/nerdlets/service-details/index.js b/nerdlets/service-details/index.js
@@ -15,7 +15,7 @@ export default class ServiceDetailsWrapper extends React.PureComponent {
               timelineItemIndex,
               refreshRate,
               nrqlQuery,
-              accountDetails
+              accountId
             } = nerdletUrlState;
 
             return (
@@ -29,7 +29,7 @@ export default class ServiceDetailsWrapper extends React.PureComponent {
                   refreshRate={refreshRate}
                   timelineItemIndex={timelineItemIndex}
                   nrqlQuery={nrqlQuery}
-                  accountDetails={accountDetails}
+                  accountId={accountId}
                 />
               </>
             );

diff --git a/nerdlets/service-details/service-details.js b/nerdlets/service-details/service-details.js
@@ -164,7 +164,7 @@ export default class ServiceDetails extends React.PureComponent {
           className={`timeline-item impact-${incident.impact} ${
             expandedTimelineItem === incidentId ? 'timeline-item-expanded' : ''
           }`}
-          key={incident.created_at}
+          key={`${incident.created_at}-${incidentId}`}
         >
           <div className="timeline-item-timestamp">
             <span className="timeline-timestamp-date">

diff --git a/utilities/formatters/status-io.js b/utilities/formatters/status-io.js
@@ -17,8 +17,6 @@ const StatusIoSeverityToKnown = {
 
 // Example JSON here: https://ezidebit.status.io/1.0/status/598a973f96a8201305000142
 export const statusIoFormatter = data => {
-  // console.debug(data);
-
   const statusCode = data.result.status_overall.status_code;
   const status = data.result.status_overall.status;
 
@@ -30,7 +28,6 @@ export const statusIoFormatter = data => {
 };
 
 export const statusIoIncidentFormatter = data => {
-  // console.log(data);
   return data.result.incidents.map(incident => {
     const firstMessage = incident.messages[0];
 

diff --git a/utilities/nerdlet-storage.js b/utilities/nerdlet-storage.js
@@ -10,7 +10,6 @@ const HOST_NAMES_DOCUMENT_ID = 'host_names';
 
 const _getHostNameFromQueryResults = queryResults => {
   if (queryResults.data) {
-    // console.debug(queryResults);
     let hostNames = queryResults.data;
     if (!hostNames) {
       hostNames = [];

diff --git a/utilities/nrql-helper.js b/utilities/nrql-helper.js
@@ -19,7 +19,8 @@ export default class NRQLHelper {
       networkResponse = await NrqlQuery.query({
         accountId: this.accountId,
         query: this.query,
-        formatType: NrqlQuery.FORMAT_TYPE.RAW
+        formatType: NrqlQuery.FORMAT_TYPE.RAW,
+        pollInterval: this.refreshRateInSeconds
       });
     } catch (error) {
       networkResponse =