fix(graphCardSelectors): improve sync for multiple api calls (#215)

* graphCard, require graphGranularity, relocate granularity to parent * graphCardSelectors, improve sync for multi api calls, aggregation * graphReducer, viewReducer, relocate granularity * i18n, test update * openShiftView, rhelView, relocate granularity * routerHelpers, routerTypes, test updates
RedHatInsights · Mar 19, 2020 · d3779c4 · d3779c4
1 parent 7757709
commit d3779c4
Show file tree

Hide file tree

Showing 19 changed files with 192 additions and 207 deletions.
diff --git a/src/components/graphCard/__tests__/__snapshots__/graphCard.test.js.snap b/src/components/graphCard/__tests__/__snapshots__/graphCard.test.js.snap
@@ -37,7 +37,7 @@ exports[`GraphCard Component should render a non-connected component: non-connec
           ]
         }
         placeholder="t(curiosity-graph.dropdownPlaceholder)"
-        selectedOptions={null}
+        selectedOptions="daily"
         variant="single"
       />
     </CardActions>
@@ -144,7 +144,7 @@ exports[`GraphCard Component should render multiple states: error with 403 statu
           ]
         }
         placeholder="t(curiosity-graph.dropdownPlaceholder)"
-        selectedOptions={null}
+        selectedOptions="daily"
         variant="single"
       />
     </CardActions>
@@ -247,7 +247,7 @@ exports[`GraphCard Component should render multiple states: error with 500 statu
           ]
         }
         placeholder="t(curiosity-graph.dropdownPlaceholder)"
-        selectedOptions={null}
+        selectedOptions="daily"
         variant="single"
       />
     </CardActions>
@@ -350,7 +350,7 @@ exports[`GraphCard Component should render multiple states: fulfilled 1`] = `
           ]
         }
         placeholder="t(curiosity-graph.dropdownPlaceholder)"
-        selectedOptions={null}
+        selectedOptions="daily"
         variant="single"
       />
     </CardActions>
@@ -453,7 +453,7 @@ exports[`GraphCard Component should render multiple states: pending 1`] = `
           ]
         }
         placeholder="t(curiosity-graph.dropdownPlaceholder)"
-        selectedOptions={null}
+        selectedOptions="daily"
         variant="single"
       />
     </CardActions>

diff --git a/src/components/graphCard/__tests__/graphCard.test.js b/src/components/graphCard/__tests__/graphCard.test.js
@@ -2,20 +2,20 @@ import React from 'react';
 import { shallow } from 'enzyme';
 import { ChartArea } from '../../chartArea/chartArea';
 import { GraphCard } from '../graphCard';
+import { RHSM_API_QUERY_GRANULARITY_TYPES as GRANULARITY_TYPES } from '../../../types/rhsmApiTypes';
 
 describe('GraphCard Component', () => {
   it('should render a non-connected component', () => {
-    const props = { productId: 'lorem' };
+    const props = { graphGranularity: GRANULARITY_TYPES.DAILY, productId: 'lorem' };
     const component = shallow(<GraphCard {...props} />);
 
     expect(component).toMatchSnapshot('non-connected');
   });
 
   it('should render multiple states', () => {
     const props = {
+      graphGranularity: GRANULARITY_TYPES.DAILY,
       productId: 'lorem',
-      startDate: new Date('2019-06-01T00:00:00Z'),
-      endDate: new Date('2019-06-30T23:59:59Z'),
       graphData: {
         physicalSockets: [
           {

diff --git a/src/components/graphCard/graphCard.js b/src/components/graphCard/graphCard.js
@@ -17,23 +17,20 @@ class GraphCard extends React.Component {
   }
 
   componentDidUpdate(prevProps) {
-    const { graphGranularity } = this.props;
+    const { graphGranularity, productId } = this.props;
 
-    if (graphGranularity !== prevProps.graphGranularity) {
+    if (graphGranularity !== prevProps.graphGranularity || productId !== prevProps.productId) {
       this.onUpdateGraphData();
     }
   }
 
   onUpdateGraphData = () => {
-    const { getGraphReportsCapacity, graphGranularity, productId, selectOptionsType } = this.props;
+    const { getGraphReportsCapacity, graphGranularity, productId } = this.props;
 
-    if (productId) {
-      const { selected } = graphCardTypes.getGranularityOptions(selectOptionsType);
-      const updatedGranularity = graphGranularity || selected;
-
-      const { startDate, endDate } = dateHelpers.getRangedDateTime(updatedGranularity);
+    if (graphGranularity && productId) {
+      const { startDate, endDate } = dateHelpers.getRangedDateTime(graphGranularity);
       const query = {
-        [rhsmApiTypes.RHSM_API_QUERY_GRANULARITY]: updatedGranularity,
+        [rhsmApiTypes.RHSM_API_QUERY_GRANULARITY]: graphGranularity,
         [rhsmApiTypes.RHSM_API_QUERY_START_DATE]: startDate.toISOString(),
         [rhsmApiTypes.RHSM_API_QUERY_END_DATE]: endDate.toISOString()
       };
@@ -42,17 +39,13 @@ class GraphCard extends React.Component {
     }
   };
 
-  onSelect = event => {
-    const { graphGranularity, viewId } = this.props;
+  onSelect = (event = {}) => {
     const { value } = event;
 
-    if (graphGranularity !== value) {
-      store.dispatch({
-        type: reduxTypes.rhsm.SET_GRAPH_GRANULARITY_RHSM,
-        graphGranularity: value,
-        viewId
-      });
-    }
+    store.dispatch({
+      type: reduxTypes.rhsm.SET_GRAPH_GRANULARITY_RHSM,
+      granularity: value
+    });
   };
 
   /**
@@ -177,7 +170,7 @@ GraphCard.propTypes = {
   ),
   getGraphReportsCapacity: PropTypes.func,
   graphData: PropTypes.object,
-  graphGranularity: PropTypes.oneOf([...Object.values(GRANULARITY_TYPES)]),
+  graphGranularity: PropTypes.oneOf([...Object.values(GRANULARITY_TYPES)]).isRequired,
   pending: PropTypes.bool,
   productId: PropTypes.string.isRequired,
   selectOptionsType: PropTypes.oneOf(['default']),
@@ -193,7 +186,6 @@ GraphCard.defaultProps = {
   filterGraphData: [],
   getGraphReportsCapacity: helpers.noop,
   graphData: {},
-  graphGranularity: null,
   pending: false,
   selectOptionsType: 'default',
   t: helpers.noopTranslate,

diff --git a/src/components/i18n/__tests__/__snapshots__/i18n.test.js.snap b/src/components/i18n/__tests__/__snapshots__/i18n.test.js.snap
@@ -14,8 +14,8 @@ exports[`I18n Component should generate a predictable pot output snapshot: pot o
 msgstr \\"\\"
 \\"Content-Type: text/plain; charset=UTF-8\\\\n\\"
 
