Environment Sync, Dev to Stage (CI/QA-beta to Prod-beta) PF4 requested updates

.env

@@ -28,4 +28,6 @@ REACT_APP_INCLUDE_CONTENT_BODY=<esi:include src="${UI_DEPLOY_PATH_PREFIX}/apps/c
 REACT_APP_SERVICES_RHSM_VERSION=/api/rhsm-subscriptions/v1/version
 REACT_APP_SERVICES_RHSM_REPORT=/api/rhsm-subscriptions/v1/tally/products/
 REACT_APP_SERVICES_RHSM_CAPACITY=/api/rhsm-subscriptions/v1/capacity/products/
+REACT_APP_SERVICES_RHSM_INVENTORY=/api/rhsm-subscriptions/v1/hosts/products/
+REACT_APP_SERVICES_RHSM_INVENTORY_GUESTS=/api/rhsm-subscriptions/v1/hosts/{0}/guests
 REACT_APP_SERVICES_RHSM_OPTIN=/api/rhsm-subscriptions/v1/opt-in

.env.development

@@ -10,4 +10,6 @@ REACT_APP_CONFIG_SERVICE_LOCALES_PATH=./locales/{{lng}}.json
 REACT_APP_SERVICES_RHSM_VERSION=http://localhost:5000/api/rhsm-subscriptions/v1/version
 REACT_APP_SERVICES_RHSM_REPORT=http://localhost:5000/api/rhsm-subscriptions/v1/tally/products/
 REACT_APP_SERVICES_RHSM_CAPACITY=http://localhost:5000/api/rhsm-subscriptions/v1/capacity/products/
+REACT_APP_SERVICES_RHSM_INVENTORY=http://localhost:5000/api/rhsm-subscriptions/v1/hosts/products/
+REACT_APP_SERVICES_RHSM_INVENTORY_GUESTS=//localhost:5000/api/rhsm-subscriptions/v1/hosts/{0}/guests
 REACT_APP_SERVICES_RHSM_OPTIN=http://localhost:5000/api/rhsm-subscriptions/v1/opt-in

.env.proxy

@@ -14,4 +14,6 @@ REACT_APP_CONFIG_SERVICE_LOCALES_PATH=/locales/{{lng}}.json
 REACT_APP_SERVICES_RHSM_VERSION=/api/rhsm-subscriptions/v1/version
 REACT_APP_SERVICES_RHSM_REPORT=/api/rhsm-subscriptions/v1/tally/products/
 REACT_APP_SERVICES_RHSM_CAPACITY=/api/rhsm-subscriptions/v1/capacity/products/
+REACT_APP_SERVICES_RHSM_INVENTORY=/api/rhsm-subscriptions/v1/hosts/products/
+REACT_APP_SERVICES_RHSM_INVENTORY_GUESTS=/api/rhsm-subscriptions/v1/hosts/{0}/guests
 REACT_APP_SERVICES_RHSM_OPTIN=/api/rhsm-subscriptions/v1/opt-in

CONTRIBUTING.md

@@ -192,6 +192,19 @@ Once you have made the dotenv file and/or changes, like the below "debug" flags,
 
 *Any changes you make to the `.env.local` file should be ignored with `.gitignore`.*
 
