Skip to content

Commit

Permalink
perf(openshiftView): issues/407 update uom field (#551)
Browse files Browse the repository at this point in the history 
* openshiftView, replace uom field with independent comp
  • Loading branch information
@cdcabrera
cdcabrera committed Feb 16, 2021
1 parent d2bef6e commit efcdf03
Show file tree
Hide file tree
Showing 3 changed files with 37 additions and 135 deletions.
16 changes: 0 additions & 16 deletions src/components/i18n/__tests__/__snapshots__/i18n.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -132,14 +132,6 @@ Array [
Object {
"file": "./src/components/openshiftView/openshiftView.js",
"keys": Array [
Object {
"key": "curiosity-toolbar.uom",
"match": "t('curiosity-toolbar.uom', { context: RHSM_API_QUERY_UOM_TYPES.CORES })",
},
Object {
"key": "curiosity-toolbar.uom",
"match": "t('curiosity-toolbar.uom', { context: RHSM_API_QUERY_UOM_TYPES.SOCKETS })",
},
Object {
"key": "curiosity-view.title",
"match": "t(\`curiosity-view.title\`, { appName: helpers.UI_DISPLAY_NAME, context: productLabel })",
Expand Down Expand Up @@ -507,14 +499,6 @@ Array [
"file": "./src/components/inventorySubscriptions/inventorySubscriptions.js",
"key": "curiosity-inventory.tab",
},
Object {
"file": "./src/components/openshiftView/openshiftView.js",
"key": "curiosity-toolbar.uom",
},
Object {
"file": "./src/components/openshiftView/openshiftView.js",
"key": "curiosity-toolbar.uom",
},
Object {
"file": "./src/components/openshiftView/openshiftView.js",
"key": "curiosity-inventory.tab",
Expand Down
54 changes: 18 additions & 36 deletions src/components/openshiftView/__tests__/__snapshots__/openshiftView.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,30 +72,24 @@ exports[`OpenshiftView Component should display an alternate graph on query-stri
}
viewId="viewOpenShift"
>
<Select
ariaLabel="Select option"
className=""
id="generatedid-"
isDisabled={false}
isToggleText={true}
name={null}
onSelect={[Function]}
<ToolbarFieldUom
options={
Array [
Object {
"selected": false,
"title": "t(curiosity-toolbar.uom, {\\"context\\":\\"cores\\"})",
"value": "cores",
},
Object {
"selected": false,
"title": "t(curiosity-toolbar.uom, {\\"context\\":\\"sockets\\"})",
"value": "sockets",
},
]
}
placeholder="Select option"
selectedOptions="cores"
toggleIcon={null}
variant="single"
t={[Function]}
value="cores"
viewId="viewOpenShift"
/>
</Connect(GraphCard)>
</PageSection>
Expand Down Expand Up @@ -291,30 +285,24 @@ exports[`OpenshiftView Component should have a fallback title: title 1`] = `
}
viewId="viewOpenShift"
>
<Select
ariaLabel="Select option"
className=""
id="generatedid-"
isDisabled={false}
isToggleText={true}
name={null}
onSelect={[Function]}
<ToolbarFieldUom
options={
Array [
Object {
"selected": false,
"title": "t(curiosity-toolbar.uom, {\\"context\\":\\"cores\\"})",
"value": "cores",
},
Object {
"selected": false,
"title": "t(curiosity-toolbar.uom, {\\"context\\":\\"sockets\\"})",
"value": "sockets",
},
]
}
placeholder="Select option"
selectedOptions="cores"
toggleIcon={null}
variant="single"
t={[Function]}
value="cores"
viewId="viewOpenShift"
/>
</Connect(GraphCard)>
</PageSection>
Expand Down Expand Up @@ -924,30 +912,24 @@ exports[`OpenshiftView Component should render a non-connected component: non-co
}
viewId="viewOpenShift"
>
<Select
ariaLabel="Select option"
className=""
id="generatedid-"
isDisabled={false}
isToggleText={true}
name={null}
onSelect={[Function]}
<ToolbarFieldUom
options={
Array [
Object {
"selected": false,
"title": "t(curiosity-toolbar.uom, {\\"context\\":\\"cores\\"})",
"value": "cores",
},
Object {
"selected": false,
"title": "t(curiosity-toolbar.uom, {\\"context\\":\\"sockets\\"})",
"value": "sockets",
},
]
}
placeholder="Select option"
selectedOptions="cores"
toggleIcon={null}
variant="single"
t={[Function]}
value="cores"
viewId="viewOpenShift"
/>
</Connect(GraphCard)>
</PageSection>
Expand Down
102 changes: 19 additions & 83 deletions src/components/openshiftView/openshiftView.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,9 +16,9 @@ import {
RHSM_API_QUERY_SORT_TYPES,
RHSM_API_QUERY_SUBSCRIPTIONS_SORT_TYPES
} from '../../types/rhsmApiTypes';
import { apiQueries, connect, reduxSelectors, reduxTypes, store } from '../../redux';
import { apiQueries, connect, reduxSelectors } from '../../redux';
import GraphCard from '../graphCard/graphCard';
import { Select } from '../form/select';
import { ToolbarFieldUom } from '../toolbar/toolbarFieldUom';
import Toolbar from '../toolbar/toolbar';
import InventoryList from '../inventoryList/inventoryList';
import InventorySubscriptions from '../inventorySubscriptions/inventorySubscriptions';
Expand All @@ -34,97 +34,22 @@ import { translate } from '../i18n/i18n';
* @fires onSelect
*/
class OpenshiftView extends React.Component {
state = {
option: null,
graphFilters: [],
inventoryFilters: [],
subscriptionsInventoryFilters: []
};

componentDidMount() {
const { initialOption } = this.props;
this.onSelect({ value: initialOption });
}

/**
* Apply a selected filtered value.
*
* @event onSelect
* @param {object} event
*/
onSelect = (event = {}) => {
const { option } = this.state;
const { initialGraphFilters, initialInventoryFilters, initialSubscriptionsInventoryFilters, viewId } = this.props;
const { value } = event;

if (value !== option) {
const filter = ({ id, isOptional }) => {
if (!isOptional) {
return true;
}
return new RegExp(value, 'i').test(id);
};

const graphFilters = initialGraphFilters.filter(filter);
const inventoryFilters = initialInventoryFilters.filter(filter);
const subscriptionsInventoryFilters = initialSubscriptionsInventoryFilters.filter(filter);

this.setState(
{
option,
graphFilters,
inventoryFilters,
subscriptionsInventoryFilters
},
() => {
store.dispatch([
{
type: reduxTypes.query.SET_QUERY_CLEAR_INVENTORY_LIST
},
{
type: reduxTypes.query.SET_QUERY_RHSM_TYPES[RHSM_API_QUERY_TYPES.UOM],
viewId,
[RHSM_API_QUERY_TYPES.UOM]: value
}
]);
}
);
}
};

/**
* Render a select/dropdown list.
*
* @returns {Node}
*/
renderSelect() {
const { option } = this.state;
const { initialOption, t } = this.props;
const options = [
{
title: t('curiosity-toolbar.uom', { context: RHSM_API_QUERY_UOM_TYPES.CORES }),
value: RHSM_API_QUERY_UOM_TYPES.CORES
},
{
title: t('curiosity-toolbar.uom', { context: RHSM_API_QUERY_UOM_TYPES.SOCKETS }),
value: RHSM_API_QUERY_UOM_TYPES.SOCKETS
}
];

return <Select onSelect={this.onSelect} options={options} selectedOptions={option || initialOption} />;
}
componentDidMount() {}

/**
* Render an OpenShift view.
*
* @returns {Node}
*/
render() {
const { graphFilters, inventoryFilters, subscriptionsInventoryFilters } = this.state;
const {
initialGuestsFilters,
initialToolbarFilters,
initialInventorySettings,
initialGraphFilters,
initialInventoryFilters,
initialSubscriptionsInventoryFilters,
initialOption,
productLabel,
query,
graphTallyQuery,
Expand All @@ -141,6 +66,17 @@ class OpenshiftView extends React.Component {
toolbarQuery
} = apiQueries.parseRhsmQuery(query, { graphTallyQuery, inventoryHostsQuery, inventorySubscriptionsQuery });

const filter = ({ id, isOptional }) => {
if (!isOptional) {
return true;
}
return new RegExp(query[RHSM_API_QUERY_TYPES.UOM] || initialOption, 'i').test(id);
};

const graphFilters = initialGraphFilters.filter(filter);
const inventoryFilters = initialInventoryFilters.filter(filter);
const subscriptionsInventoryFilters = initialSubscriptionsInventoryFilters.filter(filter);

return (
<PageLayout>
<PageHeader productLabel={productLabel} includeTour>
Expand All @@ -167,7 +103,7 @@ class OpenshiftView extends React.Component {
cardTitle={t('curiosity-graph.cardHeading')}
productLabel={productLabel}
>
{this.renderSelect()}
<ToolbarFieldUom value={initialOption} viewId={viewId} />
</GraphCard>
</PageSection>
<PageSection>
Expand Down

0 comments on commit efcdf03

Please sign in to comment.