Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(graphCard,redux): issues/185 maintain state by view #202

Merged
merged 1 commit into from
Feb 12, 2020
Merged

feat(graphCard,redux): issues/185 maintain state by view #202

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 12 additions & 0 deletions src/components/authentication/__tests__/__snapshots__/authentication.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,36 +22,42 @@ exports[`Authorization Component should render a non-connected component authori
"default": true,
"id": "all",
"path": "/rhel-sw/all",
"pathId": "rhel-sw",
"pathParameter": "RHEL",
"title": "Red Hat Enterprise Linux",
},
Object {
"id": "arm",
"path": "/rhel-sw/arm",
"pathId": "rhel-sw",
"pathParameter": "RHEL for ARM",
"title": "ARM",
},
Object {
"id": "ibmpower",
"path": "/rhel-sw/ibmpower",
"pathId": "rhel-sw",
"pathParameter": "RHEL for IBM Power",
"title": "IBM Power",
},
Object {
"id": "ibmz",
"path": "/rhel-sw/ibmz",
"pathId": "rhel-sw",
"pathParameter": "RHEL for IBM z",
"title": "IBM Z systems",
},
Object {
"id": "x86",
"path": "/rhel-sw/x86",
"pathId": "rhel-sw",
"pathParameter": "RHEL for x86",
"title": "x86",
},
Object {
"id": "openshift-sw",
"path": "/openshift-sw",
"pathId": "openshift-sw",
"pathParameter": "OpenShift Container Platform",
"title": "Red Hat OpenShift",
},
Expand Down Expand Up @@ -95,36 +101,42 @@ exports[`Authorization Component should render a non-connected component error:
"default": true,
"id": "all",
"path": "/rhel-sw/all",
"pathId": "rhel-sw",
"pathParameter": "RHEL",
"title": "Red Hat Enterprise Linux",
},
Object {
"id": "arm",
"path": "/rhel-sw/arm",
"pathId": "rhel-sw",
"pathParameter": "RHEL for ARM",
"title": "ARM",
},
Object {
"id": "ibmpower",
"path": "/rhel-sw/ibmpower",
"pathId": "rhel-sw",
"pathParameter": "RHEL for IBM Power",
"title": "IBM Power",
},
Object {
"id": "ibmz",
"path": "/rhel-sw/ibmz",
"pathId": "rhel-sw",
"pathParameter": "RHEL for IBM z",
"title": "IBM Z systems",
},
Object {
"id": "x86",
"path": "/rhel-sw/x86",
"pathId": "rhel-sw",
"pathParameter": "RHEL for x86",
"title": "x86",
},
Object {
"id": "openshift-sw",
"path": "/openshift-sw",
"pathId": "openshift-sw",
"pathParameter": "OpenShift Container Platform",
"title": "Red Hat OpenShift",
},
Expand Down
15 changes: 10 additions & 5 deletions src/components/graphCard/__tests__/__snapshots__/graphCard.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ exports[`GraphCard Component should render a non-connected component: non-connec
options={
Array [
Object {
"selected": true,
"title": "t(curiosity-graph.dropdownDaily)",
"value": "daily",
},
Expand All @@ -36,7 +37,7 @@ exports[`GraphCard Component should render a non-connected component: non-connec
]
}
placeholder="t(curiosity-graph.dropdownPlaceholder)"
selectedOptions="daily"
selectedOptions={null}
variant="single"
/>
</CardActions>
Expand Down Expand Up @@ -124,6 +125,7 @@ exports[`GraphCard Component should render multiple states: error with 403 statu
options={
Array [
Object {
"selected": true,
"title": "t(curiosity-graph.dropdownDaily)",
"value": "daily",
},
Expand All @@ -142,7 +144,7 @@ exports[`GraphCard Component should render multiple states: error with 403 statu
]
}
placeholder="t(curiosity-graph.dropdownPlaceholder)"
selectedOptions="daily"
selectedOptions={null}
variant="single"
/>
</CardActions>
Expand Down Expand Up @@ -226,6 +228,7 @@ exports[`GraphCard Component should render multiple states: error with 500 statu
options={
Array [
Object {
"selected": true,
"title": "t(curiosity-graph.dropdownDaily)",
"value": "daily",
},
Expand All @@ -244,7 +247,7 @@ exports[`GraphCard Component should render multiple states: error with 500 statu
]
}
placeholder="t(curiosity-graph.dropdownPlaceholder)"
selectedOptions="daily"
selectedOptions={null}
variant="single"
/>
</CardActions>
Expand Down Expand Up @@ -328,6 +331,7 @@ exports[`GraphCard Component should render multiple states: fulfilled 1`] = `
options={
Array [
Object {
"selected": true,
"title": "t(curiosity-graph.dropdownDaily)",
"value": "daily",
},
Expand All @@ -346,7 +350,7 @@ exports[`GraphCard Component should render multiple states: fulfilled 1`] = `
]
}
placeholder="t(curiosity-graph.dropdownPlaceholder)"
selectedOptions="daily"
selectedOptions={null}
variant="single"
/>
</CardActions>
Expand Down Expand Up @@ -430,6 +434,7 @@ exports[`GraphCard Component should render multiple states: pending 1`] = `
options={
Array [
Object {
"selected": true,
"title": "t(curiosity-graph.dropdownDaily)",
"value": "daily",
},
Expand All @@ -448,7 +453,7 @@ exports[`GraphCard Component should render multiple states: pending 1`] = `
]
}
placeholder="t(curiosity-graph.dropdownPlaceholder)"
selectedOptions="daily"
selectedOptions={null}
variant="single"
/>
</CardActions>
Expand Down
46 changes: 27 additions & 19 deletions src/components/graphCard/__tests__/__snapshots__/graphCardTypes.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,25 +6,33 @@ Object {
}
`;

exports[`RhelGraphCardTypes should return an output for granularity selection: getGranularityOptionsType 1`] = `Array []`;
exports[`RhelGraphCardTypes should return an output for granularity selection: getGranularityOptionsType 1`] = `
Object {
"options": Array [],
}
`;

exports[`RhelGraphCardTypes should return an output for granularity selection: getGranularityOptionsType:default 1`] = `
Array [
Object {
"title": "t(curiosity-graph.dropdownDaily)",
"value": "daily",
},
Object {
"title": "t(curiosity-graph.dropdownWeekly)",
"value": "weekly",
},
Object {
"title": "t(curiosity-graph.dropdownMonthly)",
"value": "monthly",
},
Object {
"title": "t(curiosity-graph.dropdownQuarterly)",
"value": "quarterly",
},
]
Object {
"options": Array [
Object {
"selected": true,
"title": "t(curiosity-graph.dropdownDaily)",
"value": "daily",
},
Object {
"title": "t(curiosity-graph.dropdownWeekly)",
"value": "weekly",
},
Object {
"title": "t(curiosity-graph.dropdownMonthly)",
"value": "monthly",
},
Object {
"title": "t(curiosity-graph.dropdownQuarterly)",
"value": "quarterly",
},
],
"selected": "daily",
}
`;
3 changes: 2 additions & 1 deletion src/components/graphCard/__tests__/graphCard.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,14 +5,15 @@ import { GraphCard } from '../graphCard';

describe('GraphCard Component', () => {
it('should render a non-connected component', () => {
const props = {};
const props = { productId: 'lorem' };
const component = shallow(<GraphCard {...props} />);

expect(component).toMatchSnapshot('non-connected');
});

it('should render multiple states', () => {
const props = {
productId: 'lorem',
startDate: new Date('2019-06-01T00:00:00Z'),
endDate: new Date('2019-06-30T23:59:59Z'),
graphData: {
Expand Down
55 changes: 28 additions & 27 deletions src/components/graphCard/graphCard.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,26 +25,32 @@ class GraphCard extends React.Component {
}

onUpdateGraphData = () => {
const { getGraphReportsCapacity, graphGranularity, startDate, endDate, productId } = this.props;
const query = {
[rhsmApiTypes.RHSM_API_QUERY_GRANULARITY]: graphGranularity,
[rhsmApiTypes.RHSM_API_QUERY_START_DATE]: startDate.toISOString(),
[rhsmApiTypes.RHSM_API_QUERY_END_DATE]: endDate.toISOString()
};
const { getGraphReportsCapacity, graphGranularity, productId, selectOptionsType } = this.props;

if (productId) {
const { selected } = graphCardTypes.getGranularityOptions(selectOptionsType);
const updatedGranularity = graphGranularity || selected;

const { startDate, endDate } = dateHelpers.getRangedDateTime(updatedGranularity);
const query = {
[rhsmApiTypes.RHSM_API_QUERY_GRANULARITY]: updatedGranularity,
[rhsmApiTypes.RHSM_API_QUERY_START_DATE]: startDate.toISOString(),
[rhsmApiTypes.RHSM_API_QUERY_END_DATE]: endDate.toISOString()
};

getGraphReportsCapacity(productId, query);
}
};

onSelect = event => {
const { graphGranularity } = this.props;
const { graphGranularity, viewId } = this.props;
const { value } = event;

if (graphGranularity !== value) {
store.dispatch({
type: reduxTypes.rhsm.SET_GRAPH_GRANULARITY_RHSM,
graphGranularity: value
graphGranularity: value,
viewId
});
}
};
Expand All @@ -54,26 +60,28 @@ class GraphCard extends React.Component {
* @patternfly/react-tokens chart_threshold_stroke_dash_array and chart_threshold_stroke_Width
*/
renderChart() {
const { filterGraphData, graphData, graphGranularity, t, productShortLabel } = this.props;
const { filterGraphData, graphData, graphGranularity, selectOptionsType, t, productShortLabel } = this.props;
const { selected } = graphCardTypes.getGranularityOptions(selectOptionsType);
const updatedGranularity = graphGranularity || selected;

const xAxisTickFormat = ({ item, previousItem, tick }) =>
graphCardHelpers.xAxisTickFormat({
tick,
date: item.date,
previousDate: previousItem.date,
granularity: graphGranularity
granularity: updatedGranularity
});

const tooltips = ({ itemsByKey }) =>
graphCardHelpers.getTooltips({
itemsByKey,
granularity: graphGranularity,
granularity: updatedGranularity,
product: productShortLabel
});

const chartAreaProps = {
xAxisFixLabelOverlap: true,
xAxisLabelIncrement: graphCardHelpers.getChartXAxisLabelIncrement(graphGranularity),
xAxisLabelIncrement: graphCardHelpers.getChartXAxisLabelIncrement(updatedGranularity),
xAxisTickFormat,
yAxisTickFormat: graphCardHelpers.yAxisTickFormat,
tooltips
Expand Down Expand Up @@ -113,13 +121,14 @@ class GraphCard extends React.Component {

return Object.keys(data).map(key => filtered(key));
};

return <ChartArea key={helpers.generateId()} {...chartAreaProps} dataSets={filteredGraphData(graphData)} />;
}

// ToDo: combine "curiosity-skeleton-container" into a single class w/ --loading and BEM style
render() {
const { cardTitle, error, graphGranularity, selectOptionsType, pending, t } = this.props;
const getGranularityOptions = graphCardTypes.getGranularityOptions(selectOptionsType);
const { options } = graphCardTypes.getGranularityOptions(selectOptionsType);

return (
<Card className="curiosity-usage-graph fadein">
Expand All @@ -129,7 +138,7 @@ class GraphCard extends React.Component {
<Select
aria-label={t('curiosity-graph.dropdownPlaceholder')}
onSelect={this.onSelect}
options={getGranularityOptions}
options={options}
selectedOptions={graphGranularity}
placeholder={t('curiosity-graph.dropdownPlaceholder')}
/>
Expand Down Expand Up @@ -165,19 +174,13 @@ GraphCard.propTypes = {
),
getGraphReportsCapacity: PropTypes.func,
graphData: PropTypes.object,
graphGranularity: PropTypes.oneOf([
GRANULARITY_TYPES.DAILY,
GRANULARITY_TYPES.WEEKLY,
GRANULARITY_TYPES.MONTHLY,
GRANULARITY_TYPES.QUARTERLY
]),
graphGranularity: PropTypes.oneOf([...Object.values(GRANULARITY_TYPES)]),
pending: PropTypes.bool,
productId: PropTypes.string,
productId: PropTypes.string.isRequired,
selectOptionsType: PropTypes.oneOf(['default']),
t: PropTypes.func,
productShortLabel: PropTypes.string,
startDate: PropTypes.instanceOf(Date),
endDate: PropTypes.instanceOf(Date)
viewId: PropTypes.string
};

GraphCard.defaultProps = {
Expand All @@ -186,14 +189,12 @@ GraphCard.defaultProps = {
filterGraphData: [],
getGraphReportsCapacity: helpers.noop,
graphData: {},
graphGranularity: GRANULARITY_TYPES.DAILY,
graphGranularity: null,
pending: false,
productId: rhsmApiTypes.RHSM_API_PATH_ID_TYPES.RHEL,
selectOptionsType: 'default',
t: helpers.noopTranslate,
productShortLabel: '',
startDate: dateHelpers.defaultDateTime.startDate,
endDate: dateHelpers.defaultDateTime.endDate
viewId: 'graphCard'
};

const makeMapStateToProps = () => {
Expand Down
Loading