+
+##### Local CSS/Styling display vs Environments
+The default context for starting the local development run with 
+   ```
+   $ yarn start
+   ```
+Comes with a caveat, it uses the [Platform Chrome](https://github.com/RedHatInsights/insights-chrome) CI/master branch as its basis. What
+this means is that potential styling changes will affect it, or not depending on recent updates. If styling is looking odd/off, or you
+simply want to use the production styling update the NPM script branch parameter, line 63. Simply change `master` to something like `prod-stable`.
+   ```
+   "dev:chrome": "sh ./scripts/dev.chrome.sh -b master"
+   ```
+
 ##### Graph display
 You can apply a date override during **local development** (using `$ yarn start`) by adding the following line to your `.env.local` file.
    ```

package.json

@@ -60,7 +60,7 @@
     "build:js": "react-scripts build",
     "build:post": "bash ./scripts/post.sh",
     "build:pre": "bash ./scripts/pre.sh",
-    "dev:chrome": "sh ./scripts/dev.chrome.sh",
+    "dev:chrome": "sh ./scripts/dev.chrome.sh -b master",
     "release": "standard-version",
     "start": "run-s dev:chrome; run-p -l api:dev start:js",
     "start:js": "react-scripts start",
@@ -76,60 +76,59 @@
     "test:local": "react-scripts test --env=jsdom --roots=./src"
   },
   "dependencies": {
-    "@patternfly/patternfly": "2.71.6",
-    "@patternfly/react-charts": "5.3.19",
-    "@patternfly/react-core": "3.153.13",
-    "@patternfly/react-icons": "3.15.16",
-    "@patternfly/react-styles": "3.7.13",
-    "@patternfly/react-tokens": "2.8.13",
-    "@redhat-cloud-services/frontend-components": "1.0.24",
-    "@redhat-cloud-services/frontend-components-notifications": "1.0.3",
-    "@redhat-cloud-services/frontend-components-utilities": "1.0.3",
+    "@patternfly/patternfly": "4.16.7",
+    "@patternfly/react-charts": "6.5.4",
+    "@patternfly/react-core": "4.23.1",
+    "@patternfly/react-icons": "4.4.2",
+    "@patternfly/react-styles": "4.4.2",
+    "@patternfly/react-tokens": "4.5.2",
+    "@redhat-cloud-services/frontend-components": "2.1.1",
+    "@redhat-cloud-services/frontend-components-notifications": "2.1.0",
+    "@redhat-cloud-services/frontend-components-utilities": "2.1.0",
     "axios": "^0.19.2",
     "c3": "^0.7.15",
     "classnames": "^2.2.6",
-    "i18next": "^19.4.4",
+    "i18next": "^19.4.5",
     "i18next-xhr-backend": "^3.2.2",
     "js-cookie": "^2.2.1",
     "locale-code": "^2.0.2",
     "lodash": "^4.17.15",
-    "moment": "^2.25.3",
+    "moment": "^2.26.0",
     "node-sass": "^4.14.1",
-    "numbro": "^2.2.0",
     "prop-types": "^15.7.2",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
-    "react-i18next": "^11.4.0",
+    "react-i18next": "^11.5.0",
     "react-redux": "^7.2.0",
-    "react-router": "^5.1.2",
-    "react-router-dom": "^5.1.2",
+    "react-router": "^5.2.0",
+    "react-router-dom": "^5.2.0",
     "react-scripts": "3.4.1",
     "redux": "^4.0.5",
     "redux-logger": "^3.0.6",
     "redux-promise-middleware": "^6.1.2",
     "redux-thunk": "^2.3.0",
     "reselect": "^4.0.0",
-    "victory": "^34.2.0",
-    "victory-core": "^34.2.0",
-    "victory-legend": "^34.2.0"
+    "victory": "^34.3.12",
+    "victory-core": "^34.3.12",
+    "victory-legend": "^34.3.12"
   },
   "devDependencies": {
     "apidoc-mock": "^3.0.2",
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.2",
-    "enzyme-to-json": "^3.4.4",
+    "enzyme-to-json": "^3.5.0",
     "eslint-config-airbnb": "^18.1.0",
     "eslint-config-prettier": "^6.11.0",
-    "eslint-plugin-import": "^2.20.2",
-    "eslint-plugin-jest": "^23.9.0",
-    "eslint-plugin-jsdoc": "^24.0.6",
+    "eslint-plugin-import": "^2.21.2",
+    "eslint-plugin-jest": "^23.13.2",
+    "eslint-plugin-jsdoc": "^27.0.5",
     "eslint-plugin-json": "^2.1.1",
     "eslint-plugin-jsx-a11y": "^6.2.3",
     "eslint-plugin-prettier": "^3.1.3",
-    "eslint-plugin-react": "^7.19.0",
-    "eslint-plugin-react-hooks": "^4.0.0",
+    "eslint-plugin-react": "^7.20.0",
+    "eslint-plugin-react-hooks": "^4.0.4",
     "express": "^4.17.1",
-    "gettext-extractor": "^3.5.2",
+    "glob": "^7.1.6",
     "moxios": "^0.4.0",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.0.5",

public/locales/en-US.json

@@ -19,21 +19,26 @@
     "noDataErrorLabel": "No data",
     "dateLabel": "Date",
     "coresLabel": "Cores",
-    "coresLegendTooltip": "Lorem ipsum dolor sit, cores.",
+    "coresLegendTooltip": "{{product}} CPU usage, per CPU core.",
     "socketsLabel": "Sockets",
-    "socketsLegendTooltip": "Lorem ipsum dolor sit, sockets.",
+    "socketsLegendTooltip": "{{product}} CPU usage, per CPU socket pair.",
     "cloudSocketsLabel": "Public cloud",
-    "cloudSocketsLegendTooltip": "Lorem ipsum dolor sit, cloudSockets.",
+    "cloudSocketsLegendTooltip": "Public cloud {{product}} CPU usage, 1 CPU socket per instance.",
     "hypervisorCoresLabel": "Virtualized cores",
-    "hypervisorCoresLegendTooltip": "Lorem ipsum dolor sit, hypervisorCores.",
+    "hypervisorCoresLegendTooltip": "{{product}} CPU usage, per CPU core.",
     "hypervisorSocketsLabel": "Virtualized {{product}}",
-    "hypervisorSocketsLegendTooltip": "Lorem ipsum dolor sit, hypervisorSockets.",
+    "hypervisorSocketsLegendTooltip": "{{product}} CPU socket usage, per socket pair.",
+    "hypervisorSocketsLegendTooltip_RHEL": "Virtualized {{product}} CPU usage, per socket. Hypervisor guest usage with known host-guest mappings (such as multi-guest VDC subscriptions), per socket pair of the hypervisor host, using the same method as physical {{product}}.",
     "physicalCoresLabel": "Physical cores",
-    "physicalCoresLegendTooltip": "Lorem ipsum dolor sit, physicalCores.",
+    "physicalCoresLegendTooltip": "{{product}} CPU usage, per CPU core.",
     "physicalSocketsLabel": "Physical {{product}}",
-    "physicalSocketsLegendTooltip": "Lorem ipsum dolor sit, physicalSockets.",
+    "physicalSocketsLegendTooltip": "{{product}} CPU socket usage, per socket pair.",
+    "physicalSocketsLegendTooltip_RHEL": "Physical {{product}} CPU usage, per socket pair. Each system's socket count is rounded upwards to the next even number.",
     "thresholdLabel": "Subscription threshold",
-    "thresholdLegendTooltip": "Lorem ipsum dolor sit, threshold.",
+    "thresholdLegendTooltip": "Maximum capacity, based on total {{product}} subscriptions in this account.",
+    "thresholdLegendTooltip_RHEL": "Maximum capacity, as CPU sockets, based on total {{product}} subscriptions in this account.",
+    "thresholdCoresLegendTooltip_OpenShift": "Maximum capacity, as CPU cores, based on total {{product}} subscriptions in this account.",
+    "thresholdSocketsLegendTooltip_OpenShift": "Maximum capacity, as CPU sockets, based on total {{product}} subscriptions in this account.",
     "tooltipSummary": "Your subscription data facets. With one level of column and row headers."
   },
   "curiosity-toolbar": {
@@ -66,16 +71,6 @@
     "tourTitleImageAlt": "Ready to get started example graph.",
     "tourDescription": "We'll walk you through each step, and include insight into how Red Hat collects and uses subscription data."
   },
-  "curiosity-tour": {
-    "emptyStateIconAlt": "{{appName}} logo",
-    "emptyStateTitle": "{{appName}} is an early access beta",
-    "emptyStateDescription": "{{appName}} helps you understand your total subscription usage and capacity over time.",
-    "emptyStateDescriptionTour": "Take a quick tour to learn more.",
-    "emptyStateDescriptionExtended": "If you are interested in trying {{appName}}, your Red Hat account team can help.",
-    "emptyStateButton": "Take a tour",
-    "emptyStateLinkLearnMore": "Learn more",
-    "emptyStateLinkContactUs": "Contact us"
-  },
   "curiosity-view": {
     "openshift": "Red Hat OpenShift",
     "rhel": "Red Hat Enterprise Linux"

scripts/dev.chrome.sh

@@ -94,8 +94,14 @@ buildChrome()
 
   printf "${YELLOW}dotenv includes ...${NOCOLOR}"
 
-  HEADER_CONTENT=$(node -pe "require('fs').readFileSync('${SNIPPET_HEAD}').toString().replace(/\n/g, '').concat('<style>.pf-c-page__sidebar .ins-c-skeleton,.pf-c-page__sidebar .ins-c-navigation__header{display:none}</style>')")
-  BODY_CONTENT=$(node -pe "require('fs').readFileSync('${SNIPPET_BODY}').toString().replace(/\n/g,'').replace(/Logging in\.\.\./i, 'Development')")
+  HEADER_CONTENT_STR="require('fs').readFileSync('${SNIPPET_HEAD}').toString().replace(/\n/g, '').concat('<style>"
+  HEADER_CONTENT_STR+=".pf-c-page__sidebar * {display:none !important;}"
+  HEADER_CONTENT_STR+=".pf-m-user.pf-m-user-skeleton * {display:none;}"
+  HEADER_CONTENT_STR+=".pf-m-user.pf-m-user-skeleton:before {content:\"Development\";}"
+  HEADER_CONTENT_STR+="</style>')"
+
+  HEADER_CONTENT=$(node -pe "${HEADER_CONTENT_STR}")
+  BODY_CONTENT=$(node -pe "require('fs').readFileSync('${SNIPPET_BODY}').toString().replace(/\n/g,'')")
 
   if [[ ! -z "$HEADER_CONTENT" ]] && [[ ! -z "$BODY_CONTENT" ]]; then
     echo "\nREACT_APP_INCLUDE_CONTENT_HEADER=${HEADER_CONTENT}\nREACT_APP_INCLUDE_CONTENT_BODY=${BODY_CONTENT}\n" > ./.env.development.local
@@ -125,9 +131,10 @@ buildChrome()
   HEAD=./public/apps/chrome/snippets/head.html
   BODY=./public/apps/chrome/snippets/body.html
 
-  while getopts u option;
+  while getopts b:u option;
     do
       case $option in
+        b ) BRANCH="$OPTARG";;
         u ) UPDATE=true;;
       esac
   done

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

@@ -14,6 +14,8 @@ Object {
   "UI_DISPLAY_CONFIG_NAME": "Subscription Watch",
   "UI_DISPLAY_NAME": "Subscription Watch",
   "UI_DISPLAY_START_NAME": "Subscription Watch",
+  "UI_LOCALE_DEFAULT": "en-US",
+  "UI_LOCALE_DEFAULT_DESC": "English",
   "UI_LOGGER_ID": "curiosity",
   "UI_NAME": "subscriptions",
   "UI_PATH": "/",
@@ -43,6 +45,8 @@ Object {
   "UI_DISPLAY_CONFIG_NAME": "Subscription Watch",
   "UI_DISPLAY_NAME": "Subscription Watch",
   "UI_DISPLAY_START_NAME": "Subscription Watch",
+  "UI_LOCALE_DEFAULT": "en-US",
+  "UI_LOCALE_DEFAULT_DESC": "English",
   "UI_LOGGER_ID": "curiosity",
   "UI_NAME": "subscriptions",
   "UI_PATH": "/",
@@ -72,6 +76,8 @@ Object {
   "UI_DISPLAY_CONFIG_NAME": "Subscription Watch",
   "UI_DISPLAY_NAME": "Subscription Watch",
   "UI_DISPLAY_START_NAME": "Subscription Watch",
+  "UI_LOCALE_DEFAULT": "en-US",
+  "UI_LOCALE_DEFAULT_DESC": "English",
   "UI_LOGGER_ID": "curiosity",
   "UI_NAME": "subscriptions",
   "UI_PATH": "/",

src/common/dateHelpers.js

@@ -14,9 +14,9 @@ const getCurrentDate = () =>
  * Set a date range based on a granularity type.
  *
  * @param {object} params
- * @property {Date} date Start date, typically the current date.
- * @property {number} subtract Number of granularity type to subtract from the current date.
- * @property {string} measurement Granularity type.
+ * @param {Date} params.date Start date, typically the current date.
+ * @param {number} params.subtract Number of granularity type to subtract from the current date.
+ * @param {string} params.measurement Granularity type.
  * @returns {{endDate: Date, startDate: Date}}
  */
 const setRangedDateTime = ({ date, subtract, measurement }) => ({

src/common/helpers.js

@@ -138,6 +138,20 @@ const UI_DISPLAY_CONFIG_NAME = process.env.REACT_APP_UI_DISPLAY_CONFIG_NAME;
  */
 const UI_DISPLAY_START_NAME = process.env.REACT_APP_UI_DISPLAY_START_NAME;
 
+/**
+ * UI locale default.
+ *
+ * @type {string}
+ */
+const UI_LOCALE_DEFAULT = process.env.REACT_APP_CONFIG_SERVICE_LOCALES_DEFAULT_LNG;
+
+/**
+ * UI locale default description.
+ *
+ * @type {string}
+ */
+const UI_LOCALE_DEFAULT_DESC = process.env.REACT_APP_CONFIG_SERVICE_LOCALES_DEFAULT_LNG_DESC;
+
 /**
  * UI state logging name/id.
  * See dotenv config files for updating.
@@ -212,6 +226,8 @@ const helpers = {
   UI_DISPLAY_NAME,
   UI_DISPLAY_CONFIG_NAME,
   UI_DISPLAY_START_NAME,
+  UI_LOCALE_DEFAULT,
+  UI_LOCALE_DEFAULT_DESC,
   UI_LOGGER_ID,
   UI_NAME,
   UI_PATH,

src/components/app.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { NotificationsPortal } from '@redhat-cloud-services/frontend-components-notifications';
+import { NotificationsPortal } from '@redhat-cloud-services/frontend-components-notifications/cjs';
 import { connectRouter, reduxActions } from '../redux';
 import { helpers } from '../common/helpers';
 import { I18n } from './i18n/i18n';