fix(rhsmApiTypes): issues/380 api query types

* rhsmApiTypes, apply api query types for individual api calls * graphCard, c3, types updates, centralize getQuery * rhelView, openshiftView, types updates * redux, actions, selectors, reducer, types updates
RedHatInsights · Aug 20, 2020 · b5be43e · b5be43e
1 parent 776ac29
commit b5be43e
Show file tree

Hide file tree

Showing 24 changed files with 358 additions and 379 deletions.
diff --git a/src/components/c3GraphCard/c3GraphCard.js b/src/components/c3GraphCard/c3GraphCard.js
@@ -5,7 +5,7 @@ import _isEqual from 'lodash/isEqual';
 import { Select } from '../form/select';
 import { connect, reduxActions, reduxSelectors, reduxTypes, store } from '../../redux';
 import { helpers, dateHelpers } from '../../common';
-import { rhsmApiTypes, RHSM_API_QUERY_GRANULARITY_TYPES as GRANULARITY_TYPES } from '../../types/rhsmApiTypes';
+import { RHSM_API_QUERY_GRANULARITY_TYPES as GRANULARITY_TYPES, RHSM_API_QUERY_TYPES } from '../../types/rhsmApiTypes';
 import { c3GraphCardHelpers } from './c3GraphCardHelpers';
 import { C3GraphCardLegendItem } from './c3GraphCardLegendItem';
 import { graphCardTypes } from '../graphCard/graphCardTypes';
