From 9152f7253a170e9e5f2aaf816c1124769dbdb085 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Se=CC=81rgio=20Ramos?= Date: Mon, 9 Jan 2017 22:14:46 +0000 Subject: [PATCH] list services using ListItem --- frontend/src/containers/services/index.js | 48 +++--------- frontend/src/containers/services/service.js | 84 +++++++++++++++++++++ frontend/src/mock-state.json | 24 ++++-- 3 files changed, 110 insertions(+), 46 deletions(-) create mode 100644 frontend/src/containers/services/service.js diff --git a/frontend/src/containers/services/index.js b/frontend/src/containers/services/index.js index 82c3454a..94fcfe90 100644 --- a/frontend/src/containers/services/index.js +++ b/frontend/src/containers/services/index.js @@ -1,10 +1,9 @@ const React = require('react'); const ReactRedux = require('react-redux'); -const ReactRouter = require('react-router'); const EmptyServices = require('@components/empty/services'); const PropTypes = require('@root/prop-types'); -const Row = require('@ui/components/row'); +const Service = require('./service'); const selectors = require('@state/selectors'); const { @@ -17,10 +16,6 @@ const { servicesByProjectIdSelector } = selectors; -const { - Link -} = ReactRouter; - const Services = ({ org = {}, project = {}, @@ -30,42 +25,19 @@ const Services = ({ ); - const serviceList = (services) => { - if (!services || !services.length) { - return null; - } - - const list = services.map((service) => { - const to = `/${org.id}/projects/${project.id}/services/${service.id}`; - const childs = serviceList(service.services); - - const name = childs ? service.name : ( - - {service.name} - - ); - - return ( -
  • - {name} - {childs} -
  • - ); - }); - - return ( - - ); - }; + const serviceList = services.map((service) => ( + + )); return (
    {empty} - - {serviceList(services)} - + {serviceList}
    ); }; diff --git a/frontend/src/containers/services/service.js b/frontend/src/containers/services/service.js new file mode 100644 index 00000000..c6fd4e5a --- /dev/null +++ b/frontend/src/containers/services/service.js @@ -0,0 +1,84 @@ +const React = require('react'); +// const ReactRouter = require('react-router'); + +const List = require('@ui/components/list'); +const PropTypes = require('@root/prop-types'); + +// const { +// Link +// } = ReactRouter; + +const { + ListItem, + ListItemView, + ListItemMeta, + ListItemTitle, + ListItemSubTitle, + ListItemDescription, + ListItemGroupView, + ListItemOutlet, + ListItemOptions, + ListItemHeader +} = List; + +const Service = ({ + org = '', + project = '', + service = {} +}) => { + // const to = `/${org}/projects/${project}/services/${service.id}`; + + const childs = service.services.map((service) => ( + 1} + > + + + {service.name} + {service.instances} instances + + + Metrics + + + + )); + + const view = childs.length ? ( + + {childs} + + ) : ( + + + Flags + + + Metrics + + + ); + + return ( + + + + {service.name} + {service.instances} instance + + + + {view} + + ); +}; + +Service.propTypes = { + org: React.PropTypes.string, + project: React.PropTypes.string, + service: PropTypes.service +}; + +module.exports = Service; diff --git a/frontend/src/mock-state.json b/frontend/src/mock-state.json index b1a729c4..34f70ecb 100644 --- a/frontend/src/mock-state.json +++ b/frontend/src/mock-state.json @@ -157,44 +157,52 @@ "uuid": "081a792c-47e0-4439-924b-2efa9788ae9e", "id": "nginx", "name": "Nginx", - "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401" + "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401", + "instances": 1 }, { "uuid": "be227788-74f1-4e5b-a85f-b5c71cbae8d8", "id": "wordpress", "name": "Wordpress", - "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401" + "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401", + "instances": 1 }, { "uuid": "6a0eee76-c019-413b-9d5f-44712b55b993", "id": "nfs", "name": "NFS", - "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401" + "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401", + "instances": 1 }, { "uuid": "6d31aff4-de1e-4042-a983-fbd23d5c530c", "id": "memcached", "name": "Memcached", - "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401" + "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401", + "instances": 1 }, { "uuid": "4ee4103e-1a52-4099-a48e-01588f597c70", "id": "percona", "name": "Percona", - "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401" + "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401", + "instances": 5 }, { "uuid": "9572d367-c4ae-4fb1-8ad5-f5e3830e7034", "id": "primary", "name": "Primary", "parent": "4ee4103e-1a52-4099-a48e-01588f597c70", - "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401" + "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401", + "instances": 1 }, { "uuid": "c8411ef0-ab39-42cb-a704-d20b170eff31", "id": "secondaries", "name": "Secondaries", "parent": "4ee4103e-1a52-4099-a48e-01588f597c70", - "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401" + "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401", + "instances": 4 }, { "uuid": "97c68055-db88-45c9-ad49-f26da4264777", "id": "consul", "name": "Consul", - "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401" + "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401", + "instances": 1 }] }, "instances": {