mirror of
https://github.com/yldio/copilot.git
synced 2024-11-11 05:40:11 +02:00
custom outlet for metrics
This commit is contained in:
parent
df02761784
commit
4eea80a74d
@ -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>
|
||||
…
|
||||
|
@ -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 = ({
|
||||
datasets = []
|
||||
}) => {
|
||||
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 (
|
||||
<StyledRow>
|
||||
{_datasets}
|
||||
</StyledRow>
|
||||
<StyledOutlet {...props}>
|
||||
<StyledRow>
|
||||
{_datasets}
|
||||
</StyledRow>
|
||||
</StyledOutlet>
|
||||
);
|
||||
};
|
||||
|
||||
MetricsRow.propTypes = {
|
||||
MetricsOutlet.propTypes = {
|
||||
datasets: React.PropTypes.arrayOf(PropTypes.dataset)
|
||||
};
|
||||
|
||||
module.exports = MetricsRow;
|
||||
module.exports = MetricsOutlet;
|
@ -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>
|
||||
);
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user