From 1b42954bf2b18b1a643dfdc3a840dde7d9d4bc3e Mon Sep 17 00:00:00 2001 From: JUDIT GRESKOVITS Date: Mon, 23 Jan 2017 15:05:51 +0000 Subject: [PATCH] Add metric display --- frontend/locales/en-us.json | 3 + frontend/package.json | 1 + frontend/src/containers/metrics/index.js | 7 +- .../src/containers/metrics/metric-charts.js | 89 +++++++++++++++++++ frontend/src/containers/service/metrics.js | 2 +- frontend/src/mock-state.json | 7 +- frontend/src/state/selectors.js | 8 +- ui/src/components/metric/close-button.js | 5 +- ui/src/components/metric/graph.js | 1 + ui/src/components/metric/settings-button.js | 8 +- ui/src/components/metric/view.js | 1 + ui/yarn.lock | 13 ++- 12 files changed, 128 insertions(+), 17 deletions(-) create mode 100644 frontend/src/containers/metrics/metric-charts.js diff --git a/frontend/locales/en-us.json b/frontend/locales/en-us.json index 46f06db4..ca52afb0 100644 --- a/frontend/locales/en-us.json +++ b/frontend/locales/en-us.json @@ -25,6 +25,9 @@ "added-label": "Added", "link-label": "Learn more" }, + "metric": { + "settings-label": "Settings" + }, "cpu_agg_usage": { "title": "Aggregated CPU usage", "description": "CPU usages accross all of the CPU cores." diff --git a/frontend/package.json b/frontend/package.json index 159bb8a0..15a79be3 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -51,6 +51,7 @@ "redux-thunk": "^2.1.0", "reselect": "^2.5.4", "styled-components": "^1.3.0", + "svg-react-loader": "^0.3.7", "understood": "^1.0.1", "url-loader": "^0.5.7" }, diff --git a/frontend/src/containers/metrics/index.js b/frontend/src/containers/metrics/index.js index 2e42b111..a8aa9ab8 100644 --- a/frontend/src/containers/metrics/index.js +++ b/frontend/src/containers/metrics/index.js @@ -5,6 +5,7 @@ const actions = require('@state/actions'); const AddMetrics = require('./add-metrics'); const Button = require('@ui/components/button'); const Column = require('@ui/components/column'); +const MetricCharts = require('./metric-charts'); const Monitors = require('./monitors'); const PropTypes = require('@root/prop-types'); const Row = require('@ui/components/row'); @@ -35,9 +36,13 @@ const Metrics = ({ + diff --git a/frontend/src/containers/metrics/metric-charts.js b/frontend/src/containers/metrics/metric-charts.js new file mode 100644 index 00000000..c1a53b04 --- /dev/null +++ b/frontend/src/containers/metrics/metric-charts.js @@ -0,0 +1,89 @@ +const React = require('react'); +const moment = require('moment'); +const PropTypes = require('@root/prop-types'); +const Metric = require('@ui/components/metric'); +const ReactIntl = require('react-intl'); + +const { + FormattedMessage +} = ReactIntl; + +const { + MetricGraph, + MetricCloseButton, + MetricHeader, + MetricSelect, + MetricSettingsButton, + MetricTitle, + MetricView +} = Metric; + +const MetricCharts = ({ + // metricTypes, + // metrics, + // onAddMetric, + datasets, + duration = 360, + durations = [ + 360, + 720, + 1440, + 2880 + ], + onDurationChange = () => {}, + onSettingsClick = () => {}, + onRemoveMetric = () => {} + // and another one here to come... +}) => { + + const optionList = durations.map(duration => ( + + )); + + const metricList = datasets.map((dataset) => { + // TODO + // - yMeasurement '%' or not + // - yMin & yMax should all come from the metric type description + + return ( + + + {dataset.uuid} + + {optionList} + + + + + + + + + ); + }); + + return ( +
+ {metricList} +
+ ); +}; + +MetricCharts.propTypes = { + datasets: React.PropTypes.arrayOf(PropTypes.Dataset), + duration: React.PropTypes.number, + durations: React.PropTypes.arrayOf(React.PropTypes.number), + onDurationChange: React.PropTypes.func.isRequired, + onRemoveMetric: React.PropTypes.func.isRequired, + onSettingsClick: React.PropTypes.func.isRequired +}; + +module.exports = MetricCharts; diff --git a/frontend/src/containers/service/metrics.js b/frontend/src/containers/service/metrics.js index c179be15..b3d86def 100644 --- a/frontend/src/containers/service/metrics.js +++ b/frontend/src/containers/service/metrics.js @@ -28,7 +28,7 @@ const mapStateToProps = (state, { const mapDispatchToProps = (dispatch) => ({ addMetric: (service) => (metric) => dispatch(addMetric({ id: metric, - service: service + service: service.uuid })) }); diff --git a/frontend/src/mock-state.json b/frontend/src/mock-state.json index d7cb4fd0..32baefc6 100644 --- a/frontend/src/mock-state.json +++ b/frontend/src/mock-state.json @@ -48,7 +48,6 @@ }, "monitors": { "ui": { - "active": "dca08514-72e5-46ce-ad91-e68b3b0914d4", "page": "create" } }, @@ -69,6 +68,12 @@ "net_agg_bytes_in", "net_agg_bytes_out", "time_of_day" + ], + "durations": [ + 360, + 720, + 1440, + 2880 ] }, "data": { diff --git a/frontend/src/state/selectors.js b/frontend/src/state/selectors.js index da58c2ac..2abf6651 100644 --- a/frontend/src/state/selectors.js +++ b/frontend/src/state/selectors.js @@ -89,9 +89,11 @@ const instancesByServiceId = (serviceId) => createSelector( ); const metricsByServiceId = (serviceId) => createSelector( - [metricTypes, serviceById(serviceId)], - (metricTypes, service) => - metricTypes.filter((i) => i.service === service.uuid) + [metricTypes, serviceById(serviceId), metricDatasets], + (metricTypes, service, metrics) => ({ + types: metricTypes.filter((i) => i.service === service.uuid), + datasets: datasets(metrics, service.metrics) + }) ); const metricTypeByUuid = (metricTypeUuid) => createSelector( diff --git a/ui/src/components/metric/close-button.js b/ui/src/components/metric/close-button.js index 2c0820c7..92fb6a8a 100644 --- a/ui/src/components/metric/close-button.js +++ b/ui/src/components/metric/close-button.js @@ -2,7 +2,10 @@ const React = require('react'); const Styled = require('styled-components'); const fns = require('../../shared/functions'); const constants = require('../../shared/constants'); -const CloseIcon = require('!babel!svg-react!./close.svg?name=CloseIcon'); +const CloseIcon = + require( + '!babel-loader!svg-react-loader!./close.svg?name=CloseIcon' + ); const { default: styled diff --git a/ui/src/components/metric/graph.js b/ui/src/components/metric/graph.js index 39d6d4da..cf581633 100644 --- a/ui/src/components/metric/graph.js +++ b/ui/src/components/metric/graph.js @@ -46,6 +46,7 @@ class Graph extends React.Component { }] }, options: { + animation: false, layout: { padding: 10 }, diff --git a/ui/src/components/metric/settings-button.js b/ui/src/components/metric/settings-button.js index 8097d09e..6807fe6c 100644 --- a/ui/src/components/metric/settings-button.js +++ b/ui/src/components/metric/settings-button.js @@ -4,7 +4,9 @@ const fns = require('../../shared/functions'); const constants = require('../../shared/constants'); const Button = require('../button'); const SettingsIcon = - require('!babel!svg-react!./icon-settings.svg?name=SettingsIcon'); + require( + '!babel-loader!svg-react-loader!./icon-settings.svg?name=SettingsIcon' + ); const { default: styled @@ -48,9 +50,10 @@ const StyledIcon = styled(SettingsIcon)` const AddMetricButton = ({ children, + metric, onClick }) => { - const onButtonClick = (e) => onClick(); + const onButtonClick = (e) => onClick(metric); return (