From 0dfc71195fcbca9f363b317bf0cd13f8b4d29ae8 Mon Sep 17 00:00:00 2001 From: Andrew Watkins Date: Mon, 16 Oct 2017 14:07:56 -0700 Subject: [PATCH] Update SourcePage to use new SourceForm format --- ui/src/sources/containers/CreateSource.js | 1 + ui/src/sources/containers/SourcePage.js | 149 +++++++++++++--------- 2 files changed, 91 insertions(+), 59 deletions(-) diff --git a/ui/src/sources/containers/CreateSource.js b/ui/src/sources/containers/CreateSource.js index 75d24beab..f95586c7b 100644 --- a/ui/src/sources/containers/CreateSource.js +++ b/ui/src/sources/containers/CreateSource.js @@ -84,6 +84,7 @@ class CreateSource extends Component { this.setState({source: sourceFromServer, isCreated: true}) }) .catch(({data: error}) => { + // dont want to flash this until they submit this.setState({error: error.message}) }) } diff --git a/ui/src/sources/containers/SourcePage.js b/ui/src/sources/containers/SourcePage.js index d40720381..adf2f3044 100644 --- a/ui/src/sources/containers/SourcePage.js +++ b/ui/src/sources/containers/SourcePage.js @@ -1,4 +1,4 @@ -import React, {PropTypes} from 'react' +import React, {PropTypes, Component} from 'react' import {withRouter} from 'react-router' import {getSource} from 'shared/apis' import {createSource, updateSource} from 'shared/apis' @@ -6,62 +6,62 @@ import { addSource as addSourceAction, updateSource as updateSourceAction, } from 'shared/actions/sources' +import {publishNotification} from 'shared/actions/notifications' import {connect} from 'react-redux' import SourceForm from 'src/sources/components/SourceForm' import FancyScrollbar from 'shared/components/FancyScrollbar' import SourceIndicator from 'shared/components/SourceIndicator' -const {func, shape, string} = PropTypes +class SourcePage extends Component { + constructor(props) { + super(props) -export const SourcePage = React.createClass({ - propTypes: { - params: shape({ - id: string, - sourceID: string, - }), - router: shape({ - push: func.isRequired, - }).isRequired, - location: shape({ - query: shape({ - redirectPath: string, - }).isRequired, - }).isRequired, - addFlashMessage: func.isRequired, - addSourceAction: func, - updateSourceAction: func, - }, - - getInitialState() { - return { - source: {}, + this.state = { + source: { + url: 'http://localhost:8086', + name: 'Influx 1', + username: '', + password: '', + default: true, + telegraf: 'telegraf', + insecureSkipVerify: false, + metaUrl: '', + }, editMode: this.props.params.id !== undefined, error: '', } - }, + } componentDidMount() { if (!this.state.editMode) { return } + getSource(this.props.params.id).then(({data: source}) => { this.setState({source}) }) - }, + } - handleInputChange(e) { - const val = e.target.value + handleInputChange = e => { + let 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 (e.target.type === 'checkbox') { + val = e.target.checked + } + + this.setState(prevState => { + const source = { + ...prevState.source, + [name]: val, + } + + return {...prevState, source} + }) + } + + handleBlurSourceURL = newSource => { if (this.state.editMode) { return } @@ -78,35 +78,46 @@ export const SourcePage = React.createClass({ createSource(newSource) .then(({data: sourceFromServer}) => { this.props.addSourceAction(sourceFromServer) - this.setState({source: sourceFromServer, error: null}) + this.setState({source: sourceFromServer, isCreated: true}) }) .catch(({data: error}) => { // dont want to flash this until they submit this.setState({error: error.message}) }) - }, + } - handleSubmit(newSource) { - const {router, params, addFlashMessage} = this.props - const {error} = this.state + handleSubmit = e => { + e.preventDefault() + const {router, params, notify} = this.props + const {isCreated, source, editMode} = this.state + const isNewSource = !editMode - if (error) { - return addFlashMessage({type: 'error', text: error}) + if (!isCreated && isNewSource) { + return createSource(source) + .then(({data: sourceFromServer}) => { + this.props.addSourceAction(sourceFromServer) + router.push(`/sources/${params.sourceID}/manage-sources`) + }) + .catch(({data: error}) => { + console.error('Error on source creation: ', error.message) + notify( + 'error', + `There was a problem creating source: ${error.message}` + ) + }) } - updateSource(newSource) + updateSource(source) .then(({data: sourceFromServer}) => { this.props.updateSourceAction(sourceFromServer) router.push(`/sources/${params.sourceID}/manage-sources`) - addFlashMessage({type: 'success', text: 'The source info saved'}) + notify('success', 'The source info saved') }) - .catch(() => { - addFlashMessage({ - type: 'error', - text: 'There was a problem updating the source. Check the settings', - }) + .catch(({data: error}) => { + console.error('Error on source update', error.message) + notify('error', `There was a problem: ${error.message}`) }) - }, + } render() { const {source, editMode} = this.state @@ -148,13 +159,33 @@ export const SourcePage = React.createClass({ ) - }, -}) - -function mapStateToProps(_) { - return {} + } } -export default connect(mapStateToProps, {addSourceAction, updateSourceAction})( - withRouter(SourcePage) -) +const {func, shape, string} = PropTypes + +SourcePage.propTypes = { + params: shape({ + id: string, + sourceID: string, + }), + router: shape({ + push: func.isRequired, + }).isRequired, + location: shape({ + query: shape({ + redirectPath: string, + }).isRequired, + }).isRequired, + notify: func, + addSourceAction: func, + updateSourceAction: func, +} + +const mapStateToProps = () => ({}) + +export default connect(mapStateToProps, { + notify: publishNotification, + addSourceAction, + updateSourceAction, +})(withRouter(SourcePage))