recursive service item with metrics

frontend/src/components/service-item/index.js

@@ -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>
   );

ui/src/components/list/transfer-props.js

@@ -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,