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:
parent
e12b87283a
commit
2095eaf00c
@ -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>
|
||||||
);
|
);
|
||||||
|
@ -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,
|
||||||
|
Loading…
Reference in New Issue
Block a user