Rewrite AddMetric component so that it works with react-intl and conforms to other similar components

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) => (
+    <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);

frontend/src/containers/service/metrics.js

@@ -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>
 );

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
 };

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 ?
+     (
+       <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;

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) => (
+  <StyledDescription name='add-metric-description'>
+    {props.children}
+  </StyledDescription>
+);
+
+Description.propTypes = {
+  children: React.PropTypes.node
+};
+
+module.exports = Description;

ui/src/components/add-metric/index.js

@@ -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;

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
+}) => (
+  <StyledLink href={href} name='add-metric-link'>
+    {children}
+  </StyledLink>
+);
+
+Link.propTypes = {
+  children: React.PropTypes.node,
+  href: React.PropTypes.string.isRequired
+};
+
+module.exports = Link;

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 (
+    <StyledTile name='add-metric-tile'>
+      {children}
+    </StyledTile>
+  );
+};
+
+Tile.propTypes = {
+  children: React.PropTypes.node
+};
+
+module.exports = Tile;

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
+}) => (
+  <StyledTitle name='add-metric-title'>
+    {children}
+  </StyledTitle>
+);
+
+Title.propTypes = {
+  children: React.PropTypes.node
+};
+
+module.exports = Title;

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)
     <Base>
       <Row>
         <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>
       </Row>
     </Base>
@@ -130,16 +135,14 @@ storiesOf('Add Metric', module)
     <Base>
       <Row>
         <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>
       </Row>
     </Base>

ui/test/index.js

@@ -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 />);