feat(rhelServices,graphHelpers): issues/42 cores to sockets (#48)

* rhelServices, update mock towards sockets response prop
* rhelApiTypes, update props, add sockets
* graphHelpers, use sockets instead of cores, generic naming
* dateHelpers, update testing response, convert towards js date obj
* rhelGraphCard, i18n generic keys
* locales, i18n generic keys
* styles, clean up

public/locales/en.json

@@ -2,7 +2,7 @@
   "curiosity-graph": {
     "heading": "Daily CPU socket usage",
     "dropdownDefault": "Last 30 Days",
-    "socketsOn": "sockets on",
-    "fromPrevious": "from previous day"
+    "activeLabel": "sockets active",
+    "previousLabel": "from previous day"
   }
 }

src/common/__tests__/__snapshots__/dateHelpers.test.js.snap

@@ -3,8 +3,8 @@
 exports[`DateHelpers should have specific functions: dateHelpers 1`] = `
 Object {
   "defaultDateTime": Object {
-    "end": null,
-    "start": null,
+    "end": 2019-07-20T23:59:59.999Z,
+    "start": 2019-06-20T00:00:00.000Z,
   },
 }
 `;

src/common/__tests__/__snapshots__/graphHelpers.test.js.snap

@@ -3,21 +3,32 @@
 exports[`GraphHelpers should convert graph data and generate tooltips when usage is populated: usage populated 1`] = `
 Array [
   Object {
-    "label": "56 sockets on Jun 1",
+    "label": "5 sockets on Jun 1",
     "x": "Jun 1",
-    "y": 56,
+    "y": 5,
   },
   Object {
-    "label": "30 sockets on Jun 2
- -26 from previous day",
+    "label": "7 sockets on Jun 2
+ +2 from previous day",
     "x": "Jun 2",
-    "y": 30,
+    "y": 7,
   },
   Object {
-    "label": "40 sockets on Jun 3
- +10 from previous day",
+    "label": "3 sockets on Jun 3
+ -4 from previous day",
     "x": "Jun 3",
-    "y": 40,
+    "y": 3,
+  },
+  Object {
+    "label": "0 sockets on Jun 4
+ -3 from previous day",
+    "x": "Jun 4",
+    "y": 0,
+  },
+  Object {
+    "label": "0 sockets on Jun 5",
+    "x": "Jun 5",
+    "y": 0,
   },
 ]
 `;
