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

require url and name when adding a new source

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

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 {
+const {bool, func, shape} = PropTypes
-  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') ?
+          {_.get(source, 'type', '').includes('enterprise')
-              <div className="form-group col-xs-12">
+            ? <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>
+                <input
-              </div> : null}
+                  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} />
+              <input
-              <label htmlFor="defaultSourceCheckbox">Make this the default source</label>
+                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') ?
+          {_.get(source, 'url', '').startsWith('https')
-            <div className="form-group col-xs-12">
+            ? <div className="form-group col-xs-12">
-              <div className="form-control-static">
+                <div className="form-control-static">
-                <input type="checkbox" id="insecureSkipVerifyCheckbox" defaultChecked={source.insecureSkipVerify} ref={(r) => this.sourceInsecureSkipVerify = r} />
+                  <input
-                <label htmlFor="insecureSkipVerifyCheckbox">Unsafe SSL</label>
+                    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>
+            : null}
-            </div> : 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>