list services using ListItem

This commit is contained in:
Sérgio Ramos 2017-01-09 22:14:46 +00:00
parent b67fb7c50e
commit 9152f7253a
3 changed files with 110 additions and 46 deletions

View File

@ -1,10 +1,9 @@
const React = require('react'); const React = require('react');
const ReactRedux = require('react-redux'); const ReactRedux = require('react-redux');
const ReactRouter = require('react-router');
const EmptyServices = require('@components/empty/services'); const EmptyServices = require('@components/empty/services');
const PropTypes = require('@root/prop-types'); const PropTypes = require('@root/prop-types');
const Row = require('@ui/components/row'); const Service = require('./service');
const selectors = require('@state/selectors'); const selectors = require('@state/selectors');
const { const {
@ -17,10 +16,6 @@ const {
servicesByProjectIdSelector servicesByProjectIdSelector
} = selectors; } = selectors;
const {
Link
} = ReactRouter;
const Services = ({ const Services = ({
org = {}, org = {},
project = {}, project = {},
@ -30,42 +25,19 @@ const Services = ({
<EmptyServices /> <EmptyServices />
); );
const serviceList = (services) => { const serviceList = services.map((service) => (
if (!services || !services.length) { <Service
return null; key={service.uuid}
} org={org.id}
project={project.id}
const list = services.map((service) => { service={service}
const to = `/${org.id}/projects/${project.id}/services/${service.id}`; />
const childs = serviceList(service.services); ));
const name = childs ? service.name : (
<Link activeClassName='active' to={to}>
{service.name}
</Link>
);
return (
<li key={service.id}>
{name}
{childs}
</li>
);
});
return (
<ul>
{list}
</ul>
);
};
return ( return (
<div> <div>
{empty} {empty}
<Row> {serviceList}
{serviceList(services)}
</Row>
</div> </div>
); );
}; };

View File

@ -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) => (
<ListItem
flat
key={service.uuid}
stacked={service.instances > 1}
>
<ListItemView>
<ListItemMeta>
<ListItemTitle>{service.name}</ListItemTitle>
<ListItemSubTitle>{service.instances} instances</ListItemSubTitle>
</ListItemMeta>
<ListItemOutlet>
Metrics
</ListItemOutlet>
</ListItemView>
</ListItem>
));
const view = childs.length ? (
<ListItemGroupView>
{childs}
</ListItemGroupView>
) : (
<ListItemView>
<ListItemMeta>
<ListItemDescription>Flags</ListItemDescription>
</ListItemMeta>
<ListItemOutlet>
Metrics
</ListItemOutlet>
</ListItemView>
);
return (
<ListItem headed>
<ListItemHeader>
<ListItemMeta>
<ListItemTitle>{service.name}</ListItemTitle>
<ListItemSubTitle>{service.instances} instance</ListItemSubTitle>
</ListItemMeta>
<ListItemOptions></ListItemOptions>
</ListItemHeader>
{view}
</ListItem>
);
};
Service.propTypes = {
org: React.PropTypes.string,
project: React.PropTypes.string,
service: PropTypes.service
};
module.exports = Service;

View File

@ -157,44 +157,52 @@
"uuid": "081a792c-47e0-4439-924b-2efa9788ae9e", "uuid": "081a792c-47e0-4439-924b-2efa9788ae9e",
"id": "nginx", "id": "nginx",
"name": "Nginx", "name": "Nginx",
"project": "e0ea0c02-55cc-45fe-8064-3e5176a59401" "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
"instances": 1
}, { }, {
"uuid": "be227788-74f1-4e5b-a85f-b5c71cbae8d8", "uuid": "be227788-74f1-4e5b-a85f-b5c71cbae8d8",
"id": "wordpress", "id": "wordpress",
"name": "Wordpress", "name": "Wordpress",
"project": "e0ea0c02-55cc-45fe-8064-3e5176a59401" "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
"instances": 1
}, { }, {
"uuid": "6a0eee76-c019-413b-9d5f-44712b55b993", "uuid": "6a0eee76-c019-413b-9d5f-44712b55b993",
"id": "nfs", "id": "nfs",
"name": "NFS", "name": "NFS",
"project": "e0ea0c02-55cc-45fe-8064-3e5176a59401" "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
"instances": 1
}, { }, {
"uuid": "6d31aff4-de1e-4042-a983-fbd23d5c530c", "uuid": "6d31aff4-de1e-4042-a983-fbd23d5c530c",
"id": "memcached", "id": "memcached",
"name": "Memcached", "name": "Memcached",
"project": "e0ea0c02-55cc-45fe-8064-3e5176a59401" "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
"instances": 1
}, { }, {
"uuid": "4ee4103e-1a52-4099-a48e-01588f597c70", "uuid": "4ee4103e-1a52-4099-a48e-01588f597c70",
"id": "percona", "id": "percona",
"name": "Percona", "name": "Percona",
"project": "e0ea0c02-55cc-45fe-8064-3e5176a59401" "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
"instances": 5
}, { }, {
"uuid": "9572d367-c4ae-4fb1-8ad5-f5e3830e7034", "uuid": "9572d367-c4ae-4fb1-8ad5-f5e3830e7034",
"id": "primary", "id": "primary",
"name": "Primary", "name": "Primary",
"parent": "4ee4103e-1a52-4099-a48e-01588f597c70", "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", "uuid": "c8411ef0-ab39-42cb-a704-d20b170eff31",
"id": "secondaries", "id": "secondaries",
"name": "Secondaries", "name": "Secondaries",
"parent": "4ee4103e-1a52-4099-a48e-01588f597c70", "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", "uuid": "97c68055-db88-45c9-ad49-f26da4264777",
"id": "consul", "id": "consul",
"name": "Consul", "name": "Consul",
"project": "e0ea0c02-55cc-45fe-8064-3e5176a59401" "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
"instances": 1
}] }]
}, },
"instances": { "instances": {