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

Fix, apply unique queries for API endpoints Issues/380 #381

Merged
merged 2 commits into from
Aug 20, 2020
Merged

Fix, apply unique queries for API endpoints Issues/380 #381

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c3a214e
fix(rhsmApiTypes): issues/380 api query types (#381)
cdcabrera Aug 20, 2020
6b05ebf
fix(apiQueries,reduxHelpers): issues/380 query schema (#381)
cdcabrera Aug 20, 2020
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
3 changes: 2 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,11 +33,12 @@
"!src/index.js",
"!src/setupTests.js",
"!src/components/app.js",
"!src/helpers/index.js",
"!src/common/index.js",
"!src/redux/index.js",
"!src/redux/store.js",
"!src/redux/middleware/**",
"!src/redux/actions/index.js",
"!src/redux/common/index.js",
"!src/redux/reducers/index.js",
"!src/redux/selectors/index.js"
],
Expand Down
27 changes: 16 additions & 11 deletions src/components/c3GraphCard/c3GraphCard.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import _isEqual from 'lodash/isEqual';
import { Select } from '../form/select';
import { connect, reduxActions, reduxSelectors, reduxTypes, store } from '../../redux';
import { helpers, dateHelpers } from '../../common';
import { rhsmApiTypes, RHSM_API_QUERY_GRANULARITY_TYPES as GRANULARITY_TYPES } from '../../types/rhsmApiTypes';
import { RHSM_API_QUERY_GRANULARITY_TYPES as GRANULARITY_TYPES, RHSM_API_QUERY_TYPES } from '../../types/rhsmApiTypes';
import { c3GraphCardHelpers } from './c3GraphCardHelpers';
import { C3GraphCardLegendItem } from './c3GraphCardLegendItem';
import { graphCardTypes } from '../graphCard/graphCardTypes';
Expand Down Expand Up @@ -42,13 +42,13 @@ class C3GraphCard extends React.Component {
*/
onUpdateGraphData = () => {
const { getGraphReportsCapacity, isDisabled, productId, query } = this.props;
const graphGranularity = query?.[rhsmApiTypes.RHSM_API_QUERY_GRANULARITY];
const graphGranularity = this.getQueryGranularity();

if (!isDisabled && graphGranularity && productId) {
const { startDate, endDate } = dateHelpers.getRangedDateTime(graphGranularity);
const graphQuery = {
[rhsmApiTypes.RHSM_API_QUERY_START_DATE]: startDate.toISOString(),
[rhsmApiTypes.RHSM_API_QUERY_END_DATE]: endDate.toISOString(),
[RHSM_API_QUERY_TYPES.START_DATE]: startDate.toISOString(),
[RHSM_API_QUERY_TYPES.END_DATE]: endDate.toISOString(),
...query
};

Expand All @@ -67,12 +67,17 @@ class C3GraphCard extends React.Component {
const { viewId } = this.props;

store.dispatch({
type: reduxTypes.query.SET_QUERY_RHSM_TYPES[rhsmApiTypes.RHSM_API_QUERY_GRANULARITY],
type: reduxTypes.query.SET_QUERY_RHSM_TYPES[RHSM_API_QUERY_TYPES.GRANULARITY],
viewId,
[rhsmApiTypes.RHSM_API_QUERY_GRANULARITY]: value
[RHSM_API_QUERY_TYPES.GRANULARITY]: value
});
};

getQueryGranularity() {
const { query } = this.props;
return query?.[RHSM_API_QUERY_TYPES.GRANULARITY];
}

/**
* Apply a custom legend.
*
Expand Down Expand Up @@ -121,8 +126,8 @@ class C3GraphCard extends React.Component {
* @returns {Node}
*/
renderChart() {
const { filterGraphData, graphData, productId, productShortLabel, query, selectOptionsType } = this.props;
const graphGranularity = query?.[rhsmApiTypes.RHSM_API_QUERY_GRANULARITY];
const { filterGraphData, graphData, productId, productShortLabel, selectOptionsType } = this.props;
const graphGranularity = this.getQueryGranularity();
const { selected } = graphCardTypes.getGranularityOptions(selectOptionsType);
const updatedGranularity = graphGranularity || selected;

Expand Down Expand Up @@ -170,14 +175,14 @@ class C3GraphCard extends React.Component {
* @returns {Node}
*/
render() {
const { cardTitle, children, error, isDisabled, pending, query, selectOptionsType, t } = this.props;
const { cardTitle, children, error, isDisabled, pending, selectOptionsType, t } = this.props;

if (isDisabled) {
return null;
}

const { options } = graphCardTypes.getGranularityOptions(selectOptionsType);
const graphGranularity = query?.[rhsmApiTypes.RHSM_API_QUERY_GRANULARITY];
const graphGranularity = this.getQueryGranularity();

return (
<Card className="curiosity-usage-graph">
Expand Down Expand Up @@ -229,7 +234,7 @@ C3GraphCard.propTypes = {
getGraphReportsCapacity: PropTypes.func,
graphData: PropTypes.object,
query: PropTypes.shape({
[rhsmApiTypes.RHSM_API_QUERY_GRANULARITY]: PropTypes.oneOf([...Object.values(GRANULARITY_TYPES)]).isRequired
[RHSM_API_QUERY_TYPES.GRANULARITY]: PropTypes.oneOf([...Object.values(GRANULARITY_TYPES)]).isRequired
}).isRequired,
isDisabled: PropTypes.bool,
pending: PropTypes.bool,
Expand Down
15 changes: 9 additions & 6 deletions src/components/c3GraphCard/tests/c3GraphCard.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,15 @@ import React from 'react';
import { shallow } from 'enzyme';
import { C3Chart } from '../../c3Chart/c3Chart';
import { C3GraphCard } from '../c3GraphCard';
import { RHSM_API_QUERY_GRANULARITY_TYPES as GRANULARITY_TYPES, rhsmApiTypes } from '../../../types/rhsmApiTypes';
import {
RHSM_API_QUERY_GRANULARITY_TYPES as GRANULARITY_TYPES,
RHSM_API_QUERY_TYPES
} from '../../../types/rhsmApiTypes';

describe('C3GraphCard Component', () => {
it('should render a non-connected component', () => {
const props = {
query: { [rhsmApiTypes.RHSM_API_QUERY_GRANULARITY]: GRANULARITY_TYPES.DAILY },
query: { [RHSM_API_QUERY_TYPES.GRANULARITY]: GRANULARITY_TYPES.DAILY },
productId: 'lorem'
};
const component = shallow(<C3GraphCard {...props} />);
Expand All @@ -17,7 +20,7 @@ describe('C3GraphCard Component', () => {

it('should render multiple states', () => {
const props = {
query: { [rhsmApiTypes.RHSM_API_QUERY_GRANULARITY]: GRANULARITY_TYPES.DAILY },
query: { [RHSM_API_QUERY_TYPES.GRANULARITY]: GRANULARITY_TYPES.DAILY },
productId: 'lorem',
graphData: {
physicalSockets: [
Expand Down Expand Up @@ -88,7 +91,7 @@ describe('C3GraphCard Component', () => {
id: 'thresholdLoremIpsumSockets'
}
],
query: { [rhsmApiTypes.RHSM_API_QUERY_GRANULARITY]: GRANULARITY_TYPES.DAILY },
query: { [RHSM_API_QUERY_TYPES.GRANULARITY]: GRANULARITY_TYPES.DAILY },
productId: 'lorem',
graphData: {
loremIpsumSockets: [
Expand Down Expand Up @@ -151,7 +154,7 @@ describe('C3GraphCard Component', () => {

it('should render a custom legend', () => {
const props = {
query: { [rhsmApiTypes.RHSM_API_QUERY_GRANULARITY]: GRANULARITY_TYPES.DAILY },
query: { [RHSM_API_QUERY_TYPES.GRANULARITY]: GRANULARITY_TYPES.DAILY },
productId: 'lorem'
};

Expand All @@ -171,7 +174,7 @@ describe('C3GraphCard Component', () => {

it('should return an empty render when disabled', () => {
const props = {
query: { [rhsmApiTypes.RHSM_API_QUERY_GRANULARITY]: GRANULARITY_TYPES.DAILY },
query: { [RHSM_API_QUERY_TYPES.GRANULARITY]: GRANULARITY_TYPES.DAILY },
isDisabled: true,
productId: 'lorem'
};
Expand Down
13 changes: 8 additions & 5 deletions src/components/graphCard/__tests__/graphCard.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,15 @@ import React from 'react';
import { shallow } from 'enzyme';
import { ChartArea } from '../../chartArea/chartArea';
import { GraphCard } from '../graphCard';
import { RHSM_API_QUERY_GRANULARITY_TYPES as GRANULARITY_TYPES, rhsmApiTypes } from '../../../types/rhsmApiTypes';
import {
RHSM_API_QUERY_GRANULARITY_TYPES as GRANULARITY_TYPES,
RHSM_API_QUERY_TYPES
} from '../../../types/rhsmApiTypes';

describe('GraphCard Component', () => {
it('should render a non-connected component', () => {
const props = {
query: { [rhsmApiTypes.RHSM_API_QUERY_GRANULARITY]: GRANULARITY_TYPES.DAILY },
query: { [RHSM_API_QUERY_TYPES.GRANULARITY]: GRANULARITY_TYPES.DAILY },
productId: 'lorem'
};
const component = shallow(<GraphCard {...props} />);
Expand All @@ -17,7 +20,7 @@ describe('GraphCard Component', () => {

it('should render multiple states', () => {
const props = {
query: { [rhsmApiTypes.RHSM_API_QUERY_GRANULARITY]: GRANULARITY_TYPES.DAILY },
query: { [RHSM_API_QUERY_TYPES.GRANULARITY]: GRANULARITY_TYPES.DAILY },
productId: 'lorem',
graphData: {
physicalSockets: [
Expand Down Expand Up @@ -88,7 +91,7 @@ describe('GraphCard Component', () => {
id: 'thresholdLoremIpsumSockets'
}
],
query: { [rhsmApiTypes.RHSM_API_QUERY_GRANULARITY]: GRANULARITY_TYPES.DAILY },
query: { [RHSM_API_QUERY_TYPES.GRANULARITY]: GRANULARITY_TYPES.DAILY },
productId: 'lorem',
graphData: {
loremIpsumSockets: [
Expand Down Expand Up @@ -152,7 +155,7 @@ describe('GraphCard Component', () => {

it('should return an empty render when disabled', () => {
const props = {
query: { [rhsmApiTypes.RHSM_API_QUERY_GRANULARITY]: GRANULARITY_TYPES.DAILY },
query: { [RHSM_API_QUERY_TYPES.GRANULARITY]: GRANULARITY_TYPES.DAILY },
isDisabled: true,
productId: 'lorem'
};
Expand Down
27 changes: 16 additions & 11 deletions src/components/graphCard/graphCard.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import _isEqual from 'lodash/isEqual';
import { Select } from '../form/select';
import { connect, reduxActions, reduxSelectors, reduxTypes, store } from '../../redux';
import { helpers, dateHelpers } from '../../common';
import { rhsmApiTypes, RHSM_API_QUERY_GRANULARITY_TYPES as GRANULARITY_TYPES } from '../../types/rhsmApiTypes';
import { RHSM_API_QUERY_GRANULARITY_TYPES as GRANULARITY_TYPES, RHSM_API_QUERY_TYPES } from '../../types/rhsmApiTypes';
import { graphCardHelpers } from './graphCardHelpers';
import { graphCardTypes } from './graphCardTypes';
import GraphCardChartTooltip from './graphCardChartTooltip';
Expand Down Expand Up @@ -42,13 +42,13 @@ class GraphCard extends React.Component {
*/
onUpdateGraphData = () => {
const { getGraphReportsCapacity, isDisabled, productId, query } = this.props;
const graphGranularity = query?.[rhsmApiTypes.RHSM_API_QUERY_GRANULARITY];
const graphGranularity = this.getQueryGranularity();

if (!isDisabled && graphGranularity && productId) {
const { startDate, endDate } = dateHelpers.getRangedDateTime(graphGranularity);
const graphQuery = {
[rhsmApiTypes.RHSM_API_QUERY_START_DATE]: startDate.toISOString(),
[rhsmApiTypes.RHSM_API_QUERY_END_DATE]: endDate.toISOString(),
[RHSM_API_QUERY_TYPES.START_DATE]: startDate.toISOString(),
[RHSM_API_QUERY_TYPES.END_DATE]: endDate.toISOString(),
...query
};

Expand All @@ -67,12 +67,17 @@ class GraphCard extends React.Component {
const { viewId } = this.props;

store.dispatch({
type: reduxTypes.query.SET_QUERY_RHSM_TYPES[rhsmApiTypes.RHSM_API_QUERY_GRANULARITY],
type: reduxTypes.query.SET_QUERY_RHSM_TYPES[RHSM_API_QUERY_TYPES.GRANULARITY],
viewId,
[rhsmApiTypes.RHSM_API_QUERY_GRANULARITY]: value
[RHSM_API_QUERY_TYPES.GRANULARITY]: value
});
};

getQueryGranularity() {
const { query } = this.props;
return query?.[RHSM_API_QUERY_TYPES.GRANULARITY];
}

/**
* FixMe: custom use of dash over threshold vs updating PF Charts legend threshold symbol
*
Expand All @@ -84,8 +89,8 @@ class GraphCard extends React.Component {
* @returns {Node}
*/
renderChart() {
const { filterGraphData, graphData, selectOptionsType, productShortLabel, query, viewId } = this.props;
const graphGranularity = query?.[rhsmApiTypes.RHSM_API_QUERY_GRANULARITY];
const { filterGraphData, graphData, selectOptionsType, productShortLabel, viewId } = this.props;
const graphGranularity = this.getQueryGranularity();
const { selected } = graphCardTypes.getGranularityOptions(selectOptionsType);
const updatedGranularity = graphGranularity || selected;

Expand Down Expand Up @@ -158,14 +163,14 @@ class GraphCard extends React.Component {
* @returns {Node}
*/
render() {
const { cardTitle, children, error, isDisabled, pending, query, selectOptionsType, t } = this.props;
const { cardTitle, children, error, isDisabled, pending, selectOptionsType, t } = this.props;

if (isDisabled) {
return null;
}

const { options } = graphCardTypes.getGranularityOptions(selectOptionsType);
const graphGranularity = query?.[rhsmApiTypes.RHSM_API_QUERY_GRANULARITY];
const graphGranularity = this.getQueryGranularity();

return (
<Card className="curiosity-usage-graph">
Expand Down Expand Up @@ -218,7 +223,7 @@ GraphCard.propTypes = {
getGraphReportsCapacity: PropTypes.func,
graphData: PropTypes.object,
query: PropTypes.shape({
[rhsmApiTypes.RHSM_API_QUERY_GRANULARITY]: PropTypes.oneOf([...Object.values(GRANULARITY_TYPES)]).isRequired
[RHSM_API_QUERY_TYPES.GRANULARITY]: PropTypes.oneOf([...Object.values(GRANULARITY_TYPES)]).isRequired
}).isRequired,
isDisabled: PropTypes.bool,
pending: PropTypes.bool,
Expand Down
4 changes: 2 additions & 2 deletions src/components/i18n/__tests__/__snapshots__/i18n.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -414,11 +414,11 @@ Array [
},
Object {
"key": "curiosity-toolbar.category",
"match": "translate('curiosity-toolbar.category', { context: RHSM_API_QUERY_SLA })",
"match": "translate('curiosity-toolbar.category', { context: RHSM_API_QUERY_TYPES.SLA })",
},
Object {
"key": "curiosity-toolbar.category",
"match": "translate('curiosity-toolbar.category', { context: RHSM_API_QUERY_USAGE })",
"match": "translate('curiosity-toolbar.category', { context: RHSM_API_QUERY_TYPES.USAGE })",
},
],
},
Expand Down
10 changes: 5 additions & 5 deletions src/components/inventoryList/__tests__/inventoryList.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
import React from 'react';
import { shallow } from 'enzyme';
import { InventoryList } from '../inventoryList';
import { rhsmApiTypes } from '../../../types';
import { RHSM_API_QUERY_TYPES } from '../../../types/rhsmApiTypes';

describe('InventoryList Component', () => {
it('should render a non-connected component', () => {
const props = {
query: {
[rhsmApiTypes.RHSM_API_QUERY_LIMIT]: 10,
[rhsmApiTypes.RHSM_API_QUERY_OFFSET]: 0
[RHSM_API_QUERY_TYPES.LIMIT]: 10,
[RHSM_API_QUERY_TYPES.OFFSET]: 0
},
productId: 'lorem'
};
Expand All @@ -20,8 +20,8 @@ describe('InventoryList Component', () => {
it('should handle variations in data', () => {
const props = {
query: {
[rhsmApiTypes.RHSM_API_QUERY_LIMIT]: 10,
[rhsmApiTypes.RHSM_API_QUERY_OFFSET]: 0
[RHSM_API_QUERY_TYPES.LIMIT]: 10,
[RHSM_API_QUERY_TYPES.OFFSET]: 0
},
productId: 'lorem',
listData: [
Expand Down
4 changes: 2 additions & 2 deletions src/components/inventoryList/inventoryList.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import Table from '../table/table';
import { Loader } from '../loader/loader';
import { inventoryListHelpers } from './inventoryListHelpers';
import Pagination from '../pagination/pagination';
import { rhsmApiTypes } from '../../types';
import { RHSM_API_QUERY_TYPES } from '../../types/rhsmApiTypes';

class InventoryList extends React.Component {
componentDidMount() {
Expand Down Expand Up @@ -79,7 +79,7 @@ class InventoryList extends React.Component {
return null;
}

const updatedPerPage = query?.[rhsmApiTypes.RHSM_API_QUERY_LIMIT] || perPageDefault;
const updatedPerPage = query?.[RHSM_API_QUERY_TYPES.LIMIT] || perPageDefault;
const loaderPerPage = updatedPerPage / 2;

return (
Expand Down
9 changes: 0 additions & 9 deletions src/components/openshiftView/__tests__/__snapshots__/openshiftView.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,8 +51,6 @@ exports[`OpenshiftView Component should display an alternate graph on query-stri
query={
Object {
"granularity": "daily",
"limit": 10,
"offset": 0,
}
}
viewId="OpenShift"
Expand Down Expand Up @@ -110,7 +108,6 @@ exports[`OpenshiftView Component should display an alternate graph on query-stri
productId="lorem ipsum"
query={
Object {
"granularity": "daily",
"limit": 10,
"offset": 0,
}
Expand Down Expand Up @@ -172,8 +169,6 @@ exports[`OpenshiftView Component should have a fallback title: title 1`] = `
query={
Object {
"granularity": "daily",
"limit": 10,
"offset": 0,
}
}
viewId="OpenShift"
Expand Down Expand Up @@ -231,7 +226,6 @@ exports[`OpenshiftView Component should have a fallback title: title 1`] = `
productId="lorem ipsum"
query={
Object {
"granularity": "daily",
"limit": 10,
"offset": 0,
}
Expand Down Expand Up @@ -413,8 +407,6 @@ exports[`OpenshiftView Component should render a non-connected component: non-co
query={
Object {
"granularity": "daily",
"limit": 10,
"offset": 0,
}
}
viewId="OpenShift"
Expand Down Expand Up @@ -472,7 +464,6 @@ exports[`OpenshiftView Component should render a non-connected component: non-co
productId="lorem ipsum"
query={
Object {
"granularity": "daily",
"limit": 10,
"offset": 0,
}
Expand Down
Loading