Add AddMetrics functionality and move AddMetric component story to folder

frontend/locales/en-us.json

@@ -30,12 +30,12 @@
       "description": "CPU usages accross all of the CPU cores."
     },
     "cpu_wait_time": {
-      "title": "Memory resident set size (tmp)",
-      "description": "Process memory that is actually stored in the RAM. (tmp)"
+      "title": "Memory resident set size",
+      "description": "Process memory that is actually stored in the RAM."
     },
     "zfs_used": {
-      "title": "Apache HTTP requests (tmp)",
-      "description": "Number of website requests to apache if it is used. (tmp)"
+      "title": "Apache HTTP requests",
+      "description": "Number of website requests to apache if it is used."
     }
   }
 }

frontend/scripts/build-locales.js

@@ -46,7 +46,6 @@ const compile = async () => {
     const name = path.parse(filename).name;
     const messages = require(path.join(root, filename));
     const flattenedMessages = flattenMessages(messages);
-    console.log('flattenedMessages = ', flattenedMessages);
     const json = JSON.stringify(flattenedMessages);
     const lang = name.split(/\-/)[0];
 

frontend/src/containers/metrics/add-metrics.js

@@ -1,13 +1,8 @@
 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;
@@ -20,18 +15,25 @@ const {
   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
+  metricTypes,
+  metrics,
+  onAddMetric
 }) => {
 
+  const added = (metric) =>
+    Boolean(metrics.filter((m) => m.id === metric).length);
+  const addButton = (metric) => (
+    <AddMetricButton onClick={onAddMetric(metric)}>
+      <FormattedMessage id={'metrics.add.add-label'} onClick={onAddMetric} />
+    </AddMetricButton>
+  );
+  const addedButton = (
+    <AddMetricButton disabled>
+      <FormattedMessage id={'metrics.add.added-label'} />
+    </AddMetricButton>
+  );
+
   const metricList = metricTypes.map((metric) => (
     <AddMetricTile key={metric}>
       <AddMetricTitle>
@@ -41,11 +43,9 @@ const AddMetrics = ({
         <FormattedMessage id={`metrics.${metric}.description`} />
       </AddMetricDescription>
       <AddMetricLink href='http://somelink.com'>
-        <FormattedMessage id={'metrics.add.link'} />
+        <FormattedMessage id={'metrics.add.link-label'} />
       </AddMetricLink>
-      <AddMetricButton>
-        <FormattedMessage id={'metrics.add.add-label'} />
-      </AddMetricButton>
+      { added(metric) ? addedButton : addButton(metric) }
     </AddMetricTile>
   ));
 
@@ -57,17 +57,9 @@ const AddMetrics = ({
 };
 
 AddMetrics.propTypes = {
-  /* TODO - */
-  metricTypes: PropTypes.metricTypes
+  metricTypes: PropTypes.metricTypes.isRequired,
+  metrics: React.PropTypes.arrayOf(PropTypes.metric).isRequired,
+  onAddMetric: React.PropTypes.func.isRequired,
 };
 
-const mapStateToProps = (state, {
-  params = {}
-}) => ({
-  /* TODO - tidy up */
-  metricTypes: state.metrics.ui.types
-});
-
-module.exports = connect(
-  mapStateToProps
-)(AddMetrics);
+module.exports = AddMetrics;

frontend/src/containers/service/metrics.js

@@ -1,11 +1,71 @@
 const React = require('react');
+const ReactRedux = require('react-redux');
+const PropTypes = require('@root/prop-types');
+const selectors = require('@state/selectors');
 const AddMetrics = require('../metrics/add-metrics');
+const actions = require('@state/actions');
 
-module.exports = () => (
+const {
+  connect
+} = ReactRedux;
+
+const {
+  metricsByServiceIdSelector,
+  serviceByIdSelector
+} = selectors;
+
+const {
+  addMetric
+} = actions;
+
+const Metrics = ({
+  addMetric,
+  metrics,
+  metricTypes,
+  service
+}) => {
+
+  const onAddMetric = (metric) => {
+    addMetric({
+      id: metric,
+      service: service.uuid
+    });
+  };
+
+  return (
     <div>
       <p>metrics</p>
       <div>
-      <AddMetrics />
+        <AddMetrics
+          metricTypes={metricTypes}
+          metrics={metrics}
+          onAddMetric={onAddMetric}
+        />
       </div>
     </div>
   );
+};
+
+Metrics.propTypes = {
+  addMetric: React.PropTypes.func.isRequired,
+  metricTypes: PropTypes.metricTypes,
+  metrics: React.PropTypes.arrayOf(PropTypes.metric),
+  service: PropTypes.service
+};
+
+const mapStateToProps = (state, {
+  params = {}
+}) => ({
+  metrics: metricsByServiceIdSelector(params.serviceId)(state),
+  metricTypes: state.metrics.ui.types,
+  service: serviceByIdSelector(params.serviceId)(state)
+});
+
+const mapDispatchToProps = (dispatch) => ({
+  addMetric: (payload) => dispatch(addMetric(payload))
+});
+
+module.exports = connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(Metrics);

frontend/src/mock-state.json

@@ -67,13 +67,16 @@
     },
     "data": [{
       "uuid": "dca08514-72e5-46ce-ad91-e68b3b0914d4",
-      "id": "agg-cpu-usage"
+      "id": "cpu_agg_usage",
+      "service": "081a792c-47e0-4439-924b-2efa9788ae9e"
     }, {
       "uuid": "9e77b50e-42d7-425d-8daf-c0e98e2bdd6a",
-      "id": "mem-res-set-size"
+      "id": "zfs_used",
+      "service": "081a792c-47e0-4439-924b-2efa9788ae9e"
     }, {
       "uuid": "347dbdc7-15e3-4e12-8dfb-865d38526e14",
-      "id": "apache-http-reqs"
+      "id": "mem_limit",
+      "service": "081a792c-47e0-4439-924b-2efa9788ae9e"
     }]
   },
   "orgs": {

frontend/src/state/actions.js

@@ -11,5 +11,6 @@ module.exports = {
   ...require('@state/thunks'),
   updateRouter: createAction(`${APP}/APP/UPDATE_ROUTER`),
   toggleHeaderTooltip: createAction(`${APP}/APP/TOGGLE_HEADER_TOOLTIP`),
-  toggleServiceCollapsed: createAction(`${APP}/APP/TOGGLE_SERVICE_COLLAPSED`)
+  toggleServiceCollapsed: createAction(`${APP}/APP/TOGGLE_SERVICE_COLLAPSED`),
+  addMetric: createAction(`${APP}/APP/ADD_METRIC`)
 };

frontend/src/state/reducers/metrics.js

@@ -1,9 +1,25 @@
 const ReduxActions = require('redux-actions');
 
+const actions = require('@state/actions');
+
 const {
   handleActions
 } = ReduxActions;
 
+const {
+  addMetric
+} = actions;
+
+// This will need to be handled by an async action
+// to update on the server too
 module.exports = handleActions({
-  'x': (state) => state // somehow handleActions needs at least one reducer
+  [addMetric.toString()]: (state, action) => {
+    return ({
+      ...state,
+      data: [
+        ...state.data,
+        action.payload
+      ]
+    });
+  }
 }, {});

frontend/src/state/selectors.js

@@ -17,6 +17,7 @@ const projects = (state) => get(state, 'projects.data', []);
 const services = (state) => get(state, 'services.data', []);
 const collapsedServices = (state) => get(state, 'services.ui.collapsed', []);
 const instances = (state) => get(state, 'instances.data', []);
+const metrics = (state) => get(state, 'metrics.data', []);
 
 const projectById = (projectId) => createSelector(
   projects,
@@ -70,6 +71,12 @@ const instancesByServiceId = (serviceId) => createSelector(
     instances.filter((i) => i.service === service.uuid)
 );
 
+const metricsByServiceId = (serviceId) => createSelector(
+  [metrics, serviceById(serviceId)],
+  (metrics, service) =>
+    metrics.filter((i) => i.service === service.uuid)
+);
+
 
 module.exports = {
   accountSelector: account,
@@ -84,5 +91,6 @@ module.exports = {
   projectsByOrgIdSelector: projectsByOrgId,
   projectByIdSelector: projectById,
   servicesByProjectIdSelector: servicesByProjectId,
-  instancesByServiceIdSelector: instancesByServiceId
+  instancesByServiceIdSelector: instancesByServiceId,
+  metricsByServiceIdSelector: metricsByServiceId
 };

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

@@ -27,7 +27,6 @@ const AddMetricButton = ({
        <StyledButton
          disabled
          name='add-metric-button'
-         onClick={onClick}
        >
          {children}
        </StyledButton>

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

@@ -0,0 +1,40 @@
+const React = require('react');
+const Base = require('../base');
+
+const {
+  storiesOf
+} = require('@kadira/storybook');
+
+const {
+  AddMetricButton,
+  AddMetricDescription,
+  AddMetricLink,
+  AddMetricTile,
+  AddMetricTitle
+} = require('./');
+
+storiesOf('Add Metric', module)
+  .add('Add Metric', () => (
+    <Base>
+      <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>
+    </Base>
+  ))
+  .add('Added Metric', () => (
+    <Base>
+      <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>
+    </Base>
+  ));

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

@@ -5,6 +5,7 @@ const fns = require('../../shared/functions');
 
 const {
   boxes,
+  breakpoints,
   colors
 } = constants;
 
@@ -21,13 +22,29 @@ const spacing = remcalc(24);
 const StyledTile = styled.div`
   position: relative;
   display: inline-block;
+  box-sizing: border-box;
   margin: 0 ${spacing} ${spacing} 0;
   padding: ${spacing};
-  width: ${300}px;
-  height: ${247}px;
+  width: ${remcalc(300)};
+  height: ${remcalc(247)};
   box-shadow: ${boxes.bottomShaddow};
   border: 1px solid ${colors.borderSecondary};
   background-color: ${colors.brandSecondary};
+
+  ${breakpoints.small`
+    width: ${remcalc(300)};
+    height: ${remcalc(247)};
+  `}
+
+  ${breakpoints.medium`
+    width: ${remcalc(300)};
+    height: ${remcalc(247)};
+  `}
+
+  ${breakpoints.large`
+    width: ${remcalc(300)};
+    height: ${remcalc(247)};
+  `}
 `;
 
 const Tile = ({

ui/stories/index.js

@@ -12,13 +12,6 @@ const {
   Row,
   Column,
   Close,
-  AddMetric: {
-    AddMetricButton,
-    AddMetricDescription,
-    AddMetricLink,
-    AddMetricTile,
-    AddMetricTitle
-  },
   Input,
   List: {
     ListItemDescription,
@@ -114,40 +107,6 @@ storiesOf('Grid', module)
     </Base>
   ));
 
-storiesOf('Add Metric', module)
-  .add('Add Metric', () => (
-    <Base>
-      <Row>
-        <Column>
-          <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>
-  ))
-  .add('Added Metric', () => (
-    <Base>
-      <Row>
-        <Column>
-          <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>
-  ));
-
 storiesOf('Checkbox', module)
   .add('Default', () => (
     <Checkbox />