From baa00dfc27decc0557ef5d709528b2b6e18d36a8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Se=CC=81rgio=20Ramos?= Date: Tue, 17 Jan 2017 11:30:57 +0000 Subject: [PATCH] turn create-monitor into a form --- frontend/package.json | 1 + .../src/components/create-monitor/index.js | 157 ++++++++++-------- frontend/src/components/monitors/index.js | 15 +- frontend/src/containers/metrics/monitors.js | 46 ++++- frontend/src/state/actions.js | 3 +- frontend/src/state/reducers/monitors.js | 1 - frontend/yarn.lock | 58 ++++++- ui/src/components/input/index.js | 3 +- ui/src/components/select/index.js | 3 +- 9 files changed, 189 insertions(+), 98 deletions(-) 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 = ({
    {links}
- {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);