refactor(graphCard): sw-235 metric capacity (#1000)

* locale, fallback context strings * graphCard, pass productId to helpers * graphCardChart, refactor towards api hook * graphCardChartLegend, string context * graphCardChartTitleTooltip, chartTooltip, string context * graphCardContext, api hook, state allSettledResponse hook * graphCardHelpers, pass productId, metric prop check * graphCardMetricTotals, passed metric, string context * product config, rhacs, rhods, rhosak id to metric * rhsmServices, mock update for visual check
RedHatInsights · Dec 5, 2022 · e32f062 · e32f062
1 parent fc0d361
commit e32f062
Show file tree

Hide file tree

Showing 33 changed files with 386 additions and 469 deletions.
diff --git a/public/locales/en-US.json b/public/locales/en-US.json
@@ -42,6 +42,7 @@
     "cardHeadingDescription_OpenShift Container Platform": "A pre-paid subscription model that offers a designated maximum quota of units within a set time frame.",
     "cardHeadingDescription_OpenShift-metrics": "A subscription model that offers purchasing options to match your usage patterns.",
     "cardHeadingDescription_OpenShift-dedicated-metrics": "A subscription model that offers purchasing options to match your usage patterns.",
+    "cardHeadingMetric": "Total",
     "cardHeadingMetric_dailyTotal": "Daily total",
     "cardHeadingMetric_dailyTotal_Cores": "Daily vCPU hours",
     "cardHeadingMetric_dailyTotal_Instance-hours": "Daily instance hours",
@@ -54,13 +55,15 @@
     "cardHeadingMetric_monthlyTotal_Storage-gibibytes": "Monthly data storage",
     "cardHeadingMetric_monthlyTotal_Storage-gibibyte-months": "Monthly data storage",
     "cardHeadingMetric_monthlyTotal_Transfer-gibibytes": "Monthly data transfer",
+    "cardBodyMetric": "{{context}}",
     "cardBodyMetric_total": "No data",
     "cardBodyMetric_total_Cores": "<0>{{total}}</0> vCPU hours",
     "cardBodyMetric_total_Instance-hours": "<0>{{total}}</0> Instance hours",
     "cardBodyMetric_total_Storage-gibibytes": "<0>{{total}}</0> Binary gigabyte hours",
     "cardBodyMetric_total_Storage-gibibyte-months": "<0>{{total}}</0> Binary gigabyte months",
     "cardBodyMetric_total_Transfer-gibibytes": "<0>{{total}}</0> Binary gigabytes",
     "cardFooterMetric": "Last update {{date}}",
+    "label": "{{context}}",
     "label_axisX_Daily": "Day of the month",
     "label_axisY_Cores": "vCPU hours",
     "label_axisY_Instance-hours": "Instance hours",
@@ -87,8 +90,9 @@
     "label_Storage-gibibytes": "Data storage",
     "label_Storage-gibibyte-months": "Data storage",
     "label_threshold": "Subscription threshold",
-    "label_threshold_infinite": "unlimited",
+    "label_threshold_infinite": "<0>unlimited</0>",
     "label_Transfer-gibibytes": "Data transfer",
+    "legendTooltip": "{{product}} metric usage",
     "legendTooltip_cores": "{{product}} CPU usage, per CPU core.",
     "legendTooltip_cores_OpenShift Container Platform": "{{product}} CPU usage, per CPU core.",
     "legendTooltip_cores_OpenShift-metrics": "{{product}} CPU usage, per CPU core.",

diff --git a/src/components/graphCard/__tests__/__snapshots__/graphCard.test.js.snap b/src/components/graphCard/__tests__/__snapshots__/graphCard.test.js.snap
@@ -17,6 +17,7 @@ exports[`GraphCard Component should render a basic component: basic 1`] = `
               "isStacked": true,
               "isStandalone": false,
               "isThreshold": false,
+              "metric": "Core-seconds",
               "strokeWidth": 2,
             },
           ],
@@ -26,9 +27,8 @@ exports[`GraphCard Component should render a basic component: basic 1`] = `
   >
     <GraphCardChart
       t={[Function]}
-      useGetGraphTally={[Function]}
+      useGetMetrics={[Function]}
       useGraphCardContext={[Function]}
-      useMetricsSelector={[Function]}
       useProduct={[Function]}
       useProductGraphTallyQuery={[Function]}
     />
@@ -51,6 +51,7 @@ exports[`GraphCard Component should setup basic settings: settings 1`] = `
               "isStacked": true,
               "isStandalone": false,
               "isThreshold": false,
+              "metric": "Core-seconds",
               "strokeWidth": 2,
             },
           ],
@@ -60,9 +61,8 @@ exports[`GraphCard Component should setup basic settings: settings 1`] = `
   >
     <GraphCardChart
       t={[Function]}
-      useGetGraphTally={[Function]}
+      useGetMetrics={[Function]}
       useGraphCardContext={[Function]}
-      useMetricsSelector={[Function]}
       useProduct={[Function]}
       useProductGraphTallyQuery={[Function]}
     />
@@ -79,6 +79,7 @@ exports[`GraphCard Component should setup basic settings: settings 1`] = `
             "isStacked": true,
             "isStandalone": true,
             "isThreshold": false,
+            "metric": "Sockets",
             "strokeWidth": 2,
           },
           "metrics": [
@@ -88,6 +89,7 @@ exports[`GraphCard Component should setup basic settings: settings 1`] = `
               "isStacked": true,
               "isStandalone": true,
               "isThreshold": false,
+              "metric": "Sockets",
               "strokeWidth": 2,
             },
           ],
