fix(openshiftView): issues/383 apply uom query filter (#408)

* i18n, uom strings * openshiftView, filter, default props avoid 2x XHR on load * redux, queryTypes, viewReducer, sort statements, uom filter * rhsmApiTypes, uom types
RedHatInsights · Sep 29, 2020 · f5f5657 · f5f5657
1 parent dd0dbf2
commit f5f5657
Show file tree

Hide file tree

Showing 11 changed files with 197 additions and 50 deletions.
diff --git a/public/locales/en-US.json b/public/locales/en-US.json
@@ -69,6 +69,8 @@
     "slaPremium": "Premium",
     "slaSelfSupport": "Self-Support",
     "slaStandard": "Standard",
+    "uom_cores": "Cores",
+    "uom_sockets": "Sockets",
     "usageDevelopment": "Development/Test",
     "usageDisaster": "Disaster Recovery",
     "usageProduction": "Production",

diff --git a/src/components/i18n/__tests__/__snapshots__/i18n.test.js.snap b/src/components/i18n/__tests__/__snapshots__/i18n.test.js.snap
@@ -189,6 +189,14 @@ Array [
   Object {
     "file": "./src/components/openshiftView/openshiftView.js",
     "keys": Array [
+      Object {
+        "key": "curiosity-toolbar.uom",
+        "match": "t('curiosity-toolbar.uom', { context: RHSM_API_QUERY_UOM_TYPES.CORES })",
+      },
+      Object {
+        "key": "curiosity-toolbar.uom",
+        "match": "t('curiosity-toolbar.uom', { context: RHSM_API_QUERY_UOM_TYPES.SOCKETS })",
+      },
       Object {
         "key": "curiosity-view.title",
         "match": "t(\`curiosity-view.title\`, { appName: helpers.UI_DISPLAY_NAME, context: viewId })",
@@ -444,6 +452,14 @@ Array [
 
 exports[`I18n Component should have locale keys that exist in the default language JSON: missing locale keys 1`] = `
 Array [
+  Object {
+    "file": "./src/components/openshiftView/openshiftView.js",
+    "key": "curiosity-toolbar.uom",
+  },
+  Object {
+    "file": "./src/components/openshiftView/openshiftView.js",
+    "key": "curiosity-toolbar.uom",
+  },
   Object {
     "file": "./src/components/openshiftView/openshiftView.js",
     "key": "curiosity-inventory.hardwareType",

diff --git a/src/components/openshiftView/__tests__/__snapshots__/openshiftView.test.js.snap b/src/components/openshiftView/__tests__/__snapshots__/openshiftView.test.js.snap
@@ -22,6 +22,7 @@ exports[`OpenshiftView Component should display an alternate graph on query-stri
           "granularity": "daily",
           "limit": 10,
           "offset": 0,
+          "uom": "cores",
         }
       }
       viewId="OpenShift"
@@ -66,11 +67,11 @@ exports[`OpenshiftView Component should display an alternate graph on query-stri
         options={
           Array [
             Object {
-              "title": "Cores",
+              "title": "t(curiosity-toolbar.uom, [object Object])",
               "value": "cores",
             },
             Object {
-              "title": "Sockets",
+              "title": "t(curiosity-toolbar.uom, [object Object])",
               "value": "sockets",
             },
           ]
@@ -124,6 +125,7 @@ exports[`OpenshiftView Component should display an alternate graph on query-stri
         Object {
           "limit": 10,
           "offset": 0,
+          "uom": "cores",
         }
       }
       viewId="OpenShift"
@@ -154,6 +156,7 @@ exports[`OpenshiftView Component should have a fallback title: title 1`] = `
           "granularity": "daily",
           "limit": 10,
           "offset": 0,
+          "uom": "cores",
         }
       }
       viewId="OpenShift"
@@ -198,11 +201,11 @@ exports[`OpenshiftView Component should have a fallback title: title 1`] = `
         options={
           Array [
             Object {
-              "title": "Cores",
+              "title": "t(curiosity-toolbar.uom, [object Object])",
               "value": "cores",
             },
             Object {
-              "title": "Sockets",
+              "title": "t(curiosity-toolbar.uom, [object Object])",
               "value": "sockets",
             },
           ]
@@ -256,6 +259,7 @@ exports[`OpenshiftView Component should have a fallback title: title 1`] = `
         Object {
           "limit": 10,
           "offset": 0,
+          "uom": "cores",
         }
       }
       viewId="OpenShift"
@@ -441,6 +445,7 @@ Object {
     "granularity": "daily",
     "limit": 10,
     "offset": 0,
+    "uom": "cores",
   },
 }
 `;
@@ -467,6 +472,7 @@ exports[`OpenshiftView Component should render a non-connected component: non-co
           "granularity": "daily",
           "limit": 10,
           "offset": 0,
+          "uom": "cores",
         }
       }
       viewId="OpenShift"
@@ -511,11 +517,11 @@ exports[`OpenshiftView Component should render a non-connected component: non-co
         options={
           Array [
             Object {
-              "title": "Cores",
+              "title": "t(curiosity-toolbar.uom, [object Object])",
               "value": "cores",
             },
             Object {
-              "title": "Sockets",
+              "title": "t(curiosity-toolbar.uom, [object Object])",
               "value": "sockets",
             },
           ]
@@ -569,6 +575,7 @@ exports[`OpenshiftView Component should render a non-connected component: non-co
         Object {
           "limit": 10,
           "offset": 0,
+          "uom": "cores",
         }
       }
       viewId="OpenShift"

diff --git a/src/components/openshiftView/openshiftView.js b/src/components/openshiftView/openshiftView.js
@@ -6,8 +6,12 @@ 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, RHSM_API_QUERY_TYPES } from '../../types/rhsmApiTypes';
-import { apiQueries, connect, reduxSelectors } from '../../redux';
+import {
+  RHSM_API_QUERY_GRANULARITY_TYPES as GRANULARITY_TYPES,
+  RHSM_API_QUERY_TYPES,
+  RHSM_API_QUERY_UOM_TYPES
+} from '../../types/rhsmApiTypes';
+import { apiQueries, connect, reduxSelectors, reduxTypes, store } from '../../redux';
 import GraphCard from '../graphCard/graphCard';
 import C3GraphCard from '../c3GraphCard/c3GraphCard';
 import { Select } from '../form/select';
@@ -42,7 +46,7 @@ class OpenshiftView extends React.Component {
    */
   onSelect = (event = {}) => {
     const { option } = this.state;
-    const { initialGraphFilters, initialInventoryFilters } = this.props;
+    const { initialGraphFilters, initialInventoryFilters, viewId } = this.props;
     const { value } = event;
 
     if (value !== option) {
@@ -56,11 +60,20 @@ class OpenshiftView extends React.Component {
       const graphFilters = initialGraphFilters.filter(filter);
       const inventoryFilters = initialInventoryFilters.filter(filter);
 
-      this.setState({
-        option,
-        graphFilters,
-        inventoryFilters
-      });
+      this.setState(
+        {
+          option,
+          graphFilters,
+          inventoryFilters
+        },
+        () => {
+          store.dispatch({
+            type: reduxTypes.query.SET_QUERY_RHSM_TYPES[RHSM_API_QUERY_TYPES.UOM],
+            viewId,
+            [RHSM_API_QUERY_TYPES.UOM]: value
+          });
+        }
+      );
     }
   };
 
@@ -71,10 +84,16 @@ class OpenshiftView extends React.Component {
    */
   renderSelect() {
     const { option } = this.state;
-    const { initialOption } = this.props;
+    const { initialOption, t } = this.props;
     const options = [
-      { title: 'Cores', value: 'cores' },
-      { title: 'Sockets', value: 'sockets' }
+      {
+        title: t('curiosity-toolbar.uom', { context: RHSM_API_QUERY_UOM_TYPES.CORES }),
+        value: RHSM_API_QUERY_UOM_TYPES.CORES
+      },
+      {
+        title: t('curiosity-toolbar.uom', { context: RHSM_API_QUERY_UOM_TYPES.SOCKETS }),
+        value: RHSM_API_QUERY_UOM_TYPES.SOCKETS
+      }
     ];
 
     return <Select onSelect={this.onSelect} options={options} selectedOptions={option || initialOption} />;
@@ -153,7 +172,7 @@ OpenshiftView.propTypes = {
   query: PropTypes.shape({
     [RHSM_API_QUERY_TYPES.GRANULARITY]: PropTypes.oneOf([...Object.values(GRANULARITY_TYPES)])
   }),
-  initialOption: PropTypes.oneOf(['cores', 'sockets']),
+  initialOption: PropTypes.oneOf(Object.values(RHSM_API_QUERY_UOM_TYPES)),
   initialGraphFilters: PropTypes.array,
   initialGuestsFilters: PropTypes.array,
   initialInventoryFilters: PropTypes.array,
@@ -182,9 +201,10 @@ OpenshiftView.defaultProps = {
   query: {
     [RHSM_API_QUERY_TYPES.GRANULARITY]: GRANULARITY_TYPES.DAILY,
     [RHSM_API_QUERY_TYPES.LIMIT]: 10,
-    [RHSM_API_QUERY_TYPES.OFFSET]: 0
+    [RHSM_API_QUERY_TYPES.OFFSET]: 0,
+    [RHSM_API_QUERY_TYPES.UOM]: RHSM_API_QUERY_UOM_TYPES.CORES
   },
-  initialOption: 'cores',
+  initialOption: RHSM_API_QUERY_UOM_TYPES.CORES,
   initialGraphFilters: [
     {
       id: 'cores',

diff --git a/src/redux/reducers/__tests__/__snapshots__/viewReducer.test.js.snap b/src/redux/reducers/__tests__/__snapshots__/viewReducer.test.js.snap
@@ -63,6 +63,19 @@ Object {
 }
 `;
 
+exports[`ViewReducer should handle specific defined types: defined type SET_QUERY_RHSM_uom 1`] = `
+Object {
+  "result": Object {
+    "query": Object {
+      "test_id": Object {
+        "uom": "lorem uom",
+      },
+    },
+  },
+  "type": "SET_QUERY_RHSM_uom",
+}
+`;
+
 exports[`ViewReducer should handle specific defined types: defined type SET_QUERY_RHSM_usage 1`] = `
 Object {
   "result": Object {

diff --git a/src/redux/reducers/__tests__/viewReducer.test.js b/src/redux/reducers/__tests__/viewReducer.test.js
@@ -14,10 +14,11 @@ describe('ViewReducer', () => {
       const dispatched = {
         type: value,
         [RHSM_API_QUERY_TYPES.GRANULARITY]: 'lorem granularity',
-        [RHSM_API_QUERY_TYPES.SLA]: 'lorem sla',
-        [RHSM_API_QUERY_TYPES.USAGE]: 'ipsum usage',
         [RHSM_API_QUERY_TYPES.LIMIT]: 10,
         [RHSM_API_QUERY_TYPES.OFFSET]: 10,
+        [RHSM_API_QUERY_TYPES.SLA]: 'lorem sla',
+        [RHSM_API_QUERY_TYPES.UOM]: 'lorem uom',
+        [RHSM_API_QUERY_TYPES.USAGE]: 'ipsum usage',
         viewId: 'test_id'
       };
 

diff --git a/src/redux/reducers/viewReducer.js b/src/redux/reducers/viewReducer.js
@@ -49,55 +49,69 @@ const viewReducer = (state = initialState, action) => {
           reset: false
         }
       );
-    case reduxTypes.query.SET_QUERY_RHSM_TYPES[RHSM_API_QUERY_TYPES.SLA]:
+    case reduxTypes.query.SET_QUERY_RHSM_TYPES[RHSM_API_QUERY_TYPES.LIMIT]:
       return reduxHelpers.setStateProp(
         'query',
         {
           [action.viewId]: {
             ...state.query[action.viewId],
-            [RHSM_API_QUERY_TYPES.SLA]: action[RHSM_API_QUERY_TYPES.SLA]
+            [RHSM_API_QUERY_TYPES.LIMIT]: action[RHSM_API_QUERY_TYPES.LIMIT]
           }
         },
         {
           state,
           reset: false
         }
       );
-    case reduxTypes.query.SET_QUERY_RHSM_TYPES[RHSM_API_QUERY_TYPES.USAGE]:
+    case reduxTypes.query.SET_QUERY_RHSM_TYPES[RHSM_API_QUERY_TYPES.OFFSET]:
       return reduxHelpers.setStateProp(
         'query',
         {
           [action.viewId]: {
             ...state.query[action.viewId],
-            [RHSM_API_QUERY_TYPES.USAGE]: action[RHSM_API_QUERY_TYPES.USAGE]
+            [RHSM_API_QUERY_TYPES.OFFSET]: action[RHSM_API_QUERY_TYPES.OFFSET]
           }
         },
         {
           state,
           reset: false
         }
       );
-    case reduxTypes.query.SET_QUERY_RHSM_TYPES[RHSM_API_QUERY_TYPES.LIMIT]:
+    case reduxTypes.query.SET_QUERY_RHSM_TYPES[RHSM_API_QUERY_TYPES.SLA]:
       return reduxHelpers.setStateProp(
         'query',
         {
           [action.viewId]: {
             ...state.query[action.viewId],
-            [RHSM_API_QUERY_TYPES.LIMIT]: action[RHSM_API_QUERY_TYPES.LIMIT]
+            [RHSM_API_QUERY_TYPES.SLA]: action[RHSM_API_QUERY_TYPES.SLA]
           }
         },
         {
           state,
           reset: false
         }
       );
-    case reduxTypes.query.SET_QUERY_RHSM_TYPES[RHSM_API_QUERY_TYPES.OFFSET]:
+    case reduxTypes.query.SET_QUERY_RHSM_TYPES[RHSM_API_QUERY_TYPES.UOM]:
       return reduxHelpers.setStateProp(
         'query',
         {
           [action.viewId]: {
             ...state.query[action.viewId],
-            [RHSM_API_QUERY_TYPES.OFFSET]: action[RHSM_API_QUERY_TYPES.OFFSET]
+            [RHSM_API_QUERY_TYPES.UOM]: action[RHSM_API_QUERY_TYPES.UOM]
+          }
+        },
+        {
+          state,
+          reset: false
+        }
+      );
+    case reduxTypes.query.SET_QUERY_RHSM_TYPES[RHSM_API_QUERY_TYPES.USAGE]:
+      return reduxHelpers.setStateProp(
+        'query',
+        {
+          [action.viewId]: {
+            ...state.query[action.viewId],
+            [RHSM_API_QUERY_TYPES.USAGE]: action[RHSM_API_QUERY_TYPES.USAGE]
           }
         },
         {

diff --git a/src/redux/types/__tests__/__snapshots__/index.test.js.snap b/src/redux/types/__tests__/__snapshots__/index.test.js.snap
@@ -30,6 +30,7 @@ Object {
         "limit": "SET_QUERY_RHSM_limit",
         "offset": "SET_QUERY_RHSM_offset",
         "sla": "SET_QUERY_RHSM_sla",
+        "uom": "SET_QUERY_RHSM_uom",
         "usage": "SET_QUERY_RHSM_usage",
       },
     },
@@ -72,6 +73,7 @@ Object {
       "limit": "SET_QUERY_RHSM_limit",
       "offset": "SET_QUERY_RHSM_offset",
       "sla": "SET_QUERY_RHSM_sla",
+      "uom": "SET_QUERY_RHSM_uom",
       "usage": "SET_QUERY_RHSM_usage",
     },
   },
@@ -99,6 +101,7 @@ Object {
         "limit": "SET_QUERY_RHSM_limit",
         "offset": "SET_QUERY_RHSM_offset",
         "sla": "SET_QUERY_RHSM_sla",
+        "uom": "SET_QUERY_RHSM_uom",
         "usage": "SET_QUERY_RHSM_usage",
       },
     },
@@ -169,6 +172,7 @@ Object {
       "limit": "SET_QUERY_RHSM_limit",
       "offset": "SET_QUERY_RHSM_offset",
       "sla": "SET_QUERY_RHSM_sla",
+      "uom": "SET_QUERY_RHSM_uom",
       "usage": "SET_QUERY_RHSM_usage",
     },
   },

diff --git a/src/redux/types/queryTypes.js b/src/redux/types/queryTypes.js
@@ -4,10 +4,11 @@ const SET_QUERY_CLEAR = 'SET_QUERY_CLEAR';
 
 const SET_QUERY_RHSM_TYPES = {
   [RHSM_API_QUERY_TYPES.GRANULARITY]: `SET_QUERY_RHSM_${RHSM_API_QUERY_TYPES.GRANULARITY}`,
-  [RHSM_API_QUERY_TYPES.USAGE]: `SET_QUERY_RHSM_${RHSM_API_QUERY_TYPES.USAGE}`,
-  [RHSM_API_QUERY_TYPES.SLA]: `SET_QUERY_RHSM_${RHSM_API_QUERY_TYPES.SLA}`,
   [RHSM_API_QUERY_TYPES.LIMIT]: `SET_QUERY_RHSM_${RHSM_API_QUERY_TYPES.LIMIT}`,
-  [RHSM_API_QUERY_TYPES.OFFSET]: `SET_QUERY_RHSM_${RHSM_API_QUERY_TYPES.OFFSET}`
+  [RHSM_API_QUERY_TYPES.OFFSET]: `SET_QUERY_RHSM_${RHSM_API_QUERY_TYPES.OFFSET}`,
+  [RHSM_API_QUERY_TYPES.SLA]: `SET_QUERY_RHSM_${RHSM_API_QUERY_TYPES.SLA}`,
+  [RHSM_API_QUERY_TYPES.UOM]: `SET_QUERY_RHSM_${RHSM_API_QUERY_TYPES.UOM}`,
+  [RHSM_API_QUERY_TYPES.USAGE]: `SET_QUERY_RHSM_${RHSM_API_QUERY_TYPES.USAGE}`
 };
 
 /**