From 96b0a17cb14ac42cfb867c9bf0b405abb2ee1d53 Mon Sep 17 00:00:00 2001 From: JUDIT GRESKOVITS Date: Tue, 28 Feb 2017 18:34:48 +0000 Subject: [PATCH] Add topology view --- frontend/src/components/services/view.js | 71 ++++++++++++++++++++ frontend/src/containers/project/services.js | 18 ++++- frontend/src/containers/services/index.js | 54 ++++----------- frontend/src/containers/services/list.js | 56 +++++++++++++++ ui/src/components/form/index.js | 34 ++++------ ui/src/components/form/toggle/index.js | 9 ++- ui/src/components/topology/graph-node.js | 14 ++-- ui/src/components/topology/topology-graph.js | 2 +- 8 files changed, 183 insertions(+), 75 deletions(-) create mode 100644 frontend/src/components/services/view.js create mode 100644 frontend/src/containers/services/list.js diff --git a/frontend/src/components/services/view.js b/frontend/src/components/services/view.js new file mode 100644 index 00000000..2b1a49f4 --- /dev/null +++ b/frontend/src/components/services/view.js @@ -0,0 +1,71 @@ +import React from 'react'; +import EmptyServices from '@components/empty/services'; +import PropTypes from '@root/prop-types'; +import Row from '@ui/components/row'; +import Column from '@ui/components/column'; +import { H2 } from '@ui/components/base-elements'; +import { + FormGroup, + Toggle, + ToggleList +} from '@ui/components/form'; + +const ServicesView = ({ + children, + org = {}, + match = {}, + project = {}, + routerPush = {}, + services = [] +}) => { + const toggle = () => { + if(!services) { + return null; + } + + const value = match.path === '/:org/projects/:projectId/services' ? + 'topology' : 'list'; + + const onToggleChange = (evt) => { + evt.preventDefault(); + const value = evt.target.value; + const path = `/${org.id}/projects/${project.id}/services${ + value === 'list' ? '/list' : '' + }`; + routerPush(path); + }; + + return ( + + + Topology + List + + + ); + }; + + const content = services.length ? + children : ; + + return ( + + +

Services

+ { toggle() } + { content } +
+
+ ); +}; + +ServicesView.propTypes = { + children: React.PropTypes.node, + match: React.PropTypes.object.isRequired, + org: PropTypes.org, + project: PropTypes.project, + routerPush: React.PropTypes.func.isRequired, + services: React.PropTypes.arrayOf(PropTypes.service) +}; + +export default ServicesView; diff --git a/frontend/src/containers/project/services.js b/frontend/src/containers/project/services.js index 1decbdc5..7c0f3af9 100644 --- a/frontend/src/containers/project/services.js +++ b/frontend/src/containers/project/services.js @@ -1,23 +1,35 @@ import React from 'react'; import { Switch, Route } from 'react-router-dom'; import Section from './section'; -import Services from '@containers/services'; +import ServicesTopology from '@containers/services'; +import ServicesList from '@containers/services/list'; import Service from '@containers/service'; export default () => { + const topology = (props) => ( +
+ +
+ ); + const list = (props) => (
- +
); return ( + { - const empty = services.length ? null : ( - - ); +const Services = (props) => { - const serviceList = services.map((service) => ( - - )); + const { + services = [] + } = props; return ( - - -

Services

- - {empty} - {serviceList} -
-
+ + + ); }; Services.propTypes = { - org: PropTypes.org, - project: PropTypes.project, - services: React.PropTypes.arrayOf(PropTypes.service), - servicesForTopology: React.PropTypes.arrayOf(React.PropTypes.object) + services: React.PropTypes.arrayOf(PropTypes.service) }; const mapStateToProps = (state, { match = { params: {} - } + }, + push }) => ({ org: orgByIdSelector(match.params.org)(state), project: projectByIdSelector(match.params.projectId)(state), - services: servicesByProjectIdSelector(match.params.projectId)(state), - servicesForTopology: - servicesForTopologySelector(match.params.projectId)(state) + routerPush: push, + services: servicesForTopologySelector(match.params.projectId)(state) }); export default connect( diff --git a/frontend/src/containers/services/list.js b/frontend/src/containers/services/list.js new file mode 100644 index 00000000..5bf57cac --- /dev/null +++ b/frontend/src/containers/services/list.js @@ -0,0 +1,56 @@ +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, + projectByIdSelector, + servicesByProjectIdSelector +} from '@state/selectors'; + +const Services = (props) => { + const { + org = {}, + project = {}, + services = [] + } = props; + + const serviceList = services.map((service) => ( + + )); + + return ( + + {serviceList} + + ); +}; + +Services.propTypes = { + org: PropTypes.org, + project: PropTypes.project, + services: React.PropTypes.arrayOf(PropTypes.service) +}; + +const mapStateToProps = (state, { + match = { + params: {} + }, + push +}) => ({ + org: orgByIdSelector(match.params.org)(state), + project: projectByIdSelector(match.params.projectId)(state), + routerPush: push, + services: servicesByProjectIdSelector(match.params.projectId)(state) +}); + +export default connect( + mapStateToProps +)(Services); diff --git a/ui/src/components/form/index.js b/ui/src/components/form/index.js index 535cb863..cfce00b6 100644 --- a/ui/src/components/form/index.js +++ b/ui/src/components/form/index.js @@ -1,22 +1,12 @@ -import Checkbox from './checkbox'; -import Fieldset from './fieldset'; -import FormGroup from './group'; -import Input from './input'; -import FormLabel from './label'; -import Legend from './legend'; -import FormMeta from './meta'; -import Radio, { RadioList } from './radio'; -import Select from './select'; - -export { - Checkbox, - Fieldset, - FormGroup, - Input, - FormLabel, - Legend, - FormMeta, - Radio, - RadioList, - Select -}; +export { default as Checkbox } from './checkbox'; +export { default as Fieldset } from './fieldset'; +export { default as FormGroup } from './group'; +export { default as Input } from './input'; +export { default as FormLabel } from './label'; +export { default as Legend } from './legend'; +export { default as FormMeta } from './meta'; +export { default as Radio } from './radio'; +export { RadioList as RadioList } from './radio'; +export { default as Select } from './select'; +export { default as Toggle } from './toggle'; +export { ToggleList as ToggleList } from './toggle'; diff --git a/ui/src/components/form/toggle/index.js b/ui/src/components/form/toggle/index.js index 6fe99d5f..f9783ee0 100644 --- a/ui/src/components/form/toggle/index.js +++ b/ui/src/components/form/toggle/index.js @@ -5,6 +5,7 @@ import { Subscriber } from 'react-broadcast'; import { Baseline } from '../../../shared/composers'; import BaseInput from '../base-input'; import { boxes, colors } from '../../../shared/constants'; +import { rndId } from '../../../shared/functions'; const Input = styled.input` display: none; @@ -91,16 +92,20 @@ const Toggle = BaseInput(({ ...props }) => { const render = (value) => { + const id = rndId(); return (