custom outlet for metrics

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

@@ -1,6 +1,6 @@
 const React = require('react');
 
-const DatasetsRow = require('@components/metrics-row');
+const MetricsOutlet = require('@components/metrics-outlet');
 const PropTypes = require('@root/prop-types');
 const List = require('@ui/components/list');
 
@@ -9,8 +9,7 @@ const {
   ListItemView,
   ListItemMeta,
   ListItemTitle,
-  ListItemOptions,
+  ListItemOptions
-  ListItemOutlet
 } = List;
 
 const InstanceItem = ({
@@ -22,9 +21,7 @@ const InstanceItem = ({
       <ListItemMeta onClick={toggleCollapsed}>
         <ListItemTitle>{instance.name}</ListItemTitle>
       </ListItemMeta>
-      <ListItemOutlet>
+      <MetricsOutlet datasets={instance.metrics} />
-        <DatasetsRow datasets={instance.metrics} />
-      </ListItemOutlet>
     </ListItemView>
     <ListItemOptions>
       …

frontend/src/components/metrics-outlet/index.js

@@ -2,6 +2,7 @@ const React = require('react');
 const Styled = require('styled-components');
 
 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');
@@ -18,6 +19,15 @@ const {
   MiniMetricView
 } = MiniMetric;
 
+const {
+  ListItemOutlet
+} = List;
+
+const StyledOutlet = styled(ListItemOutlet)`
+  padding-left: 0;
+  padding-right: 0;
+`;
+
 const StyledRow = styled(Row)`
   margin: 0;
 
@@ -27,9 +37,11 @@ const StyledRow = styled(Row)`
   }
 `;
 
-const MetricsRow = ({
+const MetricsOutlet = (props) => {
+  const {
     datasets = []
-}) => {
+  } = props;
+
   const _datasets = datasets.map((metric, i) => (
     <Column key={i} xs={4}>
       <MiniMetricView borderless>
@@ -43,14 +55,16 @@ const MetricsRow = ({
   ));
 
   return (
+    <StyledOutlet {...props}>
       <StyledRow>
         {_datasets}
       </StyledRow>
+    </StyledOutlet>
   );
 };
 
-MetricsRow.propTypes = {
+MetricsOutlet.propTypes = {
   datasets: React.PropTypes.arrayOf(PropTypes.dataset)
 };
 
-module.exports = MetricsRow;
+module.exports = MetricsOutlet;

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

@@ -4,7 +4,7 @@ const ReactRouter = require('react-router');
 
 const Anchor = require('@ui/components/anchor');
 const List = require('@ui/components/list');
-const MetricsRow = require('@components/metrics-row');
+const MetricsOutlet = require('@components/metrics-outlet');
 const PropTypes = require('@root/prop-types');
 
 const {
@@ -19,7 +19,6 @@ const {
   ListItemSubTitle,
   ListItemDescription,
   ListItemGroupView,
-  ListItemOutlet,
   ListItemOptions,
   ListItemHeader
 } = List;
@@ -86,9 +85,7 @@ const ServiceItem = ({
         {isChild && subtitle}
         {description}
       </ListItemMeta>
-      <ListItemOutlet>
+      <MetricsOutlet datasets={service.metrics} />
-        <MetricsRow datasets={service.metrics} />
-      </ListItemOutlet>
     </ListItemView>
   );