diff --git a/frontend/src/containers/metrics/add-metrics.js b/frontend/src/containers/metrics/add-metrics.js new file mode 100644 index 00000000..a0e26fe1 --- /dev/null +++ b/frontend/src/containers/metrics/add-metrics.js @@ -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) => ( + + + + + + + + + + + + + + + )); + + return ( +
+ {metricList} +
+ ); +}; + +AddMetrics.propTypes = { + /* TODO - */ + metricTypes: PropTypes.metricTypes +}; + +const mapStateToProps = (state, { + params = {} +}) => ({ + /* TODO - tidy up */ + metricTypes: state.metrics.ui.types +}); + +module.exports = connect( + mapStateToProps +)(AddMetrics); diff --git a/frontend/src/containers/metrics/index.js b/frontend/src/containers/metrics/index.js new file mode 100644 index 00000000..e69de29b diff --git a/frontend/src/containers/service/metrics.js b/frontend/src/containers/service/metrics.js index 66890823..eb9cb061 100644 --- a/frontend/src/containers/service/metrics.js +++ b/frontend/src/containers/service/metrics.js @@ -1,5 +1,11 @@ const React = require('react'); +const AddMetrics = require('../metrics/add-metrics'); module.exports = () => ( -

metrics

+
+

metrics

+
+ +
+
); diff --git a/frontend/src/prop-types.js b/frontend/src/prop-types.js index 0edf6fcb..611097f0 100644 --- a/frontend/src/prop-types.js +++ b/frontend/src/prop-types.js @@ -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 }; diff --git a/ui/src/components/add-metric/button.js b/ui/src/components/add-metric/button.js new file mode 100644 index 00000000..3e42941e --- /dev/null +++ b/ui/src/components/add-metric/button.js @@ -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 ? + ( + + {children} + + ) : ( + + {children} + + ); +}; + +AddMetricButton.propTypes = { + children: React.PropTypes.node, + disabled: React.PropTypes.bool, + onClick: React.PropTypes.func, +}; + +module.exports = AddMetricButton; diff --git a/ui/src/components/add-metric/description.js b/ui/src/components/add-metric/description.js new file mode 100644 index 00000000..d47fe2ad --- /dev/null +++ b/ui/src/components/add-metric/description.js @@ -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) => ( + + {props.children} + +); + +Description.propTypes = { + children: React.PropTypes.node +}; + +module.exports = Description; diff --git a/ui/src/components/add-metric/index.js b/ui/src/components/add-metric/index.js index b5e9c371..43176783 100644 --- a/ui/src/components/add-metric/index.js +++ b/ui/src/components/add-metric/index.js @@ -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 ( - - {title} - {description} - {linkLabel} - { added ? - {addedLabel} : - {addLabel} } - - ); +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; diff --git a/ui/src/components/add-metric/link.js b/ui/src/components/add-metric/link.js new file mode 100644 index 00000000..d689593b --- /dev/null +++ b/ui/src/components/add-metric/link.js @@ -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 +}) => ( + + {children} + +); + +Link.propTypes = { + children: React.PropTypes.node, + href: React.PropTypes.string.isRequired +}; + +module.exports = Link; diff --git a/ui/src/components/add-metric/tile.js b/ui/src/components/add-metric/tile.js new file mode 100644 index 00000000..54eb02d5 --- /dev/null +++ b/ui/src/components/add-metric/tile.js @@ -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 ( + + {children} + + ); +}; + +Tile.propTypes = { + children: React.PropTypes.node +}; + +module.exports = Tile; diff --git a/ui/src/components/add-metric/title.js b/ui/src/components/add-metric/title.js new file mode 100644 index 00000000..dedda96e --- /dev/null +++ b/ui/src/components/add-metric/title.js @@ -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 +}) => ( + + {children} + +); + +Title.propTypes = { + children: React.PropTypes.node +}; + +module.exports = Title; diff --git a/ui/stories/index.js b/ui/stories/index.js index 61e1882b..a2ec3d10 100644 --- a/ui/stories/index.js +++ b/ui/stories/index.js @@ -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) - + + Aggregated CPU usage + + CPU usages accross all of the CPU cores. + + Learn more + Add + @@ -130,16 +135,14 @@ storiesOf('Add Metric', module) - + + Aggregated CPU usage + + CPU usages accross all of the CPU cores. + + Learn more + Added + diff --git a/ui/test/index.js b/ui/test/index.js index f426516a..567c4204 100644 --- a/ui/test/index.js +++ b/ui/test/index.js @@ -12,12 +12,6 @@ test('renders without exploding', (t) => { t.deepEqual(wrapper.length, 1); }); -test('renders without exploding', (t) => { - const AddMetric = require('../src/components/add-metric'); - const wrapper = shallow(); - t.deepEqual(wrapper.length, 1); -}); - test('renders without exploding', (t) => { const Base = require('../src/components/base'); const wrapper = shallow();