fix(graphCardHelpers): sw-235 generateChartId threshold (#1001)

* locale, graph legend, minor regression RHEL, OpenShift * graphCardChartLegend, string context * graphCardHelpers, generateChartId add threshold * rhsmActions, update generateChartId
RedHatInsights · Dec 5, 2022 · 9408c07 · 9408c07
1 parent dcb3dfc
commit 9408c07
Show file tree

Hide file tree

Showing 10 changed files with 41 additions and 25 deletions.
diff --git 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</0>",
+    "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
@@ -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"
   >
     <Button
@@ -91,13 +91,13 @@ exports[`GraphCardChartLegend Component should handle variations in data when re
         />
       }
       isDisabled={false}
-      key="curiosity-button-dolorSit_mock-product-id"
+      key="curiosity-button-threshold_dolorSit_mock-product-id"
       onClick={[Function]}
       onKeyPress={[Function]}
       tabIndex={0}
       variant="link"
     >
-      t([curiosity-graph.label,curiosity-graph.label_no], {"product":"mock-product-label","context":"threshold"})
+      t([curiosity-graph.label_threshold_dolorSit,curiosity-graph.label_no], {"product":"mock-product-label","context":"mock-product-id"})
     </Button>
   </Tooltip>
 </Fragment>
@@ -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"
   >
     <Button
@@ -244,13 +244,13 @@ exports[`GraphCardChartLegend Component should render basic data: data 1`] = `
         />
       }
       isDisabled={false}
-      key="curiosity-button-dolorSit_mock-product-id"
+      key="curiosity-button-threshold_dolorSit_mock-product-id"
       onClick={[Function]}
       onKeyPress={[Function]}
       tabIndex={0}
       variant="link"
     >
-      t([curiosity-graph.label,curiosity-graph.label_no], {"product":"mock-product-label","context":"threshold"})
+      t([curiosity-graph.label_threshold_dolorSit,curiosity-graph.label_no], {"product":"mock-product-label","context":"mock-product-id"})
     </Button>
   </Tooltip>
   <Tooltip
@@ -261,7 +261,7 @@ exports[`GraphCardChartLegend Component should render basic data: data 1`] = `
     }
     distance={5}
     enableFlip={true}
-    key="curiosity-tooltip-nonCursus_mock-product-id"
+    key="curiosity-tooltip-threshold_nonCursus_mock-product-id"
     position="top"
   >
     <Button
@@ -281,13 +281,13 @@ exports[`GraphCardChartLegend Component should render basic data: data 1`] = `
         />
       }
       isDisabled={false}
-      key="curiosity-button-nonCursus_mock-product-id"
+      key="curiosity-button-threshold_nonCursus_mock-product-id"
       onClick={[Function]}
       onKeyPress={[Function]}
       tabIndex={0}
       variant="link"
     >
-      t([curiosity-graph.label,curiosity-graph.label_no], {"product":"mock-product-label","context":"threshold"})
+      t([curiosity-graph.label_threshold_nonCursus,curiosity-graph.label_no], {"product":"mock-product-label","context":"mock-product-id"})
     </Button>
   </Tooltip>
 </Fragment>

diff --git 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
@@ -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
@@ -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
@@ -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
           },
           [<span style={{ whiteSpace: 'nowrap' }} />]
         );
@@ -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
@@ -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
@@ -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] }, [<span style={{ whiteSpace: 'nowrap' }} />] )",
+        "match": "t( \`curiosity-graph.legendTooltip\`, { product: productLabel, context: id }, [<span style={{ whiteSpace: 'nowrap' }} />] )",
       },
     ],
   },

diff --git 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
@@ -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,