fix(inventoryList): issues/468 display measurementType (#485)

* inventoryList, guestsList, expand prop types, content check * inventoryListSelectors, lowercase measurementType * locale, measurementType strings, VM to guests * openshiftView, rhelView, hardware to measurementType * rhsmApiTypes, add type, expected measurementType * rhsmServices, measurementType mock
RedHatInsights · Oct 28, 2020 · 61cc28d · 61cc28d
1 parent 50e4d05
commit 61cc28d
Show file tree

Hide file tree

Showing 15 changed files with 140 additions and 78 deletions.
diff --git a/public/locales/en-US.json b/public/locales/en-US.json
@@ -47,7 +47,8 @@
     "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>",
+    "label_numberOfGuests": "<0>{{count}} guest</0>",
+    "label_numberOfGuests_plural": "<0>{{count}} guests</0>",
     "cloudProvider": "{{context}}",
     "cloudProvider_alibaba": "Alibaba",
     "cloudProvider_aws": "AWS",
@@ -62,11 +63,22 @@
     "header": "{{context}}",
     "header_cores": "Cores",
     "header_displayName": "Name",
-    "header_guestsDisplayName": "VM name",
+    "header_guestsDisplayName": "Guest name",
     "header_hardwareType": "Type",
+    "header_measurementType": "Type",
     "header_inventoryId": "UUID",
     "header_sockets": "Sockets",
-    "header_lastSeen": "Last seen"
+    "header_lastSeen": "Last seen",
+    "measurementType": "{{context}}",
+    "measurementType_cloud": "Public cloud",
+    "measurementType_alibaba": "Public cloud",
+    "measurementType_aws": "Public cloud",
+    "measurementType_azure": "Public cloud",
+    "measurementType_google": "Public cloud",
+    "measurementType_hypervisor": "Hypervisor",
+    "measurementType_physical": "Physical",
+    "measurementType_virtual": "Virtual",
+    "measurementType_virtualized": "Virtual"
   },
   "curiosity-toolbar": {
     "category": "Filter by",

diff --git a/src/components/guestsList/guestsList.js b/src/components/guestsList/guestsList.js
@@ -203,13 +203,15 @@ GuestsList.propTypes = {
         PropTypes.shape({
           title: PropTypes.string
         }),
-        PropTypes.func
+        PropTypes.func,
+        PropTypes.string
       ]),
       cell: PropTypes.oneOfType([
         PropTypes.shape({
           title: PropTypes.string
         }),
-        PropTypes.func
+        PropTypes.func,
+        PropTypes.string
       ])
     }).isRequired
   ),

diff --git a/src/components/i18n/__tests__/__snapshots__/i18n.test.js.snap b/src/components/i18n/__tests__/__snapshots__/i18n.test.js.snap
@@ -210,15 +210,15 @@ Array [
       },
       Object {
         "key": "curiosity-inventory.label",
-        "match": "translate('curiosity-inventory.label', { context: 'numberOfGuests', value: numberOfGuests.value }, [ <PfLabel color=\\"blue\\" /> ])",
+        "match": "translate('curiosity-inventory.label', { context: 'numberOfGuests', count: numberOfGuests.value }, [ <PfLabel color=\\"blue\\" /> ])",
       },
       Object {
         "key": "curiosity-inventory.label",
-        "match": "translate('curiosity-inventory.label', { context: 'numberOfGuests', value: numberOfGuests.value }, [ <PfLabel color=\\"blue\\" /> ])",
+        "match": "translate('curiosity-inventory.label', { context: 'numberOfGuests', count: numberOfGuests.value }, [ <PfLabel color=\\"blue\\" /> ])",
       },
       Object {
-        "key": "curiosity-inventory.hardwareType",
-        "match": "translate('curiosity-inventory.hardwareType', { context: hardwareType.value })",
+        "key": "curiosity-inventory.measurementType",
+        "match": "translate('curiosity-inventory.measurementType', { context: measurementType.value })",
       },
       Object {
         "key": "curiosity-inventory.cloudProvider",
@@ -333,15 +333,15 @@ Array [
       },
       Object {
         "key": "curiosity-inventory.label",
-        "match": "translate('curiosity-inventory.label', { context: 'numberOfGuests', value: numberOfGuests.value }, [ <PfLabel color=\\"blue\\" /> ])",
+        "match": "translate('curiosity-inventory.label', { context: 'numberOfGuests', count: numberOfGuests.value }, [ <PfLabel color=\\"blue\\" /> ])",
       },
       Object {
         "key": "curiosity-inventory.label",
-        "match": "translate('curiosity-inventory.label', { context: 'numberOfGuests', value: numberOfGuests.value }, [ <PfLabel color=\\"blue\\" /> ])",
+        "match": "translate('curiosity-inventory.label', { context: 'numberOfGuests', count: numberOfGuests.value }, [ <PfLabel color=\\"blue\\" /> ])",
       },
       Object {
-        "key": "curiosity-inventory.hardwareType",
-        "match": "translate('curiosity-inventory.hardwareType', { context: hardwareType.value })",
+        "key": "curiosity-inventory.measurementType",
+        "match": "translate('curiosity-inventory.measurementType', { context: measurementType.value })",
       },
       Object {
         "key": "curiosity-inventory.cloudProvider",

diff --git a/src/components/inventoryList/inventoryList.js b/src/components/inventoryList/inventoryList.js
@@ -240,13 +240,15 @@ InventoryList.propTypes = {
         PropTypes.shape({
           title: PropTypes.string
         }),
-        PropTypes.func
+        PropTypes.func,
+        PropTypes.string
       ]),
       cell: PropTypes.oneOfType([
         PropTypes.shape({
           title: PropTypes.string
         }),
-        PropTypes.func
+        PropTypes.func,
+        PropTypes.string
       ])
     }).isRequired
   ),

