fix(graphCardHelpers): issues/180 tooltip show all data facets

* graphCardHelpers, update tooltip display to show all data facets * graphCardSelectors, pass has_data and has_infinite to graphCard * i18n, strings updated
RedHatInsights · May 12, 2020 · d8f106a · d8f106a
1 parent 1404ad1
commit d8f106a
Show file tree

Hide file tree

Showing 8 changed files with 387 additions and 81 deletions.
diff --git a/public/locales/en-US.json b/public/locales/en-US.json
@@ -13,7 +13,9 @@
     "dropdownMonthly": "Monthly",
     "dropdownQuarterly": "Quarterly",
     "dropdownPlaceholder": "Select date range",
-    "noDataLabel": "No data",
+    "infiniteThresholdLabel": "unlimited",
+    "noDataLabel": "no data",
+    "noDataErrorLabel": "No data",
     "dateLabel": "Date",
     "coresLabel": "Cores",
     "socketsLabel": "Sockets",

diff --git a/src/components/graphCard/__tests__/__snapshots__/graphCardHelpers.test.js.snap b/src/components/graphCard/__tests__/__snapshots__/graphCardHelpers.test.js.snap
@@ -18,6 +18,58 @@ Object {
 }
 `;
 
+exports[`GraphCardHelpers getTooltips should return a formatted tooltip based on data and granularity: data display for null and NOT hasData on report 1`] = `
+Object {
+  "daily": "t(curiosity-graph.hypervisorSocketsLabel, [object Object]): t(curiosity-graph.noDataLabel)
+t(curiosity-graph.dateLabel): June 1",
+  "monthly": "t(curiosity-graph.hypervisorSocketsLabel, [object Object]): t(curiosity-graph.noDataLabel)
+t(curiosity-graph.dateLabel): June 2019",
+  "quarterly": "t(curiosity-graph.hypervisorSocketsLabel, [object Object]): t(curiosity-graph.noDataLabel)
+t(curiosity-graph.dateLabel): June 2019",
+  "weekly": "t(curiosity-graph.hypervisorSocketsLabel, [object Object]): t(curiosity-graph.noDataLabel)
+t(curiosity-graph.dateLabel): June 1",
+}
+`;
+
+exports[`GraphCardHelpers getTooltips should return a formatted tooltip based on data and granularity: data display for null and hasData on report 1`] = `
+Object {
+  "daily": "t(curiosity-graph.hypervisorSocketsLabel, [object Object]): 0
+t(curiosity-graph.dateLabel): June 1",
+  "monthly": "t(curiosity-graph.hypervisorSocketsLabel, [object Object]): 0
+t(curiosity-graph.dateLabel): June 2019",
+  "quarterly": "t(curiosity-graph.hypervisorSocketsLabel, [object Object]): 0
+t(curiosity-graph.dateLabel): June 2019",
+  "weekly": "t(curiosity-graph.hypervisorSocketsLabel, [object Object]): 0
+t(curiosity-graph.dateLabel): June 1",
+}
+`;
+
+exports[`GraphCardHelpers getTooltips should return a formatted tooltip based on data and granularity: data display for zero and NOT hasData on report 1`] = `
+Object {
+  "daily": "t(curiosity-graph.hypervisorSocketsLabel, [object Object]): t(curiosity-graph.noDataLabel)
+t(curiosity-graph.dateLabel): June 1",
+  "monthly": "t(curiosity-graph.hypervisorSocketsLabel, [object Object]): t(curiosity-graph.noDataLabel)
+t(curiosity-graph.dateLabel): June 2019",
+  "quarterly": "t(curiosity-graph.hypervisorSocketsLabel, [object Object]): t(curiosity-graph.noDataLabel)
+t(curiosity-graph.dateLabel): June 2019",
+  "weekly": "t(curiosity-graph.hypervisorSocketsLabel, [object Object]): t(curiosity-graph.noDataLabel)
+t(curiosity-graph.dateLabel): June 1",
+}
+`;
+
+exports[`GraphCardHelpers getTooltips should return a formatted tooltip based on data and granularity: data display for zero and hasData on report 1`] = `
+Object {
+  "daily": "t(curiosity-graph.hypervisorSocketsLabel, [object Object]): 0
+t(curiosity-graph.dateLabel): June 1",
+  "monthly": "t(curiosity-graph.hypervisorSocketsLabel, [object Object]): 0
+t(curiosity-graph.dateLabel): June 2019",
+  "quarterly": "t(curiosity-graph.hypervisorSocketsLabel, [object Object]): 0
+t(curiosity-graph.dateLabel): June 2019",
+  "weekly": "t(curiosity-graph.hypervisorSocketsLabel, [object Object]): 0
+t(curiosity-graph.dateLabel): June 1",
+}
+`;
+
 exports[`GraphCardHelpers getTooltips should return a formatted tooltip based on data and granularity: granularity data display 1`] = `
 Object {
   "daily": "t(curiosity-graph.thresholdLabel): 100
@@ -41,10 +93,62 @@ t(curiosity-graph.dateLabel): June 1",
 
 exports[`GraphCardHelpers getTooltips should return a formatted tooltip based on data and granularity: no data granularity data display 1`] = `
 Object {
-  "daily": "t(curiosity-graph.noDataLabel)",
-  "monthly": "t(curiosity-graph.noDataLabel)",
-  "quarterly": "t(curiosity-graph.noDataLabel)",
-  "weekly": "t(curiosity-graph.noDataLabel)",
+  "daily": "t(curiosity-graph.noDataErrorLabel)",
+  "monthly": "t(curiosity-graph.noDataErrorLabel)",
+  "quarterly": "t(curiosity-graph.noDataErrorLabel)",
+  "weekly": "t(curiosity-graph.noDataErrorLabel)",
+}
+`;
+
+exports[`GraphCardHelpers getTooltips should return a formatted tooltip based on data and granularity: threshold display for null and NOT hasInfinite on threshold 1`] = `
+Object {
+  "daily": "t(curiosity-graph.thresholdLabel): t(curiosity-graph.noDataLabel)
+t(curiosity-graph.dateLabel): June 1",
+  "monthly": "t(curiosity-graph.thresholdLabel): t(curiosity-graph.noDataLabel)
+t(curiosity-graph.dateLabel): June 2019",
+  "quarterly": "t(curiosity-graph.thresholdLabel): t(curiosity-graph.noDataLabel)
+t(curiosity-graph.dateLabel): June 2019",
+  "weekly": "t(curiosity-graph.thresholdLabel): t(curiosity-graph.noDataLabel)
+t(curiosity-graph.dateLabel): June 1",
+}
+`;
+
+exports[`GraphCardHelpers getTooltips should return a formatted tooltip based on data and granularity: threshold display for null and hasInfinite on threshold 1`] = `
+Object {
+  "daily": "t(curiosity-graph.thresholdLabel): t(curiosity-graph.infiniteThresholdLabel)
+t(curiosity-graph.dateLabel): June 1",
+  "monthly": "t(curiosity-graph.thresholdLabel): t(curiosity-graph.infiniteThresholdLabel)
+t(curiosity-graph.dateLabel): June 2019",
+  "quarterly": "t(curiosity-graph.thresholdLabel): t(curiosity-graph.infiniteThresholdLabel)
+t(curiosity-graph.dateLabel): June 2019",
+  "weekly": "t(curiosity-graph.thresholdLabel): t(curiosity-graph.infiniteThresholdLabel)
+t(curiosity-graph.dateLabel): June 1",
+}
+`;
+
+exports[`GraphCardHelpers getTooltips should return a formatted tooltip based on data and granularity: threshold display for zero and NOT hasInfinite on threshold 1`] = `
+Object {
+  "daily": "t(curiosity-graph.thresholdLabel): 0
+t(curiosity-graph.dateLabel): June 1",
+  "monthly": "t(curiosity-graph.thresholdLabel): 0
+t(curiosity-graph.dateLabel): June 2019",
+  "quarterly": "t(curiosity-graph.thresholdLabel): 0
+t(curiosity-graph.dateLabel): June 2019",
+  "weekly": "t(curiosity-graph.thresholdLabel): 0
+t(curiosity-graph.dateLabel): June 1",
+}
+`;
+
+exports[`GraphCardHelpers getTooltips should return a formatted tooltip based on data and granularity: threshold display for zero and hasInfinite on threshold 1`] = `
+Object {
+  "daily": "t(curiosity-graph.thresholdLabel): t(curiosity-graph.infiniteThresholdLabel)
+t(curiosity-graph.dateLabel): June 1",
+  "monthly": "t(curiosity-graph.thresholdLabel): t(curiosity-graph.infiniteThresholdLabel)
+t(curiosity-graph.dateLabel): June 2019",
+  "quarterly": "t(curiosity-graph.thresholdLabel): t(curiosity-graph.infiniteThresholdLabel)
+t(curiosity-graph.dateLabel): June 2019",
+  "weekly": "t(curiosity-graph.thresholdLabel): t(curiosity-graph.infiniteThresholdLabel)
+t(curiosity-graph.dateLabel): June 1",
 }
 `;
 

diff --git a/src/components/graphCard/__tests__/graphCardHelpers.test.js b/src/components/graphCard/__tests__/graphCardHelpers.test.js
@@ -48,10 +48,54 @@ describe('GraphCardHelpers', () => {
     itemsByKey.hypervisorSockets = { x: 0, y: 50, date: '2019-06-01T00:00:00Z' };
     itemsByKey.physicalSockets = { x: 0, y: 50, date: '2019-06-01T00:00:00Z' };
     itemsByKey.threshold = { x: 0, y: 100, date: '2019-06-01T00:00:00Z' };
-
     expect({ daily: daily(), weekly: weekly(), monthly: monthly(), quarterly: quarterly() }).toMatchSnapshot(
       'granularity data display'
     );
+
+    delete itemsByKey.threshold;
+    delete itemsByKey.physicalSockets;
+
+    itemsByKey.hypervisorSockets = { x: 0, y: 0, date: '2019-06-01T00:00:00Z', hasData: true };
+    expect({ daily: daily(), weekly: weekly(), monthly: monthly(), quarterly: quarterly() }).toMatchSnapshot(
+      'data display for zero and hasData on report'
+    );
+
+    itemsByKey.hypervisorSockets = { x: 0, y: 0, date: '2019-06-01T00:00:00Z', hasData: false };
+    expect({ daily: daily(), weekly: weekly(), monthly: monthly(), quarterly: quarterly() }).toMatchSnapshot(
+      'data display for zero and NOT hasData on report'
+    );
+
+    itemsByKey.hypervisorSockets = { x: 0, y: null, date: '2019-06-01T00:00:00Z', hasData: true };
+    expect({ daily: daily(), weekly: weekly(), monthly: monthly(), quarterly: quarterly() }).toMatchSnapshot(
+      'data display for null and hasData on report'
+    );
+
+    itemsByKey.hypervisorSockets = { x: 0, y: null, date: '2019-06-01T00:00:00Z', hasData: false };
+    expect({ daily: daily(), weekly: weekly(), monthly: monthly(), quarterly: quarterly() }).toMatchSnapshot(
+      'data display for null and NOT hasData on report'
+    );
+
+    delete itemsByKey.hypervisorSockets;
+
+    itemsByKey.threshold = { x: 0, y: 0, date: '2019-06-01T00:00:00Z', hasInfinite: true };
+    expect({ daily: daily(), weekly: weekly(), monthly: monthly(), quarterly: quarterly() }).toMatchSnapshot(
+      'threshold display for zero and hasInfinite on threshold'
+    );
+
+    itemsByKey.threshold = { x: 0, y: 0, date: '2019-06-01T00:00:00Z', hasInfinite: false };
+    expect({ daily: daily(), weekly: weekly(), monthly: monthly(), quarterly: quarterly() }).toMatchSnapshot(
+      'threshold display for zero and NOT hasInfinite on threshold'
+    );
+
+    itemsByKey.threshold = { x: 0, y: null, date: '2019-06-01T00:00:00Z', hasInfinite: true };
+    expect({ daily: daily(), weekly: weekly(), monthly: monthly(), quarterly: quarterly() }).toMatchSnapshot(
+      'threshold display for null and hasInfinite on threshold'
+    );
+
+    itemsByKey.threshold = { x: 0, y: null, date: '2019-06-01T00:00:00Z', hasInfinite: false };
+    expect({ daily: daily(), weekly: weekly(), monthly: monthly(), quarterly: quarterly() }).toMatchSnapshot(
+      'threshold display for null and NOT hasInfinite on threshold'
+    );
   });
 
   /**

diff --git a/src/components/graphCard/graphCardHelpers.js b/src/components/graphCard/graphCardHelpers.js
@@ -78,18 +78,23 @@ const getTooltips = ({ itemsByKey, granularity, product = '' }) => {
       })}`;
     }
 
-    if (itemsByKey[key].y) {
-      if (/^threshold/.test(key)) {
-        thresholdString = `${translate(`curiosity-graph.thresholdLabel`)}: ${itemsByKey[key].y}\n`;
-      } else {
-        dataFacets.push(`${translate(`curiosity-graph.${key}Label`, { product })}: ${itemsByKey[key].y}\n`);
-      }
+    if (/^threshold/.test(key)) {
+      const thresholdStringValue =
+        (itemsByKey[key].hasInfinite && translate('curiosity-graph.infiniteThresholdLabel')) ||
+        (itemsByKey[key].y ?? translate('curiosity-graph.noDataLabel'));
+
+      thresholdString = `${translate(`curiosity-graph.thresholdLabel`)}: ${thresholdStringValue}\n`;
+    } else {
+      const dataFactsValue =
+        (itemsByKey[key].hasData === false && translate('curiosity-graph.noDataLabel')) || itemsByKey[key].y || 0;
+
+      dataFacets.push(`${translate(`curiosity-graph.${key}Label`, { product })}: ${dataFactsValue}\n`);
     }
   });
 
   return (
     ((thresholdString || dataFacets.length) && `${thresholdString}${dataFacets.join('')}${dateString}`.trim()) ||
-    translate('curiosity-graph.noDataLabel')
+    translate('curiosity-graph.noDataErrorLabel')
   );
 };
 

diff --git a/src/components/i18n/__tests__/__snapshots__/i18n.test.js.snap b/src/components/i18n/__tests__/__snapshots__/i18n.test.js.snap
@@ -49,7 +49,16 @@ msgstr \\"\\"
 msgid \\"curiosity-graph.dropdownWeekly\\"
 msgstr \\"\\"
 
-#: src/components/graphCard/graphCardHelpers.js:92
+#: src/components/graphCard/graphCardHelpers.js:83
+msgid \\"curiosity-graph.infiniteThresholdLabel\\"
+msgstr \\"\\"
+
+#: src/components/graphCard/graphCardHelpers.js:97
+msgid \\"curiosity-graph.noDataErrorLabel\\"
+msgstr \\"\\"
+
+#: src/components/graphCard/graphCardHelpers.js:84
+#: src/components/graphCard/graphCardHelpers.js:89
 msgid \\"curiosity-graph.noDataLabel\\"
 msgstr \\"\\"
 
@@ -58,7 +67,7 @@ msgid \\"curiosity-graph.socketsHeading\\"
 msgstr \\"\\"
 
 #: src/components/graphCard/graphCard.js:134
-#: src/components/graphCard/graphCardHelpers.js:83
+#: src/components/graphCard/graphCardHelpers.js:86
 msgid \\"curiosity-graph.thresholdLabel\\"
 msgstr \\"\\"