Rename Component to match filename

“FancyScrollbox” —> “FancyScrollbar”
Also went through all the components I touched and made sure to import
the FancyScrollbar in the correct spot

PPS changed relative paths to absolute along the way

ui/src/admin/containers/AdminPage.js

@@ -25,10 +25,10 @@ import {
 } from 'src/admin/actions'
 
 import AdminTabs from 'src/admin/components/AdminTabs'
-import SourceIndicator from '../../shared/components/SourceIndicator'
+import SourceIndicator from 'src/shared/components/SourceIndicator'
+import FancyScrollbar from 'src/shared/components/FancyScrollbar'
 
 import {publishAutoDismissingNotification} from 'shared/dispatchers'
-import FancyScrollbox from 'src/shared/components/FancyScrollbar'
 
 const isValidUser = user => {
   const minLen = 3
@@ -175,7 +175,7 @@ class AdminPage extends Component {
             </div>
           </div>
         </div>
-        <FancyScrollbox className="page-contents">
+        <FancyScrollbar className="page-contents">
           <div className="container-fluid">
             <div className="row">
               {users
@@ -207,7 +207,7 @@ class AdminPage extends Component {
                 : <span>Loading...</span>}
             </div>
           </div>
-        </FancyScrollbox>
+        </FancyScrollbar>
       </div>
     )
   }

ui/src/alerts/containers/AlertsApp.js

@@ -1,9 +1,10 @@
 import React, {PropTypes, Component} from 'react'
-import SourceIndicator from '../../shared/components/SourceIndicator'
-import AlertsTable from '../components/AlertsTable'
-import NoKapacitorError from '../../shared/components/NoKapacitorError'
+
+import SourceIndicator from 'src/shared/components/SourceIndicator'
+import AlertsTable from 'src/alerts/components/AlertsTable'
+import NoKapacitorError from 'src/shared/components/NoKapacitorError'
 import CustomTimeRangeDropdown from 'shared/components/CustomTimeRangeDropdown'
-import FancyScrollbox from 'src/shared/components/FancyScrollbar'
+import FancyScrollbar from 'src/shared/components/FancyScrollbar'
 
 import {getAlerts} from '../apis'
 import AJAX from 'utils/ajax'
@@ -149,7 +150,7 @@ class AlertsApp extends Component {
             </div>
           </div>
         </div>
-        <FancyScrollbox className="page-contents">
+        <FancyScrollbar className="page-contents">
           <div className="container-fluid">
             <div className="row">
               <div className="col-md-12">
@@ -157,7 +158,7 @@ class AlertsApp extends Component {
               </div>
             </div>
           </div>
-        </FancyScrollbox>
+        </FancyScrollbar>
       </div>
     )
   }

ui/src/dashboards/components/Dashboard.js

@@ -3,7 +3,7 @@ import classnames from 'classnames'
 
 import TemplateControlBar from 'src/dashboards/components/TemplateControlBar'
 import LayoutRenderer from 'shared/components/LayoutRenderer'
-import FancyScrollbox from 'src/shared/components/FancyScrollbar'
+import FancyScrollbar from 'src/shared/components/FancyScrollbar'
 
 const Dashboard = ({
   source,
@@ -41,7 +41,7 @@ const Dashboard = ({
   })
 
   return (
-    <FancyScrollbox className={classnames(
+    <FancyScrollbar className={classnames(
       'page-contents',
       {'presentation-mode': inPresentationMode}
     )}>
@@ -71,7 +71,7 @@ const Dashboard = ({
               </button>
             </div>}
       </div>
-    </FancyScrollbox>
+    </FancyScrollbar>
   )
 }
 

ui/src/dashboards/containers/DashboardsPage.js

@@ -5,12 +5,12 @@ import {bindActionCreators} from 'redux'
 
 import SourceIndicator from 'shared/components/SourceIndicator'
 import DeleteConfirmTableCell from 'shared/components/DeleteConfirmTableCell'
+import FancyScrollbar from 'src/shared/components/FancyScrollbar'
 
 import {createDashboard} from 'src/dashboards/apis'
 import {getDashboardsAsync, deleteDashboardAsync} from 'src/dashboards/actions'
 
 import {NEW_DASHBOARD} from 'src/dashboards/constants'
-import FancyScrollbox from 'src/shared/components/FancyScrollbar'
 
 const {arrayOf, func, string, shape} = PropTypes
 
@@ -73,7 +73,7 @@ const DashboardsPage = React.createClass({
             </div>
           </div>
         </div>
-        <FancyScrollbox className="page-contents">
+        <FancyScrollbar className="page-contents">
           <div className="container-fluid">
             <div className="row">
               <div className="col-md-12">
@@ -131,7 +131,7 @@ const DashboardsPage = React.createClass({
               </div>
             </div>
           </div>
-        </FancyScrollbox>
+        </FancyScrollbar>
       </div>
     )
   },

ui/src/data_explorer/components/DatabaseList.js

@@ -1,12 +1,13 @@
 import React, {PropTypes} from 'react'
 import classnames from 'classnames'
 import _ from 'lodash'
-import FancyScrollbox from 'src/shared/components/FancyScrollbar'
 
 import {showDatabases, showRetentionPolicies} from 'shared/apis/metaQuery'
 import showDatabasesParser from 'shared/parsing/showDatabases'
 import showRetentionPoliciesParser from 'shared/parsing/showRetentionPolicies'
 
+import FancyScrollbar from 'src/shared/components/FancyScrollbar'
+
 const {func, shape, string} = PropTypes
 
 const DatabaseList = React.createClass({
@@ -68,7 +69,7 @@ const DatabaseList = React.createClass({
       <div className="query-builder--column query-builder--column-db">
         <div className="query-builder--heading">Databases</div>
         <div className="query-builder--list">
-          <FancyScrollbox>
+          <FancyScrollbar>
             {this.state.namespaces.map(namespace => {
               const {database, retentionPolicy} = namespace
               const isActive =
@@ -87,7 +88,7 @@ const DatabaseList = React.createClass({
                 </div>
               )
             })}
-          </FancyScrollbox>
+          </FancyScrollbar>
         </div>
       </div>
     )

ui/src/data_explorer/components/FieldList.js

@@ -1,8 +1,8 @@
 import React, {PropTypes} from 'react'
 
-import FieldListItem from './FieldListItem'
-import GroupByTimeDropdown from './GroupByTimeDropdown'
-import FancyScrollbox from 'src/shared/components/FancyScrollbar'
+import FieldListItem from 'src/data_explorer/components/FieldListItem'
+import GroupByTimeDropdown from 'src/data_explorer/components/GroupByTimeDropdown'
+import FancyScrollbar from 'src/shared/components/FancyScrollbar'
 
 import {showFieldKeys} from 'shared/apis/metaQuery'
 import showFieldKeysParser from 'shared/parsing/showFieldKeys'
@@ -110,7 +110,7 @@ const FieldList = React.createClass({
 
     return (
       <div className="query-builder--list">
-        <FancyScrollbox>
+        <FancyScrollbar>
           {this.state.fields.map(fieldFunc => {
             const selectedField = this.props.query.fields.find(
               f => f.field === fieldFunc.field
@@ -126,7 +126,7 @@ const FieldList = React.createClass({
               />
             )
           })}
-        </FancyScrollbox>
+        </FancyScrollbar>
       </div>
     )
   },

ui/src/data_explorer/components/MeasurementList.js

@@ -1,10 +1,11 @@
 import React, {PropTypes} from 'react'
 import classnames from 'classnames'
-import FancyScrollbox from 'src/shared/components/FancyScrollbar'
 
 import {showMeasurements} from 'shared/apis/metaQuery'
 import showMeasurementsParser from 'shared/parsing/showMeasurements'
-import TagList from './TagList'
+
+import TagList from 'src/data_explorer/components/TagList'
+import FancyScrollbar from 'src/shared/components/FancyScrollbar'
 
 const {func, shape, string} = PropTypes
 
@@ -120,7 +121,7 @@ const MeasurementList = React.createClass({
 
     return (
       <div className="query-builder--list">
-        <FancyScrollbox>
+        <FancyScrollbar>
           {measurements.map(measurement => {
             const isActive = measurement === this.props.query.measurement
             const numTagsActive = Object.keys(this.props.query.tags).length
@@ -167,7 +168,7 @@ const MeasurementList = React.createClass({
               </div>
             )
           })}
-        </FancyScrollbox>
+        </FancyScrollbar>
       </div>
     )
   },

ui/src/hosts/containers/HostPage.js

@@ -7,6 +7,8 @@ import classnames from 'classnames'
 
 import LayoutRenderer from 'shared/components/LayoutRenderer'
 import DashboardHeader from 'src/dashboards/components/DashboardHeader'
+import FancyScrollbar from 'src/shared/components/FancyScrollbar'
+
 import timeRanges from 'hson!../../shared/data/timeRanges.hson'
 import {
   getMappings,
@@ -18,7 +20,6 @@ import {fetchLayouts} from 'shared/apis'
 
 import {setAutoRefresh} from 'shared/actions/app'
 import {presentationButtonDispatcher} from 'shared/dispatchers'
-import FancyScrollbox from 'src/shared/components/FancyScrollbar'
 
 const {shape, string, bool, func, number} = PropTypes
 
@@ -200,14 +201,14 @@ export const HostPage = React.createClass({
             )
           })}
         </DashboardHeader>
-        <FancyScrollbox className={classnames({
+        <FancyScrollbar className={classnames({
           'page-contents': true,
           'presentation-mode': inPresentationMode,
         })}>
           <div className="container-fluid full-width dashboard">
             {layouts.length > 0 ? this.renderLayouts(layouts) : ''}
           </div>
-        </FancyScrollbox>
+        </FancyScrollbar>
       </div>
     )
   },

ui/src/hosts/containers/HostsPage.js

@@ -1,9 +1,11 @@
 import React, {PropTypes} from 'react'
 import _ from 'lodash'
-import HostsTable from '../components/HostsTable'
-import SourceIndicator from '../../shared/components/SourceIndicator'
+
+import HostsTable from 'src/hosts/components/HostsTable'
+import FancyScrollbar from 'src/shared/components/FancyScrollbar'
+import SourceIndicator from 'src/shared/components/SourceIndicator'
+
 import {getCpuAndLoadForHosts, getMappings, getAppsForHosts} from '../apis'
-import FancyScrollbox from 'src/shared/components/FancyScrollbar'
 
 export const HostsPage = React.createClass({
   propTypes: {
@@ -88,7 +90,7 @@ export const HostsPage = React.createClass({
             </div>
           </div>
         </div>
-        <FancyScrollbox className="page-contents">
+        <FancyScrollbar className="page-contents">
           <div className="container-fluid">
             <div className="row">
               <div className="col-md-12">
@@ -101,7 +103,7 @@ export const HostsPage = React.createClass({
               </div>
             </div>
           </div>
-        </FancyScrollbox>
+        </FancyScrollbar>
       </div>
     )
   },

ui/src/kapacitor/components/KapacitorForm.js

@@ -1,6 +1,7 @@
 import React, {Component, PropTypes} from 'react'
-import AlertTabs from './AlertTabs'
-import FancyScrollbox from 'src/shared/components/FancyScrollbar'
+
+import AlertTabs from 'src/kapacitor/components/AlertTabs'
+import FancyScrollbar from 'src/shared/components/FancyScrollbar'
 
 class KapacitorForm extends Component {
   render() {
@@ -18,7 +19,7 @@ class KapacitorForm extends Component {
             </div>
           </div>
         </div>
-        <FancyScrollbox className="page-contents">
+        <FancyScrollbar className="page-contents">
           <div className="container-fluid">
             <div className="row">
               <div className="col-md-3">
@@ -101,7 +102,7 @@ class KapacitorForm extends Component {
               </div>
             </div>
           </div>
-        </FancyScrollbox>
+        </FancyScrollbar>
       </div>
     )
   }

ui/src/kapacitor/components/KapacitorRule.js

@@ -1,13 +1,15 @@
 import React, {PropTypes} from 'react'
-import DataSection from '../components/DataSection'
-import ValuesSection from '../components/ValuesSection'
+
+import DataSection from 'src/kapacitor/components/DataSection'
+import ValuesSection from 'src/kapacitor/components/ValuesSection'
 import RuleHeader from 'src/kapacitor/components/RuleHeader'
 import RuleGraph from 'src/kapacitor/components/RuleGraph'
 import RuleMessage from 'src/kapacitor/components/RuleMessage'
+import FancyScrollbar from 'src/shared/components/FancyScrollbar'
+
 import {createRule, editRule} from 'src/kapacitor/apis'
 import buildInfluxQLQuery from 'utils/influxql'
 import timeRanges from 'hson!../../shared/data/timeRanges.hson'
-import FancyScrollbox from 'src/shared/components/FancyScrollbar'
 
 export const KapacitorRule = React.createClass({
   propTypes: {
@@ -58,7 +60,7 @@ export const KapacitorRule = React.createClass({
           timeRange={timeRange}
           source={source}
         />
-        <FancyScrollbox className="page-contents fancy-scroll--kapacitor">
+        <FancyScrollbar className="page-contents fancy-scroll--kapacitor">
           <div className="container-fluid">
             <div className="row">
               <div className="col-xs-12">
@@ -90,7 +92,7 @@ export const KapacitorRule = React.createClass({
               </div>
             </div>
           </div>
-        </FancyScrollbox>
+        </FancyScrollbar>
       </div>
     )
   },

ui/src/kapacitor/components/KapacitorRules.js

@@ -1,10 +1,10 @@
 import React, {PropTypes} from 'react'
 import {Link} from 'react-router'
 
-import NoKapacitorError from '../../shared/components/NoKapacitorError'
-import SourceIndicator from '../../shared/components/SourceIndicator'
+import NoKapacitorError from 'src/shared/components/NoKapacitorError'
+import SourceIndicator from 'src/shared/components/SourceIndicator'
 import KapacitorRulesTable from 'src/kapacitor/components/KapacitorRulesTable'
-import FancyScrollbox from 'src/shared/components/FancyScrollbar'
+import FancyScrollbar from 'src/shared/components/FancyScrollbar'
 
 const KapacitorRules = ({
   source,
@@ -63,7 +63,7 @@ const PageContents = ({children, source}) => (
         </div>
       </div>
     </div>
-    <FancyScrollbox className="page-contents fancy-scroll--kapacitor">
+    <FancyScrollbar className="page-contents fancy-scroll--kapacitor">
       <div className="container-fluid">
         <div className="row">
           <div className="col-md-12">
@@ -73,7 +73,7 @@ const PageContents = ({children, source}) => (
           </div>
         </div>
       </div>
-    </FancyScrollbox>
+    </FancyScrollbar>
   </div>
 )
 

ui/src/shared/components/Dropdown.js

@@ -2,7 +2,7 @@ import React, {Component, PropTypes} from 'react'
 import {Link} from 'react-router'
 import classnames from 'classnames'
 import OnClickOutside from 'shared/components/OnClickOutside'
-import FancyScrollbox from 'shared/components/FancyScrollbar'
+import FancyScrollbar from 'shared/components/FancyScrollbar'
 import {DROPDOWN_MENU_MAX_HEIGHT, DROPDOWN_MENU_ITEM_THRESHOLD} from 'shared/constants/index'
 
 class Dropdown extends Component {
@@ -108,7 +108,7 @@ class Dropdown extends Component {
     const {actions, addNew, items, menuWidth, menuLabel} = this.props
     return (
       <ul className="dropdown-menu" style={{width: menuWidth, height: DROPDOWN_MENU_MAX_HEIGHT}}>
-        <FancyScrollbox autoHide={false}>
+        <FancyScrollbar autoHide={false}>
           {menuLabel
             ? <li className="dropdown-header">{menuLabel}</li>
             : null
@@ -151,7 +151,7 @@ class Dropdown extends Component {
                 </Link>
               </li>
             : null}
-        </FancyScrollbox>
+        </FancyScrollbar>
       </ul>
     )
   }

ui/src/shared/components/FancyScrollbar.js

@@ -2,7 +2,7 @@ import React, {Component, PropTypes} from 'react'
 import classnames from 'classnames'
 import {Scrollbars} from 'react-custom-scrollbars'
 
-class FancyScrollbox extends Component {
+class FancyScrollbar extends Component {
   constructor(props) {
     super(props)
   }
@@ -33,10 +33,10 @@ class FancyScrollbox extends Component {
 
 const {bool, node, string} = PropTypes
 
-FancyScrollbox.propTypes = {
+FancyScrollbar.propTypes = {
   children: node.isRequired,
   className: string,
   autoHide: bool,
 }
 
-export default FancyScrollbox
+export default FancyScrollbar

ui/src/shared/components/TimeRangeDropdown.js

@@ -1,10 +1,10 @@
 import React from 'react'
 import classnames from 'classnames'
-import OnClickOutside from 'shared/components/OnClickOutside'
-import FancyScrollbox from 'src/shared/components/FancyScrollbar'
-
 import moment from 'moment'
 
+import OnClickOutside from 'src/shared/components/OnClickOutside'
+import FancyScrollbar from 'src/shared/components/FancyScrollbar'
+
 import timeRanges from 'hson!../data/timeRanges.hson'
 
 const TimeRangeDropdown = React.createClass({
@@ -68,7 +68,7 @@ const TimeRangeDropdown = React.createClass({
           <span className="caret" />
         </div>
         <ul className="dropdown-menu" style={{height: '270px'}}>
-          <FancyScrollbox>
+          <FancyScrollbar>
             <li className="dropdown-header">Time Range</li>
             {timeRanges.map(item => {
               return (
@@ -79,7 +79,7 @@ const TimeRangeDropdown = React.createClass({
                 </li>
               )
             })}
-          </FancyScrollbox>
+          </FancyScrollbar>
         </ul>
       </div>
     )

ui/src/sources/containers/ManageSources.js

@@ -1,7 +1,6 @@
 import React, {Component, PropTypes} from 'react'
 import {connect} from 'react-redux'
 import {bindActionCreators} from 'redux'
-import FancyScrollbox from 'src/shared/components/FancyScrollbar'
 
 import {
   removeAndLoadSources,
@@ -10,8 +9,9 @@ import {
   deleteKapacitorAsync,
 } from 'src/shared/actions/sources'
 
-import SourceIndicator from '../../shared/components/SourceIndicator'
-import InfluxTable from '../components/InfluxTable'
+import FancyScrollbar from 'src/shared/components/FancyScrollbar'
+import SourceIndicator from 'src/shared/components/SourceIndicator'
+import InfluxTable from 'src/sources/components/InfluxTable'
 
 class ManageSources extends Component {
   constructor(props) {
@@ -62,7 +62,7 @@ class ManageSources extends Component {
             </div>
           </div>
         </div>
-        <FancyScrollbox className="page-contents">
+        <FancyScrollbar className="page-contents">
           <div className="container-fluid">
             <InfluxTable
               handleDeleteSource={this.handleDeleteSource}
@@ -72,7 +72,7 @@ class ManageSources extends Component {
               handleDeleteKapacitor={deleteKapacitor}
             />
           </div>
-        </FancyScrollbox>
+        </FancyScrollbar>
       </div>
     )
   }

ui/src/sources/containers/SourcePage.js

@@ -9,8 +9,8 @@ import {
 import {connect} from 'react-redux'
 
 import SourceForm from 'src/sources/components/SourceForm'
-import FancyScrollbox from 'src/shared/components/FancyScrollbar'
-import SourceIndicator from '../../shared/components/SourceIndicator'
+import FancyScrollbar from 'src/shared/components/FancyScrollbar'
+import SourceIndicator from 'src/shared/components/SourceIndicator'
 
 const {func, shape, string} = PropTypes
 
@@ -129,7 +129,7 @@ export const SourcePage = React.createClass({
             </div>
           </div>
         </div>
-        <FancyScrollbox className="page-contents">
+        <FancyScrollbar className="page-contents">
           <div className="container-fluid">
             <div className="row">
               <div className="col-md-8 col-md-offset-2">
@@ -145,7 +145,7 @@ export const SourcePage = React.createClass({
               </div>
             </div>
           </div>
-        </FancyScrollbox>
+        </FancyScrollbar>
       </div>
     )
   },