From 3af5d3bd4109c473e350984471254231446480a2 Mon Sep 17 00:00:00 2001 From: CD Cabrera Date: Tue, 16 Feb 2021 20:00:07 -0500 Subject: [PATCH] perf(productViewRhel): rhelView to productViewRhel (#587) --- .../__tests__/__snapshots__/i18n.test.js.snap | 32 +- .../productViewRhel.test.js.snap | 511 +++++++++ .../__tests__/productViewRhel.test.js} | 49 +- src/components/productView/productViewRhel.js | 240 +++++ .../__snapshots__/rhelView.test.js.snap | 974 ------------------ src/components/rhelView/rhelView.js | 375 ------- src/components/router/routerConfig.js | 2 +- 7 files changed, 767 insertions(+), 1416 deletions(-) create mode 100644 src/components/productView/__tests__/__snapshots__/productViewRhel.test.js.snap rename src/components/{rhelView/__tests__/rhelView.test.js => productView/__tests__/productViewRhel.test.js} (65%) create mode 100644 src/components/productView/productViewRhel.js delete mode 100644 src/components/rhelView/__tests__/__snapshots__/rhelView.test.js.snap delete mode 100644 src/components/rhelView/rhelView.js diff --git a/src/components/i18n/__tests__/__snapshots__/i18n.test.js.snap b/src/components/i18n/__tests__/__snapshots__/i18n.test.js.snap index dcd1783d1..c89ec5b8b 100644 --- a/src/components/i18n/__tests__/__snapshots__/i18n.test.js.snap +++ b/src/components/i18n/__tests__/__snapshots__/i18n.test.js.snap @@ -274,7 +274,7 @@ Array [ ], }, Object { - "file": "./src/components/productView/productViewSatellite.js", + "file": "./src/components/productView/productViewRhel.js", "keys": Array [ Object { "key": "curiosity-inventory.header", @@ -295,24 +295,8 @@ Array [ ], }, Object { - "file": "./src/components/rhelView/rhelView.js", + "file": "./src/components/productView/productViewSatellite.js", "keys": Array [ - Object { - "key": "curiosity-view.title", - "match": "t(\`curiosity-view.title\`, { appName: helpers.UI_DISPLAY_NAME, context: productLabel })", - }, - Object { - "key": "curiosity-graph.socketsHeading", - "match": "t('curiosity-graph.socketsHeading')", - }, - Object { - "key": "curiosity-inventory.tab", - "match": "t('curiosity-inventory.tab', { context: 'hosts' })", - }, - Object { - "key": "curiosity-inventory.tab", - "match": "t('curiosity-inventory.tab', { context: 'subscriptions' })", - }, Object { "key": "curiosity-inventory.header", "match": "translate('curiosity-inventory.header', { context: 'guestsDisplayName' })", @@ -537,19 +521,11 @@ Array [ "key": "curiosity-inventory.tab", }, Object { - "file": "./src/components/productView/productViewSatellite.js", + "file": "./src/components/productView/productViewRhel.js", "key": "curiosity-inventory.label", }, Object { - "file": "./src/components/rhelView/rhelView.js", - "key": "curiosity-inventory.tab", - }, - Object { - "file": "./src/components/rhelView/rhelView.js", - "key": "curiosity-inventory.tab", - }, - Object { - "file": "./src/components/rhelView/rhelView.js", + "file": "./src/components/productView/productViewSatellite.js", "key": "curiosity-inventory.label", }, Object { diff --git a/src/components/productView/__tests__/__snapshots__/productViewRhel.test.js.snap b/src/components/productView/__tests__/__snapshots__/productViewRhel.test.js.snap new file mode 100644 index 000000000..f8cd73e1c --- /dev/null +++ b/src/components/productView/__tests__/__snapshots__/productViewRhel.test.js.snap @@ -0,0 +1,511 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`ProductViewRhel Component should render a non-connected component: non-connected 1`] = ` + +`; + +exports[`ProductViewRhel Component should set product configuration: filteredGuestsData results 1`] = ` +Object { + "cells": Array [ + Object { + "title": "lorem", + }, + Object { + "title": "lorem inventory id", + }, + Object { + "title": , + }, + ], + "columnHeaders": Array [ + Object { + "title": "t(curiosity-inventory.header, {\\"context\\":\\"guestsDisplayName\\"})", + "transforms": Array [], + }, + Object { + "title": "t(curiosity-inventory.header, {\\"context\\":\\"inventoryId\\"})", + "transforms": Array [ + [Function], + ], + }, + Object { + "title": "t(curiosity-inventory.header, {\\"context\\":\\"lastSeen\\"})", + "transforms": Array [ + [Function], + ], + }, + ], + "data": Object { + "displayName": Object { + "title": "t(curiosity-inventory.header, {\\"context\\":\\"displayName\\"})", + "value": "lorem", + }, + "inventoryId": Object { + "title": "t(curiosity-inventory.header, {\\"context\\":\\"inventoryId\\"})", + "value": "lorem inventory id", + }, + "lastSeen": Object { + "title": "t(curiosity-inventory.header, {\\"context\\":\\"lastSeen\\"})", + "value": "lorem date obj", + }, + "loremIpsum": Object { + "title": "t(curiosity-inventory.header, {\\"context\\":\\"loremIpsum\\"})", + "value": "hello world", + }, + "subscriptionManagerId": Object { + "title": "t(curiosity-inventory.header, {\\"context\\":\\"subscriptionManagerId\\"})", + "value": "lorem subscription id", + }, + }, +} +`; + +exports[`ProductViewRhel Component should set product configuration: filteredGuestsData results, authorized 1`] = ` +Object { + "cells": Array [ + Object { + "title": , + }, + Object { + "title": "lorem inventory id", + }, + Object { + "title": , + }, + ], + "columnHeaders": Array [ + Object { + "title": "t(curiosity-inventory.header, {\\"context\\":\\"guestsDisplayName\\"})", + "transforms": Array [], + }, + Object { + "title": "t(curiosity-inventory.header, {\\"context\\":\\"inventoryId\\"})", + "transforms": Array [ + [Function], + ], + }, + Object { + "title": "t(curiosity-inventory.header, {\\"context\\":\\"lastSeen\\"})", + "transforms": Array [ + [Function], + ], + }, + ], + "data": Object { + "displayName": Object { + "title": "t(curiosity-inventory.header, {\\"context\\":\\"displayName\\"})", + "value": "lorem", + }, + "inventoryId": Object { + "title": "t(curiosity-inventory.header, {\\"context\\":\\"inventoryId\\"})", + "value": "lorem inventory id", + }, + "lastSeen": Object { + "title": "t(curiosity-inventory.header, {\\"context\\":\\"lastSeen\\"})", + "value": "lorem date obj", + }, + "loremIpsum": Object { + "title": "t(curiosity-inventory.header, {\\"context\\":\\"loremIpsum\\"})", + "value": "hello world", + }, + "subscriptionManagerId": Object { + "title": "t(curiosity-inventory.header, {\\"context\\":\\"subscriptionManagerId\\"})", + "value": "lorem subscription id", + }, + }, +} +`; + +exports[`ProductViewRhel Component should set product configuration: filteredInventoryData results 1`] = ` +Object { + "cells": Array [ + Object { + "title": + lorem + + t(curiosity-inventory.label, {"context":"numberOfGuests","count":3}, [object Object]) + , + }, + Object { + "title": + t(curiosity-inventory.measurementType, {"context":null}) + + + , + }, + Object { + "title": 10, + }, + Object { + "title": , + }, + ], + "columnHeaders": Array [ + Object { + "title": "t(curiosity-inventory.header, {\\"context\\":\\"displayName\\"})", + "transforms": Array [], + }, + Object { + "title": "t(curiosity-inventory.header, {\\"context\\":\\"measurementType\\"})", + "transforms": Array [ + [Function], + ], + }, + Object { + "title": "t(curiosity-inventory.header, {\\"context\\":\\"sockets\\"})", + "transforms": Array [ + [Function], + ], + }, + Object { + "title": "t(curiosity-inventory.header, {\\"context\\":\\"lastSeen\\"})", + "transforms": Array [ + [Function], + ], + }, + ], + "data": Object { + "cores": Object { + "title": "t(curiosity-inventory.header, {\\"context\\":\\"cores\\"})", + "value": 12, + }, + "displayName": Object { + "title": "t(curiosity-inventory.header, {\\"context\\":\\"displayName\\"})", + "value": "lorem", + }, + "hardwareType": Object { + "title": "t(curiosity-inventory.header, {\\"context\\":\\"hardwareType\\"})", + "value": "ipsum", + }, + "inventoryId": Object { + "title": "t(curiosity-inventory.header, {\\"context\\":\\"inventoryId\\"})", + "value": "lorem inventory id", + }, + "lastSeen": Object { + "title": "t(curiosity-inventory.header, {\\"context\\":\\"lastSeen\\"})", + "value": "lorem date obj", + }, + "loremIpsum": 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, + }, + "sockets": Object { + "title": "t(curiosity-inventory.header, {\\"context\\":\\"sockets\\"})", + "value": 10, + }, + }, +} +`; + +exports[`ProductViewRhel Component should set product configuration: filteredInventoryData results, authorized 1`] = ` +Object { + "cells": Array [ + Object { + "title": + + + t(curiosity-inventory.label, {"context":"numberOfGuests","count":3}, [object Object]) + , + }, + Object { + "title": + t(curiosity-inventory.measurementType, {"context":null}) + + + , + }, + Object { + "title": 10, + }, + Object { + "title": , + }, + ], + "columnHeaders": Array [ + Object { + "title": "t(curiosity-inventory.header, {\\"context\\":\\"displayName\\"})", + "transforms": Array [], + }, + Object { + "title": "t(curiosity-inventory.header, {\\"context\\":\\"measurementType\\"})", + "transforms": Array [ + [Function], + ], + }, + Object { + "title": "t(curiosity-inventory.header, {\\"context\\":\\"sockets\\"})", + "transforms": Array [ + [Function], + ], + }, + Object { + "title": "t(curiosity-inventory.header, {\\"context\\":\\"lastSeen\\"})", + "transforms": Array [ + [Function], + ], + }, + ], + "data": Object { + "cores": Object { + "title": "t(curiosity-inventory.header, {\\"context\\":\\"cores\\"})", + "value": 12, + }, + "displayName": Object { + "title": "t(curiosity-inventory.header, {\\"context\\":\\"displayName\\"})", + "value": "lorem", + }, + "hardwareType": Object { + "title": "t(curiosity-inventory.header, {\\"context\\":\\"hardwareType\\"})", + "value": "ipsum", + }, + "inventoryId": Object { + "title": "t(curiosity-inventory.header, {\\"context\\":\\"inventoryId\\"})", + "value": "lorem inventory id", + }, + "lastSeen": Object { + "title": "t(curiosity-inventory.header, {\\"context\\":\\"lastSeen\\"})", + "value": "lorem date obj", + }, + "loremIpsum": 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, + }, + "sockets": Object { + "title": "t(curiosity-inventory.header, {\\"context\\":\\"sockets\\"})", + "value": 10, + }, + }, +} +`; + +exports[`ProductViewRhel Component should set product configuration: initial configuration 1`] = ` +Object { + "initialGraphFilters": Array [ + Object { + "color": "#06c", + "fill": "#8bc1f7", + "id": "physicalSockets", + "stroke": "#06c", + }, + Object { + "color": "#009596", + "fill": "#a2d9d9", + "id": "hypervisorSockets", + "stroke": "#009596", + }, + Object { + "color": "#5752d1", + "fill": "#b2b0ea", + "id": "cloudSockets", + "stroke": "#5752d1", + }, + Object { + "id": "thresholdSockets", + }, + ], + "initialGuestsFilters": Array [ + Object { + "cell": [Function], + "header": "t(curiosity-inventory.header, {\\"context\\":\\"guestsDisplayName\\"})", + "id": "displayName", + }, + Object { + "cellWidth": 40, + "id": "inventoryId", + }, + Object { + "cell": [Function], + "cellWidth": 15, + "id": "lastSeen", + }, + ], + "initialInventoryFilters": Array [ + Object { + "cell": [Function], + "id": "displayName", + "isSortable": true, + }, + Object { + "cell": [Function], + "cellWidth": 20, + "id": "measurementType", + "isSortable": true, + }, + Object { + "cellWidth": 15, + "id": "sockets", + "isSortable": true, + "isWrappable": true, + }, + Object { + "cell": [Function], + "cellWidth": 15, + "id": "lastSeen", + "isSortable": true, + "isWrappable": true, + }, + ], + "query": Object {}, +} +`; diff --git a/src/components/rhelView/__tests__/rhelView.test.js b/src/components/productView/__tests__/productViewRhel.test.js similarity index 65% rename from src/components/rhelView/__tests__/rhelView.test.js rename to src/components/productView/__tests__/productViewRhel.test.js index aba91d642..239982186 100644 --- a/src/components/rhelView/__tests__/rhelView.test.js +++ b/src/components/productView/__tests__/productViewRhel.test.js @@ -1,55 +1,28 @@ import React from 'react'; import { shallow } from 'enzyme'; -import { RhelView } from '../rhelView'; +import { ProductViewRhel } from '../productViewRhel'; import { parseRowCellsListData } from '../../inventoryList/inventoryListHelpers'; -describe('RhelView Component', () => { +describe('ProductViewRhel Component', () => { it('should render a non-connected component', () => { const props = { - location: {}, routeDetail: { - pathId: 'test_id', pathParameter: 'lorem ipsum', - routeItem: { - title: 'Dolor sit' - } + productParameter: 'dolor sit' } }; - const component = shallow(); + const component = shallow(); expect(component).toMatchSnapshot('non-connected'); }); - it('should have a fallback title', () => { - const props = { - location: {}, - routeDetail: { - pathId: 'test_id', - pathParameter: 'lorem ipsum' - } - }; - - const component = shallow(); - expect(component).toMatchSnapshot('title'); - }); - - it('should display an alternate graph on query-string update', () => { - const props = { - location: { - parsedSearch: { c3: '' } - }, - routeDetail: { - pathId: 'test_id', - pathParameter: 'lorem ipsum' - } - }; - - const component = shallow(); - expect(component).toMatchSnapshot('alternate graph'); - }); - - it('should have default props that set product configuration', () => { - const { initialGraphFilters, initialGuestsFilters, initialInventoryFilters, query } = RhelView.defaultProps; + it('should set product configuration', () => { + const { + initialGraphFilters, + initialGuestsFilters, + initialInventoryFilters, + query + } = ProductViewRhel.defaultProps.productConfig; expect({ initialGraphFilters, initialGuestsFilters, initialInventoryFilters, query }).toMatchSnapshot( 'initial configuration' ); diff --git a/src/components/productView/productViewRhel.js b/src/components/productView/productViewRhel.js new file mode 100644 index 000000000..b12221310 --- /dev/null +++ b/src/components/productView/productViewRhel.js @@ -0,0 +1,240 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { + chart_color_blue_100 as chartColorBlueLight, + chart_color_blue_300 as chartColorBlueDark, + chart_color_cyan_100 as chartColorCyanLight, + chart_color_cyan_300 as chartColorCyanDark, + chart_color_purple_100 as chartColorPurpleLight, + chart_color_purple_300 as chartColorPurpleDark +} from '@patternfly/react-tokens'; +import { Button, Label as PfLabel } from '@patternfly/react-core'; +import { DateFormat } from '@redhat-cloud-services/frontend-components/components/DateFormat'; +import moment from 'moment'; +import { + RHSM_API_QUERY_SORT_DIRECTION_TYPES as SORT_DIRECTION_TYPES, + RHSM_API_QUERY_GRANULARITY_TYPES as GRANULARITY_TYPES, + RHSM_API_QUERY_TYPES, + RHSM_API_QUERY_SORT_TYPES, + RHSM_API_QUERY_SUBSCRIPTIONS_SORT_TYPES +} from '../../types/rhsmApiTypes'; +import { ConnectedProductView, ProductView } from './productView'; +import { translate } from '../i18n/i18n'; +import { helpers } from '../../common'; + +/** + * A Red Hat Enterprise Linux configured view, and related system architectures. + * + * @param {object} props + * @param {object} props.productConfig + * @param {object} props.routeDetail + * @returns {Node} + */ +const ProductViewRhel = ({ productConfig, routeDetail }) => ( + +); + +/** + * Prop types. + * + * @type {{routeDetail: object, productConfig:object}} + */ +ProductViewRhel.propTypes = { + productConfig: ProductView.propTypes.productConfig, + routeDetail: PropTypes.shape({ + pathParameter: PropTypes.string, + productParameter: PropTypes.string, + viewParameter: PropTypes.string + }).isRequired +}; + +/** + * Default props. + * + * @type {{ productConfig: object }} + */ +ProductViewRhel.defaultProps = { + productConfig: { + query: {}, + graphTallyQuery: { + [RHSM_API_QUERY_TYPES.GRANULARITY]: GRANULARITY_TYPES.DAILY + }, + inventoryHostsQuery: { + [RHSM_API_QUERY_TYPES.SORT]: RHSM_API_QUERY_SORT_TYPES.LAST_SEEN, + [RHSM_API_QUERY_TYPES.DIRECTION]: SORT_DIRECTION_TYPES.ASCENDING, + [RHSM_API_QUERY_TYPES.LIMIT]: 100, + [RHSM_API_QUERY_TYPES.OFFSET]: 0 + }, + inventorySubscriptionsQuery: { + [RHSM_API_QUERY_TYPES.SORT]: RHSM_API_QUERY_SUBSCRIPTIONS_SORT_TYPES.UPCOMING_EVENT_DATE, + [RHSM_API_QUERY_TYPES.DIRECTION]: SORT_DIRECTION_TYPES.ASCENDING, + [RHSM_API_QUERY_TYPES.LIMIT]: 100, + [RHSM_API_QUERY_TYPES.OFFSET]: 0 + }, + initialGraphFilters: [ + { + id: 'physicalSockets', + fill: chartColorBlueLight.value, + stroke: chartColorBlueDark.value, + color: chartColorBlueDark.value + }, + { + id: 'hypervisorSockets', + fill: chartColorCyanLight.value, + stroke: chartColorCyanDark.value, + color: chartColorCyanDark.value + }, + { + id: 'cloudSockets', + fill: chartColorPurpleLight.value, + stroke: chartColorPurpleDark.value, + color: chartColorPurpleDark.value + }, + { id: 'thresholdSockets' } + ], + initialGuestsFilters: [ + { + id: 'displayName', + header: translate('curiosity-inventory.header', { context: 'guestsDisplayName' }), + cell: (data, session) => { + const { displayName, inventoryId } = data; + const { inventory: authorized } = session?.authorized || {}; + + if (!inventoryId?.value) { + return displayName?.value; + } + + if (!authorized) { + return displayName?.value || inventoryId?.value; + } + + return ( + + ); + } + }, + { + id: 'inventoryId', + cellWidth: 40 + }, + { + id: 'lastSeen', + cell: data => (data?.lastSeen?.value && ) || '', + cellWidth: 15 + } + ], + initialInventoryFilters: [ + { + id: 'displayName', + cell: (data, session) => { + const { displayName = {}, inventoryId = {}, numberOfGuests = {} } = data; + const { inventory: authorized } = session?.authorized || {}; + + if (!inventoryId.value) { + return displayName.value; + } + + let updatedDisplayName = displayName.value || inventoryId.value; + + if (authorized) { + updatedDisplayName = ( + + ); + } + + return ( + + {updatedDisplayName}{' '} + {(numberOfGuests.value && + translate('curiosity-inventory.label', { context: 'numberOfGuests', count: numberOfGuests.value }, [ + + ])) || + ''} + + ); + }, + isSortable: true + }, + { + id: 'measurementType', + cell: data => { + const { cloudProvider = {}, measurementType = {} } = data; + return ( + + {translate('curiosity-inventory.measurementType', { context: measurementType.value })}{' '} + {(cloudProvider.value && ( + + {translate('curiosity-inventory.cloudProvider', { context: cloudProvider.value })} + + )) || + ''} + + ); + }, + isSortable: true, + cellWidth: 20 + }, + { + id: 'sockets', + isSortable: true, + isWrappable: true, + cellWidth: 15 + }, + { + id: 'lastSeen', + cell: data => (data?.lastSeen?.value && ) || '', + isSortable: true, + isWrappable: true, + cellWidth: 15 + } + ], + initialInventorySettings: {}, + initialSubscriptionsInventoryFilters: [ + { + id: 'productName', + isSortable: true + }, + { + id: 'serviceLevel', + isSortable: true, + isWrappable: true, + cellWidth: 15 + }, + { + id: 'upcomingEventDate', + cell: data => + (data?.upcomingEventDate?.value && moment.utc(data?.upcomingEventDate?.value).format('YYYY-DD-MM')) || '', + isSortable: true, + isWrappable: true, + cellWidth: 15 + } + ], + initialToolbarFilters: [ + { + id: RHSM_API_QUERY_TYPES.SLA + }, + { + id: RHSM_API_QUERY_TYPES.USAGE, + selected: true + } + ] + } +}; + +export { ProductViewRhel as default, ProductViewRhel }; diff --git a/src/components/rhelView/__tests__/__snapshots__/rhelView.test.js.snap b/src/components/rhelView/__tests__/__snapshots__/rhelView.test.js.snap deleted file mode 100644 index a40bae88c..000000000 --- a/src/components/rhelView/__tests__/__snapshots__/rhelView.test.js.snap +++ /dev/null @@ -1,974 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`RhelView Component should display an alternate graph on query-string update: alternate graph 1`] = ` - - - t(curiosity-view.title, {"appName":"Subscriptions","context":"RHEL"}) - - - - - - - - - - - - - - - - - - - - - -`; - -exports[`RhelView Component should have a fallback title: title 1`] = ` - - - t(curiosity-view.title, {"appName":"Subscriptions","context":"RHEL"}) - - - - - - - - - - - - - - - - - - - - - -`; - -exports[`RhelView Component should have default props that set product configuration: filteredGuestsData results 1`] = ` -Object { - "cells": Array [ - Object { - "title": "lorem", - }, - Object { - "title": "lorem inventory id", - }, - Object { - "title": , - }, - ], - "columnHeaders": Array [ - Object { - "title": "t(curiosity-inventory.header, {\\"context\\":\\"guestsDisplayName\\"})", - "transforms": Array [], - }, - Object { - "title": "t(curiosity-inventory.header, {\\"context\\":\\"inventoryId\\"})", - "transforms": Array [ - [Function], - ], - }, - Object { - "title": "t(curiosity-inventory.header, {\\"context\\":\\"lastSeen\\"})", - "transforms": Array [ - [Function], - ], - }, - ], - "data": Object { - "displayName": Object { - "title": "t(curiosity-inventory.header, {\\"context\\":\\"displayName\\"})", - "value": "lorem", - }, - "inventoryId": Object { - "title": "t(curiosity-inventory.header, {\\"context\\":\\"inventoryId\\"})", - "value": "lorem inventory id", - }, - "lastSeen": Object { - "title": "t(curiosity-inventory.header, {\\"context\\":\\"lastSeen\\"})", - "value": "lorem date obj", - }, - "loremIpsum": Object { - "title": "t(curiosity-inventory.header, {\\"context\\":\\"loremIpsum\\"})", - "value": "hello world", - }, - "subscriptionManagerId": Object { - "title": "t(curiosity-inventory.header, {\\"context\\":\\"subscriptionManagerId\\"})", - "value": "lorem subscription id", - }, - }, -} -`; - -exports[`RhelView Component should have default props that set product configuration: filteredGuestsData results, authorized 1`] = ` -Object { - "cells": Array [ - Object { - "title": , - }, - Object { - "title": "lorem inventory id", - }, - Object { - "title": , - }, - ], - "columnHeaders": Array [ - Object { - "title": "t(curiosity-inventory.header, {\\"context\\":\\"guestsDisplayName\\"})", - "transforms": Array [], - }, - Object { - "title": "t(curiosity-inventory.header, {\\"context\\":\\"inventoryId\\"})", - "transforms": Array [ - [Function], - ], - }, - Object { - "title": "t(curiosity-inventory.header, {\\"context\\":\\"lastSeen\\"})", - "transforms": Array [ - [Function], - ], - }, - ], - "data": Object { - "displayName": Object { - "title": "t(curiosity-inventory.header, {\\"context\\":\\"displayName\\"})", - "value": "lorem", - }, - "inventoryId": Object { - "title": "t(curiosity-inventory.header, {\\"context\\":\\"inventoryId\\"})", - "value": "lorem inventory id", - }, - "lastSeen": Object { - "title": "t(curiosity-inventory.header, {\\"context\\":\\"lastSeen\\"})", - "value": "lorem date obj", - }, - "loremIpsum": Object { - "title": "t(curiosity-inventory.header, {\\"context\\":\\"loremIpsum\\"})", - "value": "hello world", - }, - "subscriptionManagerId": Object { - "title": "t(curiosity-inventory.header, {\\"context\\":\\"subscriptionManagerId\\"})", - "value": "lorem subscription id", - }, - }, -} -`; - -exports[`RhelView Component should have default props that set product configuration: filteredInventoryData results 1`] = ` -Object { - "cells": Array [ - Object { - "title": - lorem - - t(curiosity-inventory.label, {"context":"numberOfGuests","count":3}, [object Object]) - , - }, - Object { - "title": - t(curiosity-inventory.measurementType, {"context":null}) - - - , - }, - Object { - "title": 10, - }, - Object { - "title": , - }, - ], - "columnHeaders": Array [ - Object { - "title": "t(curiosity-inventory.header, {\\"context\\":\\"displayName\\"})", - "transforms": Array [], - }, - Object { - "title": "t(curiosity-inventory.header, {\\"context\\":\\"measurementType\\"})", - "transforms": Array [ - [Function], - ], - }, - Object { - "title": "t(curiosity-inventory.header, {\\"context\\":\\"sockets\\"})", - "transforms": Array [ - [Function], - ], - }, - Object { - "title": "t(curiosity-inventory.header, {\\"context\\":\\"lastSeen\\"})", - "transforms": Array [ - [Function], - ], - }, - ], - "data": Object { - "cores": Object { - "title": "t(curiosity-inventory.header, {\\"context\\":\\"cores\\"})", - "value": 12, - }, - "displayName": Object { - "title": "t(curiosity-inventory.header, {\\"context\\":\\"displayName\\"})", - "value": "lorem", - }, - "hardwareType": Object { - "title": "t(curiosity-inventory.header, {\\"context\\":\\"hardwareType\\"})", - "value": "ipsum", - }, - "inventoryId": Object { - "title": "t(curiosity-inventory.header, {\\"context\\":\\"inventoryId\\"})", - "value": "lorem inventory id", - }, - "lastSeen": Object { - "title": "t(curiosity-inventory.header, {\\"context\\":\\"lastSeen\\"})", - "value": "lorem date obj", - }, - "loremIpsum": 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, - }, - "sockets": Object { - "title": "t(curiosity-inventory.header, {\\"context\\":\\"sockets\\"})", - "value": 10, - }, - }, -} -`; - -exports[`RhelView Component should have default props that set product configuration: filteredInventoryData results, authorized 1`] = ` -Object { - "cells": Array [ - Object { - "title": - - - t(curiosity-inventory.label, {"context":"numberOfGuests","count":3}, [object Object]) - , - }, - Object { - "title": - t(curiosity-inventory.measurementType, {"context":null}) - - - , - }, - Object { - "title": 10, - }, - Object { - "title": , - }, - ], - "columnHeaders": Array [ - Object { - "title": "t(curiosity-inventory.header, {\\"context\\":\\"displayName\\"})", - "transforms": Array [], - }, - Object { - "title": "t(curiosity-inventory.header, {\\"context\\":\\"measurementType\\"})", - "transforms": Array [ - [Function], - ], - }, - Object { - "title": "t(curiosity-inventory.header, {\\"context\\":\\"sockets\\"})", - "transforms": Array [ - [Function], - ], - }, - Object { - "title": "t(curiosity-inventory.header, {\\"context\\":\\"lastSeen\\"})", - "transforms": Array [ - [Function], - ], - }, - ], - "data": Object { - "cores": Object { - "title": "t(curiosity-inventory.header, {\\"context\\":\\"cores\\"})", - "value": 12, - }, - "displayName": Object { - "title": "t(curiosity-inventory.header, {\\"context\\":\\"displayName\\"})", - "value": "lorem", - }, - "hardwareType": Object { - "title": "t(curiosity-inventory.header, {\\"context\\":\\"hardwareType\\"})", - "value": "ipsum", - }, - "inventoryId": Object { - "title": "t(curiosity-inventory.header, {\\"context\\":\\"inventoryId\\"})", - "value": "lorem inventory id", - }, - "lastSeen": Object { - "title": "t(curiosity-inventory.header, {\\"context\\":\\"lastSeen\\"})", - "value": "lorem date obj", - }, - "loremIpsum": 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, - }, - "sockets": Object { - "title": "t(curiosity-inventory.header, {\\"context\\":\\"sockets\\"})", - "value": 10, - }, - }, -} -`; - -exports[`RhelView Component should have default props that set product configuration: initial configuration 1`] = ` -Object { - "initialGraphFilters": Array [ - Object { - "color": "#06c", - "fill": "#8bc1f7", - "id": "physicalSockets", - "stroke": "#06c", - }, - Object { - "color": "#009596", - "fill": "#a2d9d9", - "id": "hypervisorSockets", - "stroke": "#009596", - }, - Object { - "color": "#5752d1", - "fill": "#b2b0ea", - "id": "cloudSockets", - "stroke": "#5752d1", - }, - Object { - "id": "thresholdSockets", - }, - ], - "initialGuestsFilters": Array [ - Object { - "cell": [Function], - "header": "t(curiosity-inventory.header, {\\"context\\":\\"guestsDisplayName\\"})", - "id": "displayName", - }, - Object { - "cellWidth": 40, - "id": "inventoryId", - }, - Object { - "cell": [Function], - "cellWidth": 15, - "id": "lastSeen", - }, - ], - "initialInventoryFilters": Array [ - Object { - "cell": [Function], - "id": "displayName", - "isSortable": true, - }, - Object { - "cell": [Function], - "cellWidth": 20, - "id": "measurementType", - "isSortable": true, - }, - Object { - "cellWidth": 15, - "id": "sockets", - "isSortable": true, - "isWrappable": true, - }, - Object { - "cell": [Function], - "cellWidth": 15, - "id": "lastSeen", - "isSortable": true, - "isWrappable": true, - }, - ], - "query": Object {}, -} -`; - -exports[`RhelView Component should render a non-connected component: non-connected 1`] = ` - - - t(curiosity-view.title, {"appName":"Subscriptions","context":"RHEL"}) - - - - - - - - - - - - - - - - - - - - - -`; diff --git a/src/components/rhelView/rhelView.js b/src/components/rhelView/rhelView.js deleted file mode 100644 index 9978a9579..000000000 --- a/src/components/rhelView/rhelView.js +++ /dev/null @@ -1,375 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import { - chart_color_blue_100 as chartColorBlueLight, - chart_color_blue_300 as chartColorBlueDark, - chart_color_cyan_100 as chartColorCyanLight, - chart_color_cyan_300 as chartColorCyanDark, - chart_color_purple_100 as chartColorPurpleLight, - chart_color_purple_300 as chartColorPurpleDark -} from '@patternfly/react-tokens'; -import { Button, Label as PfLabel } from '@patternfly/react-core'; -import { DateFormat } from '@redhat-cloud-services/frontend-components/components/DateFormat'; -import moment from 'moment'; -import { PageLayout, PageHeader, PageMessages, PageSection, PageToolbar } from '../pageLayout/pageLayout'; -import { - RHSM_API_QUERY_SORT_DIRECTION_TYPES as SORT_DIRECTION_TYPES, - RHSM_API_QUERY_GRANULARITY_TYPES as GRANULARITY_TYPES, - RHSM_API_QUERY_TYPES, - RHSM_API_QUERY_SORT_TYPES, - RHSM_API_QUERY_SUBSCRIPTIONS_SORT_TYPES -} from '../../types/rhsmApiTypes'; -import { apiQueries, connect, reduxSelectors } from '../../redux'; -import GraphCard from '../graphCard/graphCard'; -import Toolbar from '../toolbar/toolbar'; -import InventoryList from '../inventoryList/inventoryList'; -import InventorySubscriptions from '../inventorySubscriptions/inventorySubscriptions'; -import InventoryTabs, { InventoryTab } from '../inventoryTabs/inventoryTabs'; -import BannerMessages from '../bannerMessages/bannerMessages'; -import { helpers } from '../../common'; -import { translate } from '../i18n/i18n'; - -/** - * A Red Hat Enterprise Linux encompassing view, and system architectures. - * - * @augments React.Component - */ -class RhelView extends React.Component { - componentDidMount() {} - - /** - * Render a RHEL view. - * - * @returns {Node} - */ - render() { - const { - initialGraphFilters, - initialGuestsFilters, - initialInventoryFilters, - initialInventorySettings, - initialSubscriptionsInventoryFilters, - initialToolbarFilters, - productLabel, - query, - graphTallyQuery, - inventoryHostsQuery, - inventorySubscriptionsQuery, - routeDetail, - t, - viewId - } = this.props; - const { - graphTallyQuery: initialGraphTallyQuery, - inventoryHostsQuery: initialInventoryHostsQuery, - inventorySubscriptionsQuery: initialInventorySubscriptionsQuery, - toolbarQuery - } = apiQueries.parseRhsmQuery(query, { graphTallyQuery, inventoryHostsQuery, inventorySubscriptionsQuery }); - - return ( - - - {t(`curiosity-view.title`, { appName: helpers.UI_DISPLAY_NAME, context: productLabel })} - - - - - - - - - - - - - - - - {!helpers.UI_DISABLED_TABLE_SUBSCRIPTIONS && ( - - - - )} - - - - ); - } -} - -/** - * Prop types. - * - * @type {{productLabel: string, inventorySubscriptionsQuery: object, query: object, - * initialSubscriptionsInventoryFilters: Array, initialInventorySettings: object, initialToolbarFilters: Array, - * viewId: string, t: Function, graphTallyQuery: object, inventoryHostsQuery: object, - * initialGraphFilters: Array, routeDetail: object, initialGuestsFilters: Array, - * initialInventoryFilters: Array}} - */ -RhelView.propTypes = { - query: PropTypes.object, - graphTallyQuery: PropTypes.shape({ - [RHSM_API_QUERY_TYPES.GRANULARITY]: PropTypes.oneOf([...Object.values(GRANULARITY_TYPES)]) - }), - inventoryHostsQuery: PropTypes.shape({ - [RHSM_API_QUERY_TYPES.LIMIT]: PropTypes.number, - [RHSM_API_QUERY_TYPES.OFFSET]: PropTypes.number, - [RHSM_API_QUERY_TYPES.SORT]: PropTypes.oneOf([...Object.values(RHSM_API_QUERY_SORT_TYPES)]), - [RHSM_API_QUERY_TYPES.DIRECTION]: PropTypes.oneOf([...Object.values(SORT_DIRECTION_TYPES)]) - }), - inventorySubscriptionsQuery: PropTypes.shape({ - [RHSM_API_QUERY_TYPES.LIMIT]: PropTypes.number, - [RHSM_API_QUERY_TYPES.OFFSET]: PropTypes.number, - [RHSM_API_QUERY_TYPES.SORT]: PropTypes.oneOf([...Object.values(RHSM_API_QUERY_SUBSCRIPTIONS_SORT_TYPES)]), - [RHSM_API_QUERY_TYPES.DIRECTION]: PropTypes.oneOf([...Object.values(SORT_DIRECTION_TYPES)]) - }), - initialGraphFilters: PropTypes.array, - initialGuestsFilters: PropTypes.array, - initialInventoryFilters: PropTypes.array, - initialInventorySettings: PropTypes.shape({ - hasGuests: PropTypes.func - }), - initialSubscriptionsInventoryFilters: PropTypes.array, - initialToolbarFilters: PropTypes.array, - productLabel: PropTypes.string, - routeDetail: PropTypes.shape({ - pathParameter: PropTypes.string.isRequired, - pathId: PropTypes.string, - routeItem: PropTypes.shape({ - title: PropTypes.string - }) - }).isRequired, - t: PropTypes.func, - viewId: PropTypes.string -}; - -/** - * Default props. - * - * @type {{productLabel: string, inventorySubscriptionsQuery: object, query: object, - * initialSubscriptionsInventoryFilters: Array, initialInventorySettings: object, initialToolbarFilters: Array, - * viewId: string, t: translate, graphTallyQuery: object, inventoryHostsQuery: object, - * initialGraphFilters: Array, initialGuestsFilters: Array, initialInventoryFilters: Array}} - */ -RhelView.defaultProps = { - query: {}, - graphTallyQuery: { - [RHSM_API_QUERY_TYPES.GRANULARITY]: GRANULARITY_TYPES.DAILY - }, - inventoryHostsQuery: { - [RHSM_API_QUERY_TYPES.SORT]: RHSM_API_QUERY_SORT_TYPES.LAST_SEEN, - [RHSM_API_QUERY_TYPES.DIRECTION]: SORT_DIRECTION_TYPES.ASCENDING, - [RHSM_API_QUERY_TYPES.LIMIT]: 100, - [RHSM_API_QUERY_TYPES.OFFSET]: 0 - }, - inventorySubscriptionsQuery: { - [RHSM_API_QUERY_TYPES.SORT]: RHSM_API_QUERY_SUBSCRIPTIONS_SORT_TYPES.UPCOMING_EVENT_DATE, - [RHSM_API_QUERY_TYPES.DIRECTION]: SORT_DIRECTION_TYPES.ASCENDING, - [RHSM_API_QUERY_TYPES.LIMIT]: 100, - [RHSM_API_QUERY_TYPES.OFFSET]: 0 - }, - initialGraphFilters: [ - { - id: 'physicalSockets', - fill: chartColorBlueLight.value, - stroke: chartColorBlueDark.value, - color: chartColorBlueDark.value - }, - { - id: 'hypervisorSockets', - fill: chartColorCyanLight.value, - stroke: chartColorCyanDark.value, - color: chartColorCyanDark.value - }, - { - id: 'cloudSockets', - fill: chartColorPurpleLight.value, - stroke: chartColorPurpleDark.value, - color: chartColorPurpleDark.value - }, - { id: 'thresholdSockets' } - ], - initialGuestsFilters: [ - { - id: 'displayName', - header: translate('curiosity-inventory.header', { context: 'guestsDisplayName' }), - cell: (data, session) => { - const { displayName, inventoryId } = data; - const { inventory: authorized } = session?.authorized || {}; - - if (!inventoryId?.value) { - return displayName?.value; - } - - if (!authorized) { - return displayName?.value || inventoryId?.value; - } - - return ( - - ); - } - }, - { - id: 'inventoryId', - cellWidth: 40 - }, - { - id: 'lastSeen', - cell: data => (data?.lastSeen?.value && ) || '', - cellWidth: 15 - } - ], - initialInventoryFilters: [ - { - id: 'displayName', - cell: (data, session) => { - const { displayName = {}, inventoryId = {}, numberOfGuests = {} } = data; - const { inventory: authorized } = session?.authorized || {}; - - if (!inventoryId.value) { - return displayName.value; - } - - let updatedDisplayName = displayName.value || inventoryId.value; - - if (authorized) { - updatedDisplayName = ( - - ); - } - - return ( - - {updatedDisplayName}{' '} - {(numberOfGuests.value && - translate('curiosity-inventory.label', { context: 'numberOfGuests', count: numberOfGuests.value }, [ - - ])) || - ''} - - ); - }, - isSortable: true - }, - { - id: 'measurementType', - cell: data => { - const { cloudProvider = {}, measurementType = {} } = data; - return ( - - {translate('curiosity-inventory.measurementType', { context: measurementType.value })}{' '} - {(cloudProvider.value && ( - - {translate('curiosity-inventory.cloudProvider', { context: cloudProvider.value })} - - )) || - ''} - - ); - }, - isSortable: true, - cellWidth: 20 - }, - { - id: 'sockets', - isSortable: true, - isWrappable: true, - cellWidth: 15 - }, - { - id: 'lastSeen', - cell: data => (data?.lastSeen?.value && ) || '', - isSortable: true, - isWrappable: true, - cellWidth: 15 - } - ], - initialInventorySettings: {}, - initialSubscriptionsInventoryFilters: [ - { - id: 'productName', - isSortable: true - }, - { - id: 'serviceLevel', - isSortable: true, - isWrappable: true, - cellWidth: 15 - }, - { - id: 'upcomingEventDate', - cell: data => - (data?.upcomingEventDate?.value && moment.utc(data?.upcomingEventDate?.value).format('YYYY-DD-MM')) || '', - isSortable: true, - isWrappable: true, - cellWidth: 15 - } - ], - initialToolbarFilters: [ - { - id: RHSM_API_QUERY_TYPES.SLA - }, - { - id: RHSM_API_QUERY_TYPES.USAGE, - selected: true - } - ], - productLabel: 'RHEL', - t: translate, - viewId: 'viewRHEL' -}; - -/** - * Create a selector from applied state, props. - * - * @type {Function} - */ -const makeMapStateToProps = reduxSelectors.view.makeView(RhelView.defaultProps); - -const ConnectedRhelView = connect(makeMapStateToProps)(RhelView); - -export { ConnectedRhelView as default, ConnectedRhelView, RhelView }; diff --git a/src/components/router/routerConfig.js b/src/components/router/routerConfig.js index 3f6b5e796..1d724e5d6 100644 --- a/src/components/router/routerConfig.js +++ b/src/components/router/routerConfig.js @@ -32,7 +32,7 @@ const platformModalRedirect = path.join(helpers.UI_DEPLOY_PATH_PREFIX, '/?not_en const routes = [ { to: '/:variant(rhel|rhel-arm|rhel-ibmpower|rhel-ibmz|rhel-x86)', - component: React.lazy(() => import('../rhelView/rhelView')), + component: React.lazy(() => import('../productView/productViewRhel')), exact: true, render: true, disabled: helpers.UI_DISABLED