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 ReactRouter = require('react-router');
const Styled = require('styled-components');
const Anchor = require('@ui/components/anchor');
const Column = require('@ui/components/column');
const List = require('@ui/components/list');
const MiniMetric = require('@ui/components/mini-metric');
const PropTypes = require('@root/prop-types');
const Row = require('@ui/components/row');
const {
Link
} = ReactRouter;
const {
default: styled
} = Styled;
const {
ListItem,
ListItemView,
@ -22,54 +31,44 @@ const {
ListItemHeader
} = List;
const {
MiniMetricGraph,
MiniMetricMeta,
MiniMetricTitle,
MiniMetricSubtitle,
MiniMetricView
} = MiniMetric;
const MetricsRow = styled(Row)`
margin: 0;
& > div {
padding-left: 0;
padding-right: 0;
}
`;
const ServiceItem = ({
org = '',
project = '',
service = {}
}) => {
const to = `/${org}/projects/${project}/services/${service.id}`;
const isChild = !!service.parent;
const childs = service.services.map((service) => (
<ListItem
collapsed={service.collapsed}
flat
const childs = forceArray(service.services).map((service) => (
<ServiceItem
key={service.uuid}
stacked={service.instances > 1}
>
<ListItemView>
<ListItemMeta>
<ListItemTitle>{service.name}</ListItemTitle>
<ListItemSubTitle>{service.instances} instances</ListItemSubTitle>
</ListItemMeta>
<ListItemOutlet>
Metrics
</ListItemOutlet>
</ListItemView>
</ListItem>
org={org}
project={project}
service={service}
/>
));
const view = childs.length ? (
<ListItemGroupView>
{childs}
</ListItemGroupView>
) : (
<ListItemView>
<ListItemMeta>
<ListItemDescription>Flags</ListItemDescription>
</ListItemMeta>
<ListItemOutlet>
Metrics
</ListItemOutlet>
</ListItemView>
);
const to = `/${org}/projects/${project}/services/${service.id}`;
return (
<ListItem
collapsed={service.collapsed}
headed
>
<ListItemHeader>
<ListItemMeta>
const title = isChild ? (
<ListItemTitle>{service.name}</ListItemTitle>
) : (
<ListItemTitle>
<Link to={to}>
{Anchor.fn(
@ -79,10 +78,67 @@ const ServiceItem = ({
)}
</Link>
</ListItemTitle>
<ListItemSubTitle>{service.instances} instance</ListItemSubTitle>
);
const subtitle = (
<ListItemSubTitle>{service.instances} instances</ListItemSubTitle>
);
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 ? (
<ListItemGroupView>
{childs}
</ListItemGroupView>
) : (
<ListItemView>
<ListItemMeta>
{isChild && title}
{isChild && subtitle}
{description}
</ListItemMeta>
<ListItemOutlet>
<MetricsRow>
{metrics}
</MetricsRow>
</ListItemOutlet>
</ListItemView>
);
return (
<ListItem
collapsed={service.collapsed}
flat={isChild}
headed={!isChild}
key={service.uuid}
stacked={isChild && (service.instances > 1)}
>
{header}
{view}
</ListItem>
);

View File

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