Merge pull request #1338 from influxdata/fix/add-source

require url and name when adding a new source
2017-04-27 13:18:20 -07:00 · 2017-04-27 13:18:20 -07:00 · 617a59e80f
parent cf6652d4a7 4788e3ce2d
commit 617a59e80f
2 changed files with 103 additions and 26 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -3,6 +3,7 @@
 ### Bug Fixes
  1. [#1337](https://github.com/influxdata/chronograf/pull/1337): Fix no apps for hosts false negative
  1. [#1340](https://github.com/influxdata/chronograf/pull/1340): Fix no active query in DE and Cell editing
+  1. [#1338](https://github.com/influxdata/chronograf/pull/1338): Require url and name when adding a new source

 ### Features

@ -19,6 +20,8 @@
  1. [#1269](https://github.com/influxdata/chronograf/issues/1269): Add more functionality to the explorer's query generation process
  1. [#1318](https://github.com/influxdata/chronograf/issues/1318): Fix JWT refresh for auth-durations of zero and less than five minutes
  1. [#1332](https://github.com/influxdata/chronograf/pull/1332): Remove table toggle from dashboard visualization
+  1. [#1335](https://github.com/influxdata/chronograf/pull/1335): Improve UX for sanitized kapacitor settings
+

 ### Features
  1. [#1232](https://github.com/influxdata/chronograf/pull/1232): Fuse the query builder and raw query editor
--- a/ui/src/sources/components/SourceForm.js
+++ b/ui/src/sources/components/SourceForm.js
@ -3,11 +3,7 @@ import classNames from 'classnames'
 import {insecureSkipVerifyText} from 'src/shared/copy/tooltipText'
 import _ from 'lodash'

-const {
-  bool,
-  func,
-  shape,
-} = PropTypes
+const {bool, func, shape} = PropTypes

 export const SourceForm = React.createClass({
  propTypes: {
@ -28,7 +24,9 @@ export const SourceForm = React.createClass({
      password: this.sourcePassword.value,
      'default': this.sourceDefault.checked,
      telegraf: this.sourceTelegraf.value,
-      insecureSkipVerify: this.sourceInsecureSkipVerify ? this.sourceInsecureSkipVerify.checked : false,
+      insecureSkipVerify: this.sourceInsecureSkipVerify
+        ? this.sourceInsecureSkipVerify.checked
+        : false,
      metaUrl: this.metaUrl && this.metaUrl.value.trim(),
    }

@ -56,50 +54,126 @@ export const SourceForm = React.createClass({
    return (
      <div className="panel-body">
        <h4 className="text-center">Connection Details</h4>
-        <br/>
+        <br />

        <form onSubmit={this.handleSubmitForm}>
          <div className="form-group col-xs-12 col-sm-6">
            <label htmlFor="connect-string"> Connection String</label>
-            <input type="text" name="url" ref={(r) => this.sourceURL = r} className="form-control" id="connect-string" placeholder="http://localhost:8086" onChange={onInputChange} value={source.url || ''} onBlur={this.handleBlurSourceURL}></input>
+            <input
+              type="text"
+              name="url"
+              ref={r => this.sourceURL = r}
+              className="form-control"
+              id="connect-string"
+              placeholder="http://localhost:8086"
+              onChange={onInputChange}
+              value={source.url || ''}
+              onBlur={this.handleBlurSourceURL}
+              required={true}
+            />
          </div>
          <div className="form-group col-xs-12 col-sm-6">
            <label htmlFor="name">Name</label>
-            <input type="text" name="name" ref={(r) => this.sourceName = r} className="form-control" id="name" placeholder="Influx 1" onChange={onInputChange} value={source.name || ''}></input>
+            <input
+              type="text"
+              name="name"
+              ref={r => this.sourceName = r}
+              className="form-control"
+              id="name"
+              placeholder="Influx 1"
+              onChange={onInputChange}
+              value={source.name || ''}
+              required={true}
+            />
          </div>
          <div className="form-group col-xs-12 col-sm-6">
            <label htmlFor="username">Username</label>
-            <input type="text" name="username" ref={(r) => this.sourceUsername = r} className="form-control" id="username" onChange={onInputChange} value={source.username || ''}></input>
+            <input
+              type="text"
+              name="username"
+              ref={r => this.sourceUsername = r}
+              className="form-control"
+              id="username"
+              onChange={onInputChange}
+              value={source.username || ''}
+            />
          </div>
          <div className="form-group col-xs-12 col-sm-6">
            <label htmlFor="password">Password</label>
-            <input type="password" name="password" ref={(r) => this.sourcePassword = r} className="form-control" id="password" onChange={onInputChange} value={source.password || ''}></input>
+            <input
+              type="password"
+              name="password"
+              ref={r => this.sourcePassword = r}
+              className="form-control"
+              id="password"
+              onChange={onInputChange}
+              value={source.password || ''}
+            />
          </div>
-          {_.get(source, 'type', '').includes('enterprise') ?
-              <div className="form-group col-xs-12">
+          {_.get(source, 'type', '').includes('enterprise')
+            ? <div className="form-group col-xs-12">
                <label htmlFor="meta-url">Meta Service Connection URL</label>
-                <input type="text" name="metaUrl" ref={(r) => this.metaUrl = r} className="form-control" id="meta-url" placeholder="http://localhost:8091" onChange={onInputChange} value={source.metaUrl || ''}></input>
-              </div> : null}
+                <input
+                  type="text"
+                  name="metaUrl"
+                  ref={r => this.metaUrl = r}
+                  className="form-control"
+                  id="meta-url"
+                  placeholder="http://localhost:8091"
+                  onChange={onInputChange}
+                  value={source.metaUrl || ''}
+                />
+              </div>
+            : null}
          <div className="form-group col-xs-12">
            <label htmlFor="telegraf">Telegraf database</label>
-            <input type="text" name="telegraf" ref={(r) => this.sourceTelegraf = r} className="form-control" id="telegraf" onChange={onInputChange} value={source.telegraf || 'telegraf'}></input>
+            <input
+              type="text"
+              name="telegraf"
+              ref={r => this.sourceTelegraf = r}
+              className="form-control"
+              id="telegraf"
+              onChange={onInputChange}
+              value={source.telegraf || 'telegraf'}
+            />
          </div>
          <div className="form-group col-xs-12">
            <div className="form-control-static">
-              <input type="checkbox" id="defaultSourceCheckbox" defaultChecked={source.default} ref={(r) => this.sourceDefault = r} />
-              <label htmlFor="defaultSourceCheckbox">Make this the default source</label>
+              <input
+                type="checkbox"
+                id="defaultSourceCheckbox"
+                defaultChecked={source.default}
+                ref={r => this.sourceDefault = r}
+              />
+              <label htmlFor="defaultSourceCheckbox">
+                Make this the default source
+              </label>
            </div>
          </div>
-          {_.get(source, 'url', '').startsWith('https') ?
-            <div className="form-group col-xs-12">
-              <div className="form-control-static">
-                <input type="checkbox" id="insecureSkipVerifyCheckbox" defaultChecked={source.insecureSkipVerify} ref={(r) => this.sourceInsecureSkipVerify = r} />
-                <label htmlFor="insecureSkipVerifyCheckbox">Unsafe SSL</label>
+          {_.get(source, 'url', '').startsWith('https')
+            ? <div className="form-group col-xs-12">
+                <div className="form-control-static">
+                  <input
+                    type="checkbox"
+                    id="insecureSkipVerifyCheckbox"
+                    defaultChecked={source.insecureSkipVerify}
+                    ref={r => this.sourceInsecureSkipVerify = r}
+                  />
+                  <label htmlFor="insecureSkipVerifyCheckbox">Unsafe SSL</label>
+                </div>
+                <label className="form-helper">{insecureSkipVerifyText}</label>
              </div>
-              <label className="form-helper">{insecureSkipVerifyText}</label>
-            </div> : null}
+            : null}
          <div className="form-group form-group-submit col-xs-12 col-sm-6 col-sm-offset-3">
-            <button className={classNames('btn btn-block', {'btn-primary': editMode, 'btn-success': !editMode})} type="submit">{editMode ? 'Save Changes' : 'Add Source'}</button>
+            <button
+              className={classNames('btn btn-block', {
+                'btn-primary': editMode,
+                'btn-success': !editMode,
+              })}
+              type="submit"
+            >
+              {editMode ? 'Save Changes' : 'Add Source'}
+            </button>
          </div>
        </form>
      </div>