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:
parent
b67fb7c50e
commit
9152f7253a
@ -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>
|
||||
);
|
||||
};
|
||||
|
84
frontend/src/containers/services/service.js
Normal file
84
frontend/src/containers/services/service.js
Normal 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;
|
@ -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": {
|
||||
|
Loading…
Reference in New Issue
Block a user