diff --git a/public/locales/en-US.json b/public/locales/en-US.json index 13d83308f..f7ca6623c 100644 --- a/public/locales/en-US.json +++ b/public/locales/en-US.json @@ -8,7 +8,11 @@ "dropdownPlaceholder": "Select date range", "noDataLabel": "No data", "dateLabel": "Date", + "coresLabel": "Cores", + "socketsLabel": "Sockets", + "hypervisorCoresLabel": "Virtualized cores", "hypervisorSocketsLabel": "Virtualized {{product}}", + "physicalCoresLabel": "Physical cores", "physicalSocketsLabel": "Physical {{product}}", "thresholdLabel": "Subscription threshold" }, diff --git a/src/components/i18n/__tests__/__snapshots__/i18n.test.js.snap b/src/components/i18n/__tests__/__snapshots__/i18n.test.js.snap index 1c7ccf666..e0f06fa45 100644 --- a/src/components/i18n/__tests__/__snapshots__/i18n.test.js.snap +++ b/src/components/i18n/__tests__/__snapshots__/i18n.test.js.snap @@ -26,8 +26,8 @@ msgstr \\"\\" msgid \\"curiosity-graph.dropdownMonthly\\" msgstr \\"\\" -#: src/components/rhelGraphCard/rhelGraphCard.js:145 -#: src/components/rhelGraphCard/rhelGraphCard.js:149 +#: src/components/rhelGraphCard/rhelGraphCard.js:130 +#: src/components/rhelGraphCard/rhelGraphCard.js:134 msgid \\"curiosity-graph.dropdownPlaceholder\\" msgstr \\"\\" @@ -39,26 +39,14 @@ msgstr \\"\\" msgid \\"curiosity-graph.dropdownWeekly\\" msgstr \\"\\" -#: src/components/rhelGraphCard/rhelGraphCard.js:142 +#: src/components/rhelGraphCard/rhelGraphCard.js:127 msgid \\"curiosity-graph.heading\\" msgstr \\"\\" -#: src/components/rhelGraphCard/rhelGraphCard.js:111 -msgid \\"curiosity-graph.hypervisorSocketsLabel\\" -msgstr \\"\\" - #: src/components/rhelGraphCard/rhelGraphCardHelpers.js:90 msgid \\"curiosity-graph.noDataLabel\\" msgstr \\"\\" -#: src/components/rhelGraphCard/rhelGraphCard.js:99 -msgid \\"curiosity-graph.physicalSocketsLabel\\" -msgstr \\"\\" - -#: src/components/rhelGraphCard/rhelGraphCard.js:122 -msgid \\"curiosity-graph.thresholdLabel\\" -msgstr \\"\\" - #: src/components/tourView/tourView.js:53 msgid \\"curiosity-tour.emptyStateButton\\" msgstr \\"\\" diff --git a/src/components/rhelGraphCard/__tests__/__snapshots__/rhelGraphCard.test.js.snap b/src/components/rhelGraphCard/__tests__/__snapshots__/rhelGraphCard.test.js.snap index f275b55ca..8834d32b3 100644 --- a/src/components/rhelGraphCard/__tests__/__snapshots__/rhelGraphCard.test.js.snap +++ b/src/components/rhelGraphCard/__tests__/__snapshots__/rhelGraphCard.test.js.snap @@ -48,51 +48,7 @@ exports[`RhelGraphCard Component should render a non-connected component: non-co className="curiosity-skeleton-container" > `; -exports[`RhelGraphCard Component should render multiple states: error shows zeroed bar values 1`] = ` +exports[`RhelGraphCard Component should render multiple states: error passes values 1`] = ` Object { "chartBarData": Array [ Object { @@ -142,38 +98,10 @@ Object { "y": 3, }, ], - "fill": "#8bc1f7", "id": "physicalSockets", "isStacked": true, + "isThreshold": false, "legendLabel": "t(curiosity-graph.physicalSocketsLabel, [object Object])", - "stroke": "#06c", - }, - Object { - "animate": Object { - "duration": 250, - "onLoad": Object { - "duration": 250, - }, - }, - "data": undefined, - "fill": "#a2d9d9", - "id": "hypervisorSockets", - "isStacked": true, - "legendLabel": "t(curiosity-graph.hypervisorSocketsLabel, [object Object])", - "stroke": "#009596", - }, - Object { - "animate": Object { - "duration": 100, - "onLoad": Object { - "duration": 100, - }, - }, - "data": undefined, - "id": "threshold", - "isThreshold": true, - "legendLabel": "t(curiosity-graph.thresholdLabel)", - "stroke": "#4cb140", }, ], } @@ -265,38 +193,10 @@ exports[`RhelGraphCard Component should render multiple states: fulfilled 1`] = "y": 3, }, ], - "fill": "#8bc1f7", "id": "physicalSockets", "isStacked": true, + "isThreshold": false, "legendLabel": "t(curiosity-graph.physicalSocketsLabel, [object Object])", - "stroke": "#06c", - }, - Object { - "animate": Object { - "duration": 250, - "onLoad": Object { - "duration": 250, - }, - }, - "data": undefined, - "fill": "#a2d9d9", - "id": "hypervisorSockets", - "isStacked": true, - "legendLabel": "t(curiosity-graph.hypervisorSocketsLabel, [object Object])", - "stroke": "#009596", - }, - Object { - "animate": Object { - "duration": 100, - "onLoad": Object { - "duration": 100, - }, - }, - "data": undefined, - "id": "threshold", - "isThreshold": true, - "legendLabel": "t(curiosity-graph.thresholdLabel)", - "stroke": "#4cb140", }, ] } diff --git a/src/components/rhelGraphCard/__tests__/rhelGraphCard.test.js b/src/components/rhelGraphCard/__tests__/rhelGraphCard.test.js index 4646c8fe2..63361250f 100644 --- a/src/components/rhelGraphCard/__tests__/rhelGraphCard.test.js +++ b/src/components/rhelGraphCard/__tests__/rhelGraphCard.test.js @@ -44,7 +44,7 @@ describe('RhelGraphCard Component', () => { expect({ chartBarData: component.find(ChartArea).prop('dataSets') - }).toMatchSnapshot('error shows zeroed bar values'); + }).toMatchSnapshot('error passes values'); component.setProps({ errorStatus: 403, diff --git a/src/components/rhelGraphCard/rhelGraphCard.js b/src/components/rhelGraphCard/rhelGraphCard.js index 882fd4d57..a9a0fe13b 100644 --- a/src/components/rhelGraphCard/rhelGraphCard.js +++ b/src/components/rhelGraphCard/rhelGraphCard.js @@ -2,13 +2,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import { Redirect } from 'react-router-dom'; import { Card, CardHead, CardActions, CardBody } from '@patternfly/react-core'; -import { - chart_color_green_300 as chartColorGreenDark, - chart_color_blue_100 as chartColorBlueLight, - chart_color_blue_300 as chartColorBlueDark, - chart_color_cyan_100 as chartColorCyanLight, - chart_color_cyan_300 as chartColorCyanDark -} from '@patternfly/react-tokens'; +import { chart_color_green_300 as chartColorGreenDark } from '@patternfly/react-tokens'; import { Skeleton, SkeletonSize } from '@redhat-cloud-services/frontend-components'; import { Select } from '../select/select'; import { connectTranslate, reduxActions, reduxSelectors, reduxTypes, store } from '../../redux'; @@ -58,7 +52,7 @@ class RhelGraphCard extends React.Component { }; renderChart() { - const { graphData, graphGranularity, t } = this.props; + const { filterGraphData, graphData, graphGranularity, t, translateProduct } = this.props; const xAxisTickFormat = ({ item, previousItem, tick }) => rhelGraphCardHelpers.xAxisTickFormat({ @@ -72,7 +66,7 @@ class RhelGraphCard extends React.Component { rhelGraphCardHelpers.getTooltips({ itemsByKey, granularity: graphGranularity, - product: 'RHEL' + product: translateProduct }); const chartAreaProps = { @@ -83,48 +77,39 @@ class RhelGraphCard extends React.Component { tooltips }; - return ( - { + const filtered = key => { + const tempFiltered = { + data: data[key], + id: key, + animate: { + duration: 250, + onLoad: { duration: 250 } }, - { - data: graphData.threshold, - id: 'threshold', - animate: { - duration: 100, - onLoad: { duration: 100 } - }, - stroke: chartColorGreenDark.value, - legendLabel: t('curiosity-graph.thresholdLabel'), - isThreshold: true - } - ]} - /> - ); + legendLabel: t(`curiosity-graph.${key}Label`, { product: translateProduct }), + isStacked: key !== 'threshold', + isThreshold: key === 'threshold' + }; + + if (key === 'threshold') { + tempFiltered.animate = { + duration: 100, + onLoad: { duration: 100 } + }; + tempFiltered.stroke = chartColorGreenDark.value; + } + + return tempFiltered; + }; + + if (filterGraphData.length) { + return filterGraphData.map(value => Object.assign(filtered(value.id), value)); + } + + return Object.keys(data).map(key => filtered(key)); + }; + + return ; } // ToDo: combine "curiosity-skeleton-container" into a single class w/ --loading and BEM style @@ -174,31 +159,16 @@ RhelGraphCard.propTypes = { to: PropTypes.string }), errorStatus: PropTypes.number, + filterGraphData: PropTypes.arrayOf( + PropTypes.shape({ + id: PropTypes.string, + fill: PropTypes.string, + stroke: PropTypes.string + }) + ), getGraphCapacity: PropTypes.func, getGraphReports: PropTypes.func, - graphData: PropTypes.shape({ - physicalSockets: PropTypes.arrayOf( - PropTypes.shape({ - date: PropTypes.instanceOf(Date), - x: PropTypes.number, - y: PropTypes.number - }) - ), - hypervisorSockets: PropTypes.arrayOf( - PropTypes.shape({ - date: PropTypes.instanceOf(Date), - x: PropTypes.number, - y: PropTypes.number - }) - ), - threshold: PropTypes.arrayOf( - PropTypes.shape({ - date: PropTypes.instanceOf(Date), - x: PropTypes.number, - y: PropTypes.number - }) - ) - }), + graphData: PropTypes.object, graphGranularity: PropTypes.oneOf([ GRANULARITY_TYPES.DAILY, GRANULARITY_TYPES.WEEKLY, @@ -209,6 +179,7 @@ RhelGraphCard.propTypes = { productId: PropTypes.string, selectOptionsType: PropTypes.oneOf(['default']), t: PropTypes.func, + translateProduct: PropTypes.string, startDate: PropTypes.instanceOf(Date), endDate: PropTypes.instanceOf(Date) }; @@ -217,18 +188,16 @@ RhelGraphCard.defaultProps = { error: false, errorRoute: {}, errorStatus: null, + filterGraphData: [], getGraphCapacity: helpers.noop, getGraphReports: helpers.noop, - graphData: { - physicalSockets: [], - hypervisorSockets: [], - threshold: [] - }, + graphData: {}, graphGranularity: GRANULARITY_TYPES.DAILY, pending: false, productId: rhsmApiTypes.RHSM_API_PATH_ID_TYPES.RHEL, selectOptionsType: 'default', t: helpers.noopTranslate, + translateProduct: 'RHEL', startDate: dateHelpers.defaultDateTime.startDate, endDate: dateHelpers.defaultDateTime.endDate }; diff --git a/src/components/rhelView/__tests__/__snapshots__/rhelView.test.js.snap b/src/components/rhelView/__tests__/__snapshots__/rhelView.test.js.snap index 512d3dfc9..a53aef39c 100644 --- a/src/components/rhelView/__tests__/__snapshots__/rhelView.test.js.snap +++ b/src/components/rhelView/__tests__/__snapshots__/rhelView.test.js.snap @@ -9,6 +9,23 @@ exports[`RhelView Component should have a fallback title: title 1`] = ` @@ -25,6 +42,23 @@ exports[`RhelView Component should render a non-connected component: non-connect diff --git a/src/components/rhelView/rhelView.js b/src/components/rhelView/rhelView.js index 0b71510a7..bd8ce343e 100644 --- a/src/components/rhelView/rhelView.js +++ b/src/components/rhelView/rhelView.js @@ -1,8 +1,13 @@ 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 +} from '@patternfly/react-tokens'; import { PageHeader, PageHeaderTitle } from '@redhat-cloud-services/frontend-components'; import { PageSection } from '@patternfly/react-core'; -import { connectRouter } from '../../redux'; import RhelGraphCard from '../rhelGraphCard/rhelGraphCard'; import { helpers } from '../../common'; @@ -22,6 +27,11 @@ class RhelView extends React.Component { @@ -47,11 +57,4 @@ RhelView.defaultProps = { routeDetail: {} }; -const mapStateToProps = () => ({}); - -const mapDispatchToProps = () => ({}); - -// Todo: clean up "connected" component appears unnecessary, look at converting from class -const ConnectedRhelView = connectRouter(mapStateToProps, mapDispatchToProps)(RhelView); - -export { ConnectedRhelView as default, ConnectedRhelView, RhelView }; +export { RhelView as default, RhelView };