custom outlet for metrics

This commit is contained in:
Sérgio Ramos 2017-01-12 17:06:55 +00:00
parent df02761784
commit 4eea80a74d
3 changed files with 27 additions and 19 deletions

View File

@ -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,
ListItemOutlet
ListItemOptions
} = List;
const InstanceItem = ({
@ -22,9 +21,7 @@ const InstanceItem = ({
<ListItemMeta onClick={toggleCollapsed}>
<ListItemTitle>{instance.name}</ListItemTitle>
</ListItemMeta>
<ListItemOutlet>
<DatasetsRow datasets={instance.metrics} />
</ListItemOutlet>
<MetricsOutlet datasets={instance.metrics} />
</ListItemView>
<ListItemOptions>

View File

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

View File

@ -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>
<MetricsRow datasets={service.metrics} />
</ListItemOutlet>
<MetricsOutlet datasets={service.metrics} />
</ListItemView>
);