feat(graphCardSelectors): issues/79 hypervisor breakout (#123)

* graphCardSelectors, moved aspects of graphHelpers into * graphHelpers, remove selectors aspects * rhelGraphCard, updated for new selector response * tests, graphHelpers, rhelGraphCard, selectors updates, and i18n
RedHatInsights · Nov 6, 2019 · 1db2bbf · 1db2bbf
1 parent 2fbc4e0
commit 1db2bbf
Show file tree

Hide file tree

Showing 8 changed files with 234 additions and 287 deletions.
diff --git a/src/common/__tests__/__snapshots__/graphHelpers.test.js.snap b/src/common/__tests__/__snapshots__/graphHelpers.test.js.snap
@@ -205,46 +205,6 @@ Object {
 }
 `;
 
-exports[`GraphHelpers should convert graph data and threshold data: threshold check date and index mismatch from data 1`] = `
-Object {
-  "chartData": Array [
-    Object {
-      "tooltip": "10 lorem tooltip label June 1",
-      "x": 0,
-      "xAxisLabel": "Jun 1",
-      "y": 10,
-    },
-    Object {
-      "tooltip": "12 lorem tooltip label June 2
- +2 t('curiosity-graph.tooltipPreviousLabelDaily')",
-      "x": 1,
-      "xAxisLabel": "Jun 2",
-      "y": 12,
-    },
-    Object {
-      "tooltip": "3 lorem tooltip label June 3
- -9 t('curiosity-graph.tooltipPreviousLabelDaily')",
-      "x": 2,
-      "xAxisLabel": "Jun 3",
-      "y": 3,
-    },
-    Object {
-      "x": 3,
-      "xAxisLabel": "Jun 4",
-      "y": 0,
-    },
-    Object {
-      "tooltip": "1 lorem tooltip label June 5",
-      "x": 4,
-      "xAxisLabel": "Jun 5",
-      "y": 1,
-    },
-  ],
-  "chartDataThresholds": Array [],
-  "chartXAxisLabelIncrement": 5,
-}
-`;
-
 exports[`GraphHelpers should handle cross quarter labels: quarter granularity 1`] = `
 Object {
   "chartData": Array [

diff --git a/src/common/__tests__/graphHelpers.test.js b/src/common/__tests__/graphHelpers.test.js
diff --git a/src/common/graphHelpers.js b/src/common/graphHelpers.js
@@ -254,9 +254,7 @@ const fillFormatChartData = ({
  * Convert graph data to consumable format
  *
  * @param {Array} data list of available report data
- * @param {string} dataFacet the response property used for the y axis
  * @param {Array} dataThreshold list of available capacity data
- * @param {string} dataThresholdFacet the response property for the threshold line indicator
  * @param {string} tooltipLabel the tooltip label
  * @param {string} tooltipLabelNoData
  * @param {string} tooltipThresholdLabel the tooltip threshold label
@@ -267,9 +265,7 @@ const fillFormatChartData = ({
  */
 const convertChartData = ({
   data,
-  dataFacet,
   dataThreshold,
-  dataThresholdFacet,
   tooltipLabel,
   tooltipLabelNoData,
   tooltipThresholdLabel,
@@ -282,33 +278,13 @@ const convertChartData = ({
   (data || []).forEach((value, index) => {
     if (value) {
       const stringDate = moment
-        .utc(value[rhelApiTypes.RHSM_API_RESPONSE_PRODUCTS_DATA_TYPES.DATE])
+        .utc(value.date)
         .startOf('day')
         .toISOString();
 
-      /**
-       * FixMe: per API the list indexes should match on capacity and reporting.Once resonable
-       * Once reasonable testing has occurred consider removing this check.
-       */
-      const checkThresholdDate = dataThresholdItem => {
-        if (!dataThresholdItem) {
-          return false;
-        }
-
-        const stringThresholdDate = moment
-          .utc(dataThresholdItem[rhelApiTypes.RHSM_API_RESPONSE_CAPACITY_DATA_TYPES.DATE])
-          .startOf('day')
-          .toISOString();
-
-        return moment(stringDate).isSame(stringThresholdDate);
-      };
-
       formattedData[stringDate] = {
-        data: Number.parseInt(value[dataFacet], 10),
-        dataThreshold: Number.parseInt(
-          (checkThresholdDate(dataThreshold && dataThreshold[index]) && dataThreshold[index][dataThresholdFacet]) || 0,
-          10
-        )
+        data: value.y,
+        dataThreshold: (dataThreshold && dataThreshold[index] && dataThreshold[index].y) || 0
       };
     }
   });

diff --git a/src/components/i18n/__tests__/__snapshots__/i18n.test.js.snap b/src/components/i18n/__tests__/__snapshots__/i18n.test.js.snap
@@ -12,11 +12,11 @@ exports[`I18n Component should generate a predictable pot output snapshot: pot o
 msgstr \\"\\"
 \\"Content-Type: text/plain; charset=UTF-8\\\\n\\"
 
-#: src/components/rhelGraphCard/rhelGraphCard.js:80
+#: src/components/rhelGraphCard/rhelGraphCard.js:78
 msgid \\"curiosity-graph.legendSocketsLabel\\"
 msgstr \\"\\"
 
-#: src/components/rhelGraphCard/rhelGraphCard.js:90
+#: src/components/rhelGraphCard/rhelGraphCard.js:88
 msgid \\"curiosity-graph.legendSocketsThresholdLabel\\"
 msgstr \\"\\"
 
@@ -36,19 +36,19 @@ msgstr \\"\\"
 msgid \\"curiosity-graph.tooltipPreviousLabelWeekly\\"
 msgstr \\"\\"
 
-#: src/components/rhelGraphCard/rhelGraphCard.js:60
+#: src/components/rhelGraphCard/rhelGraphCard.js:58
 msgid \\"curiosity-graph.tooltipSockets\\"
 msgstr \\"\\"
 
-#: src/components/rhelGraphCard/rhelGraphCard.js:61
+#: src/components/rhelGraphCard/rhelGraphCard.js:59
 msgid \\"curiosity-graph.tooltipSocketsNoData\\"
 msgstr \\"\\"
 
-#: src/components/rhelGraphCard/rhelGraphCard.js:62
+#: src/components/rhelGraphCard/rhelGraphCard.js:60
 msgid \\"curiosity-graph.tooltipSocketsThreshold\\"
 msgstr \\"\\"
 
-#: src/components/rhelGraphCard/rhelGraphCard.js:106
+#: src/components/rhelGraphCard/rhelGraphCard.js:104
 msgctxt \\"CPU socket usage\\"
 msgid \\"curiosity-graph.heading\\"
 msgstr \\"\\"
@@ -68,8 +68,8 @@ msgctxt \\"Quarterly\\"
 msgid \\"curiosity-graph.dropdownQuarterly\\"
 msgstr \\"\\"
 
-#: src/components/rhelGraphCard/rhelGraphCard.js:109
-#: src/components/rhelGraphCard/rhelGraphCard.js:113
+#: src/components/rhelGraphCard/rhelGraphCard.js:107
+#: src/components/rhelGraphCard/rhelGraphCard.js:111
 msgctxt \\"Select date range\\"
 msgid \\"curiosity-graph.dropdownPlaceholder\\"
 msgstr \\"\\"

diff --git a/src/components/rhelGraphCard/__tests__/rhelGraphCard.test.js b/src/components/rhelGraphCard/__tests__/rhelGraphCard.test.js
@@ -2,7 +2,6 @@ import React from 'react';
 import { shallow } from 'enzyme';
 import { ChartArea } from '../../chartArea/chartArea';
 import { RhelGraphCard } from '../rhelGraphCard';
-import { rhelApiTypes } from '../../../types/rhelApiTypes';
 
 describe('RhelGraphCard Component', () => {
   it('should render a non-connected component', () => {
@@ -17,24 +16,21 @@ describe('RhelGraphCard Component', () => {
       startDate: new Date('2019-06-01T00:00:00Z'),
       endDate: new Date('2019-06-30T23:59:59Z'),
       graphData: {
-        usage: [
+        sockets: [
           {
-            [rhelApiTypes.RHSM_API_RESPONSE_PRODUCTS_DATA_TYPES.DATE]: '2019-06-01T00:00:00Z',
-            [rhelApiTypes.RHSM_API_RESPONSE_PRODUCTS_DATA_TYPES.SOCKETS]: 10,
-            [rhelApiTypes.RHSM_API_RESPONSE_PRODUCTS_DATA_TYPES.HYPERVISOR_SOCKETS]: 5,
-            [rhelApiTypes.RHSM_API_RESPONSE_PRODUCTS_DATA_TYPES.PHYSICAL_SOCKETS]: 5
+            date: new Date('2019-06-01T00:00:00Z'),
+            y: 10,
+            x: 0
           },
           {
-            [rhelApiTypes.RHSM_API_RESPONSE_PRODUCTS_DATA_TYPES.DATE]: '2019-06-08T00:00:00Z',
-            [rhelApiTypes.RHSM_API_RESPONSE_PRODUCTS_DATA_TYPES.SOCKETS]: 12,
-            [rhelApiTypes.RHSM_API_RESPONSE_PRODUCTS_DATA_TYPES.HYPERVISOR_SOCKETS]: 5,
-            [rhelApiTypes.RHSM_API_RESPONSE_PRODUCTS_DATA_TYPES.PHYSICAL_SOCKETS]: 7
+            date: new Date('2019-06-08T00:00:00Z'),
+            y: 12,
+            x: 1
           },
           {
-            [rhelApiTypes.RHSM_API_RESPONSE_PRODUCTS_DATA_TYPES.DATE]: '2019-06-25T00:00:00Z',
-            [rhelApiTypes.RHSM_API_RESPONSE_PRODUCTS_DATA_TYPES.SOCKETS]: 3,
-            [rhelApiTypes.RHSM_API_RESPONSE_PRODUCTS_DATA_TYPES.HYPERVISOR_SOCKETS]: 0,
-            [rhelApiTypes.RHSM_API_RESPONSE_PRODUCTS_DATA_TYPES.PHYSICAL_SOCKETS]: 3
+            date: new Date('2019-06-25T00:00:00Z'),
+            y: 3,
+            x: 2
           }
         ]
       }

diff --git a/src/components/rhelGraphCard/rhelGraphCard.js b/src/components/rhelGraphCard/rhelGraphCard.js
@@ -53,10 +53,8 @@ class RhelGraphCard extends React.Component {
   renderChart() {
     const { graphData, graphGranularity, startDate, endDate, t } = this.props;
     const { chartXAxisLabelIncrement, chartData, chartDataThresholds } = graphHelpers.convertChartData({
-      data: graphData.usage,
-      dataFacet: rhelApiTypes.RHSM_API_RESPONSE_PRODUCTS_DATA_TYPES.SOCKETS,
-      dataThreshold: graphData.capacity,
-      dataThresholdFacet: rhelApiTypes.RHSM_API_RESPONSE_CAPACITY_DATA_TYPES.SOCKETS,
+      data: graphData.sockets,
+      dataThreshold: graphData.threshold,
       tooltipLabel: t('curiosity-graph.tooltipSockets'),
       tooltipLabelNoData: t('curiosity-graph.tooltipSocketsNoData'),
       tooltipThresholdLabel: t('curiosity-graph.tooltipSocketsThreshold'),
@@ -136,8 +134,20 @@ RhelGraphCard.propTypes = {
   getGraphCapacityRhel: PropTypes.func,
   getGraphReportsRhel: PropTypes.func,
   graphData: PropTypes.shape({
-    capacity: PropTypes.array,
-    usage: PropTypes.array
+    sockets: PropTypes.arrayOf(
+      PropTypes.shape({
+        date: PropTypes.instanceOf(Date),
+        x: PropTypes.number,
+        y: PropTypes.number
+      })
+    ),
+    threshold: PropTypes.arrayOf(
+      PropTypes.shape({
+        date: PropTypes.instanceOf(Date),
+        x: PropTypes.number,
+        y: PropTypes.number
+      })
+    )
   }),
   graphGranularity: PropTypes.oneOf([
     GRANULARITY_TYPES.DAILY,
@@ -155,8 +165,8 @@ RhelGraphCard.defaultProps = {
   getGraphCapacityRhel: helpers.noop,
   getGraphReportsRhel: helpers.noop,
   graphData: {
-    capacity: [],
-    usage: []
+    sockets: [],
+    threshold: []
   },
   graphGranularity: GRANULARITY_TYPES.DAILY,
   pending: false,

diff --git a/src/redux/selectors/__tests__/__snapshots__/graphCardSelectors.test.js.snap b/src/redux/selectors/__tests__/__snapshots__/graphCardSelectors.test.js.snap
@@ -5,8 +5,9 @@ Object {
   "error": true,
   "fulfilled": false,
   "graphData": Object {
-    "capacity": Array [],
-    "usage": Array [],
+    "hypervisor": Array [],
+    "sockets": Array [],
+    "threshold": Array [],
   },
   "initialLoad": true,
   "pending": false,
@@ -18,8 +19,9 @@ Object {
   "error": false,
   "fulfilled": false,
   "graphData": Object {
-    "capacity": Array [],
-    "usage": Array [],
+    "hypervisor": Array [],
+    "sockets": Array [],
+    "threshold": Array [],
   },
   "initialLoad": true,
   "pending": true,
@@ -31,44 +33,55 @@ Object {
   "error": false,
   "fulfilled": true,
   "graphData": Object {
-    "capacity": Array [
+    "hypervisor": Array [
       Object {
-        "date": "2019-09-04T00:00:00.000Z",
-        "hypervisor_sockets": 50,
-        "physical_sockets": 50,
-        "sockets": 100,
+        "date": 2019-09-04T00:00:00.000Z,
+        "x": 0,
+        "y": 1,
       },
       Object {
-        "date": "2019-09-05T00:00:00.000Z",
-        "hypervisor_sockets": 0,
-        "physical_sockets": 0,
-        "sockets": 0,
+        "date": 2019-09-05T00:00:00.000Z,
+        "x": 1,
+        "y": 1,
       },
       Object {
-        "date": "2019-09-06T00:00:00.000Z",
-        "hypervisor_sockets": 50,
-        "physical_sockets": 50,
-        "sockets": 100,
+        "date": 2019-09-06T00:00:00.000Z,
+        "x": 2,
+        "y": 2,
       },
     ],
-    "usage": Array [
+    "sockets": Array [
       Object {
-        "date": "2019-09-04T00:00:00.000Z",
-        "hypervisor_sockets": 1,
-        "physical_sockets": 1,
-        "sockets": 2,
+        "date": 2019-09-04T00:00:00.000Z,
+        "x": 0,
+        "y": 1,
       },
       Object {
-        "date": "2019-09-05T00:00:00.000Z",
-        "hypervisor_sockets": 1,
-        "physical_sockets": 1,
-        "sockets": 2,
+        "date": 2019-09-05T00:00:00.000Z,
+        "x": 1,
+        "y": 1,
       },
       Object {
-        "date": "2019-09-06T00:00:00.000Z",
-        "hypervisor_sockets": 2,
-        "physical_sockets": 2,
-        "sockets": 4,
+        "date": 2019-09-06T00:00:00.000Z,
+        "x": 2,
+        "y": 2,
+      },
+    ],
+    "threshold": Array [
+      Object {
+        "date": 2019-09-04T00:00:00.000Z,
+        "x": 0,
+        "y": 100,
+      },
+      Object {
+        "date": 2019-09-05T00:00:00.000Z,
+        "x": 1,
+        "y": 0,
+      },
+      Object {
+        "date": 2019-09-06T00:00:00.000Z,
+        "x": 2,
+        "y": 100,
       },
     ],
   },
@@ -82,8 +95,9 @@ Object {
   "error": false,
   "fulfilled": true,
   "graphData": Object {
-    "capacity": Array [],
-    "usage": Array [],
+    "hypervisor": Array [],
+    "sockets": Array [],
+    "threshold": Array [],
   },
   "initialLoad": false,
   "pending": false,