@@ -75,7 +86,7 @@ Array [
 exports[`GraphHelpers should have specific functions: graphHelpers 1`] = `
 Object {
   "chartDateFormat": "MMM D",
-  "convertGraphData": [Function],
+  "convertGraphUsageData": [Function],
   "getGraphHeight": [Function],
   "getTooltipDimensions": [Function],
   "getTooltipFontSize": [Function],

src/common/__tests__/dateHelpers.test.js

@@ -4,4 +4,9 @@ describe('DateHelpers', () => {
   it('should have specific functions', () => {
     expect(dateHelpers).toMatchSnapshot('dateHelpers');
   });
+
+  it('should return a date object for defaultDateTime', () => {
+    expect(dateHelpers.defaultDateTime.start.constructor).toBe(Date);
+    expect(dateHelpers.defaultDateTime.end.constructor).toBe(Date);
+  });
 });

src/common/__tests__/graphHelpers.test.js

@@ -1,58 +1,92 @@
 import {
   graphHelpers,
-  convertGraphData,
+  convertGraphUsageData,
   getGraphHeight,
   getTooltipDimensions,
   getTooltipFontSize
 } from '../graphHelpers';
 import { helpers } from '../helpers';
+import { rhelApiTypes } from '../../types/rhelApiTypes';
 
 describe('GraphHelpers', () => {
-  const { breakpoints } = helpers;
-  const startDate = new Date('2019-06-01T00:00:00Z');
-  const endDate = new Date('2019-06-05T00:00:00Z');
-  const socketLabel = 'sockets on';
-  const previousLabel = 'from previous day';
-
   it('should have specific functions', () => {
     expect(graphHelpers).toMatchSnapshot('graphHelpers');
   });
 
   it('should convert graph data and return zeroed usage array if usage is empty', () => {
-    expect(convertGraphData({ usage: [], startDate, endDate, socketLabel, previousLabel })).toMatchSnapshot(
-      'zeroed array'
-    );
+    const props = {
+      startDate: new Date('2019-06-01T00:00:00Z'),
+      endDate: new Date('2019-06-05T23:59:59Z'),
+      label: 'sockets on',
+      previousLabel: 'from previous day',
+      data: []
+    };
+
+    expect(convertGraphUsageData(props)).toMatchSnapshot('zeroed array');
   });
 
   it('should convert graph data and generate tooltips when usage is populated', () => {
-    expect(
-      convertGraphData({
-        usage: [
-          { cores: 56, date: '2019-06-01T00:00:00Z', instance_count: 28 },
-          { cores: 30, date: '2019-06-02T00:00:00Z', instance_count: 28 },
-          { cores: 40, date: '2019-06-03T00:00:00Z', instance_count: 28 }
-        ],
-        startDate,
-        endDate,
-        socketLabel,
-        previousLabel
-      })
-    ).toMatchSnapshot('usage populated');
+    const props = {
+      startDate: new Date('2019-06-01T00:00:00Z'),
+      endDate: new Date('2019-06-05T23:59:59Z'),
+      label: 'sockets on',
+      previousLabel: 'from previous day',
+      data: [
+        {
+          [rhelApiTypes.RHSM_API_RESPONSE_PRODUCTS_DATA_CORES]: 56,
+          [rhelApiTypes.RHSM_API_RESPONSE_PRODUCTS_DATA_DATE]: '2019-06-01T00:00:00Z',
+          [rhelApiTypes.RHSM_API_RESPONSE_PRODUCTS_DATA_INSTANCES]: 28,
+          [rhelApiTypes.RHSM_API_RESPONSE_PRODUCTS_DATA_SOCKETS]: 5
+        },
+        {
+          [rhelApiTypes.RHSM_API_RESPONSE_PRODUCTS_DATA_CORES]: 30,
+          [rhelApiTypes.RHSM_API_RESPONSE_PRODUCTS_DATA_DATE]: '2019-06-02T00:00:00Z',
+          [rhelApiTypes.RHSM_API_RESPONSE_PRODUCTS_DATA_INSTANCES]: 28,
+          [rhelApiTypes.RHSM_API_RESPONSE_PRODUCTS_DATA_SOCKETS]: 7
+        },
+        {
+          [rhelApiTypes.RHSM_API_RESPONSE_PRODUCTS_DATA_CORES]: 40,
+          [rhelApiTypes.RHSM_API_RESPONSE_PRODUCTS_DATA_DATE]: '2019-06-03T00:00:00Z',
+          [rhelApiTypes.RHSM_API_RESPONSE_PRODUCTS_DATA_INSTANCES]: 28,
+          [rhelApiTypes.RHSM_API_RESPONSE_PRODUCTS_DATA_SOCKETS]: 3
+        },
+        {
+          [rhelApiTypes.RHSM_API_RESPONSE_PRODUCTS_DATA_CORES]: 0,
+          [rhelApiTypes.RHSM_API_RESPONSE_PRODUCTS_DATA_DATE]: '2019-06-04T00:00:00Z',
+          [rhelApiTypes.RHSM_API_RESPONSE_PRODUCTS_DATA_INSTANCES]: 0,
+          [rhelApiTypes.RHSM_API_RESPONSE_PRODUCTS_DATA_SOCKETS]: 0
+        },
+        {
+          [rhelApiTypes.RHSM_API_RESPONSE_PRODUCTS_DATA_CORES]: 0,
+          [rhelApiTypes.RHSM_API_RESPONSE_PRODUCTS_DATA_DATE]: '2019-06-05T00:00:00Z',
+          [rhelApiTypes.RHSM_API_RESPONSE_PRODUCTS_DATA_INSTANCES]: 0,
+          [rhelApiTypes.RHSM_API_RESPONSE_PRODUCTS_DATA_SOCKETS]: 0
+        }
+      ]
+    };
+
+    expect(convertGraphUsageData(props)).toMatchSnapshot('usage populated');
   });
 
   it('should convert graph data and returned zeroed array when usage throws error', () => {
+    const props = {
+      startDate: new Date('2019-06-01T00:00:00Z'),
+      endDate: new Date('2019-06-05T23:59:59Z'),
+      label: 'sockets on',
+      previousLabel: 'from previous day',
+      data: [null]
+    };
+
     expect(
-      convertGraphData({
-        usage: [null], // unexpected usage, will throw exception
-        startDate,
-        endDate,
-        socketLabel,
-        previousLabel
+      convertGraphUsageData({
+        ...props
       })
     ).toMatchSnapshot('throws error');
   });
 
   it('should match graph heights at all breakpoints', () => {
+    const { breakpoints } = helpers;
+
     expect(getGraphHeight(breakpoints, 'xs')).toMatchSnapshot('xs graph height');
     expect(getGraphHeight(breakpoints, 'sm')).toMatchSnapshot('sm graph height');
     expect(getGraphHeight(breakpoints, 'md')).toMatchSnapshot('md graph height');
@@ -62,6 +96,8 @@ describe('GraphHelpers', () => {
   });
 
   it('should match tooltip dimensions at all breakpoints', () => {
+    const { breakpoints } = helpers;
+
     expect(getTooltipDimensions(breakpoints, 'xs')).toMatchSnapshot('xs tooltip dimensions');
     expect(getTooltipDimensions(breakpoints, 'sm')).toMatchSnapshot('sm tooltip dimensions');
     expect(getTooltipDimensions(breakpoints, 'md')).toMatchSnapshot('md tooltip dimensions');
@@ -71,6 +107,8 @@ describe('GraphHelpers', () => {
   });
 
   it('should match tooltip font sizes at all breakpoints', () => {
+    const { breakpoints } = helpers;
+
     expect(getTooltipFontSize(breakpoints, 'xs')).toMatchSnapshot('xs tooltip font sizes');
     expect(getTooltipFontSize(breakpoints, 'sm')).toMatchSnapshot('sm tooltip font sizes');
     expect(getTooltipFontSize(breakpoints, 'md')).toMatchSnapshot('md tooltip font sizes');

src/common/dateHelpers.js

@@ -2,16 +2,25 @@ import moment from 'moment/moment';
 import { helpers } from './helpers';
 
 const defaultDateTime = (helpers.TEST_MODE && {
-  start: null,
-  end: null
+  start: moment
+    .utc('20190720')
+    .startOf('day')
+    .subtract(30, 'days')
+    .toDate(),
+  end: moment
+    .utc('20190720')
+    .endOf('day')
+    .toDate()
 }) || {
-  start: moment()
+  start: moment
     .utc()
     .startOf('day')
-    .subtract(30, 'days'),
-  end: moment()
+    .subtract(30, 'days')
+    .toDate(),
+  end: moment
     .utc()
     .endOf('day')
+    .toDate()
 };
 
 const dateHelpers = {

src/common/graphHelpers.js

@@ -30,22 +30,22 @@ const zeroedUsageData = (startDate, endDate) => {
 /**
  * Apply label formatting
  *
- * @param cores {number}
- * @param previousCores {number}
+ * @param data {number}
+ * @param previousData {number}
  * @param formattedDate {string}
- * @param socketLabel {string}
+ * @param label {string}
  * @param previousLabel {string}
  * @returns {string}
  */
-const getLabel = ({ cores, previousCores, formattedDate, socketLabel, previousLabel }) => {
-  const prev = cores - previousCores;
-  const label = `${cores} ${socketLabel} ${formattedDate}`;
+const getLabel = ({ data, previousData, formattedDate, label, previousLabel }) => {
+  const previousCount = data - previousData;
+  const updatedLabel = `${data} ${label} ${formattedDate}`;
 
-  if (previousCores === null) {
-    return label;
+  if (previousData === null || previousCount === 0) {
+    return updatedLabel;
   }
 
-  return `${label}\n ${prev > -1 ? '+' : ''}${prev} ${previousLabel}`;
+  return `${updatedLabel}\n ${previousCount > -1 ? '+' : ''}${previousCount} ${previousLabel}`;
 };
 
 /**
@@ -55,31 +55,35 @@ const getLabel = ({ cores, previousCores, formattedDate, socketLabel, previousLa
  * to this format:
  *  { x: 'Jun 1', y: 56, label: '56 Sockets on Jun 1 \r\n +5 from previous day' }
  *
- * @param usage {Array}
+ * @param data {Array}
  * @param startDate {string}
  * @param endDate {string}
- * @param socketLabel {string}
+ * @param label {string}
  * @param previousLabel {string}
  * @returns {Array}
  */
-const convertGraphData = ({ usage, startDate, endDate, socketLabel, previousLabel }) => {
+const convertGraphUsageData = ({ data, startDate, endDate, label, previousLabel }) => {
   let chartData = [];
 
   try {
-    for (let i = 0; i < usage.length; i++) {
+    for (let i = 0; i < data.length; i++) {
       const formattedDate = moment
-        .utc(usage[i][rhelApiTypes.RHSM_API_RESPONSE_PRODUCTS_DATA_DATE])
+        .utc(data[i][rhelApiTypes.RHSM_API_RESPONSE_PRODUCTS_DATA_DATE])
         .format(chartDateFormat);
 
-      const label = getLabel({
-        cores: usage[i][rhelApiTypes.RHSM_API_RESPONSE_PRODUCTS_DATA_CORES],
-        previousCores: i > 0 ? usage[i - 1][rhelApiTypes.RHSM_API_RESPONSE_PRODUCTS_DATA_CORES] : null,
+      const updatedLabel = getLabel({
+        data: data[i][rhelApiTypes.RHSM_API_RESPONSE_PRODUCTS_DATA_SOCKETS],
+        previousData: i > 0 ? data[i - 1][rhelApiTypes.RHSM_API_RESPONSE_PRODUCTS_DATA_SOCKETS] : null,
         formattedDate,
-        socketLabel,
+        label,
         previousLabel
       });
 
-      chartData.push({ x: formattedDate, y: usage[i][rhelApiTypes.RHSM_API_RESPONSE_PRODUCTS_DATA_CORES], label });
+      chartData.push({
+        x: formattedDate,
+        y: data[i][rhelApiTypes.RHSM_API_RESPONSE_PRODUCTS_DATA_SOCKETS],
+        label: updatedLabel
+      });
     }
   } catch (e) {
     if (!helpers.TEST_MODE) {
@@ -128,7 +132,7 @@ const getTooltipFontSize = (breakpoints, currentBreakpoint) => {
 
 const graphHelpers = {
   chartDateFormat,
-  convertGraphData,
+  convertGraphUsageData,
   getGraphHeight,
   getTooltipDimensions,
   getTooltipFontSize,
@@ -139,7 +143,7 @@ export {
   graphHelpers as default,
   graphHelpers,
   chartDateFormat,
-  convertGraphData,
+  convertGraphUsageData,
   getGraphHeight,
   getTooltipDimensions,
   getTooltipFontSize,