Merge pull request #2969 from influxdata/bugfix/kapacitor-form

Convert KapacitorPage et al to TypeScript and add tests

ui/mocks/dummy.ts

@@ -0,0 +1,10 @@
+export const kapacitor = {
+  id: '1',
+  name: 'Test Kapacitor',
+  url: 'http://localhost:9092',
+  active: true,
+  links: {
+    self: '/chronograf/v1/sources/47/kapacitors/1',
+    proxy: '/chronograf/v1/sources/47/kapacitors/1/proxy',
+  },
+}

ui/mocks/shared/apis/index.js

@@ -0,0 +1,6 @@
+import {kapacitor} from 'mocks/dummy'
+
+export const getKapacitor = jest.fn(() => Promise.resolve(kapacitor))
+export const createKapacitor = jest.fn(() => Promise.resolve({data: kapacitor}))
+export const updateKapacitor = jest.fn(() => Promise.resolve({data: kapacitor}))
+export const pingKapacitor = jest.fn(() => Promise.resolve())

ui/package.json

@@ -121,13 +121,13 @@
     "react": "^15.0.2",
     "react-addons-shallow-compare": "^15.0.2",
     "react-codemirror": "^1.0.0",
-    "react-component-resizable": "^1.1.0-rc1",
     "react-custom-scrollbars": "^4.1.1",
     "react-dimensions": "^1.2.0",
     "react-dom": "^15.0.2",
-    "react-grid-layout": "^0.13.9",
+    "react-grid-layout": "^0.16.6",
     "react-onclickoutside": "^5.2.0",
     "react-redux": "^4.4.0",
+    "react-resizable": "^1.7.5",
     "react-router": "^3.0.2",
     "react-router-redux": "^4.0.8",
     "react-tooltip": "^3.2.1",

ui/src/App.js

@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react'
+import React from 'react'
+import PropTypes from 'prop-types'
 import {connect} from 'react-redux'
 import {bindActionCreators} from 'redux'
 

ui/src/CheckSources.js

@@ -1,4 +1,5 @@
-import React, {Component, PropTypes} from 'react'
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
 import {withRouter} from 'react-router'
 import {connect} from 'react-redux'
 import {bindActionCreators} from 'redux'

ui/src/admin/components/AdminTabs.js

@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react'
+import React from 'react'
+import PropTypes from 'prop-types'
 import {Tab, Tabs, TabPanel, TabPanels, TabList} from 'shared/components/Tabs'
 import UsersTable from 'src/admin/components/UsersTable'
 import RolesTable from 'src/admin/components/RolesTable'

ui/src/admin/components/ChangePassRow.js

@@ -1,4 +1,5 @@
-import React, {Component, PropTypes} from 'react'
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
 
 import OnClickOutside from 'shared/components/OnClickOutside'
 import ConfirmButtons from 'shared/components/ConfirmButtons'

ui/src/admin/components/DatabaseManager.js

@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react'
+import React from 'react'
+import PropTypes from 'prop-types'
 
 import DatabaseTable from 'src/admin/components/DatabaseTable'
 

ui/src/admin/components/DatabaseRow.js

@@ -1,4 +1,5 @@
-import React, {PropTypes, Component} from 'react'
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
 import onClickOutside from 'react-onclickoutside'
 
 import {formatRPDuration} from 'utils/formatting'

ui/src/admin/components/DatabaseTable.js

@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react'
+import React from 'react'
+import PropTypes from 'prop-types'
 
 import _ from 'lodash'
 import classnames from 'classnames'

ui/src/admin/components/DatabaseTableHeader.js

