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