Apply eslint fix for single-quote warnings

2017-04-25 10:53:01 -07:00 · 2017-04-25 10:53:01 -07:00 · 6cf9e97518
parent ba8de882d7
commit 6cf9e97518
46 changed files with 100 additions and 90 deletions
--- a/ui/src/CheckSources.js
+++ b/ui/src/CheckSources.js
@ -67,7 +67,7 @@ const CheckSources = React.createClass({
      return router.push(`/sources/new?redirectPath=${location.pathname}`)
    }

-    if (!isFetching && !location.pathname.includes("/manage-sources")) {
+    if (!isFetching && !location.pathname.includes('/manage-sources')) {
      // Do simple query to proxy to see if the source is up.
      try {
        await showDatabases(source.links.proxy)
--- a/ui/src/admin/components/RoleRow.js
+++ b/ui/src/admin/components/RoleRow.js
@ -37,7 +37,7 @@ const RoleRow = ({
        <RoleEditingRow role={role} onEdit={onEdit} onSave={onSave} isNew={isNew} />
        <td></td>
        <td></td>
-        <td className="text-right" style={{width: "85px"}}>
+        <td className="text-right" style={{width: '85px'}}>
          <ConfirmButtons item={role} onConfirm={onSave} onCancel={onCancel} />
        </td>
      </tr>
--- a/ui/src/admin/components/UserRow.js
+++ b/ui/src/admin/components/UserRow.js
@ -42,7 +42,7 @@ const UserRow = ({
        <UserEditingRow user={user} onEdit={onEdit} onSave={onSave} isNew={isNew} />
        {hasRoles ? <td></td> : null}
        <td></td>
-        <td className="text-right" style={{width: "85px"}}>
+        <td className="text-right" style={{width: '85px'}}>
          <ConfirmButtons item={user} onConfirm={onSave} onCancel={onCancel} />
        </td>
      </tr>
@ -75,7 +75,7 @@ const UserRow = ({
            /> : null
        }
      </td>
-      <td className="text-right" style={{width: "300px"}}>
+      <td className="text-right" style={{width: '300px'}}>
        <ChangePassRow onEdit={onEdit} onApply={handleUpdatePassword} user={user} />
      </td>
      <DeleteConfirmTableCell onDelete={onDelete} item={user} />
--- a/ui/src/alerts/apis/index.js
+++ b/ui/src/alerts/apis/index.js
@ -4,6 +4,6 @@ export function getAlerts(source, timeRange) {
  return proxy({
    source,
    query: `SELECT host, value, level, alertName FROM alerts WHERE time >= '${timeRange.lower}' AND time <= '${timeRange.upper}' ORDER BY time desc`,
-    db: "chronograf",
+    db: 'chronograf',
  })
 }
--- a/ui/src/dashboards/components/CellEditorOverlay.js
+++ b/ui/src/dashboards/components/CellEditorOverlay.js
@ -84,7 +84,7 @@ class CellEditorOverlay extends Component {
    newCell.queries = queriesWorkingDraft.map((q) => {
      const query = q.rawText || buildInfluxQLQuery(timeRange, q)
      const label = q.rawText ?
-        "" :
+        '' :
        `${q.measurement}.${q.fields[0].field}`

      return {
--- a/ui/src/dashboards/containers/DashboardsPage.js
+++ b/ui/src/dashboards/containers/DashboardsPage.js
@ -56,9 +56,9 @@ const DashboardsPage = React.createClass({
    const dashboardLink = `/sources/${this.props.source.id}`
    let tableHeader
    if (dashboards === null) {
-      tableHeader = "Loading Dashboards..."
+      tableHeader = 'Loading Dashboards...'
    } else if (dashboards.length === 0) {
-      tableHeader = "1 Dashboard"
+      tableHeader = '1 Dashboard'
    } else {
      tableHeader = `${dashboards.length + 1} Dashboards`
    }
--- a/ui/src/data_explorer/components/FieldListItem.js
+++ b/ui/src/data_explorer/components/FieldListItem.js
@ -39,7 +39,7 @@ const FieldListItem = React.createClass({
    })

    return (
-      <div className={classNames("query-builder--list-item", {active: isSelected})} key={fieldFunc} onClick={_.wrap(fieldFunc, this.handleToggleField)}>
+      <div className={classNames('query-builder--list-item', {active: isSelected})} key={fieldFunc} onClick={_.wrap(fieldFunc, this.handleToggleField)}>
        <span>
          <div className="query-builder--checkbox"></div>
          {fieldText}
--- a/ui/src/data_explorer/components/GroupByTimeDropdown.js
+++ b/ui/src/data_explorer/components/GroupByTimeDropdown.js
@ -16,7 +16,7 @@ const GroupByTimeDropdown = React.createClass({
    const {isOpen, selected, onChooseGroupByTime} = this.props

    return (
-      <div className={classNames("dropdown group-by-time-dropdown", {open: isOpen})}>
+      <div className={classNames('dropdown group-by-time-dropdown', {open: isOpen})}>
        <div className="btn btn-sm btn-info dropdown-toggle" data-toggle="dropdown">
          <span>Group by {selected || 'time'}</span>
          <span className="caret"></span>
--- a/ui/src/data_explorer/components/MeasurementList.js
+++ b/ui/src/data_explorer/components/MeasurementList.js
@ -25,7 +25,7 @@ const MeasurementList = React.createClass({
  getInitialState() {
    return {
      measurements: [],
-      filterText: "",
+      filterText: '',
    }
  },

--- a/ui/src/data_explorer/components/QueryEditor.js
+++ b/ui/src/data_explorer/components/QueryEditor.js
@ -6,12 +6,7 @@ import {QUERY_TEMPLATES} from 'src/data_explorer/constants'

 const ENTER = 13
 const ESCAPE = 27
-const {
-  bool,
-  func,
-  shape,
-  string,
-} = PropTypes
+const {bool, func, shape, string} = PropTypes
 const QueryEditor = React.createClass({
  propTypes: {
    query: string.isRequired,
@ -74,23 +69,26 @@ const QueryEditor = React.createClass({
          onChange={this.handleChange}
          onKeyDown={this.handleKeyDown}
          onBlur={this.handleUpdate}
-          ref={(editor) => this.editor = editor}
+          ref={editor => (this.editor = editor)}
          value={value}
          placeholder="Enter a query or select database, measurement, and field below and have us build one for you..."
          autoComplete="off"
          spellCheck="false"
        />
        {this.renderStatus(status)}
-        <Dropdown items={QUERY_TEMPLATES} selected={'Query Templates'} onChoose={this.handleChooseTemplate} className="query-editor--templates"/>
+        <Dropdown
+          items={QUERY_TEMPLATES}
+          selected={'Query Templates'}
+          onChoose={this.handleChooseTemplate}
+          className="query-editor--templates"
+        />
      </div>
    )
  },

  renderStatus(status) {
    if (!status) {
-      return (
-        <div className="query-editor--status"></div>
-      )
+      return <div className="query-editor--status" />
    }

    if (status.loading) {
@ -102,8 +100,20 @@ const QueryEditor = React.createClass({
    }

    return (
-      <div className={classNames("query-editor--status", {"query-editor--error": status.error, "query-editor--success": status.success, "query-editor--warning": status.warn})}>
-        <span className={classNames("icon", {stop: status.error, checkmark: status.success, "alert-triangle": status.warn})}></span>
+      <div
+        className={classNames('query-editor--status', {
+          'query-editor--error': status.error,
+          'query-editor--success': status.success,
+          'query-editor--warning': status.warn,
+        })}
+      >
+        <span
+          className={classNames('icon', {
+            stop: status.error,
+            checkmark: status.success,
+            'alert-triangle': status.warn,
+          })}
+        />
        {status.error || status.warn || status.success}
      </div>
    )
--- a/ui/src/data_explorer/components/TagList.js
+++ b/ui/src/data_explorer/components/TagList.js
@ -94,7 +94,7 @@ const TagList = React.createClass({
        <div className="query-builder--heading">
          <span>Tags</span>
          {(!query.database || !query.measurement || !query.retentionPolicy) ? null :
-          <div className={cx("flip-toggle", {flipped: query.areTagsAccepted})} onClick={this.handleAcceptReject}>
+          <div className={cx('flip-toggle', {flipped: query.areTagsAccepted})} onClick={this.handleAcceptReject}>
            <div className="flip-toggle--container">
              <div className="flip-toggle--front">!=</div>
              <div className="flip-toggle--back">=</div>
--- a/ui/src/data_explorer/components/TagListItem.js
+++ b/ui/src/data_explorer/components/TagListItem.js
@ -87,7 +87,7 @@ const TagListItem = React.createClass({

    return (
      <div>
-        <div className={classNames("query-builder--list-item", {active: isOpen})} onClick={this.handleClickKey}>
+        <div className={classNames('query-builder--list-item', {active: isOpen})} onClick={this.handleClickKey}>
          <span>
            <div className="query-builder--caret icon caret-right"></div>
            {tagItemLabel}
--- a/ui/src/data_explorer/components/VisHeader.js
+++ b/ui/src/data_explorer/components/VisHeader.js
@ -9,7 +9,7 @@ const VisHeader = ({views, view, onToggleView, name}) => (
          <li
            key={v}
            onClick={() => onToggleView(v)}
-            className={classNames("toggle-btn ", {active: view === v})}>
+            className={classNames('toggle-btn ', {active: view === v})}>
            {v}
          </li>
        ))}
--- a/ui/src/data_explorer/components/VisView.js
+++ b/ui/src/data_explorer/components/VisView.js
@ -49,7 +49,7 @@ const VisView = ({
      autoRefresh={autoRefresh}
      activeQueryIndex={activeQueryIndex}
      isInDataExplorer={true}
-      showSingleStat={cellType === "line-plus-single-stat"}
+      showSingleStat={cellType === 'line-plus-single-stat'}
      displayOptions={displayOptions}
      editQueryStatus={editQueryStatus}
    />
--- a/ui/src/data_explorer/components/Visualization.js
+++ b/ui/src/data_explorer/components/Visualization.js
@ -95,7 +95,7 @@ const Visualization = React.createClass({
    return (
      <div className="graph" style={{height}}>
        <VisHeader views={VIEWS} view={view} onToggleView={this.handleToggleView} name={name || 'Graph'}/>
-        <div className={classNames({"graph-container": view === GRAPH, "table-container": view === TABLE})}>
+        <div className={classNames({'graph-container': view === GRAPH, 'table-container': view === TABLE})}>
          <VisView
            view={view}
            queries={queries}
--- a/ui/src/data_explorer/constants/index.js
+++ b/ui/src/data_explorer/constants/index.js
@ -24,8 +24,8 @@ export const QUERY_TEMPLATES = [
  {text: 'Create Continuous Query', query: 'CREATE CONTINUOUS QUERY "cq_name" ON "db_name" BEGIN SELECT min("field") INTO "target_measurement" FROM "current_measurement" GROUP BY time(30m) END'},
  {text: 'Drop Continuous Query', query: 'DROP CONTINUOUS QUERY "cq_name" ON "db_name"'},
  {text: 'Show Users', query: 'SHOW USERS'},
-  {text: 'Create User', query: `CREATE USER "username" WITH PASSWORD 'password'`},
-  {text: 'Create Admin User', query: `CREATE USER "username" WITH PASSWORD 'password' WITH ALL PRIVILEGES`},
+  {text: 'Create User', query: 'CREATE USER "username" WITH PASSWORD \'password\''},
+  {text: 'Create Admin User', query: 'CREATE USER "username" WITH PASSWORD \'password\' WITH ALL PRIVILEGES'},
  {text: 'Drop User', query: 'DROP USER "username"'},
  {text: 'Show Stats', query: 'SHOW STATS'},
  {text: 'Show Diagnostics', query: 'SHOW DIAGNOSTICS'},
--- a/ui/src/hosts/apis/index.js
+++ b/ui/src/hosts/apis/index.js
@ -5,7 +5,7 @@ import _ from 'lodash'
 export function getCpuAndLoadForHosts(proxyLink, telegrafDB) {
  return proxy({
    source: proxyLink,
-    query: `select mean(usage_user) from cpu where cpu = 'cpu-total' and time > now() - 10m group by host; select mean("load1") from "system" where time > now() - 10m group by host;  select mean("Percent_Processor_Time") from win_cpu where time > now() - 10m group by host; select mean("Processor_Queue_Length") from win_system where time > now() - 10s group by host; select non_negative_derivative(mean(uptime)) as deltaUptime from "system" where time > now() - 10m group by host, time(1m) fill(0); show tag values from /win_system|system/ with key = "host"`,
+    query: 'select mean(usage_user) from cpu where cpu = \'cpu-total\' and time > now() - 10m group by host; select mean("load1") from "system" where time > now() - 10m group by host;  select mean("Percent_Processor_Time") from win_cpu where time > now() - 10m group by host; select mean("Processor_Queue_Length") from win_system where time > now() - 10s group by host; select non_negative_derivative(mean(uptime)) as deltaUptime from "system" where time > now() - 10m group by host, time(1m) fill(0); show tag values from /win_system|system/ with key = "host"',
    db: telegrafDB,
  }).then((resp) => {
    const hosts = {}
--- a/ui/src/hosts/components/HostsTable.js
+++ b/ui/src/hosts/components/HostsTable.js
@ -83,11 +83,11 @@ const HostsTable = React.createClass({
  sortableClasses(key) {
    if (this.state.sortKey === key) {
      if (this.state.sortDirection === 'asc') {
-        return "sortable-header sorting-up"
+        return 'sortable-header sorting-up'
      }
-      return "sortable-header sorting-down"
+      return 'sortable-header sorting-down'
    }
-    return "sortable-header"
+    return 'sortable-header'
  },

  render() {
@ -99,11 +99,11 @@ const HostsTable = React.createClass({
    let hostsTitle

    if (hostsLoading) {
-      hostsTitle = `Loading Hosts...`
+      hostsTitle = 'Loading Hosts...'
    } else if (hostsError.length) {
-      hostsTitle = `There was a problem loading hosts`
+      hostsTitle = 'There was a problem loading hosts'
    } else if (hosts.length === 0) {
-      hostsTitle = `No hosts found`
+      hostsTitle = 'No hosts found'
    } else if (hostCount === 1) {
      hostsTitle = `${hostCount} Host`
    } else {
@ -164,11 +164,11 @@ const HostRow = React.createClass({
    const {host, source} = this.props
    const {name, cpu, load, apps = []} = host

-    let stateStr = ""
+    let stateStr = ''
    if (host.deltaUptime < 0) {
-      stateStr = "table-dot dot-critical"
+      stateStr = 'table-dot dot-critical'
    } else if (host.deltaUptime > 0) {
-      stateStr = "table-dot dot-success"
+      stateStr = 'table-dot dot-success'
    }

    return (
@ -182,7 +182,7 @@ const HostRow = React.createClass({
            return (
              <span key={app}>
                <Link
-                  style={{marginLeft: "2px"}}
+                  style={{marginLeft: '2px'}}
                  to={{pathname: `/sources/${source.id}/hosts/${name}`, query: {app}}}>
                  {app}
                </Link>
--- a/ui/src/index.js
+++ b/ui/src/index.js
@ -41,7 +41,7 @@ if (basepath) {
  })
 } else {
  browserHistory = useRouterHistory(createHistory)({
-    basename: "",
+    basename: '',
  })
 }

--- a/ui/src/kapacitor/components/DataSection.js
+++ b/ui/src/kapacitor/components/DataSection.js
@ -77,7 +77,7 @@ export const DataSection = React.createClass({

  render() {
    const {query, timeRange: {lower}} = this.props
-    const statement = query.rawText || buildInfluxQLQuery({lower}, query) || `Build a query below`
+    const statement = query.rawText || buildInfluxQLQuery({lower}, query) || 'Build a query below'

    return (
      <div className="kapacitor-rule-section kapacitor-metric-selector">
--- a/ui/src/kapacitor/components/KapacitorRule.js
+++ b/ui/src/kapacitor/components/KapacitorRule.js
@ -87,9 +87,9 @@ export const KapacitorRule = React.createClass({

    createRule(kapacitor, newRule).then(() => {
      router.push(`/sources/${source.id}/alert-rules`)
-      addFlashMessage({type: 'success', text: `Rule successfully created`})
+      addFlashMessage({type: 'success', text: 'Rule successfully created'})
    }).catch(() => {
-      addFlashMessage({type: 'error', text: `There was a problem creating the rule`})
+      addFlashMessage({type: 'error', text: 'There was a problem creating the rule'})
    })
  },

@ -101,9 +101,9 @@ export const KapacitorRule = React.createClass({
    })

    editRule(updatedRule).then(() => {
-      addFlashMessage({type: 'success', text: `Rule successfully updated!`})
+      addFlashMessage({type: 'success', text: 'Rule successfully updated!'})
    }).catch(() => {
-      addFlashMessage({type: 'error', text: `There was a problem updating the rule`})
+      addFlashMessage({type: 'error', text: 'There was a problem updating the rule'})
    })
  },

--- a/ui/src/kapacitor/components/KapacitorRulesTable.js
+++ b/ui/src/kapacitor/components/KapacitorRulesTable.js
@ -40,7 +40,7 @@ const RuleRow = ({rule, source, onDelete, onChangeRuleStatus}) => {
            id={`kapacitor-enabled ${rule.id}`}
            className="form-control-static"
            type="checkbox"
-            defaultChecked={rule.status === "enabled"}
+            defaultChecked={rule.status === 'enabled'}
            onClick={() => onChangeRuleStatus(rule)}
          />
          <label htmlFor={`kapacitor-enabled ${rule.id}`}></label>
--- a/ui/src/kapacitor/components/RuleGraph.js
+++ b/ui/src/kapacitor/components/RuleGraph.js
@ -29,7 +29,7 @@ export const RuleGraph = React.createClass({
    const autoRefreshMs = 30000
    const queryText = buildInfluxQLQuery({lower}, query)
    const queries = [{host: source.links.proxy, text: queryText}]
-    const kapacitorLineColors = ["#4ED8A0"]
+    const kapacitorLineColors = ['#4ED8A0']

    if (!queryText) {
      return (
--- a/ui/src/kapacitor/constants/index.js
+++ b/ui/src/kapacitor/constants/index.js
@ -29,14 +29,14 @@ export const ALERTS = ['alerta', 'hipchat', 'opsgenie', 'pagerduty', 'sensu', 's
 export const DEFAULT_RULE_ID = 'DEFAULT_RULE_ID'

 export const RULE_MESSAGE_TEMPLATES = {
-  id: {label: "{{.ID}}", text: "The ID of the alert"},
-  name: {label: "{{.Name}}", text: "Measurement name"},
-  taskName: {label: "{{.TaskName}}", text: "The name of the task"},
-  group: {label: "{{.Group}}", text: "Concatenation of all group-by tags of the form <code>&#91;key=value,&#93;+</code>. If no groupBy is performed equal to literal &quot;nil&quot;"},
-  tags: {label: "{{.Tags}}", text: "Map of tags. Use <code>&#123;&#123; index .Tags &quot;key&quot; &#125;&#125;</code> to get a specific tag value"},
-  level: {label: "{{.Level}}", text: "Alert Level, one of: <code>INFO</code><code>WARNING</code><code>CRITICAL</code>"},
-  fields: {label: `{{ index .Fields "value" }}`, text: "Map of fields. Use <code>&#123;&#123; index .Fields &quot;key&quot; &#125;&#125;</code> to get a specific field value"},
-  time: {label: "{{.Time}}", text: "The time of the point that triggered the event"},
+  id: {label: '{{.ID}}', text: 'The ID of the alert'},
+  name: {label: '{{.Name}}', text: 'Measurement name'},
+  taskName: {label: '{{.TaskName}}', text: 'The name of the task'},
+  group: {label: '{{.Group}}', text: 'Concatenation of all group-by tags of the form <code>&#91;key=value,&#93;+</code>. If no groupBy is performed equal to literal &quot;nil&quot;'},
+  tags: {label: '{{.Tags}}', text: 'Map of tags. Use <code>&#123;&#123; index .Tags &quot;key&quot; &#125;&#125;</code> to get a specific tag value'},
+  level: {label: '{{.Level}}', text: 'Alert Level, one of: <code>INFO</code><code>WARNING</code><code>CRITICAL</code>'},
+  fields: {label: '{{ index .Fields "value" }}', text: 'Map of fields. Use <code>&#123;&#123; index .Fields &quot;key&quot; &#125;&#125;</code> to get a specific field value'},
+  time: {label: '{{.Time}}', text: 'The time of the point that triggered the event'},
 }

 export const DEFAULT_ALERTS = ['http', 'tcp', 'exec']
--- a/ui/src/kapacitor/containers/KapacitorRulePage.js
+++ b/ui/src/kapacitor/containers/KapacitorRulePage.js
@ -60,9 +60,9 @@ export const KapacitorRulePage = React.createClass({
        })
        this.setState({enabledAlerts})
      }).catch(() => {
-        addFlashMessage({type: 'error', text: `There was a problem communicating with Kapacitor`})
+        addFlashMessage({type: 'error', text: 'There was a problem communicating with Kapacitor'})
      }).catch(() => {
-        addFlashMessage({type: 'error', text: `We couldn't find a configured Kapacitor for this source`})
+        addFlashMessage({type: 'error', text: 'We couldn\'t find a configured Kapacitor for this source'})
      })
    })
  },
--- a/ui/src/shared/actions/notifications.js
+++ b/ui/src/shared/actions/notifications.js
@ -2,7 +2,7 @@ export function publishNotification(type, message) {
  // this validator is purely for development purposes. It might make sense to move this to a middleware.
  const validTypes = ['error', 'success', 'warning']
  if (!validTypes.includes(type) || message === undefined) {
-    console.error("handleNotification must have a valid type and text") // eslint-disable-line no-console
+    console.error('handleNotification must have a valid type and text') // eslint-disable-line no-console
  }

  return {
--- a/ui/src/shared/actions/sources.js
+++ b/ui/src/shared/actions/sources.js
@ -58,7 +58,7 @@ export const removeAndLoadSources = (source) => async (dispatch) => {
    const {data: {sources: newSources}} = await getSources()
    dispatch(loadSources(newSources))
  } catch (err) {
-    dispatch(publishNotification("error", "Internal Server Error. Check API Logs"))
+    dispatch(publishNotification('error', 'Internal Server Error. Check API Logs'))
  }
 }

--- a/ui/src/shared/apis/index.js
+++ b/ui/src/shared/apis/index.js
@ -2,7 +2,7 @@ import AJAX from 'utils/ajax'

 export function fetchLayouts() {
  return AJAX({
-    url: `/chronograf/v1/layouts`,
+    url: '/chronograf/v1/layouts',
    method: 'GET',
    resource: 'layouts',
  })
--- a/ui/src/shared/apis/metaQuery.js
+++ b/ui/src/shared/apis/metaQuery.js
@ -3,7 +3,7 @@ import _ from 'lodash'
 import {buildInfluxUrl, proxy} from 'utils/queryUrlGenerator'

 export const showDatabases = async (source) => {
-  const query = `SHOW DATABASES`
+  const query = 'SHOW DATABASES'
  return await proxy({source, query})
 }

@ -52,7 +52,7 @@ export function showTagValues({source, database, retentionPolicy, measurement, t

 export function showShards() {
  return AJAX({
-    url: `/api/int/v1/show-shards`,
+    url: '/api/int/v1/show-shards',
  })
 }

--- a/ui/src/shared/components/AutoRefreshDropdown.js
+++ b/ui/src/shared/components/AutoRefreshDropdown.js
@ -49,11 +49,11 @@ const AutoRefreshDropdown = React.createClass({
    return (
      <div className="dropdown dropdown-160">
        <div className="btn btn-sm btn-info dropdown-toggle" onClick={() => self.toggleMenu()}>
-          <span className={classnames("icon", +milliseconds > 0 ? "refresh" : "pause")}></span>
+          <span className={classnames('icon', +milliseconds > 0 ? 'refresh' : 'pause')}></span>
          <span className="selected-time-range">{inputValue}</span>
          <span className="caret" />
        </div>
-        <ul className={classnames("dropdown-menu", {show: isOpen})}>
+        <ul className={classnames('dropdown-menu', {show: isOpen})}>
          <li className="dropdown-header">AutoRefresh Interval</li>
          {autoRefreshItems.map((item) => {
            return (
--- a/ui/src/shared/components/CustomTimeRange.js
+++ b/ui/src/shared/components/CustomTimeRange.js
@ -45,7 +45,7 @@ class CustomTimeRange extends Component {
    const {isVisible, onToggle, timeRange: {upper, lower}} = this.props

    return (
-      <div className={classNames("custom-time-range", {show: isVisible})} style={{display: 'flex'}}>
+      <div className={classNames('custom-time-range', {show: isVisible})} style={{display: 'flex'}}>
        <button className="btn btn-sm btn-info custom-time-range--btn" onClick={onToggle}>
          <span className="icon clock"></span>
          {`${moment(lower).format('MMM Do HH:mm')} — ${moment(upper).format('MMM Do HH:mm')}`}
--- a/ui/src/shared/components/DeleteConfirmTableCell.js
+++ b/ui/src/shared/components/DeleteConfirmTableCell.js
@ -2,7 +2,7 @@ import React from 'react'
 import DeleteConfirmButtons from 'shared/components/DeleteConfirmButtons'

 const DeleteConfirmTableCell = (props) => (
-  <td className="text-right" style={{width: "85px"}}>
+  <td className="text-right" style={{width: '85px'}}>
    <DeleteConfirmButtons {...props} />
  </td>
 )
--- a/ui/src/shared/components/Dygraph.js
+++ b/ui/src/shared/components/Dygraph.js
@ -125,7 +125,7 @@ export default React.createClass({

        legendContainerNode.style.left = `${legendLeft}px`
        if (legendOnBottom) {
-          legendContainerNode.style.bottom = `4px`
+          legendContainerNode.style.bottom = '4px'
        } else {
          legendContainerNode.style.top = `${legendTop}px`
        }
--- a/ui/src/shared/components/GraphTips.js
+++ b/ui/src/shared/components/GraphTips.js
@ -3,7 +3,7 @@ import ReactTooltip from 'react-tooltip'

 const GraphTips = React.createClass({
  render() {
-    const graphTipsText = `<p><b>Graph Tips:</b><br/><br/><code>Click + Drag</code> Zoom in (X or Y)</p><p><code>Shift + Click</code> Pan Graph Window</p><p><code>Double Click</code> Reset Graph Window</p>`
+    const graphTipsText = '<p><b>Graph Tips:</b><br/><br/><code>Click + Drag</code> Zoom in (X or Y)</p><p><code>Shift + Click</code> Pan Graph Window</p><p><code>Double Click</code> Reset Graph Window</p>'
    return (
      <div className="graph-tips" data-for="graph-tips-tooltip" data-tip={graphTipsText}>
        <span>?</span>
--- a/ui/src/shared/components/LayoutRenderer.js
+++ b/ui/src/shared/components/LayoutRenderer.js
@ -75,7 +75,7 @@ export const LayoutRenderer = React.createClass({
    }

    if (groupbys) {
-      if (groupbys.find((g) => g.includes("time"))) {
+      if (groupbys.find((g) => g.includes('time'))) {
        text += ` group by ${groupbys.join(',')}`
      } else if (groupbys.length > 0) {
        text += ` group by time(${defaultGroupBy}),${groupbys.join(',')}`
--- a/ui/src/shared/components/LineGraph.js
+++ b/ui/src/shared/components/LineGraph.js
@ -105,7 +105,7 @@ export default React.createClass({

    return (
      <div
-        className={classNames("dygraph", {"graph--hasYLabel": !!(options.ylabel || options.y2label)})}
+        className={classNames('dygraph', {'graph--hasYLabel': !!(options.ylabel || options.y2label)})}
        style={{height: '100%'}}
      >
        {isRefreshing ? this.renderSpinner() : null}
--- a/ui/src/shared/components/NameableGraph.js
+++ b/ui/src/shared/components/NameableGraph.js
@ -101,7 +101,7 @@ const NameableGraph = React.createClass({

    return (
      <div className="dash-graph">
-        <div className={classnames("dash-graph--heading", {"dash-graph--heading-draggable": !shouldNotBeEditable})}>{nameOrField}</div>
+        <div className={classnames('dash-graph--heading', {'dash-graph--heading-draggable': !shouldNotBeEditable})}>{nameOrField}</div>
        {
          shouldNotBeEditable ?
          null :
@ -124,7 +124,7 @@ const NameableGraph = React.createClass({
 })

 const ContextMenu = OnClickOutside(({isOpen, toggleMenu, onEdit, onRename, onDelete, cell}) => (
-  <div className={classnames("dash-graph--options", {"dash-graph--options-show": isOpen})} onClick={toggleMenu}>
+  <div className={classnames('dash-graph--options', {'dash-graph--options-show': isOpen})} onClick={toggleMenu}>
    <button className="btn btn-info btn-xs">
      <span className="icon caret-down"></span>
    </button>
--- a/ui/src/shared/components/ResizeHandle.js
+++ b/ui/src/shared/components/ResizeHandle.js
@ -14,7 +14,7 @@ const ResizeHandle = React.createClass({

    return (
      <div
-        className={cx("resizer__handle", {dragging: isDragging})}
+        className={cx('resizer__handle', {dragging: isDragging})}
        onMouseDown={onHandleStartDrag}
        style={{top}}
      />
--- a/ui/src/shared/components/Tabs.js
+++ b/ui/src/shared/components/Tabs.js
@ -13,7 +13,7 @@ export const Tab = React.createClass({
  render() {
    return (
      <div
-        className={cx("btn tab", {active: this.props.isActive})}
+        className={cx('btn tab', {active: this.props.isActive})}
        onClick={this.props.isDisabled ? null : this.props.onClick}
      >
        {this.props.children}
@ -45,7 +45,7 @@ export const TabList = React.createClass({
      })
    })

-    if (this.props.isKapacitorTabs === "true") {
+    if (this.props.isKapacitorTabs === 'true') {
      return (
        <div className="kapacitor-values-tabs">
          <p>Alert Type</p>
--- a/ui/src/shared/components/TimeRangeDropdown.js
+++ b/ui/src/shared/components/TimeRangeDropdown.js
@ -60,7 +60,7 @@ const TimeRangeDropdown = React.createClass({
          <span className="selected-time-range">{self.findTimeRangeInputValue(selected)}</span>
          <span className="caret" />
        </div>
-        <ul className={classnames("dropdown-menu", {show: isOpen})}>
+        <ul className={classnames('dropdown-menu', {show: isOpen})}>
          <li className="dropdown-header">Time Range</li>
          {timeRanges.map((item) => {
            return (
--- a/ui/src/shared/parsing/getRangeForDygraph.js
+++ b/ui/src/shared/parsing/getRangeForDygraph.js
@ -40,7 +40,7 @@ export default function getRange(timeSeries, override, ruleValues = {value: null
        min = val
      }

-      if (typeof val === "number") {
+      if (typeof val === 'number') {
        min = Math.min(min, val)
        max = Math.max(max, val)
      }
--- a/ui/src/side_nav/components/NavItems.js
+++ b/ui/src/side_nav/components/NavItems.js
@ -15,7 +15,7 @@ const NavListItem = React.createClass({
    const {link, children, location} = this.props
    const isActive = location.startsWith(link)

-    return <Link className={cx("sidebar__menu-item", {active: isActive})} to={link}>{children}</Link>
+    return <Link className={cx('sidebar__menu-item', {active: isActive})} to={link}>{children}</Link>
  },
 })

@ -62,7 +62,7 @@ const NavBlock = React.createClass({
    return (
      <div className={cx('sidebar__square', className, {active: isActive})}>
        {this.renderLink()}
-        <div className={wrapperClassName || "sidebar__menu-wrapper"}>
+        <div className={wrapperClassName || 'sidebar__menu-wrapper'}>
          <div className="sidebar__menu">
            {children}
          </div>
--- a/ui/src/sources/components/InfluxTable.js
+++ b/ui/src/sources/components/InfluxTable.js
@ -35,12 +35,12 @@ const kapacitorDropdown = (kapacitors, source, router, setActiveKapacitor) => {
      onChoose={(item) => setActiveKapacitor(item.kapacitor)}
      addNew={{
        url: `/sources/${source.id}/kapacitors/new`,
-        text: "Add Kapacitor",
+        text: 'Add Kapacitor',
      }}
      actions={
      [{
-        icon: "pencil",
-        text: "edit",
+        icon: 'pencil',
+        text: 'edit',
        handler: (item) => {
          router.push(`${item.resource}/edit`)
        },
--- a/ui/src/sources/components/SourceForm.js
+++ b/ui/src/sources/components/SourceForm.js
@ -75,7 +75,7 @@ export const SourceForm = React.createClass({
            <label htmlFor="password">Password</label>
            <input type="password" name="password" ref={(r) => this.sourcePassword = r} className="form-control" id="password" onChange={onInputChange} value={source.password || ''}></input>
          </div>
-          {_.get(source, 'type', '').includes("enterprise") ?
+          {_.get(source, 'type', '').includes('enterprise') ?
              <div className="form-group col-xs-12">
                <label htmlFor="meta-url">Meta Service Connection URL</label>
                <input type="text" name="metaUrl" ref={(r) => this.metaUrl = r} className="form-control" id="meta-url" placeholder="http://localhost:8091" onChange={onInputChange} value={source.metaUrl || ''}></input>
@ -90,7 +90,7 @@ export const SourceForm = React.createClass({
              <label htmlFor="defaultSourceCheckbox">Make this the default source</label>
            </div>
          </div>
-          {_.get(source, 'url', '').startsWith("https") ?
+          {_.get(source, 'url', '').startsWith('https') ?
            <div className="form-group col-xs-12">
              <div className="form-control-static">
                <input type="checkbox" id="insecureSkipVerifyCheckbox" defaultChecked={source.insecureSkipVerify} ref={(r) => this.sourceInsecureSkipVerify = r} />
@ -99,7 +99,7 @@ export const SourceForm = React.createClass({
              <label className="form-helper">{insecureSkipVerifyText}</label>
            </div> : null}
          <div className="form-group form-group-submit col-xs-12 col-sm-6 col-sm-offset-3">
-            <button className={classNames('btn btn-block', {'btn-primary': editMode, 'btn-success': !editMode})} type="submit">{editMode ? "Save Changes" : "Add Source"}</button>
+            <button className={classNames('btn btn-block', {'btn-primary': editMode, 'btn-success': !editMode})} type="submit">{editMode ? 'Save Changes' : 'Add Source'}</button>
          </div>
        </form>
      </div>
--- a/ui/src/sources/containers/SourcePage.js
+++ b/ui/src/sources/containers/SourcePage.js
@ -116,7 +116,7 @@ export const SourcePage = React.createClass({
          <div className="page-header__container">
            <div className="page-header__left">
              <h1>
-                {editMode ? "Edit Source" : "Add a New Source"}
+                {editMode ? 'Edit Source' : 'Add a New Source'}
              </h1>
            </div>
          </div>
--- a/ui/src/utils/timeSeriesToDygraph.js
+++ b/ui/src/utils/timeSeriesToDygraph.js
@ -112,7 +112,7 @@ export default function timeSeriesToDygraph(raw = [], activeQueryIndex, isInData
  }, {})

  return {
-    labels: ["time", ...map(sortedLabels, ({label}) => label)],
+    labels: ['time', ...map(sortedLabels, ({label}) => label)],
    timeSeries: map(sortedTimeSeries, ({time, values}) => ([new Date(time), ...values])),
    dygraphSeries,
  }