Restructure services containers for router push

Meow

Restructure services containers for router push
This commit is contained in:
JUDIT GRESKOVITS 2017-03-06 17:27:45 +00:00 committed by Sérgio Ramos
parent 0bfe081a86
commit ea1876d691
6 changed files with 107 additions and 50 deletions

View File

@ -21,38 +21,29 @@ const StyledLegend = styled(Legend)`
const ServicesView = ({ const ServicesView = ({
children, children,
org = {}, onToggle,
match = {}, services,
project = {}, toggleValue
services = [],
router = {}
}) => { }) => {
const toggle = () => {
if(!services) {
return null;
}
const value = match.path === '/:org/projects/:projectId/services' ?
'topology' : 'list';
const onToggleChange = (evt) => { const onToggleChange = (evt) => {
evt.preventDefault(); evt.preventDefault();
router.push(`/${org.id}/projects/${project.id}/services${ const value = evt.target.value;
evt.target.value === 'list' ? '/list' : '' if(value !== toggleValue) {
}`); onToggle(value);
}
}; };
return ( const toggle = services ? (
<FormGroup name='service-view' value={value}> <FormGroup name='service-view' value={toggleValue}>
<StyledLegend>View</StyledLegend> <StyledLegend>View</StyledLegend>
<ToggleList> <ToggleList>
<Toggle value='topology' onChange={onToggleChange}>Topology</Toggle> <Toggle value='topology' onChange={onToggleChange}>Topology</Toggle>
<Toggle value='list' onChange={onToggleChange}>List</Toggle> <Toggle value='list' onChange={onToggleChange}>List</Toggle>
</ToggleList> </ToggleList>
</FormGroup> </FormGroup>
); ) : null;
};
const content = services.length ? children : ( const content = services.length ? children : (
<EmptyServices /> <EmptyServices />
@ -62,7 +53,7 @@ const ServicesView = ({
<Row> <Row>
<Column xs={12}> <Column xs={12}>
<H2>Services</H2> <H2>Services</H2>
{ toggle() } { toggle }
{ content } { content }
</Column> </Column>
</Row> </Row>
@ -71,11 +62,9 @@ const ServicesView = ({
ServicesView.propTypes = { ServicesView.propTypes = {
children: React.PropTypes.node, children: React.PropTypes.node,
match: React.PropTypes.object.isRequired, onToggle: React.PropTypes.func.isRequired,
org: PropTypes.org, services: React.PropTypes.arrayOf(PropTypes.service),
project: PropTypes.project, toggleValue: React.PropTypes.string.isRequired
router: React.PropTypes.object,
services: React.PropTypes.arrayOf(PropTypes.service)
}; };
export default ServicesView; export default ServicesView;

View File

@ -1,20 +1,25 @@
import React from 'react'; import React from 'react';
import { Switch, Route } from 'react-router-dom'; import { Switch, Route } from 'react-router-dom';
import Section from './section'; import Section from './section';
import ServicesTopology from '@containers/services'; import ServicesTopology from '@containers/services/topology';
import ServicesList from '@containers/services/list'; import ServicesList from '@containers/services/list';
import Services from '@containers/services';
import Service from '@containers/service'; import Service from '@containers/service';
export default () => { export default () => {
const topology = (props) => ( const topology = (props) => (
<Section {...props}> <Section {...props}>
<Services {...props}>
<ServicesTopology {...props} /> <ServicesTopology {...props} />
</Services>
</Section> </Section>
); );
const list = (props) => ( const list = (props) => (
<Section {...props}> <Section {...props}>
<Services {...props}>
<ServicesList {...props} /> <ServicesList {...props} />
</Services>
</Section> </Section>
); );

View File

@ -1,7 +1,6 @@
import React from 'react'; import React from 'react';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import PropTypes from '@root/prop-types'; import PropTypes from '@root/prop-types';
import { TopologyGraph } from '@ui/components/topology';
import ServicesView from '@components/services/view'; import ServicesView from '@components/services/view';
import { import {
@ -12,29 +11,56 @@ import {
const Services = (props) => { const Services = (props) => {
const { const {
services = [] org = {},
project = {},
services = [],
children,
path,
push
} = props; } = props;
const toggleValue = path === '/:org/projects/:projectId/services' ?
'topology' : 'list';
const onToggle = (value) => {
const path = `/${org.id}/projects/${project.id}/services${
value === 'list' ? '/list' : ''
}`;
push(path);
};
return ( return (
<ServicesView {...props}> <ServicesView
<TopologyGraph services={services} /> onToggle={onToggle}
toggleValue={toggleValue}
services={services}
>
{children}
</ServicesView> </ServicesView>
); );
}; };
Services.propTypes = { Services.propTypes = {
children: React.PropTypes.node,
org: PropTypes.org,
path: React.PropTypes.string.isRequired,
project: PropTypes.project,
push: React.PropTypes.func.isRequired,
services: React.PropTypes.arrayOf(PropTypes.service) services: React.PropTypes.arrayOf(PropTypes.service)
}; };
const mapStateToProps = (state, { const mapStateToProps = (state, {
match = { match = {
params: {} params: {},
path: ''
}, },
push push
}) => ({ }) => ({
org: orgByIdSelector(match.params.org)(state), org: orgByIdSelector(match.params.org)(state),
project: projectByIdSelector(match.params.projectId)(state), project: projectByIdSelector(match.params.projectId)(state),
services: servicesForTopologySelector(match.params.projectId)(state) services: servicesForTopologySelector(match.params.projectId)(state),
path: match.path,
push: push
}); });
export default connect( export default connect(

View File

@ -2,7 +2,6 @@ import React from 'react';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import PropTypes from '@root/prop-types'; import PropTypes from '@root/prop-types';
import ServiceItem from '@components/service/item'; import ServiceItem from '@components/service/item';
import ServicesView from '@components/services/view';
import { import {
orgByIdSelector, orgByIdSelector,
@ -27,9 +26,9 @@ const Services = (props) => {
)); ));
return ( return (
<ServicesView {...props}> <div>
{serviceList} {serviceList}
</ServicesView> </div>
); );
}; };

View File

@ -0,0 +1,38 @@
import React from 'react';
import { connect } from 'react-redux';
import PropTypes from '@root/prop-types';
import { TopologyGraph } from '@ui/components/topology';
import {
orgByIdSelector,
projectByIdSelector,
servicesForTopologySelector
} from '@state/selectors';
const Services = (props) => {
const {
services = []
} = props;
return (
<TopologyGraph services={services} />
);
};
Services.propTypes = {
services: React.PropTypes.arrayOf(PropTypes.service)
};
const mapStateToProps = (state, {
match = {
params: {}
}
}) => ({
org: orgByIdSelector(match.params.org)(state),
project: projectByIdSelector(match.params.projectId)(state),
services: servicesForTopologySelector(match.params.projectId)(state)
});
export default connect(
mapStateToProps
)(Services);

View File

@ -65,8 +65,8 @@ const Rects = {
nodeRectWithChildren: { nodeRectWithChildren: {
left: -Sizes.nodeSizeWithChildren.width/2, left: -Sizes.nodeSizeWithChildren.width/2,
right: Sizes.nodeSizeWithChildren.width/2, right: Sizes.nodeSizeWithChildren.width/2,
top: -Sizes.nodeSizeWithChildren.height/2 + Sizes.contentSize.height/2, top: -Sizes.nodeSizeWithChildren.height/2 + Sizes.contentSize.height/3,
bottom: Sizes.nodeSizeWithChildren.height/2 + Sizes.contentSize.height/2 bottom: Sizes.nodeSizeWithChildren.height/2 + Sizes.contentSize.height/3
} }
}; };