-#: src/components/openshiftView/openshiftView.js:64
-#: src/components/rhelView/rhelView.js:31
+#: src/components/openshiftView/openshiftView.js:66
+#: src/components/rhelView/rhelView.js:33
 msgid \\"curiosity-graph.cardHeading\\"
 msgstr \\"\\"
 
@@ -31,8 +31,8 @@ msgstr \\"\\"
 msgid \\"curiosity-graph.dropdownMonthly\\"
 msgstr \\"\\"
 
-#: src/components/graphCard/graphCard.js:141
-#: src/components/graphCard/graphCard.js:145
+#: src/components/graphCard/graphCard.js:134
+#: src/components/graphCard/graphCard.js:138
 msgid \\"curiosity-graph.dropdownPlaceholder\\"
 msgstr \\"\\"
 
@@ -48,7 +48,7 @@ msgstr \\"\\"
 msgid \\"curiosity-graph.noDataLabel\\"
 msgstr \\"\\"
 
-#: src/components/graphCard/graphCard.js:112
+#: src/components/graphCard/graphCard.js:105
 #: src/components/graphCard/graphCardHelpers.js:81
 msgid \\"curiosity-graph.thresholdLabel\\"
 msgstr \\"\\"

diff --git a/src/components/openshiftView/__tests__/__snapshots__/openshiftView.test.js.snap b/src/components/openshiftView/__tests__/__snapshots__/openshiftView.test.js.snap
@@ -20,6 +20,7 @@ exports[`OpenshiftView Component should have a fallback title: title 1`] = `
           },
         ]
       }
+      graphGranularity="daily"
       key="lorem ipsum"
       productId="lorem ipsum"
       productShortLabel="OpenShift"
@@ -73,6 +74,7 @@ exports[`OpenshiftView Component should render a non-connected component: non-co
           },
         ]
       }
+      graphGranularity="daily"
       key="lorem ipsum"
       productId="lorem ipsum"
       productShortLabel="OpenShift"

diff --git a/src/components/openshiftView/openshiftView.js b/src/components/openshiftView/openshiftView.js
@@ -1,11 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { withTranslation } from 'react-i18next';
 import {
   chart_color_blue_100 as chartColorBlueLight,
   chart_color_blue_300 as chartColorBlueDark
 } from '@patternfly/react-tokens';
 import { PageLayout, PageHeader, PageSection } from '../pageLayout/pageLayout';
+import { RHSM_API_QUERY_GRANULARITY_TYPES as GRANULARITY_TYPES } from '../../types/rhsmApiTypes';
+import { connectTranslate } from '../../redux';
 import GraphCard from '../graphCard/graphCard';
 import { Select } from '../select/select';
 import { helpers } from '../../common';
