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 AddMetrics = require('../metrics/add-metrics');
|
||||
|
||||
module.exports = () => (
|
||||
<p>metrics</p>
|
||||
<div>
|
||||
<p>metrics</p>
|
||||
<div>
|
||||
<AddMetrics />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
@ -35,10 +35,19 @@ const Instance = React.PropTypes.shape({
|
||||
project: React.PropTypes.string
|
||||
});
|
||||
|
||||
const Metric = React.PropTypes.shape({
|
||||
...BaseObject
|
||||
});
|
||||
|
||||
const Sections = React.PropTypes.arrayOf(
|
||||
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 = {
|
||||
account: Account,
|
||||
link: Link,
|
||||
@ -46,5 +55,8 @@ module.exports = {
|
||||
project: Project,
|
||||
sections: Sections,
|
||||
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');
|
||||
const Styled = require('styled-components');
|
||||
const constants = require('../../shared/constants');
|
||||
const fns = require('../../shared/functions');
|
||||
const Button = require('../button');
|
||||
|
||||
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>
|
||||
);
|
||||
module.exports = {
|
||||
AddMetricButton: require('./button'),
|
||||
AddMetricDescription: require('./description'),
|
||||
AddMetricLink: require('./link'),
|
||||
AddMetricTile: require('./tile'),
|
||||
AddMetricTitle: require('./title'),
|
||||
};
|
||||
|
||||
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 {
|
||||
storiesOf,
|
||||
action,
|
||||
// action,
|
||||
// linkTo
|
||||
} = require('@kadira/storybook');
|
||||
|
||||
@ -12,7 +12,13 @@ const {
|
||||
Checkbox,
|
||||
Row,
|
||||
Column,
|
||||
AddMetric,
|
||||
AddMetric: {
|
||||
AddMetricButton,
|
||||
AddMetricDescription,
|
||||
AddMetricLink,
|
||||
AddMetricTile,
|
||||
AddMetricTitle
|
||||
},
|
||||
Avatar,
|
||||
Input,
|
||||
List: {
|
||||
@ -113,15 +119,14 @@ storiesOf('Add Metric', module)
|
||||
<Base>
|
||||
<Row>
|
||||
<Column>
|
||||
<AddMetric
|
||||
addLabel='Add'
|
||||
addedLabel='Added'
|
||||
description='CPU usages accross all of the CPU cores.'
|
||||
link='http://somelink.com'
|
||||
linkLabel='Learn more'
|
||||
onAddToggle={action('toggle-added')}
|
||||
title='Aggregated CPU usage'
|
||||
/>
|
||||
<AddMetricTile>
|
||||
<AddMetricTitle>Aggregated CPU usage</AddMetricTitle>
|
||||
<AddMetricDescription>
|
||||
CPU usages accross all of the CPU cores.
|
||||
</AddMetricDescription>
|
||||
<AddMetricLink href='http://somelink.com'>Learn more</AddMetricLink>
|
||||
<AddMetricButton>Add</AddMetricButton>
|
||||
</AddMetricTile>
|
||||
</Column>
|
||||
</Row>
|
||||
</Base>
|
||||
@ -130,16 +135,14 @@ storiesOf('Add Metric', module)
|
||||
<Base>
|
||||
<Row>
|
||||
<Column>
|
||||
<AddMetric
|
||||
addLabel='Add'
|
||||
added
|
||||
addedLabel='Added'
|
||||
description='CPU usages accross all of the CPU cores.'
|
||||
link='http://somelink.com'
|
||||
linkLabel='Learn more'
|
||||
onAddToggle={action('toggle-added')}
|
||||
title='Aggregated CPU usage'
|
||||
/>
|
||||
<AddMetricTile>
|
||||
<AddMetricTitle>Aggregated CPU usage</AddMetricTitle>
|
||||
<AddMetricDescription>
|
||||
CPU usages accross all of the CPU cores.
|
||||
</AddMetricDescription>
|
||||
<AddMetricLink href='http://somelink.com'>Learn more</AddMetricLink>
|
||||
<AddMetricButton disabled>Added</AddMetricButton>
|
||||
</AddMetricTile>
|
||||
</Column>
|
||||
</Row>
|
||||
</Base>
|
||||
|
@ -12,12 +12,6 @@ test('renders <Avatar> without exploding', (t) => {
|
||||
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) => {
|
||||
const Base = require('../src/components/base');
|
||||
const wrapper = shallow(<Base />);
|
||||
|
Loading…
Reference in New Issue
Block a user