Merge pull request #2698 from influxdata/sources-nomenclature-fix

Improve Sources Nomenclature

CHANGELOG.md

@@ -3,6 +3,8 @@
 1. [#2409](https://github.com/influxdata/chronograf/pull/2409): Allow adding multiple event handlers to a rule
 1. [#2709](https://github.com/influxdata/chronograf/pull/2709): Add "send test alert" button to test kapacitor alert configurations"
 ### UI Improvements
+1. [#2698](https://github.com/influxdata/chronograf/pull/2698): Improve clarity of terminology surrounding InfluxDB & Kapacitor connections
+
 ### Bug Fixes
 1. [#2689](https://github.com/influxdata/chronograf/pull/2689): Allow insecure (self-signed) certificates for kapacitor and influxdb
 

ui/src/kapacitor/components/KapacitorForm.js

@@ -12,7 +12,9 @@ class KapacitorForm extends Component {
         <div className="page-header">
           <div className="page-header__container">
             <div className="page-header__left">
-              <h1 className="page-header__title">Configure Kapacitor</h1>
+              <h1 className="page-header__title">{`${exists
+                ? 'Configure'
+                : 'Add a New'} Kapacitor Connection`}</h1>
             </div>
           </div>
         </div>

ui/src/sources/components/InfluxTable.js

@@ -21,7 +21,7 @@ const kapacitorDropdown = (
           to={`/sources/${source.id}/kapacitors/new`}
           className="btn btn-xs btn-default"
         >
-          <span className="icon plus" /> Add Config
+          <span className="icon plus" /> Add Kapacitor Connection
         </Link>
       </Authorized>
     )
@@ -62,7 +62,7 @@ const kapacitorDropdown = (
         onChoose={setActiveKapacitor}
         addNew={{
           url: `/sources/${source.id}/kapacitors/new`,
-          text: 'Add Kapacitor',
+          text: 'Add Kapacitor Connection',
         }}
         actions={[
           {
@@ -105,16 +105,16 @@ const InfluxTable = ({
           <h2 className="panel-title">
             {isUsingAuth
               ? <span>
-                  InfluxDB Sources for <em>{me.currentOrganization.name}</em>
+                  Connections for <em>{me.currentOrganization.name}</em>
                 </span>
-              : <span>InfluxDB Sources</span>}
+              : <span>Connections</span>}
           </h2>
           <Authorized requiredRole={EDITOR_ROLE}>
             <Link
               to={`/sources/${source.id}/manage-sources/new`}
               className="btn btn-sm btn-primary"
             >
-              <span className="icon plus" /> Add Source
+              <span className="icon plus" /> Add Connection
             </Link>
           </Authorized>
         </div>
@@ -123,14 +123,14 @@ const InfluxTable = ({
             <thead>
               <tr>
                 <th className="source-table--connect-col" />
-                <th>Source Name & Host</th>
+                <th>InfluxDB Connection</th>
                 <th className="text-right" />
                 <th>
-                  Active Kapacitor{' '}
+                  Kapacitor Connection{' '}
                   <QuestionMarkTooltip
                     tipID="kapacitor-node-helper"
                     tipContent={
-                      '<p>Kapacitor Configurations are<br/>scoped per InfluxDB Source.<br/>Only one can be active at a time.</p>'
+                      '<p>Kapacitor Connections are<br/>scoped per InfluxDB Connection.<br/>Only one can be active at a time.</p>'
                     }
                   />
                 </th>
@@ -189,7 +189,7 @@ const InfluxTable = ({
                           href="#"
                           onClick={handleDeleteSource(s)}
                         >
-                          Delete Source
+                          Delete Connection
                         </a>
                       </Authorized>
                     </td>

ui/src/sources/components/SourceForm.js

@@ -23,13 +23,14 @@ const SourceForm = ({
       ? <div className="text-center">
           {me.role === SUPERADMIN_ROLE
             ? <h3>
-                <strong>{me.currentOrganization.name}</strong> has no sources
+                <strong>{me.currentOrganization.name}</strong> has no
+                connections
               </h3>
             : <h3>
-                <strong>{me.currentOrganization.name}</strong> has no sources
-                available to <em>{me.role}s</em>
+                <strong>{me.currentOrganization.name}</strong> has no
+                connections available to <em>{me.role}s</em>
               </h3>}
-          <h6>Add a Source below:</h6>
+          <h6>Add a Connection below:</h6>
         </div>
       : null}
 
@@ -112,13 +113,13 @@ const SourceForm = ({
         <div className="form-control-static">
           <input
             type="checkbox"
-            id="defaultSourceCheckbox"
+            id="defaultConnectionCheckbox"
             name="default"
             checked={source.default}
             onChange={onInputChange}
           />
-          <label htmlFor="defaultSourceCheckbox">
-            Make this the default source
+          <label htmlFor="defaultConnectionCheckbox">
+            Make this the default connection
           </label>
         </div>
       </div>
@@ -148,7 +149,7 @@ const SourceForm = ({
           type="submit"
         >
           <span className={`icon ${editMode ? 'checkmark' : 'plus'}`} />
-          {editMode ? 'Save Changes' : 'Add Source'}
+          {editMode ? 'Save Changes' : 'Add Connection'}
         </button>
 
         <br />

ui/src/sources/containers/SourcePage.js

@@ -131,7 +131,7 @@ class SourcePage extends Component {
       .catch(err => {
         // dont want to flash this until they submit
         const error = this._parseError(err)
-        console.error('Error on source creation: ', error)
+        console.error('Error creating InfluxDB connection: ', error)
       })
   }
 
@@ -142,10 +142,10 @@ class SourcePage extends Component {
       .then(({data: sourceFromServer}) => {
         this.props.addSourceAction(sourceFromServer)
         this._redirect(sourceFromServer)
-        notify('success', `New source ${source.name} added`)
+        notify('success', `InfluxDB ${source.name} available as a connection`)
       })
       .catch(error => {
-        this.handleError('Unable to create source', error)
+        this.handleError('Unable to create InfluxDB connection', error)
       })
   }
 
@@ -156,10 +156,10 @@ class SourcePage extends Component {
       .then(({data: sourceFromServer}) => {
         this.props.updateSourceAction(sourceFromServer)
         this._redirect(sourceFromServer)
-        notify('success', `Source ${source.name} updated`)
+        notify('success', `InfluxDB connection ${source.name} updated`)
       })
       .catch(error => {
-        this.handleError('Unable to update source', error)
+        this.handleError('Unable to update InfluxDB connection', error)
       })
   }
 
@@ -208,7 +208,9 @@ class SourcePage extends Component {
             <div className="page-header__col-md-8">
               <div className="page-header__left">
                 <h1 className="page-header__title">
-                  {editMode ? 'Edit Source' : 'Add a New Source'}
+                  {editMode
+                    ? 'Configure InfluxDB Connection'
+                    : 'Add a New InfluxDB Connection'}
                 </h1>
               </div>
               {isInitialSource