@@ -48,7 +49,7 @@ class OpenshiftView extends React.Component {
 
   render() {
     const { filters } = this.state;
-    const { routeDetail, t } = this.props;
+    const { granularity, routeDetail, t } = this.props;
 
     return (
       <PageLayout>
@@ -59,6 +60,7 @@ class OpenshiftView extends React.Component {
           <GraphCard
             key={routeDetail.pathParameter}
             filterGraphData={filters}
+            graphGranularity={granularity}
             productId={routeDetail.pathParameter}
             viewId={routeDetail.pathId}
             cardTitle={t('curiosity-graph.cardHeading')}
@@ -73,6 +75,7 @@ class OpenshiftView extends React.Component {
 }
 
 OpenshiftView.propTypes = {
+  granularity: PropTypes.oneOf([...Object.values(GRANULARITY_TYPES)]),
   initialOption: PropTypes.oneOf(['cores', 'sockets']),
   initialFilters: PropTypes.array,
   routeDetail: PropTypes.shape({
@@ -86,6 +89,7 @@ OpenshiftView.propTypes = {
 };
 
 OpenshiftView.defaultProps = {
+  granularity: GRANULARITY_TYPES.DAILY,
   initialOption: 'cores',
   initialFilters: [
     { id: 'cores', fill: chartColorBlueLight.value, stroke: chartColorBlueDark.value },
@@ -96,6 +100,8 @@ OpenshiftView.defaultProps = {
   t: helpers.noopTranslate
 };
 
-const TranslatedOpenshiftView = withTranslation()(OpenshiftView);
+const mapStateToProps = state => ({ ...state.view });
 
-export { TranslatedOpenshiftView as default, TranslatedOpenshiftView, OpenshiftView };
+const ConnectedOpenshiftView = connectTranslate(mapStateToProps)(OpenshiftView);
+
+export { ConnectedOpenshiftView as default, ConnectedOpenshiftView, OpenshiftView };
diff --git a/src/components/rhelView/__tests__/__snapshots__/rhelView.test.js.snap b/src/components/rhelView/__tests__/__snapshots__/rhelView.test.js.snap
@@ -25,6 +25,7 @@ exports[`RhelView Component should have a fallback title: title 1`] = `
           },
         ]
       }
+      graphGranularity="daily"
       key="lorem ipsum"
       productId="lorem ipsum"
       productShortLabel="RHEL"
@@ -59,6 +60,7 @@ exports[`RhelView Component should render a non-connected component: non-connect
           },
         ]
       }
+      graphGranularity="daily"
       key="lorem ipsum"
       productId="lorem ipsum"
       productShortLabel="RHEL"

diff --git a/src/components/rhelView/rhelView.js b/src/components/rhelView/rhelView.js
@@ -1,21 +1,22 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { withTranslation } from 'react-i18next';
 import {
   chart_color_blue_100 as chartColorBlueLight,
   chart_color_blue_300 as chartColorBlueDark,
   chart_color_cyan_100 as chartColorCyanLight,
   chart_color_cyan_300 as chartColorCyanDark
 } from '@patternfly/react-tokens';
 import { PageLayout, PageHeader, PageSection } from '../pageLayout/pageLayout';
+import { RHSM_API_QUERY_GRANULARITY_TYPES as GRANULARITY_TYPES } from '../../types/rhsmApiTypes';
+import { connectTranslate } from '../../redux';
 import GraphCard from '../graphCard/graphCard';
 import { helpers } from '../../common';
 
 class RhelView extends React.Component {
   componentDidMount() {}
 
   render() {
-    const { initialFilters, routeDetail, t } = this.props;
+    const { granularity, initialFilters, routeDetail, t } = this.props;
 
     return (
       <PageLayout>
@@ -26,6 +27,7 @@ class RhelView extends React.Component {
           <GraphCard
             key={routeDetail.pathParameter}
             filterGraphData={initialFilters}
+            graphGranularity={granularity}
             productId={routeDetail.pathParameter}
             viewId={routeDetail.pathId}
             cardTitle={t('curiosity-graph.cardHeading')}
@@ -38,6 +40,7 @@ class RhelView extends React.Component {
 }
 
 RhelView.propTypes = {
+  granularity: PropTypes.oneOf([...Object.values(GRANULARITY_TYPES)]),
   initialFilters: PropTypes.array,
   routeDetail: PropTypes.shape({
     pathParameter: PropTypes.string.isRequired,
@@ -50,6 +53,7 @@ RhelView.propTypes = {
 };
 
 RhelView.defaultProps = {
+  granularity: GRANULARITY_TYPES.DAILY,
   initialFilters: [
     { id: 'physicalSockets', fill: chartColorBlueLight.value, stroke: chartColorBlueDark.value },
     { id: 'hypervisorSockets', fill: chartColorCyanLight.value, stroke: chartColorCyanDark.value },
@@ -58,6 +62,8 @@ RhelView.defaultProps = {
   t: helpers.noopTranslate
 };
 
-const TranslatedRhelView = withTranslation()(RhelView);
+const mapStateToProps = state => ({ ...state.view });
 
-export { TranslatedRhelView as default, TranslatedRhelView, RhelView };
+const ConnectedRhelView = connectTranslate(mapStateToProps)(RhelView);
+
+export { ConnectedRhelView as default, ConnectedRhelView, RhelView };