@@ -108,9 +110,8 @@ exports[`GraphCard Component should setup basic settings: settings 1`] = `
     >
       <GraphCardChart
         t={[Function]}
-        useGetGraphTally={[Function]}
+        useGetMetrics={[Function]}
         useGraphCardContext={[Function]}
-        useMetricsSelector={[Function]}
         useProduct={[Function]}
         useProductGraphTallyQuery={[Function]}
       />

diff --git a/src/components/graphCard/__tests__/__snapshots__/graphCardChart.test.js.snap b/src/components/graphCard/__tests__/__snapshots__/graphCardChart.test.js.snap
@@ -34,7 +34,7 @@ exports[`GraphCardChart Component should render a basic component: basic 1`] = `
   >
     <CardBody>
       <div
-        className="blur"
+        className=""
       >
         <Chart
           chartLegend={[Function]}

diff --git a/src/components/graphCard/__tests__/__snapshots__/graphCardChartLegend.test.js.snap b/src/components/graphCard/__tests__/__snapshots__/graphCardChartLegend.test.js.snap
@@ -4,9 +4,9 @@ exports[`GraphCardChartLegend Component should handle a click event: click event
 [
   [
     {
-      "id": "test-loremIpsum",
+      "id": "mock-view-id-loremIpsum_mock-product-id",
       "type": "SET_GRAPH_LEGEND",
-      "value": "mock boolean, loremIpsum",
+      "value": "mock boolean, loremIpsum_mock-product-id",
     },
   ],
 ]
@@ -16,9 +16,9 @@ exports[`GraphCardChartLegend Component should handle a click event: keyPress ev
 [
   [
     {
-      "id": "test-loremIpsum",
+      "id": "mock-view-id-loremIpsum_mock-product-id",
       "type": "SET_GRAPH_LEGEND",
-      "value": "mock boolean, loremIpsum",
+      "value": "mock boolean, loremIpsum_mock-product-id",
     },
   ],
 ]
@@ -29,12 +29,12 @@ exports[`GraphCardChartLegend Component should handle variations in data when re
   <Tooltip
     content={
       <p>
-        t(curiosity-graph.legendTooltip_loremIpsum, {"product":"test","context":"test"}, [object Object])
+        t(curiosity-graph.legendTooltip_loremIpsum, {"product":"mock-product-label","context":"mock-product-id"}, [object Object])
       </p>
     }
     distance={5}
     enableFlip={true}
-    key="curiosity-tooltip-loremIpsum"
+    key="curiosity-tooltip-loremIpsum_mock-product-id"
     position="top"
   >
     <Button
@@ -54,24 +54,24 @@ exports[`GraphCardChartLegend Component should handle variations in data when re
         />
       }
       isDisabled={false}
-      key="curiosity-button-loremIpsum"
+      key="curiosity-button-loremIpsum_mock-product-id"
       onClick={[Function]}
       onKeyPress={[Function]}
       tabIndex={0}
       variant="link"
     >
-      t([curiosity-graph.label_loremIpsum,curiosity-graph.label_no], {"product":"test","context":"test"})
+      t([curiosity-graph.label_loremIpsum,curiosity-graph.label_no], {"product":"mock-product-label","context":"mock-product-id"})
     </Button>
   </Tooltip>
   <Tooltip
     content={
       <p>
-        t(curiosity-graph.legendTooltip_threshold_dolorSit, {"product":"test","context":"test"}, [object Object])
+        t(curiosity-graph.legendTooltip_threshold_dolorSit, {"product":"mock-product-label","context":"mock-product-id"}, [object Object])
       </p>
     }
     distance={5}
     enableFlip={true}
-    key="curiosity-tooltip-dolorSit"
+    key="curiosity-tooltip-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"
+      key="curiosity-button-dolorSit_mock-product-id"
       onClick={[Function]}
       onKeyPress={[Function]}
       tabIndex={0}
       variant="link"
     >
-      t([curiosity-graph.label_threshold,curiosity-graph.label_no], {"product":"test","context":"test"})
+      t([curiosity-graph.label,curiosity-graph.label_no], {"product":"mock-product-label","context":"threshold"})
     </Button>
   </Tooltip>
 </Fragment>
@@ -108,12 +108,12 @@ exports[`GraphCardChartLegend Component should render a basic component: basic 1
   <Tooltip
     content={
       <p>
-        t(curiosity-graph.legendTooltip_loremIpsum, {"product":"dolorSit","context":"dolorSit"}, [object Object])
+        t(curiosity-graph.legendTooltip_loremIpsum, {"product":"mock-product-label","context":"mock-product-id"}, [object Object])
       </p>
     }
     distance={5}
     enableFlip={true}
-    key="curiosity-tooltip-loremIpsum"
+    key="curiosity-tooltip-loremIpsum_mock-product-id"
     position="top"
   >
     <Button
@@ -133,13 +133,13 @@ exports[`GraphCardChartLegend Component should render a basic component: basic 1
         />
       }
       isDisabled={false}
-      key="curiosity-button-loremIpsum"
+      key="curiosity-button-loremIpsum_mock-product-id"
       onClick={[Function]}
       onKeyPress={[Function]}
       tabIndex={0}
       variant="link"
     >
-      t([curiosity-graph.label_loremIpsum,curiosity-graph.label_no], {"product":"dolorSit","context":"dolorSit"})
+      t([curiosity-graph.label_loremIpsum,curiosity-graph.label_no], {"product":"mock-product-label","context":"mock-product-id"})
     </Button>
   </Tooltip>
 </Fragment>
@@ -150,12 +150,12 @@ exports[`GraphCardChartLegend Component should render basic data: data 1`] = `
   <Tooltip
     content={
       <p>
-        t(curiosity-graph.legendTooltip_loremIpsum, {"product":"test","context":"test"}, [object Object])
+        t(curiosity-graph.legendTooltip_loremIpsum, {"product":"mock-product-label","context":"mock-product-id"}, [object Object])
       </p>
     }
     distance={5}
     enableFlip={true}
-    key="curiosity-tooltip-loremIpsum"
+    key="curiosity-tooltip-loremIpsum_mock-product-id"
     position="top"
   >
     <Button
@@ -175,24 +175,24 @@ exports[`GraphCardChartLegend Component should render basic data: data 1`] = `
         />
       }
       isDisabled={false}
