Skip to content

Commit

Permalink
feat(graphCard,redux): issues/185 maintain state by view
Browse files Browse the repository at this point in the history 
* graphCard, required productId, initial granularity use options type
* graphCardTypes, expand select default and options
* graphReducer, apply viewId, avoid resetting state
* graphCardSelectors, restructure, apply viewId
* openshiftView, remove granularity, pathId, routeDetail required
* rhelView, remove granularity, pathId, routeDetail required
* rhsmActions, use generated metaId for state store
* routerTypes, add pathId for state cache
  • Loading branch information
@cdcabrera
cdcabrera committed Feb 12, 2020
1 parent d478ed3 commit b1b3197
Show file tree
Hide file tree
Showing 23 changed files with 482 additions and 387 deletions.
12 changes: 12 additions & 0 deletions src/components/authentication/__tests__/__snapshots__/authentication.test.js.snap
View file
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
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
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
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
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

0 comments on commit b1b3197

Please sign in to comment.