-
-
-
-
-
Connection Details
-
+
+
Connection Details
+
-
-
-
-
+
+ {_.get(source, 'url', '').startsWith("https") ?
+
+
+ this.sourceInsecureSkipVerify = r} />
+
+
+
+
: null}
+
+
+
+
)
},
diff --git a/ui/src/sources/containers/CreateSource.js b/ui/src/sources/containers/CreateSource.js
index 9e7e409e5d..8de5b2699c 100644
--- a/ui/src/sources/containers/CreateSource.js
+++ b/ui/src/sources/containers/CreateSource.js
@@ -1,36 +1,45 @@
import React, {PropTypes} from 'react'
import {withRouter} from 'react-router'
-import {addSource as addSourceAction} from 'src/shared/actions/sources'
-import {createSource} from 'shared/apis'
import {connect} from 'react-redux'
+import {bindActionCreators} from 'redux'
+
+import {
+ createSource as createSourceAJAX,
+ updateSource as updateSourceAJAX,
+} from 'shared/apis'
+import SourceForm from 'src/sources/components/SourceForm'
+import Notifications from 'shared/components/Notifications'
+import {
+ addSource as addSourceAction,
+ updateSource as updateSourceAction,
+} from 'src/shared/actions/sources'
+import {publishNotification} from 'src/shared/actions/notifications'
+
+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,
+ addSource: func,
+ updateSource: func,
+ notify: func,
},
- handleNewSource(e) {
- e.preventDefault()
- const source = {
- url: this.sourceURL.value.trim(),
- name: this.sourceName.value,
- username: this.sourceUser.value,
- password: this.sourcePassword.value,
- isDefault: true,
- telegraf: this.sourceTelegraf.value,
+ getInitialState() {
+ return {
+ source: {},
}
- createSource(source).then(({data: sourceFromServer}) => {
- this.props.addSourceAction(sourceFromServer)
- this.redirectToApp(sourceFromServer)
- })
},
redirectToApp(source) {
@@ -43,47 +52,77 @@ export const CreateSource = React.createClass({
return this.props.router.push(fixedPath)
},
- render() {
- return (
-
-
-
-
-
-
-
Welcome to Chronograf
-
-
-
Connect to a New Source
-
+ 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
+ }
+
+ createSourceAJAX(newSource).then(({data: sourceFromServer}) => {
+ this.props.addSource(sourceFromServer)
+ this.setState({source: sourceFromServer, error: null})
+ }).catch(({data: error}) => {
+ this.setState({error: error.message})
+ })
+ },
+
+ handleSubmit(newSource) {
+ const {error} = this.state
+ const {notify, updateSource} = this.props
+
+ if (error) {
+ return notify('error', error)
+ }
+
+ updateSourceAJAX(newSource).then(({data: sourceFromServer}) => {
+ updateSource(sourceFromServer)
+ this.redirectToApp(sourceFromServer)
+ }).catch(() => {
+ notify('error', 'There was a problem updating the source. Check the settings')
+ })
+ },
+
+ render() {
+ const {location} = this.props
+ const {source} = this.state
+
+ return (
+
+
+
+
+
+
+
+
+
Welcome to Chronograf
+
+
@@ -94,8 +133,12 @@ export const CreateSource = React.createClass({
},
})
-function mapStateToProps(_) {
- return {}
+function mapDispatchToProps(dispatch) {
+ return {
+ addSource: bindActionCreators(addSourceAction, dispatch),
+ updateSource: bindActionCreators(updateSourceAction, dispatch),
+ notify: bindActionCreators(publishNotification, dispatch),
+ }
}
-export default connect(mapStateToProps, {addSourceAction})(withRouter(CreateSource))
+export default connect(null, mapDispatchToProps)(withRouter(CreateSource))
diff --git a/ui/src/sources/containers/SourcePage.js b/ui/src/sources/containers/SourcePage.js
index 2a5b65b9b3..f9f259e6ec 100644
--- a/ui/src/sources/containers/SourcePage.js
+++ b/ui/src/sources/containers/SourcePage.js
@@ -78,7 +78,7 @@ export const SourcePage = React.createClass({
createSource(newSource).then(({data: sourceFromServer}) => {
this.props.addSourceAction(sourceFromServer)
- this.setState({source: sourceFromServer})
+ this.setState({source: sourceFromServer, error: null})
}).catch(({data: error}) => {
// dont want to flash this until they submit
this.setState({error: error.message})
@@ -105,22 +105,40 @@ export const SourcePage = React.createClass({
render() {
const {source, editMode} = this.state
- const {addFlashMessage, router, location, params} = this.props
+
+ if (editMode && !source.id) {
+ return
+ }
return (
-
+
+
+
+
+
+ {editMode ? "Edit Source" : "Add a New Source"}
+
+
+
+
+
+
)
},
})
diff --git a/ui/src/style/unsorted.scss b/ui/src/style/unsorted.scss
index e9de6eea6b..7dc087b49e 100644
--- a/ui/src/style/unsorted.scss
+++ b/ui/src/style/unsorted.scss
@@ -2,16 +2,6 @@
Unsorted
----------------------------------------------
*/
-.select-source-page {
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- overflow: auto;
- @include custom-scrollbar($g2-kevlar, $c-pool);
- @include gradient-v($g2-kevlar, $g0-obsidian);
-}
.text-right .btn {
margin: 0 0 0 4px;
}