@@ -1,4 +1,6 @@
-import React, {PropTypes} from 'react'
+import React from 'react'
+import PropTypes from 'prop-types'
+
 import ConfirmButtons from 'shared/components/ConfirmButtons'
 
 const DatabaseTableHeader = ({

ui/src/admin/components/EmptyRow.js

@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react'
+import React from 'react'
+import PropTypes from 'prop-types'
 
 const EmptyRow = ({tableName}) =>
   <tr className="table-empty-state">

ui/src/admin/components/FilterBar.js

@@ -1,4 +1,5 @@
-import React, {Component, PropTypes} from 'react'
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
 
 class FilterBar extends Component {
   constructor(props) {

ui/src/admin/components/QueriesTable.js

@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react'
+import React from 'react'
+import PropTypes from 'prop-types'
 
 import QueryRow from 'src/admin/components/QueryRow'
 import {QUERIES_TABLE} from 'src/admin/constants/tableSizing'

ui/src/admin/components/QueryRow.js

@@ -1,4 +1,5 @@
-import React, {PropTypes, Component} from 'react'
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
 
 import ConfirmButtons from 'shared/components/ConfirmButtons'
 import {QUERIES_TABLE} from 'src/admin/constants/tableSizing'

ui/src/admin/components/RoleEditingRow.js

@@ -1,4 +1,5 @@
-import React, {Component, PropTypes} from 'react'
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
 
 import {ROLES_TABLE} from 'src/admin/constants/tableSizing'
 

ui/src/admin/components/RoleRow.js

@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react'
+import React from 'react'
+import PropTypes from 'prop-types'
 
 import _ from 'lodash'
 import classnames from 'classnames'

ui/src/admin/components/RolesTable.js

@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react'
+import React from 'react'
+import PropTypes from 'prop-types'
 import RoleRow from 'src/admin/components/RoleRow'
 import EmptyRow from 'src/admin/components/EmptyRow'
 import FilterBar from 'src/admin/components/FilterBar'

ui/src/admin/components/UserEditName.js

@@ -1,4 +1,5 @@
-import React, {Component, PropTypes} from 'react'
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
 
 import {USERS_TABLE} from 'src/admin/constants/tableSizing'
 

ui/src/admin/components/UserNewPassword.js

@@ -1,4 +1,5 @@
-import React, {Component, PropTypes} from 'react'
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
 
 import {USERS_TABLE} from 'src/admin/constants/tableSizing'
 

ui/src/admin/components/UserRow.js

@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react'
+import React from 'react'
+import PropTypes from 'prop-types'
 
 import _ from 'lodash'
 import classnames from 'classnames'

ui/src/admin/components/UsersTable.js

@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react'
+import React from 'react'
+import PropTypes from 'prop-types'
 
 import UserRow from 'src/admin/components/UserRow'
 import EmptyRow from 'src/admin/components/EmptyRow'

ui/src/admin/components/chronograf/AdminTabs.js

@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react'
+import React from 'react'
+import PropTypes from 'prop-types'
 
 import {
   isUserAuthorized,

ui/src/admin/components/chronograf/AllUsersTable.js

@@ -1,4 +1,5 @@
-import React, {Component, PropTypes} from 'react'
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
 
 import uuid from 'uuid'
 

ui/src/admin/components/chronograf/AllUsersTableHeader.js

@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react'
+import React from 'react'
+import PropTypes from 'prop-types'
 
 import SlideToggle from 'shared/components/SlideToggle'
 

ui/src/admin/components/chronograf/AllUsersTableRow.js

@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react'
+import React from 'react'
+import PropTypes from 'prop-types'
 
 import Tags from 'shared/components/Tags'
 import SlideToggle from 'shared/components/SlideToggle'

ui/src/admin/components/chronograf/AllUsersTableRowNew.js

@@ -1,4 +1,5 @@
-import React, {Component, PropTypes} from 'react'
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
 
 import Dropdown from 'shared/components/Dropdown'
 

ui/src/admin/components/chronograf/OrganizationsTable.js

@@ -1,4 +1,5 @@
-import React, {Component, PropTypes} from 'react'
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
 
 import uuid from 'uuid'
 

ui/src/admin/components/chronograf/OrganizationsTableRow.js

@@ -1,4 +1,5 @@
-import React, {Component, PropTypes} from 'react'
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
 import {connect} from 'react-redux'
 import {bindActionCreators} from 'redux'
 import {withRouter} from 'react-router'

ui/src/admin/components/chronograf/OrganizationsTableRowNew.js

@@ -1,4 +1,5 @@
-import React, {Component, PropTypes} from 'react'
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
 
 import ConfirmButtons from 'shared/components/ConfirmButtons'
 import Dropdown from 'shared/components/Dropdown'

ui/src/admin/components/chronograf/ProvidersTable.js

@@ -1,4 +1,5 @@
-import React, {Component, PropTypes} from 'react'
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
 
 import uuid from 'uuid'
 import ProvidersTableRow from 'src/admin/components/chronograf/ProvidersTableRow'

ui/src/admin/components/chronograf/ProvidersTableRow.js

@@ -1,4 +1,5 @@
-import React, {Component, PropTypes} from 'react'
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
 
 import ConfirmButtons from 'shared/components/ConfirmButtons'
 import Dropdown from 'shared/components/Dropdown'

ui/src/admin/components/chronograf/UsersTable.js

@@ -1,4 +1,5 @@
-import React, {Component, PropTypes} from 'react'
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
 
 import uuid from 'uuid'
 

ui/src/admin/components/chronograf/UsersTableHeader.js

@@ -1,4 +1,5 @@
-import React, {Component, PropTypes} from 'react'
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
 
 class UsersTableHeader extends Component {
   constructor(props) {

ui/src/admin/components/chronograf/UsersTableRow.js

@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react'
+import React from 'react'
+import PropTypes from 'prop-types'
 
 import Dropdown from 'shared/components/Dropdown'
 import DeleteConfirmTableCell from 'shared/components/DeleteConfirmTableCell'

ui/src/admin/components/chronograf/UsersTableRowNew.js

@@ -1,4 +1,5 @@
-import React, {Component, PropTypes} from 'react'
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
 
 import Dropdown from 'shared/components/Dropdown'
 

ui/src/admin/containers/AdminInfluxDBPage.js

@@ -1,4 +1,5 @@
-import React, {Component, PropTypes} from 'react'
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
 import {connect} from 'react-redux'
 import {bindActionCreators} from 'redux'
 import {

ui/src/admin/containers/DatabaseManagerPage.js

@@ -1,4 +1,5 @@
-import React, {PropTypes, Component} from 'react'
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
 import {connect} from 'react-redux'
 import {bindActionCreators} from 'redux'
 import _ from 'lodash'

ui/src/admin/containers/ProvidersPage.js

@@ -1,4 +1,5 @@
-import React, {Component, PropTypes} from 'react'
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
 import {connect} from 'react-redux'
 import {bindActionCreators} from 'redux'
 

ui/src/admin/containers/QueriesPage.js

@@ -1,4 +1,5 @@
-import React, {PropTypes, Component} from 'react'
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
 import {connect} from 'react-redux'
 import {bindActionCreators} from 'redux'
 

ui/src/admin/containers/chronograf/AdminChronografPage.js

@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react'
+import React from 'react'
+import PropTypes from 'prop-types'
 import {connect} from 'react-redux'
 
 import AdminTabs from 'src/admin/components/chronograf/AdminTabs'

ui/src/admin/containers/chronograf/AllUsersPage.js

@@ -1,4 +1,5 @@
-import React, {Component, PropTypes} from 'react'
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
 import {connect} from 'react-redux'
 import {bindActionCreators} from 'redux'
 

ui/src/admin/containers/chronograf/OrganizationsPage.js

@@ -1,4 +1,5 @@
-import React, {Component, PropTypes} from 'react'
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
 import {connect} from 'react-redux'
 import {bindActionCreators} from 'redux'
 

ui/src/admin/containers/chronograf/UsersPage.js

@@ -1,4 +1,5 @@
-import React, {Component, PropTypes} from 'react'
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
 import {connect} from 'react-redux'
 import {bindActionCreators} from 'redux'
 

ui/src/alerts/components/AlertsTable.js

@@ -1,4 +1,5 @@
-import React, {Component, PropTypes} from 'react'
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
 
 import _ from 'lodash'
 import classnames from 'classnames'

ui/src/alerts/containers/AlertsApp.js

@@ -1,4 +1,5 @@
-import React, {PropTypes, Component} from 'react'
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
 
 import SourceIndicator from 'shared/components/SourceIndicator'
 import AlertsTable from 'src/alerts/components/AlertsTable'

ui/src/auth/Login.js

@@ -1,5 +1,6 @@
 /* global VERSION */
-import React, {PropTypes} from 'react'
+import React from 'react'
+import PropTypes from 'prop-types'
 
 import Notifications from 'shared/components/Notifications'
 

ui/src/auth/Purgatory.js

@@ -1,4 +1,5 @@
-import React, {PropTypes, Component} from 'react'
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
 import {connect} from 'react-redux'
 import {bindActionCreators} from 'redux'
 import {withRouter} from 'react-router'

ui/src/auth/PurgatoryAuthItem.js

@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react'
+import React from 'react'
+import PropTypes from 'prop-types'
 
 import {isUserAuthorized, VIEWER_ROLE} from 'src/auth/Authorized'
 

ui/src/dashboards/components/AxesOptions.js

@@ -1,4 +1,5 @@
-import React, {Component, PropTypes} from 'react'
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
 import {connect} from 'react-redux'
 import {bindActionCreators} from 'redux'
 

ui/src/dashboards/components/CellEditorOverlay.js

@@ -1,4 +1,5 @@
-import React, {Component, PropTypes} from 'react'
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
 
 import _ from 'lodash'
 import uuid from 'uuid'

ui/src/dashboards/components/Dashboard.js

@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react'
+import React from 'react'
+import PropTypes from 'prop-types'
 import classnames from 'classnames'
 
 import TemplateControlBar from 'src/dashboards/components/TemplateControlBar'

ui/src/dashboards/components/DashboardHeader.js

@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react'
+import React from 'react'
+import PropTypes from 'prop-types'
 import classnames from 'classnames'
 
 import Authorized, {EDITOR_ROLE} from 'src/auth/Authorized'

ui/src/dashboards/components/DashboardHeaderEdit.js

@@ -1,4 +1,5 @@
-import React, {PropTypes, Component} from 'react'
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
 import {
   DASHBOARD_NAME_MAX_LENGTH,
   NEW_DASHBOARD,

ui/src/dashboards/components/DashboardSwitcher.js

@@ -1,4 +1,5 @@
-import React, {Component, PropTypes} from 'react'
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
 import {Link} from 'react-router'
 import _ from 'lodash'
 import classnames from 'classnames'

ui/src/dashboards/components/DashboardsPageContents.js

@@ -1,4 +1,5 @@
-import React, {PropTypes, Component} from 'react'
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
 
 import Authorized, {EDITOR_ROLE} from 'src/auth/Authorized'
 

ui/src/dashboards/components/DashboardsTable.js

@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react'
+import React from 'react'
+import PropTypes from 'prop-types'
 import {Link} from 'react-router'
 import _ from 'lodash'
 

ui/src/dashboards/components/DisplayOptions.js

@@ -1,4 +1,5 @@
-import React, {Component, PropTypes} from 'react'
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
 import {connect} from 'react-redux'
 
 import GraphTypeSelector from 'src/dashboards/components/GraphTypeSelector'

ui/src/dashboards/components/DisplayOptionsInput.js

@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react'
+import React from 'react'
+import PropTypes from 'prop-types'
 
 const DisplayOptionsInput = ({
   id,

ui/src/dashboards/components/GaugeOptions.js

@@ -1,4 +1,5 @@
-import React, {Component, PropTypes} from 'react'
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
 import {connect} from 'react-redux'
 import {bindActionCreators} from 'redux'
 

ui/src/dashboards/components/GraphOptionsCustomizableColumn.js

@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react'
+import React from 'react'
+import PropTypes from 'prop-types'
 
 import InputClickToEdit from 'shared/components/InputClickToEdit'
 

ui/src/dashboards/components/GraphOptionsCustomizeColumns.js

@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react'
+import React from 'react'
+import PropTypes from 'prop-types'
 
 import GraphOptionsCustomizableColumn from 'src/dashboards/components/GraphOptionsCustomizableColumn'
 import uuid from 'uuid'

ui/src/dashboards/components/GraphOptionsSortBy.js

@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react'
+import React from 'react'
+import PropTypes from 'prop-types'
 import Dropdown from 'shared/components/Dropdown'
 
 const GraphOptionsSortBy = ({sortByOptions, onChooseSortBy}) =>

ui/src/dashboards/components/GraphOptionsTextWrapping.js

@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react'
+import React from 'react'
+import PropTypes from 'prop-types'
 
 import {
   SINGLE_STAT_BG,

ui/src/dashboards/components/GraphOptionsThresholdColoring.js

@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react'
+import React from 'react'
+import PropTypes from 'prop-types'
 
 import {
   SINGLE_STAT_BG,

ui/src/dashboards/components/GraphOptionsThresholds.js

@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react'
+import React from 'react'
+import PropTypes from 'prop-types'
 import Threshold from 'src/dashboards/components/Threshold'
 import ColorDropdown from 'shared/components/ColorDropdown'
 

ui/src/dashboards/components/GraphOptionsTimeAxis.js

@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react'
+import React from 'react'
+import PropTypes from 'prop-types'
 
 const VERTICAL = 'VERTICAL'
 const HORIZONTAL = 'HORIZONTAL'

ui/src/dashboards/components/GraphOptionsTimeFormat.js

@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react'
+import React from 'react'
+import PropTypes from 'prop-types'
 
 const GraphOptionsTimeFormat = ({TimeFormat, onTimeFormatChange}) =>
   <div className="form-group col-xs-12">

ui/src/dashboards/components/GraphTypeSelector.js

@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react'
+import React from 'react'
+import PropTypes from 'prop-types'
 import {connect} from 'react-redux'
 import {bindActionCreators} from 'redux'
 import classnames from 'classnames'

ui/src/dashboards/components/MeasurementDropdown.js

@@ -1,4 +1,5 @@
-import React, {PropTypes, Component} from 'react'
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
 
 import Dropdown from 'shared/components/Dropdown'
 import {showMeasurements} from 'shared/apis/metaQuery'

ui/src/dashboards/components/OverlayControls.js

@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react'
+import React from 'react'
+import PropTypes from 'prop-types'
 import classnames from 'classnames'
 
 import ConfirmButtons from 'shared/components/ConfirmButtons'

ui/src/dashboards/components/QueryMaker.js

@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react'
+import React from 'react'
+import PropTypes from 'prop-types'
 
 import EmptyQuery from 'src/shared/components/EmptyQuery'
 import QueryTabList from 'src/shared/components/QueryTabList'

ui/src/dashboards/components/QueryTextArea.js

@@ -1,4 +1,5 @@
-import React, {PropTypes, Component} from 'react'
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
 import _ from 'lodash'
 import classnames from 'classnames'
 

ui/src/dashboards/components/SingleStatOptions.js

@@ -1,4 +1,5 @@
-import React, {Component, PropTypes} from 'react'
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
 import {connect} from 'react-redux'
 import {bindActionCreators} from 'redux'
 

ui/src/dashboards/components/SourceSelector.js

@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react'
+import React from 'react'
+import PropTypes from 'prop-types'
 import Dropdown from 'shared/components/Dropdown'
 
 const SourceSelector = ({sources = [], selected, onSetQuerySource, queries}) =>

ui/src/dashboards/components/Tabber.js

@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react'
+import React from 'react'
+import PropTypes from 'prop-types'
 import QuestionMarkTooltip from 'src/shared/components/QuestionMarkTooltip'
 
 export const Tabber = ({labelText, children, tipID, tipContent}) =>

ui/src/dashboards/components/TableOptions.js

@@ -1,4 +1,5 @@
-import React, {Component, PropTypes} from 'react'
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
 import {connect} from 'react-redux'
 import {bindActionCreators} from 'redux'
 

ui/src/dashboards/components/TagKeyDropdown.js

@@ -1,4 +1,5 @@
-import React, {PropTypes, Component} from 'react'
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
 
 import Dropdown from 'shared/components/Dropdown'
 import {showTagKeys} from 'shared/apis/metaQuery'

ui/src/dashboards/components/TemplateControlBar.js

@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react'
+import React from 'react'
+import PropTypes from 'prop-types'
 import classnames from 'classnames'
 import calculateSize from 'calculate-size'
 

ui/src/dashboards/components/Threshold.js

@@ -1,4 +1,5 @@
-import React, {Component, PropTypes} from 'react'
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
 
 import ColorDropdown from 'shared/components/ColorDropdown'
 

ui/src/dashboards/components/Visualization.js

@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react'
+import React from 'react'
+import PropTypes from 'prop-types'
 import {connect} from 'react-redux'
 
 import RefreshingGraph from 'shared/components/RefreshingGraph'

ui/src/dashboards/components/VisualizationName.js

@@ -1,4 +1,5 @@
-import React, {Component, PropTypes} from 'react'
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
 import {connect} from 'react-redux'
 import {bindActionCreators} from 'redux'
 

ui/src/dashboards/components/template_variables/Manager.js

@@ -1,4 +1,5 @@
-import React, {Component, PropTypes} from 'react'
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
 import classnames from 'classnames'
 import uuid from 'uuid'
 

ui/src/dashboards/components/template_variables/Row.js

@@ -1,4 +1,5 @@
-import React, {PropTypes, Component} from 'react'
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
 import {connect} from 'react-redux'
 import {bindActionCreators} from 'redux'
 

ui/src/dashboards/components/template_variables/RowButtons.js

@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react'
+import React from 'react'
+import PropTypes from 'prop-types'
 import DeleteConfirmButtons from 'shared/components/DeleteConfirmButtons'
 
 const RowButtons = ({onStartEdit, isEditing, onCancelEdit, onDelete, id}) => {

ui/src/dashboards/components/template_variables/RowValues.js

@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react'
+import React from 'react'
+import PropTypes from 'prop-types'
 import TableInput from 'src/dashboards/components/template_variables/TableInput'
 
 const RowValues = ({

ui/src/dashboards/components/template_variables/Table.js

@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react'
+import React from 'react'
+import PropTypes from 'prop-types'
 
 import TemplateVariableRow from 'src/dashboards/components/template_variables/Row'
 

ui/src/dashboards/components/template_variables/TableInput.js

@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react'
+import React from 'react'
+import PropTypes from 'prop-types'
 
 const TableInput = ({
   name,

ui/src/dashboards/components/template_variables/TemplateQueryBuilder.js

@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react'
+import React from 'react'
+import PropTypes from 'prop-types'
 import DatabaseDropdown from 'shared/components/DatabaseDropdown'
 import MeasurementDropdown from 'src/dashboards/components/MeasurementDropdown'
 import TagKeyDropdown from 'src/dashboards/components/TagKeyDropdown'

ui/src/dashboards/containers/DashboardPage.js

@@ -1,4 +1,5 @@
-import React, {PropTypes, Component} from 'react'
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
 import {connect} from 'react-redux'
 import {withRouter} from 'react-router'
 import {bindActionCreators} from 'redux'

ui/src/dashboards/containers/DashboardsPage.js

@@ -1,4 +1,5 @@
-import React, {PropTypes, Component} from 'react'
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
 import {withRouter} from 'react-router'
 import {connect} from 'react-redux'
 import {bindActionCreators} from 'redux'

ui/src/data_explorer/components/FieldListItem.js

@@ -1,4 +1,5 @@
-import React, {PropTypes, Component} from 'react'
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
 import classnames from 'classnames'
 import _ from 'lodash'
 

ui/src/data_explorer/components/GroupByTimeDropdown.js

@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react'
+import React from 'react'
+import PropTypes from 'prop-types'
 import {withRouter} from 'react-router'
 
 import groupByTimeOptions from 'src/data_explorer/data/groupByTimes'

ui/src/data_explorer/components/QueryEditor.js

@@ -1,4 +1,5 @@
-import React, {PropTypes, Component} from 'react'
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
 
 import Dropdown from 'shared/components/Dropdown'
 import {QUERY_TEMPLATES} from 'src/data_explorer/constants'

ui/src/data_explorer/components/QueryMaker.js

@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react'
+import React from 'react'
+import PropTypes from 'prop-types'
 
 import QueryEditor from './QueryEditor'
 import SchemaExplorer from 'src/shared/components/SchemaExplorer'

ui/src/data_explorer/components/QueryMakerTab.js

@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react'
+import React from 'react'
+import PropTypes from 'prop-types'
 import classnames from 'classnames'
 
 const QueryMakerTab = React.createClass({

ui/src/data_explorer/components/Table.js

@@ -1,4 +1,5 @@
-import React, {PropTypes, Component} from 'react'
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
 
 import Dimensions from 'react-dimensions'
 import _ from 'lodash'

ui/src/data_explorer/components/TableTabItem.js

@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react'
+import React from 'react'
+import PropTypes from 'prop-types'
 import classnames from 'classnames'
 
 const TableTabItem = ({name, index, onClickTab, isActive}) =>

ui/src/data_explorer/components/VisHeader.js

@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react'
+import React from 'react'
+import PropTypes from 'prop-types'
 import classnames from 'classnames'
 import _ from 'lodash'
 

ui/src/data_explorer/components/VisView.js

@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react'
+import React from 'react'
+import PropTypes from 'prop-types'
 
 import Table from './Table'
 import RefreshingGraph from 'shared/components/RefreshingGraph'