feat(productView,graphCard): ent-4366 rhosak multi-graph display (#824)

* build, dist test, spell check dictionary * locale, strings for metric graphCards * chart, Elements, Helpers, Legend, x, y axis label props * chartAxisLabel, allow html for victory charts * chartTooltip, dynamic padding for boundary * config, routes, rhosak product * dateHelpers, isCurrent for rangedMonthly, timestamp formats * graphCard, CardChart deprecated, original components * graphCard, CardChart refactor hooks, tally refactor, metrics * graphCardChartLegend, multiselector hook * graphCardChartTitleTooltip, move out of productView * graphCardChartTooltip, numbro formatting for floats * graphCardContext, settings, hooks for redux action, selectors * graphCardHelpers, chartSettings, numbro formatting * graphCardMetric, Metrics, standalone and combined graph cards * graphCardMetricTotals, card wrapper to display totals * loader, pass skeleton sizes * productView, Openshift, deprecated vs rhosak graph card * redux, graphReducer legend adjustment * styling, graphCard adjustments for standalone metrics
RedHatInsights · Nov 30, 2021 · c8562bd · c8562bd
1 parent 10fb34c
commit c8562bd
Show file tree

Hide file tree

Showing 77 changed files with 3,690 additions and 1,079 deletions.
diff --git a/config/cspell.config.json b/config/cspell.config.json
@@ -15,6 +15,7 @@
     "dismissable",
     "fadein",
     "flyout",
+    "gibibyte",
     "gibibytes",
     "generatedid",
     "HHmmss",

diff --git a/public/locales/en-US.json b/public/locales/en-US.json
@@ -14,6 +14,9 @@
     "cardHeading": "CPU usage",
     "cardHeading_cores": "CPU core usage",
     "cardHeading_sockets": "CPU socket usage",
+    "cardHeading_Instance-hours": "Instance hours",
+    "cardHeading_Storage-gibibytes": "Data storage",
+    "cardHeading_Transfer-gibibytes": "Data transfer",
     "cardHeading_OpenShift Container Platform": "Annual subscriptions",
     "cardHeading_OpenShift-metrics": "On-Demand subscriptions",
     "cardHeading_OpenShift-dedicated-metrics": "On-Demand subscriptions",
@@ -26,12 +29,38 @@
     "cardHeading_Satellite Capsule": "CPU socket usage",
     "cardHeading_Satellite Server": "CPU socket usage",
     "cardHeadingDescription": "...",
+    "cardHeadingDescription_Instance-hours": "Instance hours usage in gibibyte hours.",
+    "cardHeadingDescription_Storage-gibibytes": "Data storage usage in gibibyte hours.",
+    "cardHeadingDescription_Transfer-gibibytes": "Data transfer usage in gibibytes.",
     "cardHeadingDescription_OpenShift Container Platform": "A pre-paid subscription model that offers a designated maximum quota of units within a set time frame.",
     "cardHeadingDescription_OpenShift-metrics": "A subscription model that offers purchasing options to match your usage patterns.",
     "cardHeadingDescription_OpenShift-dedicated-metrics": "A subscription model that offers purchasing options to match your usage patterns.",
+    "cardHeadingMetric_currentTotal_current_Instance-hours": "Today's instance hours",
+    "cardHeadingMetric_currentTotal_Instance-hours": "{{month}}'s instance hours",
+    "cardHeadingMetric_total_Instance-hours": "{{month}}'s instance hours",
+    "cardHeadingMetric_currentTotal_current_Storage-gibibytes": "Today's data storage",
+    "cardHeadingMetric_currentTotal_Storage-gibibytes": "{{month}}'s data storage",
+    "cardHeadingMetric_total_Storage-gibibytes": "{{month}}'s data storage",
+    "cardHeadingMetric_currentTotal_current_Transfer-gibibytes": "Today's data transfer",
+    "cardHeadingMetric_currentTotal_Transfer-gibibytes": "{{month}}'s data transfer",
+    "cardHeadingMetric_total_Transfer-gibibytes": "{{month}}'s data transfer",
+    "cardBodyMetric_currentTotal": "No data",
+    "cardBodyMetric_total": "No data",
+    "cardBodyMetric_currentTotal_Instance-hours": "<0>{{total}}</0> Gibibyte hours",
+    "cardBodyMetric_total_Instance-hours": "<0>{{total}}</0> Gibibyte hours",
+    "cardBodyMetric_currentTotal_Storage-gibibytes": "<0>{{total}}</0> Gibibyte hours",
+    "cardBodyMetric_total_Storage-gibibytes": "<0>{{total}}</0> Gibibyte hours",
+    "cardBodyMetric_currentTotal_Transfer-gibibytes": "<0>{{total}}</0> Gibibytes",
+    "cardBodyMetric_total_Transfer-gibibytes": "<0>{{total}}</0> Gibibytes",
+    "cardFooterMetric": "Last update {{date}}",
+    "label_axisX_Daily": "Day of the Month",
+    "label_axisY_Instance-hours": "Instance hours",
+    "label_axisY_Storage-gibibytes": "Gibibyte hours",
+    "label_axisY_Transfer-gibibytes": "Gibibytes",
     "label_cores": "Cores",
     "label_coreHours": "Core hours",
     "label_instanceHours": "Instance hours",
+    "label_Instance-hours": "Instance hours",
     "label_sockets": "Sockets",
     "label_cloudSockets": "Public cloud",
     "label_hypervisorCores": "Virtualized cores",
@@ -41,11 +70,14 @@
     "label_no": "Data",
     "label_noData": "no data",
     "label_noData_error": "No data",
+    "label_Storage-gibibytes": "Data storage",
     "label_threshold": "Subscription threshold",
     "label_threshold_infinite": "unlimited",
+    "label_Transfer-gibibytes": "Data transfer",
     "legendTooltip_cores": "{{product}} CPU usage, per CPU core.",
     "legendTooltip_coreHours": "{{product}} core hours usage.",
     "legendTooltip_coreHours_OpenShift-dedicated-metrics": "OpenShift Dedicated <0>On-Demand</0> core hour usage.",
+    "legendTooltip_Instance-hours": "Instance hour usage.",
     "legendTooltip_instanceHours_OpenShift-dedicated-metrics": "OpenShift Dedicated <0>On-Demand</0> instance hour usage.",
     "legendTooltip_coreHours_OpenShift-metrics": "OpenShift Container Platform <0>On-Demand</0> core hour usage.",
     "legendTooltip_cloudSockets": "Public cloud {{product}} CPU usage, 1 CPU socket per instance.",
@@ -56,10 +88,12 @@
     "legendTooltip_physicalSockets": "{{product}} CPU socket usage, per socket pair.",
     "legendTooltip_physicalSockets_RHEL": "Physical {{product}} CPU usage, per socket pair. Each system's socket count is rounded upwards to the next even number.",
     "legendTooltip_sockets": "{{product}} CPU usage, per CPU socket pair.",
+    "legendTooltip_Storage-gibibytes": "Data storage usage.",
     "legendTooltip_threshold": "Maximum capacity, based on total {{product}} subscriptions in this account.",
     "legendTooltip_threshold_thresholdSockets_RHEL": "Maximum capacity, as CPU sockets, based on total {{product}} subscriptions in this account.",
     "legendTooltip_threshold_thresholdCores_OpenShift Container Platform": "Maximum capacity, as CPU cores, based on total {{product}} Annual subscriptions in this account.",
     "legendTooltip_threshold_thresholdSockets_OpenShift Container Platform": "Maximum capacity, as CPU sockets, based on total {{product}} Annual subscriptions in this account.",
+    "legendTooltip_Transfer-gibibytes": "Data transfer usage.",
     "tooltipSummary": "Your subscription data facets. With one level of column and row headers."
   },
   "curiosity-inventory": {
@@ -200,6 +234,9 @@
     "title_RHEL": "Red Hat Enterprise Linux",
     "subtitle_RHEL": "Monitor your Red Hat Enterprise Linux usage by physical, virtual, and public cloud sockets. <0>Learn more about {{appName}} reporting</0>",
     "description_RHEL": "Monitor your Red Hat Enterprise Linux usage by physical, virtual, and public cloud sockets.",
+    "title_rhosak": "Red Hat OpenShift Streams for Apache Kafka",
+    "subtitle_rhosak": "Monitor your Apache Kafka usage for On-Demand subscriptions. <0>Learn more about {{appName}} reporting</0>",
+    "description_rhosak": "Monitor your Apache Kafka usage for On-Demand subscriptions.",
     "title_RHEL for ARM": "Red Hat Enterprise Linux for ARM",
     "title_RHEL for IBM Power": "Red Hat Enterprise Linux for IBM Power",
     "title_RHEL for IBM z": "Red Hat Enterprise Linux for IBM z",

diff --git a/src/common/__tests__/__snapshots__/dateHelpers.test.js.snap b/src/common/__tests__/__snapshots__/dateHelpers.test.js.snap
@@ -44,6 +44,12 @@ Object {
     "yearLong": "MMMM YYYY",
     "yearShort": "MMM YYYY",
   },
+  "timestampTimeFormats": Object {
+    "timeLong": "MMMM D h:mm:ss A",
+    "timeShort": "MMM D h:mm A",
+    "yearTimeLong": "MMMM D YYYY h:mm:ss A",
+    "yearTimeShort": "MMM D YYYY h:mm A",
+  },
   "weeklyDateTime": Object {
     "endDate": 2019-07-14T23:59:59.999Z,
     "startDate": 2019-04-21T00:00:00.000Z,
@@ -190,6 +196,7 @@ Object {
     },
     "current": Object {
       "_title": "current",
+      "isCurrent": true,
       "title": "t(curiosity-toolbar.granularityRangedMonthly, {\\"context\\":\\"current\\"})",
       "value": Object {
         "endDate": 2019-07-31T23:59:59.999Z,
@@ -280,6 +287,7 @@ Object {
   "listDateTimeRanges": Array [
     Object {
       "_title": "current",
+      "isCurrent": true,
       "title": "t(curiosity-toolbar.granularityRangedMonthly, {\\"context\\":\\"current\\"})",
       "value": Object {
         "endDate": 2019-07-31T23:59:59.999Z,

diff --git a/src/common/dateHelpers.js b/src/common/dateHelpers.js
@@ -102,6 +102,7 @@ const getRangedMonthDateTime = month => {
   listDateTimeRanges = listDateTimeRanges.reverse();
   listDateTimeRanges[0] = {
     ...listDateTimeRanges[0],
+    isCurrent: true,
     _title: 'current',
     title: translate('curiosity-toolbar.granularityRangedMonthly', { context: 'current' })
   };
@@ -148,6 +149,18 @@ const timestampQuarterFormats = {
   ...timestampMonthFormats
 };
 
+/**
+ * Consistent timestamp time formats.
+ *
+ * @type {{yearTimeShort: string, timeLong: string, yearTimeLong: string, timeShort: string}}
+ */
+const timestampTimeFormats = {
+  timeLong: 'MMMM D h:mm:ss A',
+  yearTimeLong: 'MMMM D YYYY h:mm:ss A',
+  timeShort: 'MMM D h:mm A',
+  yearTimeShort: 'MMM D YYYY h:mm A'
+};
+
 const dateHelpers = {
   getCurrentDate,
   getRangedMonthDateTime,
@@ -161,7 +174,8 @@ const dateHelpers = {
   rangedYearDateTime,
   timestampDayFormats,
   timestampMonthFormats,
-  timestampQuarterFormats
+  timestampQuarterFormats,
+  timestampTimeFormats
 };
 
 export {
@@ -179,5 +193,6 @@ export {
   rangedYearDateTime,
   timestampDayFormats,
   timestampMonthFormats,
-  timestampQuarterFormats
+  timestampQuarterFormats,
+  timestampTimeFormats
 };
diff --git a/src/components/authentication/__tests__/__snapshots__/authentication.test.js.snap b/src/components/authentication/__tests__/__snapshots__/authentication.test.js.snap
@@ -368,6 +368,15 @@ exports[`Authentication Component should return a redirect on 418 error: 418 err
         "path": "/openshift-dedicated",
         "redirect": null,
       },
+      Object {
+        "activateOnError": false,
+        "component": "productView/productView",
+        "disabled": false,
+        "exact": true,
+        "id": "rhosak",
+        "path": "/rhosak",
+        "redirect": null,
+      },
       Object {
         "activateOnError": false,
         "component": "productView/productView",
@@ -507,6 +516,15 @@ exports[`Authentication Component should return a redirect on a specific 403 err
         "path": "/openshift-dedicated",
         "redirect": null,
       },
+      Object {
+        "activateOnError": false,
+        "component": "productView/productView",
+        "disabled": false,
+        "exact": true,
+        "id": "rhosak",
+        "path": "/rhosak",
+        "redirect": null,
+      },
       Object {
         "activateOnError": false,
         "component": "productView/productView",

diff --git a/src/components/chart/__tests__/__snapshots__/chart.test.js.snap b/src/components/chart/__tests__/__snapshots__/chart.test.js.snap
@@ -226,6 +226,7 @@ Array [
           "tooltipDataSetLookUp": Object {},
           "xAxisProps": Object {
             "fixLabelOverlap": true,
+            "label": null,
             "tickFormat": [Function],
             "tickValues": Array [
               1,
@@ -235,6 +236,7 @@ Array [
           "yAxisProps": Array [
             Object {
               "dependentAxis": true,
+              "label": null,
               "orientation": "left",
               "showGrid": true,
               "style": Object {

diff --git a/src/components/chart/__tests__/__snapshots__/chartAxisLabel.test.js.snap b/src/components/chart/__tests__/__snapshots__/chartAxisLabel.test.js.snap
@@ -0,0 +1,55 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ChartAxisLabel Component should handle an undefined coordinate: undefined y 1`] = `
+<g>
+  <foreignObject
+    height="100%"
+    width="100%"
+    x={0}
+    y={0}
+  >
+    <div
+      className="curiosity-chartarea__axis-label-container curiosity-chartarea__axis-label-container-y curiosity-chartarea__axis-label-container-y-1"
+      style={
+        Object {
+          "top": "0px",
+        }
+      }
+      xmlns="http://www.w3.org/1999/xhtml"
+    >
+      <div
+        className="curiosity-chartarea__axis-label-container-content"
+      >
+        lorem ipsum
+      </div>
+    </div>
+  </foreignObject>
+</g>
+`;
+
+exports[`ChartAxisLabel Component should return a basic component: basic 1`] = `
+<g>
+  <foreignObject
+    height="100%"
+    width="100%"
+    x={0}
+    y={0}
+  >
+    <div
+      className="curiosity-chartarea__axis-label-container curiosity-chartarea__axis-label-container-y curiosity-chartarea__axis-label-container-y-0"
+      style={
+        Object {
+          "top": "3px",
+        }
+      }
+      xmlns="http://www.w3.org/1999/xhtml"
+    >
+      <div
+        className="curiosity-chartarea__axis-label-container-content"
+      >
+        hello world
+      </div>
+    </div>
+  </foreignObject>
+</g>
+`;