Restructure services containers for router push
Meow Restructure services containers for router push
This commit is contained in:
parent
0bfe081a86
commit
ea1876d691
@ -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;
|
||||
|
@ -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>
|
||||
);
|
||||
|
||||
|
@ -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(
|
||||
|
@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
|
38
frontend/src/containers/services/topology.js
Normal file
38
frontend/src/containers/services/topology.js
Normal 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);
|
@ -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
|
||||
}
|
||||
};
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user