diff --git a/ui/src/App.js b/ui/src/App.js
index 43c609431a..f990ba6362 100644
--- a/ui/src/App.js
+++ b/ui/src/App.js
@@ -4,12 +4,13 @@ import PropTypes from 'prop-types'
 import SideNav from 'src/side_nav'
 import Notifications from 'shared/components/Notifications'
 
-const App = ({children}) =>
+const App = ({children}) => (
   <div className="chronograf-root">
     <Notifications />
     <SideNav />
     {children}
   </div>
+)
 
 const {node} = PropTypes
 
diff --git a/ui/src/admin/actions/chronograf.js b/ui/src/admin/actions/chronograf.js
index 4e155fe1f6..3f05b4e39d 100644
--- a/ui/src/admin/actions/chronograf.js
+++ b/ui/src/admin/actions/chronograf.js
@@ -168,9 +168,9 @@ export const createMappingAsync = (url, mapping) => async dispatch => {
     const {data} = await createMappingAJAX(url, mapping)
     dispatch(updateMapping(mappingWithTempId, data))
   } catch (error) {
-    const message = `${_.upperFirst(
-      _.toLower(error.data.message)
-    )}: Scheme: ${mapping.scheme} Provider: ${mapping.provider}`
+    const message = `${_.upperFirst(_.toLower(error.data.message))}: Scheme: ${
+      mapping.scheme
+    } Provider: ${mapping.provider}`
     dispatch(errorThrown(error, message))
     setTimeout(
       () => dispatch(removeMapping(mappingWithTempId)),
@@ -212,9 +212,9 @@ export const createUserAsync = (url, user) => async dispatch => {
     const {data} = await createUserAJAX(url, user)
     dispatch(syncUser(userWithTempID, data))
   } catch (error) {
-    const message = `${_.upperFirst(
-      _.toLower(error.data.message)
-    )}: ${user.scheme}::${user.provider}::${user.name}`
+    const message = `${_.upperFirst(_.toLower(error.data.message))}: ${
+      user.scheme
+    }::${user.provider}::${user.name}`
     dispatch(errorThrown(error, message))
     // undo optimistic update
     setTimeout(() => dispatch(removeUser(userWithTempID)), REVERT_STATE_DELAY)
@@ -277,9 +277,9 @@ export const createOrganizationAsync = (
     const {data} = await createOrganizationAJAX(url, organization)
     dispatch(syncOrganization(organization, data))
   } catch (error) {
-    const message = `${_.upperFirst(
-      _.toLower(error.data.message)
-    )}: ${organization.name}`
+    const message = `${_.upperFirst(_.toLower(error.data.message))}: ${
+      organization.name
+    }`
     dispatch(errorThrown(error, message))
     // undo optimistic update
     setTimeout(
diff --git a/ui/src/admin/components/AdminTabs.js b/ui/src/admin/components/AdminTabs.js
index 8087a1b559..1296be1b21 100644
--- a/ui/src/admin/components/AdminTabs.js
+++ b/ui/src/admin/components/AdminTabs.js
@@ -89,18 +89,12 @@ const AdminTabs = ({
   return (
     <Tabs className="row">
       <TabList customClass="col-md-2 admin-tabs">
-        {tabs.map((t, i) =>
-          <Tab key={tabs[i].type}>
-            {tabs[i].type}
-          </Tab>
-        )}
+        {tabs.map((t, i) => <Tab key={tabs[i].type}>{tabs[i].type}</Tab>)}
       </TabList>
       <TabPanels customClass="col-md-10 admin-tabs--content">
-        {tabs.map((t, i) =>
-          <TabPanel key={tabs[i].type}>
-            {t.component}
-          </TabPanel>
-        )}
+        {tabs.map((t, i) => (
+          <TabPanel key={tabs[i].type}>{t.component}</TabPanel>
+        ))}
       </TabPanels>
     </Tabs>
   )
diff --git a/ui/src/admin/components/DatabaseManager.js b/ui/src/admin/components/DatabaseManager.js
index f8e27b34bd..12ee089b79 100644
--- a/ui/src/admin/components/DatabaseManager.js
+++ b/ui/src/admin/components/DatabaseManager.js
@@ -41,7 +41,7 @@ const DatabaseManager = ({
         </button>
       </div>
       <div className="panel-body">
-        {databases.map(db =>
+        {databases.map(db => (
           <DatabaseTable
             key={db.links.self}
             database={db}
@@ -62,7 +62,7 @@ const DatabaseManager = ({
             onRemoveRetentionPolicy={onRemoveRetentionPolicy}
             onDeleteRetentionPolicy={onDeleteRetentionPolicy}
           />
-        )}
+        ))}
       </div>
     </div>
   )
diff --git a/ui/src/admin/components/DatabaseRow.js b/ui/src/admin/components/DatabaseRow.js
index 11943c7464..fc5761db24 100644
--- a/ui/src/admin/components/DatabaseRow.js
+++ b/ui/src/admin/components/DatabaseRow.js
@@ -148,19 +148,21 @@ class DatabaseRow extends Component {
       return (
         <tr>
           <td style={{width: `${DATABASE_TABLE.colRetentionPolicy}px`}}>
-            {isNew
-              ? <input
-                  className="form-control input-xs"
-                  type="text"
-                  defaultValue={name}
-                  placeholder="Name this RP"
-                  onKeyDown={this.handleKeyDown}
-                  ref={r => (this.name = r)}
-                  autoFocus={true}
-                  spellCheck={false}
-                  autoComplete={false}
-                />
-              : name}
+            {isNew ? (
+              <input
+                className="form-control input-xs"
+                type="text"
+                defaultValue={name}
+                placeholder="Name this RP"
+                onKeyDown={this.handleKeyDown}
+                ref={r => (this.name = r)}
+                autoFocus={true}
+                spellCheck={false}
+                autoComplete={false}
+              />
+            ) : (
+              name
+            )}
           </td>
           <td style={{width: `${DATABASE_TABLE.colDuration}px`}}>
             <input
@@ -176,22 +178,22 @@ class DatabaseRow extends Component {
               autoComplete={false}
             />
           </td>
-          {isRFDisplayed
-            ? <td style={{width: `${DATABASE_TABLE.colReplication}px`}}>
-                <input
-                  className="form-control input-xs"
-                  name="name"
-                  type="number"
-                  min="1"
-                  defaultValue={replication || 1}
-                  placeholder="# of Nodes"
-                  onKeyDown={this.handleKeyDown}
-                  ref={r => (this.replication = r)}
-                  spellCheck={false}
-                  autoComplete={false}
-                />
-              </td>
-            : null}
+          {isRFDisplayed ? (
+            <td style={{width: `${DATABASE_TABLE.colReplication}px`}}>
+              <input
+                className="form-control input-xs"
+                name="name"
+                type="number"
+                min="1"
+                defaultValue={replication || 1}
+                placeholder="# of Nodes"
+                onKeyDown={this.handleKeyDown}
+                ref={r => (this.replication = r)}
+                spellCheck={false}
+                autoComplete={false}
+              />
+            </td>
+          ) : null}
           <td
             className="text-right"
             style={{width: `${DATABASE_TABLE.colDelete}px`}}
@@ -210,9 +212,9 @@ class DatabaseRow extends Component {
       <tr>
         <td>
           {`${name} `}
-          {isDefault
-            ? <span className="default-source-label">default</span>
-            : null}
+          {isDefault ? (
+            <span className="default-source-label">default</span>
+          ) : null}
         </td>
         <td
           onClick={this.handleStartEdit}
@@ -220,31 +222,33 @@ class DatabaseRow extends Component {
         >
           {formattedDuration}
         </td>
-        {isRFDisplayed
-          ? <td
-              onClick={this.handleStartEdit}
-              style={{width: `${DATABASE_TABLE.colReplication}px`}}
-            >
-              {replication}
-            </td>
-          : null}
+        {isRFDisplayed ? (
+          <td
+            onClick={this.handleStartEdit}
+            style={{width: `${DATABASE_TABLE.colReplication}px`}}
+          >
+            {replication}
+          </td>
+        ) : null}
         <td
           className="text-right"
           style={{width: `${DATABASE_TABLE.colDelete}px`}}
         >
-          {isDeleting
-            ? <YesNoButtons
-                onConfirm={onDelete(database, retentionPolicy)}
-                onCancel={this.handleEndDelete}
-                buttonSize="btn-xs"
-              />
-            : <button
-                className="btn btn-danger btn-xs table--show-on-row-hover"
-                style={isDeletable ? {} : {visibility: 'hidden'}}
-                onClick={this.handleStartDelete}
-              >
-                {`Delete ${name}`}
-              </button>}
+          {isDeleting ? (
+            <YesNoButtons
+              onConfirm={onDelete(database, retentionPolicy)}
+              onCancel={this.handleEndDelete}
+              buttonSize="btn-xs"
+            />
+          ) : (
+            <button
+              className="btn btn-danger btn-xs table--show-on-row-hover"
+              style={isDeletable ? {} : {visibility: 'hidden'}}
+              onClick={this.handleStartDelete}
+            >
+              {`Delete ${name}`}
+            </button>
+          )}
         </td>
       </tr>
     )
diff --git a/ui/src/admin/components/DatabaseTable.js b/ui/src/admin/components/DatabaseTable.js
index 8e97bb5a1d..44d5ac7334 100644
--- a/ui/src/admin/components/DatabaseTable.js
+++ b/ui/src/admin/components/DatabaseTable.js
@@ -57,11 +57,11 @@ const DatabaseTable = ({
               <th style={{width: `${DATABASE_TABLE.colDuration}px`}}>
                 Duration
               </th>
-              {isRFDisplayed
-                ? <th style={{width: `${DATABASE_TABLE.colReplication}px`}}>
-                    Replication Factor
-                  </th>
-                : null}
+              {isRFDisplayed ? (
+                <th style={{width: `${DATABASE_TABLE.colReplication}px`}}>
+                  Replication Factor
+                </th>
+              ) : null}
               <th style={{width: `${DATABASE_TABLE.colDelete}px`}} />
             </tr>
           </thead>
diff --git a/ui/src/admin/components/DatabaseTableHeader.js b/ui/src/admin/components/DatabaseTableHeader.js
index 75da4b38d8..a18094f136 100644
--- a/ui/src/admin/components/DatabaseTableHeader.js
+++ b/ui/src/admin/components/DatabaseTableHeader.js
@@ -68,14 +68,14 @@ const Header = ({
       >
         <span className="icon plus" /> Add Retention Policy
       </button>
-      {database.name === '_internal'
-        ? null
-        : <button
-            className="btn btn-xs btn-danger"
-            onClick={onStartDelete(database)}
-          >
-            Delete
-          </button>}
+      {database.name === '_internal' ? null : (
+        <button
+          className="btn btn-xs btn-danger"
+          onClick={onStartDelete(database)}
+        >
+          Delete
+        </button>
+      )}
     </div>
   )
 
@@ -112,15 +112,13 @@ const Header = ({
 
   return (
     <div className="db-manager-header">
-      <h4>
-        {database.name}
-      </h4>
+      <h4>{database.name}</h4>
       {database.hasOwnProperty('deleteCode') ? deleteConfirmation : buttons}
     </div>
   )
 }
 
-const EditHeader = ({database, onEdit, onKeyDown, onConfirm, onCancel}) =>
+const EditHeader = ({database, onEdit, onKeyDown, onConfirm, onCancel}) => (
   <div className="db-manager-header db-manager-header--edit">
     <input
       className="form-control input-sm"
@@ -136,6 +134,7 @@ const EditHeader = ({database, onEdit, onKeyDown, onConfirm, onCancel}) =>
     />
     <ConfirmButtons item={database} onConfirm={onConfirm} onCancel={onCancel} />
   </div>
+)
 
 const {func, shape, bool} = PropTypes
 
diff --git a/ui/src/admin/components/EmptyRow.js b/ui/src/admin/components/EmptyRow.js
index b8ffe09d48..af21790388 100644
--- a/ui/src/admin/components/EmptyRow.js
+++ b/ui/src/admin/components/EmptyRow.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-const EmptyRow = ({tableName}) =>
+const EmptyRow = ({tableName}) => (
   <tr className="table-empty-state">
     <th colSpan="5">
       <p>
@@ -9,6 +9,7 @@ const EmptyRow = ({tableName}) =>
       </p>
     </th>
   </tr>
+)
 
 const {string} = PropTypes
 
diff --git a/ui/src/admin/components/QueriesTable.js b/ui/src/admin/components/QueriesTable.js
index 9410851411..637a8741c6 100644
--- a/ui/src/admin/components/QueriesTable.js
+++ b/ui/src/admin/components/QueriesTable.js
@@ -4,7 +4,7 @@ import PropTypes from 'prop-types'
 import QueryRow from 'src/admin/components/QueryRow'
 import {QUERIES_TABLE} from 'src/admin/constants/tableSizing'
 
-const QueriesTable = ({queries, onKillQuery}) =>
+const QueriesTable = ({queries, onKillQuery}) => (
   <div>
     <div className="panel panel-solid">
       <div className="panel-body">
@@ -20,14 +20,15 @@ const QueriesTable = ({queries, onKillQuery}) =>
             </tr>
           </thead>
           <tbody>
-            {queries.map(q =>
+            {queries.map(q => (
               <QueryRow key={q.id} query={q} onKill={onKillQuery} />
-            )}
+            ))}
           </tbody>
         </table>
       </div>
     </div>
   </div>
+)
 
 const {arrayOf, func, shape} = PropTypes
 
diff --git a/ui/src/admin/components/QueryRow.js b/ui/src/admin/components/QueryRow.js
index 2bb9154d9c..a2f4af12dc 100644
--- a/ui/src/admin/components/QueryRow.js
+++ b/ui/src/admin/components/QueryRow.js
@@ -37,9 +37,7 @@ class QueryRow extends Component {
           {database}
         </td>
         <td>
-          <code>
-            {query}
-          </code>
+          <code>{query}</code>
         </td>
         <td
           style={{width: `${QUERIES_TABLE.colRunning}px`}}
@@ -51,18 +49,20 @@ class QueryRow extends Component {
           style={{width: `${QUERIES_TABLE.colKillQuery}px`}}
           className="text-right"
         >
-          {this.state.confirmingKill
-            ? <ConfirmButtons
-                onConfirm={this.handleFinishHim}
-                onCancel={this.handleShowMercy}
-                buttonSize="btn-xs"
-              />
-            : <button
-                className="btn btn-xs btn-danger table--show-on-row-hover"
-                onClick={this.handleInitiateKill}
-              >
-                Kill
-              </button>}
+          {this.state.confirmingKill ? (
+            <ConfirmButtons
+              onConfirm={this.handleFinishHim}
+              onCancel={this.handleShowMercy}
+              buttonSize="btn-xs"
+            />
+          ) : (
+            <button
+              className="btn btn-xs btn-danger table--show-on-row-hover"
+              onClick={this.handleInitiateKill}
+            >
+              Kill
+            </button>
+          )}
         </td>
       </tr>
     )
diff --git a/ui/src/admin/components/RoleRow.js b/ui/src/admin/components/RoleRow.js
index 3a5197cfb3..94afb37db8 100644
--- a/ui/src/admin/components/RoleRow.js
+++ b/ui/src/admin/components/RoleRow.js
@@ -64,41 +64,36 @@ const RoleRow = ({
 
   return (
     <tr>
-      <td style={{width: `${ROLES_TABLE.colName}px`}}>
-        {roleName}
+      <td style={{width: `${ROLES_TABLE.colName}px`}}>{roleName}</td>
+      <td>
+        {allPermissions && allPermissions.length ? (
+          <MultiSelectDropdown
+            items={allPermissions.map(name => ({name}))}
+            selectedItems={perms.map(name => ({name}))}
+            label={perms.length ? '' : 'Select Permissions'}
+            onApply={handleUpdatePermissions}
+            buttonSize="btn-xs"
+            buttonColor="btn-primary"
+            customClass={classnames(`dropdown-${ROLES_TABLE.colPermissions}`, {
+              'admin-table--multi-select-empty': !permissions.length,
+            })}
+          />
+        ) : null}
       </td>
       <td>
-        {allPermissions && allPermissions.length
-          ? <MultiSelectDropdown
-              items={allPermissions.map(name => ({name}))}
-              selectedItems={perms.map(name => ({name}))}
-              label={perms.length ? '' : 'Select Permissions'}
-              onApply={handleUpdatePermissions}
-              buttonSize="btn-xs"
-              buttonColor="btn-primary"
-              customClass={classnames(
-                `dropdown-${ROLES_TABLE.colPermissions}`,
-                {
-                  'admin-table--multi-select-empty': !permissions.length,
-                }
-              )}
-            />
-          : null}
-      </td>
-      <td>
-        {allUsers && allUsers.length
-          ? <MultiSelectDropdown
-              items={allUsers}
-              selectedItems={users}
-              label={users.length ? '' : 'Select Users'}
-              onApply={handleUpdateUsers}
-              buttonSize="btn-xs"
-              buttonColor="btn-primary"
-              customClass={classnames(`dropdown-${ROLES_TABLE.colUsers}`, {
-                'admin-table--multi-select-empty': !users.length,
-              })}
-            />
-          : null}
+        {allUsers && allUsers.length ? (
+          <MultiSelectDropdown
+            items={allUsers}
+            selectedItems={users}
+            label={users.length ? '' : 'Select Users'}
+            onApply={handleUpdateUsers}
+            buttonSize="btn-xs"
+            buttonColor="btn-primary"
+            customClass={classnames(`dropdown-${ROLES_TABLE.colUsers}`, {
+              'admin-table--multi-select-empty': !users.length,
+            })}
+          />
+        ) : null}
       </td>
       <DeleteConfirmTableCell
         onDelete={onDelete}
diff --git a/ui/src/admin/components/RolesTable.js b/ui/src/admin/components/RolesTable.js
index 376fa5900f..83c8908489 100644
--- a/ui/src/admin/components/RolesTable.js
+++ b/ui/src/admin/components/RolesTable.js
@@ -17,7 +17,7 @@ const RolesTable = ({
   onFilter,
   onUpdateRoleUsers,
   onUpdateRolePermissions,
-}) =>
+}) => (
   <div className="panel panel-solid">
     <FilterBar
       type="roles"
@@ -36,30 +36,33 @@ const RolesTable = ({
           </tr>
         </thead>
         <tbody>
-          {roles.length
-            ? roles
-                .filter(r => !r.hidden)
-                .map(role =>
-                  <RoleRow
-                    key={role.links.self}
-                    allUsers={allUsers}
-                    allPermissions={permissions}
-                    role={role}
-                    onEdit={onEdit}
-                    onSave={onSave}
-                    onCancel={onCancel}
-                    onDelete={onDelete}
-                    onUpdateRoleUsers={onUpdateRoleUsers}
-                    onUpdateRolePermissions={onUpdateRolePermissions}
-                    isEditing={role.isEditing}
-                    isNew={role.isNew}
-                  />
-                )
-            : <EmptyRow tableName={'Roles'} />}
+          {roles.length ? (
+            roles
+              .filter(r => !r.hidden)
+              .map(role => (
+                <RoleRow
+                  key={role.links.self}
+                  allUsers={allUsers}
+                  allPermissions={permissions}
+                  role={role}
+                  onEdit={onEdit}
+                  onSave={onSave}
+                  onCancel={onCancel}
+                  onDelete={onDelete}
+                  onUpdateRoleUsers={onUpdateRoleUsers}
+                  onUpdateRolePermissions={onUpdateRolePermissions}
+                  isEditing={role.isEditing}
+                  isNew={role.isNew}
+                />
+              ))
+          ) : (
+            <EmptyRow tableName={'Roles'} />
+          )}
         </tbody>
       </table>
     </div>
   </div>
+)
 
 const {arrayOf, bool, func, shape, string} = PropTypes
 
diff --git a/ui/src/admin/components/UserNewPassword.js b/ui/src/admin/components/UserNewPassword.js
index f251ffea00..1375fccb04 100644
--- a/ui/src/admin/components/UserNewPassword.js
+++ b/ui/src/admin/components/UserNewPassword.js
@@ -22,19 +22,21 @@ class UserNewPassword extends Component {
     const {user, isNew} = this.props
     return (
       <td style={{width: `${USERS_TABLE.colPassword}px`}}>
-        {isNew
-          ? <input
-              className="form-control input-xs"
-              name="password"
-              type="password"
-              value={user.password || ''}
-              placeholder="Password"
-              onChange={this.handleEdit(user)}
-              onKeyPress={this.handleKeyPress(user)}
-              spellCheck={false}
-              autoComplete={false}
-            />
-          : '--'}
+        {isNew ? (
+          <input
+            className="form-control input-xs"
+            name="password"
+            type="password"
+            value={user.password || ''}
+            placeholder="Password"
+            onChange={this.handleEdit(user)}
+            onKeyPress={this.handleKeyPress(user)}
+            spellCheck={false}
+            autoComplete={false}
+          />
+        ) : (
+          '--'
+        )}
       </td>
     )
   }
diff --git a/ui/src/admin/components/UserRow.js b/ui/src/admin/components/UserRow.js
index b7cd76af53..d35b69280e 100644
--- a/ui/src/admin/components/UserRow.js
+++ b/ui/src/admin/components/UserRow.js
@@ -75,9 +75,7 @@ const UserRow = ({
 
   return (
     <tr>
-      <td style={{width: `${USERS_TABLE.colUsername}px`}}>
-        {name}
-      </td>
+      <td style={{width: `${USERS_TABLE.colUsername}px`}}>{name}</td>
       <td style={{width: `${USERS_TABLE.colPassword}px`}}>
         <ChangePassRow
           onEdit={onEdit}
@@ -86,40 +84,37 @@ const UserRow = ({
           buttonSize="btn-xs"
         />
       </td>
-      {hasRoles
-        ? <td>
-            <MultiSelectDropdown
-              items={allRoles}
-              selectedItems={roles.map(r => ({name: r.name}))}
-              label={roles.length ? '' : 'Select Roles'}
-              onApply={handleUpdateRoles}
-              buttonSize="btn-xs"
-              buttonColor="btn-primary"
-              customClass={classnames(`dropdown-${USERS_TABLE.colRoles}`, {
-                'admin-table--multi-select-empty': !roles.length,
-              })}
-            />
-          </td>
-        : null}
+      {hasRoles ? (
+        <td>
+          <MultiSelectDropdown
+            items={allRoles}
+            selectedItems={roles.map(r => ({name: r.name}))}
+            label={roles.length ? '' : 'Select Roles'}
+            onApply={handleUpdateRoles}
+            buttonSize="btn-xs"
+            buttonColor="btn-primary"
+            customClass={classnames(`dropdown-${USERS_TABLE.colRoles}`, {
+              'admin-table--multi-select-empty': !roles.length,
+            })}
+          />
+        </td>
+      ) : null}
       <td>
-        {allPermissions && allPermissions.length
-          ? <MultiSelectDropdown
-              items={allPermissions.map(p => ({name: p}))}
-              selectedItems={perms.map(p => ({name: p}))}
-              label={
-                permissions && permissions.length ? '' : 'Select Permissions'
-              }
-              onApply={handleUpdatePermissions}
-              buttonSize="btn-xs"
-              buttonColor="btn-primary"
-              customClass={classnames(
-                `dropdown-${USERS_TABLE.colPermissions}`,
-                {
-                  'admin-table--multi-select-empty': !permissions.length,
-                }
-              )}
-            />
-          : null}
+        {allPermissions && allPermissions.length ? (
+          <MultiSelectDropdown
+            items={allPermissions.map(p => ({name: p}))}
+            selectedItems={perms.map(p => ({name: p}))}
+            label={
+              permissions && permissions.length ? '' : 'Select Permissions'
+            }
+            onApply={handleUpdatePermissions}
+            buttonSize="btn-xs"
+            buttonColor="btn-primary"
+            customClass={classnames(`dropdown-${USERS_TABLE.colPermissions}`, {
+              'admin-table--multi-select-empty': !permissions.length,
+            })}
+          />
+        ) : null}
       </td>
       <DeleteConfirmTableCell
         onDelete={onDelete}
diff --git a/ui/src/admin/components/UsersTable.js b/ui/src/admin/components/UsersTable.js
index 99b747db61..5dbc0acc37 100644
--- a/ui/src/admin/components/UsersTable.js
+++ b/ui/src/admin/components/UsersTable.js
@@ -20,7 +20,7 @@ const UsersTable = ({
   onUpdatePermissions,
   onUpdateRoles,
   onUpdatePassword,
-}) =>
+}) => (
   <div className="panel panel-solid">
     <FilterBar
       type="users"
@@ -40,32 +40,35 @@ const UsersTable = ({
           </tr>
         </thead>
         <tbody>
-          {users.length
-            ? users
-                .filter(u => !u.hidden)
-                .map(user =>
-                  <UserRow
-                    key={user.links.self}
-                    user={user}
-                    onEdit={onEdit}
-                    onSave={onSave}
-                    onCancel={onCancel}
-                    onDelete={onDelete}
-                    isEditing={user.isEditing}
-                    isNew={user.isNew}
-                    allRoles={allRoles}
-                    hasRoles={hasRoles}
-                    allPermissions={permissions}
-                    onUpdatePermissions={onUpdatePermissions}
-                    onUpdateRoles={onUpdateRoles}
-                    onUpdatePassword={onUpdatePassword}
-                  />
-                )
-            : <EmptyRow tableName={'Users'} />}
+          {users.length ? (
+            users
+              .filter(u => !u.hidden)
+              .map(user => (
+                <UserRow
+                  key={user.links.self}
+                  user={user}
+                  onEdit={onEdit}
+                  onSave={onSave}
+                  onCancel={onCancel}
+                  onDelete={onDelete}
+                  isEditing={user.isEditing}
+                  isNew={user.isNew}
+                  allRoles={allRoles}
+                  hasRoles={hasRoles}
+                  allPermissions={permissions}
+                  onUpdatePermissions={onUpdatePermissions}
+                  onUpdateRoles={onUpdateRoles}
+                  onUpdatePassword={onUpdatePassword}
+                />
+              ))
+          ) : (
+            <EmptyRow tableName={'Users'} />
+          )}
         </tbody>
       </table>
     </div>
   </div>
+)
 
 const {arrayOf, bool, func, shape, string} = PropTypes
 
diff --git a/ui/src/admin/components/chronograf/AdminTabs.js b/ui/src/admin/components/chronograf/AdminTabs.js
index b40e46fa7a..48ac81fd83 100644
--- a/ui/src/admin/components/chronograf/AdminTabs.js
+++ b/ui/src/admin/components/chronograf/AdminTabs.js
@@ -51,18 +51,12 @@ const AdminTabs = ({
   return (
     <Tabs className="row">
       <TabList customClass="col-md-2 admin-tabs">
-        {tabs.map((t, i) =>
-          <Tab key={tabs[i].type}>
-            {tabs[i].type}
-          </Tab>
-        )}
+        {tabs.map((t, i) => <Tab key={tabs[i].type}>{tabs[i].type}</Tab>)}
       </TabList>
       <TabPanels customClass="col-md-10 admin-tabs--content">
-        {tabs.map((t, i) =>
-          <TabPanel key={tabs[i].type}>
-            {t.component}
-          </TabPanel>
-        )}
+        {tabs.map((t, i) => (
+          <TabPanel key={tabs[i].type}>{t.component}</TabPanel>
+        ))}
       </TabPanels>
     </Tabs>
   )
diff --git a/ui/src/admin/components/chronograf/AllUsersTable.js b/ui/src/admin/components/chronograf/AllUsersTable.js
index 9ae1c259a6..974f3f94b1 100644
--- a/ui/src/admin/components/chronograf/AllUsersTable.js
+++ b/ui/src/admin/components/chronograf/AllUsersTable.js
@@ -133,33 +133,33 @@ class AllUsersTable extends Component {
               </tr>
             </thead>
             <tbody>
-              {users.length
-                ? users.map(user =>
-                    <AllUsersTableRow
-                      user={user}
-                      key={uuid.v4()}
-                      organizations={organizations}
-                      onAddToOrganization={this.handleAddToOrganization}
-                      onRemoveFromOrganization={
-                        this.handleRemoveFromOrganization
-                      }
-                      onChangeSuperAdmin={this.handleChangeSuperAdmin}
-                      onDelete={onDeleteUser}
-                      meID={meID}
-                    />
-                  )
-                : <tr className="table-empty-state">
-                    <th colSpan="6">
-                      <p>No Users to display</p>
-                    </th>
-                  </tr>}
-              {isCreatingUser
-                ? <AllUsersTableRowNew
+              {users.length ? (
+                users.map(user => (
+                  <AllUsersTableRow
+                    user={user}
+                    key={uuid.v4()}
                     organizations={organizations}
-                    onBlur={this.handleBlurCreateUserRow}
-                    onCreateUser={onCreateUser}
+                    onAddToOrganization={this.handleAddToOrganization}
+                    onRemoveFromOrganization={this.handleRemoveFromOrganization}
+                    onChangeSuperAdmin={this.handleChangeSuperAdmin}
+                    onDelete={onDeleteUser}
+                    meID={meID}
                   />
-                : null}
+                ))
+              ) : (
+                <tr className="table-empty-state">
+                  <th colSpan="6">
+                    <p>No Users to display</p>
+                  </th>
+                </tr>
+              )}
+              {isCreatingUser ? (
+                <AllUsersTableRowNew
+                  organizations={organizations}
+                  onBlur={this.handleBlurCreateUserRow}
+                  onCreateUser={onCreateUser}
+                />
+              ) : null}
             </tbody>
           </table>
         </div>
diff --git a/ui/src/admin/components/chronograf/AllUsersTableHeader.js b/ui/src/admin/components/chronograf/AllUsersTableHeader.js
index b1ef0d0eca..e76927d62b 100644
--- a/ui/src/admin/components/chronograf/AllUsersTableHeader.js
+++ b/ui/src/admin/components/chronograf/AllUsersTableHeader.js
@@ -12,10 +12,9 @@ const AllUsersTableHeader = ({
   onChangeAuthConfig,
 }) => {
   const numUsersString = `${numUsers} User${numUsers === 1 ? '' : 's'}`
-  const numOrganizationsString = `${numOrganizations} Org${numOrganizations ===
-  1
-    ? ''
-    : 's'}`
+  const numOrganizationsString = `${numOrganizations} Org${
+    numOrganizations === 1 ? '' : 's'
+  }`
 
   return (
     <div className="panel-heading">
diff --git a/ui/src/admin/components/chronograf/AllUsersTableRow.js b/ui/src/admin/components/chronograf/AllUsersTableRow.js
index 757e0a243b..c42203686f 100644
--- a/ui/src/admin/components/chronograf/AllUsersTableRow.js
+++ b/ui/src/admin/components/chronograf/AllUsersTableRow.js
@@ -47,14 +47,14 @@ const AllUsersTableRow = ({
   return (
     <tr className={'chronograf-admin-table--user'}>
       <td>
-        {userIsMe
-          ? <strong className="chronograf-user--me">
-              <span className="icon user" />
-              {user.name}
-            </strong>
-          : <strong>
-              {user.name}
-            </strong>}
+        {userIsMe ? (
+          <strong className="chronograf-user--me">
+            <span className="icon user" />
+            {user.name}
+          </strong>
+        ) : (
+          <strong>{user.name}</strong>
+        )}
       </td>
       <td style={{width: colOrganizations}}>
         <Tags
@@ -65,12 +65,8 @@ const AllUsersTableRow = ({
           addMenuChoose={onAddToOrganization(user)}
         />
       </td>
-      <td style={{width: colProvider}}>
-        {user.provider}
-      </td>
-      <td style={{width: colScheme}}>
-        {user.scheme}
-      </td>
+      <td style={{width: colProvider}}>{user.provider}</td>
+      <td style={{width: colScheme}}>{user.scheme}</td>
       <td style={{width: colSuperAdmin}} className="text-center">
         <SlideToggle
           active={user.superAdmin}
diff --git a/ui/src/admin/components/chronograf/OrganizationsTable.js b/ui/src/admin/components/chronograf/OrganizationsTable.js
index 87f63aa1f5..65c7a30b52 100644
--- a/ui/src/admin/components/chronograf/OrganizationsTable.js
+++ b/ui/src/admin/components/chronograf/OrganizationsTable.js
@@ -39,10 +39,9 @@ class OrganizationsTable extends Component {
     } = this.props
     const {isCreatingOrganization} = this.state
 
-    const tableTitle = `${organizations.length} Organization${organizations.length ===
-    1
-      ? ''
-      : 's'}`
+    const tableTitle = `${organizations.length} Organization${
+      organizations.length === 1 ? '' : 's'
+    }`
 
     if (!organizations.length) {
       return (
@@ -56,9 +55,7 @@ class OrganizationsTable extends Component {
     return (
       <div className="panel panel-solid">
         <div className="panel-heading">
-          <h2 className="panel-title">
-            {tableTitle}
-          </h2>
+          <h2 className="panel-title">{tableTitle}</h2>
           <button
             className="btn btn-sm btn-primary"
             onClick={this.handleClickCreateOrganization}
@@ -76,13 +73,13 @@ class OrganizationsTable extends Component {
             </div>
             <div className="fancytable--th orgs-table--delete" />
           </div>
-          {isCreatingOrganization
-            ? <OrganizationsTableRowNew
-                onCreateOrganization={this.handleCreateOrganization}
-                onCancelCreateOrganization={this.handleCancelCreateOrganization}
-              />
-            : null}
-          {organizations.map(org =>
+          {isCreatingOrganization ? (
+            <OrganizationsTableRowNew
+              onCreateOrganization={this.handleCreateOrganization}
+              onCancelCreateOrganization={this.handleCancelCreateOrganization}
+            />
+          ) : null}
+          {organizations.map(org => (
             <OrganizationsTableRow
               key={uuid.v4()}
               organization={org}
@@ -91,7 +88,7 @@ class OrganizationsTable extends Component {
               onChooseDefaultRole={onChooseDefaultRole}
               currentOrganization={currentOrganization}
             />
-          )}
+          ))}
         </div>
       </div>
     )
diff --git a/ui/src/admin/components/chronograf/OrganizationsTableRow.js b/ui/src/admin/components/chronograf/OrganizationsTableRow.js
index 720c2fdaf0..ccd82859f2 100644
--- a/ui/src/admin/components/chronograf/OrganizationsTableRow.js
+++ b/ui/src/admin/components/chronograf/OrganizationsTableRow.js
@@ -14,19 +14,21 @@ import {DEFAULT_ORG_ID} from 'src/admin/constants/chronografAdmin'
 import {USER_ROLES} from 'src/admin/constants/chronografAdmin'
 
 const OrganizationsTableRowDeleteButton = ({organization, onClickDelete}) =>
-  organization.id === DEFAULT_ORG_ID
-    ? <button
-        className="btn btn-sm btn-default btn-square orgs-table--delete"
-        disabled={true}
-      >
-        <span className="icon trash" />
-      </button>
-    : <button
-        className="btn btn-sm btn-default btn-square"
-        onClick={onClickDelete}
-      >
-        <span className="icon trash" />
-      </button>
+  organization.id === DEFAULT_ORG_ID ? (
+    <button
+      className="btn btn-sm btn-default btn-square orgs-table--delete"
+      disabled={true}
+    >
+      <span className="icon trash" />
+    </button>
+  ) : (
+    <button
+      className="btn btn-sm btn-default btn-square"
+      onClick={onClickDelete}
+    >
+      <span className="icon trash" />
+    </button>
+  )
 
 class OrganizationsTableRow extends Component {
   constructor(props) {
@@ -81,16 +83,18 @@ class OrganizationsTableRow extends Component {
     return (
       <div className="fancytable--row">
         <div className="fancytable--td orgs-table--active">
-          {organization.id === currentOrganization.id
-            ? <button className="btn btn-sm btn-success">
-                <span className="icon checkmark" /> Current
-              </button>
-            : <button
-                className="btn btn-sm btn-default"
-                onClick={this.handleChangeCurrentOrganization}
-              >
-                <span className="icon shuffle" /> Switch to
-              </button>}
+          {organization.id === currentOrganization.id ? (
+            <button className="btn btn-sm btn-success">
+              <span className="icon checkmark" /> Current
+            </button>
+          ) : (
+            <button
+              className="btn btn-sm btn-default"
+              onClick={this.handleChangeCurrentOrganization}
+            >
+              <span className="icon shuffle" /> Switch to
+            </button>
+          )}
         </div>
         <InputClickToEdit
           value={organization.name}
@@ -105,19 +109,21 @@ class OrganizationsTableRow extends Component {
             className="dropdown-stretch"
           />
         </div>
-        {isDeleting
-          ? <ConfirmButtons
-              item={organization}
-              onCancel={this.handleDismissDeleteConfirmation}
-              onConfirm={this.handleDeleteOrg}
-              onClickOutside={this.handleDismissDeleteConfirmation}
-              confirmLeft={true}
-              confirmTitle="Delete"
-            />
-          : <OrganizationsTableRowDeleteButton
-              organization={organization}
-              onClickDelete={this.handleDeleteClick}
-            />}
+        {isDeleting ? (
+          <ConfirmButtons
+            item={organization}
+            onCancel={this.handleDismissDeleteConfirmation}
+            onConfirm={this.handleDeleteOrg}
+            onClickOutside={this.handleDismissDeleteConfirmation}
+            confirmLeft={true}
+            confirmTitle="Delete"
+          />
+        ) : (
+          <OrganizationsTableRowDeleteButton
+            organization={organization}
+            onClickDelete={this.handleDeleteClick}
+          />
+        )}
       </div>
     )
   }
diff --git a/ui/src/admin/components/chronograf/ProvidersTable.js b/ui/src/admin/components/chronograf/ProvidersTable.js
index b7a4eec3c2..f44ea8c79b 100644
--- a/ui/src/admin/components/chronograf/ProvidersTable.js
+++ b/ui/src/admin/components/chronograf/ProvidersTable.js
@@ -55,9 +55,7 @@ class ProvidersTable extends Component {
     return (
       <div className="panel panel-solid">
         <div className="panel-heading">
-          <h2 className="panel-title">
-            {tableTitle}
-          </h2>
+          <h2 className="panel-title">{tableTitle}</h2>
           <button
             className="btn btn-sm btn-primary"
             onClick={this.handleClickCreateMap}
@@ -66,58 +64,58 @@ class ProvidersTable extends Component {
             <span className="icon plus" /> Create Mapping
           </button>
         </div>
-        {mappings.length || isCreatingMap
-          ? <div className="panel-body">
-              <div className="fancytable--labels">
-                <div className="fancytable--th provider--scheme">Scheme</div>
-                <div className="fancytable--th provider--provider">
-                  Provider
-                </div>
-                <div className="fancytable--th provider--providerorg">
-                  Provider Org
-                </div>
-                <div className="fancytable--th provider--arrow" />
-                <div className="fancytable--th provider--redirect">
-                  Organization
-                </div>
-                <div className="fancytable--th provider--delete" />
+        {mappings.length || isCreatingMap ? (
+          <div className="panel-body">
+            <div className="fancytable--labels">
+              <div className="fancytable--th provider--scheme">Scheme</div>
+              <div className="fancytable--th provider--provider">Provider</div>
+              <div className="fancytable--th provider--providerorg">
+                Provider Org
               </div>
-              {mappings.map((mapping, i) =>
-                <ProvidersTableRow
-                  key={uuid.v4()}
-                  mapping={mapping}
-                  organizations={organizations}
-                  schemes={SCHEMES}
-                  onDelete={onDeleteMap}
-                  onUpdate={onUpdateMap}
-                  rowIndex={i + 1}
-                />
-              )}
-              {isCreatingMap
-                ? <ProvidersTableRowNew
-                    organizations={organizations}
-                    schemes={SCHEMES}
-                    onCreate={this.handleCreateMap}
-                    onCancel={this.handleCancelCreateMap}
-                    rowIndex={mappings.length + 1}
-                  />
-                : null}
+              <div className="fancytable--th provider--arrow" />
+              <div className="fancytable--th provider--redirect">
+                Organization
+              </div>
+              <div className="fancytable--th provider--delete" />
             </div>
-          : <div className="panel-body">
-              <div className="generic-empty-state">
-                <h4 style={{margin: '50px 0'}}>
-                  Looks like you have no mappings<br />
-                  New users will not be able to sign up automatically
-                </h4>
-                <button
-                  className="btn btn-sm btn-primary"
-                  onClick={this.handleClickCreateMap}
-                  disabled={isCreatingMap}
-                >
-                  <span className="icon plus" /> Create Mapping
-                </button>
-              </div>
-            </div>}
+            {mappings.map((mapping, i) => (
+              <ProvidersTableRow
+                key={uuid.v4()}
+                mapping={mapping}
+                organizations={organizations}
+                schemes={SCHEMES}
+                onDelete={onDeleteMap}
+                onUpdate={onUpdateMap}
+                rowIndex={i + 1}
+              />
+            ))}
+            {isCreatingMap ? (
+              <ProvidersTableRowNew
+                organizations={organizations}
+                schemes={SCHEMES}
+                onCreate={this.handleCreateMap}
+                onCancel={this.handleCancelCreateMap}
+                rowIndex={mappings.length + 1}
+              />
+            ) : null}
+          </div>
+        ) : (
+          <div className="panel-body">
+            <div className="generic-empty-state">
+              <h4 style={{margin: '50px 0'}}>
+                Looks like you have no mappings<br />
+                New users will not be able to sign up automatically
+              </h4>
+              <button
+                className="btn btn-sm btn-primary"
+                onClick={this.handleClickCreateMap}
+                disabled={isCreatingMap}
+              >
+                <span className="icon plus" /> Create Mapping
+              </button>
+            </div>
+          </div>
+        )}
       </div>
     )
   }
diff --git a/ui/src/admin/components/chronograf/ProvidersTableRow.js b/ui/src/admin/components/chronograf/ProvidersTableRow.js
index 8667bc14c7..b550812c30 100644
--- a/ui/src/admin/components/chronograf/ProvidersTableRow.js
+++ b/ui/src/admin/components/chronograf/ProvidersTableRow.js
@@ -106,20 +106,22 @@ class ProvidersTableRow extends Component {
             disabled={isDefaultMapping}
           />
         </div>
-        {isDeleting
-          ? <ConfirmButtons
-              item={mapping}
-              onCancel={this.handleDismissDeleteConfirmation}
-              onConfirm={this.handleDeleteMap}
-              onClickOutside={this.handleDismissDeleteConfirmation}
-              confirmTitle="Delete"
-            />
-          : <button
-              className="btn btn-sm btn-default btn-square"
-              onClick={this.handleDeleteClick}
-            >
-              <span className="icon trash" />
-            </button>}
+        {isDeleting ? (
+          <ConfirmButtons
+            item={mapping}
+            onCancel={this.handleDismissDeleteConfirmation}
+            onConfirm={this.handleDeleteMap}
+            onClickOutside={this.handleDismissDeleteConfirmation}
+            confirmTitle="Delete"
+          />
+        ) : (
+          <button
+            className="btn btn-sm btn-default btn-square"
+            onClick={this.handleDeleteClick}
+          >
+            <span className="icon trash" />
+          </button>
+        )}
       </div>
     )
   }
diff --git a/ui/src/admin/components/chronograf/UsersTable.js b/ui/src/admin/components/chronograf/UsersTable.js
index cea56a139e..6fb3a0893d 100644
--- a/ui/src/admin/components/chronograf/UsersTable.js
+++ b/ui/src/admin/components/chronograf/UsersTable.js
@@ -71,29 +71,31 @@ class UsersTable extends Component {
               </tr>
             </thead>
             <tbody>
-              {isCreatingUser
-                ? <UsersTableRowNew
+              {isCreatingUser ? (
+                <UsersTableRowNew
+                  organization={organization}
+                  onBlur={this.handleBlurCreateUserRow}
+                  onCreateUser={onCreateUser}
+                />
+              ) : null}
+              {users.length ? (
+                users.map(user => (
+                  <UsersTableRow
+                    user={user}
+                    key={uuid.v4()}
                     organization={organization}
-                    onBlur={this.handleBlurCreateUserRow}
-                    onCreateUser={onCreateUser}
+                    onChangeUserRole={this.handleChangeUserRole}
+                    onDelete={this.handleDeleteUser}
+                    meID={meID}
                   />
-                : null}
-              {users.length
-                ? users.map(user =>
-                    <UsersTableRow
-                      user={user}
-                      key={uuid.v4()}
-                      organization={organization}
-                      onChangeUserRole={this.handleChangeUserRole}
-                      onDelete={this.handleDeleteUser}
-                      meID={meID}
-                    />
-                  )
-                : <tr className="table-empty-state">
-                    <th colSpan="5">
-                      <p>No Users to display</p>
-                    </th>
-                  </tr>}
+                ))
+              ) : (
+                <tr className="table-empty-state">
+                  <th colSpan="5">
+                    <p>No Users to display</p>
+                  </th>
+                </tr>
+              )}
             </tbody>
           </table>
         </div>
diff --git a/ui/src/admin/components/chronograf/UsersTableRow.js b/ui/src/admin/components/chronograf/UsersTableRow.js
index dbf6aebfef..5edc1cbbe2 100644
--- a/ui/src/admin/components/chronograf/UsersTableRow.js
+++ b/ui/src/admin/components/chronograf/UsersTableRow.js
@@ -29,14 +29,14 @@ const UsersTableRow = ({
   return (
     <tr className={'chronograf-admin-table--user'}>
       <td>
-        {userIsMe
-          ? <strong className="chronograf-user--me">
-              <span className="icon user" />
-              {user.name}
-            </strong>
-          : <strong>
-              {user.name}
-            </strong>}
+        {userIsMe ? (
+          <strong className="chronograf-user--me">
+            <span className="icon user" />
+            {user.name}
+          </strong>
+        ) : (
+          <strong>{user.name}</strong>
+        )}
       </td>
       <td style={{width: colRole}}>
         <span className="chronograf-user--role">
@@ -50,12 +50,8 @@ const UsersTableRow = ({
           />
         </span>
       </td>
-      <td style={{width: colProvider}}>
-        {user.provider}
-      </td>
-      <td style={{width: colScheme}}>
-        {user.scheme}
-      </td>
+      <td style={{width: colProvider}}>{user.provider}</td>
+      <td style={{width: colScheme}}>{user.scheme}</td>
       <DeleteConfirmTableCell
         text="Remove"
         onDelete={onDelete}
diff --git a/ui/src/admin/containers/AdminInfluxDBPage.js b/ui/src/admin/containers/AdminInfluxDBPage.js
index 76fe7d6a68..fb83186635 100644
--- a/ui/src/admin/containers/AdminInfluxDBPage.js
+++ b/ui/src/admin/containers/AdminInfluxDBPage.js
@@ -165,37 +165,39 @@ class AdminInfluxDBPage extends Component {
           </div>
         </div>
         <FancyScrollbar className="page-contents">
-          {users
-            ? <div className="container-fluid">
-                <div className="row">
-                  <AdminTabs
-                    users={users}
-                    roles={roles}
-                    source={source}
-                    hasRoles={hasRoles}
-                    permissions={allowed}
-                    onFilterUsers={filterUsers}
-                    onFilterRoles={filterRoles}
-                    onEditUser={this.handleEditUser}
-                    onEditRole={this.handleEditRole}
-                    onSaveUser={this.handleSaveUser}
-                    onSaveRole={this.handleSaveRole}
-                    onDeleteUser={this.handleDeleteUser}
-                    onDeleteRole={this.handleDeleteRole}
-                    onClickCreate={this.handleClickCreate}
-                    onCancelEditUser={this.handleCancelEditUser}
-                    onCancelEditRole={this.handleCancelEditRole}
-                    isEditingUsers={users.some(u => u.isEditing)}
-                    isEditingRoles={roles.some(r => r.isEditing)}
-                    onUpdateRoleUsers={this.handleUpdateRoleUsers}
-                    onUpdateUserRoles={this.handleUpdateUserRoles}
-                    onUpdateUserPassword={this.handleUpdateUserPassword}
-                    onUpdateRolePermissions={this.handleUpdateRolePermissions}
-                    onUpdateUserPermissions={this.handleUpdateUserPermissions}
-                  />
-                </div>
+          {users ? (
+            <div className="container-fluid">
+              <div className="row">
+                <AdminTabs
+                  users={users}
+                  roles={roles}
+                  source={source}
+                  hasRoles={hasRoles}
+                  permissions={allowed}
+                  onFilterUsers={filterUsers}
+                  onFilterRoles={filterRoles}
+                  onEditUser={this.handleEditUser}
+                  onEditRole={this.handleEditRole}
+                  onSaveUser={this.handleSaveUser}
+                  onSaveRole={this.handleSaveRole}
+                  onDeleteUser={this.handleDeleteUser}
+                  onDeleteRole={this.handleDeleteRole}
+                  onClickCreate={this.handleClickCreate}
+                  onCancelEditUser={this.handleCancelEditUser}
+                  onCancelEditRole={this.handleCancelEditRole}
+                  isEditingUsers={users.some(u => u.isEditing)}
+                  isEditingRoles={roles.some(r => r.isEditing)}
+                  onUpdateRoleUsers={this.handleUpdateRoleUsers}
+                  onUpdateUserRoles={this.handleUpdateUserRoles}
+                  onUpdateUserPassword={this.handleUpdateUserPassword}
+                  onUpdateRolePermissions={this.handleUpdateRolePermissions}
+                  onUpdateUserPermissions={this.handleUpdateUserPermissions}
+                />
               </div>
-            : <div className="page-spinner" />}
+            </div>
+          ) : (
+            <div className="page-spinner" />
+          )}
         </FancyScrollbar>
       </div>
     )
diff --git a/ui/src/admin/containers/chronograf/AdminChronografPage.js b/ui/src/admin/containers/chronograf/AdminChronografPage.js
index 7db66e2a2b..2815bd1fa4 100644
--- a/ui/src/admin/containers/chronograf/AdminChronografPage.js
+++ b/ui/src/admin/containers/chronograf/AdminChronografPage.js
@@ -5,7 +5,7 @@ import {connect} from 'react-redux'
 import AdminTabs from 'src/admin/components/chronograf/AdminTabs'
 import FancyScrollbar from 'shared/components/FancyScrollbar'
 
-const AdminChronografPage = ({me}) =>
+const AdminChronografPage = ({me}) => (
   <div className="page">
     <div className="page-header">
       <div className="page-header__container">
@@ -22,6 +22,7 @@ const AdminChronografPage = ({me}) =>
       </div>
     </FancyScrollbar>
   </div>
+)
 
 const {shape, string} = PropTypes
 
diff --git a/ui/src/alerts/apis/index.js b/ui/src/alerts/apis/index.js
index 1d4d8c29b7..4c41ce09e0 100644
--- a/ui/src/alerts/apis/index.js
+++ b/ui/src/alerts/apis/index.js
@@ -3,8 +3,10 @@ import {proxy} from 'utils/queryUrlGenerator'
 export const getAlerts = (source, timeRange, limit) =>
   proxy({
     source,
-    query: `SELECT host, value, level, alertName FROM alerts WHERE time >= '${timeRange.lower}' AND time <= '${timeRange.upper}' ORDER BY time desc ${limit
-      ? `LIMIT ${limit}`
-      : ''}`,
+    query: `SELECT host, value, level, alertName FROM alerts WHERE time >= '${
+      timeRange.lower
+    }' AND time <= '${timeRange.upper}' ORDER BY time desc ${
+      limit ? `LIMIT ${limit}` : ''
+    }`,
     db: 'chronograf',
   })
diff --git a/ui/src/alerts/components/AlertsTable.js b/ui/src/alerts/components/AlertsTable.js
index 1e52e39154..f8fbc1f443 100644
--- a/ui/src/alerts/components/AlertsTable.js
+++ b/ui/src/alerts/components/AlertsTable.js
@@ -79,121 +79,125 @@ class AlertsTable extends Component {
       this.state.sortDirection
     )
     const {colName, colLevel, colTime, colHost, colValue} = ALERTS_TABLE
-    return this.props.alerts.length
-      ? <div className="alert-history-table">
-          <div className="alert-history-table--thead">
-            <div
-              onClick={this.changeSort('name')}
-              className={this.sortableClasses('name')}
-              style={{width: colName}}
-            >
-              Name
-            </div>
-            <div
-              onClick={this.changeSort('level')}
-              className={this.sortableClasses('level')}
-              style={{width: colLevel}}
-            >
-              Level
-            </div>
-            <div
-              onClick={this.changeSort('time')}
-              className={this.sortableClasses('time')}
-              style={{width: colTime}}
-            >
-              Time
-            </div>
-            <div
-              onClick={this.changeSort('host')}
-              className={this.sortableClasses('host')}
-              style={{width: colHost}}
-            >
-              Host
-            </div>
-            <div
-              onClick={this.changeSort('value')}
-              className={this.sortableClasses('value')}
-              style={{width: colValue}}
-            >
-              Value
-            </div>
+    return this.props.alerts.length ? (
+      <div className="alert-history-table">
+        <div className="alert-history-table--thead">
+          <div
+            onClick={this.changeSort('name')}
+            className={this.sortableClasses('name')}
+            style={{width: colName}}
+          >
+            Name
+          </div>
+          <div
+            onClick={this.changeSort('level')}
+            className={this.sortableClasses('level')}
+            style={{width: colLevel}}
+          >
+            Level
+          </div>
+          <div
+            onClick={this.changeSort('time')}
+            className={this.sortableClasses('time')}
+            style={{width: colTime}}
+          >
+            Time
+          </div>
+          <div
+            onClick={this.changeSort('host')}
+            className={this.sortableClasses('host')}
+            style={{width: colHost}}
+          >
+            Host
+          </div>
+          <div
+            onClick={this.changeSort('value')}
+            className={this.sortableClasses('value')}
+            style={{width: colValue}}
+          >
+            Value
           </div>
-          <InfiniteScroll
-            className="alert-history-table--tbody"
-            itemHeight={25}
-            items={alerts.map(({name, level, time, host, value}) => {
-              return (
-                <div className="alert-history-table--tr" key={uuid.v4()}>
-                  <div
-                    className="alert-history-table--td"
-                    style={{width: colName}}
-                  >
-                    {name}
-                  </div>
-                  <div
-                    className={`alert-history-table--td alert-level-${level.toLowerCase()}`}
-                    style={{width: colLevel}}
-                  >
-                    <span
-                      className={classnames(
-                        'table-dot',
-                        {'dot-critical': level === 'CRITICAL'},
-                        {'dot-success': level === 'OK'}
-                      )}
-                    />
-                  </div>
-                  <div
-                    className="alert-history-table--td"
-                    style={{width: colTime}}
-                  >
-                    {new Date(Number(time)).toISOString()}
-                  </div>
-                  <div
-                    className="alert-history-table--td alert-history-table--host"
-                    style={{width: colHost}}
-                  >
-                    <Link to={`/sources/${id}/hosts/${host}`} title={host}>
-                      {host}
-                    </Link>
-                  </div>
-                  <div
-                    className="alert-history-table--td"
-                    style={{width: colValue}}
-                  >
-                    {value}
-                  </div>
-                </div>
-              )
-            })}
-          />
         </div>
-      : this.renderTableEmpty()
+        <InfiniteScroll
+          className="alert-history-table--tbody"
+          itemHeight={25}
+          items={alerts.map(({name, level, time, host, value}) => {
+            return (
+              <div className="alert-history-table--tr" key={uuid.v4()}>
+                <div
+                  className="alert-history-table--td"
+                  style={{width: colName}}
+                >
+                  {name}
+                </div>
+                <div
+                  className={`alert-history-table--td alert-level-${level.toLowerCase()}`}
+                  style={{width: colLevel}}
+                >
+                  <span
+                    className={classnames(
+                      'table-dot',
+                      {'dot-critical': level === 'CRITICAL'},
+                      {'dot-success': level === 'OK'}
+                    )}
+                  />
+                </div>
+                <div
+                  className="alert-history-table--td"
+                  style={{width: colTime}}
+                >
+                  {new Date(Number(time)).toISOString()}
+                </div>
+                <div
+                  className="alert-history-table--td alert-history-table--host"
+                  style={{width: colHost}}
+                >
+                  <Link to={`/sources/${id}/hosts/${host}`} title={host}>
+                    {host}
+                  </Link>
+                </div>
+                <div
+                  className="alert-history-table--td"
+                  style={{width: colValue}}
+                >
+                  {value}
+                </div>
+              </div>
+            )
+          })}
+        />
+      </div>
+    ) : (
+      this.renderTableEmpty()
+    )
   }
 
   renderTableEmpty() {
     const {source: {id}, shouldNotBeFilterable} = this.props
 
-    return shouldNotBeFilterable
-      ? <div className="graph-empty">
-          <p>
-            Learn how to configure your first <strong>Rule</strong> in<br />
-            the <em>Getting Started</em> guide
-          </p>
-        </div>
-      : <div className="generic-empty-state">
-          <h4 className="no-user-select">There are no Alerts to display</h4>
-          <br />
-          <h6 className="no-user-select">
-            Try changing the Time Range or
-            <Link
-              style={{marginLeft: '10px'}}
-              to={`/sources/${id}/alert-rules/new`}
-              className="btn btn-primary btn-sm"
-            >
-              Create an Alert Rule
-            </Link>
-          </h6>
-        </div>
+    return shouldNotBeFilterable ? (
+      <div className="graph-empty">
+        <p>
+          Learn how to configure your first <strong>Rule</strong> in<br />
+          the <em>Getting Started</em> guide
+        </p>
+      </div>
+    ) : (
+      <div className="generic-empty-state">
+        <h4 className="no-user-select">There are no Alerts to display</h4>
+        <br />
+        <h6 className="no-user-select">
+          Try changing the Time Range or
+          <Link
+            style={{marginLeft: '10px'}}
+            to={`/sources/${id}/alert-rules/new`}
+            className="btn btn-primary btn-sm"
+          >
+            Create an Alert Rule
+          </Link>
+        </h6>
+      </div>
+    )
   }
 
   render() {
@@ -205,35 +209,33 @@ class AlertsTable extends Component {
       alertsCount,
     } = this.props
 
-    return shouldNotBeFilterable
-      ? <div className="alerts-widget">
-          {this.renderTable()}
-          {limit && alertsCount
-            ? <button
-                className="btn btn-sm btn-default btn-block"
-                onClick={onGetMoreAlerts}
-                disabled={isAlertsMaxedOut}
-                style={{marginBottom: '20px'}}
-              >
-                {isAlertsMaxedOut
-                  ? `All ${alertsCount} Alerts displayed`
-                  : 'Load next 30 Alerts'}
-              </button>
-            : null}
-        </div>
-      : <div className="panel">
-          <div className="panel-heading">
-            <h2 className="panel-title">
-              {this.props.alerts.length} Alerts
-            </h2>
-            {this.props.alerts.length
-              ? <SearchBar onSearch={this.filterAlerts} />
-              : null}
-          </div>
-          <div className="panel-body">
-            {this.renderTable()}
-          </div>
+    return shouldNotBeFilterable ? (
+      <div className="alerts-widget">
+        {this.renderTable()}
+        {limit && alertsCount ? (
+          <button
+            className="btn btn-sm btn-default btn-block"
+            onClick={onGetMoreAlerts}
+            disabled={isAlertsMaxedOut}
+            style={{marginBottom: '20px'}}
+          >
+            {isAlertsMaxedOut
+              ? `All ${alertsCount} Alerts displayed`
+              : 'Load next 30 Alerts'}
+          </button>
+        ) : null}
+      </div>
+    ) : (
+      <div className="panel">
+        <div className="panel-heading">
+          <h2 className="panel-title">{this.props.alerts.length} Alerts</h2>
+          {this.props.alerts.length ? (
+            <SearchBar onSearch={this.filterAlerts} />
+          ) : null}
         </div>
+        <div className="panel-body">{this.renderTable()}</div>
+      </div>
+    )
   }
 }
 
diff --git a/ui/src/alerts/containers/AlertsApp.js b/ui/src/alerts/containers/AlertsApp.js
index e0a5588f67..ed90e01b77 100644
--- a/ui/src/alerts/containers/AlertsApp.js
+++ b/ui/src/alerts/containers/AlertsApp.js
@@ -30,7 +30,9 @@ class AlertsApp extends Component {
       alerts: [],
       timeRange: {
         upper: moment().format(),
-        lower: moment().subtract(lowerInSec || oneDayInSec, 'seconds').format(),
+        lower: moment()
+          .subtract(lowerInSec || oneDayInSec, 'seconds')
+          .format(),
       },
       limit: props.limit || 0, // only used if AlertsApp receives a limit prop
       limitMultiplier: 1, // only used if AlertsApp receives a limit prop
@@ -118,17 +120,19 @@ class AlertsApp extends Component {
     const {source, isWidget, limit} = this.props
     const {isAlertsMaxedOut, alerts} = this.state
 
-    return this.state.hasKapacitor
-      ? <AlertsTable
-          source={source}
-          alerts={this.state.alerts}
-          shouldNotBeFilterable={isWidget}
-          limit={limit}
-          onGetMoreAlerts={this.handleGetMoreAlerts}
-          isAlertsMaxedOut={isAlertsMaxedOut}
-          alertsCount={alerts.length}
-        />
-      : <NoKapacitorError source={source} />
+    return this.state.hasKapacitor ? (
+      <AlertsTable
+        source={source}
+        alerts={this.state.alerts}
+        shouldNotBeFilterable={isWidget}
+        limit={limit}
+        onGetMoreAlerts={this.handleGetMoreAlerts}
+        isAlertsMaxedOut={isAlertsMaxedOut}
+        alertsCount={alerts.length}
+      />
+    ) : (
+      <NoKapacitorError source={source} />
+    )
   }
 
   handleApplyTime = timeRange => {
@@ -143,33 +147,33 @@ class AlertsApp extends Component {
       return <div className="page-spinner" />
     }
 
-    return isWidget
-      ? this.renderSubComponents()
-      : <div className="page alert-history-page">
-          <div className="page-header">
-            <div className="page-header__container">
-              <div className="page-header__left">
-                <h1 className="page-header__title">Alert History</h1>
-              </div>
-              <div className="page-header__right">
-                <SourceIndicator />
-                <CustomTimeRangeDropdown
-                  onApplyTimeRange={this.handleApplyTime}
-                  timeRange={timeRange}
-                />
-              </div>
+    return isWidget ? (
+      this.renderSubComponents()
+    ) : (
+      <div className="page alert-history-page">
+        <div className="page-header">
+          <div className="page-header__container">
+            <div className="page-header__left">
+              <h1 className="page-header__title">Alert History</h1>
             </div>
-          </div>
-          <div className="page-contents">
-            <div className="container-fluid">
-              <div className="row">
-                <div className="col-md-12">
-                  {this.renderSubComponents()}
-                </div>
-              </div>
+            <div className="page-header__right">
+              <SourceIndicator />
+              <CustomTimeRangeDropdown
+                onApplyTimeRange={this.handleApplyTime}
+                timeRange={timeRange}
+              />
             </div>
           </div>
         </div>
+        <div className="page-contents">
+          <div className="container-fluid">
+            <div className="row">
+              <div className="col-md-12">{this.renderSubComponents()}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    )
   }
 }
 
diff --git a/ui/src/auth/Login.js b/ui/src/auth/Login.js
index 27487689d2..381e946df8 100644
--- a/ui/src/auth/Login.js
+++ b/ui/src/auth/Login.js
@@ -20,12 +20,12 @@ const Login = ({authData: {auth}}) => {
           <strong>{VERSION}</strong> / Time-Series Data Visualization
         </p>
         {auth.links &&
-          auth.links.map(({name, login, label}) =>
+          auth.links.map(({name, login, label}) => (
             <a key={name} className="btn btn-primary" href={login}>
               <span className={`icon ${name}`} />
               Log in with {label}
             </a>
-          )}
+          ))}
       </SplashPage>
     </div>
   )
diff --git a/ui/src/auth/Purgatory.js b/ui/src/auth/Purgatory.js
index 18dd7abe4f..1aa6802437 100644
--- a/ui/src/auth/Purgatory.js
+++ b/ui/src/auth/Purgatory.js
@@ -65,31 +65,31 @@ class Purgatory extends Component {
         <Notifications />
         <SplashPage>
           <div className="auth--purgatory">
-            <h3>
-              {name}
-            </h3>
+            <h3>{name}</h3>
             <h6>
               {subHeading}{' '}
               <code>
                 {scheme}/{provider}
               </code>
             </h6>
-            {rolesAndOrgs.length
-              ? <div className="auth--list">
-                  {rolesAndOrgs.map((rag, i) =>
-                    <PurgatoryAuthItem
-                      key={i}
-                      roleAndOrg={rag}
-                      superAdmin={superAdmin}
-                      onClickLogin={handleClickLogin({
-                        router,
-                        links,
-                        meChangeOrganization,
-                      })}
-                    />
-                  )}
-                </div>
-              : <p>You are a Lost Soul</p>}
+            {rolesAndOrgs.length ? (
+              <div className="auth--list">
+                {rolesAndOrgs.map((rag, i) => (
+                  <PurgatoryAuthItem
+                    key={i}
+                    roleAndOrg={rag}
+                    superAdmin={superAdmin}
+                    onClickLogin={handleClickLogin({
+                      router,
+                      links,
+                      meChangeOrganization,
+                    })}
+                  />
+                ))}
+              </div>
+            ) : (
+              <p>You are a Lost Soul</p>
+            )}
             <a href={logoutLink} className="btn btn-sm btn-link auth--logout">
               Log out
             </a>
diff --git a/ui/src/auth/PurgatoryAuthItem.js b/ui/src/auth/PurgatoryAuthItem.js
index 88e8eb2232..fd02b2dd2b 100644
--- a/ui/src/auth/PurgatoryAuthItem.js
+++ b/ui/src/auth/PurgatoryAuthItem.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 
 import {isUserAuthorized, VIEWER_ROLE} from 'src/auth/Authorized'
 
-const PurgatoryAuthItem = ({roleAndOrg, onClickLogin, superAdmin}) =>
+const PurgatoryAuthItem = ({roleAndOrg, onClickLogin, superAdmin}) => (
   <div
     className={
       roleAndOrg.currentOrganization
@@ -12,24 +12,23 @@ const PurgatoryAuthItem = ({roleAndOrg, onClickLogin, superAdmin}) =>
     }
   >
     <div className="auth--list-info">
-      <div className="auth--list-org">
-        {roleAndOrg.organization.name}
-      </div>
-      <div className="auth--list-role">
-        {roleAndOrg.role}
-      </div>
+      <div className="auth--list-org">{roleAndOrg.organization.name}</div>
+      <div className="auth--list-role">{roleAndOrg.role}</div>
     </div>
-    {superAdmin || isUserAuthorized(roleAndOrg.role, VIEWER_ROLE)
-      ? <button
-          className="btn btn-sm btn-primary"
-          onClick={onClickLogin(roleAndOrg.organization)}
-        >
-          Log in
-        </button>
-      : <span className="auth--list-blocked">
-          Contact your Admin<br />for access
-        </span>}
+    {superAdmin || isUserAuthorized(roleAndOrg.role, VIEWER_ROLE) ? (
+      <button
+        className="btn btn-sm btn-primary"
+        onClick={onClickLogin(roleAndOrg.organization)}
+      >
+        Log in
+      </button>
+    ) : (
+      <span className="auth--list-blocked">
+        Contact your Admin<br />for access
+      </span>
+    )}
   </div>
+)
 
 const {bool, func, shape, string} = PropTypes
 
diff --git a/ui/src/dashboards/components/AxesOptions.js b/ui/src/dashboards/components/AxesOptions.js
index 4f48a7e037..c0e5019a7d 100644
--- a/ui/src/dashboards/components/AxesOptions.js
+++ b/ui/src/dashboards/components/AxesOptions.js
@@ -91,9 +91,7 @@ class AxesOptions extends Component {
         autoHide={false}
       >
         <div className="display-options--cell-wrapper">
-          <h5 className="display-options--header">
-            {menuOption} Controls
-          </h5>
+          <h5 className="display-options--header">{menuOption} Controls</h5>
           <form autoComplete="off" className="form-group-wrapper">
             <div className="form-group col-sm-12">
               <label htmlFor="prefix">Title</label>
diff --git a/ui/src/dashboards/components/CellEditorOverlay.js b/ui/src/dashboards/components/CellEditorOverlay.js
index f866f61bb9..e0792ca532 100644
--- a/ui/src/dashboards/components/CellEditorOverlay.js
+++ b/ui/src/dashboards/components/CellEditorOverlay.js
@@ -318,27 +318,29 @@ class CellEditorOverlay extends Component {
               isDisplayOptionsTabActive={isDisplayOptionsTabActive}
               onClickDisplayOptions={this.handleClickDisplayOptionsTab}
             />
-            {isDisplayOptionsTabActive
-              ? <DisplayOptions
-                  queryConfigs={queriesWorkingDraft}
-                  onToggleStaticLegend={this.handleToggleStaticLegend}
-                  staticLegend={staticLegend}
-                  onResetFocus={this.handleResetFocus}
-                />
-              : <QueryMaker
-                  source={this.getSource()}
-                  templates={templates}
-                  queries={queriesWorkingDraft}
-                  actions={queryActions}
-                  autoRefresh={autoRefresh}
-                  timeRange={timeRange}
-                  onDeleteQuery={this.handleDeleteQuery}
-                  onAddQuery={this.handleAddQuery}
-                  activeQueryIndex={activeQueryIndex}
-                  activeQuery={this.getActiveQuery()}
-                  setActiveQueryIndex={this.handleSetActiveQueryIndex}
-                  initialGroupByTime={AUTO_GROUP_BY}
-                />}
+            {isDisplayOptionsTabActive ? (
+              <DisplayOptions
+                queryConfigs={queriesWorkingDraft}
+                onToggleStaticLegend={this.handleToggleStaticLegend}
+                staticLegend={staticLegend}
+                onResetFocus={this.handleResetFocus}
+              />
+            ) : (
+              <QueryMaker
+                source={this.getSource()}
+                templates={templates}
+                queries={queriesWorkingDraft}
+                actions={queryActions}
+                autoRefresh={autoRefresh}
+                timeRange={timeRange}
+                onDeleteQuery={this.handleDeleteQuery}
+                onAddQuery={this.handleAddQuery}
+                activeQueryIndex={activeQueryIndex}
+                activeQuery={this.getActiveQuery()}
+                setActiveQueryIndex={this.handleSetActiveQueryIndex}
+                initialGroupByTime={AUTO_GROUP_BY}
+              />
+            )}
           </CEOBottom>
         </ResizeContainer>
       </div>
@@ -346,10 +348,9 @@ class CellEditorOverlay extends Component {
   }
 }
 
-const CEOBottom = ({children}) =>
-  <div className="overlay-technology--editor">
-    {children}
-  </div>
+const CEOBottom = ({children}) => (
+  <div className="overlay-technology--editor">{children}</div>
+)
 
 const {arrayOf, func, node, number, shape, string} = PropTypes
 
diff --git a/ui/src/dashboards/components/Dashboard.js b/ui/src/dashboards/components/Dashboard.js
index 4aae1b459e..2d66fd847e 100644
--- a/ui/src/dashboards/components/Dashboard.js
+++ b/ui/src/dashboards/components/Dashboard.js
@@ -49,37 +49,39 @@ const Dashboard = ({
       setScrollTop={setScrollTop}
     >
       <div className="dashboard container-fluid full-width">
-        {inPresentationMode
-          ? null
-          : <TemplateControlBar
-              templates={dashboard.templates}
-              onSelectTemplate={onSelectTemplate}
-              onOpenTemplateManager={onOpenTemplateManager}
-              isOpen={showTemplateControlBar}
-            />}
-        {cells.length
-          ? <LayoutRenderer
-              cells={cells}
-              onZoom={onZoom}
-              source={source}
-              sources={sources}
-              isEditable={true}
-              timeRange={timeRange}
-              autoRefresh={autoRefresh}
-              manualRefresh={manualRefresh}
-              hoverTime={hoverTime}
-              onSetHoverTime={onSetHoverTime}
-              onDeleteCell={onDeleteCell}
-              onPositionChange={onPositionChange}
-              templates={templatesIncludingDashTime}
-              onSummonOverlayTechnologies={onSummonOverlayTechnologies}
-            />
-          : <div className="dashboard__empty">
-              <p>This Dashboard has no Cells</p>
-              <button className="btn btn-primary btn-m" onClick={onAddCell}>
-                <span className="icon plus" />Add a Cell
-              </button>
-            </div>}
+        {inPresentationMode ? null : (
+          <TemplateControlBar
+            templates={dashboard.templates}
+            onSelectTemplate={onSelectTemplate}
+            onOpenTemplateManager={onOpenTemplateManager}
+            isOpen={showTemplateControlBar}
+          />
+        )}
+        {cells.length ? (
+          <LayoutRenderer
+            cells={cells}
+            onZoom={onZoom}
+            source={source}
+            sources={sources}
+            isEditable={true}
+            timeRange={timeRange}
+            autoRefresh={autoRefresh}
+            manualRefresh={manualRefresh}
+            hoverTime={hoverTime}
+            onSetHoverTime={onSetHoverTime}
+            onDeleteCell={onDeleteCell}
+            onPositionChange={onPositionChange}
+            templates={templatesIncludingDashTime}
+            onSummonOverlayTechnologies={onSummonOverlayTechnologies}
+          />
+        ) : (
+          <div className="dashboard__empty">
+            <p>This Dashboard has no Cells</p>
+            <button className="btn btn-primary btn-m" onClick={onAddCell}>
+              <span className="icon plus" />Add a Cell
+            </button>
+          </div>
+        )}
       </div>
     </FancyScrollbar>
   )
diff --git a/ui/src/dashboards/components/DashboardHeader.js b/ui/src/dashboards/components/DashboardHeader.js
index 9bd7c94dbb..1808766891 100644
--- a/ui/src/dashboards/components/DashboardHeader.js
+++ b/ui/src/dashboards/components/DashboardHeader.js
@@ -31,90 +31,85 @@ const DashboardHeader = ({
   handleClickPresentationButton,
   zoomedTimeRange: {zoomedLower, zoomedUpper},
 }) =>
-  isHidden
-    ? null
-    : <div className="page-header full-width">
-        <div className="page-header__container">
-          <div
-            className={
-              dashboard
-                ? 'page-header__left page-header__dash-editable'
-                : 'page-header__left'
-            }
-          >
-            {names && names.length > 1
-              ? <DashboardSwitcher
-                  names={names}
-                  activeDashboard={activeDashboard}
-                />
-              : null}
-            {dashboard
-              ? <Authorized
-                  requiredRole={EDITOR_ROLE}
-                  replaceWithIfNotAuthorized={
-                    <h1 className="page-header__title">
-                      {activeDashboard}
-                    </h1>
-                  }
-                >
-                  <DashboardHeaderEdit
-                    onSave={onSave}
-                    onCancel={onCancel}
-                    activeDashboard={activeDashboard}
-                    onEditDashboard={onEditDashboard}
-                    isEditMode={isEditMode}
-                  />
-                </Authorized>
-              : <h1 className="page-header__title">
-                  {activeDashboard}
-                </h1>}
-          </div>
-          <div className="page-header__right">
-            <GraphTips />
-            <SourceIndicator />
-            {dashboard
-              ? <Authorized requiredRole={EDITOR_ROLE}>
-                  <button
-                    className="btn btn-primary btn-sm"
-                    onClick={onAddCell}
-                  >
-                    <span className="icon plus" />
-                    Add Cell
-                  </button>
-                </Authorized>
-              : null}
-            {dashboard
-              ? <div
-                  className={classnames('btn btn-default btn-sm', {
-                    active: showTemplateControlBar,
-                  })}
-                  onClick={onToggleTempVarControls}
-                >
-                  <span className="icon cube" />Template Variables
-                </div>
-              : null}
-            <AutoRefreshDropdown
-              onChoose={handleChooseAutoRefresh}
-              onManualRefresh={onManualRefresh}
-              selected={autoRefresh}
-              iconName="refresh"
+  isHidden ? null : (
+    <div className="page-header full-width">
+      <div className="page-header__container">
+        <div
+          className={
+            dashboard
+              ? 'page-header__left page-header__dash-editable'
+              : 'page-header__left'
+          }
+        >
+          {names && names.length > 1 ? (
+            <DashboardSwitcher
+              names={names}
+              activeDashboard={activeDashboard}
             />
-            <TimeRangeDropdown
-              onChooseTimeRange={handleChooseTimeRange}
-              selected={{
-                upper: zoomedUpper || upper,
-                lower: zoomedLower || lower,
-              }}
-            />
-            <div
-              className="btn btn-default btn-sm btn-square"
-              onClick={handleClickPresentationButton}
+          ) : null}
+          {dashboard ? (
+            <Authorized
+              requiredRole={EDITOR_ROLE}
+              replaceWithIfNotAuthorized={
+                <h1 className="page-header__title">{activeDashboard}</h1>
+              }
             >
-              <span className="icon expand-a" />
+              <DashboardHeaderEdit
+                onSave={onSave}
+                onCancel={onCancel}
+                activeDashboard={activeDashboard}
+                onEditDashboard={onEditDashboard}
+                isEditMode={isEditMode}
+              />
+            </Authorized>
+          ) : (
+            <h1 className="page-header__title">{activeDashboard}</h1>
+          )}
+        </div>
+        <div className="page-header__right">
+          <GraphTips />
+          <SourceIndicator />
+          {dashboard ? (
+            <Authorized requiredRole={EDITOR_ROLE}>
+              <button className="btn btn-primary btn-sm" onClick={onAddCell}>
+                <span className="icon plus" />
+                Add Cell
+              </button>
+            </Authorized>
+          ) : null}
+          {dashboard ? (
+            <div
+              className={classnames('btn btn-default btn-sm', {
+                active: showTemplateControlBar,
+              })}
+              onClick={onToggleTempVarControls}
+            >
+              <span className="icon cube" />Template Variables
             </div>
+          ) : null}
+          <AutoRefreshDropdown
+            onChoose={handleChooseAutoRefresh}
+            onManualRefresh={onManualRefresh}
+            selected={autoRefresh}
+            iconName="refresh"
+          />
+          <TimeRangeDropdown
+            onChooseTimeRange={handleChooseTimeRange}
+            selected={{
+              upper: zoomedUpper || upper,
+              lower: zoomedLower || lower,
+            }}
+          />
+          <div
+            className="btn btn-default btn-sm btn-square"
+            onClick={handleClickPresentationButton}
+          >
+            <span className="icon expand-a" />
           </div>
         </div>
       </div>
+    </div>
+  )
 
 const {arrayOf, bool, func, number, shape, string} = PropTypes
 
diff --git a/ui/src/dashboards/components/DashboardHeaderEdit.js b/ui/src/dashboards/components/DashboardHeaderEdit.js
index 763c18f0b8..a9a5eaad9e 100644
--- a/ui/src/dashboards/components/DashboardHeaderEdit.js
+++ b/ui/src/dashboards/components/DashboardHeaderEdit.js
@@ -46,24 +46,24 @@ class DashboardEditHeader extends Component {
 
     return (
       <div className="dashboard-title">
-        {isEditMode
-          ? <input
-              maxLength={DASHBOARD_NAME_MAX_LENGTH}
-              type="text"
-              className="dashboard-title--input form-control input-sm"
-              defaultValue={activeDashboard}
-              autoComplete="off"
-              autoFocus={true}
-              spellCheck={false}
-              onBlur={this.handleInputBlur}
-              onKeyDown={this.handleKeyDown}
-              onFocus={this.handleFocus}
-              placeholder="Name this Dashboard"
-              ref={r => (this.inputRef = r)}
-            />
-          : <h1 onClick={onEditDashboard}>
-              {activeDashboard}
-            </h1>}
+        {isEditMode ? (
+          <input
+            maxLength={DASHBOARD_NAME_MAX_LENGTH}
+            type="text"
+            className="dashboard-title--input form-control input-sm"
+            defaultValue={activeDashboard}
+            autoComplete="off"
+            autoFocus={true}
+            spellCheck={false}
+            onBlur={this.handleInputBlur}
+            onKeyDown={this.handleKeyDown}
+            onFocus={this.handleFocus}
+            placeholder="Name this Dashboard"
+            ref={r => (this.inputRef = r)}
+          />
+        ) : (
+          <h1 onClick={onEditDashboard}>{activeDashboard}</h1>
+        )}
       </div>
     )
   }
diff --git a/ui/src/dashboards/components/DashboardSwitcher.js b/ui/src/dashboards/components/DashboardSwitcher.js
index 26cc036ff2..58153bf86a 100644
--- a/ui/src/dashboards/components/DashboardSwitcher.js
+++ b/ui/src/dashboards/components/DashboardSwitcher.js
@@ -42,7 +42,7 @@ class DashboardSwitcher extends Component {
           <span className="icon dash-f" />
         </button>
         <ul className="dropdown-menu">
-          {sorted.map(({name, link}) =>
+          {sorted.map(({name, link}) => (
             <NameLink
               key={link}
               name={name}
@@ -50,14 +50,14 @@ class DashboardSwitcher extends Component {
               activeName={activeDashboard}
               onClose={this.handleCloseMenu}
             />
-          )}
+          ))}
         </ul>
       </div>
     )
   }
 }
 
-const NameLink = ({name, link, activeName, onClose}) =>
+const NameLink = ({name, link, activeName, onClose}) => (
   <li
     className={classnames('dropdown-item', {
       active: name === activeName,
@@ -67,6 +67,7 @@ const NameLink = ({name, link, activeName, onClose}) =>
       {name}
     </Link>
   </li>
+)
 
 const {arrayOf, func, shape, string} = PropTypes
 
diff --git a/ui/src/dashboards/components/DashboardsHeader.js b/ui/src/dashboards/components/DashboardsHeader.js
index d66b61f5eb..d0e1bcb55b 100644
--- a/ui/src/dashboards/components/DashboardsHeader.js
+++ b/ui/src/dashboards/components/DashboardsHeader.js
@@ -2,7 +2,7 @@ import React from 'react'
 
 import SourceIndicator from 'shared/components/SourceIndicator'
 
-const DashboardsHeader = () =>
+const DashboardsHeader = () => (
   <div className="page-header">
     <div className="page-header__container">
       <div className="page-header__left">
@@ -13,5 +13,6 @@ const DashboardsHeader = () =>
       </div>
     </div>
   </div>
+)
 
 export default DashboardsHeader
diff --git a/ui/src/dashboards/components/DashboardsPageContents.js b/ui/src/dashboards/components/DashboardsPageContents.js
index 35eeb45eb4..79c91095ad 100644
--- a/ui/src/dashboards/components/DashboardsPageContents.js
+++ b/ui/src/dashboards/components/DashboardsPageContents.js
@@ -48,9 +48,7 @@ class DashboardsPageContents extends Component {
             <div className="col-md-12">
               <div className="panel">
                 <div className="panel-heading">
-                  <h2 className="panel-title">
-                    {tableHeader}
-                  </h2>
+                  <h2 className="panel-title">{tableHeader}</h2>
                   <div className="dashboards-page--actions">
                     <SearchBar
                       placeholder="Filter by Name..."
diff --git a/ui/src/dashboards/components/DashboardsTable.js b/ui/src/dashboards/components/DashboardsTable.js
index 64a3244f16..bb85457fe6 100644
--- a/ui/src/dashboards/components/DashboardsTable.js
+++ b/ui/src/dashboards/components/DashboardsTable.js
@@ -7,7 +7,7 @@ import Authorized, {EDITOR_ROLE} from 'src/auth/Authorized'
 
 import DeleteConfirmTableCell from 'shared/components/DeleteConfirmTableCell'
 
-const AuthorizedEmptyState = ({onCreateDashboard}) =>
+const AuthorizedEmptyState = ({onCreateDashboard}) => (
   <div className="generic-empty-state">
     <h4 style={{marginTop: '90px'}}>
       Looks like you don’t have any dashboards
@@ -21,6 +21,7 @@ const AuthorizedEmptyState = ({onCreateDashboard}) =>
       <span className="icon plus" /> Create Dashboard
     </button>
   </div>
+)
 
 const unauthorizedEmptyState = (
   <div className="generic-empty-state">
@@ -34,52 +35,56 @@ const DashboardsTable = ({
   onCreateDashboard,
   dashboardLink,
 }) => {
-  return dashboards && dashboards.length
-    ? <table className="table v-center admin-table table-highlight">
-        <thead>
-          <tr>
-            <th>Name</th>
-            <th>Template Variables</th>
-            <th />
+  return dashboards && dashboards.length ? (
+    <table className="table v-center admin-table table-highlight">
+      <thead>
+        <tr>
+          <th>Name</th>
+          <th>Template Variables</th>
+          <th />
+        </tr>
+      </thead>
+      <tbody>
+        {_.sortBy(dashboards, d => d.name.toLowerCase()).map(dashboard => (
+          <tr key={dashboard.id}>
+            <td>
+              <Link to={`${dashboardLink}/dashboards/${dashboard.id}`}>
+                {dashboard.name}
+              </Link>
+            </td>
+            <td>
+              {dashboard.templates.length ? (
+                dashboard.templates.map(tv => (
+                  <code className="table--temp-var" key={tv.id}>
+                    {tv.tempVar}
+                  </code>
+                ))
+              ) : (
+                <span className="empty-string">None</span>
+              )}
+            </td>
+            <Authorized
+              requiredRole={EDITOR_ROLE}
+              replaceWithIfNotAuthorized={<td />}
+            >
+              <DeleteConfirmTableCell
+                onDelete={onDeleteDashboard}
+                item={dashboard}
+                buttonSize="btn-xs"
+              />
+            </Authorized>
           </tr>
-        </thead>
-        <tbody>
-          {_.sortBy(dashboards, d => d.name.toLowerCase()).map(dashboard =>
-            <tr key={dashboard.id}>
-              <td>
-                <Link to={`${dashboardLink}/dashboards/${dashboard.id}`}>
-                  {dashboard.name}
-                </Link>
-              </td>
-              <td>
-                {dashboard.templates.length
-                  ? dashboard.templates.map(tv =>
-                      <code className="table--temp-var" key={tv.id}>
-                        {tv.tempVar}
-                      </code>
-                    )
-                  : <span className="empty-string">None</span>}
-              </td>
-              <Authorized
-                requiredRole={EDITOR_ROLE}
-                replaceWithIfNotAuthorized={<td />}
-              >
-                <DeleteConfirmTableCell
-                  onDelete={onDeleteDashboard}
-                  item={dashboard}
-                  buttonSize="btn-xs"
-                />
-              </Authorized>
-            </tr>
-          )}
-        </tbody>
-      </table>
-    : <Authorized
-        requiredRole={EDITOR_ROLE}
-        replaceWithIfNotAuthorized={unauthorizedEmptyState}
-      >
-        <AuthorizedEmptyState onCreateDashboard={onCreateDashboard} />
-      </Authorized>
+        ))}
+      </tbody>
+    </table>
+  ) : (
+    <Authorized
+      requiredRole={EDITOR_ROLE}
+      replaceWithIfNotAuthorized={unauthorizedEmptyState}
+    >
+      <AuthorizedEmptyState onCreateDashboard={onCreateDashboard} />
+    </Authorized>
+  )
 }
 
 const {arrayOf, func, shape, string} = PropTypes
diff --git a/ui/src/dashboards/components/DisplayOptionsInput.js b/ui/src/dashboards/components/DisplayOptionsInput.js
index 4f95f78a79..1602a060dc 100644
--- a/ui/src/dashboards/components/DisplayOptionsInput.js
+++ b/ui/src/dashboards/components/DisplayOptionsInput.js
@@ -9,11 +9,9 @@ const DisplayOptionsInput = ({
   labelText,
   colWidth,
   placeholder,
-}) =>
+}) => (
   <div className={`form-group ${colWidth}`}>
-    <label htmlFor={name}>
-      {labelText}
-    </label>
+    <label htmlFor={name}>{labelText}</label>
     <input
       className="form-control input-sm"
       type="text"
@@ -24,6 +22,7 @@ const DisplayOptionsInput = ({
       placeholder={placeholder}
     />
   </div>
+)
 
 const {func, string} = PropTypes
 
diff --git a/ui/src/dashboards/components/GaugeOptions.js b/ui/src/dashboards/components/GaugeOptions.js
index eb3881517e..3197464465 100644
--- a/ui/src/dashboards/components/GaugeOptions.js
+++ b/ui/src/dashboards/components/GaugeOptions.js
@@ -173,7 +173,7 @@ class GaugeOptions extends Component {
             >
               <span className="icon plus" /> Add Threshold
             </button>
-            {gaugeColors.map(color =>
+            {gaugeColors.map(color => (
               <Threshold
                 isMin={color.value === gaugeColors[0].value}
                 isMax={
@@ -189,7 +189,7 @@ class GaugeOptions extends Component {
                 onDeleteThreshold={this.handleDeleteThreshold}
                 onSortColors={this.handleSortColors}
               />
-            )}
+            ))}
           </div>
           <div className="graph-options-group form-group-wrapper">
             <div className="form-group col-xs-6">
diff --git a/ui/src/dashboards/components/GraphOptionsTextWrapping.js b/ui/src/dashboards/components/GraphOptionsTextWrapping.js
index 601d1c16ef..37476fd44c 100644
--- a/ui/src/dashboards/components/GraphOptionsTextWrapping.js
+++ b/ui/src/dashboards/components/GraphOptionsTextWrapping.js
@@ -16,25 +16,25 @@ const GraphOptionsTextWrapping = ({
       <label>Text Wrapping</label>
       <ul className="nav nav-tablist nav-tablist-sm">
         <li
-          className={`${thresholdsListType === THRESHOLD_TYPE_BG
-            ? 'active'
-            : ''}`}
+          className={`${
+            thresholdsListType === THRESHOLD_TYPE_BG ? 'active' : ''
+          }`}
           onClick={onToggleTextWrapping}
         >
           Truncate
         </li>
         <li
-          className={`${thresholdsListType === THRESHOLD_TYPE_TEXT
-            ? 'active'
-            : ''}`}
+          className={`${
+            thresholdsListType === THRESHOLD_TYPE_TEXT ? 'active' : ''
+          }`}
           onClick={onToggleTextWrapping}
         >
           Wrap
         </li>
         <li
-          className={`${thresholdsListType === THRESHOLD_TYPE_BG
-            ? 'active'
-            : ''}`}
+          className={`${
+            thresholdsListType === THRESHOLD_TYPE_BG ? 'active' : ''
+          }`}
           onClick={onToggleTextWrapping}
         >
           Single Line
diff --git a/ui/src/dashboards/components/GraphOptionsTimeAxis.js b/ui/src/dashboards/components/GraphOptionsTimeAxis.js
index e92e3ac295..01171d6ce6 100644
--- a/ui/src/dashboards/components/GraphOptionsTimeAxis.js
+++ b/ui/src/dashboards/components/GraphOptionsTimeAxis.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-const GraphOptionsTimeAxis = ({verticalTimeAxis, onToggleVerticalTimeAxis}) =>
+const GraphOptionsTimeAxis = ({verticalTimeAxis, onToggleVerticalTimeAxis}) => (
   <div className="form-group col-xs-12 col-sm-6">
     <label>Time Axis</label>
     <ul className="nav nav-tablist nav-tablist-sm">
@@ -19,6 +19,7 @@ const GraphOptionsTimeAxis = ({verticalTimeAxis, onToggleVerticalTimeAxis}) =>
       </li>
     </ul>
   </div>
+)
 
 const {bool, func} = PropTypes
 
diff --git a/ui/src/dashboards/components/GraphTypeSelector.js b/ui/src/dashboards/components/GraphTypeSelector.js
index e33c01ed6d..162361ff7b 100644
--- a/ui/src/dashboards/components/GraphTypeSelector.js
+++ b/ui/src/dashboards/components/GraphTypeSelector.js
@@ -23,7 +23,7 @@ const GraphTypeSelector = ({type, handleChangeCellType}) => {
       <div className="display-options--cell-wrapper">
         <h5 className="display-options--header">Visualization Type</h5>
         <div className="viz-type-selector">
-          {GRAPH_TYPES.map(graphType =>
+          {GRAPH_TYPES.map(graphType => (
             <div
               key={graphType.type}
               className={classnames('viz-type-selector--option', {
@@ -32,12 +32,10 @@ const GraphTypeSelector = ({type, handleChangeCellType}) => {
             >
               <div onClick={onChangeCellType(graphType.type)}>
                 {graphType.graphic}
-                <p>
-                  {graphType.menuOption}
-                </p>
+                <p>{graphType.menuOption}</p>
               </div>
             </div>
-          )}
+          ))}
         </div>
       </div>
     </FancyScrollbar>
diff --git a/ui/src/dashboards/components/OverlayControls.js b/ui/src/dashboards/components/OverlayControls.js
index 30b23170a2..bc28525a3b 100644
--- a/ui/src/dashboards/components/OverlayControls.js
+++ b/ui/src/dashboards/components/OverlayControls.js
@@ -15,7 +15,7 @@ const OverlayControls = ({
   onSetQuerySource,
   isDisplayOptionsTabActive,
   onClickDisplayOptions,
-}) =>
+}) => (
   <div className="overlay-controls">
     <SourceSelector
       sources={sources}
@@ -51,6 +51,7 @@ const OverlayControls = ({
       />
     </div>
   </div>
+)
 
 const {arrayOf, bool, func, shape, string} = PropTypes
 
diff --git a/ui/src/dashboards/components/QueryMaker.js b/ui/src/dashboards/components/QueryMaker.js
index b50b68522b..0658a4df40 100644
--- a/ui/src/dashboards/components/QueryMaker.js
+++ b/ui/src/dashboards/components/QueryMaker.js
@@ -26,7 +26,7 @@ const QueryMaker = ({
   activeQueryIndex,
   initialGroupByTime,
   setActiveQueryIndex,
-}) =>
+}) => (
   <div className="query-maker query-maker--panel">
     <QueryTabList
       queries={queries}
@@ -36,28 +36,31 @@ const QueryMaker = ({
       activeQueryIndex={activeQueryIndex}
       setActiveQueryIndex={setActiveQueryIndex}
     />
-    {activeQuery && activeQuery.id
-      ? <div className="query-maker--tab-contents">
-          <QueryTextArea
-            query={buildText(activeQuery)}
-            config={activeQuery}
-            onUpdate={rawTextBinder(
-              source.links,
-              activeQuery.id,
-              actions.editRawTextAsync
-            )}
-            templates={templates}
-          />
-          <SchemaExplorer
-            source={source}
-            actions={actions}
-            query={activeQuery}
-            onAddQuery={onAddQuery}
-            initialGroupByTime={initialGroupByTime}
-          />
-        </div>
-      : <EmptyQuery onAddQuery={onAddQuery} />}
+    {activeQuery && activeQuery.id ? (
+      <div className="query-maker--tab-contents">
+        <QueryTextArea
+          query={buildText(activeQuery)}
+          config={activeQuery}
+          onUpdate={rawTextBinder(
+            source.links,
+            activeQuery.id,
+            actions.editRawTextAsync
+          )}
+          templates={templates}
+        />
+        <SchemaExplorer
+          source={source}
+          actions={actions}
+          query={activeQuery}
+          onAddQuery={onAddQuery}
+          initialGroupByTime={initialGroupByTime}
+        />
+      </div>
+    ) : (
+      <EmptyQuery onAddQuery={onAddQuery} />
+    )}
   </div>
+)
 
 const {arrayOf, func, number, shape, string} = PropTypes
 
diff --git a/ui/src/dashboards/components/QueryTextArea.js b/ui/src/dashboards/components/QueryTextArea.js
index 65845b5579..e16bc25065 100644
--- a/ui/src/dashboards/components/QueryTextArea.js
+++ b/ui/src/dashboards/components/QueryTextArea.js
@@ -215,15 +215,15 @@ class QueryTextArea extends Component {
               <QueryStatus status={status} />
             </div>
             <div className="varmoji-back">
-              {isTemplating
-                ? <TemplateDrawer
-                    onClickTempVar={this.handleClickTempVar}
-                    templates={filteredTemplates}
-                    selected={selectedTemplate}
-                    onMouseOverTempVar={this.handleMouseOverTempVar}
-                    handleClickOutside={this.handleCloseDrawer}
-                  />
-                : null}
+              {isTemplating ? (
+                <TemplateDrawer
+                  onClickTempVar={this.handleClickTempVar}
+                  templates={filteredTemplates}
+                  selected={selectedTemplate}
+                  onMouseOverTempVar={this.handleMouseOverTempVar}
+                  handleClickOutside={this.handleCloseDrawer}
+                />
+              ) : null}
             </div>
           </div>
         </div>
diff --git a/ui/src/dashboards/components/SourceSelector.js b/ui/src/dashboards/components/SourceSelector.js
index 2137aba0c4..0a5487c3e7 100644
--- a/ui/src/dashboards/components/SourceSelector.js
+++ b/ui/src/dashboards/components/SourceSelector.js
@@ -3,20 +3,22 @@ import PropTypes from 'prop-types'
 import Dropdown from 'shared/components/Dropdown'
 
 const SourceSelector = ({sources = [], selected, onSetQuerySource, queries}) =>
-  sources.length > 1 && queries.length
-    ? <div className="source-selector">
-        <h3>Source:</h3>
-        <Dropdown
-          items={sources}
-          buttonSize="btn-sm"
-          menuClass="dropdown-astronaut"
-          useAutoComplete={true}
-          selected={selected}
-          onChoose={onSetQuerySource}
-          className="dropdown-240"
-        />
-      </div>
-    : <div className="source-selector" />
+  sources.length > 1 && queries.length ? (
+    <div className="source-selector">
+      <h3>Source:</h3>
+      <Dropdown
+        items={sources}
+        buttonSize="btn-sm"
+        menuClass="dropdown-astronaut"
+        useAutoComplete={true}
+        selected={selected}
+        onChoose={onSetQuerySource}
+        className="dropdown-240"
+      />
+    </div>
+  ) : (
+    <div className="source-selector" />
+  )
 
 const {array, arrayOf, func, shape, string} = PropTypes
 
diff --git a/ui/src/dashboards/components/Tabber.js b/ui/src/dashboards/components/Tabber.js
index ae9f09591d..1bc02313c5 100644
--- a/ui/src/dashboards/components/Tabber.js
+++ b/ui/src/dashboards/components/Tabber.js
@@ -2,23 +2,23 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import QuestionMarkTooltip from 'src/shared/components/QuestionMarkTooltip'
 
-export const Tabber = ({labelText, children, tipID, tipContent}) =>
+export const Tabber = ({labelText, children, tipID, tipContent}) => (
   <div className="form-group col-md-6">
     <label>
       {labelText}
-      {tipID
-        ? <QuestionMarkTooltip tipID={tipID} tipContent={tipContent} />
-        : null}
+      {tipID ? (
+        <QuestionMarkTooltip tipID={tipID} tipContent={tipContent} />
+      ) : null}
     </label>
-    <ul className="nav nav-tablist nav-tablist-sm">
-      {children}
-    </ul>
+    <ul className="nav nav-tablist nav-tablist-sm">{children}</ul>
   </div>
+)
 
-export const Tab = ({isActive, onClickTab, text}) =>
+export const Tab = ({isActive, onClickTab, text}) => (
   <li className={isActive ? 'active' : ''} onClick={onClickTab}>
     {text}
   </li>
+)
 
 const {bool, func, node, string} = PropTypes
 
diff --git a/ui/src/dashboards/components/TemplateControlBar.js b/ui/src/dashboards/components/TemplateControlBar.js
index a1de8bba31..3c08b74698 100644
--- a/ui/src/dashboards/components/TemplateControlBar.js
+++ b/ui/src/dashboards/components/TemplateControlBar.js
@@ -16,67 +16,67 @@ const TemplateControlBar = ({
   templates,
   onSelectTemplate,
   onOpenTemplateManager,
-}) =>
+}) => (
   <div className={classnames('template-control-bar', {show: isOpen})}>
     <div className="template-control--container">
       <div className="template-control--controls">
-        {templates.length
-          ? templates.map(({id, values, tempVar}) => {
-              const items = values.map(value => ({...value, text: value.value}))
-              const itemValues = values.map(value => value.value)
-              const selectedItem = items.find(item => item.selected) || items[0]
-              const selectedText = selectedItem && selectedItem.text
-              let customDropdownWidth = 0
-              if (itemValues.length > 1) {
-                const longest = itemValues.reduce(
-                  (a, b) => (a.length > b.length ? a : b)
-                )
-                const longestLengthPixels =
-                  calculateSize(longest, {
-                    font: 'Monospace',
-                    fontSize: '12px',
-                  }).width + tempVarDropdownPadding
-
-                if (
-                  longestLengthPixels > minTempVarDropdownWidth &&
-                  longestLengthPixels < maxTempVarDropdownWidth
-                ) {
-                  customDropdownWidth = longestLengthPixels
-                } else if (longestLengthPixels > maxTempVarDropdownWidth) {
-                  customDropdownWidth = maxTempVarDropdownWidth
-                }
-              }
-
-              // TODO: change Dropdown to a MultiSelectDropdown, `selected` to
-              // the full array, and [item] to all `selected` values when we update
-              // this component to support multiple values
-              return (
-                <div
-                  key={id}
-                  className="template-control--dropdown"
-                  style={
-                    customDropdownWidth > 0
-                      ? {minWidth: customDropdownWidth}
-                      : null
-                  }
-                >
-                  <Dropdown
-                    items={items}
-                    buttonSize="btn-xs"
-                    menuClass="dropdown-astronaut"
-                    useAutoComplete={true}
-                    selected={selectedText || '(No values)'}
-                    onChoose={onSelectTemplate(id)}
-                  />
-                  <label className="template-control--label">
-                    {tempVar}
-                  </label>
-                </div>
+        {templates.length ? (
+          templates.map(({id, values, tempVar}) => {
+            const items = values.map(value => ({...value, text: value.value}))
+            const itemValues = values.map(value => value.value)
+            const selectedItem = items.find(item => item.selected) || items[0]
+            const selectedText = selectedItem && selectedItem.text
+            let customDropdownWidth = 0
+            if (itemValues.length > 1) {
+              const longest = itemValues.reduce(
+                (a, b) => (a.length > b.length ? a : b)
               )
-            })
-          : <div className="template-control--empty">
-              This dashboard does not have any Template Variables
-            </div>}
+              const longestLengthPixels =
+                calculateSize(longest, {
+                  font: 'Monospace',
+                  fontSize: '12px',
+                }).width + tempVarDropdownPadding
+
+              if (
+                longestLengthPixels > minTempVarDropdownWidth &&
+                longestLengthPixels < maxTempVarDropdownWidth
+              ) {
+                customDropdownWidth = longestLengthPixels
+              } else if (longestLengthPixels > maxTempVarDropdownWidth) {
+                customDropdownWidth = maxTempVarDropdownWidth
+              }
+            }
+
+            // TODO: change Dropdown to a MultiSelectDropdown, `selected` to
+            // the full array, and [item] to all `selected` values when we update
+            // this component to support multiple values
+            return (
+              <div
+                key={id}
+                className="template-control--dropdown"
+                style={
+                  customDropdownWidth > 0
+                    ? {minWidth: customDropdownWidth}
+                    : null
+                }
+              >
+                <Dropdown
+                  items={items}
+                  buttonSize="btn-xs"
+                  menuClass="dropdown-astronaut"
+                  useAutoComplete={true}
+                  selected={selectedText || '(No values)'}
+                  onChoose={onSelectTemplate(id)}
+                />
+                <label className="template-control--label">{tempVar}</label>
+              </div>
+            )
+          })
+        ) : (
+          <div className="template-control--empty">
+            This dashboard does not have any Template Variables
+          </div>
+        )}
       </div>
       <Authorized requiredRole={EDITOR_ROLE}>
         <button
@@ -89,6 +89,7 @@ const TemplateControlBar = ({
       </Authorized>
     </div>
   </div>
+)
 
 const {arrayOf, bool, func, shape, string} = PropTypes
 
diff --git a/ui/src/dashboards/components/Threshold.js b/ui/src/dashboards/components/Threshold.js
index 8f34dbf1c6..b4e1e237f0 100644
--- a/ui/src/dashboards/components/Threshold.js
+++ b/ui/src/dashboards/components/Threshold.js
@@ -78,17 +78,15 @@ class Threshold extends Component {
 
     return (
       <div className="threshold-item">
-        <div className={labelClass}>
-          {label}
-        </div>
-        {canBeDeleted
-          ? <button
-              className="btn btn-default btn-sm btn-square"
-              onClick={onDeleteThreshold(threshold)}
-            >
-              <span className="icon remove" />
-            </button>
-          : null}
+        <div className={labelClass}>{label}</div>
+        {canBeDeleted ? (
+          <button
+            className="btn btn-default btn-sm btn-square"
+            onClick={onDeleteThreshold(threshold)}
+          >
+            <span className="icon remove" />
+          </button>
+        ) : null}
         <input
           value={workingValue}
           className={inputClass}
diff --git a/ui/src/dashboards/components/VisualizationName.js b/ui/src/dashboards/components/VisualizationName.js
index 21b8e80b33..f67b1c9b84 100644
--- a/ui/src/dashboards/components/VisualizationName.js
+++ b/ui/src/dashboards/components/VisualizationName.js
@@ -55,21 +55,23 @@ class VisualizationName extends Component {
 
     return (
       <div className="graph-heading">
-        {isEditing
-          ? <input
-              type="text"
-              className="form-control input-sm"
-              defaultValue={name}
-              onBlur={this.handleInputBlur}
-              onKeyDown={this.handleKeyDown}
-              autoFocus={true}
-              onFocus={this.handleFocus}
-              placeholder="Name this Cell..."
-              spellCheck={false}
-            />
-          : <div className={graphNameClass} onClick={this.handleInputClick}>
-              {name}
-            </div>}
+        {isEditing ? (
+          <input
+            type="text"
+            className="form-control input-sm"
+            defaultValue={name}
+            onBlur={this.handleInputBlur}
+            onKeyDown={this.handleKeyDown}
+            autoFocus={true}
+            onFocus={this.handleFocus}
+            placeholder="Name this Cell..."
+            spellCheck={false}
+          />
+        ) : (
+          <div className={graphNameClass} onClick={this.handleInputClick}>
+            {name}
+          </div>
+        )}
       </div>
     )
   }
diff --git a/ui/src/dashboards/components/template_variables/Manager.js b/ui/src/dashboards/components/template_variables/Manager.js
index 73e9383b0f..a52aa11a6b 100644
--- a/ui/src/dashboards/components/template_variables/Manager.js
+++ b/ui/src/dashboards/components/template_variables/Manager.js
@@ -19,7 +19,7 @@ const TemplateVariableManager = ({
   tempVarAlreadyExists,
   onSaveTemplatesSuccess,
   onEditTemplateVariables,
-}) =>
+}) => (
   <div className="template-variable-manager">
     <div className="template-variable-manager--header">
       <div className="page-header__left">
@@ -56,6 +56,7 @@ const TemplateVariableManager = ({
       />
     </div>
   </div>
+)
 
 class TemplateVariableManagerWrapper extends Component {
   constructor(props) {
diff --git a/ui/src/dashboards/components/template_variables/Row.js b/ui/src/dashboards/components/template_variables/Row.js
index f75c8afdfe..7d6f28ad61 100644
--- a/ui/src/dashboards/components/template_variables/Row.js
+++ b/ui/src/dashboards/components/template_variables/Row.js
@@ -45,7 +45,7 @@ const TemplateVariableRow = ({
   onSubmit,
   onErrorThrown,
   onDeleteTempVar,
-}) =>
+}) => (
   <form
     className={classnames('template-variable-manager--table-row', {
       editing: isEditing,
@@ -106,6 +106,7 @@ const TemplateVariableRow = ({
       />
     </div>
   </form>
+)
 
 class RowWrapper extends Component {
   constructor(props) {
diff --git a/ui/src/dashboards/components/template_variables/Table.js b/ui/src/dashboards/components/template_variables/Table.js
index f1a81c7e8b..252d0f72a2 100644
--- a/ui/src/dashboards/components/template_variables/Table.js
+++ b/ui/src/dashboards/components/template_variables/Table.js
@@ -10,36 +10,39 @@ const TemplateVariableTable = ({
   onRunQueryFailure,
   onDelete,
   tempVarAlreadyExists,
-}) =>
+}) => (
   <div className="template-variable-manager--table">
-    {templates.length
-      ? <div className="template-variable-manager--table-container">
-          <div className="template-variable-manager--table-heading">
-            <div className="tvm--col-1">Variable</div>
-            <div className="tvm--col-2">Type</div>
-            <div className="tvm--col-3">Definition / Values</div>
-            <div className="tvm--col-4" />
-          </div>
-          <div className="template-variable-manager--table-rows">
-            {templates.map(t =>
-              <TemplateVariableRow
-                key={t.id}
-                source={source}
-                template={t}
-                onRunQuerySuccess={onRunQuerySuccess}
-                onRunQueryFailure={onRunQueryFailure}
-                onDelete={onDelete}
-                tempVarAlreadyExists={tempVarAlreadyExists}
-              />
-            )}
-          </div>
+    {templates.length ? (
+      <div className="template-variable-manager--table-container">
+        <div className="template-variable-manager--table-heading">
+          <div className="tvm--col-1">Variable</div>
+          <div className="tvm--col-2">Type</div>
+          <div className="tvm--col-3">Definition / Values</div>
+          <div className="tvm--col-4" />
         </div>
-      : <div className="generic-empty-state">
-          <h4 style={{margin: '60px 0'}} className="no-user-select">
-            You have no Template Variables, why not create one?
-          </h4>
-        </div>}
+        <div className="template-variable-manager--table-rows">
+          {templates.map(t => (
+            <TemplateVariableRow
+              key={t.id}
+              source={source}
+              template={t}
+              onRunQuerySuccess={onRunQuerySuccess}
+              onRunQueryFailure={onRunQueryFailure}
+              onDelete={onDelete}
+              tempVarAlreadyExists={tempVarAlreadyExists}
+            />
+          ))}
+        </div>
+      </div>
+    ) : (
+      <div className="generic-empty-state">
+        <h4 style={{margin: '60px 0'}} className="no-user-select">
+          You have no Template Variables, why not create one?
+        </h4>
+      </div>
+    )}
   </div>
+)
 
 const {arrayOf, bool, func, shape, string} = PropTypes
 
diff --git a/ui/src/dashboards/components/template_variables/TableInput.js b/ui/src/dashboards/components/template_variables/TableInput.js
index 908817a49f..ebc50d612f 100644
--- a/ui/src/dashboards/components/template_variables/TableInput.js
+++ b/ui/src/dashboards/components/template_variables/TableInput.js
@@ -8,26 +8,26 @@ const TableInput = ({
   onStartEdit,
   autoFocusTarget,
 }) => {
-  return isEditing
-    ? <div name={name} style={{width: '100%'}}>
-        <input
-          required={true}
-          name={name}
-          autoFocus={name === autoFocusTarget}
-          className="form-control input-sm tvm-input-edit"
-          type="text"
-          defaultValue={
-            name === 'tempVar'
-              ? defaultValue.replace(/\u003a/g, '') // remove ':'s
-              : defaultValue
-          }
-        />
-      </div>
-    : <div style={{width: '100%'}} onClick={onStartEdit(name)}>
-        <div className="tvm-input">
-          {defaultValue}
-        </div>
-      </div>
+  return isEditing ? (
+    <div name={name} style={{width: '100%'}}>
+      <input
+        required={true}
+        name={name}
+        autoFocus={name === autoFocusTarget}
+        className="form-control input-sm tvm-input-edit"
+        type="text"
+        defaultValue={
+          name === 'tempVar'
+            ? defaultValue.replace(/\u003a/g, '') // remove ':'s
+            : defaultValue
+        }
+      />
+    </div>
+  ) : (
+    <div style={{width: '100%'}} onClick={onStartEdit(name)}>
+      <div className="tvm-input">{defaultValue}</div>
+    </div>
+  )
 }
 
 const {bool, func, string} = PropTypes
diff --git a/ui/src/dashboards/components/template_variables/TemplateQueryBuilder.js b/ui/src/dashboards/components/template_variables/TemplateQueryBuilder.js
index ac6fcb11a5..fb79e2b454 100644
--- a/ui/src/dashboards/components/template_variables/TemplateQueryBuilder.js
+++ b/ui/src/dashboards/components/template_variables/TemplateQueryBuilder.js
@@ -46,15 +46,17 @@ const TemplateQueryBuilder = ({
             onErrorThrown={onErrorThrown}
           />
           <span className="tvm-query-builder--text">FROM</span>
-          {selectedDatabase
-            ? <MeasurementDropdown
-                database={selectedDatabase}
-                measurement={selectedMeasurement}
-                onSelectMeasurement={onSelectMeasurement}
-                onStartEdit={onStartEdit}
-                onErrorThrown={onErrorThrown}
-              />
-            : <div>No database selected</div>}
+          {selectedDatabase ? (
+            <MeasurementDropdown
+              database={selectedDatabase}
+              measurement={selectedMeasurement}
+              onSelectMeasurement={onSelectMeasurement}
+              onStartEdit={onStartEdit}
+              onErrorThrown={onErrorThrown}
+            />
+          ) : (
+            <div>No database selected</div>
+          )}
         </div>
       )
     case 'tagValues':
@@ -68,26 +70,30 @@ const TemplateQueryBuilder = ({
             onErrorThrown={onErrorThrown}
           />
           <span className="tvm-query-builder--text">FROM</span>
-          {selectedDatabase
-            ? <MeasurementDropdown
-                database={selectedDatabase}
-                measurement={selectedMeasurement}
-                onSelectMeasurement={onSelectMeasurement}
-                onStartEdit={onStartEdit}
-                onErrorThrown={onErrorThrown}
-              />
-            : 'Pick a DB'}
+          {selectedDatabase ? (
+            <MeasurementDropdown
+              database={selectedDatabase}
+              measurement={selectedMeasurement}
+              onSelectMeasurement={onSelectMeasurement}
+              onStartEdit={onStartEdit}
+              onErrorThrown={onErrorThrown}
+            />
+          ) : (
+            'Pick a DB'
+          )}
           <span className="tvm-query-builder--text">WITH KEY =</span>
-          {selectedMeasurement
-            ? <TagKeyDropdown
-                database={selectedDatabase}
-                measurement={selectedMeasurement}
-                tagKey={selectedTagKey}
-                onSelectTagKey={onSelectTagKey}
-                onStartEdit={onStartEdit}
-                onErrorThrown={onErrorThrown}
-              />
-            : 'Pick a Tag Key'}
+          {selectedMeasurement ? (
+            <TagKeyDropdown
+              database={selectedDatabase}
+              measurement={selectedMeasurement}
+              tagKey={selectedTagKey}
+              onSelectTagKey={onSelectTagKey}
+              onStartEdit={onStartEdit}
+              onErrorThrown={onErrorThrown}
+            />
+          ) : (
+            'Pick a Tag Key'
+          )}
         </div>
       )
     default:
diff --git a/ui/src/dashboards/containers/DashboardPage.js b/ui/src/dashboards/containers/DashboardPage.js
index 64350b1657..19b85e6a26 100644
--- a/ui/src/dashboards/containers/DashboardPage.js
+++ b/ui/src/dashboards/containers/DashboardPage.js
@@ -356,35 +356,35 @@ class DashboardPage extends Component {
 
     return (
       <div className="page">
-        {isTemplating
-          ? <OverlayTechnologies>
-              <TemplateVariableManager
-                source={source}
-                templates={dashboard.templates}
-                onClose={this.handleCloseTemplateManager}
-                onRunQueryFailure={this.handleRunQueryFailure}
-                onEditTemplateVariables={this.handleEditTemplateVariables}
-              />
-            </OverlayTechnologies>
-          : null}
-        {selectedCell
-          ? <CellEditorOverlay
+        {isTemplating ? (
+          <OverlayTechnologies>
+            <TemplateVariableManager
               source={source}
-              sources={sources}
-              cell={selectedCell}
-              timeRange={timeRange}
-              autoRefresh={autoRefresh}
-              dashboardID={dashboardID}
-              queryStatus={cellQueryStatus}
-              onSave={this.handleSaveEditedCell}
-              onCancel={handleHideCellEditorOverlay}
-              templates={templatesIncludingDashTime}
-              editQueryStatus={dashboardActions.editCellQueryStatus}
-              thresholdsListType={thresholdsListType}
-              thresholdsListColors={thresholdsListColors}
-              gaugeColors={gaugeColors}
+              templates={dashboard.templates}
+              onClose={this.handleCloseTemplateManager}
+              onRunQueryFailure={this.handleRunQueryFailure}
+              onEditTemplateVariables={this.handleEditTemplateVariables}
             />
-          : null}
+          </OverlayTechnologies>
+        ) : null}
+        {selectedCell ? (
+          <CellEditorOverlay
+            source={source}
+            sources={sources}
+            cell={selectedCell}
+            timeRange={timeRange}
+            autoRefresh={autoRefresh}
+            dashboardID={dashboardID}
+            queryStatus={cellQueryStatus}
+            onSave={this.handleSaveEditedCell}
+            onCancel={handleHideCellEditorOverlay}
+            templates={templatesIncludingDashTime}
+            editQueryStatus={dashboardActions.editCellQueryStatus}
+            thresholdsListType={thresholdsListType}
+            thresholdsListColors={thresholdsListColors}
+            gaugeColors={gaugeColors}
+          />
+        ) : null}
         <DashboardHeader
           names={names}
           sourceID={sourceID}
@@ -407,30 +407,30 @@ class DashboardPage extends Component {
           onToggleTempVarControls={this.handleToggleTempVarControls}
           handleClickPresentationButton={handleClickPresentationButton}
         />
-        {dashboard
-          ? <Dashboard
-              source={source}
-              sources={sources}
-              setScrollTop={this.setScrollTop}
-              inView={this.inView}
-              dashboard={dashboard}
-              timeRange={timeRange}
-              autoRefresh={autoRefresh}
-              manualRefresh={manualRefresh}
-              onZoom={this.handleZoomedTimeRange}
-              onAddCell={this.handleAddCell}
-              hoverTime={hoverTime}
-              onSetHoverTime={this.handleSetHoverTime}
-              inPresentationMode={inPresentationMode}
-              onPositionChange={this.handleUpdatePosition}
-              onSelectTemplate={this.handleSelectTemplate}
-              onDeleteCell={this.handleDeleteDashboardCell}
-              showTemplateControlBar={showTemplateControlBar}
-              onOpenTemplateManager={this.handleOpenTemplateManager}
-              templatesIncludingDashTime={templatesIncludingDashTime}
-              onSummonOverlayTechnologies={handleShowCellEditorOverlay}
-            />
-          : null}
+        {dashboard ? (
+          <Dashboard
+            source={source}
+            sources={sources}
+            setScrollTop={this.setScrollTop}
+            inView={this.inView}
+            dashboard={dashboard}
+            timeRange={timeRange}
+            autoRefresh={autoRefresh}
+            manualRefresh={manualRefresh}
+            onZoom={this.handleZoomedTimeRange}
+            onAddCell={this.handleAddCell}
+            hoverTime={hoverTime}
+            onSetHoverTime={this.handleSetHoverTime}
+            inPresentationMode={inPresentationMode}
+            onPositionChange={this.handleUpdatePosition}
+            onSelectTemplate={this.handleSelectTemplate}
+            onDeleteCell={this.handleDeleteDashboardCell}
+            showTemplateControlBar={showTemplateControlBar}
+            onOpenTemplateManager={this.handleOpenTemplateManager}
+            templatesIncludingDashTime={templatesIncludingDashTime}
+            onSummonOverlayTechnologies={handleShowCellEditorOverlay}
+          />
+        ) : null}
       </div>
     )
   }
diff --git a/ui/src/data_explorer/components/FieldListItem.js b/ui/src/data_explorer/components/FieldListItem.js
index be8690a0ec..38ffad0785 100644
--- a/ui/src/data_explorer/components/FieldListItem.js
+++ b/ui/src/data_explorer/components/FieldListItem.js
@@ -90,27 +90,27 @@ class FieldListItem extends Component {
             <div className="query-builder--checkbox" />
             {fieldName}
           </span>
-          {isSelected
-            ? <div
-                className={classnames('btn btn-xs', {
-                  active: isOpen,
-                  'btn-default': !num,
-                  'btn-primary': num,
-                })}
-                onClick={this.toggleFunctionsMenu}
-                data-test={`query-builder-list-item-function-${fieldName}`}
-              >
-                {fieldFuncsLabel}
-              </div>
-            : null}
+          {isSelected ? (
+            <div
+              className={classnames('btn btn-xs', {
+                active: isOpen,
+                'btn-default': !num,
+                'btn-primary': num,
+              })}
+              onClick={this.toggleFunctionsMenu}
+              data-test={`query-builder-list-item-function-${fieldName}`}
+            >
+              {fieldFuncsLabel}
+            </div>
+          ) : null}
         </div>
-        {isSelected && isOpen
-          ? <FunctionSelector
-              onApply={this.handleApplyFunctions}
-              selectedItems={funcs}
-              singleSelect={isKapacitorRule}
-            />
-          : null}
+        {isSelected && isOpen ? (
+          <FunctionSelector
+            onApply={this.handleApplyFunctions}
+            selectedItems={funcs}
+            singleSelect={isKapacitorRule}
+          />
+        ) : null}
       </div>
     )
   }
diff --git a/ui/src/data_explorer/components/GroupByTimeDropdown.js b/ui/src/data_explorer/components/GroupByTimeDropdown.js
index 7ca6856a85..3bc0614dee 100644
--- a/ui/src/data_explorer/components/GroupByTimeDropdown.js
+++ b/ui/src/data_explorer/components/GroupByTimeDropdown.js
@@ -19,7 +19,7 @@ const GroupByTimeDropdown = ({
   selected,
   onChooseGroupByTime,
   location: {pathname},
-}) =>
+}) => (
   <div className="group-by-time">
     <label className="group-by-time--label">Group by:</label>
     <Dropdown
@@ -34,6 +34,7 @@ const GroupByTimeDropdown = ({
       selected={selected || 'Time'}
     />
   </div>
+)
 
 const {func, string, shape} = PropTypes
 
diff --git a/ui/src/data_explorer/components/NoDataNodeError.js b/ui/src/data_explorer/components/NoDataNodeError.js
index 51eade84f4..3410e71f4c 100644
--- a/ui/src/data_explorer/components/NoDataNodeError.js
+++ b/ui/src/data_explorer/components/NoDataNodeError.js
@@ -8,12 +8,8 @@ const NoDataNodeError = React.createClass({
   render() {
     return (
       <ClusterError>
-        <PanelHeading>
-          {errorCopy.noData.head}
-        </PanelHeading>
-        <PanelBody>
-          {errorCopy.noData.body}
-        </PanelBody>
+        <PanelHeading>{errorCopy.noData.head}</PanelHeading>
+        <PanelBody>{errorCopy.noData.body}</PanelBody>
       </ClusterError>
     )
   },
diff --git a/ui/src/data_explorer/components/QueryMaker.js b/ui/src/data_explorer/components/QueryMaker.js
index c4b0275924..d3d17cb316 100644
--- a/ui/src/data_explorer/components/QueryMaker.js
+++ b/ui/src/data_explorer/components/QueryMaker.js
@@ -14,7 +14,7 @@ const QueryMaker = ({
   timeRange,
   activeQuery,
   initialGroupByTime,
-}) =>
+}) => (
   <div className="query-maker query-maker--panel">
     <div className="query-maker--tab-contents">
       <QueryEditor
@@ -33,6 +33,7 @@ const QueryMaker = ({
       />
     </div>
   </div>
+)
 
 const {func, shape, string} = PropTypes
 
diff --git a/ui/src/data_explorer/components/QueryMakerTab.js b/ui/src/data_explorer/components/QueryMakerTab.js
index 3c65d327e6..51ed74a23f 100644
--- a/ui/src/data_explorer/components/QueryMakerTab.js
+++ b/ui/src/data_explorer/components/QueryMakerTab.js
@@ -31,9 +31,7 @@ const QueryMakerTab = React.createClass({
         })}
         onClick={this.handleSelect}
       >
-        <label>
-          {this.props.queryTabText}
-        </label>
+        <label>{this.props.queryTabText}</label>
         <span
           className="query-maker--delete"
           onClick={this.handleDelete}
diff --git a/ui/src/data_explorer/components/Table.js b/ui/src/data_explorer/components/Table.js
index b9ab0775ce..45c7c5199c 100644
--- a/ui/src/data_explorer/components/Table.js
+++ b/ui/src/data_explorer/components/Table.js
@@ -134,60 +134,60 @@ class ChronoTable extends Component {
 
     return (
       <div style={{width: '100%', height: '100%', position: 'relative'}}>
-        {series.length < maximumTabsCount
-          ? <div className="table--tabs">
-              {series.map((s, i) =>
-                <TabItem
-                  isActive={i === activeSeriesIndex}
-                  key={i}
-                  name={this.makeTabName(s)}
-                  index={i}
-                  onClickTab={this.handleClickTab}
-                />
-              )}
-            </div>
-          : <Dropdown
-              className="dropdown-160 table--tabs-dropdown"
-              items={series.map((s, index) => ({
-                ...s,
-                text: this.makeTabName(s),
-                index,
-              }))}
-              onChoose={this.handleClickDropdown}
-              selected={this.makeTabName(series[activeSeriesIndex])}
-              buttonSize="btn-xs"
-            />}
+        {series.length < maximumTabsCount ? (
+          <div className="table--tabs">
+            {series.map((s, i) => (
+              <TabItem
+                isActive={i === activeSeriesIndex}
+                key={i}
+                name={this.makeTabName(s)}
+                index={i}
+                onClickTab={this.handleClickTab}
+              />
+            ))}
+          </div>
+        ) : (
+          <Dropdown
+            className="dropdown-160 table--tabs-dropdown"
+            items={series.map((s, index) => ({
+              ...s,
+              text: this.makeTabName(s),
+              index,
+            }))}
+            onChoose={this.handleClickDropdown}
+            selected={this.makeTabName(series[activeSeriesIndex])}
+            buttonSize="btn-xs"
+          />
+        )}
         <div className="table--tabs-content">
-          {(columns && !columns.length) || (values && !values.length)
-            ? <div className="generic-empty-state">This series is empty</div>
-            : <Table
-                onColumnResizeEndCallback={this.handleColumnResize}
-                isColumnResizing={false}
-                rowHeight={rowHeight}
-                rowsCount={values.length}
-                width={containerWidth}
-                ownerHeight={styleAdjustedHeight}
-                height={styleAdjustedHeight}
-                headerHeight={headerHeight}
-              >
-                {columns.map((columnName, colIndex) => {
-                  return (
-                    <Column
-                      isResizable={true}
-                      key={columnName}
-                      columnKey={columnName}
-                      header={
-                        <Cell>
-                          {columnName}
-                        </Cell>
-                      }
-                      cell={this.handleCustomCell(columnName, values, colIndex)}
-                      width={columnWidths[columnName] || width}
-                      minWidth={minWidth}
-                    />
-                  )
-                })}
-              </Table>}
+          {(columns && !columns.length) || (values && !values.length) ? (
+            <div className="generic-empty-state">This series is empty</div>
+          ) : (
+            <Table
+              onColumnResizeEndCallback={this.handleColumnResize}
+              isColumnResizing={false}
+              rowHeight={rowHeight}
+              rowsCount={values.length}
+              width={containerWidth}
+              ownerHeight={styleAdjustedHeight}
+              height={styleAdjustedHeight}
+              headerHeight={headerHeight}
+            >
+              {columns.map((columnName, colIndex) => {
+                return (
+                  <Column
+                    isResizable={true}
+                    key={columnName}
+                    columnKey={columnName}
+                    header={<Cell>{columnName}</Cell>}
+                    cell={this.handleCustomCell(columnName, values, colIndex)}
+                    width={columnWidths[columnName] || width}
+                    minWidth={minWidth}
+                  />
+                )
+              })}
+            </Table>
+          )}
         </div>
       </div>
     )
diff --git a/ui/src/data_explorer/components/TableTabItem.js b/ui/src/data_explorer/components/TableTabItem.js
index 97ef431dc1..3cbcec0c86 100644
--- a/ui/src/data_explorer/components/TableTabItem.js
+++ b/ui/src/data_explorer/components/TableTabItem.js
@@ -2,13 +2,14 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
 
-const TableTabItem = ({name, index, onClickTab, isActive}) =>
+const TableTabItem = ({name, index, onClickTab, isActive}) => (
   <div
     className={classnames('table--tab', {active: isActive})}
     onClick={onClickTab(index)}
   >
     {name}
   </div>
+)
 
 const {bool, func, number, string} = PropTypes
 
diff --git a/ui/src/data_explorer/components/VisHeader.js b/ui/src/data_explorer/components/VisHeader.js
index e602d7bfa2..057f11086c 100644
--- a/ui/src/data_explorer/components/VisHeader.js
+++ b/ui/src/data_explorer/components/VisHeader.js
@@ -27,32 +27,33 @@ const getCSV = (query, errorThrown) => async () => {
   }
 }
 
-const VisHeader = ({views, view, onToggleView, query, errorThrown}) =>
+const VisHeader = ({views, view, onToggleView, query, errorThrown}) => (
   <div className="graph-heading">
-    {views.length
-      ? <ul className="nav nav-tablist nav-tablist-sm">
-          {views.map(v =>
-            <li
-              key={v}
-              onClick={onToggleView(v)}
-              className={classnames({active: view === v})}
-              data-test={`data-${v}`}
-            >
-              {_.upperFirst(v)}
-            </li>
-          )}
-        </ul>
-      : null}
-    {query
-      ? <div
-          className="btn btn-sm btn-default dlcsv"
-          onClick={getCSV(query, errorThrown)}
-        >
-          <span className="icon download dlcsv" />
-          .csv
-        </div>
-      : null}
+    {views.length ? (
+      <ul className="nav nav-tablist nav-tablist-sm">
+        {views.map(v => (
+          <li
+            key={v}
+            onClick={onToggleView(v)}
+            className={classnames({active: view === v})}
+            data-test={`data-${v}`}
+          >
+            {_.upperFirst(v)}
+          </li>
+        ))}
+      </ul>
+    ) : null}
+    {query ? (
+      <div
+        className="btn btn-sm btn-default dlcsv"
+        onClick={getCSV(query, errorThrown)}
+      >
+        <span className="icon download dlcsv" />
+        .csv
+      </div>
+    ) : null}
   </div>
+)
 
 const {arrayOf, func, shape, string} = PropTypes
 
diff --git a/ui/src/data_explorer/components/WriteDataBody.js b/ui/src/data_explorer/components/WriteDataBody.js
index 5b0f730b15..3dfc429df5 100644
--- a/ui/src/data_explorer/components/WriteDataBody.js
+++ b/ui/src/data_explorer/components/WriteDataBody.js
@@ -15,70 +15,75 @@ const WriteDataBody = ({
   fileInput,
   handleFileOpen,
   isUploading,
-}) =>
+}) => (
   <div className="write-data-form--body">
-    {isManual
-      ? <textarea
-          className="form-control write-data-form--input"
-          autoComplete="off"
-          spellCheck="false"
-          placeholder="<measurement>,<tag_key>=<tag_value> <field_key>=<field_value>"
-          onKeyUp={handleKeyUp}
-          onChange={handleEdit}
-          autoFocus={true}
-          data-test="manual-entry-field"
-        />
-      : <div
+    {isManual ? (
+      <textarea
+        className="form-control write-data-form--input"
+        autoComplete="off"
+        spellCheck="false"
+        placeholder="<measurement>,<tag_key>=<tag_value> <field_key>=<field_value>"
+        onKeyUp={handleKeyUp}
+        onChange={handleEdit}
+        autoFocus={true}
+        data-test="manual-entry-field"
+      />
+    ) : (
+      <div
+        className={
+          uploadContent
+            ? 'write-data-form--file'
+            : 'write-data-form--file write-data-form--file_active'
+        }
+        onClick={handleFileOpen}
+      >
+        {uploadContent ? (
+          <h3 className="write-data-form--filepath_selected">{fileName}</h3>
+        ) : (
+          <h3 className="write-data-form--filepath_empty">
+            Drop a file here or click to upload
+          </h3>
+        )}
+        <div
           className={
             uploadContent
-              ? 'write-data-form--file'
-              : 'write-data-form--file write-data-form--file_active'
+              ? 'write-data-form--graphic write-data-form--graphic_success'
+              : 'write-data-form--graphic'
           }
-          onClick={handleFileOpen}
-        >
-          {uploadContent
-            ? <h3 className="write-data-form--filepath_selected">
-                {fileName}
-              </h3>
-            : <h3 className="write-data-form--filepath_empty">
-                Drop a file here or click to upload
-              </h3>}
-          <div
-            className={
-              uploadContent
-                ? 'write-data-form--graphic write-data-form--graphic_success'
-                : 'write-data-form--graphic'
-            }
-          />
-          <input
-            type="file"
-            onChange={handleFile(false)}
-            className="write-data-form--upload"
-            ref={fileInput}
-            accept="text/*, application/gzip"
-          />
-          {uploadContent &&
-            <span className="write-data-form--file-submit">
-              <button className="btn btn-md btn-success" onClick={handleSubmit}>
-                Write this File
-              </button>
-              <button
-                className="btn btn-md btn-default"
-                onClick={handleCancelFile}
-              >
-                Cancel
-              </button>
-            </span>}
-        </div>}
-    {isManual &&
+        />
+        <input
+          type="file"
+          onChange={handleFile(false)}
+          className="write-data-form--upload"
+          ref={fileInput}
+          accept="text/*, application/gzip"
+        />
+        {uploadContent && (
+          <span className="write-data-form--file-submit">
+            <button className="btn btn-md btn-success" onClick={handleSubmit}>
+              Write this File
+            </button>
+            <button
+              className="btn btn-md btn-default"
+              onClick={handleCancelFile}
+            >
+              Cancel
+            </button>
+          </span>
+        )}
+      </div>
+    )}
+    {isManual && (
       <WriteDataFooter
         isUploading={isUploading}
         isManual={isManual}
         inputContent={inputContent}
         handleSubmit={handleSubmit}
         uploadContent={uploadContent}
-      />}
+      />
+    )}
   </div>
+)
 
 const {func, string, bool} = PropTypes
 
diff --git a/ui/src/data_explorer/components/WriteDataFooter.js b/ui/src/data_explorer/components/WriteDataFooter.js
index d224c3f05b..b25850ac72 100644
--- a/ui/src/data_explorer/components/WriteDataFooter.js
+++ b/ui/src/data_explorer/components/WriteDataFooter.js
@@ -10,26 +10,28 @@ const WriteDataFooter = ({
   uploadContent,
   handleSubmit,
   isUploading,
-}) =>
+}) => (
   <div className="write-data-form--footer">
-    {isManual
-      ? <span className="write-data-form--helper">
-          Need help writing InfluxDB Line Protocol? -&nbsp;
-          <a
-            href="https://docs.influxdata.com/influxdb/latest/write_protocols/line_protocol_tutorial/"
-            target="_blank"
-          >
-            See Documentation
-          </a>
-        </span>
-      : <span className="write-data-form--helper">
-          <a
-            href="https://docs.influxdata.com/influxdb/v1.2//tools/shell/#import-data-from-a-file-with-import"
-            target="_blank"
-          >
-            File Upload Documentation
-          </a>
-        </span>}
+    {isManual ? (
+      <span className="write-data-form--helper">
+        Need help writing InfluxDB Line Protocol? -&nbsp;
+        <a
+          href="https://docs.influxdata.com/influxdb/latest/write_protocols/line_protocol_tutorial/"
+          target="_blank"
+        >
+          See Documentation
+        </a>
+      </span>
+    ) : (
+      <span className="write-data-form--helper">
+        <a
+          href="https://docs.influxdata.com/influxdb/v1.2//tools/shell/#import-data-from-a-file-with-import"
+          target="_blank"
+        >
+          File Upload Documentation
+        </a>
+      </span>
+    )}
     <button
       className={isUploading ? `${submitButton} ${spinner}` : submitButton}
       onClick={handleSubmit}
@@ -43,6 +45,7 @@ const WriteDataFooter = ({
       Write
     </button>
   </div>
+)
 
 const {bool, func, string} = PropTypes
 
diff --git a/ui/src/data_explorer/components/WriteDataHeader.js b/ui/src/data_explorer/components/WriteDataHeader.js
index aa03d97bb3..6daf305898 100644
--- a/ui/src/data_explorer/components/WriteDataHeader.js
+++ b/ui/src/data_explorer/components/WriteDataHeader.js
@@ -9,7 +9,7 @@ const WriteDataHeader = ({
   toggleWriteView,
   isManual,
   onClose,
-}) =>
+}) => (
   <div className="write-data-form--header">
     <div className="page-header__left">
       <h1 className="page-header__title">Write Data To</h1>
@@ -38,6 +38,7 @@ const WriteDataHeader = ({
       <span className="page-header__dismiss" onClick={onClose} />
     </div>
   </div>
+)
 
 const {func, string, bool} = PropTypes
 
diff --git a/ui/src/data_explorer/containers/DataExplorer.js b/ui/src/data_explorer/containers/DataExplorer.js
index 5040f16dab..f81a2050ed 100644
--- a/ui/src/data_explorer/containers/DataExplorer.js
+++ b/ui/src/data_explorer/containers/DataExplorer.js
@@ -95,17 +95,17 @@ class DataExplorer extends Component {
     const selectedDatabase = _.get(queryConfigs, ['0', 'database'], null)
     return (
       <div className="data-explorer">
-        {showWriteForm
-          ? <OverlayTechnologies>
-              <WriteDataForm
-                source={source}
-                errorThrown={errorThrownAction}
-                selectedDatabase={selectedDatabase}
-                onClose={this.handleCloseWriteData}
-                writeLineProtocol={writeLineProtocol}
-              />
-            </OverlayTechnologies>
-          : null}
+        {showWriteForm ? (
+          <OverlayTechnologies>
+            <WriteDataForm
+              source={source}
+              errorThrown={errorThrownAction}
+              selectedDatabase={selectedDatabase}
+              onClose={this.handleCloseWriteData}
+              writeLineProtocol={writeLineProtocol}
+            />
+          </OverlayTechnologies>
+        ) : null}
         <Header
           timeRange={timeRange}
           autoRefresh={autoRefresh}
diff --git a/ui/src/data_explorer/containers/Header.js b/ui/src/data_explorer/containers/Header.js
index 025089f986..3cb90bacd2 100644
--- a/ui/src/data_explorer/containers/Header.js
+++ b/ui/src/data_explorer/containers/Header.js
@@ -16,7 +16,7 @@ const Header = ({
   onManualRefresh,
   onChooseTimeRange,
   onChooseAutoRefresh,
-}) =>
+}) => (
   <div className="page-header full-width">
     <div className="page-header__container">
       <div className="page-header__left">
@@ -47,6 +47,7 @@ const Header = ({
       </div>
     </div>
   </div>
+)
 
 Header.propTypes = {
   onChooseAutoRefresh: func.isRequired,
diff --git a/ui/src/external/download.js b/ui/src/external/download.js
index 358a3dd9ad..4b55853d6e 100644
--- a/ui/src/external/download.js
+++ b/ui/src/external/download.js
@@ -37,7 +37,10 @@ const download = (data, strFileName, strMimeType) => {
 
   if (url && url.length < 2048) {
     // if no filename and no mime, assume a url was passed as the only argument
-    fileName = url.split('/').pop().split('?')[0]
+    fileName = url
+      .split('/')
+      .pop()
+      .split('?')[0]
     anchor.href = url // assign href prop to temp anchor
     if (anchor.href.indexOf(url) !== -1) {
       // if the browser determines that it's a potentially valid url path:
diff --git a/ui/src/hosts/components/HostRow.js b/ui/src/hosts/components/HostRow.js
index 62f20065a3..7814931e78 100644
--- a/ui/src/hosts/components/HostRow.js
+++ b/ui/src/hosts/components/HostRow.js
@@ -23,9 +23,7 @@ class HostRow extends Component {
     return (
       <div className="hosts-table--tr">
         <div className="hosts-table--td" style={{width: colName}}>
-          <Link to={`/sources/${source.id}/hosts/${name}`}>
-            {name}
-          </Link>
+          <Link to={`/sources/${source.id}/hosts/${name}`}>{name}</Link>
         </div>
         <div className="hosts-table--td" style={{width: colStatus}}>
           <div
diff --git a/ui/src/hosts/components/HostsTable.js b/ui/src/hosts/components/HostsTable.js
index b0bc342561..f26cf7aa8e 100644
--- a/ui/src/hosts/components/HostsTable.js
+++ b/ui/src/hosts/components/HostsTable.js
@@ -102,61 +102,61 @@ class HostsTable extends Component {
     return (
       <div className="panel">
         <div className="panel-heading">
-          <h2 className="panel-title">
-            {hostsTitle}
-          </h2>
+          <h2 className="panel-title">{hostsTitle}</h2>
           <SearchBar
             placeholder="Filter by Host..."
             onSearch={this.updateSearchTerm}
           />
         </div>
         <div className="panel-body">
-          {hostCount > 0 && !hostsError.length
-            ? <div className="hosts-table">
-                <div className="hosts-table--thead">
-                  <div className="hosts-table--tr">
-                    <div
-                      onClick={this.updateSort('name')}
-                      className={this.sortableClasses('name')}
-                      style={{width: colName}}
-                    >
-                      Host
-                    </div>
-                    <div
-                      onClick={this.updateSort('deltaUptime')}
-                      className={this.sortableClasses('deltaUptime')}
-                      style={{width: colStatus}}
-                    >
-                      Status
-                    </div>
-                    <div
-                      onClick={this.updateSort('cpu')}
-                      className={this.sortableClasses('cpu')}
-                      style={{width: colCPU}}
-                    >
-                      CPU
-                    </div>
-                    <div
-                      onClick={this.updateSort('load')}
-                      className={this.sortableClasses('load')}
-                      style={{width: colLoad}}
-                    >
-                      Load
-                    </div>
-                    <div className="hosts-table--th">Apps</div>
+          {hostCount > 0 && !hostsError.length ? (
+            <div className="hosts-table">
+              <div className="hosts-table--thead">
+                <div className="hosts-table--tr">
+                  <div
+                    onClick={this.updateSort('name')}
+                    className={this.sortableClasses('name')}
+                    style={{width: colName}}
+                  >
+                    Host
                   </div>
+                  <div
+                    onClick={this.updateSort('deltaUptime')}
+                    className={this.sortableClasses('deltaUptime')}
+                    style={{width: colStatus}}
+                  >
+                    Status
+                  </div>
+                  <div
+                    onClick={this.updateSort('cpu')}
+                    className={this.sortableClasses('cpu')}
+                    style={{width: colCPU}}
+                  >
+                    CPU
+                  </div>
+                  <div
+                    onClick={this.updateSort('load')}
+                    className={this.sortableClasses('load')}
+                    style={{width: colLoad}}
+                  >
+                    Load
+                  </div>
+                  <div className="hosts-table--th">Apps</div>
                 </div>
-                <InfiniteScroll
-                  items={sortedHosts.map(h =>
-                    <HostRow key={h.name} host={h} source={source} />
-                  )}
-                  itemHeight={26}
-                  className="hosts-table--tbody"
-                />
               </div>
-            : <div className="generic-empty-state">
-                <h4 style={{margin: '90px 0'}}>No Hosts found</h4>
-              </div>}
+              <InfiniteScroll
+                items={sortedHosts.map(h => (
+                  <HostRow key={h.name} host={h} source={source} />
+                ))}
+                itemHeight={26}
+                className="hosts-table--tbody"
+              />
+            </div>
+          ) : (
+            <div className="generic-empty-state">
+              <h4 style={{margin: '90px 0'}}>No Hosts found</h4>
+            </div>
+          )}
         </div>
       </div>
     )
diff --git a/ui/src/hosts/containers/HostPage.js b/ui/src/hosts/containers/HostPage.js
index 9af0f055ab..a52276c9d1 100644
--- a/ui/src/hosts/containers/HostPage.js
+++ b/ui/src/hosts/containers/HostPage.js
@@ -96,7 +96,7 @@ class HostPage extends Component {
     const autoflowCells = autoflowLayouts.reduce((allCells, layout) => {
       return allCells.concat(
         layout.cells.map(cell => {
-          const x = cellCount * cellWidth % pageWidth
+          const x = (cellCount * cellWidth) % pageWidth
           const y = Math.floor(cellCount * cellWidth / pageWidth) * cellHeight
           cellCount += 1
           return Object.assign(cell, {
diff --git a/ui/src/index.js b/ui/src/index.js
index bd5160a30d..4ea8b15e47 100644
--- a/ui/src/index.js
+++ b/ui/src/index.js
@@ -122,66 +122,50 @@ const Root = React.createClass({
   },
 
   render() {
-    return !this.state.ready // eslint-disable-line no-negated-condition
-      ? <div className="page-spinner" />
-      : <Provider store={store}>
-          <Router history={history}>
-            <Route path="/" component={UserIsAuthenticated(CheckSources)} />
-            <Route path="/login" component={UserIsNotAuthenticated(Login)} />
-            <Route
-              path="/purgatory"
-              component={UserIsAuthenticated(Purgatory)}
-            />
-            <Route
-              path="/sources/new"
-              component={UserIsAuthenticated(SourcePage)}
-            />
-            <Route
-              path="/sources/:sourceID"
-              component={UserIsAuthenticated(App)}
-            >
-              <Route component={CheckSources}>
-                <Route path="status" component={StatusPage} />
-                <Route path="hosts" component={HostsPage} />
-                <Route path="hosts/:hostID" component={HostPage} />
-                <Route
-                  path="chronograf/data-explorer"
-                  component={DataExplorer}
-                />
-                <Route path="dashboards" component={DashboardsPage} />
-                <Route
-                  path="dashboards/:dashboardID"
-                  component={DashboardPage}
-                />
-                <Route path="alerts" component={AlertsApp} />
-                <Route path="alert-rules" component={KapacitorRulesPage} />
-                <Route
-                  path="alert-rules/:ruleID"
-                  component={KapacitorRulePage}
-                />
-                <Route path="alert-rules/new" component={KapacitorRulePage} />
-                <Route path="tickscript/new" component={TickscriptPage} />
-                <Route path="tickscript/:ruleID" component={TickscriptPage} />
-                <Route path="kapacitors/new" component={KapacitorPage} />
-                <Route path="kapacitors/:id/edit" component={KapacitorPage} />
-                <Route
-                  path="kapacitors/:id/edit:hash"
-                  component={KapacitorPage}
-                />
-                <Route path="kapacitor-tasks" component={KapacitorTasksPage} />
-                <Route
-                  path="admin-chronograf"
-                  component={AdminChronografPage}
-                />
-                <Route path="admin-influxdb" component={AdminInfluxDBPage} />
-                <Route path="manage-sources" component={ManageSources} />
-                <Route path="manage-sources/new" component={SourcePage} />
-                <Route path="manage-sources/:id/edit" component={SourcePage} />
-              </Route>
+    return !this.state.ready ? ( // eslint-disable-line no-negated-condition
+      <div className="page-spinner" />
+    ) : (
+      <Provider store={store}>
+        <Router history={history}>
+          <Route path="/" component={UserIsAuthenticated(CheckSources)} />
+          <Route path="/login" component={UserIsNotAuthenticated(Login)} />
+          <Route path="/purgatory" component={UserIsAuthenticated(Purgatory)} />
+          <Route
+            path="/sources/new"
+            component={UserIsAuthenticated(SourcePage)}
+          />
+          <Route path="/sources/:sourceID" component={UserIsAuthenticated(App)}>
+            <Route component={CheckSources}>
+              <Route path="status" component={StatusPage} />
+              <Route path="hosts" component={HostsPage} />
+              <Route path="hosts/:hostID" component={HostPage} />
+              <Route path="chronograf/data-explorer" component={DataExplorer} />
+              <Route path="dashboards" component={DashboardsPage} />
+              <Route path="dashboards/:dashboardID" component={DashboardPage} />
+              <Route path="alerts" component={AlertsApp} />
+              <Route path="alert-rules" component={KapacitorRulesPage} />
+              <Route path="alert-rules/:ruleID" component={KapacitorRulePage} />
+              <Route path="alert-rules/new" component={KapacitorRulePage} />
+              <Route path="tickscript/new" component={TickscriptPage} />
+              <Route path="tickscript/:ruleID" component={TickscriptPage} />
+              <Route path="kapacitors/new" component={KapacitorPage} />
+              <Route path="kapacitors/:id/edit" component={KapacitorPage} />
+              <Route
+                path="kapacitors/:id/edit:hash"
+                component={KapacitorPage}
+              />
+              <Route path="kapacitor-tasks" component={KapacitorTasksPage} />
+              <Route path="admin-chronograf" component={AdminChronografPage} />
+              <Route path="admin-influxdb" component={AdminInfluxDBPage} />
+              <Route path="manage-sources" component={ManageSources} />
+              <Route path="manage-sources/new" component={SourcePage} />
+              <Route path="manage-sources/:id/edit" component={SourcePage} />
             </Route>
-            <Route path="*" component={NotFound} />
-          </Router>
-        </Provider>
+          </Route>
+          <Route path="*" component={NotFound} />
+        </Router>
+      </Provider>
+    )
   },
 })
 
diff --git a/ui/src/kapacitor/components/AlertTabs.js b/ui/src/kapacitor/components/AlertTabs.js
index 75e6c16fcf..a791a6187a 100644
--- a/ui/src/kapacitor/components/AlertTabs.js
+++ b/ui/src/kapacitor/components/AlertTabs.js
@@ -142,123 +142,134 @@ class AlertTabs extends Component {
       alerta: {
         type: 'Alerta',
         enabled: this.getEnabled(configSections, 'alerta'),
-        renderComponent: () =>
+        renderComponent: () => (
           <AlertaConfig
             onSave={this.handleSaveConfig('alerta')}
             config={this.getSection(configSections, 'alerta')}
             onTest={this.handleTestConfig('alerta')}
             enabled={this.getEnabled(configSections, 'alerta')}
-          />,
+          />
+        ),
       },
       hipchat: {
         type: 'HipChat',
         enabled: this.getEnabled(configSections, 'hipchat'),
-        renderComponent: () =>
+        renderComponent: () => (
           <HipChatConfig
             onSave={this.handleSaveConfig('hipchat')}
             config={this.getSection(configSections, 'hipchat')}
             onTest={this.handleTestConfig('hipchat')}
             enabled={this.getEnabled(configSections, 'hipchat')}
-          />,
+          />
+        ),
       },
       opsgenie: {
         type: 'OpsGenie',
         enabled: this.getEnabled(configSections, 'opsgenie'),
-        renderComponent: () =>
+        renderComponent: () => (
           <OpsGenieConfig
             onSave={this.handleSaveConfig('opsgenie')}
             config={this.getSection(configSections, 'opsgenie')}
             onTest={this.handleTestConfig('opsgenie')}
             enabled={this.getEnabled(configSections, 'opsgenie')}
-          />,
+          />
+        ),
       },
       pagerduty: {
         type: 'PagerDuty',
         enabled: this.getEnabled(configSections, 'pagerduty'),
-        renderComponent: () =>
+        renderComponent: () => (
           <PagerDutyConfig
             onSave={this.handleSaveConfig('pagerduty')}
             config={this.getSection(configSections, 'pagerduty')}
             onTest={this.handleTestConfig('pagerduty')}
             enabled={this.getEnabled(configSections, 'pagerduty')}
-          />,
+          />
+        ),
       },
       pushover: {
         type: 'Pushover',
         enabled: this.getEnabled(configSections, 'pushover'),
-        renderComponent: () =>
+        renderComponent: () => (
           <PushoverConfig
             onSave={this.handleSaveConfig('pushover')}
             config={this.getSection(configSections, 'pushover')}
             onTest={this.handleTestConfig('pushover')}
             enabled={this.getEnabled(configSections, 'pushover')}
-          />,
+          />
+        ),
       },
       sensu: {
         type: 'Sensu',
         enabled: this.getEnabled(configSections, 'sensu'),
-        renderComponent: () =>
+        renderComponent: () => (
           <SensuConfig
             onSave={this.handleSaveConfig('sensu')}
             config={this.getSection(configSections, 'sensu')}
             onTest={this.handleTestConfig('sensu')}
             enabled={this.getEnabled(configSections, 'sensu')}
-          />,
+          />
+        ),
       },
       slack: {
         type: 'Slack',
         enabled: this.getEnabled(configSections, 'slack'),
-        renderComponent: () =>
+        renderComponent: () => (
           <SlackConfig
             onSave={this.handleSaveConfig('slack')}
             config={this.getSection(configSections, 'slack')}
             onTest={this.handleTestConfig('slack')}
             enabled={this.getEnabled(configSections, 'slack')}
-          />,
+          />
+        ),
       },
       smtp: {
         type: 'SMTP',
         enabled: this.getEnabled(configSections, 'smtp'),
-        renderComponent: () =>
+        renderComponent: () => (
           <SMTPConfig
             onSave={this.handleSaveConfig('smtp')}
             config={this.getSection(configSections, 'smtp')}
             onTest={this.handleTestConfig('smtp')}
             enabled={this.getEnabled(configSections, 'smtp')}
-          />,
+          />
+        ),
       },
       talk: {
         type: 'Talk',
         enabled: this.getEnabled(configSections, 'talk'),
-        renderComponent: () =>
+        renderComponent: () => (
           <TalkConfig
             onSave={this.handleSaveConfig('talk')}
             config={this.getSection(configSections, 'talk')}
             onTest={this.handleTestConfig('talk')}
             enabled={this.getEnabled(configSections, 'talk')}
-          />,
+          />
+        ),
       },
       telegram: {
         type: 'Telegram',
         enabled: this.getEnabled(configSections, 'telegram'),
-        renderComponent: () =>
+        renderComponent: () => (
           <TelegramConfig
             onSave={this.handleSaveConfig('telegram')}
             config={this.getSection(configSections, 'telegram')}
             onTest={this.handleTestConfig('telegram')}
             enabled={this.getEnabled(configSections, 'telegram')}
-          />,
+          />
+        ),
       },
       victorops: {
         type: 'VictorOps',
         enabled: this.getEnabled(configSections, 'victorops'),
-        renderComponent: () =>
+        renderComponent: () => (
           <VictorOpsConfig
             onSave={this.handleSaveConfig('victorops')}
             config={this.getSection(configSections, 'victorops')}
             onTest={this.handleTestConfig('victorops')}
             enabled={this.getEnabled(configSections, 'victorops')}
-          />,
+          />
+        ),
       },
     }
     return (
diff --git a/ui/src/kapacitor/components/CodeData.js b/ui/src/kapacitor/components/CodeData.js
index 779bc87a71..081c75aff7 100644
--- a/ui/src/kapacitor/components/CodeData.js
+++ b/ui/src/kapacitor/components/CodeData.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-const CodeData = ({onClickTemplate, template}) =>
+const CodeData = ({onClickTemplate, template}) => (
   <code
     className="rule-builder--message-template"
     data-tip={template.text}
@@ -9,6 +9,7 @@ const CodeData = ({onClickTemplate, template}) =>
   >
     {template.label}
   </code>
+)
 
 const {func, shape, string} = PropTypes
 
diff --git a/ui/src/kapacitor/components/DataSection.js b/ui/src/kapacitor/components/DataSection.js
index d0d4a53bc1..4261522e6e 100644
--- a/ui/src/kapacitor/components/DataSection.js
+++ b/ui/src/kapacitor/components/DataSection.js
@@ -76,16 +76,16 @@ const DataSection = ({
           onGroupByTag={handleGroupByTag}
           onToggleTagAcceptance={handleToggleTagAcceptance}
         />
-        {isDeadman
-          ? null
-          : <FieldList
-              query={query}
-              onToggleField={handleToggleField}
-              isKapacitorRule={isKapacitorRule}
-              onGroupByTime={handleGroupByTime}
-              removeFuncs={handleRemoveFuncs}
-              applyFuncsToField={handleApplyFuncsToField(onAddEvery)}
-            />}
+        {isDeadman ? null : (
+          <FieldList
+            query={query}
+            onToggleField={handleToggleField}
+            isKapacitorRule={isKapacitorRule}
+            onGroupByTime={handleGroupByTime}
+            removeFuncs={handleRemoveFuncs}
+            applyFuncsToField={handleApplyFuncsToField(onAddEvery)}
+          />
+        )}
       </div>
     </div>
   )
diff --git a/ui/src/kapacitor/components/Deadman.js b/ui/src/kapacitor/components/Deadman.js
index 9e9cbe0c31..b5419caf21 100644
--- a/ui/src/kapacitor/components/Deadman.js
+++ b/ui/src/kapacitor/components/Deadman.js
@@ -7,7 +7,7 @@ const periods = PERIODS.map(text => {
   return {text}
 })
 
-const Deadman = ({rule, onChange}) =>
+const Deadman = ({rule, onChange}) => (
   <div className="rule-section--row rule-section--row-first rule-section--row-last">
     <p>Send Alert if Data is missing for</p>
     <Dropdown
@@ -18,6 +18,7 @@ const Deadman = ({rule, onChange}) =>
       onChoose={onChange}
     />
   </div>
+)
 
 const {shape, string, func} = PropTypes
 
diff --git a/ui/src/kapacitor/components/HandlerCheckbox.js b/ui/src/kapacitor/components/HandlerCheckbox.js
index 04cff08dd8..9928fd0b64 100644
--- a/ui/src/kapacitor/components/HandlerCheckbox.js
+++ b/ui/src/kapacitor/components/HandlerCheckbox.js
@@ -6,7 +6,7 @@ const HandlerCheckbox = ({
   fieldDisplay,
   selectedHandler,
   handleModifyHandler,
-}) =>
+}) => (
   <div className="form-group ">
     <div className="form-control-static handler-checkbox">
       <input
@@ -16,11 +16,10 @@ const HandlerCheckbox = ({
         defaultChecked={selectedHandler[fieldName]}
         onClick={handleModifyHandler(selectedHandler, fieldName)}
       />
-      <label htmlFor={fieldName}>
-        {fieldDisplay}
-      </label>
+      <label htmlFor={fieldName}>{fieldDisplay}</label>
     </div>
   </div>
+)
 
 const {func, shape, string, bool} = PropTypes
 
diff --git a/ui/src/kapacitor/components/HandlerEmpty.js b/ui/src/kapacitor/components/HandlerEmpty.js
index 11cc80a2c0..46b3aff681 100644
--- a/ui/src/kapacitor/components/HandlerEmpty.js
+++ b/ui/src/kapacitor/components/HandlerEmpty.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-const HandlerEmpty = ({onGoToConfig, validationError}) =>
+const HandlerEmpty = ({onGoToConfig, validationError}) => (
   <div className="endpoint-tab-contents">
     <div className="endpoint-tab--parameters">
       <div className="endpoint-tab--parameters--empty">
@@ -20,6 +20,7 @@ const HandlerEmpty = ({onGoToConfig, validationError}) =>
       </div>
     </div>
   </div>
+)
 
 const {string, func} = PropTypes
 
diff --git a/ui/src/kapacitor/components/HandlerInput.js b/ui/src/kapacitor/components/HandlerInput.js
index 1b63c2925d..73f98ac841 100644
--- a/ui/src/kapacitor/components/HandlerInput.js
+++ b/ui/src/kapacitor/components/HandlerInput.js
@@ -17,9 +17,7 @@ const HandlerInput = ({
   const formGroupClass = `form-group ${fieldColumns}`
   return (
     <div className={formGroupClass}>
-      <label htmlFor={fieldName}>
-        {fieldDisplay}
-      </label>
+      <label htmlFor={fieldName}>{fieldDisplay}</label>
       <div className={redacted ? 'form-control-static redacted-handler' : null}>
         <input
           name={fieldName}
@@ -42,11 +40,11 @@ const HandlerInput = ({
           spellCheck="false"
           disabled={disabled}
         />
-        {redacted
-          ? <span className="alert-value-set">
-              <span className="icon checkmark" /> Value set in Config
-            </span>
-          : null}
+        {redacted ? (
+          <span className="alert-value-set">
+            <span className="icon checkmark" /> Value set in Config
+          </span>
+        ) : null}
       </div>
     </div>
   )
diff --git a/ui/src/kapacitor/components/HandlerTabs.js b/ui/src/kapacitor/components/HandlerTabs.js
index 5e4f62292e..675ebe91d4 100644
--- a/ui/src/kapacitor/components/HandlerTabs.js
+++ b/ui/src/kapacitor/components/HandlerTabs.js
@@ -9,25 +9,25 @@ const HandlerTabs = ({
   handleChooseHandler,
   handleRemoveHandler,
 }) =>
-  handlersOnThisAlert.length
-    ? <ul className="endpoint-tabs">
-        {handlersOnThisAlert.map(ep =>
-          <li
-            key={uuid.v4()}
-            className={classnames('endpoint-tab', {
-              active: ep.alias === (selectedHandler && selectedHandler.alias),
-            })}
-            onClick={handleChooseHandler(ep)}
-          >
-            {ep.type}
-            <button
-              className="endpoint-tab--delete"
-              onClick={handleRemoveHandler(ep)}
-            />
-          </li>
-        )}
-      </ul>
-    : null
+  handlersOnThisAlert.length ? (
+    <ul className="endpoint-tabs">
+      {handlersOnThisAlert.map(ep => (
+        <li
+          key={uuid.v4()}
+          className={classnames('endpoint-tab', {
+            active: ep.alias === (selectedHandler && selectedHandler.alias),
+          })}
+          onClick={handleChooseHandler(ep)}
+        >
+          {ep.type}
+          <button
+            className="endpoint-tab--delete"
+            onClick={handleRemoveHandler(ep)}
+          />
+        </li>
+      ))}
+    </ul>
+  ) : null
 
 const {shape, func, array} = PropTypes
 
diff --git a/ui/src/kapacitor/components/KapacitorRules.js b/ui/src/kapacitor/components/KapacitorRules.js
index 2909b3a0e0..4dd6eba1ec 100644
--- a/ui/src/kapacitor/components/KapacitorRules.js
+++ b/ui/src/kapacitor/components/KapacitorRules.js
@@ -45,21 +45,18 @@ const KapacitorRules = ({
 
   const builderRules = rules.filter(r => r.query)
 
-  const builderHeader = `${builderRules.length} Alert Rule${builderRules.length ===
-  1
-    ? ''
-    : 's'}`
-  const scriptsHeader = `${rules.length} TICKscript${rules.length === 1
-    ? ''
-    : 's'}`
+  const builderHeader = `${builderRules.length} Alert Rule${
+    builderRules.length === 1 ? '' : 's'
+  }`
+  const scriptsHeader = `${rules.length} TICKscript${
+    rules.length === 1 ? '' : 's'
+  }`
 
   return (
     <PageContents source={source}>
       <div className="panel">
         <div className="panel-heading">
-          <h2 className="panel-title">
-            {builderHeader}
-          </h2>
+          <h2 className="panel-title">{builderHeader}</h2>
           <Link
             to={`/sources/${source.id}/alert-rules/new`}
             className="btn btn-sm btn-primary"
@@ -79,9 +76,7 @@ const KapacitorRules = ({
       </div>
       <div className="panel">
         <div className="panel-heading">
-          <h2 className="panel-title">
-            {scriptsHeader}
-          </h2>
+          <h2 className="panel-title">{scriptsHeader}</h2>
           <Link
             to={`/sources/${source.id}/tickscript/new`}
             className="btn btn-sm btn-success"
@@ -103,7 +98,7 @@ const KapacitorRules = ({
   )
 }
 
-const PageContents = ({children}) =>
+const PageContents = ({children}) => (
   <div className="page">
     <div className="page-header">
       <div className="page-header__container">
@@ -122,13 +117,12 @@ const PageContents = ({children}) =>
     <FancyScrollbar className="page-contents fancy-scroll--kapacitor">
       <div className="container-fluid">
         <div className="row">
-          <div className="col-md-12">
-            {children}
-          </div>
+          <div className="col-md-12">{children}</div>
         </div>
       </div>
     </FancyScrollbar>
   </div>
+)
 
 const {arrayOf, bool, func, node, shape} = PropTypes
 
diff --git a/ui/src/kapacitor/components/KapacitorRulesTable.js b/ui/src/kapacitor/components/KapacitorRulesTable.js
index d894600457..6367057a72 100644
--- a/ui/src/kapacitor/components/KapacitorRulesTable.js
+++ b/ui/src/kapacitor/components/KapacitorRulesTable.js
@@ -15,7 +15,7 @@ const {
   colActions,
 } = TASKS_TABLE
 
-const KapacitorRulesTable = ({rules, source, onDelete, onChangeRuleStatus}) =>
+const KapacitorRulesTable = ({rules, source, onDelete, onChangeRuleStatus}) => (
   <table className="table v-center table-highlight">
     <thead>
       <tr>
@@ -43,10 +43,11 @@ const KapacitorRulesTable = ({rules, source, onDelete, onChangeRuleStatus}) =>
       })}
     </tbody>
   </table>
+)
 
 const handleDelete = (rule, onDelete) => onDelete(rule)
 
-const RuleRow = ({rule, source, onDelete, onChangeRuleStatus}) =>
+const RuleRow = ({rule, source, onDelete, onChangeRuleStatus}) => (
   <tr key={rule.id}>
     <td style={{minWidth: colName}}>
       <Link to={`/sources/${source.id}/alert-rules/${rule.id}`}>
@@ -56,12 +57,8 @@ const RuleRow = ({rule, source, onDelete, onChangeRuleStatus}) =>
     <td style={{width: colTrigger, textTransform: 'capitalize'}}>
       {rule.trigger}
     </td>
-    <td style={{width: colMessage}}>
-      {rule.message}
-    </td>
-    <td style={{width: colAlerts}}>
-      {parseAlertNodeList(rule)}
-    </td>
+    <td style={{width: colMessage}}>{rule.message}</td>
+    <td style={{width: colAlerts}}>{parseAlertNodeList(rule)}</td>
     <td style={{width: colEnabled}} className="text-center">
       <div className="dark-checkbox">
         <input
@@ -84,6 +81,7 @@ const RuleRow = ({rule, source, onDelete, onChangeRuleStatus}) =>
       />
     </td>
   </tr>
+)
 
 const {arrayOf, func, shape, string} = PropTypes
 
diff --git a/ui/src/kapacitor/components/LogItemHTTP.js b/ui/src/kapacitor/components/LogItemHTTP.js
index 450ce76897..89607e1518 100644
--- a/ui/src/kapacitor/components/LogItemHTTP.js
+++ b/ui/src/kapacitor/components/LogItemHTTP.js
@@ -1,13 +1,11 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-const LogItemHTTP = ({logItem}) =>
+const LogItemHTTP = ({logItem}) => (
   <div className="logs-table--row">
     <div className="logs-table--divider">
       <div className={`logs-table--level ${logItem.lvl}`} />
-      <div className="logs-table--timestamp">
-        {logItem.ts}
-      </div>
+      <div className="logs-table--timestamp">{logItem.ts}</div>
     </div>
     <div className="logs-table--details">
       <div className="logs-table--service">HTTP Request</div>
@@ -16,6 +14,7 @@ const LogItemHTTP = ({logItem}) =>
       </div>
     </div>
   </div>
+)
 
 const {shape, string} = PropTypes
 
diff --git a/ui/src/kapacitor/components/LogItemHTTPError.js b/ui/src/kapacitor/components/LogItemHTTPError.js
index 0be95e49d6..ecaba7233c 100644
--- a/ui/src/kapacitor/components/LogItemHTTPError.js
+++ b/ui/src/kapacitor/components/LogItemHTTPError.js
@@ -1,23 +1,20 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-const LogItemHTTPError = ({logItem}) =>
+const LogItemHTTPError = ({logItem}) => (
   <div className="logs-table--row" key={logItem.key}>
     <div className="logs-table--divider">
       <div className={`logs-table--level ${logItem.lvl}`} />
-      <div className="logs-table--timestamp">
-        {logItem.ts}
-      </div>
+      <div className="logs-table--timestamp">{logItem.ts}</div>
     </div>
     <div className="logs-table--details">
       <div className="logs-table--service error">HTTP Server</div>
       <div className="logs-table--columns">
-        <div className="logs-table--key-values error">
-          ERROR: {logItem.msg}
-        </div>
+        <div className="logs-table--key-values error">ERROR: {logItem.msg}</div>
       </div>
     </div>
   </div>
+)
 
 const {shape, string} = PropTypes
 
diff --git a/ui/src/kapacitor/components/LogItemInfluxDBDebug.js b/ui/src/kapacitor/components/LogItemInfluxDBDebug.js
index 4d3734b5bd..0a2a833ed4 100644
--- a/ui/src/kapacitor/components/LogItemInfluxDBDebug.js
+++ b/ui/src/kapacitor/components/LogItemInfluxDBDebug.js
@@ -1,13 +1,11 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-const LogItemInfluxDBDebug = ({logItem}) =>
+const LogItemInfluxDBDebug = ({logItem}) => (
   <div className="logs-table--row">
     <div className="logs-table--divider">
       <div className={`logs-table--level ${logItem.lvl}`} />
-      <div className="logs-table--timestamp">
-        {logItem.ts}
-      </div>
+      <div className="logs-table--timestamp">{logItem.ts}</div>
     </div>
     <div className="logs-table--details">
       <div className="logs-table--service debug">InfluxDB</div>
@@ -20,6 +18,7 @@ const LogItemInfluxDBDebug = ({logItem}) =>
       </div>
     </div>
   </div>
+)
 
 const {shape, string} = PropTypes
 
diff --git a/ui/src/kapacitor/components/LogItemKapacitorDebug.js b/ui/src/kapacitor/components/LogItemKapacitorDebug.js
index 50f0867f15..5d550d4efd 100644
--- a/ui/src/kapacitor/components/LogItemKapacitorDebug.js
+++ b/ui/src/kapacitor/components/LogItemKapacitorDebug.js
@@ -1,23 +1,20 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-const LogItemKapacitorDebug = ({logItem}) =>
+const LogItemKapacitorDebug = ({logItem}) => (
   <div className="logs-table--row">
     <div className="logs-table--divider">
       <div className={`logs-table--level ${logItem.lvl}`} />
-      <div className="logs-table--timestamp">
-        {logItem.ts}
-      </div>
+      <div className="logs-table--timestamp">{logItem.ts}</div>
     </div>
     <div className="logs-table--details">
       <div className="logs-table--service debug">Kapacitor</div>
       <div className="logs-table--columns">
-        <div className="logs-table--key-values debug">
-          DEBUG: {logItem.msg}
-        </div>
+        <div className="logs-table--key-values debug">DEBUG: {logItem.msg}</div>
       </div>
     </div>
   </div>
+)
 
 const {shape, string} = PropTypes
 
diff --git a/ui/src/kapacitor/components/LogItemKapacitorError.js b/ui/src/kapacitor/components/LogItemKapacitorError.js
index 0429bf6d33..d07c5b7452 100644
--- a/ui/src/kapacitor/components/LogItemKapacitorError.js
+++ b/ui/src/kapacitor/components/LogItemKapacitorError.js
@@ -1,23 +1,20 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-const LogItemKapacitorError = ({logItem}) =>
+const LogItemKapacitorError = ({logItem}) => (
   <div className="logs-table--row">
     <div className="logs-table--divider">
       <div className={`logs-table--level ${logItem.lvl}`} />
-      <div className="logs-table--timestamp">
-        {logItem.ts}
-      </div>
+      <div className="logs-table--timestamp">{logItem.ts}</div>
     </div>
     <div className="logs-table--details">
       <div className="logs-table--service error">Kapacitor</div>
       <div className="logs-table--columns">
-        <div className="logs-table--key-values error">
-          ERROR: {logItem.msg}
-        </div>
+        <div className="logs-table--key-values error">ERROR: {logItem.msg}</div>
       </div>
     </div>
   </div>
+)
 
 const {shape, string} = PropTypes
 
diff --git a/ui/src/kapacitor/components/LogItemKapacitorPoint.js b/ui/src/kapacitor/components/LogItemKapacitorPoint.js
index f8289af109..205d0eb572 100644
--- a/ui/src/kapacitor/components/LogItemKapacitorPoint.js
+++ b/ui/src/kapacitor/components/LogItemKapacitorPoint.js
@@ -10,26 +10,22 @@ const renderKeysAndValues = (object, name) => {
 
   return (
     <div className="logs-table--column">
-      <h1>
-        {`${sortedObjKeys.length} ${name}`}
-      </h1>
+      <h1>{`${sortedObjKeys.length} ${name}`}</h1>
       <div className="logs-table--scrollbox">
-        {sortedObjKeys.map(objKey =>
+        {sortedObjKeys.map(objKey => (
           <div key={objKey} className="logs-table--key-value">
             {objKey}: <span>{object[objKey]}</span>
           </div>
-        )}
+        ))}
       </div>
     </div>
   )
 }
-const LogItemKapacitorPoint = ({logItem}) =>
+const LogItemKapacitorPoint = ({logItem}) => (
   <div className="logs-table--row">
     <div className="logs-table--divider">
       <div className={`logs-table--level ${logItem.lvl}`} />
-      <div className="logs-table--timestamp">
-        {logItem.ts}
-      </div>
+      <div className="logs-table--timestamp">{logItem.ts}</div>
     </div>
     <div className="logs-table--details">
       <div className="logs-table--service">Kapacitor Point</div>
@@ -39,6 +35,7 @@ const LogItemKapacitorPoint = ({logItem}) =>
       </div>
     </div>
   </div>
+)
 
 const {shape, string} = PropTypes
 
diff --git a/ui/src/kapacitor/components/LogItemSession.js b/ui/src/kapacitor/components/LogItemSession.js
index 623f9f155a..b3f45e9fb5 100644
--- a/ui/src/kapacitor/components/LogItemSession.js
+++ b/ui/src/kapacitor/components/LogItemSession.js
@@ -1,20 +1,17 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-const LogItemSession = ({logItem}) =>
+const LogItemSession = ({logItem}) => (
   <div className="logs-table--row">
     <div className="logs-table--divider">
       <div className={`logs-table--level ${logItem.lvl}`} />
-      <div className="logs-table--timestamp">
-        {logItem.ts}
-      </div>
+      <div className="logs-table--timestamp">{logItem.ts}</div>
     </div>
     <div className="logs-table--details">
-      <div className="logs-table--session">
-        {logItem.msg}
-      </div>
+      <div className="logs-table--session">{logItem.msg}</div>
     </div>
   </div>
+)
 
 const {shape, string} = PropTypes
 
diff --git a/ui/src/kapacitor/components/LogsTable.js b/ui/src/kapacitor/components/LogsTable.js
index b4ecdce048..96a1a75c59 100644
--- a/ui/src/kapacitor/components/LogsTable.js
+++ b/ui/src/kapacitor/components/LogsTable.js
@@ -6,7 +6,7 @@ import FancyScrollbar from 'src/shared/components/FancyScrollbar'
 
 const numLogsToRender = 200
 
-const LogsTable = ({logs}) =>
+const LogsTable = ({logs}) => (
   <div className="logs-table">
     <div className="logs-table--header">
       {`${numLogsToRender} Most Recent Logs`}
@@ -20,6 +20,7 @@ const LogsTable = ({logs}) =>
         .map(log => <LogsTableRow key={log.key} logItem={log} />)}
     </FancyScrollbar>
   </div>
+)
 
 const {arrayOf, shape, string} = PropTypes
 
diff --git a/ui/src/kapacitor/components/LogsTableRow.js b/ui/src/kapacitor/components/LogsTableRow.js
index 91c14d4644..db4416bf75 100644
--- a/ui/src/kapacitor/components/LogsTableRow.js
+++ b/ui/src/kapacitor/components/LogsTableRow.js
@@ -36,18 +36,12 @@ const LogsTableRow = ({logItem}) => {
     <div className="logs-table--row">
       <div className="logs-table--divider">
         <div className={`logs-table--level ${logItem.lvl}`} />
-        <div className="logs-table--timestamp">
-          {logItem.ts}
-        </div>
+        <div className="logs-table--timestamp">{logItem.ts}</div>
       </div>
       <div className="logs-table--details">
-        <div className="logs-table--service">
-          {logItem.service || '--'}
-        </div>
+        <div className="logs-table--service">{logItem.service || '--'}</div>
         <div className="logs-table--columns">
-          <div className="logs-table--key-values">
-            {logItem.msg || '--'}
-          </div>
+          <div className="logs-table--key-values">{logItem.msg || '--'}</div>
         </div>
       </div>
     </div>
diff --git a/ui/src/kapacitor/components/LogsToggle.js b/ui/src/kapacitor/components/LogsToggle.js
index af6a2e41ae..a95bd8610d 100644
--- a/ui/src/kapacitor/components/LogsToggle.js
+++ b/ui/src/kapacitor/components/LogsToggle.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-const LogsToggle = ({areLogsVisible, onToggleLogsVisibility}) =>
+const LogsToggle = ({areLogsVisible, onToggleLogsVisibility}) => (
   <ul className="nav nav-tablist nav-tablist-sm nav-tablist-malachite logs-toggle">
     <li
       className={areLogsVisible ? null : 'active'}
@@ -16,6 +16,7 @@ const LogsToggle = ({areLogsVisible, onToggleLogsVisibility}) =>
       Editor + Logs
     </li>
   </ul>
+)
 
 const {bool, func} = PropTypes
 
diff --git a/ui/src/kapacitor/components/Relative.js b/ui/src/kapacitor/components/Relative.js
index 0ce0935dfe..fd89960bd4 100644
--- a/ui/src/kapacitor/components/Relative.js
+++ b/ui/src/kapacitor/components/Relative.js
@@ -12,7 +12,7 @@ const Relative = ({
   onRuleTypeInputChange,
   onDropdownChange,
   rule: {values: {change, shift, operator, value}},
-}) =>
+}) => (
   <div className="rule-section--row rule-section--row-first rule-section--border-bottom">
     <p>Send Alert when</p>
     <Dropdown
@@ -52,6 +52,7 @@ const Relative = ({
     </form>
     {change === CHANGES[1] ? <p>%</p> : null}
   </div>
+)
 
 const {shape, string, func} = PropTypes
 
diff --git a/ui/src/kapacitor/components/RuleHandlers.js b/ui/src/kapacitor/components/RuleHandlers.js
index ffe1d3456d..3205da6030 100644
--- a/ui/src/kapacitor/components/RuleHandlers.js
+++ b/ui/src/kapacitor/components/RuleHandlers.js
@@ -169,24 +169,24 @@ class RuleHandlers extends Component {
               className="dropdown-170 rule-message--add-endpoint"
             />
           </div>
-          {handlersOnThisAlert.length
-            ? <div className="rule-message--endpoints">
-                <HandlerTabs
-                  handlersOnThisAlert={handlersOnThisAlert}
-                  selectedHandler={selectedHandler}
-                  handleChooseHandler={this.handleChooseHandler}
-                  handleRemoveHandler={this.handleRemoveHandler}
-                />
-                <HandlerOptions
-                  selectedHandler={selectedHandler}
-                  handleModifyHandler={this.handleModifyHandler}
-                  updateDetails={ruleActions.updateDetails}
-                  rule={rule}
-                  onGoToConfig={onGoToConfig}
-                  validationError={validationError}
-                />
-              </div>
-            : null}
+          {handlersOnThisAlert.length ? (
+            <div className="rule-message--endpoints">
+              <HandlerTabs
+                handlersOnThisAlert={handlersOnThisAlert}
+                selectedHandler={selectedHandler}
+                handleChooseHandler={this.handleChooseHandler}
+                handleRemoveHandler={this.handleRemoveHandler}
+              />
+              <HandlerOptions
+                selectedHandler={selectedHandler}
+                handleModifyHandler={this.handleModifyHandler}
+                updateDetails={ruleActions.updateDetails}
+                rule={rule}
+                onGoToConfig={onGoToConfig}
+                validationError={validationError}
+              />
+            </div>
+          ) : null}
         </div>
       </div>
     )
diff --git a/ui/src/kapacitor/components/RuleHeaderSave.js b/ui/src/kapacitor/components/RuleHeaderSave.js
index 953dcd808f..5516eeec0e 100644
--- a/ui/src/kapacitor/components/RuleHeaderSave.js
+++ b/ui/src/kapacitor/components/RuleHeaderSave.js
@@ -3,20 +3,22 @@ import PropTypes from 'prop-types'
 import ReactTooltip from 'react-tooltip'
 import SourceIndicator from 'shared/components/SourceIndicator'
 
-const RuleHeaderSave = ({onSave, validationError}) =>
+const RuleHeaderSave = ({onSave, validationError}) => (
   <div className="page-header__right">
     <SourceIndicator />
-    {validationError
-      ? <button
-          className="btn btn-success btn-sm disabled"
-          data-for="save-kapacitor-tooltip"
-          data-tip={validationError}
-        >
-          Save Rule
-        </button>
-      : <button className="btn btn-success btn-sm" onClick={onSave}>
-          Save Rule
-        </button>}
+    {validationError ? (
+      <button
+        className="btn btn-success btn-sm disabled"
+        data-for="save-kapacitor-tooltip"
+        data-tip={validationError}
+      >
+        Save Rule
+      </button>
+    ) : (
+      <button className="btn btn-success btn-sm" onClick={onSave}>
+        Save Rule
+      </button>
+    )}
     <ReactTooltip
       id="save-kapacitor-tooltip"
       effect="solid"
@@ -25,6 +27,7 @@ const RuleHeaderSave = ({onSave, validationError}) =>
       class="influx-tooltip kapacitor-tooltip"
     />
   </div>
+)
 
 const {func, string} = PropTypes
 
diff --git a/ui/src/kapacitor/components/RuleMessageText.js b/ui/src/kapacitor/components/RuleMessageText.js
index 8fcb0373a7..cc3dfb9b04 100644
--- a/ui/src/kapacitor/components/RuleMessageText.js
+++ b/ui/src/kapacitor/components/RuleMessageText.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-const RuleMessageText = ({rule, updateMessage}) =>
+const RuleMessageText = ({rule, updateMessage}) => (
   <div className="rule-builder--message">
     <textarea
       className="form-control input-sm form-malachite monotype"
@@ -11,6 +11,7 @@ const RuleMessageText = ({rule, updateMessage}) =>
       spellCheck={false}
     />
   </div>
+)
 
 const {func, shape} = PropTypes
 
diff --git a/ui/src/kapacitor/components/TICKscriptOverlay.js b/ui/src/kapacitor/components/TICKscriptOverlay.js
index 1dda8bab8c..084b5acbc1 100644
--- a/ui/src/kapacitor/components/TICKscriptOverlay.js
+++ b/ui/src/kapacitor/components/TICKscriptOverlay.js
@@ -2,7 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import OverlayTechnologies from 'shared/components/OverlayTechnologies'
 
-const TICKscriptOverlay = ({tickscript, onClose}) =>
+const TICKscriptOverlay = ({tickscript, onClose}) => (
   <OverlayTechnologies>
     <div className="tick-script-overlay">
       <div className="write-data-form--header">
@@ -14,12 +14,11 @@ const TICKscriptOverlay = ({tickscript, onClose}) =>
         </div>
       </div>
       <div className="write-data-form--body">
-        <pre className="tick-script-overlay--sample">
-          {tickscript}
-        </pre>
+        <pre className="tick-script-overlay--sample">{tickscript}</pre>
       </div>
     </div>
   </OverlayTechnologies>
+)
 
 const {string, func} = PropTypes
 
diff --git a/ui/src/kapacitor/components/TasksTable.js b/ui/src/kapacitor/components/TasksTable.js
index ea49157366..276f1bff0e 100644
--- a/ui/src/kapacitor/components/TasksTable.js
+++ b/ui/src/kapacitor/components/TasksTable.js
@@ -8,7 +8,7 @@ import {TASKS_TABLE} from 'src/kapacitor/constants/tableSizing'
 
 const {colName, colType, colEnabled, colActions} = TASKS_TABLE
 
-const TasksTable = ({tasks, source, onDelete, onChangeRuleStatus}) =>
+const TasksTable = ({tasks, source, onDelete, onChangeRuleStatus}) => (
   <table className="table v-center table-highlight">
     <thead>
       <tr>
@@ -34,10 +34,11 @@ const TasksTable = ({tasks, source, onDelete, onChangeRuleStatus}) =>
       })}
     </tbody>
   </table>
+)
 
 const handleDelete = (task, onDelete) => onDelete(task)
 
-const TaskRow = ({task, source, onDelete, onChangeRuleStatus}) =>
+const TaskRow = ({task, source, onDelete, onChangeRuleStatus}) => (
   <tr key={task.id}>
     <td style={{minWidth: colName}}>
       <Link
@@ -47,9 +48,7 @@ const TaskRow = ({task, source, onDelete, onChangeRuleStatus}) =>
         {task.name}
       </Link>
     </td>
-    <td style={{width: colType, textTransform: 'capitalize'}}>
-      {task.type}
-    </td>
+    <td style={{width: colType, textTransform: 'capitalize'}}>{task.type}</td>
     <td style={{width: colEnabled}} className="text-center">
       <div className="dark-checkbox">
         <input
@@ -72,6 +71,7 @@ const TaskRow = ({task, source, onDelete, onChangeRuleStatus}) =>
       />
     </td>
   </tr>
+)
 
 const {arrayOf, func, shape, string} = PropTypes
 
diff --git a/ui/src/kapacitor/components/Threshold.js b/ui/src/kapacitor/components/Threshold.js
index 3154d99add..cc1ecb2946 100644
--- a/ui/src/kapacitor/components/Threshold.js
+++ b/ui/src/kapacitor/components/Threshold.js
@@ -21,12 +21,10 @@ const Threshold = ({
   query,
   onDropdownChange,
   onRuleTypeInputChange,
-}) =>
+}) => (
   <div className="rule-section--row rule-section--row-first rule-section--border-bottom">
     <p>Send Alert where</p>
-    <span className="rule-builder--metric">
-      {getField(query)}
-    </span>
+    <span className="rule-builder--metric">{getField(query)}</span>
     <p>is</p>
     <Dropdown
       className="dropdown-180"
@@ -50,7 +48,7 @@ const Threshold = ({
             : null
         }
       />
-      {(operator === 'inside range' || operator === 'outside range') &&
+      {(operator === 'inside range' || operator === 'outside range') && (
         <input
           className="form-control input-sm form-malachite monotype"
           name="upper"
@@ -60,9 +58,11 @@ const Threshold = ({
           spellCheck="false"
           value={rangeValue}
           onChange={onRuleTypeInputChange}
-        />}
+        />
+      )}
     </form>
   </div>
+)
 
 const {shape, string, func} = PropTypes
 
diff --git a/ui/src/kapacitor/components/Tickscript.js b/ui/src/kapacitor/components/Tickscript.js
index 8e9d80b894..020fb98bc8 100644
--- a/ui/src/kapacitor/components/Tickscript.js
+++ b/ui/src/kapacitor/components/Tickscript.js
@@ -22,7 +22,7 @@ const Tickscript = ({
   areLogsVisible,
   areLogsEnabled,
   onToggleLogsVisibility,
-}) =>
+}) => (
   <div className="page">
     <TickscriptHeader
       task={task}
@@ -58,6 +58,7 @@ const Tickscript = ({
       {areLogsVisible ? <LogsTable logs={logs} /> : null}
     </div>
   </div>
+)
 
 const {arrayOf, bool, func, shape, string} = PropTypes
 
diff --git a/ui/src/kapacitor/components/TickscriptEditorConsole.js b/ui/src/kapacitor/components/TickscriptEditorConsole.js
index 1b9f102dba..29841d02e7 100644
--- a/ui/src/kapacitor/components/TickscriptEditorConsole.js
+++ b/ui/src/kapacitor/components/TickscriptEditorConsole.js
@@ -15,9 +15,7 @@ const TickscriptEditorConsole = ({consoleMessage, unsavedChanges}) => {
 
   return (
     <div className="tickscript-console">
-      <p className={consoleClass}>
-        {consoleOutput}
-      </p>
+      <p className={consoleClass}>{consoleOutput}</p>
     </div>
   )
 }
diff --git a/ui/src/kapacitor/components/TickscriptEditorControls.js b/ui/src/kapacitor/components/TickscriptEditorControls.js
index 2b045090b2..f57724c8e0 100644
--- a/ui/src/kapacitor/components/TickscriptEditorControls.js
+++ b/ui/src/kapacitor/components/TickscriptEditorControls.js
@@ -14,11 +14,13 @@ const TickscriptEditorControls = ({
   onChangeType,
   onChangeID,
   task,
-}) =>
+}) => (
   <div className="tickscript-controls">
-    {isNewTickscript
-      ? <TickscriptID onChangeID={onChangeID} id={task.id} />
-      : <TickscriptStaticID id={task.name} />}
+    {isNewTickscript ? (
+      <TickscriptID onChangeID={onChangeID} id={task.id} />
+    ) : (
+      <TickscriptStaticID id={task.name} />
+    )}
     <div className="tickscript-controls--right">
       <TickscriptType type={task.type} onChangeType={onChangeType} />
       <MultiSelectDBDropdown
@@ -27,6 +29,7 @@ const TickscriptEditorControls = ({
       />
     </div>
   </div>
+)
 
 const {arrayOf, bool, func, shape, string} = PropTypes
 
diff --git a/ui/src/kapacitor/components/TickscriptHeader.js b/ui/src/kapacitor/components/TickscriptHeader.js
index 59b7379523..0d942801c6 100644
--- a/ui/src/kapacitor/components/TickscriptHeader.js
+++ b/ui/src/kapacitor/components/TickscriptHeader.js
@@ -14,53 +14,59 @@ const TickscriptHeader = ({
   areLogsEnabled,
   isNewTickscript,
   onToggleLogsVisibility,
-}) =>
+}) => (
   <div className="page-header full-width">
     <div className="page-header__container">
       <div className="page-header__left">
         <h1 className="page-header__title">TICKscript Editor</h1>
       </div>
-      {areLogsEnabled &&
+      {areLogsEnabled && (
         <LogsToggle
           areLogsVisible={areLogsVisible}
           areLogsEnabled={areLogsEnabled}
           onToggleLogsVisibility={onToggleLogsVisibility}
-        />}
+        />
+      )}
       <div className="page-header__right">
         <SourceIndicator />
-        {isNewTickscript
-          ? <button
-              className="btn btn-success btn-sm"
-              title="Name your TICKscript to save"
-              onClick={onSave}
-              disabled={!id}
-            >
-              Save New TICKscript
-            </button>
-          : <button
-              className="btn btn-success btn-sm"
-              title="You have unsaved changes"
-              onClick={onSave}
-              disabled={!unsavedChanges}
-            >
-              Save Changes
-            </button>}
-        {unsavedChanges
-          ? <ConfirmButton
-              text="Exit"
-              confirmText="Discard unsaved changes?"
-              confirmAction={onExit}
-            />
-          : <button
-              className="btn btn-default btn-sm"
-              title="Return to Alert Rules"
-              onClick={onExit}
-            >
-              Exit
-            </button>}
+        {isNewTickscript ? (
+          <button
+            className="btn btn-success btn-sm"
+            title="Name your TICKscript to save"
+            onClick={onSave}
+            disabled={!id}
+          >
+            Save New TICKscript
+          </button>
+        ) : (
+          <button
+            className="btn btn-success btn-sm"
+            title="You have unsaved changes"
+            onClick={onSave}
+            disabled={!unsavedChanges}
+          >
+            Save Changes
+          </button>
+        )}
+        {unsavedChanges ? (
+          <ConfirmButton
+            text="Exit"
+            confirmText="Discard unsaved changes?"
+            confirmAction={onExit}
+          />
+        ) : (
+          <button
+            className="btn btn-default btn-sm"
+            title="Return to Alert Rules"
+            onClick={onExit}
+          >
+            Exit
+          </button>
+        )}
       </div>
     </div>
   </div>
+)
 
 const {arrayOf, bool, func, shape, string} = PropTypes
 
diff --git a/ui/src/kapacitor/components/TickscriptID.js b/ui/src/kapacitor/components/TickscriptID.js
index 5d3123c6df..f618b72d24 100644
--- a/ui/src/kapacitor/components/TickscriptID.js
+++ b/ui/src/kapacitor/components/TickscriptID.js
@@ -23,10 +23,9 @@ class TickscriptID extends Component {
   }
 }
 
-export const TickscriptStaticID = ({id}) =>
-  <h1 className="tickscript-controls--name">
-    {id}
-  </h1>
+export const TickscriptStaticID = ({id}) => (
+  <h1 className="tickscript-controls--name">{id}</h1>
+)
 
 const {func, string} = PropTypes
 
diff --git a/ui/src/kapacitor/components/TickscriptType.js b/ui/src/kapacitor/components/TickscriptType.js
index 3523f1c01f..f708be3c78 100644
--- a/ui/src/kapacitor/components/TickscriptType.js
+++ b/ui/src/kapacitor/components/TickscriptType.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 const STREAM = 'stream'
 const BATCH = 'batch'
 
-const TickscriptType = ({type, onChangeType}) =>
+const TickscriptType = ({type, onChangeType}) => (
   <ul className="nav nav-tablist nav-tablist-sm">
     <li
       className={type === STREAM ? 'active' : ''}
@@ -18,6 +18,7 @@ const TickscriptType = ({type, onChangeType}) =>
       Batch
     </li>
   </ul>
+)
 
 const {string, func} = PropTypes
 
diff --git a/ui/src/kapacitor/components/ValuesSection.js b/ui/src/kapacitor/components/ValuesSection.js
index 903cab6dfc..a495fa05a9 100644
--- a/ui/src/kapacitor/components/ValuesSection.js
+++ b/ui/src/kapacitor/components/ValuesSection.js
@@ -35,7 +35,7 @@ const ValuesSection = ({
   queryConfigActions,
   onRuleTypeInputChange,
   onRuleTypeDropdownChange,
-}) =>
+}) => (
   <div className="rule-section">
     <h3 className="rule-section--heading">Alert Type</h3>
     <div className="rule-section--body">
@@ -44,11 +44,11 @@ const ValuesSection = ({
         onSelect={handleChooseTrigger(rule, onChooseTrigger)}
       >
         <TabList isKapacitorTabs="true">
-          {TABS.map(tab =>
+          {TABS.map(tab => (
             <Tab key={tab} isKapacitorTab={true}>
               {tab}
             </Tab>
-          )}
+          ))}
         </TabList>
         <div>
           <h3 className="rule-section--sub-heading">Time Series</h3>
@@ -83,18 +83,19 @@ const ValuesSection = ({
             <Deadman rule={rule} onChange={onDeadmanChange} />
           </TabPanel>
         </TabPanels>
-        {isDeadman(rule)
-          ? null
-          : <RuleGraph
-              rule={rule}
-              query={query}
-              source={source}
-              timeRange={timeRange}
-              onChooseTimeRange={onChooseTimeRange}
-            />}
+        {isDeadman(rule) ? null : (
+          <RuleGraph
+            rule={rule}
+            query={query}
+            source={source}
+            timeRange={timeRange}
+            onChooseTimeRange={onChooseTimeRange}
+          />
+        )}
       </Tabs>
     </div>
   </div>
+)
 
 const {shape, string, func} = PropTypes
 
diff --git a/ui/src/kapacitor/components/handlers/AlertaHandler.js b/ui/src/kapacitor/components/handlers/AlertaHandler.js
index 692942ba61..7b883346c3 100644
--- a/ui/src/kapacitor/components/handlers/AlertaHandler.js
+++ b/ui/src/kapacitor/components/handlers/AlertaHandler.js
@@ -9,91 +9,93 @@ const AlertaHandler = ({
   onGoToConfig,
   validationError,
 }) =>
-  selectedHandler.enabled
-    ? <div className="endpoint-tab-contents">
-        <div className="endpoint-tab--parameters">
-          <h4 className="u-flex u-jc-space-between">
-            Parameters from Kapacitor Configuration
-            <div className="btn btn-default btn-sm" onClick={onGoToConfig}>
-              <span className="icon cog-thick" />
-              {validationError
-                ? 'Exit this Rule and Edit Configuration'
-                : 'Save this Rule and Edit Configuration'}
-            </div>
-          </h4>
-          <div className="faux-form">
-            <HandlerInput
-              selectedHandler={selectedHandler}
-              handleModifyHandler={handleModifyHandler}
-              fieldName="token"
-              fieldDisplay="Token"
-              placeholder="ex: my_token"
-              redacted={true}
-              fieldColumns="col-md-12"
-            />
-            <HandlerInput
-              selectedHandler={selectedHandler}
-              handleModifyHandler={handleModifyHandler}
-              fieldName="environment"
-              fieldDisplay="Environment"
-              placeholder="ex: environment"
-            />
+  selectedHandler.enabled ? (
+    <div className="endpoint-tab-contents">
+      <div className="endpoint-tab--parameters">
+        <h4 className="u-flex u-jc-space-between">
+          Parameters from Kapacitor Configuration
+          <div className="btn btn-default btn-sm" onClick={onGoToConfig}>
+            <span className="icon cog-thick" />
+            {validationError
+              ? 'Exit this Rule and Edit Configuration'
+              : 'Save this Rule and Edit Configuration'}
+          </div>
+        </h4>
+        <div className="faux-form">
+          <HandlerInput
+            selectedHandler={selectedHandler}
+            handleModifyHandler={handleModifyHandler}
+            fieldName="token"
+            fieldDisplay="Token"
+            placeholder="ex: my_token"
+            redacted={true}
+            fieldColumns="col-md-12"
+          />
+          <HandlerInput
+            selectedHandler={selectedHandler}
+            handleModifyHandler={handleModifyHandler}
+            fieldName="environment"
+            fieldDisplay="Environment"
+            placeholder="ex: environment"
+          />
 
-            <HandlerInput
-              selectedHandler={selectedHandler}
-              handleModifyHandler={handleModifyHandler}
-              fieldName="origin"
-              fieldDisplay="Origin"
-              placeholder="ex: origin"
-            />
-          </div>
-        </div>
-        <div className="endpoint-tab--parameters">
-          <h4>Parameters for this Alert Handler</h4>
-          <div className="faux-form">
-            <HandlerInput
-              selectedHandler={selectedHandler}
-              handleModifyHandler={handleModifyHandler}
-              fieldName="resource"
-              fieldDisplay="Resource"
-              placeholder=""
-            />
-            <HandlerInput
-              selectedHandler={selectedHandler}
-              handleModifyHandler={handleModifyHandler}
-              fieldName="event"
-              fieldDisplay="Event"
-              placeholder=""
-            />
-            <HandlerInput
-              selectedHandler={selectedHandler}
-              handleModifyHandler={handleModifyHandler}
-              fieldName="group"
-              fieldDisplay="Group"
-              placeholder=""
-            />
-            <HandlerInput
-              selectedHandler={selectedHandler}
-              handleModifyHandler={handleModifyHandler}
-              fieldName="value"
-              fieldDisplay="Value"
-              placeholder=""
-            />
-            <HandlerInput
-              selectedHandler={selectedHandler}
-              handleModifyHandler={handleModifyHandler}
-              fieldName="service"
-              fieldDisplay="Service"
-              placeholder=""
-              parseToArray={true}
-            />
-          </div>
+          <HandlerInput
+            selectedHandler={selectedHandler}
+            handleModifyHandler={handleModifyHandler}
+            fieldName="origin"
+            fieldDisplay="Origin"
+            placeholder="ex: origin"
+          />
         </div>
       </div>
-    : <HandlerEmpty
-        onGoToConfig={onGoToConfig}
-        validationError={validationError}
-      />
+      <div className="endpoint-tab--parameters">
+        <h4>Parameters for this Alert Handler</h4>
+        <div className="faux-form">
+          <HandlerInput
+            selectedHandler={selectedHandler}
+            handleModifyHandler={handleModifyHandler}
+            fieldName="resource"
+            fieldDisplay="Resource"
+            placeholder=""
+          />
+          <HandlerInput
+            selectedHandler={selectedHandler}
+            handleModifyHandler={handleModifyHandler}
+            fieldName="event"
+            fieldDisplay="Event"
+            placeholder=""
+          />
+          <HandlerInput
+            selectedHandler={selectedHandler}
+            handleModifyHandler={handleModifyHandler}
+            fieldName="group"
+            fieldDisplay="Group"
+            placeholder=""
+          />
+          <HandlerInput
+            selectedHandler={selectedHandler}
+            handleModifyHandler={handleModifyHandler}
+            fieldName="value"
+            fieldDisplay="Value"
+            placeholder=""
+          />
+          <HandlerInput
+            selectedHandler={selectedHandler}
+            handleModifyHandler={handleModifyHandler}
+            fieldName="service"
+            fieldDisplay="Service"
+            placeholder=""
+            parseToArray={true}
+          />
+        </div>
+      </div>
+    </div>
+  ) : (
+    <HandlerEmpty
+      onGoToConfig={onGoToConfig}
+      validationError={validationError}
+    />
+  )
 
 const {func, shape, string} = PropTypes
 
diff --git a/ui/src/kapacitor/components/handlers/EmailHandler.js b/ui/src/kapacitor/components/handlers/EmailHandler.js
index 953c7340ac..cbf4e8d308 100644
--- a/ui/src/kapacitor/components/handlers/EmailHandler.js
+++ b/ui/src/kapacitor/components/handlers/EmailHandler.js
@@ -12,68 +12,70 @@ const EmailHandler = ({
   onGoToConfig,
   validationError,
 }) =>
-  selectedHandler.enabled
-    ? <div className="endpoint-tab-contents">
-        <div className="endpoint-tab--parameters">
-          <h4 className="u-flex u-jc-space-between">
-            Parameters from Kapacitor Configuration
-            <div className="btn btn-default btn-sm" onClick={onGoToConfig}>
-              <span className="icon cog-thick" />
-              {validationError
-                ? 'Exit this Rule and Edit Configuration'
-                : 'Save this Rule and Edit Configuration'}
-            </div>
-          </h4>
-          <div className="faux-form">
-            <HandlerInput
-              selectedHandler={selectedHandler}
-              handleModifyHandler={handleModifyHandler}
-              fieldName="from"
-              fieldDisplay="From E-mail"
-              placeholder=""
-              disabled={true}
-              fieldColumns="col-md-4"
-            />
-            <HandlerInput
-              selectedHandler={selectedHandler}
-              handleModifyHandler={handleModifyHandler}
-              fieldName="host"
-              fieldDisplay="SMTP Host"
-              placeholder=""
-              disabled={true}
-              fieldColumns="col-md-4"
-            />
-            <HandlerInput
-              selectedHandler={selectedHandler}
-              handleModifyHandler={handleModifyHandler}
-              fieldName="port"
-              fieldDisplay="SMTP Port"
-              placeholder=""
-              disabled={true}
-              fieldColumns="col-md-4"
-            />
-          </div>
-        </div>
-        <div className="endpoint-tab--parameters">
-          <h4>Parameters for this Alert Handler</h4>
-          <div className="faux-form">
-            <HandlerInput
-              selectedHandler={selectedHandler}
-              handleModifyHandler={handleModifyHandler}
-              fieldName="to"
-              fieldDisplay="Recipient E-mail Addresses: (separated by spaces)"
-              placeholder="ex: bob@domain.com susan@domain.com"
-              parseToArray={true}
-              fieldColumns="col-md-12"
-            />
-            <RuleDetailsText rule={rule} updateDetails={updateDetails} />
+  selectedHandler.enabled ? (
+    <div className="endpoint-tab-contents">
+      <div className="endpoint-tab--parameters">
+        <h4 className="u-flex u-jc-space-between">
+          Parameters from Kapacitor Configuration
+          <div className="btn btn-default btn-sm" onClick={onGoToConfig}>
+            <span className="icon cog-thick" />
+            {validationError
+              ? 'Exit this Rule and Edit Configuration'
+              : 'Save this Rule and Edit Configuration'}
           </div>
+        </h4>
+        <div className="faux-form">
+          <HandlerInput
+            selectedHandler={selectedHandler}
+            handleModifyHandler={handleModifyHandler}
+            fieldName="from"
+            fieldDisplay="From E-mail"
+            placeholder=""
+            disabled={true}
+            fieldColumns="col-md-4"
+          />
+          <HandlerInput
+            selectedHandler={selectedHandler}
+            handleModifyHandler={handleModifyHandler}
+            fieldName="host"
+            fieldDisplay="SMTP Host"
+            placeholder=""
+            disabled={true}
+            fieldColumns="col-md-4"
+          />
+          <HandlerInput
+            selectedHandler={selectedHandler}
+            handleModifyHandler={handleModifyHandler}
+            fieldName="port"
+            fieldDisplay="SMTP Port"
+            placeholder=""
+            disabled={true}
+            fieldColumns="col-md-4"
+          />
         </div>
       </div>
-    : <HandlerEmpty
-        onGoToConfig={onGoToConfig}
-        validationError={validationError}
-      />
+      <div className="endpoint-tab--parameters">
+        <h4>Parameters for this Alert Handler</h4>
+        <div className="faux-form">
+          <HandlerInput
+            selectedHandler={selectedHandler}
+            handleModifyHandler={handleModifyHandler}
+            fieldName="to"
+            fieldDisplay="Recipient E-mail Addresses: (separated by spaces)"
+            placeholder="ex: bob@domain.com susan@domain.com"
+            parseToArray={true}
+            fieldColumns="col-md-12"
+          />
+          <RuleDetailsText rule={rule} updateDetails={updateDetails} />
+        </div>
+      </div>
+    </div>
+  ) : (
+    <HandlerEmpty
+      onGoToConfig={onGoToConfig}
+      validationError={validationError}
+    />
+  )
 
 const {func, shape, string} = PropTypes
 
diff --git a/ui/src/kapacitor/components/handlers/ExecHandler.js b/ui/src/kapacitor/components/handlers/ExecHandler.js
index 136083909f..8259a1aa0d 100644
--- a/ui/src/kapacitor/components/handlers/ExecHandler.js
+++ b/ui/src/kapacitor/components/handlers/ExecHandler.js
@@ -2,7 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import HandlerInput from 'src/kapacitor/components/HandlerInput'
 
-const ExecHandler = ({selectedHandler, handleModifyHandler}) =>
+const ExecHandler = ({selectedHandler, handleModifyHandler}) => (
   <div className="endpoint-tab-contents">
     <div className="endpoint-tab--parameters">
       <h4>Parameters for this Alert Handler</h4>
@@ -19,6 +19,7 @@ const ExecHandler = ({selectedHandler, handleModifyHandler}) =>
       </div>
     </div>
   </div>
+)
 
 const {func, shape} = PropTypes
 
diff --git a/ui/src/kapacitor/components/handlers/HipchatHandler.js b/ui/src/kapacitor/components/handlers/HipchatHandler.js
index bca5098859..bfd2b5dc35 100644
--- a/ui/src/kapacitor/components/handlers/HipchatHandler.js
+++ b/ui/src/kapacitor/components/handlers/HipchatHandler.js
@@ -9,50 +9,52 @@ const HipchatHandler = ({
   onGoToConfig,
   validationError,
 }) =>
-  selectedHandler.enabled
-    ? <div className="endpoint-tab-contents">
-        <div className="endpoint-tab--parameters">
-          <h4 className="u-flex u-jc-space-between">
-            Parameters from Kapacitor Configuration
-            <div className="btn btn-default btn-sm" onClick={onGoToConfig}>
-              <span className="icon cog-thick" />
-              {validationError
-                ? 'Exit this Rule and Edit Configuration'
-                : 'Save this Rule and Edit Configuration'}
-            </div>
-          </h4>
-          <div className="faux-form">
-            <HandlerInput
-              selectedHandler={selectedHandler}
-              handleModifyHandler={handleModifyHandler}
-              fieldName="token"
-              fieldDisplay="Token:"
-              placeholder="ex: the_token"
-              redacted={true}
-              fieldColumns="col-md-12"
-            />
-            <HandlerInput
-              selectedHandler={selectedHandler}
-              handleModifyHandler={handleModifyHandler}
-              fieldName="url"
-              fieldDisplay="Subdomain Url"
-              placeholder="ex: hipchat_subdomain"
-              disabled={true}
-            />
-            <HandlerInput
-              selectedHandler={selectedHandler}
-              handleModifyHandler={handleModifyHandler}
-              fieldName="room"
-              fieldDisplay="Room:"
-              placeholder="ex: room_name"
-            />
+  selectedHandler.enabled ? (
+    <div className="endpoint-tab-contents">
+      <div className="endpoint-tab--parameters">
+        <h4 className="u-flex u-jc-space-between">
+          Parameters from Kapacitor Configuration
+          <div className="btn btn-default btn-sm" onClick={onGoToConfig}>
+            <span className="icon cog-thick" />
+            {validationError
+              ? 'Exit this Rule and Edit Configuration'
+              : 'Save this Rule and Edit Configuration'}
           </div>
+        </h4>
+        <div className="faux-form">
+          <HandlerInput
+            selectedHandler={selectedHandler}
+            handleModifyHandler={handleModifyHandler}
+            fieldName="token"
+            fieldDisplay="Token:"
+            placeholder="ex: the_token"
+            redacted={true}
+            fieldColumns="col-md-12"
+          />
+          <HandlerInput
+            selectedHandler={selectedHandler}
+            handleModifyHandler={handleModifyHandler}
+            fieldName="url"
+            fieldDisplay="Subdomain Url"
+            placeholder="ex: hipchat_subdomain"
+            disabled={true}
+          />
+          <HandlerInput
+            selectedHandler={selectedHandler}
+            handleModifyHandler={handleModifyHandler}
+            fieldName="room"
+            fieldDisplay="Room:"
+            placeholder="ex: room_name"
+          />
         </div>
       </div>
-    : <HandlerEmpty
-        onGoToConfig={onGoToConfig}
-        validationError={validationError}
-      />
+    </div>
+  ) : (
+    <HandlerEmpty
+      onGoToConfig={onGoToConfig}
+      validationError={validationError}
+    />
+  )
 
 const {func, shape, string} = PropTypes
 
diff --git a/ui/src/kapacitor/components/handlers/LogHandler.js b/ui/src/kapacitor/components/handlers/LogHandler.js
index 2eabf11165..fe414511eb 100644
--- a/ui/src/kapacitor/components/handlers/LogHandler.js
+++ b/ui/src/kapacitor/components/handlers/LogHandler.js
@@ -2,7 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import HandlerInput from 'src/kapacitor/components/HandlerInput'
 
-const LogHandler = ({selectedHandler, handleModifyHandler}) =>
+const LogHandler = ({selectedHandler, handleModifyHandler}) => (
   <div className="endpoint-tab-contents">
     <div className="endpoint-tab--parameters">
       <h4>Parameters for this Alert Handler</h4>
@@ -18,6 +18,7 @@ const LogHandler = ({selectedHandler, handleModifyHandler}) =>
       </div>
     </div>
   </div>
+)
 
 const {func, shape} = PropTypes
 
diff --git a/ui/src/kapacitor/components/handlers/OpsgenieHandler.js b/ui/src/kapacitor/components/handlers/OpsgenieHandler.js
index e7ee1fe253..ed0d1ea4ea 100644
--- a/ui/src/kapacitor/components/handlers/OpsgenieHandler.js
+++ b/ui/src/kapacitor/components/handlers/OpsgenieHandler.js
@@ -9,57 +9,59 @@ const OpsgenieHandler = ({
   onGoToConfig,
   validationError,
 }) =>
-  selectedHandler.enabled
-    ? <div className="endpoint-tab-contents">
-        <div className="endpoint-tab--parameters">
-          <h4 className="u-flex u-jc-space-between">
-            Parameters from Kapacitor Configuration
-            <div className="btn btn-default btn-sm" onClick={onGoToConfig}>
-              <span className="icon cog-thick" />
-              {validationError
-                ? 'Exit this Rule and Edit Configuration'
-                : 'Save this Rule and Edit Configuration'}
-            </div>
-          </h4>
-          <div className="faux-form">
-            <HandlerInput
-              selectedHandler={selectedHandler}
-              handleModifyHandler={handleModifyHandler}
-              fieldName="api-key"
-              fieldDisplay="API-key"
-              placeholder=""
-              redacted={true}
-              disabled={true}
-              fieldColumns="col-md-12"
-            />
-          </div>
-        </div>
-        <div className="endpoint-tab--parameters">
-          <h4>Parameters for this Alert Handler:</h4>
-          <div className="faux-form">
-            <HandlerInput
-              selectedHandler={selectedHandler}
-              handleModifyHandler={handleModifyHandler}
-              fieldName="teams"
-              fieldDisplay="Teams"
-              placeholder="ex: teams_name"
-              parseToArray={true}
-            />
-            <HandlerInput
-              selectedHandler={selectedHandler}
-              handleModifyHandler={handleModifyHandler}
-              fieldName="recipients"
-              fieldDisplay="Recipients"
-              placeholder="ex: recipients_name"
-              parseToArray={true}
-            />
+  selectedHandler.enabled ? (
+    <div className="endpoint-tab-contents">
+      <div className="endpoint-tab--parameters">
+        <h4 className="u-flex u-jc-space-between">
+          Parameters from Kapacitor Configuration
+          <div className="btn btn-default btn-sm" onClick={onGoToConfig}>
+            <span className="icon cog-thick" />
+            {validationError
+              ? 'Exit this Rule and Edit Configuration'
+              : 'Save this Rule and Edit Configuration'}
           </div>
+        </h4>
+        <div className="faux-form">
+          <HandlerInput
+            selectedHandler={selectedHandler}
+            handleModifyHandler={handleModifyHandler}
+            fieldName="api-key"
+            fieldDisplay="API-key"
+            placeholder=""
+            redacted={true}
+            disabled={true}
+            fieldColumns="col-md-12"
+          />
         </div>
       </div>
-    : <HandlerEmpty
-        onGoToConfig={onGoToConfig}
-        validationError={validationError}
-      />
+      <div className="endpoint-tab--parameters">
+        <h4>Parameters for this Alert Handler:</h4>
+        <div className="faux-form">
+          <HandlerInput
+            selectedHandler={selectedHandler}
+            handleModifyHandler={handleModifyHandler}
+            fieldName="teams"
+            fieldDisplay="Teams"
+            placeholder="ex: teams_name"
+            parseToArray={true}
+          />
+          <HandlerInput
+            selectedHandler={selectedHandler}
+            handleModifyHandler={handleModifyHandler}
+            fieldName="recipients"
+            fieldDisplay="Recipients"
+            placeholder="ex: recipients_name"
+            parseToArray={true}
+          />
+        </div>
+      </div>
+    </div>
+  ) : (
+    <HandlerEmpty
+      onGoToConfig={onGoToConfig}
+      validationError={validationError}
+    />
+  )
 
 const {func, shape, string} = PropTypes
 
diff --git a/ui/src/kapacitor/components/handlers/PagerdutyHandler.js b/ui/src/kapacitor/components/handlers/PagerdutyHandler.js
index 1f0700143e..ec9519b378 100644
--- a/ui/src/kapacitor/components/handlers/PagerdutyHandler.js
+++ b/ui/src/kapacitor/components/handlers/PagerdutyHandler.js
@@ -9,33 +9,35 @@ const PagerdutyHandler = ({
   onGoToConfig,
   validationError,
 }) =>
-  selectedHandler.enabled
-    ? <div className="endpoint-tab-contents">
-        <div className="endpoint-tab--parameters">
-          <h4 className="u-flex u-jc-space-between">
-            Parameters from Kapacitor Configuration
-            <div className="btn btn-default btn-sm" onClick={onGoToConfig}>
-              <span className="icon cog-thick" />
-              {validationError
-                ? 'Exit this Rule and Edit Configuration'
-                : 'Save this Rule and Edit Configuration'}
-            </div>
-          </h4>
-          <HandlerInput
-            selectedHandler={selectedHandler}
-            handleModifyHandler={handleModifyHandler}
-            fieldName="serviceKey"
-            fieldDisplay="Service Key:"
-            placeholder="ex: service_key"
-            redacted={true}
-            fieldColumns="col-md-12"
-          />
-        </div>
+  selectedHandler.enabled ? (
+    <div className="endpoint-tab-contents">
+      <div className="endpoint-tab--parameters">
+        <h4 className="u-flex u-jc-space-between">
+          Parameters from Kapacitor Configuration
+          <div className="btn btn-default btn-sm" onClick={onGoToConfig}>
+            <span className="icon cog-thick" />
+            {validationError
+              ? 'Exit this Rule and Edit Configuration'
+              : 'Save this Rule and Edit Configuration'}
+          </div>
+        </h4>
+        <HandlerInput
+          selectedHandler={selectedHandler}
+          handleModifyHandler={handleModifyHandler}
+          fieldName="serviceKey"
+          fieldDisplay="Service Key:"
+          placeholder="ex: service_key"
+          redacted={true}
+          fieldColumns="col-md-12"
+        />
       </div>
-    : <HandlerEmpty
-        onGoToConfig={onGoToConfig}
-        validationError={validationError}
-      />
+    </div>
+  ) : (
+    <HandlerEmpty
+      onGoToConfig={onGoToConfig}
+      validationError={validationError}
+    />
+  )
 
 const {func, shape, string} = PropTypes
 
diff --git a/ui/src/kapacitor/components/handlers/PostHandler.js b/ui/src/kapacitor/components/handlers/PostHandler.js
index e5b4879004..1ca7fe2423 100644
--- a/ui/src/kapacitor/components/handlers/PostHandler.js
+++ b/ui/src/kapacitor/components/handlers/PostHandler.js
@@ -2,7 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import HandlerInput from 'src/kapacitor/components/HandlerInput'
 
-const PostHandler = ({selectedHandler, handleModifyHandler}) =>
+const PostHandler = ({selectedHandler, handleModifyHandler}) => (
   <div className="endpoint-tab-contents">
     <div className="endpoint-tab--parameters">
       <h4>Parameters for this Alert Handler</h4>
@@ -32,6 +32,7 @@ const PostHandler = ({selectedHandler, handleModifyHandler}) =>
       </div>
     </div>
   </div>
+)
 
 const {func, shape} = PropTypes
 
diff --git a/ui/src/kapacitor/components/handlers/PushoverHandler.js b/ui/src/kapacitor/components/handlers/PushoverHandler.js
index e9a97aa346..cb9b5f84f3 100644
--- a/ui/src/kapacitor/components/handlers/PushoverHandler.js
+++ b/ui/src/kapacitor/components/handlers/PushoverHandler.js
@@ -9,84 +9,86 @@ const PushoverHandler = ({
   onGoToConfig,
   validationError,
 }) =>
-  selectedHandler.enabled
-    ? <div className="endpoint-tab-contents">
-        <div className="endpoint-tab--parameters">
-          <h4 className="u-flex u-jc-space-between">
-            Parameters from Kapacitor Configuration
-            <div className="btn btn-default btn-sm" onClick={onGoToConfig}>
-              <span className="icon cog-thick" />
-              {validationError
-                ? 'Exit this Rule and Edit Configuration'
-                : 'Save this Rule and Edit Configuration'}
-            </div>
-          </h4>
-          <div className="faux-form">
-            <HandlerInput
-              selectedHandler={selectedHandler}
-              handleModifyHandler={handleModifyHandler}
-              fieldName="token"
-              fieldDisplay="Token"
-              placeholder=""
-              disabled={true}
-              redacted={true}
-            />
-            <HandlerInput
-              selectedHandler={selectedHandler}
-              handleModifyHandler={handleModifyHandler}
-              fieldName="userKey"
-              fieldDisplay="User Key"
-              placeholder=""
-              redacted={true}
-            />
-          </div>
-        </div>
-        <div className="endpoint-tab--parameters">
-          <h4>Parameters for this Alert Handler</h4>
-          <div className="faux-form">
-            <HandlerInput
-              selectedHandler={selectedHandler}
-              handleModifyHandler={handleModifyHandler}
-              fieldName="title"
-              fieldDisplay="Alert Title:"
-              placeholder="ex: Important Alert"
-              fieldColumns="col-md-12"
-            />
-            <HandlerInput
-              selectedHandler={selectedHandler}
-              handleModifyHandler={handleModifyHandler}
-              fieldName="url"
-              fieldDisplay="URL:"
-              placeholder="ex: https://influxdata.com"
-            />
-            <HandlerInput
-              selectedHandler={selectedHandler}
-              handleModifyHandler={handleModifyHandler}
-              fieldName="urlTitle"
-              fieldDisplay="URL Title:"
-              placeholder="ex: InfluxData"
-            />
-            <HandlerInput
-              selectedHandler={selectedHandler}
-              handleModifyHandler={handleModifyHandler}
-              fieldName="device"
-              fieldDisplay="Devices: (comma separated)"
-              placeholder="ex: dv1, dv2"
-            />
-            <HandlerInput
-              selectedHandler={selectedHandler}
-              handleModifyHandler={handleModifyHandler}
-              fieldName="sound"
-              fieldDisplay="Alert Sound:"
-              placeholder="ex: alien"
-            />
+  selectedHandler.enabled ? (
+    <div className="endpoint-tab-contents">
+      <div className="endpoint-tab--parameters">
+        <h4 className="u-flex u-jc-space-between">
+          Parameters from Kapacitor Configuration
+          <div className="btn btn-default btn-sm" onClick={onGoToConfig}>
+            <span className="icon cog-thick" />
+            {validationError
+              ? 'Exit this Rule and Edit Configuration'
+              : 'Save this Rule and Edit Configuration'}
           </div>
+        </h4>
+        <div className="faux-form">
+          <HandlerInput
+            selectedHandler={selectedHandler}
+            handleModifyHandler={handleModifyHandler}
+            fieldName="token"
+            fieldDisplay="Token"
+            placeholder=""
+            disabled={true}
+            redacted={true}
+          />
+          <HandlerInput
+            selectedHandler={selectedHandler}
+            handleModifyHandler={handleModifyHandler}
+            fieldName="userKey"
+            fieldDisplay="User Key"
+            placeholder=""
+            redacted={true}
+          />
         </div>
       </div>
-    : <HandlerEmpty
-        onGoToConfig={onGoToConfig}
-        validationError={validationError}
-      />
+      <div className="endpoint-tab--parameters">
+        <h4>Parameters for this Alert Handler</h4>
+        <div className="faux-form">
+          <HandlerInput
+            selectedHandler={selectedHandler}
+            handleModifyHandler={handleModifyHandler}
+            fieldName="title"
+            fieldDisplay="Alert Title:"
+            placeholder="ex: Important Alert"
+            fieldColumns="col-md-12"
+          />
+          <HandlerInput
+            selectedHandler={selectedHandler}
+            handleModifyHandler={handleModifyHandler}
+            fieldName="url"
+            fieldDisplay="URL:"
+            placeholder="ex: https://influxdata.com"
+          />
+          <HandlerInput
+            selectedHandler={selectedHandler}
+            handleModifyHandler={handleModifyHandler}
+            fieldName="urlTitle"
+            fieldDisplay="URL Title:"
+            placeholder="ex: InfluxData"
+          />
+          <HandlerInput
+            selectedHandler={selectedHandler}
+            handleModifyHandler={handleModifyHandler}
+            fieldName="device"
+            fieldDisplay="Devices: (comma separated)"
+            placeholder="ex: dv1, dv2"
+          />
+          <HandlerInput
+            selectedHandler={selectedHandler}
+            handleModifyHandler={handleModifyHandler}
+            fieldName="sound"
+            fieldDisplay="Alert Sound:"
+            placeholder="ex: alien"
+          />
+        </div>
+      </div>
+    </div>
+  ) : (
+    <HandlerEmpty
+      onGoToConfig={onGoToConfig}
+      validationError={validationError}
+    />
+  )
 
 const {func, shape, string} = PropTypes
 
diff --git a/ui/src/kapacitor/components/handlers/SensuHandler.js b/ui/src/kapacitor/components/handlers/SensuHandler.js
index acb746312b..cd58ea03d5 100644
--- a/ui/src/kapacitor/components/handlers/SensuHandler.js
+++ b/ui/src/kapacitor/components/handlers/SensuHandler.js
@@ -9,55 +9,57 @@ const SensuHandler = ({
   onGoToConfig,
   validationError,
 }) =>
-  selectedHandler.enabled
-    ? <div className="endpoint-tab-contents">
-        <div className="endpoint-tab--parameters">
-          <h4 className="u-flex u-jc-space-between">
-            Parameters from Kapacitor Configuration
-            <div className="btn btn-default btn-sm" onClick={onGoToConfig}>
-              <span className="icon cog-thick" />
-              {validationError
-                ? 'Exit this Rule and Edit Configuration'
-                : 'Save this Rule and Edit Configuration'}
-            </div>
-          </h4>
-          <div className="faux-form">
-            <HandlerInput
-              selectedHandler={selectedHandler}
-              handleModifyHandler={handleModifyHandler}
-              fieldName="addr"
-              fieldDisplay="Address"
-              placeholder=""
-              disabled={true}
-            />
-            <HandlerInput
-              selectedHandler={selectedHandler}
-              handleModifyHandler={handleModifyHandler}
-              fieldName="source"
-              fieldDisplay="Source"
-              placeholder="ex: my_source"
-            />
-          </div>
-        </div>
-        <div className="endpoint-tab--parameters">
-          <h4>Parameters for this Alert Handler</h4>
-          <div className="faux-form">
-            <HandlerInput
-              selectedHandler={selectedHandler}
-              handleModifyHandler={handleModifyHandler}
-              fieldName="handlers"
-              fieldDisplay="Handlers"
-              placeholder="ex: my_handlers"
-              fieldColumns="col-md-12"
-              parseToArray={true}
-            />
+  selectedHandler.enabled ? (
+    <div className="endpoint-tab-contents">
+      <div className="endpoint-tab--parameters">
+        <h4 className="u-flex u-jc-space-between">
+          Parameters from Kapacitor Configuration
+          <div className="btn btn-default btn-sm" onClick={onGoToConfig}>
+            <span className="icon cog-thick" />
+            {validationError
+              ? 'Exit this Rule and Edit Configuration'
+              : 'Save this Rule and Edit Configuration'}
           </div>
+        </h4>
+        <div className="faux-form">
+          <HandlerInput
+            selectedHandler={selectedHandler}
+            handleModifyHandler={handleModifyHandler}
+            fieldName="addr"
+            fieldDisplay="Address"
+            placeholder=""
+            disabled={true}
+          />
+          <HandlerInput
+            selectedHandler={selectedHandler}
+            handleModifyHandler={handleModifyHandler}
+            fieldName="source"
+            fieldDisplay="Source"
+            placeholder="ex: my_source"
+          />
         </div>
       </div>
-    : <HandlerEmpty
-        onGoToConfig={onGoToConfig}
-        validationError={validationError}
-      />
+      <div className="endpoint-tab--parameters">
+        <h4>Parameters for this Alert Handler</h4>
+        <div className="faux-form">
+          <HandlerInput
+            selectedHandler={selectedHandler}
+            handleModifyHandler={handleModifyHandler}
+            fieldName="handlers"
+            fieldDisplay="Handlers"
+            placeholder="ex: my_handlers"
+            fieldColumns="col-md-12"
+            parseToArray={true}
+          />
+        </div>
+      </div>
+    </div>
+  ) : (
+    <HandlerEmpty
+      onGoToConfig={onGoToConfig}
+      validationError={validationError}
+    />
+  )
 
 const {func, shape, string} = PropTypes
 
diff --git a/ui/src/kapacitor/components/handlers/SlackHandler.js b/ui/src/kapacitor/components/handlers/SlackHandler.js
index 74f1192583..c413542faf 100644
--- a/ui/src/kapacitor/components/handlers/SlackHandler.js
+++ b/ui/src/kapacitor/components/handlers/SlackHandler.js
@@ -9,65 +9,67 @@ const SlackHandler = ({
   onGoToConfig,
   validationError,
 }) =>
-  selectedHandler.enabled
-    ? <div className="endpoint-tab-contents">
-        <div className="endpoint-tab--parameters">
-          <h4 className="u-flex u-jc-space-between">
-            Parameters from Kapacitor Configuration
-            <div className="btn btn-default btn-sm" onClick={onGoToConfig}>
-              <span className="icon cog-thick" />
-              {validationError
-                ? 'Exit this Rule and Edit Configuration'
-                : 'Save this Rule and Edit Configuration'}
-            </div>
-          </h4>
-          <div className="faux-form">
-            <HandlerInput
-              selectedHandler={selectedHandler}
-              handleModifyHandler={handleModifyHandler}
-              fieldName="url"
-              fieldDisplay="Webhook URL:"
-              placeholder=""
-              disabled={true}
-              redacted={true}
-              fieldColumns="col-md-12"
-            />
-          </div>
-        </div>
-        <div className="endpoint-tab--parameters">
-          <h4>Parameters for this Alert Handler</h4>
-          <div className="faux-form">
-            <HandlerInput
-              selectedHandler={selectedHandler}
-              handleModifyHandler={handleModifyHandler}
-              fieldName="channel"
-              fieldDisplay="Channel:"
-              placeholder="ex: #my_favorite_channel"
-              fieldColumns="col-md-4"
-            />
-            <HandlerInput
-              selectedHandler={selectedHandler}
-              handleModifyHandler={handleModifyHandler}
-              fieldName="username"
-              fieldDisplay="Username:"
-              placeholder="ex: my_favorite_username"
-              fieldColumns="col-md-4"
-            />
-            <HandlerInput
-              selectedHandler={selectedHandler}
-              handleModifyHandler={handleModifyHandler}
-              fieldName="iconEmoji"
-              fieldDisplay="Emoji:"
-              placeholder="ex: :thumbsup:"
-              fieldColumns="col-md-4"
-            />
+  selectedHandler.enabled ? (
+    <div className="endpoint-tab-contents">
+      <div className="endpoint-tab--parameters">
+        <h4 className="u-flex u-jc-space-between">
+          Parameters from Kapacitor Configuration
+          <div className="btn btn-default btn-sm" onClick={onGoToConfig}>
+            <span className="icon cog-thick" />
+            {validationError
+              ? 'Exit this Rule and Edit Configuration'
+              : 'Save this Rule and Edit Configuration'}
           </div>
+        </h4>
+        <div className="faux-form">
+          <HandlerInput
+            selectedHandler={selectedHandler}
+            handleModifyHandler={handleModifyHandler}
+            fieldName="url"
+            fieldDisplay="Webhook URL:"
+            placeholder=""
+            disabled={true}
+            redacted={true}
+            fieldColumns="col-md-12"
+          />
         </div>
       </div>
-    : <HandlerEmpty
-        onGoToConfig={onGoToConfig}
-        validationError={validationError}
-      />
+      <div className="endpoint-tab--parameters">
+        <h4>Parameters for this Alert Handler</h4>
+        <div className="faux-form">
+          <HandlerInput
+            selectedHandler={selectedHandler}
+            handleModifyHandler={handleModifyHandler}
+            fieldName="channel"
+            fieldDisplay="Channel:"
+            placeholder="ex: #my_favorite_channel"
+            fieldColumns="col-md-4"
+          />
+          <HandlerInput
+            selectedHandler={selectedHandler}
+            handleModifyHandler={handleModifyHandler}
+            fieldName="username"
+            fieldDisplay="Username:"
+            placeholder="ex: my_favorite_username"
+            fieldColumns="col-md-4"
+          />
+          <HandlerInput
+            selectedHandler={selectedHandler}
+            handleModifyHandler={handleModifyHandler}
+            fieldName="iconEmoji"
+            fieldDisplay="Emoji:"
+            placeholder="ex: :thumbsup:"
+            fieldColumns="col-md-4"
+          />
+        </div>
+      </div>
+    </div>
+  ) : (
+    <HandlerEmpty
+      onGoToConfig={onGoToConfig}
+      validationError={validationError}
+    />
+  )
 
 const {func, shape, string} = PropTypes
 
diff --git a/ui/src/kapacitor/components/handlers/TalkHandler.js b/ui/src/kapacitor/components/handlers/TalkHandler.js
index e842efa6da..046efb5dab 100644
--- a/ui/src/kapacitor/components/handlers/TalkHandler.js
+++ b/ui/src/kapacitor/components/handlers/TalkHandler.js
@@ -9,43 +9,45 @@ const TalkHandler = ({
   onGoToConfig,
   validationError,
 }) =>
-  selectedHandler.enabled
-    ? <div className="endpoint-tab-contents">
-        <div className="endpoint-tab--parameters">
-          <h4 className="u-flex u-jc-space-between">
-            Parameters from Kapacitor Configuration
-            <div className="btn btn-default btn-sm" onClick={onGoToConfig}>
-              <span className="icon cog-thick" />
-              {validationError
-                ? 'Exit this Rule and Edit Configuration'
-                : 'Save this Rule and Edit Configuration'}
-            </div>
-          </h4>
-          <div className="faux-form">
-            <HandlerInput
-              selectedHandler={selectedHandler}
-              handleModifyHandler={handleModifyHandler}
-              fieldName="url"
-              fieldDisplay="URL"
-              placeholder=""
-              disabled={true}
-              redacted={true}
-            />
-            <HandlerInput
-              selectedHandler={selectedHandler}
-              handleModifyHandler={handleModifyHandler}
-              fieldName="author_name"
-              fieldDisplay="Author Name"
-              placeholder=""
-              disabled={true}
-            />
+  selectedHandler.enabled ? (
+    <div className="endpoint-tab-contents">
+      <div className="endpoint-tab--parameters">
+        <h4 className="u-flex u-jc-space-between">
+          Parameters from Kapacitor Configuration
+          <div className="btn btn-default btn-sm" onClick={onGoToConfig}>
+            <span className="icon cog-thick" />
+            {validationError
+              ? 'Exit this Rule and Edit Configuration'
+              : 'Save this Rule and Edit Configuration'}
           </div>
+        </h4>
+        <div className="faux-form">
+          <HandlerInput
+            selectedHandler={selectedHandler}
+            handleModifyHandler={handleModifyHandler}
+            fieldName="url"
+            fieldDisplay="URL"
+            placeholder=""
+            disabled={true}
+            redacted={true}
+          />
+          <HandlerInput
+            selectedHandler={selectedHandler}
+            handleModifyHandler={handleModifyHandler}
+            fieldName="author_name"
+            fieldDisplay="Author Name"
+            placeholder=""
+            disabled={true}
+          />
         </div>
       </div>
-    : <HandlerEmpty
-        onGoToConfig={onGoToConfig}
-        validationError={validationError}
-      />
+    </div>
+  ) : (
+    <HandlerEmpty
+      onGoToConfig={onGoToConfig}
+      validationError={validationError}
+    />
+  )
 
 const {func, shape, string} = PropTypes
 
diff --git a/ui/src/kapacitor/components/handlers/TcpHandler.js b/ui/src/kapacitor/components/handlers/TcpHandler.js
index 739023a5b8..7555fd5cc9 100644
--- a/ui/src/kapacitor/components/handlers/TcpHandler.js
+++ b/ui/src/kapacitor/components/handlers/TcpHandler.js
@@ -2,7 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import HandlerInput from 'src/kapacitor/components/HandlerInput'
 
-const TcpHandler = ({selectedHandler, handleModifyHandler}) =>
+const TcpHandler = ({selectedHandler, handleModifyHandler}) => (
   <div className="endpoint-tab-contents">
     <div className="endpoint-tab--parameters">
       <h4>Parameters for this Alert Handler</h4>
@@ -18,6 +18,7 @@ const TcpHandler = ({selectedHandler, handleModifyHandler}) =>
       </div>
     </div>
   </div>
+)
 
 const {func, shape} = PropTypes
 
diff --git a/ui/src/kapacitor/components/handlers/TelegramHandler.js b/ui/src/kapacitor/components/handlers/TelegramHandler.js
index d46d640d77..e8cab152a7 100644
--- a/ui/src/kapacitor/components/handlers/TelegramHandler.js
+++ b/ui/src/kapacitor/components/handlers/TelegramHandler.js
@@ -10,67 +10,69 @@ const TelegramHandler = ({
   onGoToConfig,
   validationError,
 }) =>
-  selectedHandler.enabled
-    ? <div className="endpoint-tab-contents">
-        <div className="endpoint-tab--parameters">
-          <h4 className="u-flex u-jc-space-between">
-            Parameters from Kapacitor Configuration
-            <div className="btn btn-default btn-sm" onClick={onGoToConfig}>
-              <span className="icon cog-thick" />
-              {validationError
-                ? 'Exit this Rule and Edit Configuration'
-                : 'Save this Rule and Edit Configuration'}
-            </div>
-          </h4>
-          <div className="faux-form">
-            <HandlerInput
-              selectedHandler={selectedHandler}
-              handleModifyHandler={handleModifyHandler}
-              fieldName="token"
-              fieldDisplay="Token"
-              placeholder=""
-              disabled={true}
-              redacted={true}
-              fieldColumns="col-md-12"
-            />
-          </div>
-        </div>
-        <div className="endpoint-tab--parameters">
-          <h4>Parameters for this Alert Handler</h4>
-          <div className="faux-form">
-            <HandlerInput
-              selectedHandler={selectedHandler}
-              handleModifyHandler={handleModifyHandler}
-              fieldName="chatId"
-              fieldDisplay="Chat ID:"
-              placeholder="ex: chat_id"
-            />
-            <HandlerInput
-              selectedHandler={selectedHandler}
-              handleModifyHandler={handleModifyHandler}
-              fieldName="parseMode"
-              fieldDisplay="Parse Mode:"
-              placeholder="ex: Markdown or HTML"
-            />
-            <HandlerCheckbox
-              selectedHandler={selectedHandler}
-              handleModifyHandler={handleModifyHandler}
-              fieldName="disableWebPagePreview"
-              fieldDisplay="Disable web page preview"
-            />
-            <HandlerCheckbox
-              selectedHandler={selectedHandler}
-              handleModifyHandler={handleModifyHandler}
-              fieldName="disableNotification"
-              fieldDisplay="Disable notification"
-            />
+  selectedHandler.enabled ? (
+    <div className="endpoint-tab-contents">
+      <div className="endpoint-tab--parameters">
+        <h4 className="u-flex u-jc-space-between">
+          Parameters from Kapacitor Configuration
+          <div className="btn btn-default btn-sm" onClick={onGoToConfig}>
+            <span className="icon cog-thick" />
+            {validationError
+              ? 'Exit this Rule and Edit Configuration'
+              : 'Save this Rule and Edit Configuration'}
           </div>
+        </h4>
+        <div className="faux-form">
+          <HandlerInput
+            selectedHandler={selectedHandler}
+            handleModifyHandler={handleModifyHandler}
+            fieldName="token"
+            fieldDisplay="Token"
+            placeholder=""
+            disabled={true}
+            redacted={true}
+            fieldColumns="col-md-12"
+          />
         </div>
       </div>
-    : <HandlerEmpty
-        onGoToConfig={onGoToConfig}
-        validationError={validationError}
-      />
+      <div className="endpoint-tab--parameters">
+        <h4>Parameters for this Alert Handler</h4>
+        <div className="faux-form">
+          <HandlerInput
+            selectedHandler={selectedHandler}
+            handleModifyHandler={handleModifyHandler}
+            fieldName="chatId"
+            fieldDisplay="Chat ID:"
+            placeholder="ex: chat_id"
+          />
+          <HandlerInput
+            selectedHandler={selectedHandler}
+            handleModifyHandler={handleModifyHandler}
+            fieldName="parseMode"
+            fieldDisplay="Parse Mode:"
+            placeholder="ex: Markdown or HTML"
+          />
+          <HandlerCheckbox
+            selectedHandler={selectedHandler}
+            handleModifyHandler={handleModifyHandler}
+            fieldName="disableWebPagePreview"
+            fieldDisplay="Disable web page preview"
+          />
+          <HandlerCheckbox
+            selectedHandler={selectedHandler}
+            handleModifyHandler={handleModifyHandler}
+            fieldName="disableNotification"
+            fieldDisplay="Disable notification"
+          />
+        </div>
+      </div>
+    </div>
+  ) : (
+    <HandlerEmpty
+      onGoToConfig={onGoToConfig}
+      validationError={validationError}
+    />
+  )
 
 const {func, shape, string} = PropTypes
 
diff --git a/ui/src/kapacitor/components/handlers/VictoropsHandler.js b/ui/src/kapacitor/components/handlers/VictoropsHandler.js
index dd90655ff2..77026cc26f 100644
--- a/ui/src/kapacitor/components/handlers/VictoropsHandler.js
+++ b/ui/src/kapacitor/components/handlers/VictoropsHandler.js
@@ -9,49 +9,51 @@ const VictoropsHandler = ({
   onGoToConfig,
   validationError,
 }) =>
-  selectedHandler.enabled
-    ? <div className="endpoint-tab-contents">
-        <div className="endpoint-tab--parameters">
-          <h4 className="u-flex u-jc-space-between">
-            Parameters from Kapacitor Configuration
-            <div className="btn btn-default btn-sm" onClick={onGoToConfig}>
-              <span className="icon cog-thick" />
-              {validationError
-                ? 'Exit this Rule and Edit Configuration'
-                : 'Save this Rule and Edit Configuration'}
-            </div>
-          </h4>
-          <div className="faux-form">
-            <HandlerInput
-              selectedHandler={selectedHandler}
-              handleModifyHandler={handleModifyHandler}
-              fieldName="api-key"
-              fieldDisplay="API key"
-              placeholder="ex: api_key"
-              disabled={true}
-              redacted={true}
-              fieldColumns="col-md-12"
-            />
-          </div>
-        </div>
-        <div className="endpoint-tab--parameters">
-          <h4>Parameters for this Alert Handler</h4>
-          <div className="faux-form">
-            <HandlerInput
-              selectedHandler={selectedHandler}
-              handleModifyHandler={handleModifyHandler}
-              fieldName="routingKey"
-              fieldDisplay="Routing Key:"
-              placeholder="ex: routing_key"
-              fieldColumns="col-md-12"
-            />
+  selectedHandler.enabled ? (
+    <div className="endpoint-tab-contents">
+      <div className="endpoint-tab--parameters">
+        <h4 className="u-flex u-jc-space-between">
+          Parameters from Kapacitor Configuration
+          <div className="btn btn-default btn-sm" onClick={onGoToConfig}>
+            <span className="icon cog-thick" />
+            {validationError
+              ? 'Exit this Rule and Edit Configuration'
+              : 'Save this Rule and Edit Configuration'}
           </div>
+        </h4>
+        <div className="faux-form">
+          <HandlerInput
+            selectedHandler={selectedHandler}
+            handleModifyHandler={handleModifyHandler}
+            fieldName="api-key"
+            fieldDisplay="API key"
+            placeholder="ex: api_key"
+            disabled={true}
+            redacted={true}
+            fieldColumns="col-md-12"
+          />
         </div>
       </div>
-    : <HandlerEmpty
-        onGoToConfig={onGoToConfig}
-        validationError={validationError}
-      />
+      <div className="endpoint-tab--parameters">
+        <h4>Parameters for this Alert Handler</h4>
+        <div className="faux-form">
+          <HandlerInput
+            selectedHandler={selectedHandler}
+            handleModifyHandler={handleModifyHandler}
+            fieldName="routingKey"
+            fieldDisplay="Routing Key:"
+            placeholder="ex: routing_key"
+            fieldColumns="col-md-12"
+          />
+        </div>
+      </div>
+    </div>
+  ) : (
+    <HandlerEmpty
+      onGoToConfig={onGoToConfig}
+      validationError={validationError}
+    />
+  )
 
 const {func, shape, string} = PropTypes
 
diff --git a/ui/src/shared/apis/metaQuery.js b/ui/src/shared/apis/metaQuery.js
index af5696ff75..92f34f8c3e 100644
--- a/ui/src/shared/apis/metaQuery.js
+++ b/ui/src/shared/apis/metaQuery.js
@@ -54,7 +54,10 @@ export const showTagValues = async ({
   measurement,
   tagKeys,
 }) => {
-  const keys = tagKeys.sort().map(k => `"${k}"`).join(', ')
+  const keys = tagKeys
+    .sort()
+    .map(k => `"${k}"`)
+    .join(', ')
   const rp = _.toString(retentionPolicy)
   const query = `SHOW TAG VALUES FROM "${rp}"."${measurement}" WITH KEY IN (${keys})`
 
diff --git a/ui/src/shared/components/Annotation.js b/ui/src/shared/components/Annotation.js
index 56fd17e65e..40f87f05ba 100644
--- a/ui/src/shared/components/Annotation.js
+++ b/ui/src/shared/components/Annotation.js
@@ -12,24 +12,27 @@ const Annotation = ({
   mode,
   lastUpdated,
   staticLegendHeight,
-}) =>
+}) => (
   <div>
-    {annotation.startTime === annotation.endTime
-      ? <AnnotationPoint
-          lastUpdated={lastUpdated}
-          annotation={annotation}
-          mode={mode}
-          dygraph={dygraph}
-          staticLegendHeight={staticLegendHeight}
-        />
-      : <AnnotationSpan
-          lastUpdated={lastUpdated}
-          annotation={annotation}
-          mode={mode}
-          dygraph={dygraph}
-          staticLegendHeight={staticLegendHeight}
-        />}
+    {annotation.startTime === annotation.endTime ? (
+      <AnnotationPoint
+        lastUpdated={lastUpdated}
+        annotation={annotation}
+        mode={mode}
+        dygraph={dygraph}
+        staticLegendHeight={staticLegendHeight}
+      />
+    ) : (
+      <AnnotationSpan
+        lastUpdated={lastUpdated}
+        annotation={annotation}
+        mode={mode}
+        dygraph={dygraph}
+        staticLegendHeight={staticLegendHeight}
+      />
+    )}
   </div>
+)
 
 const {number, shape, string} = PropTypes
 
diff --git a/ui/src/shared/components/AnnotationInput.js b/ui/src/shared/components/AnnotationInput.js
index 64ec098dc7..2c04160e4e 100644
--- a/ui/src/shared/components/AnnotationInput.js
+++ b/ui/src/shared/components/AnnotationInput.js
@@ -43,21 +43,23 @@ class AnnotationInput extends Component {
 
     return (
       <div className="annotation-tooltip--input-container">
-        {isEditing
-          ? <input
-              type="text"
-              className="annotation-tooltip--input form-control input-xs"
-              value={value}
-              onChange={this.handleChange}
-              onKeyDown={this.handleKeyDown}
-              autoFocus={true}
-              onFocus={this.handleFocus}
-              placeholder="Annotation text"
-            />
-          : <div className="input-cte" onClick={this.handleInputClick}>
-              {value}
-              <span className="icon pencil" />
-            </div>}
+        {isEditing ? (
+          <input
+            type="text"
+            className="annotation-tooltip--input form-control input-xs"
+            value={value}
+            onChange={this.handleChange}
+            onKeyDown={this.handleKeyDown}
+            autoFocus={true}
+            onFocus={this.handleFocus}
+            placeholder="Annotation text"
+          />
+        ) : (
+          <div className="input-cte" onClick={this.handleInputClick}>
+            {value}
+            <span className="icon pencil" />
+          </div>
+        )}
       </div>
     )
   }
diff --git a/ui/src/shared/components/AnnotationSpan.js b/ui/src/shared/components/AnnotationSpan.js
index 84a8e89c35..5c673bd6b5 100644
--- a/ui/src/shared/components/AnnotationSpan.js
+++ b/ui/src/shared/components/AnnotationSpan.js
@@ -122,14 +122,15 @@ class AnnotationSpan extends React.Component {
 
     return (
       <div className={markerClass} style={markerStyles}>
-        {showTooltip &&
+        {showTooltip && (
           <AnnotationTooltip
             isEditing={isEditing}
             timestamp={annotation.startTime}
             annotation={annotation}
             onMouseLeave={this.handleMouseLeave}
             annotationState={this.state}
-          />}
+          />
+        )}
         <div
           className={clickClass}
           draggable={true}
@@ -172,14 +173,15 @@ class AnnotationSpan extends React.Component {
 
     return (
       <div className={markerClass} style={markerStyles}>
-        {showTooltip &&
+        {showTooltip && (
           <AnnotationTooltip
             isEditing={isEditing}
             timestamp={annotation.endTime}
             annotation={annotation}
             onMouseLeave={this.handleMouseLeave}
             annotationState={this.state}
-          />}
+          />
+        )}
         <div
           className={clickClass}
           draggable={true}
diff --git a/ui/src/shared/components/AnnotationTooltip.js b/ui/src/shared/components/AnnotationTooltip.js
index 08a77f0341..3e0f825882 100644
--- a/ui/src/shared/components/AnnotationTooltip.js
+++ b/ui/src/shared/components/AnnotationTooltip.js
@@ -8,10 +8,11 @@ import AnnotationInput from 'src/shared/components/AnnotationInput'
 import * as schema from 'shared/schemas'
 import * as actions from 'shared/actions/annotations'
 
-const TimeStamp = ({time}) =>
+const TimeStamp = ({time}) => (
   <div className="annotation-tooltip--timestamp">
     {`${moment(+time).format('YYYY/DD/MM HH:mm:ss.SS')}`}
   </div>
+)
 
 class AnnotationTooltip extends Component {
   state = {
@@ -67,30 +68,32 @@ class AnnotationTooltip extends Component {
             : {}
         }
       >
-        {isDragging
-          ? <TimeStamp time={timestamp} />
-          : <div className="annotation-tooltip--items">
-              {isEditing
-                ? <div>
-                    <AnnotationInput
-                      value={annotation.text}
-                      onChangeInput={this.handleChangeInput('text')}
-                      onConfirmUpdate={this.handleConfirmUpdate}
-                      onRejectUpdate={this.handleRejectUpdate}
-                    />
-                    <button
-                      className="annotation-tooltip--delete"
-                      onClick={this.handleDelete}
-                      title="Delete this Annotation"
-                    >
-                      <span className="icon trash" />
-                    </button>
-                  </div>
-                : <div>
-                    {annotation.text}
-                  </div>}
-              <TimeStamp time={timestamp} />
-            </div>}
+        {isDragging ? (
+          <TimeStamp time={timestamp} />
+        ) : (
+          <div className="annotation-tooltip--items">
+            {isEditing ? (
+              <div>
+                <AnnotationInput
+                  value={annotation.text}
+                  onChangeInput={this.handleChangeInput('text')}
+                  onConfirmUpdate={this.handleConfirmUpdate}
+                  onRejectUpdate={this.handleRejectUpdate}
+                />
+                <button
+                  className="annotation-tooltip--delete"
+                  onClick={this.handleDelete}
+                  title="Delete this Annotation"
+                >
+                  <span className="icon trash" />
+                </button>
+              </div>
+            ) : (
+              <div>{annotation.text}</div>
+            )}
+            <TimeStamp time={timestamp} />
+          </div>
+        )}
       </div>
     )
   }
diff --git a/ui/src/shared/components/AnnotationWindow.js b/ui/src/shared/components/AnnotationWindow.js
index 5837cae2db..08c8c05401 100644
--- a/ui/src/shared/components/AnnotationWindow.js
+++ b/ui/src/shared/components/AnnotationWindow.js
@@ -34,11 +34,17 @@ const windowDimensions = (anno, dygraph, staticLegendHeight) => {
   }
 }
 
-const AnnotationWindow = ({annotation, dygraph, active, staticLegendHeight}) =>
+const AnnotationWindow = ({
+  annotation,
+  dygraph,
+  active,
+  staticLegendHeight,
+}) => (
   <div
     className={`annotation-window${active ? ' active' : ''}`}
     style={windowDimensions(annotation, dygraph, staticLegendHeight)}
   />
+)
 
 const {bool, number, shape} = PropTypes
 
diff --git a/ui/src/shared/components/Annotations.js b/ui/src/shared/components/Annotations.js
index 558f7697f2..184a31dcbc 100644
--- a/ui/src/shared/components/Annotations.js
+++ b/ui/src/shared/components/Annotations.js
@@ -56,19 +56,20 @@ class Annotations extends Component {
     return (
       <div className="annotations-container">
         {mode === ADDING &&
-          tempAnnotation &&
-          <NewAnnotation
-            dygraph={dygraph}
-            tempAnnotation={tempAnnotation}
-            onDismissAddingAnnotation={handleDismissAddingAnnotation}
-            onAddingAnnotationSuccess={handleAddingAnnotationSuccess}
-            onUpdateAnnotation={handleUpdateAnnotation}
-            isTempHovering={isTempHovering}
-            onMouseEnterTempAnnotation={handleMouseEnterTempAnnotation}
-            onMouseLeaveTempAnnotation={handleMouseLeaveTempAnnotation}
-            staticLegendHeight={staticLegendHeight}
-          />}
-        {annotations.map(a =>
+          tempAnnotation && (
+            <NewAnnotation
+              dygraph={dygraph}
+              tempAnnotation={tempAnnotation}
+              onDismissAddingAnnotation={handleDismissAddingAnnotation}
+              onAddingAnnotationSuccess={handleAddingAnnotationSuccess}
+              onUpdateAnnotation={handleUpdateAnnotation}
+              isTempHovering={isTempHovering}
+              onMouseEnterTempAnnotation={handleMouseEnterTempAnnotation}
+              onMouseLeaveTempAnnotation={handleMouseLeaveTempAnnotation}
+              staticLegendHeight={staticLegendHeight}
+            />
+          )}
+        {annotations.map(a => (
           <Annotation
             key={a.id}
             mode={mode}
@@ -77,7 +78,7 @@ class Annotations extends Component {
             staticLegendHeight={staticLegendHeight}
             lastUpdated={lastUpdated}
           />
-        )}
+        ))}
       </div>
     )
   }
diff --git a/ui/src/shared/components/AutoRefreshDropdown.js b/ui/src/shared/components/AutoRefreshDropdown.js
index d31430e006..420ea8140b 100644
--- a/ui/src/shared/components/AutoRefreshDropdown.js
+++ b/ui/src/shared/components/AutoRefreshDropdown.js
@@ -50,30 +50,28 @@ class AutoRefreshDropdown extends Component {
                 +milliseconds > 0 ? 'refresh' : 'pause'
               )}
             />
-            <span className="dropdown-selected">
-              {inputValue}
-            </span>
+            <span className="dropdown-selected">{inputValue}</span>
             <span className="caret" />
           </div>
           <ul className="dropdown-menu">
             <li className="dropdown-header">AutoRefresh Interval</li>
-            {autoRefreshItems.map(item =>
+            {autoRefreshItems.map(item => (
               <li className="dropdown-item" key={item.menuOption}>
                 <a href="#" onClick={this.handleSelection(item.milliseconds)}>
                   {item.menuOption}
                 </a>
               </li>
-            )}
+            ))}
           </ul>
         </div>
-        {+milliseconds === 0
-          ? <div
-              className="btn btn-sm btn-default btn-square"
-              onClick={onManualRefresh}
-            >
-              <span className="icon refresh" />
-            </div>
-          : null}
+        {+milliseconds === 0 ? (
+          <div
+            className="btn btn-sm btn-default btn-square"
+            onClick={onManualRefresh}
+          >
+            <span className="icon refresh" />
+          </div>
+        ) : null}
       </div>
     )
   }
diff --git a/ui/src/shared/components/ColorDropdown.js b/ui/src/shared/components/ColorDropdown.js
index 515a492bde..d5d4d0a1d8 100644
--- a/ui/src/shared/components/ColorDropdown.js
+++ b/ui/src/shared/components/ColorDropdown.js
@@ -56,36 +56,32 @@ class ColorDropdown extends Component {
             className="color-dropdown--swatch"
             style={{backgroundColor: selected.hex}}
           />
-          <div className="color-dropdown--name">
-            {selected.name}
-          </div>
+          <div className="color-dropdown--name">{selected.name}</div>
           <span className="caret" />
         </div>
-        {visible
-          ? <div className="color-dropdown--menu">
-              <FancyScrollbar autoHide={false} autoHeight={true}>
-                {colors.map((color, i) =>
-                  <div
-                    className={
-                      color.name === selected.name
-                        ? 'color-dropdown--item active'
-                        : 'color-dropdown--item'
-                    }
-                    key={i}
-                    onClick={this.handleColorClick(color)}
-                  >
-                    <span
-                      className="color-dropdown--swatch"
-                      style={{backgroundColor: color.hex}}
-                    />
-                    <span className="color-dropdown--name">
-                      {color.name}
-                    </span>
-                  </div>
-                )}
-              </FancyScrollbar>
-            </div>
-          : null}
+        {visible ? (
+          <div className="color-dropdown--menu">
+            <FancyScrollbar autoHide={false} autoHeight={true}>
+              {colors.map((color, i) => (
+                <div
+                  className={
+                    color.name === selected.name
+                      ? 'color-dropdown--item active'
+                      : 'color-dropdown--item'
+                  }
+                  key={i}
+                  onClick={this.handleColorClick(color)}
+                >
+                  <span
+                    className="color-dropdown--swatch"
+                    style={{backgroundColor: color.hex}}
+                  />
+                  <span className="color-dropdown--name">{color.name}</span>
+                </div>
+              ))}
+            </FancyScrollbar>
+          </div>
+        ) : null}
       </div>
     )
   }
diff --git a/ui/src/shared/components/CustomTimeIndicator.js b/ui/src/shared/components/CustomTimeIndicator.js
index a74e619407..fbbee76ee4 100644
--- a/ui/src/shared/components/CustomTimeIndicator.js
+++ b/ui/src/shared/components/CustomTimeIndicator.js
@@ -15,11 +15,7 @@ const CustomTimeIndicator = ({queries}) => {
     ? `${customLower} AND ${customUpper}`
     : customLower
 
-  return (
-    <span className="custom-indicator">
-      {customTimeRange}
-    </span>
-  )
+  return <span className="custom-indicator">{customTimeRange}</span>
 }
 
 const {arrayOf, shape} = PropTypes
diff --git a/ui/src/shared/components/CustomTimeRange.js b/ui/src/shared/components/CustomTimeRange.js
index c0486ddda2..f3aa47874e 100644
--- a/ui/src/shared/components/CustomTimeRange.js
+++ b/ui/src/shared/components/CustomTimeRange.js
@@ -172,7 +172,7 @@ class CustomTimeRange extends Component {
       <div className="custom-time--container">
         <div className="custom-time--shortcuts">
           <div className="custom-time--shortcuts-header">Shortcuts</div>
-          {shortcuts.map(({id, name}) =>
+          {shortcuts.map(({id, name}) => (
             <div
               key={id}
               className="custom-time--shortcut"
@@ -180,7 +180,7 @@ class CustomTimeRange extends Component {
             >
               {name}
             </div>
-          )}
+          ))}
         </div>
         <div className="custom-time--wrap">
           <div className="custom-time--dates" onClick={this.handleRefreshCals}>
@@ -200,16 +200,16 @@ class CustomTimeRange extends Component {
               ref={r => (this.upperContainer = r)}
               disabled={isNow}
             >
-              {isNowDisplayed
-                ? <div
-                    className={`btn btn-xs custom-time--now ${isNow
-                      ? 'btn-primary'
-                      : 'btn-default'}`}
-                    onClick={this.handleToggleNow}
-                  >
-                    Now
-                  </div>
-                : null}
+              {isNowDisplayed ? (
+                <div
+                  className={`btn btn-xs custom-time--now ${
+                    isNow ? 'btn-primary' : 'btn-default'
+                  }`}
+                  onClick={this.handleToggleNow}
+                >
+                  Now
+                </div>
+              ) : null}
               <input
                 className="custom-time--upper form-control input-sm"
                 ref={r => (this.upper = r)}
@@ -217,12 +217,12 @@ class CustomTimeRange extends Component {
                 onKeyUp={this.handleRefreshCals}
                 disabled={isNow}
               />
-              {isNow && page !== 'DataExplorer'
-                ? <div
-                    className="custom-time--mask"
-                    onClick={this.handleNowOff}
-                  />
-                : null}
+              {isNow && page !== 'DataExplorer' ? (
+                <div
+                  className="custom-time--mask"
+                  onClick={this.handleNowOff}
+                />
+              ) : null}
             </div>
           </div>
           <div
diff --git a/ui/src/shared/components/DeleteConfirmButtons.js b/ui/src/shared/components/DeleteConfirmButtons.js
index 11f80f8d17..c26f0ab748 100644
--- a/ui/src/shared/components/DeleteConfirmButtons.js
+++ b/ui/src/shared/components/DeleteConfirmButtons.js
@@ -12,7 +12,7 @@ const DeleteButton = ({
   square,
   text,
   disabled,
-}) =>
+}) => (
   <button
     className={classnames('btn btn-danger table--show-on-row-hover', {
       [buttonSize]: buttonSize,
@@ -24,6 +24,7 @@ const DeleteButton = ({
     {icon ? <span className={`icon ${icon}`} /> : null}
     {square ? null : text}
   </button>
+)
 
 class DeleteConfirmButtons extends Component {
   constructor(props) {
@@ -63,21 +64,23 @@ class DeleteConfirmButtons extends Component {
       )
     }
 
-    return isConfirming
-      ? <ConfirmButtons
-          onConfirm={onDelete}
-          item={item}
-          onCancel={this.handleCancel}
-          buttonSize={buttonSize}
-        />
-      : <DeleteButton
-          text={text}
-          onClickDelete={disabled ? () => {} : this.handleClickDelete}
-          buttonSize={buttonSize}
-          icon={icon}
-          square={square}
-          disabled={disabled}
-        />
+    return isConfirming ? (
+      <ConfirmButtons
+        onConfirm={onDelete}
+        item={item}
+        onCancel={this.handleCancel}
+        buttonSize={buttonSize}
+      />
+    ) : (
+      <DeleteButton
+        text={text}
+        onClickDelete={disabled ? () => {} : this.handleClickDelete}
+        buttonSize={buttonSize}
+        icon={icon}
+        square={square}
+        disabled={disabled}
+      />
+    )
   }
 }
 
diff --git a/ui/src/shared/components/DeleteConfirmTableCell.js b/ui/src/shared/components/DeleteConfirmTableCell.js
index e56d10a38c..674d41da21 100644
--- a/ui/src/shared/components/DeleteConfirmTableCell.js
+++ b/ui/src/shared/components/DeleteConfirmTableCell.js
@@ -3,9 +3,10 @@ import React from 'react'
 import DeleteConfirmButtons from 'shared/components/DeleteConfirmButtons'
 import {ADMIN_TABLE} from 'src/admin/constants/tableSizing'
 
-const DeleteConfirmTableCell = props =>
+const DeleteConfirmTableCell = props => (
   <td className="text-right" style={{width: `${ADMIN_TABLE.colDelete}px`}}>
     <DeleteConfirmButtons {...props} />
   </td>
+)
 
 export default DeleteConfirmTableCell
diff --git a/ui/src/shared/components/Dropdown.js b/ui/src/shared/components/Dropdown.js
index 06bf037f31..9517c9aa88 100644
--- a/ui/src/shared/components/Dropdown.js
+++ b/ui/src/shared/components/Dropdown.js
@@ -158,44 +158,48 @@ export class Dropdown extends Component {
         ref={r => (this.dropdownRef = r)}
         data-test="dropdown-toggle"
       >
-        {useAutoComplete && isOpen
-          ? <DropdownInput
-              searchTerm={searchTerm}
-              buttonSize={buttonSize}
-              buttonColor={buttonColor}
-              toggleStyle={toggleStyle}
-              disabled={disabled}
-              onFilterChange={this.handleFilterChange}
-              onFilterKeyPress={this.handleFilterKeyPress}
-            />
-          : <DropdownHead
-              iconName={iconName}
-              selected={selected}
-              searchTerm={searchTerm}
-              buttonSize={buttonSize}
-              buttonColor={buttonColor}
-              toggleStyle={toggleStyle}
-              disabled={disabled}
-            />}
-        {isOpen && menuItems.length
-          ? <DropdownMenu
-              addNew={addNew}
-              actions={actions}
-              items={menuItems}
-              selected={selected}
-              menuClass={menuClass}
-              menuWidth={menuWidth}
-              menuLabel={menuLabel}
-              onAction={this.handleAction}
-              useAutoComplete={useAutoComplete}
-              onSelection={this.handleSelection}
-              onHighlight={this.handleHighlight}
-              highlightedItemIndex={highlightedItemIndex}
-            />
-          : <DropdownMenuEmpty
-              useAutoComplete={useAutoComplete}
-              menuClass={menuClass}
-            />}
+        {useAutoComplete && isOpen ? (
+          <DropdownInput
+            searchTerm={searchTerm}
+            buttonSize={buttonSize}
+            buttonColor={buttonColor}
+            toggleStyle={toggleStyle}
+            disabled={disabled}
+            onFilterChange={this.handleFilterChange}
+            onFilterKeyPress={this.handleFilterKeyPress}
+          />
+        ) : (
+          <DropdownHead
+            iconName={iconName}
+            selected={selected}
+            searchTerm={searchTerm}
+            buttonSize={buttonSize}
+            buttonColor={buttonColor}
+            toggleStyle={toggleStyle}
+            disabled={disabled}
+          />
+        )}
+        {isOpen && menuItems.length ? (
+          <DropdownMenu
+            addNew={addNew}
+            actions={actions}
+            items={menuItems}
+            selected={selected}
+            menuClass={menuClass}
+            menuWidth={menuWidth}
+            menuLabel={menuLabel}
+            onAction={this.handleAction}
+            useAutoComplete={useAutoComplete}
+            onSelection={this.handleSelection}
+            onHighlight={this.handleHighlight}
+            highlightedItemIndex={highlightedItemIndex}
+          />
+        ) : (
+          <DropdownMenuEmpty
+            useAutoComplete={useAutoComplete}
+            menuClass={menuClass}
+          />
+        )}
       </div>
     )
   }
diff --git a/ui/src/shared/components/DropdownHead.js b/ui/src/shared/components/DropdownHead.js
index bb34e9161a..9960261417 100644
--- a/ui/src/shared/components/DropdownHead.js
+++ b/ui/src/shared/components/DropdownHead.js
@@ -11,7 +11,7 @@ const DropdownHead = ({
   toggleStyle,
   buttonColor,
   disabled,
-}) =>
+}) => (
   <div
     className={`btn dropdown-toggle ${buttonSize} ${buttonColor}${disabledClass(
       disabled
@@ -19,11 +19,10 @@ const DropdownHead = ({
     style={toggleStyle}
   >
     {iconName && <span className={classnames('icon', {[iconName]: true})} />}
-    <span className="dropdown-selected">
-      {selected}
-    </span>
+    <span className="dropdown-selected">{selected}</span>
     <span className="caret" />
   </div>
+)
 
 const {bool, string, shape} = PropTypes
 
diff --git a/ui/src/shared/components/DropdownInput.js b/ui/src/shared/components/DropdownInput.js
index de9f0aafea..279642c4a3 100644
--- a/ui/src/shared/components/DropdownInput.js
+++ b/ui/src/shared/components/DropdownInput.js
@@ -11,7 +11,7 @@ const DropdownInput = ({
   disabled,
   onFilterChange,
   onFilterKeyPress,
-}) =>
+}) => (
   <div
     className={`dropdown-autocomplete dropdown-toggle ${buttonSize} ${buttonColor}${disabledClass(
       disabled
@@ -30,6 +30,7 @@ const DropdownInput = ({
     />
     <span className="caret" />
   </div>
+)
 
 export default DropdownInput
 
diff --git a/ui/src/shared/components/DropdownMenu.js b/ui/src/shared/components/DropdownMenu.js
index 9f696160d1..bdb0075934 100644
--- a/ui/src/shared/components/DropdownMenu.js
+++ b/ui/src/shared/components/DropdownMenu.js
@@ -8,12 +8,13 @@ import FancyScrollbar from 'shared/components/FancyScrollbar'
 
 // AddNewResource is an optional parameter that takes the user to another
 // route defined by url prop
-const AddNewButton = ({url, text}) =>
+const AddNewButton = ({url, text}) => (
   <li className="multi-select--apply">
     <Link className="btn btn-xs btn-default" to={url}>
       {text}
     </Link>
   </li>
+)
 
 const DropdownMenu = ({
   items,
@@ -43,11 +44,7 @@ const DropdownMenu = ({
         autoHeight={true}
         maxHeight={DROPDOWN_MENU_MAX_HEIGHT}
       >
-        {menuLabel
-          ? <li className="dropdown-header">
-              {menuLabel}
-            </li>
-          : null}
+        {menuLabel ? <li className="dropdown-header">{menuLabel}</li> : null}
         {items.map((item, i) => {
           if (item.text === 'SEPARATOR') {
             return <li key={i} className="dropdown-divider" />
@@ -69,24 +66,24 @@ const DropdownMenu = ({
               >
                 {item.text}
               </a>
-              {actions && actions.length
-                ? <div className="dropdown-actions">
-                    {actions.map(action => {
-                      return (
-                        <button
-                          key={action.text}
-                          className="dropdown-action"
-                          onClick={onAction(action, item)}
-                        >
-                          <span
-                            title={action.text}
-                            className={`icon ${action.icon}`}
-                          />
-                        </button>
-                      )
-                    })}
-                  </div>
-                : null}
+              {actions && actions.length ? (
+                <div className="dropdown-actions">
+                  {actions.map(action => {
+                    return (
+                      <button
+                        key={action.text}
+                        className="dropdown-action"
+                        onClick={onAction(action, item)}
+                      >
+                        <span
+                          title={action.text}
+                          className={`icon ${action.icon}`}
+                        />
+                      </button>
+                    )
+                  })}
+                </div>
+              ) : null}
             </li>
           )
         })}
@@ -96,7 +93,7 @@ const DropdownMenu = ({
   )
 }
 
-export const DropdownMenuEmpty = ({useAutoComplete, menuClass}) =>
+export const DropdownMenuEmpty = ({useAutoComplete, menuClass}) => (
   <ul
     className={classnames('dropdown-menu', {
       'dropdown-menu--no-highlight': useAutoComplete,
@@ -105,6 +102,7 @@ export const DropdownMenuEmpty = ({useAutoComplete, menuClass}) =>
   >
     <li className="dropdown-empty">No matching items</li>
   </ul>
+)
 
 const {arrayOf, bool, number, shape, string, func} = PropTypes
 
diff --git a/ui/src/shared/components/Dygraph.js b/ui/src/shared/components/Dygraph.js
index 9f6629ae19..59db5ffc0c 100644
--- a/ui/src/shared/components/Dygraph.js
+++ b/ui/src/shared/components/Dygraph.js
@@ -329,7 +329,7 @@ class Dygraph extends Component {
 
     return (
       <div className="dygraph-child" onMouseLeave={this.deselectCrosshair}>
-        {this.dygraph &&
+        {this.dygraph && (
           <div className="dygraph-addons">
             <Annotations
               dygraph={this.dygraph}
@@ -342,13 +342,15 @@ class Dygraph extends Component {
               onHide={this.handleHideLegend}
               onShow={this.handleShowLegend}
             />
-            {!isHoveringThisGraph &&
+            {!isHoveringThisGraph && (
               <Crosshair
                 dygraph={this.dygraph}
                 staticLegendHeight={staticLegendHeight}
                 hoverTime={hoverTime}
-              />}
-          </div>}
+              />
+            )}
+          </div>
+        )}
         <div
           ref={r => {
             this.graphRef = r
@@ -359,14 +361,15 @@ class Dygraph extends Component {
           onMouseMove={this.handleMouseMove}
           onMouseOut={this.handleMouseOut}
         />
-        {staticLegend &&
+        {staticLegend && (
           <StaticLegend
             dygraphSeries={this.hashColorDygraphSeries()}
             dygraph={this.dygraph}
             handleReceiveStaticLegendHeight={
               this.handleReceiveStaticLegendHeight
             }
-          />}
+          />
+        )}
         {nestedGraph && React.cloneElement(nestedGraph, {staticLegendHeight})}
       </div>
     )
diff --git a/ui/src/shared/components/DygraphLegend.js b/ui/src/shared/components/DygraphLegend.js
index d490747cdb..781b073aa8 100644
--- a/ui/src/shared/components/DygraphLegend.js
+++ b/ui/src/shared/components/DygraphLegend.js
@@ -178,9 +178,7 @@ class DygraphLegend extends Component {
         style={style}
       >
         <div className="dygraph-legend--header">
-          <div className="dygraph-legend--timestamp">
-            {legend.xHTML}
-          </div>
+          <div className="dygraph-legend--timestamp">{legend.xHTML}</div>
           {renderSortAlpha}
           {renderSortNum}
           <button
@@ -202,16 +200,16 @@ class DygraphLegend extends Component {
             Snip
           </button>
         </div>
-        {isFilterVisible
-          ? <input
-              className="dygraph-legend--filter form-control input-sm"
-              type="text"
-              value={filterText}
-              onChange={this.handleLegendInputChange}
-              placeholder="Filter items..."
-              autoFocus={true}
-            />
-          : null}
+        {isFilterVisible ? (
+          <input
+            className="dygraph-legend--filter form-control input-sm"
+            type="text"
+            value={filterText}
+            onChange={this.handleLegendInputChange}
+            placeholder="Filter items..."
+            autoFocus={true}
+          />
+        ) : null}
         <div className="dygraph-legend--divider" />
         <div className="dygraph-legend--contents">
           {filtered.map(({label, color, yHTML, isHighlighted}) => {
@@ -223,9 +221,7 @@ class DygraphLegend extends Component {
                 <span style={{color}}>
                   {isSnipped ? removeMeasurement(label) : label}
                 </span>
-                <figure>
-                  {yHTML || 'no value'}
-                </figure>
+                <figure>{yHTML || 'no value'}</figure>
               </div>
             )
           })}
diff --git a/ui/src/shared/components/EmptyQuery.js b/ui/src/shared/components/EmptyQuery.js
index 9511c6480e..ebc8420e8d 100644
--- a/ui/src/shared/components/EmptyQuery.js
+++ b/ui/src/shared/components/EmptyQuery.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-const EmptyQueryState = ({onAddQuery}) =>
+const EmptyQueryState = ({onAddQuery}) => (
   <div className="query-maker--empty">
     <h5>This Graph has no Queries</h5>
     <br />
@@ -9,6 +9,7 @@ const EmptyQueryState = ({onAddQuery}) =>
       <span className="icon plus" /> Add a Query
     </div>
   </div>
+)
 
 const {func} = PropTypes
 
diff --git a/ui/src/shared/components/FieldList.js b/ui/src/shared/components/FieldList.js
index 6aa4ffcab3..9c8015dc0f 100644
--- a/ui/src/shared/components/FieldList.js
+++ b/ui/src/shared/components/FieldList.js
@@ -144,51 +144,53 @@ class FieldList extends Component {
       <div className="query-builder--column">
         <div className="query-builder--heading">
           <span>Fields</span>
-          {hasAggregates
-            ? <QueryOptions
-                fill={fill}
-                shift={_.first(shifts)}
-                groupBy={groupBy}
-                onFill={this.handleFill}
-                isKapacitorRule={isKapacitorRule}
-                onTimeShift={this.handleTimeShift}
-                onGroupByTime={this.handleGroupByTime}
-              />
-            : null}
+          {hasAggregates ? (
+            <QueryOptions
+              fill={fill}
+              shift={_.first(shifts)}
+              groupBy={groupBy}
+              onFill={this.handleFill}
+              isKapacitorRule={isKapacitorRule}
+              onTimeShift={this.handleTimeShift}
+              onGroupByTime={this.handleGroupByTime}
+            />
+          ) : null}
         </div>
-        {noDBorMeas
-          ? <div className="query-builder--list-empty">
-              <span>
-                No <strong>Measurement</strong> selected
-              </span>
-            </div>
-          : <div className="query-builder--list">
-              <FancyScrollbar>
-                {this.state.fields.map((fieldFunc, i) => {
-                  const selectedFields = getFieldsWithName(
-                    fieldFunc.value,
-                    fields
-                  )
+        {noDBorMeas ? (
+          <div className="query-builder--list-empty">
+            <span>
+              No <strong>Measurement</strong> selected
+            </span>
+          </div>
+        ) : (
+          <div className="query-builder--list">
+            <FancyScrollbar>
+              {this.state.fields.map((fieldFunc, i) => {
+                const selectedFields = getFieldsWithName(
+                  fieldFunc.value,
+                  fields
+                )
 
-                  const funcs = getFuncsByFieldName(fieldFunc.value, fields)
-                  const fieldFuncs = selectedFields.length
-                    ? selectedFields
-                    : [fieldFunc]
+                const funcs = getFuncsByFieldName(fieldFunc.value, fields)
+                const fieldFuncs = selectedFields.length
+                  ? selectedFields
+                  : [fieldFunc]
 
-                  return (
-                    <FieldListItem
-                      key={i}
-                      onToggleField={this.handleToggleField}
-                      onApplyFuncsToField={this.handleApplyFuncs}
-                      isSelected={!!selectedFields.length}
-                      fieldFuncs={fieldFuncs}
-                      funcs={functionNames(funcs)}
-                      isKapacitorRule={isKapacitorRule}
-                    />
-                  )
-                })}
-              </FancyScrollbar>
-            </div>}
+                return (
+                  <FieldListItem
+                    key={i}
+                    onToggleField={this.handleToggleField}
+                    onApplyFuncsToField={this.handleApplyFuncs}
+                    isSelected={!!selectedFields.length}
+                    fieldFuncs={fieldFuncs}
+                    funcs={functionNames(funcs)}
+                    isKapacitorRule={isKapacitorRule}
+                  />
+                )
+              })}
+            </FancyScrollbar>
+          </div>
+        )}
       </div>
     )
   }
diff --git a/ui/src/shared/components/FillQuery.js b/ui/src/shared/components/FillQuery.js
index 7b42a2c007..d0497deab1 100644
--- a/ui/src/shared/components/FillQuery.js
+++ b/ui/src/shared/components/FillQuery.js
@@ -89,7 +89,7 @@ class FillQuery extends Component {
 
     return (
       <div className={`fill-query fill-query--${size}`}>
-        {selected.type === NUMBER &&
+        {selected.type === NUMBER && (
           <input
             ref={r => (this.numberInput = r)}
             type="number"
@@ -102,7 +102,8 @@ class FillQuery extends Component {
             onKeyDown={this.handleKeyDown}
             onChange={this.handleInputChange}
             onBlur={this.handleInputBlur}
-          />}
+          />
+        )}
         <Dropdown
           selected={selected.text}
           items={queryFills}
diff --git a/ui/src/shared/components/FunctionSelector.js b/ui/src/shared/components/FunctionSelector.js
index 0ee308baa4..3eca8f84aa 100644
--- a/ui/src/shared/components/FunctionSelector.js
+++ b/ui/src/shared/components/FunctionSelector.js
@@ -60,22 +60,22 @@ class FunctionSelector extends Component {
 
     return (
       <div className="function-selector">
-        {singleSelect
-          ? null
-          : <div className="function-selector--header">
-              <span>
-                {localSelectedItems.length > 0
-                  ? `${localSelectedItems.length} Selected`
-                  : 'Select functions below'}
-              </span>
-              <div
-                className="btn btn-xs btn-success"
-                onClick={this.handleApplyFunctions}
-                data-test="function-selector-apply"
-              >
-                Apply
-              </div>
-            </div>}
+        {singleSelect ? null : (
+          <div className="function-selector--header">
+            <span>
+              {localSelectedItems.length > 0
+                ? `${localSelectedItems.length} Selected`
+                : 'Select functions below'}
+            </span>
+            <div
+              className="btn btn-xs btn-success"
+              onClick={this.handleApplyFunctions}
+              data-test="function-selector-apply"
+            >
+              Apply
+            </div>
+          </div>
+        )}
         <div className="function-selector--grid">
           {INFLUXQL_FUNCTIONS.map((f, i) => {
             return (
diff --git a/ui/src/shared/components/GaugeChart.js b/ui/src/shared/components/GaugeChart.js
index 6ca9157d06..0516d9c11d 100644
--- a/ui/src/shared/components/GaugeChart.js
+++ b/ui/src/shared/components/GaugeChart.js
@@ -47,11 +47,12 @@ class GaugeChart extends PureComponent {
       thisGaugeIsResizing &&
       (resizeCoords.h * DASHBOARD_LAYOUT_ROW_HEIGHT).toString()
 
-    const height = (resizeCoordsHeight ||
+    const height = (
+      resizeCoordsHeight ||
       initialCellHeight ||
       resizerTopHeight ||
-      300)
-      .toString()
+      300
+    ).toString()
 
     return (
       <div className="single-stat">
diff --git a/ui/src/shared/components/InfiniteScroll.js b/ui/src/shared/components/InfiniteScroll.js
index 1be5787aca..8d6b9c18fc 100644
--- a/ui/src/shared/components/InfiniteScroll.js
+++ b/ui/src/shared/components/InfiniteScroll.js
@@ -73,8 +73,9 @@ class InfiniteScroll extends Component {
 
   throttledHandleResize = _.throttle(this.handleResize, 100)
 
-  handleMakeDiv = className => props =>
+  handleMakeDiv = className => props => (
     <div {...props} className={`fancy-scroll--${className}`} />
+  )
 
   componentDidMount() {
     window.addEventListener('resize', this.handleResize, true)
diff --git a/ui/src/shared/components/Layout.js b/ui/src/shared/components/Layout.js
index 39eaebdeaf..18ade5ada1 100644
--- a/ui/src/shared/components/Layout.js
+++ b/ui/src/shared/components/Layout.js
@@ -62,7 +62,7 @@ const Layout = (
     onSetHoverTime,
   },
   {source: defaultSource}
-) =>
+) => (
   <LayoutCell
     cell={cell}
     celldata={celldata}
@@ -72,35 +72,38 @@ const Layout = (
     onCancelEditCell={onCancelEditCell}
     onSummonOverlayTechnologies={onSummonOverlayTechnologies}
   >
-    {cell.isWidget
-      ? <WidgetCell cell={cell} timeRange={timeRange} source={source} />
-      : <RefreshingGraph
-          colors={colors}
-          inView={cell.inView}
-          axes={axes}
-          type={type}
-          tableOptions={tableOptions}
-          staticLegend={IS_STATIC_LEGEND(legend)}
-          cellHeight={h}
-          onZoom={onZoom}
-          sources={sources}
-          timeRange={timeRange}
-          templates={templates}
-          autoRefresh={autoRefresh}
-          hoverTime={hoverTime}
-          onSetHoverTime={onSetHoverTime}
-          manualRefresh={manualRefresh}
-          onStopAddAnnotation={onStopAddAnnotation}
-          grabDataForDownload={grabDataForDownload}
-          resizeCoords={resizeCoords}
-          queries={buildQueriesForLayouts(
-            cell,
-            getSource(cell, source, sources, defaultSource),
-            timeRange,
-            host
-          )}
-        />}
+    {cell.isWidget ? (
+      <WidgetCell cell={cell} timeRange={timeRange} source={source} />
+    ) : (
+      <RefreshingGraph
+        colors={colors}
+        inView={cell.inView}
+        axes={axes}
+        type={type}
+        tableOptions={tableOptions}
+        staticLegend={IS_STATIC_LEGEND(legend)}
+        cellHeight={h}
+        onZoom={onZoom}
+        sources={sources}
+        timeRange={timeRange}
+        templates={templates}
+        autoRefresh={autoRefresh}
+        hoverTime={hoverTime}
+        onSetHoverTime={onSetHoverTime}
+        manualRefresh={manualRefresh}
+        onStopAddAnnotation={onStopAddAnnotation}
+        grabDataForDownload={grabDataForDownload}
+        resizeCoords={resizeCoords}
+        queries={buildQueriesForLayouts(
+          cell,
+          getSource(cell, source, sources, defaultSource),
+          timeRange,
+          host
+        )}
+      />
+    )}
   </LayoutCell>
+)
 
 const {arrayOf, bool, func, number, shape, string} = PropTypes
 
diff --git a/ui/src/shared/components/LayoutCell.js b/ui/src/shared/components/LayoutCell.js
index e0fd20caaa..0949390fa3 100644
--- a/ui/src/shared/components/LayoutCell.js
+++ b/ui/src/shared/components/LayoutCell.js
@@ -55,18 +55,20 @@ class LayoutCell extends Component {
         </Authorized>
         <LayoutCellHeader cellName={cell.name} isEditable={isEditable} />
         <div className="dash-graph--container">
-          {queries.length
-            ? layoutCellGraph
-            : <div className="graph-empty">
-                <Authorized requiredRole={EDITOR_ROLE}>
-                  <button
-                    className="no-query--button btn btn-md btn-primary"
-                    onClick={this.handleSummonOverlay(cell)}
-                  >
-                    <span className="icon plus" /> Add Graph
-                  </button>
-                </Authorized>
-              </div>}
+          {queries.length ? (
+            layoutCellGraph
+          ) : (
+            <div className="graph-empty">
+              <Authorized requiredRole={EDITOR_ROLE}>
+                <button
+                  className="no-query--button btn btn-md btn-primary"
+                  onClick={this.handleSummonOverlay(cell)}
+                >
+                  <span className="icon plus" /> Add Graph
+                </button>
+              </Authorized>
+            </div>
+          )}
         </div>
       </div>
     )
diff --git a/ui/src/shared/components/LayoutCellHeader.js b/ui/src/shared/components/LayoutCellHeader.js
index 64878f1ec3..23ecd25602 100644
--- a/ui/src/shared/components/LayoutCellHeader.js
+++ b/ui/src/shared/components/LayoutCellHeader.js
@@ -5,9 +5,9 @@ import {NEW_DEFAULT_DASHBOARD_CELL} from 'src/dashboards/constants/index'
 const LayoutCellHeader = ({isEditable, cellName}) => {
   const cellNameIsDefault = cellName === NEW_DEFAULT_DASHBOARD_CELL.name
 
-  const headingClass = `dash-graph--heading ${isEditable
-    ? 'dash-graph--draggable dash-graph--heading-draggable'
-    : ''}`
+  const headingClass = `dash-graph--heading ${
+    isEditable ? 'dash-graph--draggable dash-graph--heading-draggable' : ''
+  }`
 
   return (
     <div className={headingClass}>
diff --git a/ui/src/shared/components/LayoutCellMenu.js b/ui/src/shared/components/LayoutCellMenu.js
index e8080b66fc..59e20506ad 100644
--- a/ui/src/shared/components/LayoutCellMenu.js
+++ b/ui/src/shared/components/LayoutCellMenu.js
@@ -49,17 +49,19 @@ class LayoutCellMenu extends Component {
         })}
       >
         <div
-          className={`${isEditable
-            ? 'dash-graph--custom-indicators dash-graph--draggable'
-            : 'dash-graph--custom-indicators'}`}
+          className={`${
+            isEditable
+              ? 'dash-graph--custom-indicators dash-graph--draggable'
+              : 'dash-graph--custom-indicators'
+          }`}
         >
           {queries && <CustomTimeIndicator queries={queries} />}
         </div>
         {isEditable &&
-          mode !== EDITING &&
-          <div className="dash-graph-context--buttons">
-            {queries.length
-              ? <MenuTooltipButton
+          mode !== EDITING && (
+            <div className="dash-graph-context--buttons">
+              {queries.length ? (
+                <MenuTooltipButton
                   icon="pencil"
                   menuOptions={[
                     {text: 'Configure', action: onEdit(cell)},
@@ -76,23 +78,25 @@ class LayoutCellMenu extends Component {
                   ]}
                   informParent={this.handleToggleSubMenu}
                 />
-              : null}
-            {dataExists &&
+              ) : null}
+              {dataExists && (
+                <MenuTooltipButton
+                  icon="download"
+                  menuOptions={[
+                    {text: 'Download CSV', action: onCSVDownload(cell)},
+                  ]}
+                  informParent={this.handleToggleSubMenu}
+                />
+              )}
               <MenuTooltipButton
-                icon="download"
-                menuOptions={[
-                  {text: 'Download CSV', action: onCSVDownload(cell)},
-                ]}
+                icon="trash"
+                theme="danger"
+                menuOptions={[{text: 'Confirm', action: onDelete(cell)}]}
                 informParent={this.handleToggleSubMenu}
-              />}
-            <MenuTooltipButton
-              icon="trash"
-              theme="danger"
-              menuOptions={[{text: 'Confirm', action: onDelete(cell)}]}
-              informParent={this.handleToggleSubMenu}
-            />
-          </div>}
-        {mode === 'editing' &&
+              />
+            </div>
+          )}
+        {mode === 'editing' && (
           <div className="dash-graph-context--buttons">
             <div
               className="btn btn-xs btn-success"
@@ -100,7 +104,8 @@ class LayoutCellMenu extends Component {
             >
               Done Editing
             </div>
-          </div>}
+          </div>
+        )}
       </div>
     )
   }
diff --git a/ui/src/shared/components/LayoutRenderer.js b/ui/src/shared/components/LayoutRenderer.js
index 17d3509e47..6e6138379a 100644
--- a/ui/src/shared/components/LayoutRenderer.js
+++ b/ui/src/shared/components/LayoutRenderer.js
@@ -50,7 +50,7 @@ class LayoutRenderer extends Component {
           PAGE_HEADER_HEIGHT -
           PAGE_CONTAINER_MARGIN -
           PAGE_CONTAINER_MARGIN) /
-        STATUS_PAGE_ROW_COUNT
+          STATUS_PAGE_ROW_COUNT
       : DASHBOARD_LAYOUT_ROW_HEIGHT
   }
 
@@ -108,7 +108,7 @@ class LayoutRenderer extends Component {
             isDraggable={isDashboard}
             isResizable={isDashboard}
           >
-            {cells.map(cell =>
+            {cells.map(cell => (
               <div key={cell.i}>
                 <Authorized
                   requiredRole={EDITOR_ROLE}
@@ -139,7 +139,7 @@ class LayoutRenderer extends Component {
                   />
                 </Authorized>
               </div>
-            )}
+            ))}
           </GridLayout>
         </Authorized>
       </ResizableBox>
diff --git a/ui/src/shared/components/LineGraph.js b/ui/src/shared/components/LineGraph.js
index 8238da7abd..a7cabea3a1 100644
--- a/ui/src/shared/components/LineGraph.js
+++ b/ui/src/shared/components/LineGraph.js
@@ -122,7 +122,7 @@ class LineGraph extends Component {
           staticLegend={staticLegend}
           isGraphFilled={showSingleStat ? false : isGraphFilled}
         >
-          {showSingleStat &&
+          {showSingleStat && (
             <SingleStat
               prefix={prefix}
               suffix={suffix}
@@ -130,24 +130,27 @@ class LineGraph extends Component {
               lineGraph={true}
               colors={colors}
               cellHeight={cellHeight}
-            />}
+            />
+          )}
         </Dygraph>
       </div>
     )
   }
 }
 
-const GraphLoadingDots = () =>
+const GraphLoadingDots = () => (
   <div className="graph-panel__refreshing">
     <div />
     <div />
     <div />
   </div>
+)
 
-const GraphSpinner = () =>
+const GraphSpinner = () => (
   <div className="graph-fetching">
     <div className="graph-spinner" />
   </div>
+)
 
 const {array, arrayOf, bool, func, number, shape, string} = PropTypes
 
diff --git a/ui/src/shared/components/LoadingDots.js b/ui/src/shared/components/LoadingDots.js
index e5f1c8cda8..d799fa2f35 100644
--- a/ui/src/shared/components/LoadingDots.js
+++ b/ui/src/shared/components/LoadingDots.js
@@ -1,12 +1,13 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-const LoadingDots = ({className}) =>
+const LoadingDots = ({className}) => (
   <div className={`loading-dots ${className}`}>
     <div />
     <div />
     <div />
   </div>
+)
 
 const {string} = PropTypes
 
diff --git a/ui/src/shared/components/MenuTooltipButton.js b/ui/src/shared/components/MenuTooltipButton.js
index 58b8b9fc89..cbe5ce26d6 100644
--- a/ui/src/shared/components/MenuTooltipButton.js
+++ b/ui/src/shared/components/MenuTooltipButton.js
@@ -43,19 +43,19 @@ class MenuTooltipButton extends Component {
       return null
     }
 
-    return menuOptions.map((option, i) =>
+    return menuOptions.map((option, i) => (
       <div
         key={i}
-        className={`dash-graph-context--menu-item${option.disabled
-          ? ' disabled'
-          : ''}`}
+        className={`dash-graph-context--menu-item${
+          option.disabled ? ' disabled' : ''
+        }`}
         onClick={
           option.disabled ? null : this.handleMenuItemClick(option.action)
         }
       >
         {option.text}
       </div>
-    )
+    ))
   }
 
   render() {
@@ -68,11 +68,11 @@ class MenuTooltipButton extends Component {
         onClick={this.handleButtonClick}
       >
         <span className={`icon ${icon}`} />
-        {expanded
-          ? <div className={`dash-graph-context--menu ${theme}`}>
-              {this.renderMenuOptions()}
-            </div>
-          : null}
+        {expanded ? (
+          <div className={`dash-graph-context--menu ${theme}`}>
+            {this.renderMenuOptions()}
+          </div>
+        ) : null}
       </div>
     )
   }
diff --git a/ui/src/shared/components/MiniGraph.js b/ui/src/shared/components/MiniGraph.js
index 79ce1f23fd..beeecf10ac 100644
--- a/ui/src/shared/components/MiniGraph.js
+++ b/ui/src/shared/components/MiniGraph.js
@@ -75,13 +75,9 @@ export default React.createClass({
 
     const statText = (
       <div className="cluster-stat--label">
+        <span>{this.props.queryDescription}</span>
         <span>
-          {this.props.queryDescription}
-        </span>
-        <span>
-          <strong>
-            {truncated}
-          </strong>
+          <strong>{truncated}</strong>
         </span>
       </div>
     )
diff --git a/ui/src/shared/components/MultiSelectDropdown.js b/ui/src/shared/components/MultiSelectDropdown.js
index dd1aa64bfd..c54a404e54 100644
--- a/ui/src/shared/components/MultiSelectDropdown.js
+++ b/ui/src/shared/components/MultiSelectDropdown.js
@@ -106,13 +106,13 @@ class MultiSelectDropdown extends Component {
 
   renderMenu() {
     const {items, isApplyShown} = this.props
-    const applyButton = isApplyShown
-      ? <li className="multi-select--apply">
-          <button className="btn btn-xs btn-info" onClick={this.handleApply}>
-            Apply
-          </button>
-        </li>
-      : null
+    const applyButton = isApplyShown ? (
+      <li className="multi-select--apply">
+        <button className="btn btn-xs btn-info" onClick={this.handleApply}>
+          Apply
+        </button>
+      </li>
+    ) : null
 
     return (
       <ul className="dropdown-menu">
@@ -132,9 +132,7 @@ class MultiSelectDropdown extends Component {
                 onClick={_.wrap(listItem, this.onSelect)}
               >
                 <div className="multi-select--checkbox" />
-                <span>
-                  {listItem.name}
-                </span>
+                <span>{listItem.name}</span>
               </li>
             )
           })}
diff --git a/ui/src/shared/components/NewAnnotation.js b/ui/src/shared/components/NewAnnotation.js
index c1c591fac2..f599196419 100644
--- a/ui/src/shared/components/NewAnnotation.js
+++ b/ui/src/shared/components/NewAnnotation.js
@@ -107,9 +107,7 @@ class NewAnnotation extends Component {
     return (
       <div className="new-annotation-tooltip">
         <span className="new-annotation-helper">Click or Drag to Annotate</span>
-        <span className="new-annotation-timestamp">
-          {timestamp}
-        </span>
+        <span className="new-annotation-timestamp">{timestamp}</span>
       </div>
     )
   }
@@ -142,13 +140,14 @@ class NewAnnotation extends Component {
 
     return (
       <div>
-        {isDragging &&
+        {isDragging && (
           <AnnotationWindow
             annotation={tempAnnotation}
             dygraph={dygraph}
             active={true}
             staticLegendHeight={staticLegendHeight}
-          />}
+          />
+        )}
         <div
           className={classnames('new-annotation', {
             hover: isTempHovering,
@@ -160,7 +159,7 @@ class NewAnnotation extends Component {
           onMouseUp={this.handleMouseUp}
           onMouseDown={this.handleMouseDown}
         >
-          {isDragging &&
+          {isDragging && (
             <div
               className="new-annotation--crosshair"
               style={{left: crosshairTwo, height: crosshairHeight}}
@@ -169,7 +168,8 @@ class NewAnnotation extends Component {
                 isDragging &&
                 this.renderTimestamp(tempAnnotation.endTime)}
               <div className={flagTwoClass} />
-            </div>}
+            </div>
+          )}
           <div
             className="new-annotation--crosshair"
             style={{left: crosshairOne, height: crosshairHeight}}
diff --git a/ui/src/shared/components/Notification.js b/ui/src/shared/components/Notification.js
index 2002fb9d94..ceb0f118d6 100644
--- a/ui/src/shared/components/Notification.js
+++ b/ui/src/shared/components/Notification.js
@@ -69,9 +69,7 @@ class Notification extends Component {
           ref={r => (this.notificationRef = r)}
         >
           <span className={`icon ${icon}`} />
-          <div className="notification-message">
-            {message}
-          </div>
+          <div className="notification-message">{message}</div>
           <button className="notification-close" onClick={this.handleDismiss} />
         </div>
       </div>
diff --git a/ui/src/shared/components/Notifications.js b/ui/src/shared/components/Notifications.js
index 201b64b17a..8d20a00eac 100644
--- a/ui/src/shared/components/Notifications.js
+++ b/ui/src/shared/components/Notifications.js
@@ -4,14 +4,17 @@ import {connect} from 'react-redux'
 
 import Notification from 'shared/components/Notification'
 
-const Notifications = ({notifications, inPresentationMode}) =>
+const Notifications = ({notifications, inPresentationMode}) => (
   <div
-    className={`${inPresentationMode
-      ? 'notification-center__presentation-mode'
-      : 'notification-center'}`}
+    className={`${
+      inPresentationMode
+        ? 'notification-center__presentation-mode'
+        : 'notification-center'
+    }`}
   >
     {notifications.map(n => <Notification key={n.id} notification={n} />)}
   </div>
+)
 
 const {arrayOf, bool, number, shape, string} = PropTypes
 
diff --git a/ui/src/shared/components/OverlayTechnologies.js b/ui/src/shared/components/OverlayTechnologies.js
index 96d0651006..ae3ebe6dca 100644
--- a/ui/src/shared/components/OverlayTechnologies.js
+++ b/ui/src/shared/components/OverlayTechnologies.js
@@ -3,10 +3,9 @@ import PropTypes from 'prop-types'
 
 import {OVERLAY_TECHNOLOGY} from 'shared/constants/classNames'
 
-const OverlayTechnologies = ({children}) =>
-  <div className={OVERLAY_TECHNOLOGY}>
-    {children}
-  </div>
+const OverlayTechnologies = ({children}) => (
+  <div className={OVERLAY_TECHNOLOGY}>{children}</div>
+)
 
 const {node} = PropTypes
 
diff --git a/ui/src/shared/components/PanelBody.js b/ui/src/shared/components/PanelBody.js
index 307ebafdac..6e1d3925fb 100644
--- a/ui/src/shared/components/PanelBody.js
+++ b/ui/src/shared/components/PanelBody.js
@@ -11,9 +11,7 @@ const PanelBody = React.createClass({
     return (
       <div className="panel-body text-center">
         <h3 className="deluxe">How to resolve:</h3>
-        <p>
-          {this.props.children}
-        </p>
+        <p>{this.props.children}</p>
       </div>
     )
   },
diff --git a/ui/src/shared/components/PanelHeading.js b/ui/src/shared/components/PanelHeading.js
index e5200e39dc..cb3edf3556 100644
--- a/ui/src/shared/components/PanelHeading.js
+++ b/ui/src/shared/components/PanelHeading.js
@@ -10,9 +10,7 @@ const PanelHeading = React.createClass({
   render() {
     return (
       <div className="panel-heading text-center">
-        <h2 className="deluxe">
-          {this.props.children}
-        </h2>
+        <h2 className="deluxe">{this.props.children}</h2>
       </div>
     )
   },
diff --git a/ui/src/shared/components/QueryOptions.js b/ui/src/shared/components/QueryOptions.js
index a922ddad31..3dd4e8a058 100644
--- a/ui/src/shared/components/QueryOptions.js
+++ b/ui/src/shared/components/QueryOptions.js
@@ -12,20 +12,21 @@ const QueryOptions = ({
   onTimeShift,
   onGroupByTime,
   isKapacitorRule,
-}) =>
+}) => (
   <div className="query-builder--groupby-fill-container">
     <GroupByTimeDropdown
       selected={groupBy.time}
       onChooseGroupByTime={onGroupByTime}
     />
-    {isKapacitorRule
-      ? null
-      : <TimeShiftDropdown
-          selected={shift && shift.label}
-          onChooseTimeShift={onTimeShift}
-        />}
+    {isKapacitorRule ? null : (
+      <TimeShiftDropdown
+        selected={shift && shift.label}
+        onChooseTimeShift={onTimeShift}
+      />
+    )}
     {isKapacitorRule ? null : <FillQuery value={fill} onChooseFill={onFill} />}
   </div>
+)
 
 const {bool, func, shape, string} = PropTypes
 
diff --git a/ui/src/shared/components/QueryStatus.js b/ui/src/shared/components/QueryStatus.js
index 1eaadb93b9..cd8f7225c4 100644
--- a/ui/src/shared/components/QueryStatus.js
+++ b/ui/src/shared/components/QueryStatus.js
@@ -5,11 +5,7 @@ import classnames from 'classnames'
 
 const QueryStatus = ({status, children}) => {
   if (!status) {
-    return (
-      <div className="query-editor--status">
-        {children}
-      </div>
-    )
+    return <div className="query-editor--status">{children}</div>
   }
 
   if (status.loading) {
diff --git a/ui/src/shared/components/QueryTabList.js b/ui/src/shared/components/QueryTabList.js
index b7078ba6bf..32ad35d201 100644
--- a/ui/src/shared/components/QueryTabList.js
+++ b/ui/src/shared/components/QueryTabList.js
@@ -10,9 +10,9 @@ const QueryTabList = ({
   onDeleteQuery,
   activeQueryIndex,
   setActiveQueryIndex,
-}) =>
+}) => (
   <div className="query-maker--tabs">
-    {queries.map((q, i) =>
+    {queries.map((q, i) => (
       <QueryMakerTab
         isActive={i === activeQueryIndex}
         key={i}
@@ -24,7 +24,7 @@ const QueryTabList = ({
           q.rawText || buildInfluxQLQuery(timeRange, q) || `Query ${i + 1}`
         }
       />
-    )}
+    ))}
     <div
       className="query-maker--new btn btn-sm btn-primary"
       onClick={onAddQuery}
@@ -32,6 +32,7 @@ const QueryTabList = ({
       <span className="icon plus" />
     </div>
   </div>
+)
 
 const {arrayOf, func, number, shape, string} = PropTypes
 
diff --git a/ui/src/shared/components/QuestionMarkTooltip.js b/ui/src/shared/components/QuestionMarkTooltip.js
index 5c14253783..52a4837868 100644
--- a/ui/src/shared/components/QuestionMarkTooltip.js
+++ b/ui/src/shared/components/QuestionMarkTooltip.js
@@ -2,7 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import ReactTooltip from 'react-tooltip'
 
-const QuestionMarkTooltip = ({tipID, tipContent}) =>
+const QuestionMarkTooltip = ({tipID, tipContent}) => (
   <div className="question-mark-tooltip">
     <div
       className="question-mark-tooltip--icon"
@@ -19,6 +19,7 @@ const QuestionMarkTooltip = ({tipID, tipContent}) =>
       class="influx-tooltip"
     />
   </div>
+)
 
 const {string} = PropTypes
 
diff --git a/ui/src/shared/components/RefreshingGraph.js b/ui/src/shared/components/RefreshingGraph.js
index 5d732a38ce..3da98503d6 100644
--- a/ui/src/shared/components/RefreshingGraph.js
+++ b/ui/src/shared/components/RefreshingGraph.js
@@ -42,9 +42,7 @@ const RefreshingGraph = ({
   if (!queries.length) {
     return (
       <div className="graph-empty">
-        <p data-test="data-explorer-no-results">
-          {emptyGraphCopy}
-        </p>
+        <p data-test="data-explorer-no-results">{emptyGraphCopy}</p>
       </div>
     )
   }
diff --git a/ui/src/shared/components/SchemaExplorer.js b/ui/src/shared/components/SchemaExplorer.js
index d48369a736..4919716eec 100644
--- a/ui/src/shared/components/SchemaExplorer.js
+++ b/ui/src/shared/components/SchemaExplorer.js
@@ -26,7 +26,7 @@ const SchemaExplorer = ({
     applyFuncsToField,
     toggleTagAcceptance,
   },
-}) =>
+}) => (
   <div className="query-builder">
     <DatabaseList
       query={query}
@@ -56,6 +56,7 @@ const SchemaExplorer = ({
       applyFuncsToField={actionBinder(id, applyFuncsToField)}
     />
   </div>
+)
 
 const {func, shape, string} = PropTypes
 
diff --git a/ui/src/shared/components/SlideToggle.js b/ui/src/shared/components/SlideToggle.js
index 7e478b1d81..ab7957d2df 100644
--- a/ui/src/shared/components/SlideToggle.js
+++ b/ui/src/shared/components/SlideToggle.js
@@ -30,9 +30,9 @@ class SlideToggle extends Component {
     const {size, disabled} = this.props
     const {active} = this.state
 
-    const className = `slide-toggle slide-toggle__${size} ${active
-      ? 'active'
-      : ''} ${disabled ? 'disabled' : ''}`
+    const className = `slide-toggle slide-toggle__${size} ${
+      active ? 'active' : ''
+    } ${disabled ? 'disabled' : ''}`
 
     return (
       <div className={className} onClick={this.handleClick}>
diff --git a/ui/src/shared/components/SplashPage.js b/ui/src/shared/components/SplashPage.js
index 955cb253ce..43b7324c4a 100644
--- a/ui/src/shared/components/SplashPage.js
+++ b/ui/src/shared/components/SplashPage.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-const SplashPage = ({children}) =>
+const SplashPage = ({children}) => (
   <div className="auth-page">
     <div className="auth-box">
       <div className="auth-logo" />
@@ -12,6 +12,7 @@ const SplashPage = ({children}) =>
     </p>
     <div className="auth-image" />
   </div>
+)
 
 const {node} = PropTypes
 SplashPage.propTypes = {
diff --git a/ui/src/shared/components/StaticLegend.js b/ui/src/shared/components/StaticLegend.js
index a268fb42cd..f79c6cf115 100644
--- a/ui/src/shared/components/StaticLegend.js
+++ b/ui/src/shared/components/StaticLegend.js
@@ -6,9 +6,9 @@ import {removeMeasurement} from 'shared/graphs/helpers'
 
 const staticLegendItemClassname = (visibilities, i, hoverEnabled) => {
   if (visibilities.length) {
-    return `${hoverEnabled
-      ? 'static-legend--item'
-      : 'static-legend--single'}${visibilities[i] ? '' : ' disabled'}`
+    return `${hoverEnabled ? 'static-legend--item' : 'static-legend--single'}${
+      visibilities[i] ? '' : ' disabled'
+    }`
   }
 
   // all series are visible to match expected initial state
@@ -80,7 +80,7 @@ class StaticLegend extends Component {
           this.staticLegendRef = s
         }}
       >
-        {_.map(labels, (v, i) =>
+        {_.map(labels, (v, i) => (
           <div
             className={staticLegendItemClassname(visibilities, i, hoverEnabled)}
             key={uuid.v4()}
@@ -90,11 +90,9 @@ class StaticLegend extends Component {
               className="static-legend--dot"
               style={{backgroundColor: colors[i]}}
             />
-            <span style={{color: colors[i]}}>
-              {removeMeasurement(v)}
-            </span>
+            <span style={{color: colors[i]}}>{removeMeasurement(v)}</span>
           </div>
-        )}
+        ))}
       </div>
     )
   }
diff --git a/ui/src/shared/components/TableGraph.js b/ui/src/shared/components/TableGraph.js
index 662d9de453..d330c92c54 100644
--- a/ui/src/shared/components/TableGraph.js
+++ b/ui/src/shared/components/TableGraph.js
@@ -265,14 +265,14 @@ class TableGraph extends Component {
         ref={gridContainer => (this.gridContainer = gridContainer)}
         onMouseOut={this.handleMouseOut}
       >
-        {!isEmpty(data) &&
+        {!isEmpty(data) && (
           <ColumnSizer
             columnCount={columnCount}
             columnMaxWidth={COLUMN_MAX_WIDTH}
             columnMinWidth={COLUMN_MIN_WIDTH}
             width={tableWidth}
           >
-            {({getColumnWidth, registerChild}) =>
+            {({getColumnWidth, registerChild}) => (
               <MultiGrid
                 ref={registerChild}
                 columnCount={columnCount}
@@ -305,8 +305,10 @@ class TableGraph extends Component {
                 hoverTime={hoverTime}
                 colors={colors}
                 classNameBottomRightGrid="table-graph--scroll-window"
-              />}
-          </ColumnSizer>}
+              />
+            )}
+          </ColumnSizer>
+        )}
       </div>
     )
   }
diff --git a/ui/src/shared/components/TagInput.js b/ui/src/shared/components/TagInput.js
index a246daf085..9516da255b 100644
--- a/ui/src/shared/components/TagInput.js
+++ b/ui/src/shared/components/TagInput.js
@@ -33,9 +33,7 @@ class TagInput extends Component {
 
     return (
       <div className="form-group col-xs-12">
-        <label htmlFor={title}>
-          {title}
-        </label>
+        <label htmlFor={title}>{title}</label>
         <input
           placeholder={`Type and hit 'Enter' to add to list of ${title}`}
           autoComplete="off"
diff --git a/ui/src/shared/components/Tags.js b/ui/src/shared/components/Tags.js
index d14fad8acb..dce928f6bc 100644
--- a/ui/src/shared/components/Tags.js
+++ b/ui/src/shared/components/Tags.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import TagsAddButton from 'src/shared/components/TagsAddButton'
 import ConfirmButton from 'src/shared/components/ConfirmButton'
 
-const Tags = ({tags, onDeleteTag, addMenuItems, addMenuChoose}) =>
+const Tags = ({tags, onDeleteTag, addMenuItems, addMenuChoose}) => (
   <div className="input-tag-list">
     {tags.map(item => {
       return (
@@ -14,10 +14,11 @@ const Tags = ({tags, onDeleteTag, addMenuItems, addMenuChoose}) =>
         />
       )
     })}
-    {addMenuItems.length && addMenuChoose
-      ? <TagsAddButton items={addMenuItems} onChoose={addMenuChoose} />
-      : null}
+    {addMenuItems.length && addMenuChoose ? (
+      <TagsAddButton items={addMenuItems} onChoose={addMenuChoose} />
+    ) : null}
   </div>
+)
 
 class Tag extends Component {
   handleClickDelete = item => () => {
@@ -28,9 +29,7 @@ class Tag extends Component {
     const {item} = this.props
     return (
       <span key={item} className="input-tag--item">
-        <span>
-          {item.text || item.name || item}
-        </span>
+        <span>{item.text || item.name || item}</span>
         <ConfirmButton
           icon="remove"
           size="btn-xs"
diff --git a/ui/src/shared/components/TagsAddButton.js b/ui/src/shared/components/TagsAddButton.js
index 8a3a74de16..24b0c17889 100644
--- a/ui/src/shared/components/TagsAddButton.js
+++ b/ui/src/shared/components/TagsAddButton.js
@@ -33,7 +33,7 @@ class TagsAddButton extends Component {
       <div className={classname} onClick={this.handleButtonClick}>
         <span className="icon plus" />
         <div className="tags-add--menu">
-          {items.map(item =>
+          {items.map(item => (
             <div
               key={uuid.v4()}
               className="tags-add--menu-item"
@@ -41,7 +41,7 @@ class TagsAddButton extends Component {
             >
               {item.text}
             </div>
-          )}
+          ))}
         </div>
       </div>
     )
diff --git a/ui/src/shared/components/TemplateDrawer.js b/ui/src/shared/components/TemplateDrawer.js
index 80e360c788..94ee9e461f 100644
--- a/ui/src/shared/components/TemplateDrawer.js
+++ b/ui/src/shared/components/TemplateDrawer.js
@@ -8,9 +8,9 @@ const TemplateDrawer = ({
   selected,
   onMouseOverTempVar,
   onClickTempVar,
-}) =>
+}) => (
   <div className="template-drawer">
-    {templates.map(t =>
+    {templates.map(t => (
       <div
         className={classnames('template-drawer--item', {
           'template-drawer--selected': t.tempVar === selected.tempVar,
@@ -19,10 +19,12 @@ const TemplateDrawer = ({
         onClick={onClickTempVar(t)}
         key={t.tempVar}
       >
-        {' '}{t.tempVar}{' '}
+        {' '}
+        {t.tempVar}{' '}
       </div>
-    )}
+    ))}
   </div>
+)
 
 const {arrayOf, func, shape, string} = PropTypes
 
diff --git a/ui/src/shared/components/ThresholdsList.js b/ui/src/shared/components/ThresholdsList.js
index 80deeba349..42ba1f9821 100644
--- a/ui/src/shared/components/ThresholdsList.js
+++ b/ui/src/shared/components/ThresholdsList.js
@@ -123,9 +123,9 @@ class ThresholdsList extends Component {
     const {thresholdsListColors, showListHeading} = this.props
     const disableAddThreshold = thresholdsListColors.length > MAX_THRESHOLDS
 
-    const thresholdsListClass = `thresholds-list${showListHeading
-      ? ' graph-options-group'
-      : ''}`
+    const thresholdsListClass = `thresholds-list${
+      showListHeading ? ' graph-options-group' : ''
+    }`
 
     return (
       <div className={thresholdsListClass}>
@@ -139,26 +139,28 @@ class ThresholdsList extends Component {
         </button>
         {thresholdsListColors.map(
           color =>
-            color.id === THRESHOLD_TYPE_BASE
-              ? <div className="threshold-item" key={uuid.v4()}>
-                  <div className="threshold-item--label">Base Color</div>
-                  <ColorDropdown
-                    colors={THRESHOLD_COLORS}
-                    selected={formatColor(color)}
-                    onChoose={this.handleChooseColor(color)}
-                    stretchToFit={true}
-                  />
-                </div>
-              : <Threshold
-                  visualizationType="single-stat"
-                  threshold={color}
-                  key={color.id}
-                  onChooseColor={this.handleChooseColor}
-                  onValidateColorValue={this.handleValidateColorValue}
-                  onUpdateColorValue={this.handleUpdateColorValue}
-                  onDeleteThreshold={this.handleDeleteThreshold}
-                  onSortColors={this.handleSortColors}
+            color.id === THRESHOLD_TYPE_BASE ? (
+              <div className="threshold-item" key={uuid.v4()}>
+                <div className="threshold-item--label">Base Color</div>
+                <ColorDropdown
+                  colors={THRESHOLD_COLORS}
+                  selected={formatColor(color)}
+                  onChoose={this.handleChooseColor(color)}
+                  stretchToFit={true}
                 />
+              </div>
+            ) : (
+              <Threshold
+                visualizationType="single-stat"
+                threshold={color}
+                key={color.id}
+                onChooseColor={this.handleChooseColor}
+                onValidateColorValue={this.handleValidateColorValue}
+                onUpdateColorValue={this.handleUpdateColorValue}
+                onDeleteThreshold={this.handleDeleteThreshold}
+                onSortColors={this.handleSortColors}
+              />
+            )
         )}
       </div>
     )
diff --git a/ui/src/shared/components/ThresholdsListTypeToggle.js b/ui/src/shared/components/ThresholdsListTypeToggle.js
index 3507f54d56..459d9f28b9 100644
--- a/ui/src/shared/components/ThresholdsListTypeToggle.js
+++ b/ui/src/shared/components/ThresholdsListTypeToggle.js
@@ -25,17 +25,17 @@ class ThresholdsListTypeToggle extends Component {
         <label>Threshold Coloring</label>
         <ul className="nav nav-tablist nav-tablist-sm">
           <li
-            className={`${thresholdsListType === THRESHOLD_TYPE_BG
-              ? 'active'
-              : ''}`}
+            className={`${
+              thresholdsListType === THRESHOLD_TYPE_BG ? 'active' : ''
+            }`}
             onClick={this.handleToggleThresholdsListType(THRESHOLD_TYPE_BG)}
           >
             Background
           </li>
           <li
-            className={`${thresholdsListType === THRESHOLD_TYPE_TEXT
-              ? 'active'
-              : ''}`}
+            className={`${
+              thresholdsListType === THRESHOLD_TYPE_TEXT ? 'active' : ''
+            }`}
             onClick={this.handleToggleThresholdsListType(THRESHOLD_TYPE_TEXT)}
           >
             Text
diff --git a/ui/src/shared/components/TimeRangeDropdown.js b/ui/src/shared/components/TimeRangeDropdown.js
index 50559e9175..086bc43c7e 100644
--- a/ui/src/shared/components/TimeRangeDropdown.js
+++ b/ui/src/shared/components/TimeRangeDropdown.js
@@ -105,22 +105,22 @@ class TimeRangeDropdown extends Component {
               autoHeight={true}
               maxHeight={DROPDOWN_MENU_MAX_HEIGHT}
             >
-              {preventCustomTimeRange
-                ? null
-                : <div>
-                    <li className="dropdown-header">Absolute Time Ranges</li>
-                    <li
-                      className={
-                        isCustomTimeRangeOpen
-                          ? 'active dropdown-item custom-timerange'
-                          : 'dropdown-item custom-timerange'
-                      }
-                    >
-                      <a href="#" onClick={this.showCustomTimeRange}>
-                        Custom Date Picker
-                      </a>
-                    </li>
-                  </div>}
+              {preventCustomTimeRange ? null : (
+                <div>
+                  <li className="dropdown-header">Absolute Time Ranges</li>
+                  <li
+                    className={
+                      isCustomTimeRangeOpen
+                        ? 'active dropdown-item custom-timerange'
+                        : 'dropdown-item custom-timerange'
+                    }
+                  >
+                    <a href="#" onClick={this.showCustomTimeRange}>
+                      Custom Date Picker
+                    </a>
+                  </li>
+                </div>
+              )}
               <li className="dropdown-header">
                 {preventCustomTimeRange ? '' : 'Relative '}Time Ranges
               </li>
@@ -136,16 +136,16 @@ class TimeRangeDropdown extends Component {
             </FancyScrollbar>
           </ul>
         </div>
-        {isCustomTimeRangeOpen
-          ? <CustomTimeRangeOverlay
-              onApplyTimeRange={this.handleApplyCustomTimeRange}
-              timeRange={customTimeRange}
-              isVisible={isCustomTimeRangeOpen}
-              onToggle={this.handleToggleCustomTimeRange}
-              onClose={this.handleCloseCustomTimeRange}
-              page={page}
-            />
-          : null}
+        {isCustomTimeRangeOpen ? (
+          <CustomTimeRangeOverlay
+            onApplyTimeRange={this.handleApplyCustomTimeRange}
+            timeRange={customTimeRange}
+            isVisible={isCustomTimeRangeOpen}
+            onToggle={this.handleToggleCustomTimeRange}
+            onClose={this.handleCloseCustomTimeRange}
+            page={page}
+          />
+        ) : null}
       </div>
     )
   }
diff --git a/ui/src/shared/components/TimeShiftDropdown.js b/ui/src/shared/components/TimeShiftDropdown.js
index 20a3b2dbf5..d4161186bd 100644
--- a/ui/src/shared/components/TimeShiftDropdown.js
+++ b/ui/src/shared/components/TimeShiftDropdown.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import Dropdown from 'shared/components/Dropdown'
 import {TIME_SHIFTS} from 'shared/constants/timeShift'
 
-const TimeShiftDropdown = ({selected, onChooseTimeShift}) =>
+const TimeShiftDropdown = ({selected, onChooseTimeShift}) => (
   <div className="group-by-time">
     <label className="group-by-time--label">Compare:</label>
     <Dropdown
@@ -14,6 +14,7 @@ const TimeShiftDropdown = ({selected, onChooseTimeShift}) =>
       selected={selected || 'none'}
     />
   </div>
+)
 
 const {func, string} = PropTypes
 
diff --git a/ui/src/shared/components/Tooltip.js b/ui/src/shared/components/Tooltip.js
index eb93ffa7db..37fb9c8bec 100644
--- a/ui/src/shared/components/Tooltip.js
+++ b/ui/src/shared/components/Tooltip.js
@@ -2,11 +2,9 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import ReactTooltip from 'react-tooltip'
 
-const Tooltip = ({tip, children}) =>
+const Tooltip = ({tip, children}) => (
   <div>
-    <div data-tip={tip}>
-      {children}
-    </div>
+    <div data-tip={tip}>{children}</div>
     <ReactTooltip
       effect="solid"
       html={true}
@@ -14,6 +12,7 @@ const Tooltip = ({tip, children}) =>
       class="influx-tooltip"
     />
   </div>
+)
 
 const {shape, string} = PropTypes
 
diff --git a/ui/src/shared/components/YesNoButtons.js b/ui/src/shared/components/YesNoButtons.js
index b74bf21821..341df10f39 100644
--- a/ui/src/shared/components/YesNoButtons.js
+++ b/ui/src/shared/components/YesNoButtons.js
@@ -2,7 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
 
-const YesNoButtons = ({onConfirm, onCancel, buttonSize}) =>
+const YesNoButtons = ({onConfirm, onCancel, buttonSize}) => (
   <div>
     <button
       className={classnames('btn btn-square btn-info', {
@@ -21,6 +21,7 @@ const YesNoButtons = ({onConfirm, onCancel, buttonSize}) =>
       <span className="icon checkmark" />
     </button>
   </div>
+)
 
 const {func, string} = PropTypes
 
diff --git a/ui/src/shared/constants/thresholds.js b/ui/src/shared/constants/thresholds.js
index 9941bef092..9aa66d1caa 100644
--- a/ui/src/shared/constants/thresholds.js
+++ b/ui/src/shared/constants/thresholds.js
@@ -174,13 +174,13 @@ export const validateGaugeColors = colors => {
   }
 
   // Gauge colors should have a type of min, any number of thresholds, and a max
-  const formattedColors = _.sortBy(colors, color =>
-    Number(color.value)
-  ).map(color => ({
-    ...color,
-    value: Number(color.value),
-    type: COLOR_TYPE_THRESHOLD,
-  }))
+  const formattedColors = _.sortBy(colors, color => Number(color.value)).map(
+    color => ({
+      ...color,
+      value: Number(color.value),
+      type: COLOR_TYPE_THRESHOLD,
+    })
+  )
 
   formattedColors[0].type = COLOR_TYPE_MIN
   formattedColors[formattedColors.length - 1].type = COLOR_TYPE_MAX
diff --git a/ui/src/shared/copy/notifications.js b/ui/src/shared/copy/notifications.js
index 19f1a2cd63..38a8a8045b 100644
--- a/ui/src/shared/copy/notifications.js
+++ b/ui/src/shared/copy/notifications.js
@@ -196,9 +196,11 @@ export const NOTIFY_CHRONOGRAF_ORG_DELETED = orgName => ({
 
 export const NOTIFY_CHRONOGRAF_USER_DELETED = (user, isAbsoluteDelete) => ({
   ...defaultSuccessNotification,
-  message: `${user} has been removed from ${isAbsoluteDelete
-    ? 'all organizations and deleted.'
-    : 'the current organization.'}`,
+  message: `${user} has been removed from ${
+    isAbsoluteDelete
+      ? 'all organizations and deleted.'
+      : 'the current organization.'
+  }`,
 })
 
 export const NOTIFY_CHRONOGRAF_USER_MISSING_NAME_AND_PROVIDER = {
@@ -468,9 +470,9 @@ export const NOTIFY_TEST_ALERT_SENT = endpoint => ({
 
 export const NOTIFY_TEST_ALERT_FAILED = (endpoint, errorMessage) => ({
   ...defaultErrorNotification,
-  message: `There was an error sending a Test Alert to ${endpoint}${errorMessage
-    ? `: ${errorMessage}`
-    : '.'}`,
+  message: `There was an error sending a Test Alert to ${endpoint}${
+    errorMessage ? `: ${errorMessage}` : '.'
+  }`,
 })
 
 export const NOTIFY_KAPACITOR_CONNECTION_FAILED = {
diff --git a/ui/src/side_nav/components/NavItems.js b/ui/src/side_nav/components/NavItems.js
index f9f3e23533..b06566cec6 100644
--- a/ui/src/side_nav/components/NavItems.js
+++ b/ui/src/side_nav/components/NavItems.js
@@ -18,20 +18,22 @@ const NavListItem = React.createClass({
     const {link, children, location, useAnchor, isExternal} = this.props
     const isActive = location.startsWith(link)
 
-    return useAnchor
-      ? <a
-          className={classnames('sidebar-menu--item', {active: isActive})}
-          href={link}
-          target={isExternal ? '_blank' : '_self'}
-        >
-          {children}
-        </a>
-      : <Link
-          className={classnames('sidebar-menu--item', {active: isActive})}
-          to={link}
-        >
-          {children}
-        </Link>
+    return useAnchor ? (
+      <a
+        className={classnames('sidebar-menu--item', {active: isActive})}
+        href={link}
+        target={isExternal ? '_blank' : '_self'}
+      >
+        {children}
+      </a>
+    ) : (
+      <Link
+        className={classnames('sidebar-menu--item', {active: isActive})}
+        to={link}
+      >
+        {children}
+      </Link>
+    )
   },
 })
 
@@ -46,13 +48,15 @@ const NavHeader = React.createClass({
 
     // Some nav items, such as Logout, need to hit an external link rather
     // than simply route to an internal page. Anchor tags serve that purpose.
-    return useAnchor
-      ? <a className="sidebar-menu--heading" href={link}>
-          {title}
-        </a>
-      : <Link className="sidebar-menu--heading" to={link}>
-          {title}
-        </Link>
+    return useAnchor ? (
+      <a className="sidebar-menu--heading" href={link}>
+        {title}
+      </a>
+    ) : (
+      <Link className="sidebar-menu--heading" to={link}>
+        {title}
+      </Link>
+    )
   },
 })
 
@@ -119,11 +123,7 @@ const NavBar = React.createClass({
   render() {
     const {children} = this.props
 
-    return (
-      <nav className="sidebar">
-        {children}
-      </nav>
-    )
+    return <nav className="sidebar">{children}</nav>
   },
 })
 
diff --git a/ui/src/side_nav/components/UserNavBlock.js b/ui/src/side_nav/components/UserNavBlock.js
index cda37afc99..fd502a3853 100644
--- a/ui/src/side_nav/components/UserNavBlock.js
+++ b/ui/src/side_nav/components/UserNavBlock.js
@@ -34,18 +34,18 @@ class UserNavBlock extends Component {
       <div className="sidebar--item">
         <div className="sidebar--square">
           <div className="sidebar--icon icon user" />
-          {isSuperAdmin
-            ? <span className="sidebar--icon sidebar--icon__superadmin icon crown2" />
-            : null}
+          {isSuperAdmin ? (
+            <span className="sidebar--icon sidebar--icon__superadmin icon crown2" />
+          ) : null}
         </div>
         <div className="sidebar-menu sidebar-menu--user-nav">
+          {customLinks ? (
+            <div className="sidebar-menu--section sidebar-menu--section__custom-links">
+              Custom Links
+            </div>
+          ) : null}
           {customLinks
-            ? <div className="sidebar-menu--section sidebar-menu--section__custom-links">
-                Custom Links
-              </div>
-            : null}
-          {customLinks
-            ? customLinks.map((link, i) =>
+            ? customLinks.map((link, i) => (
                 <a
                   key={i}
                   className="sidebar-menu--item sidebar-menu--item__link-name"
@@ -54,7 +54,7 @@ class UserNavBlock extends Component {
                 >
                   {link.name}
                 </a>
-              )
+              ))
             : null}
           <div className="sidebar-menu--section sidebar-menu--section__switch-orgs">
             Switch Organizations
diff --git a/ui/src/side_nav/containers/SideNav.js b/ui/src/side_nav/containers/SideNav.js
index 55ca9cca17..cf082e8fff 100644
--- a/ui/src/side_nav/containers/SideNav.js
+++ b/ui/src/side_nav/containers/SideNav.js
@@ -76,109 +76,102 @@ const SideNav = React.createClass({
 
     const isDefaultPage = location.split('/').includes(DEFAULT_HOME_PAGE)
 
-    return isHidden
-      ? null
-      : <NavBar location={location}>
-          <div
-            className={isDefaultPage ? 'sidebar--item active' : 'sidebar--item'}
+    return isHidden ? null : (
+      <NavBar location={location}>
+        <div
+          className={isDefaultPage ? 'sidebar--item active' : 'sidebar--item'}
+        >
+          <Link
+            to={`${sourcePrefix}/${DEFAULT_HOME_PAGE}`}
+            className="sidebar--square sidebar--logo"
           >
-            <Link
-              to={`${sourcePrefix}/${DEFAULT_HOME_PAGE}`}
-              className="sidebar--square sidebar--logo"
-            >
-              <span className="sidebar--icon icon cubo-uniform" />
-            </Link>
-          </div>
-          <NavBlock
-            icon="cubo-node"
-            link={`${sourcePrefix}/hosts`}
-            location={location}
-          >
-            <NavHeader link={`${sourcePrefix}/hosts`} title="Host List" />
-          </NavBlock>
-          <NavBlock
-            icon="graphline"
-            link={dataExplorerLink}
-            location={location}
-          >
-            <NavHeader link={dataExplorerLink} title="Data Explorer" />
-          </NavBlock>
-          <NavBlock
-            icon="dash-h"
-            link={`${sourcePrefix}/dashboards`}
-            location={location}
-          >
-            <NavHeader
-              link={`${sourcePrefix}/dashboards`}
-              title={'Dashboards'}
-            />
-          </NavBlock>
-          <NavBlock
-            matcher="alerts"
-            icon="alert-triangle"
-            link={`${sourcePrefix}/alert-rules`}
-            location={location}
-          >
-            <NavHeader link={`${sourcePrefix}/alert-rules`} title="Alerting" />
-            <NavListItem link={`${sourcePrefix}/alert-rules`}>
-              Manage Tasks
-            </NavListItem>
-            <NavListItem link={`${sourcePrefix}/alerts`}>
-              Alert History
-            </NavListItem>
-          </NavBlock>
+            <span className="sidebar--icon icon cubo-uniform" />
+          </Link>
+        </div>
+        <NavBlock
+          icon="cubo-node"
+          link={`${sourcePrefix}/hosts`}
+          location={location}
+        >
+          <NavHeader link={`${sourcePrefix}/hosts`} title="Host List" />
+        </NavBlock>
+        <NavBlock icon="graphline" link={dataExplorerLink} location={location}>
+          <NavHeader link={dataExplorerLink} title="Data Explorer" />
+        </NavBlock>
+        <NavBlock
+          icon="dash-h"
+          link={`${sourcePrefix}/dashboards`}
+          location={location}
+        >
+          <NavHeader link={`${sourcePrefix}/dashboards`} title={'Dashboards'} />
+        </NavBlock>
+        <NavBlock
+          matcher="alerts"
+          icon="alert-triangle"
+          link={`${sourcePrefix}/alert-rules`}
+          location={location}
+        >
+          <NavHeader link={`${sourcePrefix}/alert-rules`} title="Alerting" />
+          <NavListItem link={`${sourcePrefix}/alert-rules`}>
+            Manage Tasks
+          </NavListItem>
+          <NavListItem link={`${sourcePrefix}/alerts`}>
+            Alert History
+          </NavListItem>
+        </NavBlock>
 
-          <Authorized
-            requiredRole={ADMIN_ROLE}
-            replaceWithIfNotUsingAuth={
-              <NavBlock
-                icon="crown2"
-                link={`${sourcePrefix}/admin-influxdb`}
-                location={location}
-              >
-                <NavHeader
-                  link={`${sourcePrefix}/admin-influxdb`}
-                  title="InfluxDB Admin"
-                />
-              </NavBlock>
-            }
-          >
+        <Authorized
+          requiredRole={ADMIN_ROLE}
+          replaceWithIfNotUsingAuth={
             <NavBlock
               icon="crown2"
-              link={`${sourcePrefix}/admin-chronograf`}
+              link={`${sourcePrefix}/admin-influxdb`}
               location={location}
             >
               <NavHeader
-                link={`${sourcePrefix}/admin-chronograf`}
-                title="Admin"
+                link={`${sourcePrefix}/admin-influxdb`}
+                title="InfluxDB Admin"
               />
-              <NavListItem link={`${sourcePrefix}/admin-chronograf`}>
-                Chronograf
-              </NavListItem>
-              <NavListItem link={`${sourcePrefix}/admin-influxdb`}>
-                InfluxDB
-              </NavListItem>
             </NavBlock>
-          </Authorized>
+          }
+        >
           <NavBlock
-            icon="cog-thick"
-            link={`${sourcePrefix}/manage-sources`}
+            icon="crown2"
+            link={`${sourcePrefix}/admin-chronograf`}
             location={location}
           >
             <NavHeader
-              link={`${sourcePrefix}/manage-sources`}
-              title="Configuration"
+              link={`${sourcePrefix}/admin-chronograf`}
+              title="Admin"
             />
+            <NavListItem link={`${sourcePrefix}/admin-chronograf`}>
+              Chronograf
+            </NavListItem>
+            <NavListItem link={`${sourcePrefix}/admin-influxdb`}>
+              InfluxDB
+            </NavListItem>
           </NavBlock>
-          {isUsingAuth
-            ? <UserNavBlock
-                logoutLink={logoutLink}
-                links={links}
-                me={me}
-                sourcePrefix={sourcePrefix}
-              />
-            : null}
-        </NavBar>
+        </Authorized>
+        <NavBlock
+          icon="cog-thick"
+          link={`${sourcePrefix}/manage-sources`}
+          location={location}
+        >
+          <NavHeader
+            link={`${sourcePrefix}/manage-sources`}
+            title="Configuration"
+          />
+        </NavBlock>
+        {isUsingAuth ? (
+          <UserNavBlock
+            logoutLink={logoutLink}
+            links={links}
+            me={me}
+            sourcePrefix={sourcePrefix}
+          />
+        ) : null}
+      </NavBar>
+    )
   },
 })
 const mapStateToProps = ({
diff --git a/ui/src/sources/components/InfluxTable.js b/ui/src/sources/components/InfluxTable.js
index fef5936b1b..617484c4bc 100644
--- a/ui/src/sources/components/InfluxTable.js
+++ b/ui/src/sources/components/InfluxTable.js
@@ -45,9 +45,7 @@ const kapacitorDropdown = (
   }
 
   const unauthorizedDropdown = (
-    <div className="source-table--kapacitor__view-only">
-      {selected}
-    </div>
+    <div className="source-table--kapacitor__view-only">{selected}</div>
   )
 
   return (
@@ -98,17 +96,19 @@ const InfluxTable = ({
   handleDeleteKapacitor,
   isUsingAuth,
   me,
-}) =>
+}) => (
   <div className="row">
     <div className="col-md-12">
       <div className="panel">
         <div className="panel-heading">
           <h2 className="panel-title">
-            {isUsingAuth
-              ? <span>
-                  Connections for <em>{me.currentOrganization.name}</em>
-                </span>
-              : <span>Connections</span>}
+            {isUsingAuth ? (
+              <span>
+                Connections for <em>{me.currentOrganization.name}</em>
+              </span>
+            ) : (
+              <span>Connections</span>
+            )}
           </h2>
           <Authorized requiredRole={EDITOR_ROLE}>
             <Link
@@ -145,26 +145,24 @@ const InfluxTable = ({
                     className={s.id === source.id ? 'highlight' : null}
                   >
                     <td>
-                      {s.id === source.id
-                        ? <div className="btn btn-success btn-xs source-table--connect">
-                            Connected
-                          </div>
-                        : <Link
-                            className="btn btn-default btn-xs source-table--connect"
-                            to={`/sources/${s.id}/hosts`}
-                          >
-                            Connect
-                          </Link>}
+                      {s.id === source.id ? (
+                        <div className="btn btn-success btn-xs source-table--connect">
+                          Connected
+                        </div>
+                      ) : (
+                        <Link
+                          className="btn btn-default btn-xs source-table--connect"
+                          to={`/sources/${s.id}/hosts`}
+                        >
+                          Connect
+                        </Link>
+                      )}
                     </td>
                     <td>
                       <h5 className="margin-zero">
                         <Authorized
                           requiredRole={EDITOR_ROLE}
-                          replaceWithIfNotAuthorized={
-                            <strong>
-                              {s.name}
-                            </strong>
-                          }
+                          replaceWithIfNotAuthorized={<strong>{s.name}</strong>}
                         >
                           <Link
                             to={`${location.pathname}/${s.id}/edit`}
@@ -172,16 +170,12 @@ const InfluxTable = ({
                               s.id === source.id ? 'link-success' : null
                             }
                           >
-                            <strong>
-                              {s.name}
-                            </strong>
+                            <strong>{s.name}</strong>
                             {s.default ? ' (Default)' : null}
                           </Link>
                         </Authorized>
                       </h5>
-                      <span>
-                        {s.url}
-                      </span>
+                      <span>{s.url}</span>
                     </td>
                     <td className="text-right">
                       <Authorized requiredRole={EDITOR_ROLE}>
@@ -212,6 +206,7 @@ const InfluxTable = ({
       </div>
     </div>
   </div>
+)
 
 const {array, bool, func, shape, string} = PropTypes
 
diff --git a/ui/src/sources/components/SourceForm.js b/ui/src/sources/components/SourceForm.js
index 9c97ef5a10..449201915e 100644
--- a/ui/src/sources/components/SourceForm.js
+++ b/ui/src/sources/components/SourceForm.js
@@ -18,22 +18,23 @@ const SourceForm = ({
   gotoPurgatory,
   isInitialSource,
   me,
-}) =>
+}) => (
   <div className="panel-body">
-    {isUsingAuth && isInitialSource
-      ? <div className="text-center">
-          {me.role === SUPERADMIN_ROLE
-            ? <h3>
-                <strong>{me.currentOrganization.name}</strong> has no
-                connections
-              </h3>
-            : <h3>
-                <strong>{me.currentOrganization.name}</strong> has no
-                connections available to <em>{me.role}s</em>
-              </h3>}
-          <h6>Add a Connection below:</h6>
-        </div>
-      : null}
+    {isUsingAuth && isInitialSource ? (
+      <div className="text-center">
+        {me.role === SUPERADMIN_ROLE ? (
+          <h3>
+            <strong>{me.currentOrganization.name}</strong> has no connections
+          </h3>
+        ) : (
+          <h3>
+            <strong>{me.currentOrganization.name}</strong> has no connections
+            available to <em>{me.role}s</em>
+          </h3>
+        )}
+        <h6>Add a Connection below:</h6>
+      </div>
+    ) : null}
 
     <form onSubmit={onSubmit}>
       <div className="form-group col-xs-12 col-sm-6">
@@ -85,20 +86,20 @@ const SourceForm = ({
           value={source.password}
         />
       </div>
-      {_.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"
-              className="form-control"
-              id="meta-url"
-              placeholder="http://localhost:8091"
-              onChange={onInputChange}
-              value={source.metaUrl}
-            />
-          </div>
-        : null}
+      {_.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"
+            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
@@ -124,23 +125,21 @@ const SourceForm = ({
           </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"
-                name="insecureSkipVerify"
-                checked={source.insecureSkipVerify}
-                onChange={onInputChange}
-              />
-              <label htmlFor="insecureSkipVerifyCheckbox">Unsafe SSL</label>
-            </div>
-            <label className="form-helper">
-              {insecureSkipVerifyText}
-            </label>
+      {_.get(source, 'url', '').startsWith('https') ? (
+        <div className="form-group col-xs-12">
+          <div className="form-control-static">
+            <input
+              type="checkbox"
+              id="insecureSkipVerifyCheckbox"
+              name="insecureSkipVerify"
+              checked={source.insecureSkipVerify}
+              onChange={onInputChange}
+            />
+            <label htmlFor="insecureSkipVerifyCheckbox">Unsafe SSL</label>
           </div>
-        : null}
+          <label className="form-helper">{insecureSkipVerifyText}</label>
+        </div>
+      ) : null}
       <div className="form-group form-group-submit text-center col-xs-12 col-sm-6 col-sm-offset-3">
         <button
           className={classnames('btn btn-block', {
@@ -154,14 +153,15 @@ const SourceForm = ({
         </button>
 
         <br />
-        {isUsingAuth
-          ? <button className="btn btn-link btn-sm" onClick={gotoPurgatory}>
-              <span className="icon shuffle" /> Switch Orgs
-            </button>
-          : null}
+        {isUsingAuth ? (
+          <button className="btn btn-link btn-sm" onClick={gotoPurgatory}>
+            <span className="icon shuffle" /> Switch Orgs
+          </button>
+        ) : null}
       </div>
     </form>
   </div>
+)
 
 const {bool, func, shape, string} = PropTypes
 
diff --git a/ui/src/sources/containers/ManageSources.js b/ui/src/sources/containers/ManageSources.js
index 2368cd1910..b1d705d92d 100644
--- a/ui/src/sources/containers/ManageSources.js
+++ b/ui/src/sources/containers/ManageSources.js
@@ -80,9 +80,7 @@ class ManageSources extends Component {
               handleDeleteSource={this.handleDeleteSource}
               setActiveKapacitor={this.handleSetActiveKapacitor}
             />
-            <p className="version-number">
-              Chronograf Version: {V_NUMBER}
-            </p>
+            <p className="version-number">Chronograf Version: {V_NUMBER}</p>
           </div>
         </FancyScrollbar>
       </div>
diff --git a/ui/src/sources/containers/SourcePage.js b/ui/src/sources/containers/SourcePage.js
index 8c813e76fb..b0d7b4a659 100644
--- a/ui/src/sources/containers/SourcePage.js
+++ b/ui/src/sources/containers/SourcePage.js
@@ -220,11 +220,11 @@ class SourcePage extends Component {
                     : 'Add a New InfluxDB Connection'}
                 </h1>
               </div>
-              {isInitialSource
-                ? null
-                : <div className="page-header__right">
-                    <SourceIndicator />
-                  </div>}
+              {isInitialSource ? null : (
+                <div className="page-header__right">
+                  <SourceIndicator />
+                </div>
+              )}
             </div>
           </div>
         </div>
diff --git a/ui/src/status/components/JSONFeedReader.js b/ui/src/status/components/JSONFeedReader.js
index 820c287927..a5adbf60c6 100644
--- a/ui/src/status/components/JSONFeedReader.js
+++ b/ui/src/status/components/JSONFeedReader.js
@@ -4,44 +4,39 @@ import PropTypes from 'prop-types'
 import moment from 'moment'
 
 const JSONFeedReader = ({data}) =>
-  data && data.items
-    ? <div className="newsfeed">
-        {data.items
-          ? data.items.map(
-              ({
-                id,
-                date_published: datePublished,
-                url,
-                title,
-                author: {name},
-                image,
-                content_text: contentText,
-              }) =>
-                <div key={id} className="newsfeed--post">
-                  <div className="newsfeed--date">
-                    {`${moment(datePublished).format('MMM DD')}`}
-                  </div>
-                  <div className="newsfeed--post-title">
-                    <a href={url} target="_blank">
-                      <h6>
-                        {title}
-                      </h6>
-                    </a>
-                    <span>
-                      by {name}
-                    </span>
-                  </div>
-                  <div className="newsfeed--content">
-                    {image ? <img src={image} /> : null}
-                    <p>
-                      {contentText}
-                    </p>
-                  </div>
+  data && data.items ? (
+    <div className="newsfeed">
+      {data.items
+        ? data.items.map(
+            ({
+              id,
+              date_published: datePublished,
+              url,
+              title,
+              author: {name},
+              image,
+              content_text: contentText,
+            }) => (
+              <div key={id} className="newsfeed--post">
+                <div className="newsfeed--date">
+                  {`${moment(datePublished).format('MMM DD')}`}
                 </div>
+                <div className="newsfeed--post-title">
+                  <a href={url} target="_blank">
+                    <h6>{title}</h6>
+                  </a>
+                  <span>by {name}</span>
+                </div>
+                <div className="newsfeed--content">
+                  {image ? <img src={image} /> : null}
+                  <p>{contentText}</p>
+                </div>
+              </div>
             )
-          : null}
-      </div>
-    : null
+          )
+        : null}
+    </div>
+  ) : null
 
 const {arrayOf, shape, string} = PropTypes
 
diff --git a/ui/src/status/components/NewsFeed.js b/ui/src/status/components/NewsFeed.js
index 11bb92098a..eda8834c07 100644
--- a/ui/src/status/components/NewsFeed.js
+++ b/ui/src/status/components/NewsFeed.js
@@ -19,31 +19,33 @@ class NewsFeed extends Component {
     const {hasCompletedFetchOnce, isFetching, isFailed, data} = this.props
 
     if (!hasCompletedFetchOnce) {
-      return isFailed
-        ? <div className="graph-empty">
-            <p>Failed to load News Feed</p>
-          </div>
-        : // TODO: Factor this out of here and AutoRefresh
-          <div className="graph-fetching">
-            <div className="graph-spinner" />
-          </div>
+      return isFailed ? (
+        <div className="graph-empty">
+          <p>Failed to load News Feed</p>
+        </div>
+      ) : (
+        // TODO: Factor this out of here and AutoRefresh
+        <div className="graph-fetching">
+          <div className="graph-spinner" />
+        </div>
+      )
     }
 
     return (
       <FancyScrollbar autoHide={false} className="newsfeed--container">
-        {isFetching
-          ? // TODO: Factor this out of here and AutoRefresh
-            <div className="graph-panel__refreshing">
-              <div />
-              <div />
-              <div />
-            </div>
-          : null}
-        {isFailed
-          ? <div className="graph-empty">
-              <p>Failed to refresh News Feed</p>
-            </div>
-          : null}
+        {isFetching ? (
+          // TODO: Factor this out of here and AutoRefresh
+          <div className="graph-panel__refreshing">
+            <div />
+            <div />
+            <div />
+          </div>
+        ) : null}
+        {isFailed ? (
+          <div className="graph-empty">
+            <p>Failed to refresh News Feed</p>
+          </div>
+        ) : null}
         <JSONFeedReader data={data} />
       </FancyScrollbar>
     )
diff --git a/ui/src/status/containers/StatusPage.js b/ui/src/status/containers/StatusPage.js
index 179d589f8a..a953455c0e 100644
--- a/ui/src/status/containers/StatusPage.js
+++ b/ui/src/status/containers/StatusPage.js
@@ -63,18 +63,20 @@ class StatusPage extends Component {
         </div>
         <FancyScrollbar className="page-contents">
           <div className="dashboard container-fluid full-width">
-            {cells.length
-              ? <LayoutRenderer
-                  autoRefresh={autoRefresh}
-                  timeRange={timeRange}
-                  cells={cells}
-                  templates={templates}
-                  source={source}
-                  shouldNotBeEditable={true}
-                  isStatusPage={true}
-                  isEditable={false}
-                />
-              : <span>Loading Status Page...</span>}
+            {cells.length ? (
+              <LayoutRenderer
+                autoRefresh={autoRefresh}
+                timeRange={timeRange}
+                cells={cells}
+                templates={templates}
+                source={source}
+                shouldNotBeEditable={true}
+                isStatusPage={true}
+                isEditable={false}
+              />
+            ) : (
+              <span>Loading Status Page...</span>
+            )}
           </div>
         </FancyScrollbar>
       </div>
diff --git a/ui/src/utils/influxql.js b/ui/src/utils/influxql.js
index 71838775db..99762c744b 100644
--- a/ui/src/utils/influxql.js
+++ b/ui/src/utils/influxql.js
@@ -157,9 +157,9 @@ function _buildGroupByTime(groupBy) {
     return ''
   }
 
-  return ` GROUP BY ${groupBy.time === AUTO_GROUP_BY
-    ? TEMP_VAR_INTERVAL
-    : `time(${groupBy.time})`}`
+  return ` GROUP BY ${
+    groupBy.time === AUTO_GROUP_BY ? TEMP_VAR_INTERVAL : `time(${groupBy.time})`
+  }`
 }
 
 function _buildGroupByTags(groupBy) {
diff --git a/ui/src/utils/timeSeriesToDygraph.js b/ui/src/utils/timeSeriesToDygraph.js
index 89873d5eb0..5f3697d601 100644
--- a/ui/src/utils/timeSeriesToDygraph.js
+++ b/ui/src/utils/timeSeriesToDygraph.js
@@ -5,7 +5,7 @@ import {map, reduce, forEach, concat, clone} from 'fast.js'
 /**
  * Accepts an array of raw influxdb responses and returns a format
  * that Dygraph understands.
-**/
+ **/
 
 const DEFAULT_SIZE = 0
 const cells = {