-      key="curiosity-button-loremIpsum"
+      key="curiosity-button-loremIpsum_mock-product-id"
       onClick={[Function]}
       onKeyPress={[Function]}
       tabIndex={0}
       variant="link"
     >
-      t([curiosity-graph.label_loremIpsum,curiosity-graph.label_no], {"product":"test","context":"test"})
+      t([curiosity-graph.label_loremIpsum,curiosity-graph.label_no], {"product":"mock-product-label","context":"mock-product-id"})
     </Button>
   </Tooltip>
   <Tooltip
     content={
       <p>
-        t(curiosity-graph.legendTooltip_ametConsectetur, {"product":"test","context":"test"}, [object Object])
+        t(curiosity-graph.legendTooltip_ametConsectetur, {"product":"mock-product-label","context":"mock-product-id"}, [object Object])
       </p>
     }
     distance={5}
     enableFlip={true}
-    key="curiosity-tooltip-ametConsectetur"
+    key="curiosity-tooltip-ametConsectetur_mock-product-id"
     position="top"
   >
     <Button
@@ -207,24 +207,24 @@ exports[`GraphCardChartLegend Component should render basic data: data 1`] = `
         />
       }
       isDisabled={true}
-      key="curiosity-button-ametConsectetur"
+      key="curiosity-button-ametConsectetur_mock-product-id"
       onClick={[Function]}
       onKeyPress={[Function]}
       tabIndex={0}
       variant="link"
     >
-      t([curiosity-graph.label_ametConsectetur,curiosity-graph.label_no], {"product":"test","context":"test"})
+      t([curiosity-graph.label_ametConsectetur,curiosity-graph.label_no], {"product":"mock-product-label","context":"mock-product-id"})
     </Button>
   </Tooltip>
   <Tooltip
     content={
       <p>
-        t(curiosity-graph.legendTooltip_threshold_dolorSit, {"product":"test","context":"test"}, [object Object])
+        t(curiosity-graph.legendTooltip_threshold_dolorSit, {"product":"mock-product-label","context":"mock-product-id"}, [object Object])
       </p>
     }
     distance={5}
     enableFlip={true}
-    key="curiosity-tooltip-dolorSit"
+    key="curiosity-tooltip-dolorSit_mock-product-id"
     position="top"
   >
     <Button
@@ -244,24 +244,24 @@ exports[`GraphCardChartLegend Component should render basic data: data 1`] = `
         />
       }
       isDisabled={false}
-      key="curiosity-button-dolorSit"
+      key="curiosity-button-dolorSit_mock-product-id"
       onClick={[Function]}
       onKeyPress={[Function]}
       tabIndex={0}
       variant="link"
     >
-      t([curiosity-graph.label_threshold,curiosity-graph.label_no], {"product":"test","context":"test"})
+      t([curiosity-graph.label,curiosity-graph.label_no], {"product":"mock-product-label","context":"threshold"})
     </Button>
   </Tooltip>
   <Tooltip
     content={
       <p>
-        t(curiosity-graph.legendTooltip_threshold_nonCursus, {"product":"test","context":"test"}, [object Object])
+        t(curiosity-graph.legendTooltip_threshold_nonCursus, {"product":"mock-product-label","context":"mock-product-id"}, [object Object])
       </p>
     }
     distance={5}
     enableFlip={true}
-    key="curiosity-tooltip-nonCursus"
+    key="curiosity-tooltip-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"
+      key="curiosity-button-nonCursus_mock-product-id"
       onClick={[Function]}
       onKeyPress={[Function]}
       tabIndex={0}
       variant="link"
     >
-      t([curiosity-graph.label_threshold,curiosity-graph.label_no], {"product":"test","context":"test"})
+      t([curiosity-graph.label,curiosity-graph.label_no], {"product":"mock-product-label","context":"threshold"})
     </Button>
   </Tooltip>
 </Fragment>

diff --git a/src/components/graphCard/__tests__/__snapshots__/graphCardChartTitleTooltip.test.js.snap b/src/components/graphCard/__tests__/__snapshots__/graphCardChartTitleTooltip.test.js.snap
@@ -6,7 +6,7 @@ exports[`GraphCardChartTitleTooltip Component should render a basic component: b
 <Tooltip
   content={
     <p>
-      t(curiosity-graph.cardHeadingDescription_loremIpsum, {})
+      t(curiosity-graph.cardHeadingDescription, {"context":"loremIpsum"})
     </p>
   }
   distance={5}