diff --git a/frontend/package.json b/frontend/package.json
index 856c1b4c..77cd7b45 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -45,6 +45,7 @@
"redux": "^3.6.0",
"redux-actions": "^1.2.0",
"redux-batched-actions": "^0.1.5",
+ "redux-form": "^6.4.3",
"redux-logger": "^2.7.4",
"redux-promise-middleware": "^4.2.0",
"redux-thunk": "^2.1.0",
diff --git a/frontend/src/components/create-monitor/index.js b/frontend/src/components/create-monitor/index.js
index 43637046..58f60906 100644
--- a/frontend/src/components/create-monitor/index.js
+++ b/frontend/src/components/create-monitor/index.js
@@ -1,3 +1,4 @@
+const ReduxForm = require('redux-form');
const React = require('react');
const ReactIntl = require('react-intl');
const Styled = require('styled-components');
@@ -9,6 +10,10 @@ const fns = require('@ui/shared/functions');
const Row = require('@ui/components/row');
const Select = require('@ui/components/select');
+const {
+ Field
+} = ReduxForm;
+
const {
FormattedMessage
} = ReactIntl;
@@ -51,75 +56,85 @@ const PeopleInput = styled(Input)`
margin-bottom: ${remcalc(24)} !important;
`;
-module.exports = () => {
- return (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
+const CreateMonitor = ({
+ handleSubmit,
+ pristine,
+ submitting
+}) => (
+
+);
+
+CreateMonitor.propTypes = {
+ handleSubmit: React.PropTypes.func,
+ pristine: React.PropTypes.bool,
+ submitting: React.PropTypes.bool
};
+
+module.exports = CreateMonitor;
diff --git a/frontend/src/components/monitors/index.js b/frontend/src/components/monitors/index.js
index ae60ceee..62903e4a 100644
--- a/frontend/src/components/monitors/index.js
+++ b/frontend/src/components/monitors/index.js
@@ -4,10 +4,8 @@ const Styled = require('styled-components');
const constants = require('@ui/shared/constants');
const Close = require('@ui/components/close');
-const CreateMonitor = require('@components/create-monitor');
const fns = require('@ui/shared/functions');
const Li = require('@ui/components/horizontal-list/li');
-const ManageMonitor = require('@components/manage-monitor');
const Modal = require('@ui/components/modal');
const PropTypes = require('@root/prop-types');
const Ul = require('@ui/components/horizontal-list/ul');
@@ -65,21 +63,13 @@ const View = styled.div`
const Monitors = ({
active = false,
+ children,
handleDismiss = () => null,
metricType = {},
page = 'create',
submit = () => null,
togglePage = () => null
}) => {
- const views = {
- create: () => (
-
- ),
- manage: () => (
-
- )
- };
-
const links = ['create', 'manage'].map((name) => {
const id = `monitors.${name}`;
const className = page === name ? 'active' : '';
@@ -111,7 +101,7 @@ const Monitors = ({
- {views[page]()}
+ {children}
@@ -120,6 +110,7 @@ const Monitors = ({
Monitors.propTypes = {
active: React.PropTypes.string,
+ children: React.PropTypes.node,
handleDismiss: React.PropTypes.func.isRequired,
metricType: PropTypes.metricType,
page: React.PropTypes.string,
diff --git a/frontend/src/containers/metrics/monitors.js b/frontend/src/containers/metrics/monitors.js
index 4e196513..00d775ae 100644
--- a/frontend/src/containers/metrics/monitors.js
+++ b/frontend/src/containers/metrics/monitors.js
@@ -1,9 +1,17 @@
+const React = require('react');
+const ReduxForm = require('redux-form');
const ReactRedux = require('react-redux');
const actions = require('@state/actions');
+const CreateMonitor = require('@components/create-monitor');
+const ManageMonitor = require('@components/manage-monitor');
const Monitors = require('@components/monitors');
const selectors = require('@state/selectors');
+const {
+ reduxForm
+} = ReduxForm;
+
const {
connect
} = ReactRedux;
@@ -14,10 +22,39 @@ const {
const {
toggleMonitorView,
- switchMonitorViewPage,
- createMonitor
+ switchMonitorViewPage
} = actions;
+const ConnectedCreateMonitor = reduxForm({
+ form: 'create-monitor'
+})(CreateMonitor);
+// const ConnectedCreateMonitor = reduxForm()(CreateMonitor);
+
+const MetricMonitors = (props) => {
+ const {
+ page
+ } = props;
+
+ const views = {
+ create: () => (
+
+ ),
+ manage: () => (
+
+ )
+ };
+
+ return (
+
+ {views[page]()}
+
+ );
+};
+
+MetricMonitors.propTypes = {
+ page: React.PropTypes.string
+};
+
const mapStateToProps = (state) => ({
metricType: metricTypeByUuidSelector(state.monitors.ui.active)(state),
active: state.monitors.ui.active,
@@ -26,11 +63,10 @@ const mapStateToProps = (state) => ({
const mapDispatchToProps = (dispatch) => ({
handleDismiss: () => dispatch(toggleMonitorView()),
- togglePage: (newPage) => dispatch(switchMonitorViewPage(newPage)),
- submit: (meta) => dispatch(createMonitor(meta))
+ togglePage: (newPage) => dispatch(switchMonitorViewPage(newPage))
});
module.exports = connect(
mapStateToProps,
mapDispatchToProps
-)(Monitors);
+)(MetricMonitors);
diff --git a/frontend/src/state/actions.js b/frontend/src/state/actions.js
index 7e5262ed..ae351c99 100644
--- a/frontend/src/state/actions.js
+++ b/frontend/src/state/actions.js
@@ -15,6 +15,5 @@ module.exports = {
addMetric: createAction(`${APP}/ADD_METRIC`),
toggleInstanceCollapsed: createAction(`${APP}/TOGGLE_INSTANCE_COLLAPSED`),
toggleMonitorView: createAction(`${APP}/TOGGLE_MONITOR_VIEW`),
- switchMonitorViewPage: createAction(`${APP}/SWITCH_MONITOR_VIEW_PAGE`),
- createMonitor: createAction(`${APP}/CREATE_MONITOR`)
+ switchMonitorViewPage: createAction(`${APP}/SWITCH_MONITOR_VIEW_PAGE`)
};
diff --git a/frontend/src/state/reducers/monitors.js b/frontend/src/state/reducers/monitors.js
index 1c8a8204..537657c3 100644
--- a/frontend/src/state/reducers/monitors.js
+++ b/frontend/src/state/reducers/monitors.js
@@ -9,7 +9,6 @@ const {
const {
toggleMonitorView,
switchMonitorViewPage
- // createMonitor
} = actions;
module.exports = handleActions({
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index eacf3b79..ed9abbf4 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -200,6 +200,10 @@ array-find-index@^1.0.1:
version "1.0.2"
resolved "https://registry.yarnpkg.com/array-find-index/-/array-find-index-1.0.2.tgz#df010aa1287e164bbda6f9723b0a96a1ec4187a1"
+array-findindex-polyfill@^0.1.0:
+ version "0.1.0"
+ resolved "https://registry.yarnpkg.com/array-findindex-polyfill/-/array-findindex-polyfill-0.1.0.tgz#c362665bec7645f22d7a3c3aac9793f71c3622ef"
+
array-flatten@1.1.1:
version "1.1.1"
resolved "https://registry.yarnpkg.com/array-flatten/-/array-flatten-1.1.1.tgz#9a5f699051b1e7073328f2a008968b64ea2955d2"
@@ -2214,7 +2218,7 @@ deep-diff@0.3.4:
version "0.3.4"
resolved "https://registry.yarnpkg.com/deep-diff/-/deep-diff-0.3.4.tgz#aac5c39952236abe5f037a2349060ba01b00ae48"
-deep-equal@^1.0.0:
+deep-equal@^1.0.0, deep-equal@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-1.0.1.tgz#f5d260292b660e084eff4cdbc9f08ad3247448b5"
@@ -2468,6 +2472,10 @@ es5-ext@^0.10.7, es5-ext@^0.10.8, es5-ext@~0.10.11, es5-ext@~0.10.2, es5-ext@~0.
es6-iterator "2"
es6-symbol "~3.1"
+es6-error@^4.0.0:
+ version "4.0.1"
+ resolved "https://registry.yarnpkg.com/es6-error/-/es6-error-4.0.1.tgz#eeb3e280f57e2ec48d72a9fccaf6247d3c1f5719"
+
es6-iterator@2:
version "2.0.0"
resolved "https://registry.yarnpkg.com/es6-iterator/-/es6-iterator-2.0.0.tgz#bd968567d61635e33c0b80727613c9cb4b096bac"
@@ -3219,7 +3227,7 @@ hoek@4.x.x:
version "4.1.0"
resolved "https://registry.yarnpkg.com/hoek/-/hoek-4.1.0.tgz#4a4557460f69842ed463aa00628cc26d2683afa7"
-hoist-non-react-statics@^1.0.3:
+hoist-non-react-statics@^1.0.3, hoist-non-react-statics@^1.2.0:
version "1.2.0"
resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-1.2.0.tgz#aa448cf0986d55cc40773b17174b7dd066cb7cfb"
@@ -3408,7 +3416,7 @@ intl-relativeformat@^1.3.0:
dependencies:
intl-messageformat "1.3.0"
-invariant@^2.0.0, invariant@^2.1.1, invariant@^2.2.0, invariant@^2.2.1:
+invariant@^2.0.0, invariant@^2.1.1, invariant@^2.2.0, invariant@^2.2.1, invariant@^2.2.2:
version "2.2.2"
resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.2.tgz#9e1f56ac0acdb6bf303306f338be3b204ae60360"
dependencies:
@@ -3933,10 +3941,14 @@ locate-path@^2.0.0:
p-locate "^2.0.0"
path-exists "^3.0.0"
-lodash-es@^4.2.0, lodash-es@^4.2.1:
+lodash-es@^4.17.3, lodash-es@^4.2.0, lodash-es@^4.2.1:
version "4.17.4"
resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.4.tgz#dcc1d7552e150a0640073ba9cb31d70f032950e7"
+lodash._getnative@^3.0.0:
+ version "3.9.1"
+ resolved "https://registry.yarnpkg.com/lodash._getnative/-/lodash._getnative-3.9.1.tgz#570bc7dede46d61cdcde687d65d3eecbaa3aaff5"
+
lodash._reinterpolate@~3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz#0ccf2d89166af03b3663c796538b75ac6e114d9d"
@@ -3989,6 +4001,14 @@ lodash.indexof@^4.0.5:
version "4.0.5"
resolved "https://registry.yarnpkg.com/lodash.indexof/-/lodash.indexof-4.0.5.tgz#53714adc2cddd6ed87638f893aa9b6c24e31ef3c"
+lodash.isarguments@^3.0.0:
+ version "3.1.0"
+ resolved "https://registry.yarnpkg.com/lodash.isarguments/-/lodash.isarguments-3.1.0.tgz#2f573d85c6a24289ff00663b491c1d338ff3458a"
+
+lodash.isarray@^3.0.0:
+ version "3.0.4"
+ resolved "https://registry.yarnpkg.com/lodash.isarray/-/lodash.isarray-3.0.4.tgz#79e4eb88c36a8122af86f844aa9bcd851b5fbb55"
+
lodash.isempty@^4.4.0:
version "4.4.0"
resolved "https://registry.yarnpkg.com/lodash.isempty/-/lodash.isempty-4.4.0.tgz#6f86cbedd8be4ec987be9aaf33c9684db1b31e7e"
@@ -4009,6 +4029,14 @@ lodash.isundefined@^3.0.1:
version "3.0.1"
resolved "https://registry.yarnpkg.com/lodash.isundefined/-/lodash.isundefined-3.0.1.tgz#23ef3d9535565203a66cefd5b830f848911afb48"
+lodash.keys@^3.1.2:
+ version "3.1.2"
+ resolved "https://registry.yarnpkg.com/lodash.keys/-/lodash.keys-3.1.2.tgz#4dbc0472b156be50a0b286855d1bd0b0c656098a"
+ dependencies:
+ lodash._getnative "^3.0.0"
+ lodash.isarguments "^3.0.0"
+ lodash.isarray "^3.0.0"
+
lodash.map@^4.4.0:
version "4.6.0"
resolved "https://registry.yarnpkg.com/lodash.map/-/lodash.map-4.6.0.tgz#771ec7839e3473d9c4cde28b19394c3562f4f6d3"
@@ -4058,7 +4086,7 @@ lodash@^3.5.0:
version "3.10.1"
resolved "https://registry.yarnpkg.com/lodash/-/lodash-3.10.1.tgz#5bf45e8e49ba4189e17d482789dfd15bd140b7b6"
-lodash@^4.0.0, lodash@^4.10.0, lodash@^4.12.0, lodash@^4.13.1, lodash@^4.14.0, lodash@^4.17.2, lodash@^4.2.0, lodash@^4.2.1, lodash@^4.3.0, lodash@^4.6.1:
+lodash@^4.0.0, lodash@^4.10.0, lodash@^4.12.0, lodash@^4.13.1, lodash@^4.14.0, lodash@^4.17.2, lodash@^4.17.3, lodash@^4.2.0, lodash@^4.2.1, lodash@^4.3.0, lodash@^4.6.1:
version "4.17.4"
resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.4.tgz#78203a4d1c328ae1d86dca6460e369b57f4055ae"
@@ -5264,6 +5292,20 @@ redux-batched-actions@^0.1.5:
version "0.1.5"
resolved "https://registry.yarnpkg.com/redux-batched-actions/-/redux-batched-actions-0.1.5.tgz#b39b84775f4499a4724f3154b882968073b58bed"
+redux-form:
+ version "6.4.3"
+ resolved "https://registry.yarnpkg.com/redux-form/-/redux-form-6.4.3.tgz#bd83a77770d9805f7b595a4ff18f00fe4267d3c8"
+ dependencies:
+ array-findindex-polyfill "^0.1.0"
+ deep-equal "^1.0.1"
+ es6-error "^4.0.0"
+ hoist-non-react-statics "^1.2.0"
+ invariant "^2.2.2"
+ is-promise "^2.1.0"
+ lodash "^4.17.3"
+ lodash-es "^4.17.3"
+ shallowequal "^0.2.2"
+
redux-logger@^2.7.4:
version "2.7.4"
resolved "https://registry.yarnpkg.com/redux-logger/-/redux-logger-2.7.4.tgz#891e5d29e7f111d08b5781a237b9965b5858c7f8"
@@ -5544,6 +5586,12 @@ sha.js@^2.3.6:
dependencies:
inherits "^2.0.1"
+shallowequal@^0.2.2:
+ version "0.2.2"
+ resolved "https://registry.yarnpkg.com/shallowequal/-/shallowequal-0.2.2.tgz#1e32fd5bcab6ad688a4812cb0cc04efc75c7014e"
+ dependencies:
+ lodash.keys "^3.1.2"
+
shebang-command@^1.2.0:
version "1.2.0"
resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-1.2.0.tgz#44aac65b695b03398968c39f363fee5deafdf1ea"
diff --git a/ui/src/components/input/index.js b/ui/src/components/input/index.js
index de997652..9e2068c2 100644
--- a/ui/src/components/input/index.js
+++ b/ui/src/components/input/index.js
@@ -1,4 +1,5 @@
const fns = require('../../shared/functions');
+const reduxFormProxy = require('../../shared/redux-form-proxy');
const React = require('react');
const Styled = require('styled-components');
@@ -77,4 +78,4 @@ Input.propTypes = {
warning: React.PropTypes.string
};
-module.exports = Input;
+module.exports = reduxFormProxy(Input);
diff --git a/ui/src/components/select/index.js b/ui/src/components/select/index.js
index 8168fac2..e4f514e5 100644
--- a/ui/src/components/select/index.js
+++ b/ui/src/components/select/index.js
@@ -1,4 +1,5 @@
const fns = require('../../shared/functions');
+const reduxFormProxy = require('../../shared/redux-form-proxy');
const React = require('react');
const Styled = require('styled-components');
@@ -88,4 +89,4 @@ Select.propTypes = {
warning: React.PropTypes.string
};
-module.exports = Select;
+module.exports = reduxFormProxy(Select);