mirror of
https://github.com/yldio/copilot.git
synced 2024-11-11 05:40:11 +02:00
Rewrite AddMetric component so that it works with react-intl and conforms to other similar components
This commit is contained in:
parent
999c3facf2
commit
c82432dd9d
73
frontend/src/containers/metrics/add-metrics.js
Normal file
73
frontend/src/containers/metrics/add-metrics.js
Normal file
@ -0,0 +1,73 @@
|
|||||||
|
const React = require('react');
|
||||||
|
const ReactRedux = require('react-redux');
|
||||||
|
const PropTypes = require('@root/prop-types');
|
||||||
|
const AddMetric = require('@ui/components/add-metric');
|
||||||
|
const ReactIntl = require('react-intl');
|
||||||
|
|
||||||
|
const {
|
||||||
|
connect
|
||||||
|
} = ReactRedux;
|
||||||
|
|
||||||
|
const {
|
||||||
|
FormattedMessage
|
||||||
|
} = ReactIntl;
|
||||||
|
|
||||||
|
const {
|
||||||
|
AddMetricButton,
|
||||||
|
AddMetricDescription,
|
||||||
|
AddMetricLink,
|
||||||
|
AddMetricTile,
|
||||||
|
AddMetricTitle
|
||||||
|
} = AddMetric;
|
||||||
|
|
||||||
|
// we need some props! But like what? We'll need :
|
||||||
|
// - metrics
|
||||||
|
// - what metrics we have
|
||||||
|
// - we need to filter these by...
|
||||||
|
// instance/service? Think service... no? Huh :|
|
||||||
|
// - and some other stuff
|
||||||
|
// - like access to the reducer for when we add a thing
|
||||||
|
// (by thing I mean metric)
|
||||||
|
const AddMetrics = ({
|
||||||
|
metricTypes
|
||||||
|
}) => {
|
||||||
|
|
||||||
|
const metricList = metricTypes.map((metric) => (
|
||||||
|
<AddMetricTile key={metric}>
|
||||||
|
<AddMetricTitle>
|
||||||
|
<FormattedMessage id={`metrics.${metric}.title`} />
|
||||||
|
</AddMetricTitle>
|
||||||
|
<AddMetricDescription>
|
||||||
|
<FormattedMessage id={`metrics.${metric}.description`} />
|
||||||
|
</AddMetricDescription>
|
||||||
|
<AddMetricLink href='http://somelink.com'>
|
||||||
|
<FormattedMessage id={'metrics.add.link'} />
|
||||||
|
</AddMetricLink>
|
||||||
|
<AddMetricButton>
|
||||||
|
<FormattedMessage id={'metrics.add.add-label'} />
|
||||||
|
</AddMetricButton>
|
||||||
|
</AddMetricTile>
|
||||||
|
));
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
{metricList}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
AddMetrics.propTypes = {
|
||||||
|
/* TODO - */
|
||||||
|
metricTypes: PropTypes.metricTypes
|
||||||
|
};
|
||||||
|
|
||||||
|
const mapStateToProps = (state, {
|
||||||
|
params = {}
|
||||||
|
}) => ({
|
||||||
|
/* TODO - tidy up */
|
||||||
|
metricTypes: state.metrics.ui.types
|
||||||
|
});
|
||||||
|
|
||||||
|
module.exports = connect(
|
||||||
|
mapStateToProps
|
||||||
|
)(AddMetrics);
|
0
frontend/src/containers/metrics/index.js
Normal file
0
frontend/src/containers/metrics/index.js
Normal file
@ -1,5 +1,11 @@
|
|||||||
const React = require('react');
|
const React = require('react');
|
||||||
|
const AddMetrics = require('../metrics/add-metrics');
|
||||||
|
|
||||||
module.exports = () => (
|
module.exports = () => (
|
||||||
|
<div>
|
||||||
<p>metrics</p>
|
<p>metrics</p>
|
||||||
|
<div>
|
||||||
|
<AddMetrics />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
);
|
);
|
||||||
|
@ -35,10 +35,19 @@ const Instance = React.PropTypes.shape({
|
|||||||
project: React.PropTypes.string
|
project: React.PropTypes.string
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const Metric = React.PropTypes.shape({
|
||||||
|
...BaseObject
|
||||||
|
});
|
||||||
|
|
||||||
const Sections = React.PropTypes.arrayOf(
|
const Sections = React.PropTypes.arrayOf(
|
||||||
React.PropTypes.string
|
React.PropTypes.string
|
||||||
);
|
);
|
||||||
|
|
||||||
|
// consinder renaming this to 'Types' as it could be used for any
|
||||||
|
const MetricTypes = React.PropTypes.arrayOf(
|
||||||
|
React.PropTypes.string
|
||||||
|
);
|
||||||
|
|
||||||
module.exports = {
|
module.exports = {
|
||||||
account: Account,
|
account: Account,
|
||||||
link: Link,
|
link: Link,
|
||||||
@ -46,5 +55,8 @@ module.exports = {
|
|||||||
project: Project,
|
project: Project,
|
||||||
sections: Sections,
|
sections: Sections,
|
||||||
service: Service,
|
service: Service,
|
||||||
instance: Instance
|
instance: Instance,
|
||||||
|
metric: Metric,
|
||||||
|
// consinder renaming this to 'Types' as it could be used for any
|
||||||
|
metricTypes: MetricTypes
|
||||||
};
|
};
|
||||||
|
51
ui/src/components/add-metric/button.js
Normal file
51
ui/src/components/add-metric/button.js
Normal file
@ -0,0 +1,51 @@
|
|||||||
|
const React = require('react');
|
||||||
|
const Styled = require('styled-components');
|
||||||
|
const fns = require('../../shared/functions');
|
||||||
|
const Button = require('../button');
|
||||||
|
|
||||||
|
const {
|
||||||
|
default: styled
|
||||||
|
} = Styled;
|
||||||
|
|
||||||
|
const {
|
||||||
|
remcalc
|
||||||
|
} = fns;
|
||||||
|
|
||||||
|
const StyledButton = styled(Button)`
|
||||||
|
position: absolute;
|
||||||
|
left: ${remcalc(24)};
|
||||||
|
bottom: ${remcalc(24)};
|
||||||
|
`;
|
||||||
|
|
||||||
|
const AddMetricButton = ({
|
||||||
|
children,
|
||||||
|
disabled,
|
||||||
|
onClick
|
||||||
|
}) => {
|
||||||
|
return disabled ?
|
||||||
|
(
|
||||||
|
<StyledButton
|
||||||
|
disabled
|
||||||
|
name='add-metric-button'
|
||||||
|
onClick={onClick}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</StyledButton>
|
||||||
|
) : (
|
||||||
|
<StyledButton
|
||||||
|
name='add-metric-button'
|
||||||
|
onClick={onClick}
|
||||||
|
secondary
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</StyledButton>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
AddMetricButton.propTypes = {
|
||||||
|
children: React.PropTypes.node,
|
||||||
|
disabled: React.PropTypes.bool,
|
||||||
|
onClick: React.PropTypes.func,
|
||||||
|
};
|
||||||
|
|
||||||
|
module.exports = AddMetricButton;
|
28
ui/src/components/add-metric/description.js
Normal file
28
ui/src/components/add-metric/description.js
Normal file
@ -0,0 +1,28 @@
|
|||||||
|
const React = require('react');
|
||||||
|
const Styled = require('styled-components');
|
||||||
|
const constants = require('../../shared/constants');
|
||||||
|
|
||||||
|
const {
|
||||||
|
colors
|
||||||
|
} = constants;
|
||||||
|
|
||||||
|
const {
|
||||||
|
default: styled
|
||||||
|
} = Styled;
|
||||||
|
|
||||||
|
const StyledDescription = styled.p`
|
||||||
|
margin: 0;
|
||||||
|
color: ${colors.regular};
|
||||||
|
`;
|
||||||
|
|
||||||
|
const Description = (props) => (
|
||||||
|
<StyledDescription name='add-metric-description'>
|
||||||
|
{props.children}
|
||||||
|
</StyledDescription>
|
||||||
|
);
|
||||||
|
|
||||||
|
Description.propTypes = {
|
||||||
|
children: React.PropTypes.node
|
||||||
|
};
|
||||||
|
|
||||||
|
module.exports = Description;
|
@ -1,86 +1,7 @@
|
|||||||
const React = require('react');
|
module.exports = {
|
||||||
const Styled = require('styled-components');
|
AddMetricButton: require('./button'),
|
||||||
const constants = require('../../shared/constants');
|
AddMetricDescription: require('./description'),
|
||||||
const fns = require('../../shared/functions');
|
AddMetricLink: require('./link'),
|
||||||
const Button = require('../button');
|
AddMetricTile: require('./tile'),
|
||||||
|
AddMetricTitle: require('./title'),
|
||||||
const {
|
|
||||||
boxes,
|
|
||||||
colors
|
|
||||||
} = constants;
|
|
||||||
|
|
||||||
const {
|
|
||||||
remcalc
|
|
||||||
} = fns;
|
|
||||||
|
|
||||||
const {
|
|
||||||
default: styled
|
|
||||||
} = Styled;
|
|
||||||
|
|
||||||
const padding = remcalc(24);
|
|
||||||
|
|
||||||
const AddMetricContainer = styled.div`
|
|
||||||
position: relative;
|
|
||||||
width: ${300}px;
|
|
||||||
height: ${247}px;
|
|
||||||
padding: ${padding};
|
|
||||||
box-shadow: ${boxes.bottomShaddow};
|
|
||||||
border: 1px solid ${colors.borderSecondary};
|
|
||||||
background-color: ${colors.brandSecondary};
|
|
||||||
`;
|
|
||||||
// WHy is the font not sans?
|
|
||||||
const Title = styled.h4`
|
|
||||||
margin-bottom: 0;
|
|
||||||
color: ${colors.semibold};
|
|
||||||
`;
|
|
||||||
|
|
||||||
const Description = styled.p`
|
|
||||||
margin: 0;
|
|
||||||
color: ${colors.regular};
|
|
||||||
`;
|
|
||||||
|
|
||||||
// I don't want to have important rules all over the place...
|
|
||||||
const Link = styled.a`
|
|
||||||
text-decoration: underline !important;
|
|
||||||
`;
|
|
||||||
|
|
||||||
const ButtonContainer = styled(Button)`
|
|
||||||
position: absolute;
|
|
||||||
left: ${padding};
|
|
||||||
bottom: ${padding};
|
|
||||||
`;
|
|
||||||
|
|
||||||
const AddMetric = ({
|
|
||||||
title,
|
|
||||||
description,
|
|
||||||
link,
|
|
||||||
linkLabel,
|
|
||||||
added,
|
|
||||||
addLabel,
|
|
||||||
addedLabel,
|
|
||||||
onAddToggle
|
|
||||||
}) => {
|
|
||||||
return (
|
|
||||||
<AddMetricContainer>
|
|
||||||
<Title>{title}</Title>
|
|
||||||
<Description>{description}</Description>
|
|
||||||
<Link href={link}>{linkLabel}</Link>
|
|
||||||
{ added ?
|
|
||||||
<ButtonContainer disabled>{addedLabel}</ButtonContainer> :
|
|
||||||
<ButtonContainer secondary>{addLabel}</ButtonContainer> }
|
|
||||||
</AddMetricContainer>
|
|
||||||
);
|
|
||||||
};
|
};
|
||||||
|
|
||||||
AddMetric.propTypes = {
|
|
||||||
addLabel: React.PropTypes.string.isRequired,
|
|
||||||
added: React.PropTypes.bool.isRequired,
|
|
||||||
addedLabel: React.PropTypes.string.isRequired,
|
|
||||||
description: React.PropTypes.string.isRequired,
|
|
||||||
link: React.PropTypes.string.isRequired,
|
|
||||||
linkLabel: React.PropTypes.string.isRequired,
|
|
||||||
onAddToggle: React.PropTypes.func.isRequired,
|
|
||||||
title: React.PropTypes.string.isRequired,
|
|
||||||
};
|
|
||||||
|
|
||||||
module.exports = AddMetric;
|
|
||||||
|
26
ui/src/components/add-metric/link.js
Normal file
26
ui/src/components/add-metric/link.js
Normal file
@ -0,0 +1,26 @@
|
|||||||
|
const React = require('react');
|
||||||
|
const Styled = require('styled-components');
|
||||||
|
|
||||||
|
const {
|
||||||
|
default: styled
|
||||||
|
} = Styled;
|
||||||
|
|
||||||
|
const StyledLink = styled.a`
|
||||||
|
text-decoration: underline !important;
|
||||||
|
`;
|
||||||
|
|
||||||
|
const Link = ({
|
||||||
|
children,
|
||||||
|
href
|
||||||
|
}) => (
|
||||||
|
<StyledLink href={href} name='add-metric-link'>
|
||||||
|
{children}
|
||||||
|
</StyledLink>
|
||||||
|
);
|
||||||
|
|
||||||
|
Link.propTypes = {
|
||||||
|
children: React.PropTypes.node,
|
||||||
|
href: React.PropTypes.string.isRequired
|
||||||
|
};
|
||||||
|
|
||||||
|
module.exports = Link;
|
47
ui/src/components/add-metric/tile.js
Normal file
47
ui/src/components/add-metric/tile.js
Normal file
@ -0,0 +1,47 @@
|
|||||||
|
const React = require('react');
|
||||||
|
const Styled = require('styled-components');
|
||||||
|
const constants = require('../../shared/constants');
|
||||||
|
const fns = require('../../shared/functions');
|
||||||
|
|
||||||
|
const {
|
||||||
|
boxes,
|
||||||
|
colors
|
||||||
|
} = constants;
|
||||||
|
|
||||||
|
const {
|
||||||
|
remcalc
|
||||||
|
} = fns;
|
||||||
|
|
||||||
|
const {
|
||||||
|
default: styled
|
||||||
|
} = Styled;
|
||||||
|
|
||||||
|
const spacing = remcalc(24);
|
||||||
|
|
||||||
|
const StyledTile = styled.div`
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
margin: 0 ${spacing} ${spacing} 0;
|
||||||
|
padding: ${spacing};
|
||||||
|
width: ${300}px;
|
||||||
|
height: ${247}px;
|
||||||
|
box-shadow: ${boxes.bottomShaddow};
|
||||||
|
border: 1px solid ${colors.borderSecondary};
|
||||||
|
background-color: ${colors.brandSecondary};
|
||||||
|
`;
|
||||||
|
|
||||||
|
const Tile = ({
|
||||||
|
children
|
||||||
|
}) => {
|
||||||
|
return (
|
||||||
|
<StyledTile name='add-metric-tile'>
|
||||||
|
{children}
|
||||||
|
</StyledTile>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
Tile.propTypes = {
|
||||||
|
children: React.PropTypes.node
|
||||||
|
};
|
||||||
|
|
||||||
|
module.exports = Tile;
|
30
ui/src/components/add-metric/title.js
Normal file
30
ui/src/components/add-metric/title.js
Normal file
@ -0,0 +1,30 @@
|
|||||||
|
const React = require('react');
|
||||||
|
const Styled = require('styled-components');
|
||||||
|
const constants = require('../../shared/constants');
|
||||||
|
|
||||||
|
const {
|
||||||
|
colors
|
||||||
|
} = constants;
|
||||||
|
|
||||||
|
const {
|
||||||
|
default: styled
|
||||||
|
} = Styled;
|
||||||
|
|
||||||
|
const StyledTitle = styled.h4`
|
||||||
|
margin: 0;
|
||||||
|
color: ${colors.semibold};
|
||||||
|
`;
|
||||||
|
|
||||||
|
const Title = ({
|
||||||
|
children
|
||||||
|
}) => (
|
||||||
|
<StyledTitle name='add-metric-title'>
|
||||||
|
{children}
|
||||||
|
</StyledTitle>
|
||||||
|
);
|
||||||
|
|
||||||
|
Title.propTypes = {
|
||||||
|
children: React.PropTypes.node
|
||||||
|
};
|
||||||
|
|
||||||
|
module.exports = Title;
|
@ -1,7 +1,7 @@
|
|||||||
const React = require('react');
|
const React = require('react');
|
||||||
const {
|
const {
|
||||||
storiesOf,
|
storiesOf,
|
||||||
action,
|
// action,
|
||||||
// linkTo
|
// linkTo
|
||||||
} = require('@kadira/storybook');
|
} = require('@kadira/storybook');
|
||||||
|
|
||||||
@ -12,7 +12,13 @@ const {
|
|||||||
Checkbox,
|
Checkbox,
|
||||||
Row,
|
Row,
|
||||||
Column,
|
Column,
|
||||||
AddMetric,
|
AddMetric: {
|
||||||
|
AddMetricButton,
|
||||||
|
AddMetricDescription,
|
||||||
|
AddMetricLink,
|
||||||
|
AddMetricTile,
|
||||||
|
AddMetricTitle
|
||||||
|
},
|
||||||
Avatar,
|
Avatar,
|
||||||
Input,
|
Input,
|
||||||
List: {
|
List: {
|
||||||
@ -113,15 +119,14 @@ storiesOf('Add Metric', module)
|
|||||||
<Base>
|
<Base>
|
||||||
<Row>
|
<Row>
|
||||||
<Column>
|
<Column>
|
||||||
<AddMetric
|
<AddMetricTile>
|
||||||
addLabel='Add'
|
<AddMetricTitle>Aggregated CPU usage</AddMetricTitle>
|
||||||
addedLabel='Added'
|
<AddMetricDescription>
|
||||||
description='CPU usages accross all of the CPU cores.'
|
CPU usages accross all of the CPU cores.
|
||||||
link='http://somelink.com'
|
</AddMetricDescription>
|
||||||
linkLabel='Learn more'
|
<AddMetricLink href='http://somelink.com'>Learn more</AddMetricLink>
|
||||||
onAddToggle={action('toggle-added')}
|
<AddMetricButton>Add</AddMetricButton>
|
||||||
title='Aggregated CPU usage'
|
</AddMetricTile>
|
||||||
/>
|
|
||||||
</Column>
|
</Column>
|
||||||
</Row>
|
</Row>
|
||||||
</Base>
|
</Base>
|
||||||
@ -130,16 +135,14 @@ storiesOf('Add Metric', module)
|
|||||||
<Base>
|
<Base>
|
||||||
<Row>
|
<Row>
|
||||||
<Column>
|
<Column>
|
||||||
<AddMetric
|
<AddMetricTile>
|
||||||
addLabel='Add'
|
<AddMetricTitle>Aggregated CPU usage</AddMetricTitle>
|
||||||
added
|
<AddMetricDescription>
|
||||||
addedLabel='Added'
|
CPU usages accross all of the CPU cores.
|
||||||
description='CPU usages accross all of the CPU cores.'
|
</AddMetricDescription>
|
||||||
link='http://somelink.com'
|
<AddMetricLink href='http://somelink.com'>Learn more</AddMetricLink>
|
||||||
linkLabel='Learn more'
|
<AddMetricButton disabled>Added</AddMetricButton>
|
||||||
onAddToggle={action('toggle-added')}
|
</AddMetricTile>
|
||||||
title='Aggregated CPU usage'
|
|
||||||
/>
|
|
||||||
</Column>
|
</Column>
|
||||||
</Row>
|
</Row>
|
||||||
</Base>
|
</Base>
|
||||||
|
@ -12,12 +12,6 @@ test('renders <Avatar> without exploding', (t) => {
|
|||||||
t.deepEqual(wrapper.length, 1);
|
t.deepEqual(wrapper.length, 1);
|
||||||
});
|
});
|
||||||
|
|
||||||
test('renders <AddMetric> without exploding', (t) => {
|
|
||||||
const AddMetric = require('../src/components/add-metric');
|
|
||||||
const wrapper = shallow(<AddMetric />);
|
|
||||||
t.deepEqual(wrapper.length, 1);
|
|
||||||
});
|
|
||||||
|
|
||||||
test('renders <Base> without exploding', (t) => {
|
test('renders <Base> without exploding', (t) => {
|
||||||
const Base = require('../src/components/base');
|
const Base = require('../src/components/base');
|
||||||
const wrapper = shallow(<Base />);
|
const wrapper = shallow(<Base />);
|
||||||
|
Loading…
Reference in New Issue
Block a user