fix(bannerMessages): issues/511 apply query filter (#518)

* bannerMessages, query updates for banner display * openshiftView, rhelView, pass query to banner * appMessageSelectors, query pass-through
RedHatInsights · Dec 2, 2020 · 79d8334 · 79d8334
1 parent 742e391
commit 79d8334
Show file tree

Hide file tree

Showing 7 changed files with 96 additions and 12 deletions.
diff --git a/src/components/bannerMessages/bannerMessages.js b/src/components/bannerMessages/bannerMessages.js
@@ -2,7 +2,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Alert, AlertActionCloseButton, AlertVariant, Button } from '@patternfly/react-core';
 import { ExternalLinkAltIcon } from '@patternfly/react-icons';
-import { connect, reduxActions, reduxSelectors } from '../../redux';
+import _isEqual from 'lodash/isEqual';
+import { apiQueries, connect, reduxActions, reduxSelectors } from '../../redux';
 import { translate } from '../i18n/i18n';
 import { dateHelpers, helpers } from '../../common';
 import { RHSM_API_QUERY_GRANULARITY_TYPES as GRANULARITY_TYPES, RHSM_API_QUERY_TYPES } from '../../types/rhsmApiTypes';
@@ -20,9 +21,9 @@ class BannerMessages extends React.Component {
   }
 
   componentDidUpdate(prevProps) {
-    const { productId } = this.props;
+    const { query, productId } = this.props;
 
-    if (productId !== prevProps.productId) {
+    if (productId !== prevProps.productId || !_isEqual(query, prevProps.query)) {
       this.onUpdateData();
     }
   }
@@ -33,17 +34,19 @@ class BannerMessages extends React.Component {
    * @event onUpdateGraphData
    */
   onUpdateData = () => {
-    const { getMessageReports, productId } = this.props;
+    const { getMessageReports, productId, query } = this.props;
+    const { graphQuery } = apiQueries.parseRhsmQuery(query);
 
     if (productId) {
       const { startDate, endDate } = dateHelpers.getRangedDateTime('CURRENT');
-      const query = {
+      const updatedGraphQuery = {
+        ...graphQuery,
         [RHSM_API_QUERY_TYPES.GRANULARITY]: GRANULARITY_TYPES.DAILY,
         [RHSM_API_QUERY_TYPES.START_DATE]: startDate.toISOString(),
         [RHSM_API_QUERY_TYPES.END_DATE]: endDate.toISOString()
       };
 
-      getMessageReports(productId, query, { cancel: false });
+      getMessageReports(productId, updatedGraphQuery);
     }
   };
 
@@ -102,11 +105,12 @@ class BannerMessages extends React.Component {
 /**
  * Prop types.
  *
- * @type {{appMessages: object, productId: string, messages: Array, getMessageReports: Function}}
+ * @type {{appMessages: object, productId: string, getMessageReports: Function, query: object, messages: Array}}
  */
 BannerMessages.propTypes = {
   appMessages: PropTypes.object.isRequired,
   getMessageReports: PropTypes.func,
+  query: PropTypes.object,
   messages: PropTypes.arrayOf(
     PropTypes.shape({
       id: PropTypes.string.isRequired,
@@ -121,10 +125,11 @@ BannerMessages.propTypes = {
 /**
  * Default props.
  *
- * @type {{messages: Array, getMessageReports: Function}}
+ * @type {{getMessageReports: Function, query: object, messages: Array}}
  */
 BannerMessages.defaultProps = {
   getMessageReports: helpers.noop,
+  query: {},
   messages: [
     {
       id: 'cloudigradeMismatch',

diff --git a/src/components/openshiftView/__tests__/__snapshots__/openshiftView.test.js.snap b/src/components/openshiftView/__tests__/__snapshots__/openshiftView.test.js.snap
@@ -13,6 +13,16 @@ exports[`OpenshiftView Component should display an alternate graph on query-stri
   >
     <Connect(BannerMessages)
       productId="lorem ipsum"
+      query={
+        Object {
+          "dir": "desc",
+          "granularity": "daily",
+          "limit": 100,
+          "offset": 0,
+          "sort": "last_seen",
+          "uom": "cores",
+        }
+      }
       viewId="viewOpenShift"
     />
   </PageMessages>
@@ -176,6 +186,16 @@ exports[`OpenshiftView Component should have a fallback title: title 1`] = `
   >
     <Connect(BannerMessages)
       productId="lorem ipsum"
+      query={
+        Object {
+          "dir": "desc",
+          "granularity": "daily",
+          "limit": 100,
+          "offset": 0,
+          "sort": "last_seen",
+          "uom": "cores",
+        }
+      }
       viewId="viewOpenShift"
     />
   </PageMessages>
@@ -758,6 +778,16 @@ exports[`OpenshiftView Component should render a non-connected component: non-co
   >
     <Connect(BannerMessages)
       productId="lorem ipsum"
+      query={
+        Object {
+          "dir": "desc",
+          "granularity": "daily",
+          "limit": 100,
+          "offset": 0,
+          "sort": "last_seen",
+          "uom": "cores",
+        }
+      }
       viewId="viewOpenShift"
     />
   </PageMessages>

diff --git a/src/components/openshiftView/openshiftView.js b/src/components/openshiftView/openshiftView.js
@@ -138,7 +138,7 @@ class OpenshiftView extends React.Component {
           {t(`curiosity-view.title`, { appName: helpers.UI_DISPLAY_NAME, context: productLabel })}
         </PageHeader>
         <PageMessages>
-          <BannerMessages productId={routeDetail.pathParameter} viewId={viewId} />
+          <BannerMessages productId={routeDetail.pathParameter} viewId={viewId} query={query} />
         </PageMessages>
         <PageToolbar>
           <Toolbar

diff --git a/src/components/rhelView/__tests__/__snapshots__/rhelView.test.js.snap b/src/components/rhelView/__tests__/__snapshots__/rhelView.test.js.snap
@@ -13,6 +13,15 @@ exports[`RhelView Component should display an alternate graph on query-string up
   >
     <Connect(BannerMessages)
       productId="lorem ipsum"
+      query={
+        Object {
+          "dir": "desc",
+          "granularity": "daily",
+          "limit": 100,
+          "offset": 0,
+          "sort": "last_seen",
+        }
+      }
       viewId="viewRHEL"
     />
   </PageMessages>
@@ -161,6 +170,15 @@ exports[`RhelView Component should have a fallback title: title 1`] = `
   >
     <Connect(BannerMessages)
       productId="lorem ipsum"
+      query={
+        Object {
+          "dir": "desc",
+          "granularity": "daily",
+          "limit": 100,
+          "offset": 0,
+          "sort": "last_seen",
+        }
+      }
       viewId="viewRHEL"
     />
   </PageMessages>
@@ -700,6 +718,15 @@ exports[`RhelView Component should render a non-connected component: non-connect
   >
     <Connect(BannerMessages)
       productId="lorem ipsum"
+      query={
+        Object {
+          "dir": "desc",
+          "granularity": "daily",
+          "limit": 100,
+          "offset": 0,
+          "sort": "last_seen",
+        }
+      }
       viewId="viewRHEL"
     />
   </PageMessages>

diff --git a/src/components/rhelView/rhelView.js b/src/components/rhelView/rhelView.js
@@ -65,7 +65,7 @@ class RhelView extends React.Component {
           {t(`curiosity-view.title`, { appName: helpers.UI_DISPLAY_NAME, context: productLabel })}
         </PageHeader>
         <PageMessages>
-          <BannerMessages productId={routeDetail.pathParameter} viewId={viewId} />
+          <BannerMessages productId={routeDetail.pathParameter} viewId={viewId} query={query} />
         </PageMessages>
         <PageToolbar>
           <Toolbar

diff --git a/src/redux/selectors/__tests__/__snapshots__/appMessagesSelectors.test.js.snap b/src/redux/selectors/__tests__/__snapshots__/appMessagesSelectors.test.js.snap
@@ -4,6 +4,7 @@ exports[`AppMessagesSelectors should map a fulfilled product ID response to an a
 Object {
   "appMessages": Object {
     "cloudigradeMismatch": true,
+    "query": Object {},
   },
 }
 `;
@@ -12,6 +13,7 @@ exports[`AppMessagesSelectors should pass minimal data on a product ID without a
 Object {
   "appMessages": Object {
     "cloudigradeMismatch": false,
+    "query": Object {},
   },
 }
 `;
@@ -20,6 +22,7 @@ exports[`AppMessagesSelectors should pass minimal data on missing a reducer resp
 Object {
   "appMessages": Object {
     "cloudigradeMismatch": false,
+    "query": Object {},
   },
 }
 `;
@@ -28,6 +31,7 @@ exports[`AppMessagesSelectors should populate data from the in memory cache: cac
 Object {
   "appMessages": Object {
     "cloudigradeMismatch": true,
+    "query": Object {},
   },
 }
 `;
@@ -36,6 +40,7 @@ exports[`AppMessagesSelectors should populate data from the in memory cache: cac
 Object {
   "appMessages": Object {
     "cloudigradeMismatch": true,
+    "query": Object {},
   },
 }
 `;
@@ -44,6 +49,7 @@ exports[`AppMessagesSelectors should populate data from the in memory cache: cac
 Object {
   "appMessages": Object {
     "cloudigradeMismatch": true,
+    "query": Object {},
   },
 }
 `;
@@ -52,6 +58,7 @@ exports[`AppMessagesSelectors should populate data on a product ID when the api
 Object {
   "appMessages": Object {
     "cloudigradeMismatch": false,
+    "query": Object {},
   },
 }
 `;

diff --git a/src/redux/selectors/appMessagesSelectors.js b/src/redux/selectors/appMessagesSelectors.js
@@ -1,5 +1,6 @@
 import { createSelector } from 'reselect';
 import { rhsmApiTypes } from '../../types';
+
 /**
  * Selector cache.
  *
@@ -22,15 +23,29 @@ const statePropsFilter = (state, props = {}) => ({
   productId: props.productId
 });
 
+/**
+ * Return a combined query object.
+ *
+ * @param {object} state
+ * @param {object} props
+ * @returns {object}
+ */
+const queryFilter = (state, props = {}) => ({
+  ...props.query,
+  ...state.view?.query?.[props.productId],
+  ...state.view?.query?.[props.viewId]
+});
+
 /**
  * Create selector, transform combined state, props into a consumable object.
  *
  * @type {{appMessages: {cloudigradeMismatch: boolean}}}
  */
-const selector = createSelector([statePropsFilter], data => {
+const selector = createSelector([statePropsFilter, queryFilter], (data, query = {}) => {
   const { viewId = null, productId = null, report = {} } = data || {};
   const appMessages = {
-    cloudigradeMismatch: false
+    cloudigradeMismatch: false,
+    query
   };
 
   const cache = (viewId && productId && selectorCache.data[`${viewId}_${productId}`]) || undefined;