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

* graphCardHelpers, update tooltip to display all data facets * graphCardSelectors, pass has_data and has_infinite to graphCard * i18n, strings updated
RedHatInsights · May 20, 2020 · 5cc2bc9 · 5cc2bc9
1 parent 5d70f83
commit 5cc2bc9
Show file tree

Hide file tree

Showing 8 changed files with 555 additions and 94 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,33 +18,246 @@ Object {
 }
 `;
 
-exports[`GraphCardHelpers getTooltips should return a formatted tooltip based on data and granularity: granularity data display 1`] = `
+exports[`GraphCardHelpers getTooltips should return a formatted tooltip based on data and granularity: data display > 0 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 > 0 and UNDEFINED hasData on report 1`] = `
+Object {
+  "daily": "t(curiosity-graph.hypervisorSocketsLabel, [object Object]): 50
+t(curiosity-graph.dateLabel): June 1",
+  "monthly": "t(curiosity-graph.hypervisorSocketsLabel, [object Object]): 50
+t(curiosity-graph.dateLabel): June 2019",
+  "quarterly": "t(curiosity-graph.hypervisorSocketsLabel, [object Object]): 50
+t(curiosity-graph.dateLabel): June 2019",
+  "weekly": "t(curiosity-graph.hypervisorSocketsLabel, [object Object]): 50
+t(curiosity-graph.dateLabel): June 1",
+}
+`;
+
+exports[`GraphCardHelpers getTooltips should return a formatted tooltip based on data and granularity: data display > 0 and hasData on report 1`] = `
+Object {
+  "daily": "t(curiosity-graph.hypervisorSocketsLabel, [object Object]): 50
+t(curiosity-graph.dateLabel): June 1",
+  "monthly": "t(curiosity-graph.hypervisorSocketsLabel, [object Object]): 50
+t(curiosity-graph.dateLabel): June 2019",
+  "quarterly": "t(curiosity-graph.hypervisorSocketsLabel, [object Object]): 50
+t(curiosity-graph.dateLabel): June 2019",
+  "weekly": "t(curiosity-graph.hypervisorSocketsLabel, [object Object]): 50
+t(curiosity-graph.dateLabel): June 1",
+}
+`;
+
+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 UNDEFINED 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 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 UNDEFINED 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 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: no data granularity data display 1`] = `
+Object {
+  "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 > 0 and NOT hasInfinite on threshold 1`] = `
 Object {
   "daily": "t(curiosity-graph.thresholdLabel): 100
-t(curiosity-graph.hypervisorSocketsLabel, [object Object]): 50
-t(curiosity-graph.physicalSocketsLabel, [object Object]): 50
 t(curiosity-graph.dateLabel): June 1",
   "monthly": "t(curiosity-graph.thresholdLabel): 100
-t(curiosity-graph.hypervisorSocketsLabel, [object Object]): 50
-t(curiosity-graph.physicalSocketsLabel, [object Object]): 50
 t(curiosity-graph.dateLabel): June 2019",
   "quarterly": "t(curiosity-graph.thresholdLabel): 100
-t(curiosity-graph.hypervisorSocketsLabel, [object Object]): 50
-t(curiosity-graph.physicalSocketsLabel, [object Object]): 50
 t(curiosity-graph.dateLabel): June 2019",
   "weekly": "t(curiosity-graph.thresholdLabel): 100
-t(curiosity-graph.hypervisorSocketsLabel, [object Object]): 50
-t(curiosity-graph.physicalSocketsLabel, [object Object]): 50
 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`] = `
+exports[`GraphCardHelpers getTooltips should return a formatted tooltip based on data and granularity: threshold display for > 0 and UNDEFINED hasInfinite on threshold 1`] = `
+Object {
+  "daily": "t(curiosity-graph.thresholdLabel): 100
+t(curiosity-graph.dateLabel): June 1",
+  "monthly": "t(curiosity-graph.thresholdLabel): 100
+t(curiosity-graph.dateLabel): June 2019",
+  "quarterly": "t(curiosity-graph.thresholdLabel): 100
+t(curiosity-graph.dateLabel): June 2019",
+  "weekly": "t(curiosity-graph.thresholdLabel): 100
+t(curiosity-graph.dateLabel): June 1",
+}
+`;
+
+exports[`GraphCardHelpers getTooltips should return a formatted tooltip based on data and granularity: threshold display for > 0 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 null and NOT hasInfinite on threshold 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.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 UNDEFINED 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 UNDEFINED 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
@@ -45,12 +45,102 @@ describe('GraphCardHelpers', () => {
       'no data granularity data display'
     );
 
-    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' };
+    // report value > 0
+    itemsByKey.hypervisorSockets = { x: 0, y: 50, date: '2019-06-01T00:00:00Z', hasData: undefined };
+    expect({ daily: daily(), weekly: weekly(), monthly: monthly(), quarterly: quarterly() }).toMatchSnapshot(
+      'data display > 0 and UNDEFINED hasData on report'
+    );
+
+    itemsByKey.hypervisorSockets = { x: 0, y: 50, date: '2019-06-01T00:00:00Z', hasData: false };
+    expect({ daily: daily(), weekly: weekly(), monthly: monthly(), quarterly: quarterly() }).toMatchSnapshot(
+      'data display > 0 and NOT hasData on report'
+    );
+
+    itemsByKey.hypervisorSockets = { x: 0, y: 50, date: '2019-06-01T00:00:00Z', hasData: true };
+    expect({ daily: daily(), weekly: weekly(), monthly: monthly(), quarterly: quarterly() }).toMatchSnapshot(
+      'data display > 0 and hasData on report'
+    );
+
+    // report value = 0
+    itemsByKey.hypervisorSockets = { x: 0, y: 0, date: '2019-06-01T00:00:00Z', hasData: undefined };
+    expect({ daily: daily(), weekly: weekly(), monthly: monthly(), quarterly: quarterly() }).toMatchSnapshot(
+      'data display for zero and UNDEFINED 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: 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'
+    );
+
+    // report value = null
+    itemsByKey.hypervisorSockets = { x: 0, y: null, date: '2019-06-01T00:00:00Z', hasData: undefined };
+    expect({ daily: daily(), weekly: weekly(), monthly: monthly(), quarterly: quarterly() }).toMatchSnapshot(
+      'data display for null and UNDEFINED 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'
+    );
+
+    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'
+    );
+
+    delete itemsByKey.hypervisorSockets;
+
+    // threshold value > 0
+    itemsByKey.threshold = { x: 0, y: 100, date: '2019-06-01T00:00:00Z', hasInfinite: undefined };
+    expect({ daily: daily(), weekly: weekly(), monthly: monthly(), quarterly: quarterly() }).toMatchSnapshot(
+      'threshold display for > 0 and UNDEFINED hasInfinite on threshold'
+    );
+
+    itemsByKey.threshold = { x: 0, y: 100, date: '2019-06-01T00:00:00Z', hasInfinite: false };
+    expect({ daily: daily(), weekly: weekly(), monthly: monthly(), quarterly: quarterly() }).toMatchSnapshot(
+      'threshold display for > 0 and NOT hasInfinite on threshold'
+    );
+
+    itemsByKey.threshold = { x: 0, y: 100, date: '2019-06-01T00:00:00Z', hasInfinite: true };
+    expect({ daily: daily(), weekly: weekly(), monthly: monthly(), quarterly: quarterly() }).toMatchSnapshot(
+      'threshold display for > 0 and hasInfinite on threshold'
+    );
+
+    // threshold value = 0
+    itemsByKey.threshold = { x: 0, y: 0, date: '2019-06-01T00:00:00Z', hasInfinite: undefined };
+    expect({ daily: daily(), weekly: weekly(), monthly: monthly(), quarterly: quarterly() }).toMatchSnapshot(
+      'threshold display for zero and UNDEFINED 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: 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'
+    );
+
+    // threshold value = null
+    itemsByKey.threshold = { x: 0, y: null, date: '2019-06-01T00:00:00Z', hasInfinite: undefined };
+    expect({ daily: daily(), weekly: weekly(), monthly: monthly(), quarterly: quarterly() }).toMatchSnapshot(
+      'threshold display for null and UNDEFINED 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'
+    );
 
+    itemsByKey.threshold = { x: 0, y: null, date: '2019-06-01T00:00:00Z', hasInfinite: true };
     expect({ daily: daily(), weekly: weekly(), monthly: monthly(), quarterly: quarterly() }).toMatchSnapshot(
-      'granularity data display'
+      'threshold display for null and hasInfinite on threshold'
     );
   });