refactor CreateSource to use SourceForm
Jade McGough
parent
409e5fdd94
commit
b50fa52264
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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({
|
||||
push: PropTypes.func.isRequired,
|
||||
router: shape({
|
||||
push: func.isRequired,
|
||||
}).isRequired,
|
||||
location: PropTypes.shape({
|
||||
query: PropTypes.shape({
|
||||
redirectPath: PropTypes.string,
|
||||
location: shape({
|
||||
query: shape({
|
||||
redirectPath: string,
|
||||
}).isRequired,
|
||||
}).isRequired,
|
||||
addSourceAction: PropTypes.func,
|
||||
addSourceAction: func,
|
||||
updateSourceAction: func,
|
||||
},
|
||||
|
||||
getInitialState() {
|
||||
return {
|
||||
showSSL: false,
|
||||
showMeta: false,
|
||||
source: {},
|
||||
}
|
||||
},
|
||||
|
||||
|
|
@ -54,62 +60,117 @@ export const CreateSource = React.createClass({
|
|||
return this.props.router.push(fixedPath)
|
||||
},
|
||||
|
||||
onInputChange() {
|
||||
const showSSL = !!this.sourceURL.value.startsWith("https")
|
||||
this.setState(showSSL)
|
||||
handleInputChange(e) {
|
||||
const val = e.target.value
|
||||
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">
|
||||
<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>
|
||||
<SourceForm
|
||||
source={source}
|
||||
editMode={false}
|
||||
onInputChange={this.handleInputChange}
|
||||
onSubmit={this.handleSubmit}
|
||||
onBlurSourceURL={this.handleBlurSourceURL}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
|
|||
Loading…
Reference in New Issue