diff --git a/src/components/openshiftView/__tests__/__snapshots__/openshiftView.test.js.snap b/src/components/openshiftView/__tests__/__snapshots__/openshiftView.test.js.snap
@@ -114,8 +114,8 @@ exports[`OpenshiftView Component should display an alternate graph on query-stri
           },
           Object {
             "cell": [Function],
-            "id": "hardwareType",
-            "isSortable": true,
+            "id": "measurementType",
+            "isSortable": false,
           },
           Object {
             "id": "cores",
@@ -260,8 +260,8 @@ exports[`OpenshiftView Component should have a fallback title: title 1`] = `
           },
           Object {
             "cell": [Function],
-            "id": "hardwareType",
-            "isSortable": true,
+            "id": "measurementType",
+            "isSortable": false,
           },
           Object {
             "id": "cores",
@@ -384,10 +384,10 @@ Object {
     <React.Fragment>
       lorem
        
-      t(curiosity-inventory.label, {"context":"numberOfGuests","value":3}, [object Object])
+      t(curiosity-inventory.label, {"context":"numberOfGuests","count":3}, [object Object])
     </React.Fragment>,
     <React.Fragment>
-      t(curiosity-inventory.hardwareType, {"context":"ipsum"})
+      t(curiosity-inventory.measurementType, {"context":null})
        
       
     </React.Fragment>,
@@ -399,7 +399,7 @@ Object {
   ],
   "columnHeaders": Array [
     "t(curiosity-inventory.header, {\\"context\\":\\"displayName\\"})",
-    "t(curiosity-inventory.header, {\\"context\\":\\"hardwareType\\"})",
+    "t(curiosity-inventory.header, {\\"context\\":\\"measurementType\\"})",
     "t(curiosity-inventory.header, {\\"context\\":\\"sockets\\"})",
     "t(curiosity-inventory.header, {\\"context\\":\\"cores\\"})",
     "t(curiosity-inventory.header, {\\"context\\":\\"lastSeen\\"})",
@@ -429,6 +429,10 @@ Object {
       "title": "t(curiosity-inventory.header, {\\"context\\":\\"loremIpsum\\"})",
       "value": "hello world",
     },
+    "measurementType": Object {
+      "title": "t(curiosity-inventory.header, {\\"context\\":\\"measurementType\\"})",
+      "value": null,
+    },
     "numberOfGuests": Object {
       "title": "t(curiosity-inventory.header, {\\"context\\":\\"numberOfGuests\\"})",
       "value": 3,
@@ -453,10 +457,10 @@ Object {
     >
       lorem
        
-      t(curiosity-inventory.label, {"context":"numberOfGuests","value":3}, [object Object])
+      t(curiosity-inventory.label, {"context":"numberOfGuests","count":3}, [object Object])
     </Button>,
     <React.Fragment>
-      t(curiosity-inventory.hardwareType, {"context":"ipsum"})
+      t(curiosity-inventory.measurementType, {"context":null})
        
       
     </React.Fragment>,
@@ -468,7 +472,7 @@ Object {
   ],
   "columnHeaders": Array [
     "t(curiosity-inventory.header, {\\"context\\":\\"displayName\\"})",
-    "t(curiosity-inventory.header, {\\"context\\":\\"hardwareType\\"})",
+    "t(curiosity-inventory.header, {\\"context\\":\\"measurementType\\"})",
     "t(curiosity-inventory.header, {\\"context\\":\\"sockets\\"})",
     "t(curiosity-inventory.header, {\\"context\\":\\"cores\\"})",
     "t(curiosity-inventory.header, {\\"context\\":\\"lastSeen\\"})",
@@ -498,6 +502,10 @@ Object {
       "title": "t(curiosity-inventory.header, {\\"context\\":\\"loremIpsum\\"})",
       "value": "hello world",
     },
+    "measurementType": Object {
+      "title": "t(curiosity-inventory.header, {\\"context\\":\\"measurementType\\"})",
+      "value": null,
+    },
     "numberOfGuests": Object {
       "title": "t(curiosity-inventory.header, {\\"context\\":\\"numberOfGuests\\"})",
       "value": 3,
@@ -558,8 +566,8 @@ Object {
     },
     Object {
       "cell": [Function],
-      "id": "hardwareType",
-      "isSortable": true,
+      "id": "measurementType",
+      "isSortable": false,
     },
     Object {
       "id": "sockets",
@@ -702,8 +710,8 @@ exports[`OpenshiftView Component should render a non-connected component: non-co
           },
           Object {
             "cell": [Function],
-            "id": "hardwareType",
-            "isSortable": true,
+            "id": "measurementType",
+            "isSortable": false,
           },
           Object {
             "id": "cores",

diff --git a/src/components/openshiftView/__tests__/openshiftView.test.js b/src/components/openshiftView/__tests__/openshiftView.test.js
@@ -58,6 +58,7 @@ describe('OpenshiftView Component', () => {
       displayName: 'lorem',
       inventoryId: 'lorem inventory id',
       hardwareType: 'ipsum',
+      measurementType: null,
       numberOfGuests: 3,
       sockets: 10,
       cores: 12,

diff --git a/src/components/openshiftView/openshiftView.js b/src/components/openshiftView/openshiftView.js
@@ -294,19 +294,19 @@ OpenshiftView.defaultProps = {
     {
       id: 'displayName',
       cell: (data, session) => {
-        const { displayName, inventoryId, numberOfGuests } = data;
+        const { displayName = {}, inventoryId = {}, numberOfGuests = {} } = data;
         const { inventory: authorized } = session?.authorized || {};
 
-        if (!inventoryId?.value) {
-          return displayName?.value;
+        if (!inventoryId.value) {
+          return displayName.value;
         }
 
         if (!authorized) {
           return (
             <React.Fragment>
-              {displayName?.value || inventoryId?.value}{' '}
+              {displayName.value || inventoryId.value}{' '}
               {(numberOfGuests.value &&
-                translate('curiosity-inventory.label', { context: 'numberOfGuests', value: numberOfGuests.value }, [
+                translate('curiosity-inventory.label', { context: 'numberOfGuests', count: numberOfGuests.value }, [
                   <PfLabel color="blue" />
                 ])) ||
                 ''}
@@ -324,7 +324,7 @@ OpenshiftView.defaultProps = {
           >
             {displayName.value || inventoryId.value}{' '}
             {(numberOfGuests.value &&
-              translate('curiosity-inventory.label', { context: 'numberOfGuests', value: numberOfGuests.value }, [
+              translate('curiosity-inventory.label', { context: 'numberOfGuests', count: numberOfGuests.value }, [
                 <PfLabel color="blue" />
               ])) ||
               ''}
@@ -334,13 +334,13 @@ OpenshiftView.defaultProps = {
       isSortable: true
     },
     {
-      id: 'hardwareType',
+      id: 'measurementType',
       cell: data => {
-        const { cloudProvider, hardwareType } = data;
+        const { cloudProvider = {}, measurementType = {} } = data;
         return (
           <React.Fragment>
-            {translate('curiosity-inventory.hardwareType', { context: hardwareType.value })}{' '}
-            {(cloudProvider?.value && (
+            {translate('curiosity-inventory.measurementType', { context: measurementType.value })}{' '}
+            {(cloudProvider.value && (
               <PfLabel color="purple">
                 {translate('curiosity-inventory.cloudProvider', { context: cloudProvider.value })}
               </PfLabel>
@@ -349,7 +349,7 @@ OpenshiftView.defaultProps = {
           </React.Fragment>
         );
       },
-      isSortable: true
+      isSortable: false
     },
     {
       id: 'sockets',

diff --git a/src/components/rhelView/__tests__/__snapshots__/rhelView.test.js.snap b/src/components/rhelView/__tests__/__snapshots__/rhelView.test.js.snap
@@ -101,8 +101,8 @@ exports[`RhelView Component should display an alternate graph on query-string up
           },
           Object {
             "cell": [Function],
-            "id": "hardwareType",
-            "isSortable": true,
+            "id": "measurementType",
+            "isSortable": false,
           },
           Object {
             "id": "sockets",
@@ -232,8 +232,8 @@ exports[`RhelView Component should have a fallback title: title 1`] = `
           },
           Object {
             "cell": [Function],
-            "id": "hardwareType",
-            "isSortable": true,
+            "id": "measurementType",
+            "isSortable": false,
           },
           Object {
             "id": "sockets",
@@ -354,10 +354,10 @@ Object {
     <React.Fragment>
       lorem
        
-      t(curiosity-inventory.label, {"context":"numberOfGuests","value":3}, [object Object])
+      t(curiosity-inventory.label, {"context":"numberOfGuests","count":3}, [object Object])
     </React.Fragment>,
     <React.Fragment>
-      t(curiosity-inventory.hardwareType, {"context":"ipsum"})
+      t(curiosity-inventory.measurementType, {"context":null})
        
       
     </React.Fragment>,
@@ -368,7 +368,7 @@ Object {
   ],
   "columnHeaders": Array [
     "t(curiosity-inventory.header, {\\"context\\":\\"displayName\\"})",
-    "t(curiosity-inventory.header, {\\"context\\":\\"hardwareType\\"})",
+    "t(curiosity-inventory.header, {\\"context\\":\\"measurementType\\"})",
     "t(curiosity-inventory.header, {\\"context\\":\\"sockets\\"})",
     "t(curiosity-inventory.header, {\\"context\\":\\"lastSeen\\"})",
   ],
@@ -397,6 +397,10 @@ Object {
       "title": "t(curiosity-inventory.header, {\\"context\\":\\"loremIpsum\\"})",
       "value": "hello world",
     },
+    "measurementType": Object {
+      "title": "t(curiosity-inventory.header, {\\"context\\":\\"measurementType\\"})",
+      "value": null,
+    },
     "numberOfGuests": Object {
       "title": "t(curiosity-inventory.header, {\\"context\\":\\"numberOfGuests\\"})",
       "value": 3,
@@ -421,10 +425,10 @@ Object {
     >
       lorem
        
-      t(curiosity-inventory.label, {"context":"numberOfGuests","value":3}, [object Object])
+      t(curiosity-inventory.label, {"context":"numberOfGuests","count":3}, [object Object])
     </Button>,
     <React.Fragment>
-      t(curiosity-inventory.hardwareType, {"context":"ipsum"})
+      t(curiosity-inventory.measurementType, {"context":null})
        
       
     </React.Fragment>,
@@ -435,7 +439,7 @@ Object {
   ],
   "columnHeaders": Array [
     "t(curiosity-inventory.header, {\\"context\\":\\"displayName\\"})",
-    "t(curiosity-inventory.header, {\\"context\\":\\"hardwareType\\"})",
+    "t(curiosity-inventory.header, {\\"context\\":\\"measurementType\\"})",
     "t(curiosity-inventory.header, {\\"context\\":\\"sockets\\"})",
     "t(curiosity-inventory.header, {\\"context\\":\\"lastSeen\\"})",
   ],
@@ -464,6 +468,10 @@ Object {
       "title": "t(curiosity-inventory.header, {\\"context\\":\\"loremIpsum\\"})",
       "value": "hello world",
     },
+    "measurementType": Object {
+      "title": "t(curiosity-inventory.header, {\\"context\\":\\"measurementType\\"})",
+      "value": null,
+    },
     "numberOfGuests": Object {
       "title": "t(curiosity-inventory.header, {\\"context\\":\\"numberOfGuests\\"})",
       "value": 3,
@@ -523,8 +531,8 @@ Object {
     },
     Object {
       "cell": [Function],
-      "id": "hardwareType",
-      "isSortable": true,
+      "id": "measurementType",
+      "isSortable": false,
     },
     Object {
       "id": "sockets",
@@ -647,8 +655,8 @@ exports[`RhelView Component should render a non-connected component: non-connect
           },
           Object {
             "cell": [Function],
-            "id": "hardwareType",
-            "isSortable": true,
+            "id": "measurementType",
+            "isSortable": false,
           },
           Object {
             "id": "sockets",