@@ -42,13 +42,13 @@ class C3GraphCard extends React.Component {
    */
   onUpdateGraphData = () => {
     const { getGraphReportsCapacity, isDisabled, productId, query } = this.props;
-    const graphGranularity = query?.[rhsmApiTypes.RHSM_API_QUERY_GRANULARITY];
+    const graphGranularity = this.getQueryGranularity();
 
     if (!isDisabled && graphGranularity && productId) {
       const { startDate, endDate } = dateHelpers.getRangedDateTime(graphGranularity);
       const graphQuery = {
-        [rhsmApiTypes.RHSM_API_QUERY_START_DATE]: startDate.toISOString(),
-        [rhsmApiTypes.RHSM_API_QUERY_END_DATE]: endDate.toISOString(),
+        [RHSM_API_QUERY_TYPES.START_DATE]: startDate.toISOString(),
+        [RHSM_API_QUERY_TYPES.END_DATE]: endDate.toISOString(),
         ...query
       };
 
@@ -67,12 +67,17 @@ class C3GraphCard extends React.Component {
     const { viewId } = this.props;
 
     store.dispatch({
-      type: reduxTypes.query.SET_QUERY_RHSM_TYPES[rhsmApiTypes.RHSM_API_QUERY_GRANULARITY],
+      type: reduxTypes.query.SET_QUERY_RHSM_TYPES[RHSM_API_QUERY_TYPES.GRANULARITY],
       viewId,
-      [rhsmApiTypes.RHSM_API_QUERY_GRANULARITY]: value
+      [RHSM_API_QUERY_TYPES.GRANULARITY]: value
     });
   };
 
+  getQueryGranularity() {
+    const { query } = this.props;
+    return query?.[RHSM_API_QUERY_TYPES.GRANULARITY];
+  }
+
   /**
    * Apply a custom legend.
    *
@@ -121,8 +126,8 @@ class C3GraphCard extends React.Component {
    * @returns {Node}
    */
   renderChart() {
-    const { filterGraphData, graphData, productId, productShortLabel, query, selectOptionsType } = this.props;
-    const graphGranularity = query?.[rhsmApiTypes.RHSM_API_QUERY_GRANULARITY];
+    const { filterGraphData, graphData, productId, productShortLabel, selectOptionsType } = this.props;
+    const graphGranularity = this.getQueryGranularity();
     const { selected } = graphCardTypes.getGranularityOptions(selectOptionsType);
     const updatedGranularity = graphGranularity || selected;
 
@@ -170,14 +175,14 @@ class C3GraphCard extends React.Component {
    * @returns {Node}
    */
   render() {
-    const { cardTitle, children, error, isDisabled, pending, query, selectOptionsType, t } = this.props;
+    const { cardTitle, children, error, isDisabled, pending, selectOptionsType, t } = this.props;
 
     if (isDisabled) {
       return null;
     }
 
     const { options } = graphCardTypes.getGranularityOptions(selectOptionsType);
-    const graphGranularity = query?.[rhsmApiTypes.RHSM_API_QUERY_GRANULARITY];
+    const graphGranularity = this.getQueryGranularity();
 
     return (
       <Card className="curiosity-usage-graph">
@@ -229,7 +234,7 @@ C3GraphCard.propTypes = {
   getGraphReportsCapacity: PropTypes.func,
   graphData: PropTypes.object,
   query: PropTypes.shape({
-    [rhsmApiTypes.RHSM_API_QUERY_GRANULARITY]: PropTypes.oneOf([...Object.values(GRANULARITY_TYPES)]).isRequired
+    [RHSM_API_QUERY_TYPES.GRANULARITY]: PropTypes.oneOf([...Object.values(GRANULARITY_TYPES)]).isRequired
   }).isRequired,
   isDisabled: PropTypes.bool,
   pending: PropTypes.bool,

diff --git a/src/components/c3GraphCard/tests/c3GraphCard.test.js b/src/components/c3GraphCard/tests/c3GraphCard.test.js
@@ -2,12 +2,15 @@ import React from 'react';
 import { shallow } from 'enzyme';
 import { C3Chart } from '../../c3Chart/c3Chart';
 import { C3GraphCard } from '../c3GraphCard';
-import { RHSM_API_QUERY_GRANULARITY_TYPES as GRANULARITY_TYPES, rhsmApiTypes } from '../../../types/rhsmApiTypes';
+import {
+  RHSM_API_QUERY_GRANULARITY_TYPES as GRANULARITY_TYPES,
+  RHSM_API_QUERY_TYPES
+} from '../../../types/rhsmApiTypes';
 
 describe('C3GraphCard Component', () => {
   it('should render a non-connected component', () => {
     const props = {
-      query: { [rhsmApiTypes.RHSM_API_QUERY_GRANULARITY]: GRANULARITY_TYPES.DAILY },
+      query: { [RHSM_API_QUERY_TYPES.GRANULARITY]: GRANULARITY_TYPES.DAILY },
       productId: 'lorem'
     };
     const component = shallow(<C3GraphCard {...props} />);
@@ -17,7 +20,7 @@ describe('C3GraphCard Component', () => {
 
   it('should render multiple states', () => {
     const props = {
-      query: { [rhsmApiTypes.RHSM_API_QUERY_GRANULARITY]: GRANULARITY_TYPES.DAILY },
+      query: { [RHSM_API_QUERY_TYPES.GRANULARITY]: GRANULARITY_TYPES.DAILY },
       productId: 'lorem',
       graphData: {
         physicalSockets: [
@@ -88,7 +91,7 @@ describe('C3GraphCard Component', () => {
           id: 'thresholdLoremIpsumSockets'
         }
       ],
-      query: { [rhsmApiTypes.RHSM_API_QUERY_GRANULARITY]: GRANULARITY_TYPES.DAILY },
+      query: { [RHSM_API_QUERY_TYPES.GRANULARITY]: GRANULARITY_TYPES.DAILY },
       productId: 'lorem',
       graphData: {
         loremIpsumSockets: [
@@ -151,7 +154,7 @@ describe('C3GraphCard Component', () => {
 
   it('should render a custom legend', () => {
     const props = {
-      query: { [rhsmApiTypes.RHSM_API_QUERY_GRANULARITY]: GRANULARITY_TYPES.DAILY },
+      query: { [RHSM_API_QUERY_TYPES.GRANULARITY]: GRANULARITY_TYPES.DAILY },
       productId: 'lorem'
     };
 
@@ -171,7 +174,7 @@ describe('C3GraphCard Component', () => {
 
   it('should return an empty render when disabled', () => {
     const props = {
-      query: { [rhsmApiTypes.RHSM_API_QUERY_GRANULARITY]: GRANULARITY_TYPES.DAILY },
+      query: { [RHSM_API_QUERY_TYPES.GRANULARITY]: GRANULARITY_TYPES.DAILY },
       isDisabled: true,
       productId: 'lorem'
     };

diff --git a/src/components/graphCard/__tests__/graphCard.test.js b/src/components/graphCard/__tests__/graphCard.test.js
@@ -2,12 +2,15 @@ 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, rhsmApiTypes } from '../../../types/rhsmApiTypes';
+import {
+  RHSM_API_QUERY_GRANULARITY_TYPES as GRANULARITY_TYPES,
+  RHSM_API_QUERY_TYPES
+} from '../../../types/rhsmApiTypes';
 
 describe('GraphCard Component', () => {
   it('should render a non-connected component', () => {
     const props = {
-      query: { [rhsmApiTypes.RHSM_API_QUERY_GRANULARITY]: GRANULARITY_TYPES.DAILY },
+      query: { [RHSM_API_QUERY_TYPES.GRANULARITY]: GRANULARITY_TYPES.DAILY },
       productId: 'lorem'
     };
     const component = shallow(<GraphCard {...props} />);
@@ -17,7 +20,7 @@ describe('GraphCard Component', () => {
 
   it('should render multiple states', () => {
     const props = {
-      query: { [rhsmApiTypes.RHSM_API_QUERY_GRANULARITY]: GRANULARITY_TYPES.DAILY },
+      query: { [RHSM_API_QUERY_TYPES.GRANULARITY]: GRANULARITY_TYPES.DAILY },
       productId: 'lorem',
       graphData: {
         physicalSockets: [
@@ -88,7 +91,7 @@ describe('GraphCard Component', () => {
           id: 'thresholdLoremIpsumSockets'
         }
       ],
-      query: { [rhsmApiTypes.RHSM_API_QUERY_GRANULARITY]: GRANULARITY_TYPES.DAILY },
+      query: { [RHSM_API_QUERY_TYPES.GRANULARITY]: GRANULARITY_TYPES.DAILY },
       productId: 'lorem',
       graphData: {
         loremIpsumSockets: [
@@ -152,7 +155,7 @@ describe('GraphCard Component', () => {
 
   it('should return an empty render when disabled', () => {
     const props = {
-      query: { [rhsmApiTypes.RHSM_API_QUERY_GRANULARITY]: GRANULARITY_TYPES.DAILY },
+      query: { [RHSM_API_QUERY_TYPES.GRANULARITY]: GRANULARITY_TYPES.DAILY },
       isDisabled: true,
       productId: 'lorem'
     };

diff --git a/src/components/graphCard/graphCard.js b/src/components/graphCard/graphCard.js
@@ -6,7 +6,7 @@ import _isEqual from 'lodash/isEqual';
 import { Select } from '../form/select';
 import { connect, reduxActions, reduxSelectors, reduxTypes, store } from '../../redux';
 import { helpers, dateHelpers } from '../../common';
-import { rhsmApiTypes, RHSM_API_QUERY_GRANULARITY_TYPES as GRANULARITY_TYPES } from '../../types/rhsmApiTypes';
+import { RHSM_API_QUERY_GRANULARITY_TYPES as GRANULARITY_TYPES, RHSM_API_QUERY_TYPES } from '../../types/rhsmApiTypes';
 import { graphCardHelpers } from './graphCardHelpers';
 import { graphCardTypes } from './graphCardTypes';
 import GraphCardChartTooltip from './graphCardChartTooltip';
@@ -42,13 +42,13 @@ class GraphCard extends React.Component {
    */
   onUpdateGraphData = () => {
     const { getGraphReportsCapacity, isDisabled, productId, query } = this.props;
-    const graphGranularity = query?.[rhsmApiTypes.RHSM_API_QUERY_GRANULARITY];
+    const graphGranularity = this.getQueryGranularity();
 
     if (!isDisabled && graphGranularity && productId) {
       const { startDate, endDate } = dateHelpers.getRangedDateTime(graphGranularity);
       const graphQuery = {
-        [rhsmApiTypes.RHSM_API_QUERY_START_DATE]: startDate.toISOString(),
-        [rhsmApiTypes.RHSM_API_QUERY_END_DATE]: endDate.toISOString(),
+        [RHSM_API_QUERY_TYPES.START_DATE]: startDate.toISOString(),
+        [RHSM_API_QUERY_TYPES.END_DATE]: endDate.toISOString(),
         ...query
       };
 
@@ -67,12 +67,17 @@ class GraphCard extends React.Component {
     const { viewId } = this.props;
 
     store.dispatch({
-      type: reduxTypes.query.SET_QUERY_RHSM_TYPES[rhsmApiTypes.RHSM_API_QUERY_GRANULARITY],
+      type: reduxTypes.query.SET_QUERY_RHSM_TYPES[RHSM_API_QUERY_TYPES.GRANULARITY],
       viewId,
-      [rhsmApiTypes.RHSM_API_QUERY_GRANULARITY]: value
+      [RHSM_API_QUERY_TYPES.GRANULARITY]: value
     });
   };
 
+  getQueryGranularity() {
+    const { query } = this.props;
+    return query?.[RHSM_API_QUERY_TYPES.GRANULARITY];
+  }
+
   /**
    * FixMe: custom use of dash over threshold vs updating PF Charts legend threshold symbol
    *
@@ -84,8 +89,8 @@ class GraphCard extends React.Component {
    * @returns {Node}
    */
   renderChart() {
-    const { filterGraphData, graphData, selectOptionsType, productShortLabel, query, viewId } = this.props;
-    const graphGranularity = query?.[rhsmApiTypes.RHSM_API_QUERY_GRANULARITY];
+    const { filterGraphData, graphData, selectOptionsType, productShortLabel, viewId } = this.props;
+    const graphGranularity = this.getQueryGranularity();
     const { selected } = graphCardTypes.getGranularityOptions(selectOptionsType);
     const updatedGranularity = graphGranularity || selected;
 
@@ -158,14 +163,14 @@ class GraphCard extends React.Component {
    * @returns {Node}
    */
   render() {
-    const { cardTitle, children, error, isDisabled, pending, query, selectOptionsType, t } = this.props;
+    const { cardTitle, children, error, isDisabled, pending, selectOptionsType, t } = this.props;
 
     if (isDisabled) {
       return null;
     }
 
     const { options } = graphCardTypes.getGranularityOptions(selectOptionsType);
-    const graphGranularity = query?.[rhsmApiTypes.RHSM_API_QUERY_GRANULARITY];
+    const graphGranularity = this.getQueryGranularity();
 
     return (
       <Card className="curiosity-usage-graph">
@@ -218,7 +223,7 @@ GraphCard.propTypes = {
   getGraphReportsCapacity: PropTypes.func,
   graphData: PropTypes.object,
   query: PropTypes.shape({
-    [rhsmApiTypes.RHSM_API_QUERY_GRANULARITY]: PropTypes.oneOf([...Object.values(GRANULARITY_TYPES)]).isRequired
+    [RHSM_API_QUERY_TYPES.GRANULARITY]: PropTypes.oneOf([...Object.values(GRANULARITY_TYPES)]).isRequired
   }).isRequired,
   isDisabled: PropTypes.bool,
   pending: PropTypes.bool,

diff --git a/src/components/i18n/__tests__/__snapshots__/i18n.test.js.snap b/src/components/i18n/__tests__/__snapshots__/i18n.test.js.snap
@@ -414,11 +414,11 @@ Array [
       },
       Object {
         "key": "curiosity-toolbar.category",
-        "match": "translate('curiosity-toolbar.category', { context: RHSM_API_QUERY_SLA })",
+        "match": "translate('curiosity-toolbar.category', { context: RHSM_API_QUERY_TYPES.SLA })",
       },
       Object {
         "key": "curiosity-toolbar.category",
-        "match": "translate('curiosity-toolbar.category', { context: RHSM_API_QUERY_USAGE })",
+        "match": "translate('curiosity-toolbar.category', { context: RHSM_API_QUERY_TYPES.USAGE })",
       },
     ],
   },

diff --git a/src/components/inventoryList/__tests__/inventoryList.test.js b/src/components/inventoryList/__tests__/inventoryList.test.js
@@ -1,14 +1,14 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 import { InventoryList } from '../inventoryList';
-import { rhsmApiTypes } from '../../../types';
+import { RHSM_API_QUERY_TYPES } from '../../../types/rhsmApiTypes';
 
 describe('InventoryList Component', () => {
   it('should render a non-connected component', () => {
     const props = {
       query: {
-        [rhsmApiTypes.RHSM_API_QUERY_LIMIT]: 10,
-        [rhsmApiTypes.RHSM_API_QUERY_OFFSET]: 0
+        [RHSM_API_QUERY_TYPES.LIMIT]: 10,
+        [RHSM_API_QUERY_TYPES.OFFSET]: 0
       },
       productId: 'lorem'
     };
@@ -20,8 +20,8 @@ describe('InventoryList Component', () => {
   it('should handle variations in data', () => {
     const props = {
       query: {
-        [rhsmApiTypes.RHSM_API_QUERY_LIMIT]: 10,
-        [rhsmApiTypes.RHSM_API_QUERY_OFFSET]: 0
+        [RHSM_API_QUERY_TYPES.LIMIT]: 10,
+        [RHSM_API_QUERY_TYPES.OFFSET]: 0
       },
       productId: 'lorem',
       listData: [

diff --git a/src/components/inventoryList/inventoryList.js b/src/components/inventoryList/inventoryList.js
@@ -9,7 +9,7 @@ import Table from '../table/table';
 import { Loader } from '../loader/loader';
 import { inventoryListHelpers } from './inventoryListHelpers';
 import Pagination from '../pagination/pagination';
-import { rhsmApiTypes } from '../../types';
+import { RHSM_API_QUERY_TYPES } from '../../types/rhsmApiTypes';
 
 class InventoryList extends React.Component {
   componentDidMount() {
@@ -79,7 +79,7 @@ class InventoryList extends React.Component {
       return null;
     }
 
-    const updatedPerPage = query?.[rhsmApiTypes.RHSM_API_QUERY_LIMIT] || perPageDefault;
+    const updatedPerPage = query?.[RHSM_API_QUERY_TYPES.LIMIT] || perPageDefault;
     const loaderPerPage = updatedPerPage / 2;
 
     return (

diff --git a/src/components/openshiftView/openshiftView.js b/src/components/openshiftView/openshiftView.js
@@ -6,7 +6,7 @@ import {
 } from '@patternfly/react-tokens';
 import { Badge, Button } from '@patternfly/react-core';
 import { PageLayout, PageHeader, PageSection, PageToolbar } from '../pageLayout/pageLayout';
-import { RHSM_API_QUERY_GRANULARITY_TYPES as GRANULARITY_TYPES, rhsmApiTypes } from '../../types/rhsmApiTypes';
+import { RHSM_API_QUERY_GRANULARITY_TYPES as GRANULARITY_TYPES, RHSM_API_QUERY_TYPES } from '../../types/rhsmApiTypes';
 import { connect, reduxSelectors } from '../../redux';
 import GraphCard from '../graphCard/graphCard';
 import C3GraphCard from '../c3GraphCard/c3GraphCard';
@@ -148,7 +148,7 @@ class OpenshiftView extends React.Component {
  */
 OpenshiftView.propTypes = {
   query: PropTypes.shape({
-    [rhsmApiTypes.RHSM_API_QUERY_GRANULARITY]: PropTypes.oneOf([...Object.values(GRANULARITY_TYPES)])
+    [RHSM_API_QUERY_TYPES.GRANULARITY]: PropTypes.oneOf([...Object.values(GRANULARITY_TYPES)])
   }),
   initialOption: PropTypes.oneOf(['cores', 'sockets']),
   initialGraphFilters: PropTypes.array,
@@ -176,9 +176,9 @@ OpenshiftView.propTypes = {
  */
 OpenshiftView.defaultProps = {
   query: {
-    [rhsmApiTypes.RHSM_API_QUERY_GRANULARITY]: GRANULARITY_TYPES.DAILY,
-    [rhsmApiTypes.RHSM_API_QUERY_LIMIT]: 10,
-    [rhsmApiTypes.RHSM_API_QUERY_OFFSET]: 0
+    [RHSM_API_QUERY_TYPES.GRANULARITY]: GRANULARITY_TYPES.DAILY,
+    [RHSM_API_QUERY_TYPES.LIMIT]: 10,
+    [RHSM_API_QUERY_TYPES.OFFSET]: 0
   },
   initialOption: 'cores',
   initialGraphFilters: [
@@ -248,7 +248,7 @@ OpenshiftView.defaultProps = {
   ],
   initialToolbarFilters: [
     {
-      id: rhsmApiTypes.RHSM_API_QUERY_SLA
+      id: RHSM_API_QUERY_TYPES.SLA
     }
   ],
   t: translate,