mirror of
https://github.com/yldio/copilot.git
synced 2024-11-10 21:30:06 +02:00
Restructure services containers for router push
Meow Restructure services containers for router push
This commit is contained in:
parent
0bfe081a86
commit
ea1876d691
@ -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;
|
||||||
|
@ -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>
|
||||||
);
|
);
|
||||||
|
|
||||||
|
@ -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(
|
||||||
|
@ -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>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
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: {
|
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
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user