refactor CreateSource to use SourceForm

ui/src/sources/components/SourceForm.js

@@ -11,9 +11,6 @@ const {
 
 export const SourceForm = React.createClass({
   propTypes: {
-    addFlashMessage: func.isRequired,
-    addSourceAction: func,
-    updateSourceAction: func,
     source: shape({}).isRequired,
     editMode: bool.isRequired,
     onInputChange: func.isRequired,

ui/src/sources/containers/CreateSource.js

@@ -1,28 +1,34 @@
 import React, {PropTypes} from 'react'
 import {withRouter} from 'react-router'
-import {createSource} from 'shared/apis'
 import {connect} from 'react-redux'
 
-import {insecureSkipVerifyText} from 'src/shared/copy/tooltipText'
+import {createSource, updateSource} from 'shared/apis'
+import SourceForm from 'src/sources/components/SourceForm'
 import {addSource as addSourceAction} from 'src/shared/actions/sources'
 
+const {
+  func,
+  shape,
+  string,
+} = PropTypes
+
 export const CreateSource = React.createClass({
   propTypes: {
-    router: PropTypes.shape({
+    router: shape({
-      push: PropTypes.func.isRequired,
+      push: func.isRequired,
     }).isRequired,
-    location: PropTypes.shape({
+    location: shape({
-      query: PropTypes.shape({
+      query: shape({
-        redirectPath: PropTypes.string,
+        redirectPath: string,
       }).isRequired,
     }).isRequired,
-    addSourceAction: PropTypes.func,
+    addSourceAction: func,
+    updateSourceAction: func,
   },
 
   getInitialState() {
     return {
-      showSSL: false,
+      source: {},
-      showMeta: false,
     }
   },
 
@@ -54,62 +60,117 @@ export const CreateSource = React.createClass({
     return this.props.router.push(fixedPath)
   },
 
-  onInputChange() {
+  handleInputChange(e) {
-    const showSSL = !!this.sourceURL.value.startsWith("https")
+    const val = e.target.value
-    this.setState(showSSL)
+    const name = e.target.name
+    this.setState((prevState) => {
+      const newSource = Object.assign({}, prevState.source, {
+        [name]: val,
+      })
+      return Object.assign({}, prevState, {source: newSource})
+    })
   },
 
+  handleBlurSourceURL(newSource) {
+    if (this.state.editMode) {
+      return
+    }
+
+    if (!newSource.url) {
+      return
+    }
+
+    // if there is a type on source it has already been created
+    if (newSource.type) {
+      return
+    }
+
+    createSource(newSource).then(({data: sourceFromServer}) => {
+      this.props.addSourceAction(sourceFromServer)
+      this.setState({source: sourceFromServer})
+    }).catch(({data: error}) => {
+      // dont want to flash this until they submit
+      this.setState({error: error.message})
+    })
+  },
+
+  handleSubmit(newSource) {
+    const {error} = this.state
+
+    if (error) {
+      // useful error message
+      // return addFlashMessage({type: 'error', text: error})
+    }
+
+    updateSource(newSource).then(({data: sourceFromServer}) => {
+      this.props.updateSourceAction(sourceFromServer)
+      this.redirectToApp(newSource)
+    }).catch(() => {
+      // give a useful error message to the user
+    })
+  },
+
+  // <div className="panel panel-minimal">
+  //   <div className="panel-heading text-center">
+  //     <h2 className="deluxe">Welcome to Chronograf</h2>
+  //   </div>
+  //   <div className="panel-body">
+  //     <h4 className="text-center">Connect to a New Source</h4>
+  //     <br/>
+  //
+  //     <form onSubmit={this.handleNewSource}>
+  //       <div>
+  //         <div className="form-group col-xs-6 col-sm-4 col-sm-offset-2">
+  //           <label htmlFor="connect-string">Connection String</label>
+  //           <input ref={(r) => this.sourceURL = r} onChange={this.onInputChange} className="form-control" id="connect-string" defaultValue="http://localhost:8086"></input>
+  //         </div>
+  //         <div className="form-group col-xs-6 col-sm-4">
+  //           <label htmlFor="name">Name</label>
+  //           <input ref={(r) => this.sourceName = r} className="form-control" id="name" defaultValue="Influx 1"></input>
+  //         </div>
+  //         <div className="form-group col-xs-6 col-sm-4 col-sm-offset-2">
+  //           <label htmlFor="username">Username</label>
+  //           <input ref={(r) => this.sourceUser = r} className="form-control" id="username"></input>
+  //         </div>
+  //         <div className="form-group col-xs-6 col-sm-4">
+  //           <label htmlFor="password">Password</label>
+  //           <input ref={(r) => this.sourcePassword = r} className="form-control" id="password" type="password"></input>
+  //         </div>
+  //       </div>
+  //       <div className="form-group col-xs-8 col-xs-offset-2">
+  //         <label htmlFor="telegraf">Telegraf Database</label>
+  //         <input ref={(r) => this.sourceTelegraf = r} className="form-control" id="telegraf" type="text" defaultValue="telegraf"></input>
+  //       </div>
+  //       {this.state.showSSL ?
+  //         <div className="form-group col-xs-8 col-xs-offset-2">
+  //           <div className="form-control-static">
+  //             <input type="checkbox" id="insecureSkipVerifyCheckbox" ref={(r) => this.sourceInsecureSkipVerify = r} />
+  //             <label htmlFor="insecureSkipVerifyCheckbox">Unsafe SSL</label>
+  //           </div>
+  //           <label className="form-helper">{insecureSkipVerifyText}</label>
+  //         </div> : null}
+  //       <div className="form-group form-group-submit col-xs-12 text-center">
+  //         <button className="btn btn-success" type="submit">Connect New Source</button>
+  //       </div>
+  //     </form>
+  //   </div>
+  // </div>
+
   render() {
+    const {source} = this.state
+
     return (
       <div className="select-source-page" id="select-source-page">
         <div className="container-fluid">
           <div className="row">
             <div className="col-md-8 col-md-offset-2">
-              <div className="panel panel-minimal">
+              <SourceForm
-                <div className="panel-heading text-center">
+                source={source}
-                  <h2 className="deluxe">Welcome to Chronograf</h2>
+                editMode={false}
-                </div>
+                onInputChange={this.handleInputChange}
-                <div className="panel-body">
+                onSubmit={this.handleSubmit}
-                  <h4 className="text-center">Connect to a New Source</h4>
+                onBlurSourceURL={this.handleBlurSourceURL}
-                  <br/>
+              />
-
-                  <form onSubmit={this.handleNewSource}>
-                    <div>
-                      <div className="form-group col-xs-6 col-sm-4 col-sm-offset-2">
-                        <label htmlFor="connect-string">Connection String</label>
-                        <input ref={(r) => this.sourceURL = r} onChange={this.onInputChange} className="form-control" id="connect-string" defaultValue="http://localhost:8086"></input>
-                      </div>
-                      <div className="form-group col-xs-6 col-sm-4">
-                        <label htmlFor="name">Name</label>
-                        <input ref={(r) => this.sourceName = r} className="form-control" id="name" defaultValue="Influx 1"></input>
-                      </div>
-                      <div className="form-group col-xs-6 col-sm-4 col-sm-offset-2">
-                        <label htmlFor="username">Username</label>
-                        <input ref={(r) => this.sourceUser = r} className="form-control" id="username"></input>
-                      </div>
-                      <div className="form-group col-xs-6 col-sm-4">
-                        <label htmlFor="password">Password</label>
-                        <input ref={(r) => this.sourcePassword = r} className="form-control" id="password" type="password"></input>
-                      </div>
-                    </div>
-                    <div className="form-group col-xs-8 col-xs-offset-2">
-                      <label htmlFor="telegraf">Telegraf Database</label>
-                      <input ref={(r) => this.sourceTelegraf = r} className="form-control" id="telegraf" type="text" defaultValue="telegraf"></input>
-                    </div>
-                    {this.state.showSSL ?
-                      <div className="form-group col-xs-8 col-xs-offset-2">
-                        <div className="form-control-static">
-                          <input type="checkbox" id="insecureSkipVerifyCheckbox" ref={(r) => this.sourceInsecureSkipVerify = r} />
-                          <label htmlFor="insecureSkipVerifyCheckbox">Unsafe SSL</label>
-                        </div>
-                        <label className="form-helper">{insecureSkipVerifyText}</label>
-                      </div> : null}
-                    <div className="form-group form-group-submit col-xs-12 text-center">
-                      <button className="btn btn-success" type="submit">Connect New Source</button>
-                    </div>
-                  </form>
-                </div>
-              </div>
             </div>
           </div>
         </div>

ui/src/sources/containers/SourcePage.js

@@ -105,7 +105,6 @@ export const SourcePage = React.createClass({
 
   render() {
     const {source, editMode} = this.state
-    const {addFlashMessage} = this.props
 
     if (editMode && !source.id) {
       return <div className="page-spinner"></div>
@@ -129,9 +128,6 @@ export const SourcePage = React.createClass({
                 <SourceForm
                   source={source}
                   editMode={editMode}
-                  addFlashMessage={addFlashMessage}
-                  addSourceAction={addSourceAction}
-                  updateSourceAction={updateSourceAction}
                   onInputChange={this.handleInputChange}
                   onSubmit={this.handleSubmit}
                   onBlurSourceURL={this.handleBlurSourceURL}