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

recursive service item with metrics

This commit is contained in:
Sérgio Ramos 2017-01-11 17:42:47 +00:00
parent e12b87283a
commit 2095eaf00c
2 changed files with 92 additions and 36 deletions

View File

@ -1,14 +1,23 @@
const forceArray = require('force-array');
const React = require('react'); const React = require('react');
const ReactRouter = require('react-router'); const ReactRouter = require('react-router');
const Styled = require('styled-components');
const Anchor = require('@ui/components/anchor'); const Anchor = require('@ui/components/anchor');
const Column = require('@ui/components/column');
const List = require('@ui/components/list'); const List = require('@ui/components/list');
const MiniMetric = require('@ui/components/mini-metric');
const PropTypes = require('@root/prop-types'); const PropTypes = require('@root/prop-types');
const Row = require('@ui/components/row');
const { const {
Link Link
} = ReactRouter; } = ReactRouter;
const {
default: styled
} = Styled;
const { const {
ListItem, ListItem,
ListItemView, ListItemView,
@ -22,30 +31,84 @@ const {
ListItemHeader ListItemHeader
} = List; } = List;
const {
MiniMetricGraph,
MiniMetricMeta,
MiniMetricTitle,
MiniMetricSubtitle,
MiniMetricView
} = MiniMetric;
const MetricsRow = styled(Row)`
margin: 0;
& > div {
padding-left: 0;
padding-right: 0;
}
`;
const ServiceItem = ({ const ServiceItem = ({
org = '', org = '',
project = '', project = '',
service = {} service = {}
}) => { }) => {
const isChild = !!service.parent;
const childs = forceArray(service.services).map((service) => (
<ServiceItem
key={service.uuid}
org={org}
project={project}
service={service}
/>
));
const to = `/${org}/projects/${project}/services/${service.id}`; const to = `/${org}/projects/${project}/services/${service.id}`;
const childs = service.services.map((service) => ( const title = isChild ? (
<ListItem <ListItemTitle>{service.name}</ListItemTitle>
collapsed={service.collapsed} ) : (
flat <ListItemTitle>
key={service.uuid} <Link to={to}>
stacked={service.instances > 1} {Anchor.fn(
> <Anchor secondary>
<ListItemView> {service.name}
<ListItemMeta> </Anchor>
<ListItemTitle>{service.name}</ListItemTitle> )}
<ListItemSubTitle>{service.instances} instances</ListItemSubTitle> </Link>
</ListItemMeta> </ListItemTitle>
<ListItemOutlet> );
Metrics
</ListItemOutlet> const subtitle = (
</ListItemView> <ListItemSubTitle>{service.instances} instances</ListItemSubTitle>
</ListItem> );
const description = (
<ListItemDescription>Flags</ListItemDescription>
);
const header = isChild ? null : (
<ListItemHeader>
<ListItemMeta>
{title}
{subtitle}
{description}
</ListItemMeta>
<ListItemOptions></ListItemOptions>
</ListItemHeader>
);
const metrics = service.metrics.map((metric, i) => (
<Column key={i} xs={4}>
<MiniMetricView borderless>
<MiniMetricMeta>
<MiniMetricTitle>Memory: 54%</MiniMetricTitle>
<MiniMetricSubtitle>(1280/3000 MB)</MiniMetricSubtitle>
</MiniMetricMeta>
<MiniMetricGraph data={metric.data} />
</MiniMetricView>
</Column>
)); ));
const view = childs.length ? ( const view = childs.length ? (
@ -55,10 +118,14 @@ const ServiceItem = ({
) : ( ) : (
<ListItemView> <ListItemView>
<ListItemMeta> <ListItemMeta>
<ListItemDescription>Flags</ListItemDescription> {isChild && title}
{isChild && subtitle}
{description}
</ListItemMeta> </ListItemMeta>
<ListItemOutlet> <ListItemOutlet>
Metrics <MetricsRow>
{metrics}
</MetricsRow>
</ListItemOutlet> </ListItemOutlet>
</ListItemView> </ListItemView>
); );
@ -66,23 +133,12 @@ const ServiceItem = ({
return ( return (
<ListItem <ListItem
collapsed={service.collapsed} collapsed={service.collapsed}
headed flat={isChild}
headed={!isChild}
key={service.uuid}
stacked={isChild && (service.instances > 1)}
> >
<ListItemHeader> {header}
<ListItemMeta>
<ListItemTitle>
<Link to={to}>
{Anchor.fn(
<Anchor secondary>
{service.name}
</Anchor>
)}
</Link>
</ListItemTitle>
<ListItemSubTitle>{service.instances} instance</ListItemSubTitle>
</ListItemMeta>
<ListItemOptions></ListItemOptions>
</ListItemHeader>
{view} {view}
</ListItem> </ListItem>
); );

View File

@ -4,7 +4,7 @@ const React = require('react');
const transfer = (parentProps, props) => { const transfer = (parentProps, props) => {
// eslint-disable-next-line react/prop-types // eslint-disable-next-line react/prop-types
return React.Children.map(props.children, (c) => { return React.Children.map(props.children, (c) => {
return React.cloneElement(c, { return c && React.cloneElement(c, {
...c.props, ...c.props,
...parentProps.reduce((sum, name) => ({ ...parentProps.reduce((sum, name) => ({
...sum, ...sum,