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 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>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
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",
|
"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": {
|
||||||
|
Loading…
Reference in New Issue
Block a user