diff --git a/CHANGELOG.md b/CHANGELOG.md index 2c8e74313..672d6e489 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -8,6 +8,7 @@ ### Features 1. [#2083](https://github.com/influxdata/chronograf/pull/2083): Every dashboard can now have its own time range 1. [#2045](https://github.com/influxdata/chronograf/pull/2045): Add CSV download option in dashboard cells +1. [#2133](https://github.com/influxdata/chronograf/pull/2133): Implicitly prepend source urls with http:// ### UI Improvements 1. [#2111](https://github.com/influxdata/chronograf/pull/2111): Increase size of Cell Editor query tabs to reveal more of their query strings diff --git a/ui/src/sources/components/SourceForm.js b/ui/src/sources/components/SourceForm.js index bebb85569..21e340f33 100644 --- a/ui/src/sources/components/SourceForm.js +++ b/ui/src/sources/components/SourceForm.js @@ -1,159 +1,139 @@ -import React, {PropTypes, Component} from 'react' +import React, {PropTypes} from 'react' import classnames from 'classnames' import {insecureSkipVerifyText} from 'shared/copy/tooltipText' import _ from 'lodash' -class SourceForm extends Component { - constructor(props) { - super(props) - } +const SourceForm = ({ + source, + editMode, + onSubmit, + onInputChange, + onBlurSourceURL, +}) => +
+

Connection Details

+
- handleBlurSourceURL = () => { - const url = this.props.source.url.trim() - - if (!url) { - return - } - - const newSource = { - ...this.props.source, - url, - } - - this.props.onBlurSourceURL(newSource) - } - - render() { - const {source, editMode, onSubmit, onInputChange} = this.props - - return ( -
-

Connection Details

-
- -
-
- + +
+ + +
+
+ + +
+
+ + +
+
+ + +
+ {_.get(source, 'type', '').includes('enterprise') + ?
+
-
- - -
-
- - -
-
- - -
- {_.get(source, 'type', '').includes('enterprise') - ?
- - -
- : null} -
- - -
-
+ : null} +
+ + +
+
+
+ + +
+
+ {_.get(source, 'url', '').startsWith('https') + ?
- +
+
- {_.get(source, 'url', '').startsWith('https') - ?
-
- - -
- -
- : null} -
- -
-
- + : null} +
+ +
- ) - } -} + +
const {bool, func, shape, string} = PropTypes diff --git a/ui/src/sources/containers/SourcePage.js b/ui/src/sources/containers/SourcePage.js index 4997c6a48..d3eb5b6cb 100644 --- a/ui/src/sources/containers/SourcePage.js +++ b/ui/src/sources/containers/SourcePage.js @@ -67,23 +67,56 @@ class SourcePage extends Component { }) } - handleBlurSourceURL = newSource => { - if (this.state.editMode) { + handleBlurSourceURL = () => { + const {source, editMode} = this.state + if (editMode) { + this.setState(this._normalizeSource) return } - if (!newSource.url) { + if (!source.url) { return } + this.setState(this._normalizeSource, this._createSourceOnBlur) + } + + handleSubmit = e => { + e.preventDefault() + const {isCreated, editMode} = this.state + const isNewSource = !editMode + + if (!isCreated && isNewSource) { + return this.setState(this._normalizeSource, this._createSource) + } + + this.setState(this._normalizeSource, this._updateSource) + } + + handleError = (bannerText, err) => { + const {notify} = this.props + const error = this._parseError(err) + console.error('Error: ', error) + notify('error', `${bannerText}: ${error}`) + } + + _normalizeSource({source}) { + const url = source.url.trim() + if (source.url.startsWith('http')) { + return {source: {...source, url}} + } + return {source: {...source, url: `http://${url}`}} + } + + _createSourceOnBlur = () => { + const {source} = this.state // if there is a type on source it has already been created - if (newSource.type) { + if (source.type) { return } - - createSource(newSource) + createSource(source) .then(({data: sourceFromServer}) => { - this.props.addSourceAction(sourceFromServer) + addSourceAction(sourceFromServer) this.setState({ source: {...DEFAULT_SOURCE, ...sourceFromServer}, isCreated: true, @@ -91,31 +124,29 @@ class SourcePage extends Component { }) .catch(err => { // dont want to flash this until they submit - const error = this.parseError(err) + const error = this._parseError(err) console.error('Error on source creation: ', error) }) } - handleSubmit = e => { - e.preventDefault() + _createSource = () => { + const {source} = this.state + createSource(source) + .then(({data: sourceFromServer}) => { + addSourceAction(sourceFromServer) + this._redirect(sourceFromServer) + }) + .catch(error => { + this.handleError('Unable to create source', error) + }) + } + + _updateSource = () => { + const {source} = this.state const {notify} = this.props - const {isCreated, source, editMode} = this.state - const isNewSource = !editMode - - if (!isCreated && isNewSource) { - return createSource(source) - .then(({data: sourceFromServer}) => { - this.props.addSourceAction(sourceFromServer) - this._redirect(sourceFromServer) - }) - .catch(error => { - this.handleError('Unable to create source', error) - }) - } - updateSource(source) .then(({data: sourceFromServer}) => { - this.props.updateSourceAction(sourceFromServer) + updateSourceAction(sourceFromServer) this._redirect(sourceFromServer) notify('success', `New source ${source.name} added`) }) @@ -124,13 +155,6 @@ class SourcePage extends Component { }) } - handleError = (bannerText, err) => { - const {notify} = this.props - const error = this.parseError(err) - console.error('Error: ', error) - notify('error', `${bannerText}: ${error}`) - } - _redirect = source => { const {isInitialSource} = this.state const {params, router} = this.props @@ -157,7 +181,7 @@ class SourcePage extends Component { return router.push(fixedPath) } - parseError = error => { + _parseError = error => { return _.get(error, ['data', 'message'], error) }