fix(inventoryList): issues/389 display cloud providers (#467)

* locale, cloud provider strings * openshiftView, rhelView, activate display for cloud providers * inventoryListSelectors, lower case cloud providers for locale context * rhsmServices, update mock with cloud provider * rhsmApiTypes, expand expected inventory data types
RedHatInsights · Oct 22, 2020 · 7d6e550 · 7d6e550
1 parent 1d45186
commit 7d6e550
Show file tree

Hide file tree

Showing 11 changed files with 157 additions and 63 deletions.
diff --git a/public/locales/en-US.json b/public/locales/en-US.json
@@ -47,6 +47,14 @@
     "tableEmptyInventoryTitle": "No results found",
     "tableEmptyInventoryMessage": "No results match the filter criteria. Remove filters or clear all filters to show results.",
     "tableSkeletonAriaLabel": "Loading",
+    "label_numberOfGuests": "<0>{{value}} VMs</0>",
+    "cloudProvider": "{{context}}",
+    "cloudProvider_aws": "AWS",
+    "cloudProvider_azure": "Azure",
+    "cloudProvider_google": "Google",
+    "cloudProvider_ibm": "IBM",
+    "hardwareType": "{{context}}",
+    "hardwareType_cloud": "Public cloud",
     "hardwareType_hypervisor": "Hypervisor",
     "hardwareType_physical": "Physical",
     "hardwareType_virtualized": "Virtual",

diff --git a/src/components/i18n/__tests__/__snapshots__/i18n.test.js.snap b/src/components/i18n/__tests__/__snapshots__/i18n.test.js.snap
@@ -213,10 +213,22 @@ Array [
         "key": "curiosity-inventory.cardHeading",
         "match": "t('curiosity-inventory.cardHeading')",
       },
+      Object {
+        "key": "curiosity-inventory.label",
+        "match": "translate('curiosity-inventory.label', { context: 'numberOfGuests', value: numberOfGuests.value }, [ <PfLabel color=\\"blue\\" /> ])",
+      },
+      Object {
+        "key": "curiosity-inventory.label",
+        "match": "translate('curiosity-inventory.label', { context: 'numberOfGuests', value: numberOfGuests.value }, [ <PfLabel color=\\"blue\\" /> ])",
+      },
       Object {
         "key": "curiosity-inventory.hardwareType",
         "match": "translate('curiosity-inventory.hardwareType', { context: hardwareType.value })",
       },
+      Object {
+        "key": "curiosity-inventory.cloudProvider",
+        "match": "translate('curiosity-inventory.cloudProvider', { context: cloudProvider.value })",
+      },
     ],
   },
   Object {
@@ -320,10 +332,22 @@ Array [
         "key": "curiosity-inventory.cardHeading",
         "match": "t('curiosity-inventory.cardHeading')",
       },
+      Object {
+        "key": "curiosity-inventory.label",
+        "match": "translate('curiosity-inventory.label', { context: 'numberOfGuests', value: numberOfGuests.value }, [ <PfLabel color=\\"blue\\" /> ])",
+      },
+      Object {
+        "key": "curiosity-inventory.label",
+        "match": "translate('curiosity-inventory.label', { context: 'numberOfGuests', value: numberOfGuests.value }, [ <PfLabel color=\\"blue\\" /> ])",
+      },
       Object {
         "key": "curiosity-inventory.hardwareType",
         "match": "translate('curiosity-inventory.hardwareType', { context: hardwareType.value })",
       },
+      Object {
+        "key": "curiosity-inventory.cloudProvider",
+        "match": "translate('curiosity-inventory.cloudProvider', { context: cloudProvider.value })",
+      },
     ],
   },
   Object {
@@ -462,11 +486,19 @@ Array [
   },
   Object {
     "file": "./src/components/openshiftView/openshiftView.js",
-    "key": "curiosity-inventory.hardwareType",
+    "key": "curiosity-inventory.label",
+  },
+  Object {
+    "file": "./src/components/openshiftView/openshiftView.js",
+    "key": "curiosity-inventory.label",
+  },
+  Object {
+    "file": "./src/components/rhelView/rhelView.js",
+    "key": "curiosity-inventory.label",
   },
   Object {
     "file": "./src/components/rhelView/rhelView.js",
-    "key": "curiosity-inventory.hardwareType",
+    "key": "curiosity-inventory.label",
   },
 ]
 `;

diff --git a/src/components/openshiftView/__tests__/__snapshots__/openshiftView.test.js.snap b/src/components/openshiftView/__tests__/__snapshots__/openshiftView.test.js.snap
@@ -379,15 +379,15 @@ Object {
 exports[`OpenshiftView Component should have default props that set product configuration: filteredInventoryData results 1`] = `
 Object {
   "cells": Array [
-    "lorem",
+    <React.Fragment>
+      lorem
+       
+      t(curiosity-inventory.label, [object Object], [object Object])
+    </React.Fragment>,
     <React.Fragment>
       t(curiosity-inventory.hardwareType, [object Object])
        
-      <Badge
-        isRead={true}
-      >
-        3
-      </Badge>
+      
     </React.Fragment>,
     10,
     12,
@@ -450,15 +450,13 @@ Object {
       variant="link"
     >
       lorem
+       
+      t(curiosity-inventory.label, [object Object], [object Object])
     </Button>,
     <React.Fragment>
       t(curiosity-inventory.hardwareType, [object Object])
        
-      <Badge
-        isRead={true}
-      >
-        3
-      </Badge>
+      
     </React.Fragment>,
     10,
     12,

diff --git a/src/components/openshiftView/openshiftView.js b/src/components/openshiftView/openshiftView.js
@@ -4,7 +4,7 @@ import {
   chart_color_blue_100 as chartColorBlueLight,
   chart_color_blue_300 as chartColorBlueDark
 } from '@patternfly/react-tokens';
-import { Badge, Button } from '@patternfly/react-core';
+import { Button, Label as PfLabel } from '@patternfly/react-core';
 import { DateFormat } from '@redhat-cloud-services/frontend-components/components/cjs/DateFormat';
 import { PageLayout, PageHeader, PageSection, PageToolbar } from '../pageLayout/pageLayout';
 import {
@@ -286,22 +286,31 @@ OpenshiftView.defaultProps = {
     },
     {
       id: 'lastSeen',
-      cell: obj => (obj?.lastSeen?.value && <DateFormat date={obj?.lastSeen?.value} />) || ''
+      cell: data => (data?.lastSeen?.value && <DateFormat date={data?.lastSeen?.value} />) || ''
     }
   ],
   initialInventoryFilters: [
     {
       id: 'displayName',
       cell: (data, session) => {
-        const { displayName, inventoryId } = data;
+        const { displayName, inventoryId, numberOfGuests } = data;
         const { inventory: authorized } = session?.authorized || {};
 
         if (!inventoryId?.value) {
           return displayName?.value;
         }
 
         if (!authorized) {
-          return displayName?.value || inventoryId?.value;
+          return (
+            <React.Fragment>
+              {displayName?.value || inventoryId?.value}{' '}
+              {(numberOfGuests.value &&
+                translate('curiosity-inventory.label', { context: 'numberOfGuests', value: numberOfGuests.value }, [
+                  <PfLabel color="blue" />
+                ])) ||
+                ''}
+            </React.Fragment>
+          );
         }
 
         return (
@@ -312,20 +321,30 @@ OpenshiftView.defaultProps = {
             target="_blank"
             href={`${helpers.UI_DEPLOY_PATH_PREFIX}/insights/inventory/${inventoryId.value}/`}
           >
-            {displayName.value || inventoryId.value}
+            {displayName.value || inventoryId.value}{' '}
+            {(numberOfGuests.value &&
+              translate('curiosity-inventory.label', { context: 'numberOfGuests', value: numberOfGuests.value }, [
+                <PfLabel color="blue" />
+              ])) ||
+              ''}
           </Button>
         );
       },
       isSortable: true
     },
     {
       id: 'hardwareType',
-      cell: obj => {
-        const { hardwareType, numberOfGuests } = obj;
+      cell: data => {
+        const { cloudProvider, hardwareType } = data;
         return (
           <React.Fragment>
             {translate('curiosity-inventory.hardwareType', { context: hardwareType.value })}{' '}
-            {(numberOfGuests.value && <Badge isRead>{numberOfGuests.value}</Badge>) || ''}
+            {(cloudProvider?.value && (
+              <PfLabel color="purple">
+                {translate('curiosity-inventory.cloudProvider', { context: cloudProvider.value })}
+              </PfLabel>
+            )) ||
+              ''}
           </React.Fragment>
         );
       },
@@ -343,7 +362,7 @@ OpenshiftView.defaultProps = {
     },
     {
       id: 'lastSeen',
-      cell: obj => (obj?.lastSeen?.value && <DateFormat date={obj?.lastSeen?.value} />) || '',
+      cell: data => (data?.lastSeen?.value && <DateFormat date={data?.lastSeen?.value} />) || '',
       isSortable: true
     }
   ],

diff --git a/src/components/rhelView/__tests__/__snapshots__/rhelView.test.js.snap b/src/components/rhelView/__tests__/__snapshots__/rhelView.test.js.snap
@@ -349,15 +349,15 @@ Object {
 exports[`RhelView Component should have default props that set product configuration: filteredInventoryData results 1`] = `
 Object {
   "cells": Array [
-    "lorem",
+    <React.Fragment>
+      lorem
+       
+      t(curiosity-inventory.label, [object Object], [object Object])
+    </React.Fragment>,
     <React.Fragment>
       t(curiosity-inventory.hardwareType, [object Object])
        
-      <Badge
-        isRead={true}
-      >
-        3
-      </Badge>
+      
     </React.Fragment>,
     10,
     <DateFormat
@@ -418,15 +418,13 @@ Object {
       variant="link"
     >
       lorem
+       
+      t(curiosity-inventory.label, [object Object], [object Object])
     </Button>,
     <React.Fragment>
       t(curiosity-inventory.hardwareType, [object Object])
        
-      <Badge
-        isRead={true}
-      >
-        3
-      </Badge>
+      
     </React.Fragment>,
     10,
     <DateFormat

diff --git a/src/components/rhelView/rhelView.js b/src/components/rhelView/rhelView.js
@@ -8,7 +8,7 @@ import {
   chart_color_purple_100 as chartColorPurpleLight,
   chart_color_purple_300 as chartColorPurpleDark
 } from '@patternfly/react-tokens';
-import { Badge, Button } from '@patternfly/react-core';
+import { Button, Label as PfLabel } from '@patternfly/react-core';
 import { DateFormat } from '@redhat-cloud-services/frontend-components/components/cjs/DateFormat';
 import { PageLayout, PageHeader, PageSection, PageToolbar } from '../pageLayout/pageLayout';
 import {
@@ -208,22 +208,31 @@ RhelView.defaultProps = {
     },
     {
       id: 'lastSeen',
-      cell: obj => (obj?.lastSeen?.value && <DateFormat date={obj?.lastSeen?.value} />) || ''
+      cell: data => (data?.lastSeen?.value && <DateFormat date={data?.lastSeen?.value} />) || ''
     }
   ],
   initialInventoryFilters: [
     {
       id: 'displayName',
       cell: (data, session) => {
-        const { displayName, inventoryId } = data;
+        const { displayName, inventoryId, numberOfGuests } = data;
         const { inventory: authorized } = session?.authorized || {};
 
         if (!inventoryId?.value) {
           return displayName?.value;
         }
 
         if (!authorized) {
-          return displayName?.value || inventoryId?.value;
+          return (
+            <React.Fragment>
+              {displayName?.value || inventoryId?.value}{' '}
+              {(numberOfGuests.value &&
+                translate('curiosity-inventory.label', { context: 'numberOfGuests', value: numberOfGuests.value }, [
+                  <PfLabel color="blue" />
+                ])) ||
+                ''}
+            </React.Fragment>
+          );
         }
 
         return (
@@ -234,20 +243,30 @@ RhelView.defaultProps = {
             target="_blank"
             href={`${helpers.UI_DEPLOY_PATH_PREFIX}/insights/inventory/${inventoryId.value}/`}
           >
-            {displayName.value || inventoryId.value}
+            {displayName.value || inventoryId.value}{' '}
+            {(numberOfGuests.value &&
+              translate('curiosity-inventory.label', { context: 'numberOfGuests', value: numberOfGuests.value }, [
+                <PfLabel color="blue" />
+              ])) ||
+              ''}
           </Button>
         );
       },
       isSortable: true
     },
     {
       id: 'hardwareType',
-      cell: obj => {
-        const { hardwareType, numberOfGuests } = obj;
+      cell: data => {
+        const { cloudProvider, hardwareType } = data;
         return (
           <React.Fragment>
             {translate('curiosity-inventory.hardwareType', { context: hardwareType.value })}{' '}
-            {(numberOfGuests.value && <Badge isRead>{numberOfGuests.value}</Badge>) || ''}
+            {(cloudProvider?.value && (
+              <PfLabel color="purple">
+                {translate('curiosity-inventory.cloudProvider', { context: cloudProvider.value })}
+              </PfLabel>
+            )) ||
+              ''}
           </React.Fragment>
         );
       },
@@ -259,7 +278,7 @@ RhelView.defaultProps = {
     },
     {
       id: 'lastSeen',
-      cell: obj => (obj?.lastSeen?.value && <DateFormat date={obj?.lastSeen?.value} />) || '',
+      cell: data => (data?.lastSeen?.value && <DateFormat date={data?.lastSeen?.value} />) || '',
       isSortable: true
     }
   ],