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

* i18n, umo strings * openshiftView, apply umo filter * redux, queryTypes, viewReducer, sort statements, umo filter * rhsmApiTypes, umo types
RedHatInsights · Sep 4, 2020 · ee44e64 · ee44e64
1 parent bd8ccc0
commit ee44e64
Show file tree

Hide file tree

Showing 11 changed files with 187 additions and 48 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",
+    "umo_cores": "Cores",
+    "umo_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.umo",
+        "match": "t('curiosity-toolbar.umo', { context: RHSM_API_QUERY_UMO_TYPES.CORES })",
+      },
+      Object {
+        "key": "curiosity-toolbar.umo",
+        "match": "t('curiosity-toolbar.umo', { context: RHSM_API_QUERY_UMO_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.umo",
+  },
+  Object {
+    "file": "./src/components/openshiftView/openshiftView.js",
+    "key": "curiosity-toolbar.umo",
+  },
   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
@@ -66,11 +66,11 @@ exports[`OpenshiftView Component should display an alternate graph on query-stri
         options={
           Array [
             Object {
-              "title": "Cores",
+              "title": "t(curiosity-toolbar.umo, [object Object])",
               "value": "cores",
             },
             Object {
-              "title": "Sockets",
+              "title": "t(curiosity-toolbar.umo, [object Object])",
               "value": "sockets",
             },
           ]
@@ -198,11 +198,11 @@ exports[`OpenshiftView Component should have a fallback title: title 1`] = `
         options={
           Array [
             Object {
-              "title": "Cores",
+              "title": "t(curiosity-toolbar.umo, [object Object])",
               "value": "cores",
             },
             Object {
-              "title": "Sockets",
+              "title": "t(curiosity-toolbar.umo, [object Object])",
               "value": "sockets",
             },
           ]
@@ -511,11 +511,11 @@ exports[`OpenshiftView Component should render a non-connected component: non-co
         options={
           Array [
             Object {
-              "title": "Cores",
+              "title": "t(curiosity-toolbar.umo, [object Object])",
               "value": "cores",
             },
             Object {
-              "title": "Sockets",
+              "title": "t(curiosity-toolbar.umo, [object Object])",
               "value": "sockets",
             },
           ]

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_UMO_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.UMO],
+            viewId,
+            [RHSM_API_QUERY_TYPES.UMO]: 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.umo', { context: RHSM_API_QUERY_UMO_TYPES.CORES }),
+        value: RHSM_API_QUERY_UMO_TYPES.CORES
+      },
+      {
+        title: t('curiosity-toolbar.umo', { context: RHSM_API_QUERY_UMO_TYPES.SOCKETS }),
+        value: RHSM_API_QUERY_UMO_TYPES.SOCKETS
+      }
     ];
 
     return <Select onSelect={this.onSelect} options={options} selectedOptions={option || initialOption} />;
@@ -184,7 +203,7 @@ OpenshiftView.defaultProps = {
     [RHSM_API_QUERY_TYPES.LIMIT]: 10,
     [RHSM_API_QUERY_TYPES.OFFSET]: 0
   },
-  initialOption: 'cores',
+  initialOption: RHSM_API_QUERY_UMO_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_umo 1`] = `
+Object {
+  "result": Object {
+    "query": Object {
+      "test_id": Object {
+        "umo": "lorem umo",
+      },
+    },
+  },
+  "type": "SET_QUERY_RHSM_umo",
+}
+`;
+
 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.UMO]: 'lorem umo',
+        [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.UMO]:
       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.UMO]: action[RHSM_API_QUERY_TYPES.UMO]
+          }
+        },
+        {
+          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",
+        "umo": "SET_QUERY_RHSM_umo",
         "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",
+      "umo": "SET_QUERY_RHSM_umo",
       "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",
+        "umo": "SET_QUERY_RHSM_umo",
         "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",
+      "umo": "SET_QUERY_RHSM_umo",
       "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.UMO]: `SET_QUERY_RHSM_${RHSM_API_QUERY_TYPES.UMO}`,
+  [RHSM_API_QUERY_TYPES.USAGE]: `SET_QUERY_RHSM_${RHSM_API_QUERY_TYPES.USAGE}`
 };
 
 /**