From d4ad09384790d92c2cb492b1e56f4e1287ae7648 Mon Sep 17 00:00:00 2001 From: Patrick Riley Date: Thu, 18 Jul 2019 09:54:43 -0400 Subject: [PATCH] feat(chartGraph): convert graph data, add error/loading states (#40) * parse the Redux date and sockets inputs and generate chart data and tooltips * add error state and zeroed array * loading skeletor * graphHelpers, rhelGraphCard replace translate refs * rhelGraphCard, consolidate logic * update integration snapshots * graphHelpers, minor UTC correction, snapshot corrections * dateHelpers, initial date defaults, prep for additional date functions * helpers, index layout * rhelGraphCard, replace default startDate, endDate props with helper --- public/locales/en.json | 4 +- .../__snapshots__/dateHelpers.test.js.snap | 10 + .../__snapshots__/graphHelpers.test.js.snap | 76 +++++- src/common/__tests__/dateHelpers.test.js | 7 + src/common/__tests__/graphHelpers.test.js | 48 +++- src/common/dateHelpers.js | 21 ++ src/common/graphHelpers.js | 143 +++++++--- src/common/index.js | 5 + .../__snapshots__/rhelGraphCard.test.js.snap | 257 ++++++++++++++---- .../__tests__/rhelGraphCard.test.js | 16 +- src/components/rhelGraphCard/rhelGraphCard.js | 75 +++-- src/services/rhelServices.js | 36 +-- src/styles/_usage-graph.scss | 12 + tests/__snapshots__/i18n.test.js.snap | 14 +- 14 files changed, 571 insertions(+), 153 deletions(-) create mode 100644 src/common/__tests__/__snapshots__/dateHelpers.test.js.snap create mode 100644 src/common/__tests__/dateHelpers.test.js create mode 100644 src/common/dateHelpers.js create mode 100644 src/common/index.js diff --git a/public/locales/en.json b/public/locales/en.json index da2591543..bf10becfc 100644 --- a/public/locales/en.json +++ b/public/locales/en.json @@ -1,6 +1,8 @@ { "curiosity-graph": { "heading": "Daily CPU socket usage", - "dropdownDefault": "Last 30 Days" + "dropdownDefault": "Last 30 Days", + "socketsOn": "sockets on", + "fromPrevious": "from previous day" } } diff --git a/src/common/__tests__/__snapshots__/dateHelpers.test.js.snap b/src/common/__tests__/__snapshots__/dateHelpers.test.js.snap new file mode 100644 index 000000000..009b78164 --- /dev/null +++ b/src/common/__tests__/__snapshots__/dateHelpers.test.js.snap @@ -0,0 +1,10 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`DateHelpers should have specific functions: dateHelpers 1`] = ` +Object { + "defaultDateTime": Object { + "end": null, + "start": null, + }, +} +`; diff --git a/src/common/__tests__/__snapshots__/graphHelpers.test.js.snap b/src/common/__tests__/__snapshots__/graphHelpers.test.js.snap index 93d63594c..b1f75513f 100644 --- a/src/common/__tests__/__snapshots__/graphHelpers.test.js.snap +++ b/src/common/__tests__/__snapshots__/graphHelpers.test.js.snap @@ -1,11 +1,85 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`GraphHelpers should have specific functions: helpers 1`] = ` +exports[`GraphHelpers should convert graph data and generate tooltips when usage is populated: usage populated 1`] = ` +Array [ + Object { + "label": "56 sockets on Jun 1", + "x": "Jun 1", + "y": 56, + }, + Object { + "label": "30 sockets on Jun 2 + -26 from previous day", + "x": "Jun 2", + "y": 30, + }, + Object { + "label": "40 sockets on Jun 3 + +10 from previous day", + "x": "Jun 3", + "y": 40, + }, +] +`; + +exports[`GraphHelpers should convert graph data and return zeroed usage array if usage is empty: zeroed array 1`] = ` +Array [ + Object { + "x": "Jun 1", + "y": "0", + }, + Object { + "x": "Jun 2", + "y": "0", + }, + Object { + "x": "Jun 3", + "y": "0", + }, + Object { + "x": "Jun 4", + "y": "0", + }, + Object { + "x": "Jun 5", + "y": "0", + }, +] +`; + +exports[`GraphHelpers should convert graph data and returned zeroed array when usage throws error: throws error 1`] = ` +Array [ + Object { + "x": "Jun 1", + "y": "0", + }, + Object { + "x": "Jun 2", + "y": "0", + }, + Object { + "x": "Jun 3", + "y": "0", + }, + Object { + "x": "Jun 4", + "y": "0", + }, + Object { + "x": "Jun 5", + "y": "0", + }, +] +`; + +exports[`GraphHelpers should have specific functions: graphHelpers 1`] = ` Object { + "chartDateFormat": "MMM D", "convertGraphData": [Function], "getGraphHeight": [Function], "getTooltipDimensions": [Function], "getTooltipFontSize": [Function], + "zeroedUsageData": [Function], } `; diff --git a/src/common/__tests__/dateHelpers.test.js b/src/common/__tests__/dateHelpers.test.js new file mode 100644 index 000000000..0a5ca37b9 --- /dev/null +++ b/src/common/__tests__/dateHelpers.test.js @@ -0,0 +1,7 @@ +import { dateHelpers } from '../dateHelpers'; + +describe('DateHelpers', () => { + it('should have specific functions', () => { + expect(dateHelpers).toMatchSnapshot('dateHelpers'); + }); +}); diff --git a/src/common/__tests__/graphHelpers.test.js b/src/common/__tests__/graphHelpers.test.js index f79cc06b5..60f30deed 100644 --- a/src/common/__tests__/graphHelpers.test.js +++ b/src/common/__tests__/graphHelpers.test.js @@ -1,11 +1,55 @@ -import { graphHelpers, getGraphHeight, getTooltipDimensions, getTooltipFontSize } from '../graphHelpers'; +import { + graphHelpers, + convertGraphData, + getGraphHeight, + getTooltipDimensions, + getTooltipFontSize +} from '../graphHelpers'; import { helpers } from '../helpers'; describe('GraphHelpers', () => { const { breakpoints } = helpers; + const startDate = new Date('2019-06-01T00:00:00Z'); + const endDate = new Date('2019-06-05T00:00:00Z'); + const socketLabel = 'sockets on'; + const previousLabel = 'from previous day'; it('should have specific functions', () => { - expect(graphHelpers).toMatchSnapshot('helpers'); + expect(graphHelpers).toMatchSnapshot('graphHelpers'); + }); + + it('should convert graph data and return zeroed usage array if usage is empty', () => { + expect(convertGraphData({ usage: [], startDate, endDate, socketLabel, previousLabel })).toMatchSnapshot( + 'zeroed array' + ); + }); + + it('should convert graph data and generate tooltips when usage is populated', () => { + expect( + convertGraphData({ + usage: [ + { cores: 56, date: '2019-06-01T00:00:00Z', instance_count: 28 }, + { cores: 30, date: '2019-06-02T00:00:00Z', instance_count: 28 }, + { cores: 40, date: '2019-06-03T00:00:00Z', instance_count: 28 } + ], + startDate, + endDate, + socketLabel, + previousLabel + }) + ).toMatchSnapshot('usage populated'); + }); + + it('should convert graph data and returned zeroed array when usage throws error', () => { + expect( + convertGraphData({ + usage: [null], // unexpected usage, will throw exception + startDate, + endDate, + socketLabel, + previousLabel + }) + ).toMatchSnapshot('throws error'); }); it('should match graph heights at all breakpoints', () => { diff --git a/src/common/dateHelpers.js b/src/common/dateHelpers.js new file mode 100644 index 000000000..f97053ca8 --- /dev/null +++ b/src/common/dateHelpers.js @@ -0,0 +1,21 @@ +import moment from 'moment/moment'; +import { helpers } from './helpers'; + +const defaultDateTime = (helpers.TEST_MODE && { + start: null, + end: null +}) || { + start: moment() + .utc() + .startOf('day') + .subtract(30, 'days'), + end: moment() + .utc() + .endOf('day') +}; + +const dateHelpers = { + defaultDateTime +}; + +export { dateHelpers as default, dateHelpers, defaultDateTime }; diff --git a/src/common/graphHelpers.js b/src/common/graphHelpers.js index e8780a99d..49482c771 100644 --- a/src/common/graphHelpers.js +++ b/src/common/graphHelpers.js @@ -1,39 +1,97 @@ -const convertGraphData = () => { - // todo: convert passed params to consumable chart data - - return [ - { x: 'May 25', y: 30, label: '30 Sockets on May 25' }, - { x: 'May 26', y: 60, label: '60 Sockets on May 26 \r\n +30 from previous day' }, - { x: 'May 27', y: 1 }, - { x: 'May 28', y: 1 }, - { x: 'May 29', y: 2 }, - { x: 'May 30', y: 2 }, - { x: 'May 31', y: 2 }, - { x: 'Jun 1', y: 2 }, - { x: 'Jun 2', y: 2 }, - { x: 'Jun 3', y: 2 }, - { x: 'Jun 4', y: 2 }, - { x: 'Jun 5', y: 2 }, - { x: 'Jun 6', y: 3 }, - { x: 'Jun 7', y: 3 }, - { x: 'Jun 8', y: 3 }, - { x: 'Jun 9', y: 3 }, - { x: 'Jun 10', y: 4 }, - { x: 'Jun 11', y: 4 }, - { x: 'Jun 12', y: 4 }, - { x: 'Jun 13', y: 4 }, - { x: 'Jun 14', y: 4 }, - { x: 'Jun 15', y: 4 }, - { x: 'Jun 16', y: 4 }, - { x: 'Jun 17', y: 3 }, - { x: 'Jun 18', y: 3 }, - { x: 'Jun 19', y: 1 }, - { x: 'Jun 20', y: 2 }, - { x: 'Jun 21', y: 5 }, - { x: 'Jun 22', y: 3 }, - { x: 'Jun 23', y: 1 }, - { x: 'Jun 24', y: 1 } - ]; +import moment from 'moment'; +import { rhelApiTypes } from '../types/rhelApiTypes'; +import { helpers } from './helpers'; + +const chartDateFormat = 'MMM D'; + +/** + * Generate a fallback graph with zeroed data + * + * @param startDate {string} + * @param endDate {string} + * @returns {Array} + */ +const zeroedUsageData = (startDate, endDate) => { + const zeroedArray = []; + const endDateStartDateDiff = moment(endDate).diff(startDate, 'days'); + + // todo: convert "y" back towards a number if/when we handle "chartDomain.y = [0, 100]" within helpers + for (let i = 0; i <= endDateStartDateDiff; i++) { + const clonedStartDate = moment.utc(startDate); + zeroedArray.push({ + x: clonedStartDate.add(i, 'days').format(chartDateFormat), + y: '0' + }); + } + + return zeroedArray; +}; + +/** + * Apply label formatting + * + * @param cores {number} + * @param previousCores {number} + * @param formattedDate {string} + * @param socketLabel {string} + * @param previousLabel {string} + * @returns {string} + */ +const getLabel = ({ cores, previousCores, formattedDate, socketLabel, previousLabel }) => { + const prev = cores - previousCores; + const label = `${cores} ${socketLabel} ${formattedDate}`; + + if (previousCores === null) { + return label; + } + + return `${label}\n ${prev > -1 ? '+' : ''}${prev} ${previousLabel}`; +}; + +/** + * Convert graph data to usable format + * convert json usage report from this format: + * {cores: 56, date: "2019-06-01T00:00:00Z", instance_count: 28} + * to this format: + * { x: 'Jun 1', y: 56, label: '56 Sockets on Jun 1 \r\n +5 from previous day' } + * + * @param usage {Array} + * @param startDate {string} + * @param endDate {string} + * @param socketLabel {string} + * @param previousLabel {string} + * @returns {Array} + */ +const convertGraphData = ({ usage, startDate, endDate, socketLabel, previousLabel }) => { + let chartData = []; + + try { + for (let i = 0; i < usage.length; i++) { + const formattedDate = moment + .utc(usage[i][rhelApiTypes.RHSM_API_RESPONSE_PRODUCTS_DATA_DATE]) + .format(chartDateFormat); + + const label = getLabel({ + cores: usage[i][rhelApiTypes.RHSM_API_RESPONSE_PRODUCTS_DATA_CORES], + previousCores: i > 0 ? usage[i - 1][rhelApiTypes.RHSM_API_RESPONSE_PRODUCTS_DATA_CORES] : null, + formattedDate, + socketLabel, + previousLabel + }); + + chartData.push({ x: formattedDate, y: usage[i][rhelApiTypes.RHSM_API_RESPONSE_PRODUCTS_DATA_CORES], label }); + } + } catch (e) { + if (!helpers.TEST_MODE) { + console.warn(`Malformed API response ${e.message}`); + } + } + + if (!chartData.length) { + chartData = zeroedUsageData(startDate, endDate); + } + + return chartData; }; const getGraphHeight = (breakpoints, currentBreakpoint) => @@ -68,13 +126,22 @@ const getTooltipFontSize = (breakpoints, currentBreakpoint) => { return 14; }; -const graphHelpers = { convertGraphData, getGraphHeight, getTooltipDimensions, getTooltipFontSize }; +const graphHelpers = { + chartDateFormat, + convertGraphData, + getGraphHeight, + getTooltipDimensions, + getTooltipFontSize, + zeroedUsageData +}; export { graphHelpers as default, graphHelpers, + chartDateFormat, convertGraphData, getGraphHeight, getTooltipDimensions, - getTooltipFontSize + getTooltipFontSize, + zeroedUsageData }; diff --git a/src/common/index.js b/src/common/index.js new file mode 100644 index 000000000..e998c3f1f --- /dev/null +++ b/src/common/index.js @@ -0,0 +1,5 @@ +import { helpers } from './helpers'; +import { dateHelpers } from './dateHelpers'; +import { graphHelpers } from './graphHelpers'; + +export { helpers as default, helpers, dateHelpers, graphHelpers }; diff --git a/src/components/rhelGraphCard/__tests__/__snapshots__/rhelGraphCard.test.js.snap b/src/components/rhelGraphCard/__tests__/__snapshots__/rhelGraphCard.test.js.snap index a1be66630..413820bc7 100644 --- a/src/components/rhelGraphCard/__tests__/__snapshots__/rhelGraphCard.test.js.snap +++ b/src/components/rhelGraphCard/__tests__/__snapshots__/rhelGraphCard.test.js.snap @@ -64,6 +64,7 @@ exports[`RhelGraphCard Component should render a non-connected component: non-co `; -exports[`RhelGraphCard Component should render multiple states: error 1`] = `""`; +exports[`RhelGraphCard Component should render multiple states: error shows zeroed bar values 1`] = ` +Object { + "chartBarData": Array [ + Object { + "x": "Jun 1", + "y": "0", + }, + Object { + "x": "Jun 2", + "y": "0", + }, + Object { + "x": "Jun 3", + "y": "0", + }, + Object { + "x": "Jun 4", + "y": "0", + }, + Object { + "x": "Jun 5", + "y": "0", + }, + Object { + "x": "Jun 6", + "y": "0", + }, + Object { + "x": "Jun 7", + "y": "0", + }, + Object { + "x": "Jun 8", + "y": "0", + }, + Object { + "x": "Jun 9", + "y": "0", + }, + Object { + "x": "Jun 10", + "y": "0", + }, + Object { + "x": "Jun 11", + "y": "0", + }, + Object { + "x": "Jun 12", + "y": "0", + }, + Object { + "x": "Jun 13", + "y": "0", + }, + Object { + "x": "Jun 14", + "y": "0", + }, + Object { + "x": "Jun 15", + "y": "0", + }, + Object { + "x": "Jun 16", + "y": "0", + }, + Object { + "x": "Jun 17", + "y": "0", + }, + Object { + "x": "Jun 18", + "y": "0", + }, + Object { + "x": "Jun 19", + "y": "0", + }, + Object { + "x": "Jun 20", + "y": "0", + }, + Object { + "x": "Jun 21", + "y": "0", + }, + Object { + "x": "Jun 22", + "y": "0", + }, + Object { + "x": "Jun 23", + "y": "0", + }, + Object { + "x": "Jun 24", + "y": "0", + }, + Object { + "x": "Jun 25", + "y": "0", + }, + Object { + "x": "Jun 26", + "y": "0", + }, + Object { + "x": "Jun 27", + "y": "0", + }, + Object { + "x": "Jun 28", + "y": "0", + }, + Object { + "x": "Jun 29", + "y": "0", + }, + Object { + "x": "Jun 30", + "y": "0", + }, + ], +} +`; exports[`RhelGraphCard Component should render multiple states: fulfilled 1`] = `
- - Loading... - + + + +
diff --git a/src/components/rhelGraphCard/__tests__/rhelGraphCard.test.js b/src/components/rhelGraphCard/__tests__/rhelGraphCard.test.js index 1cf8f1665..15919ed77 100644 --- a/src/components/rhelGraphCard/__tests__/rhelGraphCard.test.js +++ b/src/components/rhelGraphCard/__tests__/rhelGraphCard.test.js @@ -2,13 +2,15 @@ import React from 'react'; import { mount, shallow } from 'enzyme'; import { Chart, ChartBar } from '@patternfly/react-charts'; import { RhelGraphCard } from '../rhelGraphCard'; -import { helpers } from '../../../common/helpers'; +import { helpers } from '../../../common'; describe('RhelGraphCard Component', () => { const { breakpoints } = helpers; + const startDate = new Date('2019-06-01T00:00:00Z'); + const endDate = new Date('2019-06-30T00:00:00Z'); it('should render a non-connected component', () => { - const props = {}; + const props = { startDate, endDate }; const component = mount(); @@ -16,7 +18,7 @@ describe('RhelGraphCard Component', () => { }); it('should render multiple states', () => { - const props = {}; + const props = { startDate, endDate }; const component = shallow(); @@ -24,7 +26,9 @@ describe('RhelGraphCard Component', () => { error: true }); - expect(component).toMatchSnapshot('error'); + expect({ + chartBarData: component.find(ChartBar).prop('data') + }).toMatchSnapshot('error shows zeroed bar values'); component.setProps({ error: false, @@ -48,7 +52,9 @@ describe('RhelGraphCard Component', () => { pending: false, fulfilled: true, breakpoints, - currentBreakpoint: 'xs' + currentBreakpoint: 'xs', + startDate, + endDate }; const component = shallow(); diff --git a/src/components/rhelGraphCard/rhelGraphCard.js b/src/components/rhelGraphCard/rhelGraphCard.js index 7230edd85..185487c8a 100644 --- a/src/components/rhelGraphCard/rhelGraphCard.js +++ b/src/components/rhelGraphCard/rhelGraphCard.js @@ -10,47 +10,67 @@ import { DropdownToggle, DropdownPosition } from '@patternfly/react-core'; +import { Skeleton, SkeletonSize } from '@redhat-cloud-services/frontend-components'; import { Chart, ChartBar, ChartBaseTheme, ChartLabel, ChartStack, ChartTooltip } from '@patternfly/react-charts'; import { connectTranslate, reduxActions } from '../../redux'; -import { helpers } from '../../common/helpers'; -import { graphHelpers } from '../../common/graphHelpers'; +import { helpers, dateHelpers, graphHelpers } from '../../common'; import { rhelApiTypes } from '../../types/rhelApiTypes'; class RhelGraphCard extends React.Component { - state = { isOpen: false }; + state = { dropdownIsOpen: false }; componentDidMount() { - const { getGraphReports } = this.props; + const { getGraphReports, startDate, endDate } = this.props; getGraphReports({ [rhelApiTypes.RHSM_API_QUERY_GRANULARITY]: 'daily', - [rhelApiTypes.RHSM_API_QUERY_START_DATE]: '2019-01-01T00:00:00Z', - [rhelApiTypes.RHSM_API_QUERY_END_DATE]: '2019-01-31T00:00:00Z' + [rhelApiTypes.RHSM_API_QUERY_START_DATE]: startDate.toISOString(), + [rhelApiTypes.RHSM_API_QUERY_END_DATE]: endDate.toISOString() }); } - onToggle = isOpen => { + onToggle = dropdownIsOpen => { this.setState({ - isOpen + dropdownIsOpen }); }; onSelect = () => { this.setState(prevState => ({ - isOpen: !prevState.state.isOpen + dropdownIsOpen: !prevState.state.dropdownIsOpen })); }; render() { - const { error, fulfilled, graphData, pending, t, breakpoints, currentBreakpoint } = this.props; - const { isOpen } = this.state; + const { error, fulfilled, graphData, pending, t, breakpoints, currentBreakpoint, startDate, endDate } = this.props; + const { dropdownIsOpen } = this.state; + + const graphHeight = graphHelpers.getGraphHeight(breakpoints, currentBreakpoint); + const tooltipDimensions = graphHelpers.getTooltipDimensions(breakpoints, currentBreakpoint); + + // todo: evaluate the granularity here: "daily" "weekly" etc. this may need to move towards the helpers + const chartDomain = { x: [0, 31] }; + + let chartData; if (error) { - return null; + // todo: evaluate show error toast + // todo: this only fires on error, not in the event an array with a valid zero length. + // todo: we may need to combine error and fulfilled checks and handle the x and y axis defaults in the helpers + // note: specify a y range if we are showing the zeroed view + chartDomain.y = [0, 100]; + chartData = graphHelpers.zeroedUsageData(startDate, endDate); } - // todo: construct chartData using graphData in the reducer... - const chartData = graphHelpers.convertGraphData({ ...graphData }); + if (fulfilled) { + chartData = graphHelpers.convertGraphData({ + usage: graphData.usage, + startDate, + endDate, + socketLabel: t('curiosity-graph.socketsOn', 'sockets on'), + previousLabel: t('curiosity-graph.fromPrevious', 'from previous day') + }); + } const dropdownToggle = ( @@ -58,10 +78,6 @@ class RhelGraphCard extends React.Component { ); - // heights are breakpoint specific since they are scaled via svg - const graphHeight = graphHelpers.getGraphHeight(breakpoints, currentBreakpoint); - const tooltipDimensions = graphHelpers.getTooltipDimensions(breakpoints, currentBreakpoint); - const tooltipTheme = { ...ChartBaseTheme, tooltip: { @@ -70,6 +86,7 @@ class RhelGraphCard extends React.Component { pointerWidth: 15 } }; + const textStyle = { // note: fontSize will also determine vertical space between tooltip tspans fontSize: graphHelpers.getTooltipFontSize(breakpoints, currentBreakpoint) @@ -84,7 +101,6 @@ class RhelGraphCard extends React.Component { /> ); - // todo: correct pending/loading display return ( @@ -94,22 +110,25 @@ class RhelGraphCard extends React.Component { onSelect={this.onSelect} position={DropdownPosition.right} toggle={dropdownToggle} - isOpen={isOpen} + isOpen={dropdownIsOpen} dropdownItems={[]} /> {pending && ( -
- Loading... +
+ + + +
)} - {fulfilled && ( + {(fulfilled || error) && (
- + @@ -139,7 +158,9 @@ RhelGraphCard.propTypes = { xl: PropTypes.number, xl2: PropTypes.number }), - currentBreakpoint: PropTypes.string + currentBreakpoint: PropTypes.string, + startDate: PropTypes.instanceOf(Date), + endDate: PropTypes.instanceOf(Date) }; RhelGraphCard.defaultProps = { @@ -152,7 +173,9 @@ RhelGraphCard.defaultProps = { pending: false, t: helpers.noopTranslate, breakpoints: {}, - currentBreakpoint: '' + currentBreakpoint: '', + startDate: dateHelpers.defaultDateTime.start, + endDate: dateHelpers.defaultDateTime.end }; const mapStateToProps = state => ({ diff --git a/src/services/rhelServices.js b/src/services/rhelServices.js index a2fea52a5..1442e4683 100644 --- a/src/services/rhelServices.js +++ b/src/services/rhelServices.js @@ -140,34 +140,34 @@ import serviceConfig from './config'; * "instance_count": 20 * }, * { - * "cores": 0, + * "cores": 6, * "date": "2019-06-21T00:00:00Z", - * "instance_count": 0 + * "instance_count": 6 * }, * { - * "cores": 0, + * "cores": 2, * "date": "2019-06-22T00:00:00Z", - * "instance_count": 0 + * "instance_count": 2 * }, * { - * "cores": 0, + * "cores": 4, * "date": "2019-06-23T00:00:00Z", - * "instance_count": 0 + * "instance_count": 4 * }, * { - * "cores": 0, + * "cores": 6, * "date": "2019-06-24T00:00:00Z", - * "instance_count": 0 + * "instance_count": 6 * }, * { - * "cores": 0, + * "cores": 10, * "date": "2019-06-25T00:00:00Z", - * "instance_count": 0 + * "instance_count": 10 * }, * { - * "cores": 0, + * "cores": 2, * "date": "2019-06-26T00:00:00Z", - * "instance_count": 0 + * "instance_count": 4 * }, * { * "cores": 0, @@ -175,19 +175,19 @@ import serviceConfig from './config'; * "instance_count": 0 * }, * { - * "cores": 0, + * "cores": 6, * "date": "2019-06-28T00:00:00Z", - * "instance_count": 0 + * "instance_count": 2 * }, * { - * "cores": 0, + * "cores": 4, * "date": "2019-06-29T00:00:00Z", - * "instance_count": 0 + * "instance_count": 2 * }, * { - * "cores": 0, + * "cores": 2, * "date": "2019-06-30T00:00:00Z", - * "instance_count": 0 + * "instance_count": 2 * } * ], * "links": { diff --git a/src/styles/_usage-graph.scss b/src/styles/_usage-graph.scss index 4743a8280..3ee0c1d89 100644 --- a/src/styles/_usage-graph.scss +++ b/src/styles/_usage-graph.scss @@ -3,6 +3,18 @@ var(--pf-global--BorderColor--100); } +.curiosity-usage-graph .skeleton-container { + padding-top: var(--pf-c-card--child--PaddingBottom); +} + +.curiosity-usage-graph .skeleton-container .ins-c-skeleton { + margin-bottom: 20px; + + &:last-child { + margin-bottom: 0px; + } +} + .curiosity-usage-graph .stack-chart-container svg { > g:nth-child(2) { > g { diff --git a/tests/__snapshots__/i18n.test.js.snap b/tests/__snapshots__/i18n.test.js.snap index 047d7a84f..60b2cd011 100644 --- a/tests/__snapshots__/i18n.test.js.snap +++ b/tests/__snapshots__/i18n.test.js.snap @@ -5,15 +5,25 @@ exports[`i18n locale should generate a predictable pot output snapshot: pot outp msgstr \\"\\" \\"Content-Type: text/plain; charset=UTF-8\\\\n\\" -#: src/components/rhelGraphCard/rhelGraphCard.js:91 +#: src/components/rhelGraphCard/rhelGraphCard.js:107 msgctxt \\"Daily CPU socket usage\\" msgid \\"curiosity-graph.heading\\" msgstr \\"\\" -#: src/components/rhelGraphCard/rhelGraphCard.js:57 +#: src/components/rhelGraphCard/rhelGraphCard.js:71 +msgctxt \\"from previous day\\" +msgid \\"curiosity-graph.fromPrevious\\" +msgstr \\"\\" + +#: src/components/rhelGraphCard/rhelGraphCard.js:77 msgctxt \\"Last 30 Days\\" msgid \\"curiosity-graph.dropdownDefault\\" msgstr \\"\\" + +#: src/components/rhelGraphCard/rhelGraphCard.js:70 +msgctxt \\"sockets on\\" +msgid \\"curiosity-graph.socketsOn\\" +msgstr \\"\\" " `;