1
0
mirror of https://github.com/yldio/copilot.git synced 2024-11-11 05:40:11 +02:00

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 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 = ({
<EmptyServices />
);
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 : (
<Link activeClassName='active' to={to}>
{service.name}
</Link>
);
return (
<li key={service.id}>
{name}
{childs}
</li>
);
});
return (
<ul>
{list}
</ul>
);
};
const serviceList = services.map((service) => (
<Service
key={service.uuid}
org={org.id}
project={project.id}
service={service}
/>
));
return (
<div>
{empty}
<Row>
{serviceList(services)}
</Row>
{serviceList}
</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",
"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": {