diff --git a/frontend/locales/en-us.json b/frontend/locales/en-us.json index 59ab9dd4..b74f12f2 100644 --- a/frontend/locales/en-us.json +++ b/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." } } } diff --git a/frontend/scripts/build-locales.js b/frontend/scripts/build-locales.js index 4546e5b8..8a949229 100644 --- a/frontend/scripts/build-locales.js +++ b/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]; diff --git a/frontend/src/containers/metrics/add-metrics.js b/frontend/src/containers/metrics/add-metrics.js index a0e26fe1..c9e37e8e 100644 --- a/frontend/src/containers/metrics/add-metrics.js +++ b/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) => ( + + + + ); + const addedButton = ( + + + + ); + const metricList = metricTypes.map((metric) => ( @@ -41,11 +43,9 @@ const AddMetrics = ({ - + - - - + { added(metric) ? addedButton : addButton(metric) } )); @@ -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; diff --git a/frontend/src/containers/service/metrics.js b/frontend/src/containers/service/metrics.js index eb9cb061..c7ffa76e 100644 --- a/frontend/src/containers/service/metrics.js +++ b/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 = () => ( -
-

metrics

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

metrics

+
+ +
-
-); + ); +}; + +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); diff --git a/frontend/src/mock-state.json b/frontend/src/mock-state.json index ec6c9ce7..365dffc0 100644 --- a/frontend/src/mock-state.json +++ b/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": { diff --git a/frontend/src/state/actions.js b/frontend/src/state/actions.js index 739bc96a..15308844 100644 --- a/frontend/src/state/actions.js +++ b/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`) }; diff --git a/frontend/src/state/reducers/metrics.js b/frontend/src/state/reducers/metrics.js index 7fec06fb..01549ac4 100644 --- a/frontend/src/state/reducers/metrics.js +++ b/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 + ] + }); + } }, {}); diff --git a/frontend/src/state/selectors.js b/frontend/src/state/selectors.js index f9da01c7..d8976164 100644 --- a/frontend/src/state/selectors.js +++ b/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 }; diff --git a/ui/src/components/add-metric/button.js b/ui/src/components/add-metric/button.js index 3e42941e..d3b1275b 100644 --- a/ui/src/components/add-metric/button.js +++ b/ui/src/components/add-metric/button.js @@ -27,7 +27,6 @@ const AddMetricButton = ({ {children} diff --git a/ui/src/components/add-metric/story.js b/ui/src/components/add-metric/story.js new file mode 100644 index 00000000..ece22fbd --- /dev/null +++ b/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', () => ( + + + Aggregated CPU usage + + CPU usages accross all of the CPU cores. + + Learn more + Add + + + )) + .add('Added Metric', () => ( + + + Aggregated CPU usage + + CPU usages accross all of the CPU cores. + + Learn more + Added + + + )); diff --git a/ui/src/components/add-metric/tile.js b/ui/src/components/add-metric/tile.js index 54eb02d5..66e8e16d 100644 --- a/ui/src/components/add-metric/tile.js +++ b/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 = ({ diff --git a/ui/stories/index.js b/ui/stories/index.js index ed0100c8..6ec5cc19 100644 --- a/ui/stories/index.js +++ b/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) )); -storiesOf('Add Metric', module) - .add('Add Metric', () => ( - - - - - Aggregated CPU usage - - CPU usages accross all of the CPU cores. - - Learn more - Add - - - - - )) - .add('Added Metric', () => ( - - - - - Aggregated CPU usage - - CPU usages accross all of the CPU cores. - - Learn more - Added - - - - - )); - storiesOf('Checkbox', module) .add('Default', () => (