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

View File

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

View File

@ -1,7 +1,6 @@
import React from 'react';
import { connect } from 'react-redux';
import PropTypes from '@root/prop-types';
import { TopologyGraph } from '@ui/components/topology';
import ServicesView from '@components/services/view';
import {
@ -12,29 +11,56 @@ import {
const Services = (props) => {
const {
services = []
org = {},
project = {},
services = [],
children,
path,
push
} = 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 (
<ServicesView {...props}>
<TopologyGraph services={services} />
<ServicesView
onToggle={onToggle}
toggleValue={toggleValue}
services={services}
>
{children}
</ServicesView>
);
};
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)
};
const mapStateToProps = (state, {
match = {
params: {}
params: {},
path: ''
},
push
}) => ({
org: orgByIdSelector(match.params.org)(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(

View File

@ -2,7 +2,6 @@ import React from 'react';
import { connect } from 'react-redux';
import PropTypes from '@root/prop-types';
import ServiceItem from '@components/service/item';
import ServicesView from '@components/services/view';
import {
orgByIdSelector,
@ -27,9 +26,9 @@ const Services = (props) => {
));
return (
<ServicesView {...props}>
<div>
{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: {
left: -Sizes.nodeSizeWithChildren.width/2,
right: Sizes.nodeSizeWithChildren.width/2,
top: -Sizes.nodeSizeWithChildren.height/2 + Sizes.contentSize.height/2,
bottom: 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/3
}
};