Spearhead/joyent-portal
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

custom outlet for metrics

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
frontend/src/components/instance-item/index.js
View File

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

30
frontend/src/components/metrics-row/index.js → frontend/src/components/metrics-outlet/index.js
View File

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

7
frontend/src/components/service-item/index.js
View File

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