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 (