perf(graphCardSelectors): expand query filters for graph (#433)

* graphCardSelectors, apply a state query filter * inventoryListSelectors, remove related query ToDo * openshfitView, rhelView, graphQuery rename for consistency
RedHatInsights · Oct 26, 2020 · 48e01ea · 48e01ea
1 parent 37dd445
commit 48e01ea
Show file tree

Hide file tree

Showing 5 changed files with 65 additions and 13 deletions.
diff --git a/src/components/openshiftView/openshiftView.js b/src/components/openshiftView/openshiftView.js
@@ -122,7 +122,11 @@ class OpenshiftView extends React.Component {
       viewId
     } = this.props;
     const isC3 = location?.parsedSearch?.c3 === '';
-    const { graphQuery, inventoryQuery: initialInventoryQuery, toolbarQuery } = apiQueries.parseRhsmQuery(query);
+    const {
+      graphQuery: initialGraphQuery,
+      inventoryQuery: initialInventoryQuery,
+      toolbarQuery
+    } = apiQueries.parseRhsmQuery(query);
 
     return (
       <PageLayout>
@@ -142,7 +146,7 @@ class OpenshiftView extends React.Component {
             <C3GraphCard
               key={routeDetail.pathParameter}
               filterGraphData={graphFilters}
-              query={graphQuery}
+              query={initialGraphQuery}
               productId={routeDetail.pathParameter}
               viewId={viewId}
               cardTitle={t('curiosity-graph.cardHeading')}
@@ -154,7 +158,7 @@ class OpenshiftView extends React.Component {
             <GraphCard
               key={routeDetail.pathParameter}
               filterGraphData={graphFilters}
-              query={graphQuery}
+              query={initialGraphQuery}
               productId={routeDetail.pathParameter}
               viewId={viewId}
               cardTitle={t('curiosity-graph.cardHeading')}

diff --git a/src/components/rhelView/rhelView.js b/src/components/rhelView/rhelView.js
@@ -46,7 +46,11 @@ class RhelView extends React.Component {
       viewId
     } = this.props;
     const isC3 = location?.parsedSearch?.c3 === '';
-    const { graphQuery, inventoryQuery: initialInventoryQuery, toolbarQuery } = apiQueries.parseRhsmQuery(query);
+    const {
+      graphQuery: initialGraphQuery,
+      inventoryQuery: initialInventoryQuery,
+      toolbarQuery
+    } = apiQueries.parseRhsmQuery(query);
 
     return (
       <PageLayout>
@@ -66,7 +70,7 @@ class RhelView extends React.Component {
             <C3GraphCard
               key={routeDetail.pathParameter}
               filterGraphData={initialGraphFilters}
-              query={graphQuery}
+              query={initialGraphQuery}
               productId={routeDetail.pathParameter}
               viewId={viewId}
               cardTitle={t('curiosity-graph.socketsHeading')}
@@ -76,7 +80,7 @@ class RhelView extends React.Component {
             <GraphCard
               key={routeDetail.pathParameter}
               filterGraphData={initialGraphFilters}
-              query={graphQuery}
+              query={initialGraphQuery}
               productId={routeDetail.pathParameter}
               viewId={viewId}
               cardTitle={t('curiosity-graph.socketsHeading')}

diff --git a/src/redux/selectors/__tests__/__snapshots__/graphCardSelectors.test.js.snap b/src/redux/selectors/__tests__/__snapshots__/graphCardSelectors.test.js.snap
@@ -6,6 +6,9 @@ Object {
   "fulfilled": false,
   "graphData": Object {},
   "pending": true,
+  "query": Object {
+    "granularity": "daily",
+  },
   "status": undefined,
 }
 `;
@@ -377,6 +380,9 @@ Object {
     ],
   },
   "pending": false,
+  "query": Object {
+    "granularity": "daily",
+  },
   "status": undefined,
 }
 `;
@@ -387,6 +393,9 @@ Object {
   "fulfilled": false,
   "graphData": Object {},
   "pending": false,
+  "query": Object {
+    "granularity": "daily",
+  },
   "status": undefined,
 }
 `;
@@ -397,6 +406,7 @@ Object {
   "fulfilled": false,
   "graphData": Object {},
   "pending": false,
+  "query": Object {},
   "status": undefined,
 }
 `;
@@ -407,6 +417,7 @@ Object {
   "fulfilled": false,
   "graphData": Object {},
   "pending": false,
+  "query": Object {},
   "status": undefined,
 }
 `;
@@ -562,6 +573,9 @@ Object {
     ],
   },
   "pending": false,
+  "query": Object {
+    "granularity": "daily",
+  },
   "status": undefined,
 }
 `;
@@ -717,6 +731,9 @@ Object {
     ],
   },
   "pending": false,
+  "query": Object {
+    "granularity": "daily",
+  },
   "status": undefined,
 }
 `;
@@ -872,6 +889,9 @@ Object {
     ],
   },
   "pending": false,
+  "query": Object {
+    "granularity": "daily",
+  },
   "status": undefined,
 }
 `;
@@ -1027,6 +1047,9 @@ Object {
     ],
   },
   "pending": false,
+  "query": Object {
+    "granularity": "daily",
+  },
   "status": undefined,
 }
 `;
@@ -1438,6 +1461,9 @@ Object {
     ],
   },
   "pending": false,
+  "query": Object {
+    "granularity": "daily",
+  },
   "status": undefined,
 }
 `;
@@ -1617,6 +1643,9 @@ Object {
     ],
   },
   "pending": false,
+  "query": Object {
+    "granularity": "daily",
+  },
   "status": undefined,
 }
 `;

diff --git a/src/redux/selectors/graphCardSelectors.js b/src/redux/selectors/graphCardSelectors.js
@@ -4,6 +4,7 @@ import _isEqual from 'lodash/isEqual';
 import _camelCase from 'lodash/camelCase';
 import { rhsmApiTypes, RHSM_API_QUERY_TYPES } from '../../types/rhsmApiTypes';
 import { reduxHelpers } from '../common/reduxHelpers';
+import { apiQueries } from '../common';
 
 /**
  * Selector cache.
@@ -25,24 +26,41 @@ const statePropsFilter = (state, props = {}) => ({
   ...state.graph?.reportCapacity?.[props.productId],
   ...{
     viewId: props.viewId,
-    productId: props.productId,
-    query: props.query
+    productId: props.productId
   }
 });
 
+/**
+ * Return a combined query object.
+ *
+ * @param {object} state
+ * @param {object} props
+ * @returns {object}
+ */
+const queryFilter = (state, props = {}) => {
+  const { graphQuery: query } = apiQueries.parseRhsmQuery({
+    ...props.query,
+    ...state.view?.query?.[props.productId],
+    ...state.view?.query?.[props.viewId]
+  });
+
+  return query;
+};
+
 /**
  * Create selector, transform combined state, props into a consumable graph/charting object.
  *
  * @type {{pending: boolean, fulfilled: boolean, graphData: object, error: boolean, status: (*|number)}}
  */
-const selector = createSelector([statePropsFilter], response => {
-  const { viewId = null, productId = null, query = {}, metaId, metaQuery = {}, ...responseData } = response || {};
+const selector = createSelector([statePropsFilter, queryFilter], (response, query = {}) => {
+  const { viewId = null, productId = null, metaId, metaQuery = {}, ...responseData } = response || {};
 
   const updatedResponseData = {
     error: responseData.error || false,
     fulfilled: false,
     pending: responseData.pending || responseData.cancelled || false,
     graphData: {},
+    query,
     status: responseData.status
   };
 

diff --git a/src/redux/selectors/inventoryListSelectors.js b/src/redux/selectors/inventoryListSelectors.js
@@ -38,9 +38,6 @@ const statePropsFilter = (state, props = {}) => ({
   }
 });
 
-/**
- * ToDo: Apply "queryFilter" functionality across selectors for consistency
- */
 /**
  * Return a combined query object.
  *