fix(graphCard,redux,views): issues/76 switch to graphQuery

* graphCard, switch to graphQuery instead of individual params * graphCardSelectors, flip to graphQuery instead individual params * viewReducer, consistency, apply granularity to graphQuery * openshiftView, rhelView, remove granularity, favor of graphQuery
RedHatInsights · Mar 11, 2020 · b498e24 · b498e24
1 parent c39ee67
commit b498e24
Show file tree

Hide file tree

Showing 11 changed files with 98 additions and 78 deletions.
diff --git a/src/components/graphCard/__tests__/graphCard.test.js b/src/components/graphCard/__tests__/graphCard.test.js
@@ -2,19 +2,22 @@ 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';
+import { RHSM_API_QUERY_GRANULARITY_TYPES as GRANULARITY_TYPES, rhsmApiTypes } from '../../../types/rhsmApiTypes';
 
 describe('GraphCard Component', () => {
   it('should render a non-connected component', () => {
-    const props = { graphGranularity: GRANULARITY_TYPES.DAILY, productId: 'lorem' };
+    const props = {
+      graphQuery: { [rhsmApiTypes.RHSM_API_QUERY_GRANULARITY]: 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,
+      graphQuery: { [rhsmApiTypes.RHSM_API_QUERY_GRANULARITY]: GRANULARITY_TYPES.DAILY },
       productId: 'lorem',
       graphData: {
         physicalSockets: [

diff --git a/src/components/graphCard/graphCard.js b/src/components/graphCard/graphCard.js
@@ -18,24 +18,20 @@ class GraphCard extends React.Component {
   }
 
   componentDidUpdate(prevProps) {
-    const { graphGranularity, graphQuery, productId } = this.props;
+    const { graphQuery, productId } = this.props;
 
-    if (
-      graphGranularity !== prevProps.graphGranularity ||
-      productId !== prevProps.productId ||
-      !_isEqual(graphQuery, prevProps.graphQuery)
-    ) {
+    if (productId !== prevProps.productId || !_isEqual(graphQuery, prevProps.graphQuery)) {
       this.onUpdateGraphData();
     }
   }
 
   onUpdateGraphData = () => {
-    const { getGraphReportsCapacity, graphQuery, graphGranularity, productId } = this.props;
+    const { getGraphReportsCapacity, graphQuery, productId } = this.props;
+    const graphGranularity = graphQuery && graphQuery[rhsmApiTypes.RHSM_API_QUERY_GRANULARITY];
 
     if (graphGranularity && productId) {
       const { startDate, endDate } = dateHelpers.getRangedDateTime(graphGranularity);
       const query = {
-        [rhsmApiTypes.RHSM_API_QUERY_GRANULARITY]: graphGranularity,
         [rhsmApiTypes.RHSM_API_QUERY_START_DATE]: startDate.toISOString(),
         [rhsmApiTypes.RHSM_API_QUERY_END_DATE]: endDate.toISOString(),
         ...graphQuery
@@ -59,7 +55,8 @@ class GraphCard extends React.Component {
    * @patternfly/react-tokens chart_threshold_stroke_dash_array and chart_threshold_stroke_Width
    */
   renderChart() {
-    const { filterGraphData, graphData, graphGranularity, selectOptionsType, t, productShortLabel } = this.props;
+    const { filterGraphData, graphData, graphQuery, selectOptionsType, t, productShortLabel } = this.props;
+    const graphGranularity = graphQuery && graphQuery[rhsmApiTypes.RHSM_API_QUERY_GRANULARITY];
     const { selected } = graphCardTypes.getGranularityOptions(selectOptionsType);
     const updatedGranularity = graphGranularity || selected;
 
@@ -127,8 +124,9 @@ class GraphCard extends React.Component {
   }
 
   render() {
-    const { cardTitle, children, error, graphGranularity, selectOptionsType, pending, t } = this.props;
+    const { cardTitle, children, error, graphQuery, selectOptionsType, pending, t } = this.props;
     const { options } = graphCardTypes.getGranularityOptions(selectOptionsType);
+    const graphGranularity = graphQuery && graphQuery[rhsmApiTypes.RHSM_API_QUERY_GRANULARITY];
 
     return (
       <Card className="curiosity-usage-graph fadein">
@@ -176,8 +174,9 @@ GraphCard.propTypes = {
   ),
   getGraphReportsCapacity: PropTypes.func,
   graphData: PropTypes.object,
-  graphGranularity: PropTypes.oneOf([...Object.values(GRANULARITY_TYPES)]).isRequired,
-  graphQuery: PropTypes.object,
+  graphQuery: PropTypes.shape({
+    [rhsmApiTypes.RHSM_API_QUERY_GRANULARITY]: PropTypes.oneOf([...Object.values(GRANULARITY_TYPES)]).isRequired
+  }).isRequired,
   pending: PropTypes.bool,
   productId: PropTypes.string.isRequired,
   selectOptionsType: PropTypes.oneOf(['default']),
@@ -193,21 +192,14 @@ GraphCard.defaultProps = {
   filterGraphData: [],
   getGraphReportsCapacity: helpers.noop,
   graphData: {},
-  graphQuery: {},
   pending: false,
   selectOptionsType: 'default',
   t: helpers.noopTranslate,
   productShortLabel: '',
   viewId: 'graphCard'
 };
 
-const makeMapStateToProps = () => {
-  const getGraphCard = reduxSelectors.graphCard.makeGraphCard();
-
-  return (state, props) => ({
-    ...getGraphCard(state, props)
-  });
-};
+const makeMapStateToProps = reduxSelectors.graphCard.makeGraphCard();
 
 const mapDispatchToProps = dispatch => ({
   getGraphReportsCapacity: (id, query) => dispatch(reduxActions.rhsm.getGraphReportsCapacity(id, query))

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:67
-#: src/components/rhelView/rhelView.js:34
+#: 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:140
-#: src/components/graphCard/graphCard.js:144
+#: src/components/graphCard/graphCard.js:138
+#: src/components/graphCard/graphCard.js:142
 msgid \\"curiosity-graph.dropdownPlaceholder\\"
 msgstr \\"\\"
 
@@ -48,7 +48,7 @@ msgstr \\"\\"
 msgid \\"curiosity-graph.noDataLabel\\"
 msgstr \\"\\"
 
-#: src/components/graphCard/graphCard.js:111
+#: src/components/graphCard/graphCard.js:108
 #: 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,8 +20,11 @@ exports[`OpenshiftView Component should have a fallback title: title 1`] = `
           },
         ]
       }
-      graphGranularity="daily"
-      graphQuery={Object {}}
+      graphQuery={
+        Object {
+          "granularity": "daily",
+        }
+      }
       key="lorem ipsum"
       productId="lorem ipsum"
       productShortLabel="OpenShift"
@@ -75,8 +78,11 @@ exports[`OpenshiftView Component should render a non-connected component: non-co
           },
         ]
       }
-      graphGranularity="daily"
-      graphQuery={Object {}}
+      graphQuery={
+        Object {
+          "granularity": "daily",
+        }
+      }
       key="lorem ipsum"
       productId="lorem ipsum"
       productShortLabel="OpenShift"

diff --git a/src/components/openshiftView/openshiftView.js b/src/components/openshiftView/openshiftView.js
@@ -5,8 +5,8 @@ import {
   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 { RHSM_API_QUERY_GRANULARITY_TYPES as GRANULARITY_TYPES, rhsmApiTypes } from '../../types/rhsmApiTypes';
+import { connectTranslate, reduxSelectors } from '../../redux';
 import GraphCard from '../graphCard/graphCard';
 import { Select } from '../select/select';
 import { helpers } from '../../common';
@@ -49,7 +49,7 @@ class OpenshiftView extends React.Component {
 
   render() {
     const { filters } = this.state;
-    const { granularity, graphQuery, routeDetail, t } = this.props;
+    const { graphQuery, routeDetail, t } = this.props;
 
     return (
       <PageLayout>
@@ -60,10 +60,9 @@ class OpenshiftView extends React.Component {
           <GraphCard
             key={routeDetail.pathParameter}
             filterGraphData={filters}
-            graphGranularity={granularity}
+            graphQuery={graphQuery}
             productId={routeDetail.pathParameter}
             viewId={routeDetail.pathId}
-            graphQuery={graphQuery}
             cardTitle={t('curiosity-graph.cardHeading')}
             productShortLabel="OpenShift"
           >
@@ -76,8 +75,9 @@ class OpenshiftView extends React.Component {
 }
 
 OpenshiftView.propTypes = {
-  granularity: PropTypes.oneOf([...Object.values(GRANULARITY_TYPES)]),
-  graphQuery: PropTypes.object,
+  graphQuery: PropTypes.shape({
+    [rhsmApiTypes.RHSM_API_QUERY_GRANULARITY]: PropTypes.oneOf([...Object.values(GRANULARITY_TYPES)])
+  }),
   initialOption: PropTypes.oneOf(['cores', 'sockets']),
   initialFilters: PropTypes.array,
   routeDetail: PropTypes.shape({
@@ -91,8 +91,9 @@ OpenshiftView.propTypes = {
 };
 
 OpenshiftView.defaultProps = {
-  granularity: GRANULARITY_TYPES.DAILY,
-  graphQuery: {},
+  graphQuery: {
+    [rhsmApiTypes.RHSM_API_QUERY_GRANULARITY]: GRANULARITY_TYPES.DAILY
+  },
   initialOption: 'cores',
   initialFilters: [
     { id: 'cores', fill: chartColorBlueLight.value, stroke: chartColorBlueDark.value },
@@ -103,8 +104,8 @@ OpenshiftView.defaultProps = {
   t: helpers.noopTranslate
 };
 
-const mapStateToProps = state => ({ ...state.view });
+const makeMapStateToProps = reduxSelectors.view.makeView(OpenshiftView.defaultProps);
 
-const ConnectedOpenshiftView = connectTranslate(mapStateToProps)(OpenshiftView);
+const ConnectedOpenshiftView = connectTranslate(makeMapStateToProps)(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,8 +25,11 @@ exports[`RhelView Component should have a fallback title: title 1`] = `
           },
         ]
       }
-      graphGranularity="daily"
-      graphQuery={Object {}}
+      graphQuery={
+        Object {
+          "granularity": "daily",
+        }
+      }
       key="lorem ipsum"
       productId="lorem ipsum"
       productShortLabel="RHEL"
@@ -61,8 +64,11 @@ exports[`RhelView Component should render a non-connected component: non-connect
           },
         ]
       }
-      graphGranularity="daily"
-      graphQuery={Object {}}
+      graphQuery={
+        Object {
+          "granularity": "daily",
+        }
+      }
       key="lorem ipsum"
       productId="lorem ipsum"
       productShortLabel="RHEL"

diff --git a/src/components/rhelView/rhelView.js b/src/components/rhelView/rhelView.js
@@ -7,16 +7,16 @@ import {
   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 { RHSM_API_QUERY_GRANULARITY_TYPES as GRANULARITY_TYPES, rhsmApiTypes } from '../../types/rhsmApiTypes';
+import { connectTranslate, reduxSelectors } from '../../redux';
 import GraphCard from '../graphCard/graphCard';
 import { helpers } from '../../common';
 
 class RhelView extends React.Component {
   componentDidMount() {}
 
   render() {
-    const { granularity, graphQuery, initialFilters, routeDetail, t } = this.props;
+    const { graphQuery, initialFilters, routeDetail, t } = this.props;
 
     return (
       <PageLayout>
@@ -27,10 +27,9 @@ class RhelView extends React.Component {
           <GraphCard
             key={routeDetail.pathParameter}
             filterGraphData={initialFilters}
-            graphGranularity={granularity}
+            graphQuery={graphQuery}
             productId={routeDetail.pathParameter}
             viewId={routeDetail.pathId}
-            graphQuery={graphQuery}
             cardTitle={t('curiosity-graph.cardHeading')}
             productShortLabel="RHEL"
           />
@@ -41,8 +40,9 @@ class RhelView extends React.Component {
 }
 
 RhelView.propTypes = {
-  granularity: PropTypes.oneOf([...Object.values(GRANULARITY_TYPES)]),
-  graphQuery: PropTypes.object,
+  graphQuery: PropTypes.shape({
+    [rhsmApiTypes.RHSM_API_QUERY_GRANULARITY]: PropTypes.oneOf([...Object.values(GRANULARITY_TYPES)])
+  }),
   initialFilters: PropTypes.array,
   routeDetail: PropTypes.shape({
     pathParameter: PropTypes.string.isRequired,
@@ -55,8 +55,9 @@ RhelView.propTypes = {
 };
 
 RhelView.defaultProps = {
-  granularity: GRANULARITY_TYPES.DAILY,
-  graphQuery: {},
+  graphQuery: {
+    [rhsmApiTypes.RHSM_API_QUERY_GRANULARITY]: GRANULARITY_TYPES.DAILY
+  },
   initialFilters: [
     { id: 'physicalSockets', fill: chartColorBlueLight.value, stroke: chartColorBlueDark.value },
     { id: 'hypervisorSockets', fill: chartColorCyanLight.value, stroke: chartColorCyanDark.value },
@@ -65,8 +66,8 @@ RhelView.defaultProps = {
   t: helpers.noopTranslate
 };
 
-const mapStateToProps = state => ({ ...state.view });
+const makeMapStateToProps = reduxSelectors.view.makeView(RhelView.defaultProps);
 
-const ConnectedRhelView = connectTranslate(mapStateToProps)(RhelView);
+const ConnectedRhelView = connectTranslate(makeMapStateToProps)(RhelView);
 
 export { ConnectedRhelView as default, ConnectedRhelView, RhelView };
diff --git a/src/redux/reducers/__tests__/__snapshots__/viewReducer.test.js.snap b/src/redux/reducers/__tests__/__snapshots__/viewReducer.test.js.snap
@@ -3,8 +3,9 @@
 exports[`ViewReducer should handle specific defined types: defined type SET_GRAPH_GRANULARITY_RHSM 1`] = `
 Object {
   "result": Object {
-    "granularity": "lorem granularity",
-    "graphQuery": Object {},
+    "graphQuery": Object {
+      "granularity": "lorem granularity",
+    },
   },
   "type": "SET_GRAPH_GRANULARITY_RHSM",
 }

diff --git a/src/redux/reducers/viewReducer.js b/src/redux/reducers/viewReducer.js
@@ -1,6 +1,6 @@
 import { reduxTypes } from '../types';
 import { reduxHelpers } from '../common/reduxHelpers';
-import { RHSM_API_QUERY_SLA } from '../../types/rhsmApiTypes';
+import { RHSM_API_QUERY_GRANULARITY, RHSM_API_QUERY_SLA } from '../../types/rhsmApiTypes';
 
 const initialState = {
   graphQuery: {}
@@ -10,13 +10,13 @@ const viewReducer = (state = initialState, action) => {
   switch (action.type) {
     case reduxTypes.rhsm.SET_GRAPH_GRANULARITY_RHSM:
       return reduxHelpers.setStateProp(
-        null,
+        'graphQuery',
         {
-          granularity: action.granularity
+          [RHSM_API_QUERY_GRANULARITY]: action.granularity
         },
         {
           state,
-          initialState
+          reset: false
         }
       );
     case reduxTypes.rhsm.SET_GRAPH_SLA_RHSM: