fix(graphCard,Context): sw-690 graph card loading (#1023)

* graphCard, lifecycle to context * graphCardChartLegend, use parsed context * graphCardContext, useParseFiltersSettings hook * graphCardContext, rhsmActions, align promise all
RedHatInsights · Dec 12, 2022 · 77d5083 · 77d5083
1 parent c0dda52
commit 77d5083
Show file tree

Hide file tree

Showing 9 changed files with 257 additions and 109 deletions.
diff --git a/src/components/graphCard/__tests__/__snapshots__/graphCard.test.js.snap b/src/components/graphCard/__tests__/__snapshots__/graphCard.test.js.snap
@@ -2,7 +2,9 @@
 
 exports[`GraphCard Component should allow being disabled: disabled 1`] = `""`;
 
-exports[`GraphCard Component should render a basic component: basic 1`] = `
+exports[`GraphCard Component should render a default component: default 1`] = `<Fragment />`;
+
+exports[`GraphCard Component should setup basic settings: settings, grouped 1`] = `
 <Fragment>
   <ContextProvider
     value={
@@ -38,30 +40,10 @@ exports[`GraphCard Component should render a basic component: basic 1`] = `
 </Fragment>
 `;
 
-exports[`GraphCard Component should setup basic settings: settings 1`] = `
+exports[`GraphCard Component should setup basic settings: settings, standalone 1`] = `
 <Fragment>
   <ContextProvider
-    value={
-      {
-        "settings": {
-          "isStandalone": false,
-          "metric": undefined,
-          "metrics": [
-            {
-              "chartType": "area",
-              "id": "Core-seconds",
-              "isCapacity": false,
-              "isStacked": true,
-              "isStandalone": false,
-              "isThreshold": false,
-              "isToolbarFilter": false,
-              "metric": "Core-seconds",
-              "strokeWidth": 2,
-            },
-          ],
-        },
-      }
-    }
+    value={{}}
   >
     <GraphCardChart
       t={[Function]}

diff --git a/src/components/graphCard/__tests__/__snapshots__/graphCardContext.test.js.snap b/src/components/graphCard/__tests__/__snapshots__/graphCardContext.test.js.snap
@@ -108,6 +108,81 @@ exports[`GraphCardContext should aggregate metric API calls: aggregated calls, p
 }
 `;
 
+exports[`GraphCardContext should parse configuration: configuration, basic 1`] = `
+{
+  "groupedFiltersSettings": undefined,
+  "standaloneFiltersSettings": [],
+}
+`;
+
+exports[`GraphCardContext should parse configuration: configuration, grouped 1`] = `
+{
+  "groupedFiltersSettings": {
+    "settings": {
+      "isStandalone": false,
+      "metric": undefined,
+      "metrics": [
+        {
+          "chartType": "area",
+          "id": "Core-seconds_loremIpsum",
+          "isCapacity": false,
+          "isStacked": true,
+          "isStandalone": false,
+          "isThreshold": false,
+          "isToolbarFilter": false,
+          "metric": "Core-seconds",
+          "strokeWidth": 2,
+        },
+      ],
+    },
+  },
+  "standaloneFiltersSettings": [],
+}
+`;
+
+exports[`GraphCardContext should parse configuration: configuration, standalone 1`] = `
+{
+  "groupedFiltersSettings": undefined,
+  "standaloneFiltersSettings": [
+    {
+      "settings": {
+        "isStandalone": true,
+        "metric": {
+          "chartType": "area",
+          "id": "Core-seconds_loremIpsum",
+          "isCapacity": false,
+          "isStacked": true,
+          "isStandalone": true,
+          "isThreshold": false,
+          "isToolbarFilter": false,
+          "metric": "Core-seconds",
+          "strokeWidth": 2,
+        },
+        "metrics": [
+          {
+            "chartType": "area",
+            "id": "Core-seconds_loremIpsum",
+            "isCapacity": false,
+            "isStacked": true,
+            "isStandalone": true,
+            "isThreshold": false,
+            "isToolbarFilter": false,
+            "metric": "Core-seconds",
+            "strokeWidth": 2,
+          },
+        ],
+        "padding": {
+          "bottom": 75,
+          "left": 75,
+          "right": 45,
+          "top": 45,
+        },
+      },
+    },
+  ],
+}
+`;
+
 exports[`GraphCardContext should return specific properties: specific properties 1`] = `
 {
   "DEFAULT_CONTEXT": [
@@ -159,5 +234,6 @@ exports[`GraphCardContext should return specific properties: specific properties
   "useGetMetrics": [Function],
   "useGraphCardContext": [Function],
   "useMetricsSelector": [Function],
+  "useParseFiltersSettings": [Function],
 }
 `;
diff --git a/src/components/graphCard/__tests__/__snapshots__/graphCardMetricTotals.test.js.snap b/src/components/graphCard/__tests__/__snapshots__/graphCardMetricTotals.test.js.snap
@@ -396,9 +396,7 @@ exports[`GraphCardMetricTotals Component should render a basic component: basic
           updateOnResize={true}
         >
           <CardBody>
-            <div>
-              t(curiosity-graph.cardBodyMetric, {"context":"total"}, [object Object])
-            </div>
+            <div />
           </CardBody>
         </MinHeight>
         <MinHeight
@@ -428,9 +426,7 @@ exports[`GraphCardMetricTotals Component should render a basic component: basic
           updateOnResize={true}
         >
           <CardBody>
-            <div>
-              t(curiosity-graph.cardBodyMetric, {"context":"total"}, [object Object])
-            </div>
+            <div />
           </CardBody>
         </MinHeight>
         <MinHeight

diff --git a/src/components/graphCard/__tests__/graphCard.test.js b/src/components/graphCard/__tests__/graphCard.test.js
@@ -1,48 +1,90 @@
 import React from 'react';
 import { GraphCard } from '../graphCard';
-import { rhsmConstants } from '../../../services/rhsm/rhsmConstants';
 
 describe('GraphCard Component', () => {
-  it('should render a basic component', async () => {
-    const props = {
-      useProductGraphConfig: () => ({
-        filters: [
-          {
-            metric: rhsmConstants.RHSM_API_PATH_METRIC_TYPES.CORE_SECONDS
-          }
-        ]
-      })
-    };
-    const component = await shallowHookComponent(<GraphCard {...props} />);
-
-    expect(component).toMatchSnapshot('basic');
+  it('should render a default component', async () => {
+    const component = await shallowHookComponent(<GraphCard />);
+    expect(component).toMatchSnapshot('default');
   });
 
   it('should setup basic settings', async () => {
     const props = {
-      useProductGraphConfig: () => ({
-        filters: [
-          {
-            metric: rhsmConstants.RHSM_API_PATH_METRIC_TYPES.CORE_SECONDS
-          },
+      useParseFiltersSettings: () => ({
+        groupedFiltersSettings: {},
+        standaloneFiltersSettings: [
           {
-            metric: rhsmConstants.RHSM_API_PATH_METRIC_TYPES.SOCKETS,
-            isStandalone: true
+            settings: {
+              isStandalone: true,
+              metric: {
+                chartType: 'area',
+                id: 'Sockets',
+                isCapacity: false,
+                isStacked: true,
+                isStandalone: true,
+                isThreshold: false,
+                isToolbarFilter: false,
+                metric: 'Sockets',
+                strokeWidth: 2
+              },
+              metrics: [
+                {
+                  chartType: 'area',
+                  id: 'Sockets',
+                  isCapacity: false,
+                  isStacked: true,
+                  isStandalone: true,
+                  isThreshold: false,
+                  isToolbarFilter: false,
+                  metric: 'Sockets',
+                  strokeWidth: 2
+                }
+              ],
+              padding: {
+                bottom: 75,
+                left: 75,
+                right: 45,
+                top: 45
+              }
+            }
           }
         ]
       })
     };
-    const component = await shallowHookComponent(<GraphCard {...props} />);
+    const componentStandalone = await shallowHookComponent(<GraphCard {...props} />);
+    expect(componentStandalone).toMatchSnapshot('settings, standalone');
+
+    props.useParseFiltersSettings = () => ({
+      groupedFiltersSettings: {
+        settings: {
+          isStandalone: false,
+          metric: undefined,
+          metrics: [
+            {
+              chartType: 'area',
+              id: 'Core-seconds',
+              isCapacity: false,
+              isStacked: true,
+              isStandalone: false,
+              isThreshold: false,
+              isToolbarFilter: false,
+              metric: 'Core-seconds',
+              strokeWidth: 2
+            }
+          ]
+        }
+      },
+      standaloneFiltersSettings: []
+    });
 
-    expect(component).toMatchSnapshot('settings');
+    const componentGrouped = await shallowHookComponent(<GraphCard {...props} />);
+    expect(componentGrouped).toMatchSnapshot('settings, grouped');
   });
 
   it('should allow being disabled', async () => {
     const props = {
       isDisabled: true
     };
     const component = await shallowHookComponent(<GraphCard {...props} />);
-
     expect(component).toMatchSnapshot('disabled');
   });
 });
diff --git a/src/components/graphCard/__tests__/graphCardContext.test.js b/src/components/graphCard/__tests__/graphCardContext.test.js
@@ -1,10 +1,49 @@
-import { context, useMetricsSelector } from '../graphCardContext';
+import { context, useMetricsSelector, useParseFiltersSettings } from '../graphCardContext';
+import { rhsmConstants } from '../../../services/rhsm/rhsmConstants';
 
 describe('GraphCardContext', () => {
   it('should return specific properties', () => {
     expect(context).toMatchSnapshot('specific properties');
   });
 
+  it('should parse configuration', async () => {
+    const { result: basicConfig } = await mountHook(() => useParseFiltersSettings());
+    expect(basicConfig).toMatchSnapshot('configuration, basic');
+
+    const { unmount: groupedUnmount, result: groupedConfig } = await mountHook(() =>
+      useParseFiltersSettings({
+        useProduct: () => ({ productId: 'loremIpsum' }),
+        useProductGraphConfig: () => ({
+          filters: [
+            {
+              metric: rhsmConstants.RHSM_API_PATH_METRIC_TYPES.CORE_SECONDS
+            }
+          ]
+        })
+      })
+    );
+
+    await groupedUnmount();
+    expect(groupedConfig).toMatchSnapshot('configuration, grouped');
+
+    const { unmount: standaloneUnmount, result: standaloneConfig } = await mountHook(() =>
+      useParseFiltersSettings({
+        useProduct: () => ({ productId: 'loremIpsum' }),
+        useProductGraphConfig: () => ({
+          filters: [
+            {
+              metric: rhsmConstants.RHSM_API_PATH_METRIC_TYPES.CORE_SECONDS,
+              isStandalone: true
+            }
+          ]
+        })
+      })
+    );
+
+    await standaloneUnmount();
+    expect(standaloneConfig).toMatchSnapshot('configuration, standalone');
+  });
+
   it('should aggregate metric API calls', () => {
     // error response
     const error = useMetricsSelector({

diff --git a/src/components/graphCard/graphCard.js b/src/components/graphCard/graphCard.js
@@ -1,29 +1,20 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { useProduct, useProductGraphConfig } from '../productView/productViewContext';
 import { helpers } from '../../common';
 import { GraphCardMetricTotals } from './graphCardMetricTotals';
 import { GraphCardChart } from './graphCardChart';
-import { GraphCardContext } from './graphCardContext';
-import { graphCardHelpers } from './graphCardHelpers';
+import { GraphCardContext, useParseFiltersSettings } from './graphCardContext';
 
 /**
  * Set up graph cards. Expand filters with base graph settings.
  *
  * @param {object} props
  * @param {boolean} props.isDisabled
- * @param {Function} props.useProduct
- * @param {Function} props.useProductGraphConfig
+ * @param {Function} props.useParseFiltersSettings
  * @returns {Node}
  */
-const GraphCard = ({ isDisabled, useProduct: useAliasProduct, useProductGraphConfig: useAliasProductGraphConfig }) => {
-  const { productId } = useAliasProduct();
-  const { filters, settings } = useAliasProductGraphConfig();
-  const { groupedFiltersSettings, standaloneFiltersSettings } = graphCardHelpers.generateChartSettings({
-    filters,
-    settings,
-    productId
-  });
+const GraphCard = ({ isDisabled, useParseFiltersSettings: useAliasParseFiltersSettings }) => {
+  const { groupedFiltersSettings, standaloneFiltersSettings } = useAliasParseFiltersSettings();
 
   if (isDisabled) {
     return null;
@@ -51,23 +42,21 @@ const GraphCard = ({ isDisabled, useProduct: useAliasProduct, useProductGraphCon
 /**
  * Prop types.
  *
- * @type {{useProduct: Function, useProductGraphConfig: Function, isDisabled: boolean}}
+ * @type {{useParseFiltersSettings: Function, isDisabled: boolean}}
  */
 GraphCard.propTypes = {
   isDisabled: PropTypes.bool,
-  useProduct: PropTypes.func,
-  useProductGraphConfig: PropTypes.func
+  useParseFiltersSettings: PropTypes.func
 };
 
 /**
  * Default props.
  *
- * @type {{useProduct: Function, useProductGraphConfig: Function, isDisabled: boolean}}
+ * @type {{useParseFiltersSettings: Function, isDisabled: boolean}}
  */
 GraphCard.defaultProps = {
   isDisabled: helpers.UI_DISABLED_GRAPH,
-  useProduct,
-  useProductGraphConfig
+  useParseFiltersSettings
 };
 
 export { GraphCard as default, GraphCard };