turn create-monitor into a form

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",

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 = () => {
+const CreateMonitor = ({
-  return (
+  handleSubmit,
-    <div>
+  pristine,
-      <H4>
+  submitting
-        <FormattedMessage id='monitors.conditions' />
+}) => (
-      </H4>
+  <form onSubmit={handleSubmit}>
-      <P>
+    <H4>
-        <FormattedMessage id='monitors.conditions-subtitle' />
+      <FormattedMessage id='monitors.conditions' />
-      </P>
+    </H4>
-      <ConditionsRow around>
+    <P>
-        <TextColumn md={2} xs={12}>
+      <FormattedMessage id='monitors.conditions-subtitle' />
-          <RightText>
+    </P>
-            <FormattedMessage id='monitors.if' />
+    <ConditionsRow around>
-          </RightText>
+      <TextColumn md={2} xs={12}>
-        </TextColumn>
+        <RightText>
-        <Column md={2} xs={12}>
+          <FormattedMessage id='monitors.if' />
-          <Select>
+        </RightText>
-            <option>
+      </TextColumn>
-              <FormattedMessage id='monitors.above' />
+      <Column md={2} xs={12}>
-            </option>
+        <Field component={Select}>
-            <option>
+          <option>
-              <FormattedMessage id='monitors.equal' />
+            <FormattedMessage id='monitors.above' />
-            </option>
+          </option>
-            <option>
+          <option>
-              <FormattedMessage id='monitors.below' />
+            <FormattedMessage id='monitors.equal' />
-            </option>
+          </option>
-          </Select>
+          <option>
-        </Column>
+            <FormattedMessage id='monitors.below' />
-        <Column md={2} xs={12}>
+          </option>
-          <Input placeholder='value' />
+        </Field>
-        </Column>
+      </Column>
-        <Column md={2} xs={12}>
+      <Column md={2} xs={12}>
-          <Select>
+        <Field component={Input} placeholder='value' />
-            <option>
+      </Column>
-              <FormattedMessage id='monitors.average' />
+      <Column md={2} xs={12}>
-            </option>
+        <Field component={Select}>
-          </Select>
+          <option>
-        </Column>
+            <FormattedMessage id='monitors.average' />
-        <TextColumn md={1}xs={12}>
+          </option>
-          <Text>
+        </Field>
-            <FormattedMessage id='monitors.during' />
+      </Column>
-          </Text>
+      <TextColumn md={1}xs={12}>
-        </TextColumn>
+        <Text>
-        <Column md={3} xs={12}>
+          <FormattedMessage id='monitors.during' />
-          <Select>
+        </Text>
-            <option>
+      </TextColumn>
-              <FormattedMessage id='monitors.last5' />
+      <Column md={3} xs={12}>
-            </option>
+        <Field component={Select}>
-          </Select>
+          <option>
-        </Column>
+            <FormattedMessage id='monitors.last5' />
-      </ConditionsRow>
+          </option>
-      <H4>
+        </Field>
-        <FormattedMessage id='monitors.notification' />
+      </Column>
-      </H4>
+    </ConditionsRow>
-      <P>
+    <H4>
-        <FormattedMessage id='monitors.notification-subtitle' />
+      <FormattedMessage id='monitors.notification' />
-      </P>
+    </H4>
-      <Row>
+    <P>
-        <Column xs={12}>
+      <FormattedMessage id='monitors.notification-subtitle' />
-          <PeopleInput />
+    </P>
-        </Column>
+    <Row>
-      </Row>
+      <Column xs={12}>
-      <Row>
+        <Field component={PeopleInput} />
-        <Column xs={12}>
+      </Column>
-          <Button>
+    </Row>
-            <FormattedMessage id='monitors.submit' />
+    <Row>
-          </Button>
+      <Column xs={12}>
-        </Column>
+        <Button disabled={pristine || submitting} type='submit'>
-      </Row>
+          <FormattedMessage id='monitors.submit' />
-    </div>
+        </Button>
-  );
+      </Column>
+    </Row>
+  </form>
+);
+
+CreateMonitor.propTypes = {
+  handleSubmit: React.PropTypes.func,
+  pristine: React.PropTypes.bool,
+  submitting: React.PropTypes.bool
 };
+
+module.exports = CreateMonitor;

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: () => (
-      <CreateMonitor submit={submit} />
-    ),
-    manage: () => (
-      <ManageMonitor />
-    )
-  };
-
   const links = ['create', 'manage'].map((name) => {
     const id = `monitors.${name}`;
     const className = page === name ? 'active' : '';
@@ -111,7 +101,7 @@ const Monitors = ({
         <Ul>
           {links}
         </Ul>
-        {views[page]()}
+        {children}
       </View>
       <Close onClick={handleDismiss} />
     </StyledModal>
@@ -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,

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,
+  switchMonitorViewPage
-  createMonitor
 } = actions;
 
+const ConnectedCreateMonitor = reduxForm({
+  form: 'create-monitor'
+})(CreateMonitor);
+// const ConnectedCreateMonitor = reduxForm()(CreateMonitor);
+
+const MetricMonitors = (props) => {
+  const {
+    page
+  } = props;
+
+  const views = {
+    create: () => (
+      <ConnectedCreateMonitor />
+    ),
+    manage: () => (
+      <ManageMonitor />
+    )
+  };
+
+  return (
+    <Monitors {...props}>
+      {views[page]()}
+    </Monitors>
+  );
+};
+
+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)),
+  togglePage: (newPage) => dispatch(switchMonitorViewPage(newPage))
-  submit: (meta) => dispatch(createMonitor(meta))
 });
 
 module.exports = connect(
   mapStateToProps,
   mapDispatchToProps
-)(Monitors);
+)(MetricMonitors);

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`),
+  switchMonitorViewPage: createAction(`${APP}/SWITCH_MONITOR_VIEW_PAGE`)
-  createMonitor: createAction(`${APP}/CREATE_MONITOR`)
 };

frontend/src/state/reducers/monitors.js

@@ -9,7 +9,6 @@ const {
 const {
   toggleMonitorView,
   switchMonitorViewPage
-  // createMonitor
 } = actions;
 
 module.exports = handleActions({

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"

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);

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);