From f5f5657a99fe35708cb14370ed6e1b581c346a38 Mon Sep 17 00:00:00 2001 From: CD Cabrera Date: Thu, 3 Sep 2020 17:19:02 -0400 Subject: [PATCH] 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 --- public/locales/en-US.json | 2 + .../__tests__/__snapshots__/i18n.test.js.snap | 16 ++++ .../__snapshots__/openshiftView.test.js.snap | 19 +++-- src/components/openshiftView/openshiftView.js | 48 +++++++---- .../__snapshots__/viewReducer.test.js.snap | 13 +++ .../reducers/__tests__/viewReducer.test.js | 5 +- src/redux/reducers/viewReducer.js | 30 +++++-- .../__snapshots__/index.test.js.snap | 4 + src/redux/types/queryTypes.js | 7 +- .../__snapshots__/index.test.js.snap | 24 ++++++ src/types/rhsmApiTypes.js | 79 +++++++++++++++---- 11 files changed, 197 insertions(+), 50 deletions(-) diff --git a/public/locales/en-US.json b/public/locales/en-US.json index ec4c65995..aa0eac646 100644 --- 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 index 275dca431..a790d4367 100644 --- 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 index 066212268..0915049de 100644 --- 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 index 36cfe5069..22c35b353 100644 --- 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