From 9408c07c2bb6c3b6e208c33d06c2e83e9d0ce077 Mon Sep 17 00:00:00 2001 From: CD Cabrera Date: Thu, 17 Nov 2022 15:23:47 -0500 Subject: [PATCH] fix(graphCardHelpers): sw-235 generateChartId threshold (#1001) * locale, graph legend, minor regression RHEL, OpenShift * graphCardChartLegend, string context * graphCardHelpers, generateChartId add threshold * rhsmActions, update generateChartId --- public/locales/en-US.json | 6 ++++++ .../graphCardChartLegend.test.js.snap | 18 +++++++++--------- .../graphCardHelpers.test.js.snap | 2 ++ .../__tests__/graphCardChartLegend.test.js | 8 ++++---- .../__tests__/graphCardHelpers.test.js | 4 ++++ .../graphCard/graphCardChartLegend.js | 9 +++++---- src/components/graphCard/graphCardHelpers.js | 9 ++++++--- .../__tests__/__snapshots__/i18n.test.js.snap | 4 ++-- .../actions/__tests__/rhsmActions.test.js | 4 ++-- src/redux/actions/rhsmActions.js | 2 +- 10 files changed, 41 insertions(+), 25 deletions(-) diff --git a/public/locales/en-US.json b/public/locales/en-US.json index 7be691aeb..111f2a532 100644 --- a/public/locales/en-US.json +++ b/public/locales/en-US.json @@ -91,6 +91,8 @@ "label_Storage-gibibyte-months": "Data storage", "label_threshold": "Subscription threshold", "label_threshold_infinite": "<0>unlimited", + "label_thresholdCores": "Subscription threshold", + "label_thresholdSockets": "Subscription threshold", "label_Transfer-gibibytes": "Data transfer", "legendTooltip": "{{product}} metric usage", "legendTooltip_cores": "{{product}} CPU usage, per CPU core.", @@ -113,6 +115,10 @@ "legendTooltip_sockets": "{{product}} CPU usage, per CPU socket pair.", "legendTooltip_Storage-gibibytes": "Data storage usage", "legendTooltip_Storage-gibibyte-months": "Data storage usage", + "legendTooltip_thresholdSockets": "Maximum capacity, based on total {{product}} subscriptions in this account.", + "legendTooltip_thresholdSockets_RHEL": "Maximum capacity, as CPU sockets, based on total {{product}} subscriptions in this account.", + "legendTooltip_thresholdCores_OpenShift Container Platform": "Maximum capacity, as CPU cores, based on total {{product}} Annual subscriptions in this account.", + "legendTooltip_thresholdSockets_OpenShift Container Platform": "Maximum capacity, as CPU sockets, based on total {{product}} Annual subscriptions in this account.", "legendTooltip_threshold_thresholdSockets": "Maximum capacity, based on total {{product}} subscriptions in this account.", "legendTooltip_threshold_thresholdSockets_RHEL": "Maximum capacity, as CPU sockets, based on total {{product}} subscriptions in this account.", "legendTooltip_threshold_thresholdCores_OpenShift Container Platform": "Maximum capacity, as CPU cores, based on total {{product}} Annual subscriptions in this account.", diff --git a/src/components/graphCard/__tests__/__snapshots__/graphCardChartLegend.test.js.snap b/src/components/graphCard/__tests__/__snapshots__/graphCardChartLegend.test.js.snap index 5e972318d..765c00774 100644 --- a/src/components/graphCard/__tests__/__snapshots__/graphCardChartLegend.test.js.snap +++ b/src/components/graphCard/__tests__/__snapshots__/graphCardChartLegend.test.js.snap @@ -71,7 +71,7 @@ exports[`GraphCardChartLegend Component should handle variations in data when re } distance={5} enableFlip={true} - key="curiosity-tooltip-dolorSit_mock-product-id" + key="curiosity-tooltip-threshold_dolorSit_mock-product-id" position="top" > @@ -224,7 +224,7 @@ exports[`GraphCardChartLegend Component should render basic data: data 1`] = ` } distance={5} enableFlip={true} - key="curiosity-tooltip-dolorSit_mock-product-id" + key="curiosity-tooltip-threshold_dolorSit_mock-product-id" position="top" > diff --git a/src/components/graphCard/__tests__/__snapshots__/graphCardHelpers.test.js.snap b/src/components/graphCard/__tests__/__snapshots__/graphCardHelpers.test.js.snap index a10e0bcfd..f08ea9530 100644 --- a/src/components/graphCard/__tests__/__snapshots__/graphCardHelpers.test.js.snap +++ b/src/components/graphCard/__tests__/__snapshots__/graphCardHelpers.test.js.snap @@ -4,6 +4,8 @@ exports[`GraphCardHelpers generateChartIds should return consistent IDs: base id exports[`GraphCardHelpers generateChartIds should return consistent IDs: category id 1`] = `"lorem_dolor-sir_ipsum"`; +exports[`GraphCardHelpers generateChartIds should return consistent IDs: threshold, capacity id 1`] = `"threshold_lorem_ipsum"`; + exports[`GraphCardHelpers generateChartSettings should return base graph settings: basic filters 1`] = ` { "groupedFiltersSettings": { diff --git a/src/components/graphCard/__tests__/graphCardChartLegend.test.js b/src/components/graphCard/__tests__/graphCardChartLegend.test.js index 02439b189..34a342f06 100644 --- a/src/components/graphCard/__tests__/graphCardChartLegend.test.js +++ b/src/components/graphCard/__tests__/graphCardChartLegend.test.js @@ -42,14 +42,14 @@ describe('GraphCardChartLegend Component', () => { }, { stroke: '#ff0000', - id: 'dolorSit_mock-product-id', + id: 'threshold_dolorSit_mock-product-id', metric: 'dolorSit', isThreshold: true, data: [{ y: 0, isInfinite: false }] }, { stroke: '#ff0000', - id: 'nonCursus_mock-product-id', + id: 'threshold_nonCursus_mock-product-id', metric: 'nonCursus', isThreshold: true, data: [{ y: 0, isInfinite: true }] @@ -79,7 +79,7 @@ describe('GraphCardChartLegend Component', () => { }, { stroke: '#ff0000', - id: 'dolorSit_mock-product-id', + id: 'threshold_dolorSit_mock-product-id', metric: 'dolorSit', isThreshold: true, data: [{ y: 0, isInfinite: false }] @@ -115,7 +115,7 @@ describe('GraphCardChartLegend Component', () => { }, { stroke: '#ff0000', - id: 'dolorSit_mock-product-id', + id: 'threshold_dolorSit_mock-product-id', metric: 'dolorSit', isThreshold: true, data: [{ y: 0, isInfinite: false }] diff --git a/src/components/graphCard/__tests__/graphCardHelpers.test.js b/src/components/graphCard/__tests__/graphCardHelpers.test.js index 1150406ce..c6808116b 100644 --- a/src/components/graphCard/__tests__/graphCardHelpers.test.js +++ b/src/components/graphCard/__tests__/graphCardHelpers.test.js @@ -123,6 +123,10 @@ describe('GraphCardHelpers', () => { it('generateChartIds should return consistent IDs', () => { expect(generateChartIds({ metric: 'lorem', productId: 'ipsum' })).toMatchSnapshot('base id'); + expect(generateChartIds({ isCapacity: true, metric: 'lorem', productId: 'ipsum' })).toMatchSnapshot( + 'threshold, capacity id' + ); + expect( generateChartIds({ metric: 'lorem', diff --git a/src/components/graphCard/graphCardChartLegend.js b/src/components/graphCard/graphCardChartLegend.js index 83b0628a9..00a14e327 100644 --- a/src/components/graphCard/graphCardChartLegend.js +++ b/src/components/graphCard/graphCardChartLegend.js @@ -73,14 +73,14 @@ const GraphCardChartLegend = ({ const labelContent = t([`curiosity-graph.label`, 'curiosity-graph.label_no'], { product: productLabel, - context: (isThreshold && 'threshold') || id + context: id }); const tooltipContent = t( `curiosity-graph.legendTooltip`, { product: productLabel, - context: [isThreshold && 'threshold', id] + context: id }, [] ); @@ -145,9 +145,10 @@ GraphCardChartLegend.propTypes = { datum: PropTypes.shape({ dataSets: PropTypes.arrayOf( PropTypes.shape({ - stroke: PropTypes.string.isRequired, + data: PropTypes.array, id: PropTypes.string.isRequired, - isThreshold: PropTypes.bool + isThreshold: PropTypes.bool, + stroke: PropTypes.string.isRequired }) ) }), diff --git a/src/components/graphCard/graphCardHelpers.js b/src/components/graphCard/graphCardHelpers.js index 9eb663b23..2fa410cb2 100644 --- a/src/components/graphCard/graphCardHelpers.js +++ b/src/components/graphCard/graphCardHelpers.js @@ -11,14 +11,17 @@ import { dateHelpers, helpers } from '../../common'; * Generate a consistent chart identifier from API. * * @param {object} params + * @param {boolean} params.isCapacity * @param {string} params.metric * @param {string} params.productId * @param {object} params.query * @returns {string} */ -const generateChartIds = ({ metric, productId, query = {} } = {}) => { +const generateChartIds = ({ isCapacity, metric, productId, query = {} } = {}) => { const metricCategory = query?.[RHSM_API_QUERY_SET_TYPES.CATEGORY] || undefined; - return `${metric}${(metricCategory && `_${metricCategory}`) || ''}${(productId && `_${productId}`) || ''}`; + return `${(isCapacity && 'threshold_') || ''}${metric}${(metricCategory && `_${metricCategory}`) || ''}${ + (productId && `_${productId}`) || '' + }`; }; /** @@ -41,7 +44,7 @@ const generateChartSettings = ({ filters = [], settings: graphCardSettings = {}, const isThreshold = filterSettings?.chartType === ChartTypeVariant.threshold; const baseFilterSettings = { - id: generateChartIds({ metric, productId, query: filterSettings?.query }), + id: generateChartIds({ isCapacity: isThreshold, metric, productId, query: filterSettings?.query }), isStacked: !isThreshold, isStandalone, isThreshold, diff --git a/src/components/i18n/__tests__/__snapshots__/i18n.test.js.snap b/src/components/i18n/__tests__/__snapshots__/i18n.test.js.snap index e4d69c0bf..8b89b2e32 100644 --- a/src/components/i18n/__tests__/__snapshots__/i18n.test.js.snap +++ b/src/components/i18n/__tests__/__snapshots__/i18n.test.js.snap @@ -64,11 +64,11 @@ exports[`I18n Component should generate a predictable locale key output snapshot "keys": [ { "key": "curiosity-graph.label", - "match": "t([\`curiosity-graph.label\`, 'curiosity-graph.label_no'], { product: productLabel, context: (isThreshold && 'threshold')", + "match": "t([\`curiosity-graph.label\`, 'curiosity-graph.label_no'], { product: productLabel, context: id })", }, { "key": "curiosity-graph.legendTooltip", - "match": "t( \`curiosity-graph.legendTooltip\`, { product: productLabel, context: [isThreshold && 'threshold', id] }, [] )", + "match": "t( \`curiosity-graph.legendTooltip\`, { product: productLabel, context: id }, [] )", }, ], }, diff --git a/src/redux/actions/__tests__/rhsmActions.test.js b/src/redux/actions/__tests__/rhsmActions.test.js index 11b3bd46a..8fa4940e3 100644 --- a/src/redux/actions/__tests__/rhsmActions.test.js +++ b/src/redux/actions/__tests__/rhsmActions.test.js @@ -63,8 +63,8 @@ describe('RhsmActions', () => { expect(response.tally.sit_dolor.fulfilled).toBe(true); expect(Object.entries(response.tally).length).toBe(2); - expect(response.capacity.ipsum_lorem.fulfilled).toBe(true); - expect(response.capacity.sit_dolor.fulfilled).toBe(true); + expect(response.capacity.threshold_ipsum_lorem.fulfilled).toBe(true); + expect(response.capacity.threshold_sit_dolor.fulfilled).toBe(true); expect(Object.entries(response.capacity).length).toBe(2); done(); }); diff --git a/src/redux/actions/rhsmActions.js b/src/redux/actions/rhsmActions.js index d6066a9af..b2f27be12 100644 --- a/src/redux/actions/rhsmActions.js +++ b/src/redux/actions/rhsmActions.js @@ -84,7 +84,7 @@ const getGraphMetrics = const methodService = isCapacity ? rhsmServices.getGraphCapacity : rhsmServices.getGraphTally; const methodType = isCapacity ? rhsmTypes.GET_GRAPH_CAPACITY_RHSM : rhsmTypes.GET_GRAPH_TALLY_RHSM; const methodCancelId = isCapacity ? 'graphCapacity' : cancelId; - const generatedId = generateChartIds({ metric, productId: id, query: metricQuery }); + const generatedId = generateChartIds({ isCapacity, metric, productId: id, query: metricQuery }); multiDispatch.push({ type: methodType,