Restructure services containers for router push

Meow

Restructure services containers for router push

frontend/src/components/services/view.js

@@ -21,38 +21,29 @@ const StyledLegend = styled(Legend)`
 
 const ServicesView = ({
   children,
-  org = {},
-  match = {},
-  project = {},
-  services = [],
-  router = {}
+  onToggle,
+  services,
+  toggleValue
 }) => {
-  const toggle = () => {
-    if(!services) {
-      return null;
-    }
-
-    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' : ''
-      }`);
+    const value = evt.target.value;
+    if(value !== toggleValue) {
+      onToggle(value);
+    }
   };
 
-    return (
-      <FormGroup name='service-view' value={value}>
+  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;

frontend/src/containers/project/services.js

@@ -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}>
+      <Services {...props}>
         <ServicesTopology {...props} />
+      </Services>
     </Section>
   );
 
   const list = (props) => (
     <Section {...props}>
+      <Services {...props}>
         <ServicesList {...props} />
+      </Services>
     </Section>
   );
 

frontend/src/containers/services/index.js

@@ -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(

frontend/src/containers/services/list.js

@@ -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>
   );
 };
 

frontend/src/containers/services/topology.js

@@ -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);

ui/src/components/topology/constants.js

@@ -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
   }
 };