diff --git a/ui/mocks/dummy.ts b/ui/mocks/dummy.ts
new file mode 100644
index 0000000000..ffab516810
--- /dev/null
+++ b/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',
+  },
+}
diff --git a/ui/mocks/shared/apis/index.js b/ui/mocks/shared/apis/index.js
new file mode 100644
index 0000000000..d70eaa530c
--- /dev/null
+++ b/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())
diff --git a/ui/package.json b/ui/package.json
index 84cff2f309..dbcd295592 100644
--- a/ui/package.json
+++ b/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",
diff --git a/ui/src/App.js b/ui/src/App.js
index 1662a7e5e3..e74c929a6a 100644
--- a/ui/src/App.js
+++ b/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'
 
diff --git a/ui/src/CheckSources.js b/ui/src/CheckSources.js
index 9872576ba5..ae5c70f796 100644
--- a/ui/src/CheckSources.js
+++ b/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'
diff --git a/ui/src/admin/components/AdminTabs.js b/ui/src/admin/components/AdminTabs.js
index 4067a4e43d..8087a1b559 100644
--- a/ui/src/admin/components/AdminTabs.js
+++ b/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'
diff --git a/ui/src/admin/components/ChangePassRow.js b/ui/src/admin/components/ChangePassRow.js
index d0d1ee3845..444a88da43 100644
--- a/ui/src/admin/components/ChangePassRow.js
+++ b/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'
diff --git a/ui/src/admin/components/DatabaseManager.js b/ui/src/admin/components/DatabaseManager.js
index fa4f58f2d2..08f343d159 100644
--- a/ui/src/admin/components/DatabaseManager.js
+++ b/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'
 
diff --git a/ui/src/admin/components/DatabaseRow.js b/ui/src/admin/components/DatabaseRow.js
index 60a216138c..172c112a24 100644
--- a/ui/src/admin/components/DatabaseRow.js
+++ b/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'
diff --git a/ui/src/admin/components/DatabaseTable.js b/ui/src/admin/components/DatabaseTable.js
index 9766d63742..084d5a9dad 100644
--- a/ui/src/admin/components/DatabaseTable.js
+++ b/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'
diff --git a/ui/src/admin/components/DatabaseTableHeader.js b/ui/src/admin/components/DatabaseTableHeader.js
index 8afd449459..7f6b481d10 100644
--- a/ui/src/admin/components/DatabaseTableHeader.js
+++ b/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 = ({
diff --git a/ui/src/admin/components/EmptyRow.js b/ui/src/admin/components/EmptyRow.js
index e26587e1f6..b8ffe09d48 100644
--- a/ui/src/admin/components/EmptyRow.js
+++ b/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">
diff --git a/ui/src/admin/components/FilterBar.js b/ui/src/admin/components/FilterBar.js
index 1d18bb2b74..314924d78f 100644
--- a/ui/src/admin/components/FilterBar.js
+++ b/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) {
diff --git a/ui/src/admin/components/QueriesTable.js b/ui/src/admin/components/QueriesTable.js
index 2c4a934c81..9410851411 100644
--- a/ui/src/admin/components/QueriesTable.js
+++ b/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'
diff --git a/ui/src/admin/components/QueryRow.js b/ui/src/admin/components/QueryRow.js
index 73e796554f..2bb9154d9c 100644
--- a/ui/src/admin/components/QueryRow.js
+++ b/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'
diff --git a/ui/src/admin/components/RoleEditingRow.js b/ui/src/admin/components/RoleEditingRow.js
index 8a588e91e0..8395f05163 100644
--- a/ui/src/admin/components/RoleEditingRow.js
+++ b/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'
 
diff --git a/ui/src/admin/components/RoleRow.js b/ui/src/admin/components/RoleRow.js
index d923ae3330..e2a87b69f7 100644
--- a/ui/src/admin/components/RoleRow.js
+++ b/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'
diff --git a/ui/src/admin/components/RolesTable.js b/ui/src/admin/components/RolesTable.js
index 8c7c5f5c7b..376fa5900f 100644
--- a/ui/src/admin/components/RolesTable.js
+++ b/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'
diff --git a/ui/src/admin/components/UserEditName.js b/ui/src/admin/components/UserEditName.js
index a119401b39..90fa184656 100644
--- a/ui/src/admin/components/UserEditName.js
+++ b/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'
 
diff --git a/ui/src/admin/components/UserNewPassword.js b/ui/src/admin/components/UserNewPassword.js
index 0b28a8a422..f251ffea00 100644
--- a/ui/src/admin/components/UserNewPassword.js
+++ b/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'
 
diff --git a/ui/src/admin/components/UserRow.js b/ui/src/admin/components/UserRow.js
index 8d49486621..63dd2ef7e9 100644
--- a/ui/src/admin/components/UserRow.js
+++ b/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'
diff --git a/ui/src/admin/components/UsersTable.js b/ui/src/admin/components/UsersTable.js
index cae7dc8d02..99b747db61 100644
--- a/ui/src/admin/components/UsersTable.js
+++ b/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'
diff --git a/ui/src/admin/components/chronograf/AdminTabs.js b/ui/src/admin/components/chronograf/AdminTabs.js
index c9e4f8e925..b40e46fa7a 100644
--- a/ui/src/admin/components/chronograf/AdminTabs.js
+++ b/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,
diff --git a/ui/src/admin/components/chronograf/AllUsersTable.js b/ui/src/admin/components/chronograf/AllUsersTable.js
index 4af38e120e..0fec81bf0a 100644
--- a/ui/src/admin/components/chronograf/AllUsersTable.js
+++ b/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'
 
diff --git a/ui/src/admin/components/chronograf/AllUsersTableHeader.js b/ui/src/admin/components/chronograf/AllUsersTableHeader.js
index 342cf696e7..b1ef0d0eca 100644
--- a/ui/src/admin/components/chronograf/AllUsersTableHeader.js
+++ b/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'
 
diff --git a/ui/src/admin/components/chronograf/AllUsersTableRow.js b/ui/src/admin/components/chronograf/AllUsersTableRow.js
index 5c8d5cbbe2..1250767e52 100644
--- a/ui/src/admin/components/chronograf/AllUsersTableRow.js
+++ b/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'
diff --git a/ui/src/admin/components/chronograf/AllUsersTableRowNew.js b/ui/src/admin/components/chronograf/AllUsersTableRowNew.js
index b20d53d193..2724c25497 100644
--- a/ui/src/admin/components/chronograf/AllUsersTableRowNew.js
+++ b/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'
 
diff --git a/ui/src/admin/components/chronograf/OrganizationsTable.js b/ui/src/admin/components/chronograf/OrganizationsTable.js
index e417036641..87f63aa1f5 100644
--- a/ui/src/admin/components/chronograf/OrganizationsTable.js
+++ b/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'
 
diff --git a/ui/src/admin/components/chronograf/OrganizationsTableRow.js b/ui/src/admin/components/chronograf/OrganizationsTableRow.js
index 6c67a3af39..720c2fdaf0 100644
--- a/ui/src/admin/components/chronograf/OrganizationsTableRow.js
+++ b/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'
diff --git a/ui/src/admin/components/chronograf/OrganizationsTableRowNew.js b/ui/src/admin/components/chronograf/OrganizationsTableRowNew.js
index 2a3b8e7638..66efd6444a 100644
--- a/ui/src/admin/components/chronograf/OrganizationsTableRowNew.js
+++ b/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'
diff --git a/ui/src/admin/components/chronograf/ProvidersTable.js b/ui/src/admin/components/chronograf/ProvidersTable.js
index 8d2550235f..e7aab021f2 100644
--- a/ui/src/admin/components/chronograf/ProvidersTable.js
+++ b/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'
diff --git a/ui/src/admin/components/chronograf/ProvidersTableRow.js b/ui/src/admin/components/chronograf/ProvidersTableRow.js
index 41cf8d3711..e47c34cc12 100644
--- a/ui/src/admin/components/chronograf/ProvidersTableRow.js
+++ b/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'
diff --git a/ui/src/admin/components/chronograf/UsersTable.js b/ui/src/admin/components/chronograf/UsersTable.js
index 3590ab4354..491b8e538d 100644
--- a/ui/src/admin/components/chronograf/UsersTable.js
+++ b/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'
 
diff --git a/ui/src/admin/components/chronograf/UsersTableHeader.js b/ui/src/admin/components/chronograf/UsersTableHeader.js
index 35909d8e84..229ee83a64 100644
--- a/ui/src/admin/components/chronograf/UsersTableHeader.js
+++ b/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) {
diff --git a/ui/src/admin/components/chronograf/UsersTableRow.js b/ui/src/admin/components/chronograf/UsersTableRow.js
index ca02b56d60..dbf6aebfef 100644
--- a/ui/src/admin/components/chronograf/UsersTableRow.js
+++ b/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'
diff --git a/ui/src/admin/components/chronograf/UsersTableRowNew.js b/ui/src/admin/components/chronograf/UsersTableRowNew.js
index 4af835e089..df72f94010 100644
--- a/ui/src/admin/components/chronograf/UsersTableRowNew.js
+++ b/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'
 
diff --git a/ui/src/admin/containers/AdminInfluxDBPage.js b/ui/src/admin/containers/AdminInfluxDBPage.js
index 22b9f6603c..8269458ef3 100644
--- a/ui/src/admin/containers/AdminInfluxDBPage.js
+++ b/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 {
diff --git a/ui/src/admin/containers/DatabaseManagerPage.js b/ui/src/admin/containers/DatabaseManagerPage.js
index d5fc3d746f..dc04a15968 100644
--- a/ui/src/admin/containers/DatabaseManagerPage.js
+++ b/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'
diff --git a/ui/src/admin/containers/ProvidersPage.js b/ui/src/admin/containers/ProvidersPage.js
index 037eaf0202..44ba591afe 100644
--- a/ui/src/admin/containers/ProvidersPage.js
+++ b/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'
 
diff --git a/ui/src/admin/containers/QueriesPage.js b/ui/src/admin/containers/QueriesPage.js
index 79ce0cc50d..5624678e17 100644
--- a/ui/src/admin/containers/QueriesPage.js
+++ b/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'
 
diff --git a/ui/src/admin/containers/chronograf/AdminChronografPage.js b/ui/src/admin/containers/chronograf/AdminChronografPage.js
index 8dc0dd6b94..7db66e2a2b 100644
--- a/ui/src/admin/containers/chronograf/AdminChronografPage.js
+++ b/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'
diff --git a/ui/src/admin/containers/chronograf/AllUsersPage.js b/ui/src/admin/containers/chronograf/AllUsersPage.js
index 8cc482444c..57e7515fa8 100644
--- a/ui/src/admin/containers/chronograf/AllUsersPage.js
+++ b/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'
 
diff --git a/ui/src/admin/containers/chronograf/OrganizationsPage.js b/ui/src/admin/containers/chronograf/OrganizationsPage.js
index 17bb253c7a..d0f7514bd7 100644
--- a/ui/src/admin/containers/chronograf/OrganizationsPage.js
+++ b/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'
 
diff --git a/ui/src/admin/containers/chronograf/UsersPage.js b/ui/src/admin/containers/chronograf/UsersPage.js
index 986deaddeb..4c433bcbd6 100644
--- a/ui/src/admin/containers/chronograf/UsersPage.js
+++ b/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'
 
diff --git a/ui/src/alerts/components/AlertsTable.js b/ui/src/alerts/components/AlertsTable.js
index 94eba1257a..1e52e39154 100644
--- a/ui/src/alerts/components/AlertsTable.js
+++ b/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'
diff --git a/ui/src/alerts/containers/AlertsApp.js b/ui/src/alerts/containers/AlertsApp.js
index e577404bdf..e0a5588f67 100644
--- a/ui/src/alerts/containers/AlertsApp.js
+++ b/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'
diff --git a/ui/src/auth/Login.js b/ui/src/auth/Login.js
index a341d417ca..27487689d2 100644
--- a/ui/src/auth/Login.js
+++ b/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'
 
diff --git a/ui/src/auth/Purgatory.js b/ui/src/auth/Purgatory.js
index e190cdb085..18dd7abe4f 100644
--- a/ui/src/auth/Purgatory.js
+++ b/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'
diff --git a/ui/src/auth/PurgatoryAuthItem.js b/ui/src/auth/PurgatoryAuthItem.js
index a1932f3846..88e8eb2232 100644
--- a/ui/src/auth/PurgatoryAuthItem.js
+++ b/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'
 
diff --git a/ui/src/dashboards/components/AxesOptions.js b/ui/src/dashboards/components/AxesOptions.js
index fda84de05f..cbee8faef6 100644
--- a/ui/src/dashboards/components/AxesOptions.js
+++ b/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'
 
diff --git a/ui/src/dashboards/components/CellEditorOverlay.js b/ui/src/dashboards/components/CellEditorOverlay.js
index 5b75d52242..b05c9115af 100644
--- a/ui/src/dashboards/components/CellEditorOverlay.js
+++ b/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'
diff --git a/ui/src/dashboards/components/Dashboard.js b/ui/src/dashboards/components/Dashboard.js
index 0b5eaf09fa..c3428829b7 100644
--- a/ui/src/dashboards/components/Dashboard.js
+++ b/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'
diff --git a/ui/src/dashboards/components/DashboardHeader.js b/ui/src/dashboards/components/DashboardHeader.js
index bf101c0373..9bd7c94dbb 100644
--- a/ui/src/dashboards/components/DashboardHeader.js
+++ b/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'
diff --git a/ui/src/dashboards/components/DashboardHeaderEdit.js b/ui/src/dashboards/components/DashboardHeaderEdit.js
index c08d9dcbf9..763c18f0b8 100644
--- a/ui/src/dashboards/components/DashboardHeaderEdit.js
+++ b/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,
diff --git a/ui/src/dashboards/components/DashboardSwitcher.js b/ui/src/dashboards/components/DashboardSwitcher.js
index 73688239cf..26cc036ff2 100644
--- a/ui/src/dashboards/components/DashboardSwitcher.js
+++ b/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'
diff --git a/ui/src/dashboards/components/DashboardsPageContents.js b/ui/src/dashboards/components/DashboardsPageContents.js
index 986d5afad3..35eeb45eb4 100644
--- a/ui/src/dashboards/components/DashboardsPageContents.js
+++ b/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'
 
diff --git a/ui/src/dashboards/components/DashboardsTable.js b/ui/src/dashboards/components/DashboardsTable.js
index c62f0bceff..64a3244f16 100644
--- a/ui/src/dashboards/components/DashboardsTable.js
+++ b/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'
 
diff --git a/ui/src/dashboards/components/DisplayOptions.js b/ui/src/dashboards/components/DisplayOptions.js
index 99586b9418..80204eb104 100644
--- a/ui/src/dashboards/components/DisplayOptions.js
+++ b/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'
diff --git a/ui/src/dashboards/components/DisplayOptionsInput.js b/ui/src/dashboards/components/DisplayOptionsInput.js
index 67e9e49cda..4f95f78a79 100644
--- a/ui/src/dashboards/components/DisplayOptionsInput.js
+++ b/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,
diff --git a/ui/src/dashboards/components/GaugeOptions.js b/ui/src/dashboards/components/GaugeOptions.js
index 2e75483d27..abe5c10850 100644
--- a/ui/src/dashboards/components/GaugeOptions.js
+++ b/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'
 
diff --git a/ui/src/dashboards/components/GraphOptionsCustomizableColumn.js b/ui/src/dashboards/components/GraphOptionsCustomizableColumn.js
index 9970b4244a..e2ad8a95f1 100644
--- a/ui/src/dashboards/components/GraphOptionsCustomizableColumn.js
+++ b/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'
 
diff --git a/ui/src/dashboards/components/GraphOptionsCustomizeColumns.js b/ui/src/dashboards/components/GraphOptionsCustomizeColumns.js
index f39190fa68..510f9a06a5 100644
--- a/ui/src/dashboards/components/GraphOptionsCustomizeColumns.js
+++ b/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'
diff --git a/ui/src/dashboards/components/GraphOptionsSortBy.js b/ui/src/dashboards/components/GraphOptionsSortBy.js
index d814c6218e..d58a2adfbf 100644
--- a/ui/src/dashboards/components/GraphOptionsSortBy.js
+++ b/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}) =>
diff --git a/ui/src/dashboards/components/GraphOptionsTextWrapping.js b/ui/src/dashboards/components/GraphOptionsTextWrapping.js
index e2ff1cc2a3..0b86375d85 100644
--- a/ui/src/dashboards/components/GraphOptionsTextWrapping.js
+++ b/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,
diff --git a/ui/src/dashboards/components/GraphOptionsThresholdColoring.js b/ui/src/dashboards/components/GraphOptionsThresholdColoring.js
index f7b471fdae..1b9bf4c827 100644
--- a/ui/src/dashboards/components/GraphOptionsThresholdColoring.js
+++ b/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,
diff --git a/ui/src/dashboards/components/GraphOptionsThresholds.js b/ui/src/dashboards/components/GraphOptionsThresholds.js
index 3ed8ddbff5..c54a68fd31 100644
--- a/ui/src/dashboards/components/GraphOptionsThresholds.js
+++ b/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'
 
diff --git a/ui/src/dashboards/components/GraphOptionsTimeAxis.js b/ui/src/dashboards/components/GraphOptionsTimeAxis.js
index d1d5bbb99c..ac6090b00d 100644
--- a/ui/src/dashboards/components/GraphOptionsTimeAxis.js
+++ b/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'
diff --git a/ui/src/dashboards/components/GraphOptionsTimeFormat.js b/ui/src/dashboards/components/GraphOptionsTimeFormat.js
index 8501261e12..f1680d8193 100644
--- a/ui/src/dashboards/components/GraphOptionsTimeFormat.js
+++ b/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">
diff --git a/ui/src/dashboards/components/GraphTypeSelector.js b/ui/src/dashboards/components/GraphTypeSelector.js
index f0f2f1974b..e33c01ed6d 100644
--- a/ui/src/dashboards/components/GraphTypeSelector.js
+++ b/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'
diff --git a/ui/src/dashboards/components/MeasurementDropdown.js b/ui/src/dashboards/components/MeasurementDropdown.js
index 587da0f66b..47be635b2b 100644
--- a/ui/src/dashboards/components/MeasurementDropdown.js
+++ b/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'
diff --git a/ui/src/dashboards/components/OverlayControls.js b/ui/src/dashboards/components/OverlayControls.js
index fc60343264..30b23170a2 100644
--- a/ui/src/dashboards/components/OverlayControls.js
+++ b/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'
diff --git a/ui/src/dashboards/components/QueryMaker.js b/ui/src/dashboards/components/QueryMaker.js
index 5b8e695c73..b50b68522b 100644
--- a/ui/src/dashboards/components/QueryMaker.js
+++ b/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'
diff --git a/ui/src/dashboards/components/QueryTextArea.js b/ui/src/dashboards/components/QueryTextArea.js
index 2b7bf26db8..65845b5579 100644
--- a/ui/src/dashboards/components/QueryTextArea.js
+++ b/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'
 
diff --git a/ui/src/dashboards/components/SingleStatOptions.js b/ui/src/dashboards/components/SingleStatOptions.js
index b8bfe6d7ed..50d559042d 100644
--- a/ui/src/dashboards/components/SingleStatOptions.js
+++ b/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'
 
diff --git a/ui/src/dashboards/components/SourceSelector.js b/ui/src/dashboards/components/SourceSelector.js
index c1664db1a6..2137aba0c4 100644
--- a/ui/src/dashboards/components/SourceSelector.js
+++ b/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}) =>
diff --git a/ui/src/dashboards/components/Tabber.js b/ui/src/dashboards/components/Tabber.js
index 9fc95f1ac0..ae9f09591d 100644
--- a/ui/src/dashboards/components/Tabber.js
+++ b/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}) =>
diff --git a/ui/src/dashboards/components/TableOptions.js b/ui/src/dashboards/components/TableOptions.js
index d5677100c9..5113fc3309 100644
--- a/ui/src/dashboards/components/TableOptions.js
+++ b/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'
 
diff --git a/ui/src/dashboards/components/TagKeyDropdown.js b/ui/src/dashboards/components/TagKeyDropdown.js
index c81414bbd6..6c9c19f399 100644
--- a/ui/src/dashboards/components/TagKeyDropdown.js
+++ b/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'
diff --git a/ui/src/dashboards/components/TemplateControlBar.js b/ui/src/dashboards/components/TemplateControlBar.js
index 558335ef6a..a1de8bba31 100644
--- a/ui/src/dashboards/components/TemplateControlBar.js
+++ b/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'
 
diff --git a/ui/src/dashboards/components/Threshold.js b/ui/src/dashboards/components/Threshold.js
index 06de690166..bf572e9890 100644
--- a/ui/src/dashboards/components/Threshold.js
+++ b/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'
 
diff --git a/ui/src/dashboards/components/Visualization.js b/ui/src/dashboards/components/Visualization.js
index 5af4e3fccc..fcd31520ae 100644
--- a/ui/src/dashboards/components/Visualization.js
+++ b/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'
diff --git a/ui/src/dashboards/components/VisualizationName.js b/ui/src/dashboards/components/VisualizationName.js
index 1324252aa6..21b8e80b33 100644
--- a/ui/src/dashboards/components/VisualizationName.js
+++ b/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'
 
diff --git a/ui/src/dashboards/components/template_variables/Manager.js b/ui/src/dashboards/components/template_variables/Manager.js
index df21c067eb..73e9383b0f 100644
--- a/ui/src/dashboards/components/template_variables/Manager.js
+++ b/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'
 
diff --git a/ui/src/dashboards/components/template_variables/Row.js b/ui/src/dashboards/components/template_variables/Row.js
index 8d0c24d516..3973d5b69a 100644
--- a/ui/src/dashboards/components/template_variables/Row.js
+++ b/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'
 
diff --git a/ui/src/dashboards/components/template_variables/RowButtons.js b/ui/src/dashboards/components/template_variables/RowButtons.js
index 7bc69bc759..7e6fc4b160 100644
--- a/ui/src/dashboards/components/template_variables/RowButtons.js
+++ b/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}) => {
diff --git a/ui/src/dashboards/components/template_variables/RowValues.js b/ui/src/dashboards/components/template_variables/RowValues.js
index 4535548bed..dc77afb51d 100644
--- a/ui/src/dashboards/components/template_variables/RowValues.js
+++ b/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 = ({
diff --git a/ui/src/dashboards/components/template_variables/Table.js b/ui/src/dashboards/components/template_variables/Table.js
index f117208c57..f1a81c7e8b 100644
--- a/ui/src/dashboards/components/template_variables/Table.js
+++ b/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'
 
diff --git a/ui/src/dashboards/components/template_variables/TableInput.js b/ui/src/dashboards/components/template_variables/TableInput.js
index 32119c6a10..908817a49f 100644
--- a/ui/src/dashboards/components/template_variables/TableInput.js
+++ b/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,
diff --git a/ui/src/dashboards/components/template_variables/TemplateQueryBuilder.js b/ui/src/dashboards/components/template_variables/TemplateQueryBuilder.js
index 0cb2880167..ac6fcb11a5 100644
--- a/ui/src/dashboards/components/template_variables/TemplateQueryBuilder.js
+++ b/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'
diff --git a/ui/src/dashboards/containers/DashboardPage.js b/ui/src/dashboards/containers/DashboardPage.js
index f9e9f5eab6..1eeec2672f 100644
--- a/ui/src/dashboards/containers/DashboardPage.js
+++ b/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'
diff --git a/ui/src/dashboards/containers/DashboardsPage.js b/ui/src/dashboards/containers/DashboardsPage.js
index a6bce55040..3a8b7fa1b7 100644
--- a/ui/src/dashboards/containers/DashboardsPage.js
+++ b/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'
diff --git a/ui/src/data_explorer/components/FieldListItem.js b/ui/src/data_explorer/components/FieldListItem.js
index 19d60c2f0b..be8690a0ec 100644
--- a/ui/src/data_explorer/components/FieldListItem.js
+++ b/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'
 
diff --git a/ui/src/data_explorer/components/GroupByTimeDropdown.js b/ui/src/data_explorer/components/GroupByTimeDropdown.js
index 5287d90174..7ca6856a85 100644
--- a/ui/src/data_explorer/components/GroupByTimeDropdown.js
+++ b/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'
diff --git a/ui/src/data_explorer/components/QueryEditor.js b/ui/src/data_explorer/components/QueryEditor.js
index b114dde304..d48cb9f18d 100644
--- a/ui/src/data_explorer/components/QueryEditor.js
+++ b/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'
diff --git a/ui/src/data_explorer/components/QueryMaker.js b/ui/src/data_explorer/components/QueryMaker.js
index 3057b56828..c4b0275924 100644
--- a/ui/src/data_explorer/components/QueryMaker.js
+++ b/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'
diff --git a/ui/src/data_explorer/components/QueryMakerTab.js b/ui/src/data_explorer/components/QueryMakerTab.js
index 68f0c51a13..3c65d327e6 100644
--- a/ui/src/data_explorer/components/QueryMakerTab.js
+++ b/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({
diff --git a/ui/src/data_explorer/components/Table.js b/ui/src/data_explorer/components/Table.js
index 86b9d38c4b..b9ab0775ce 100644
--- a/ui/src/data_explorer/components/Table.js
+++ b/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'
diff --git a/ui/src/data_explorer/components/TableTabItem.js b/ui/src/data_explorer/components/TableTabItem.js
index 170286ffd1..97ef431dc1 100644
--- a/ui/src/data_explorer/components/TableTabItem.js
+++ b/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}) =>
diff --git a/ui/src/data_explorer/components/VisHeader.js b/ui/src/data_explorer/components/VisHeader.js
index 5ce2b9e04f..e602d7bfa2 100644
--- a/ui/src/data_explorer/components/VisHeader.js
+++ b/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'
 
diff --git a/ui/src/data_explorer/components/VisView.js b/ui/src/data_explorer/components/VisView.js
index 0790774a26..2f71af1ad0 100644
--- a/ui/src/data_explorer/components/VisView.js
+++ b/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'
diff --git a/ui/src/data_explorer/components/Visualization.js b/ui/src/data_explorer/components/Visualization.js
index 1a2ff3783c..230078c97a 100644
--- a/ui/src/data_explorer/components/Visualization.js
+++ b/ui/src/data_explorer/components/Visualization.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 VisHeader from 'src/data_explorer/components/VisHeader'
 import VisView from 'src/data_explorer/components/VisView'
diff --git a/ui/src/data_explorer/components/WriteDataBody.js b/ui/src/data_explorer/components/WriteDataBody.js
index 272c941950..5b0f730b15 100644
--- a/ui/src/data_explorer/components/WriteDataBody.js
+++ b/ui/src/data_explorer/components/WriteDataBody.js
@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react'
+import React from 'react'
+import PropTypes from 'prop-types'
 import WriteDataFooter from 'src/data_explorer/components/WriteDataFooter'
 
 const WriteDataBody = ({
diff --git a/ui/src/data_explorer/components/WriteDataFooter.js b/ui/src/data_explorer/components/WriteDataFooter.js
index 7b7df4e833..d224c3f05b 100644
--- a/ui/src/data_explorer/components/WriteDataFooter.js
+++ b/ui/src/data_explorer/components/WriteDataFooter.js
@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react'
+import React from 'react'
+import PropTypes from 'prop-types'
 
 const submitButton = 'btn btn-sm btn-success write-data-form--submit'
 const spinner = 'btn-spinner'
diff --git a/ui/src/data_explorer/components/WriteDataForm.js b/ui/src/data_explorer/components/WriteDataForm.js
index 1221c6f05a..631510628c 100644
--- a/ui/src/data_explorer/components/WriteDataForm.js
+++ b/ui/src/data_explorer/components/WriteDataForm.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 OnClickOutside from 'shared/components/OnClickOutside'
diff --git a/ui/src/data_explorer/components/WriteDataHeader.js b/ui/src/data_explorer/components/WriteDataHeader.js
index 03dec0a7e6..aa03d97bb3 100644
--- a/ui/src/data_explorer/components/WriteDataHeader.js
+++ b/ui/src/data_explorer/components/WriteDataHeader.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'
 
 const WriteDataHeader = ({
diff --git a/ui/src/data_explorer/containers/App.js b/ui/src/data_explorer/containers/App.js
index c609c0fcfe..a3ea55ee1a 100644
--- a/ui/src/data_explorer/containers/App.js
+++ b/ui/src/data_explorer/containers/App.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 DataExplorer from './DataExplorer'
 
diff --git a/ui/src/data_explorer/containers/DataExplorer.js b/ui/src/data_explorer/containers/DataExplorer.js
index 8ddc15376c..5040f16dab 100644
--- a/ui/src/data_explorer/containers/DataExplorer.js
+++ b/ui/src/data_explorer/containers/DataExplorer.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'
diff --git a/ui/src/data_explorer/containers/Header.js b/ui/src/data_explorer/containers/Header.js
index df57ffb8fa..025089f986 100644
--- a/ui/src/data_explorer/containers/Header.js
+++ b/ui/src/data_explorer/containers/Header.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 AutoRefreshDropdown from 'shared/components/AutoRefreshDropdown'
diff --git a/ui/src/hosts/components/HostRow.js b/ui/src/hosts/components/HostRow.js
index 159decb398..62f20065a3 100644
--- a/ui/src/hosts/components/HostRow.js
+++ b/ui/src/hosts/components/HostRow.js
@@ -1,4 +1,5 @@
-import React, {PropTypes, Component} from 'react'
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
 import shallowCompare from 'react-addons-shallow-compare'
 import {Link} from 'react-router'
 import classnames from 'classnames'
diff --git a/ui/src/hosts/components/HostsTable.js b/ui/src/hosts/components/HostsTable.js
index cd472fc17e..b0bc342561 100644
--- a/ui/src/hosts/components/HostsTable.js
+++ b/ui/src/hosts/components/HostsTable.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 SearchBar from 'src/hosts/components/SearchBar'
diff --git a/ui/src/hosts/components/SearchBar.js b/ui/src/hosts/components/SearchBar.js
index 048de7aaf0..269ecf608e 100644
--- a/ui/src/hosts/components/SearchBar.js
+++ b/ui/src/hosts/components/SearchBar.js
@@ -1,4 +1,5 @@
-import React, {PropTypes, Component} from 'react'
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
 import _ from 'lodash'
 
 class SearchBar extends Component {
diff --git a/ui/src/hosts/containers/HostPage.js b/ui/src/hosts/containers/HostPage.js
index d0d9d010ca..f513305b20 100644
--- a/ui/src/hosts/containers/HostPage.js
+++ b/ui/src/hosts/containers/HostPage.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'
diff --git a/ui/src/hosts/containers/HostsPage.js b/ui/src/hosts/containers/HostsPage.js
index e76201d00c..d1ee6f8954 100644
--- a/ui/src/hosts/containers/HostsPage.js
+++ b/ui/src/hosts/containers/HostsPage.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'
diff --git a/ui/src/kapacitor/components/AlertOutputs.tsx b/ui/src/kapacitor/components/AlertOutputs.tsx
new file mode 100644
index 0000000000..6e3beb11c2
--- /dev/null
+++ b/ui/src/kapacitor/components/AlertOutputs.tsx
@@ -0,0 +1,52 @@
+import React, {SFC} from 'react'
+
+import AlertTabs from 'src/kapacitor/components/AlertTabs'
+
+import {Kapacitor, Source} from 'src/types'
+
+type FlashMessage = {type: string; text: string}
+
+interface AlertOutputProps {
+  exists: boolean
+  kapacitor: Kapacitor
+  addFlashMessage: (message: FlashMessage) => void
+  source: Source
+  hash: string
+}
+
+const AlertOutputs: SFC<AlertOutputProps> = ({
+  exists,
+  kapacitor,
+  addFlashMessage,
+  source,
+  hash,
+}) => {
+  if (exists) {
+    return (
+      <AlertTabs
+        source={source}
+        kapacitor={kapacitor}
+        addFlashMessage={addFlashMessage}
+        hash={hash}
+      />
+    )
+  }
+
+  return (
+    <div className="panel">
+      <div className="panel-heading">
+        <h2 className="panel-title">Configure Alert Endpoints</h2>
+      </div>
+      <div className="panel-body">
+        <div className="generic-empty-state">
+          <h4 className="no-user-select">
+            Connect to an active Kapacitor instance to configure alerting
+            endpoints
+          </h4>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default AlertOutputs
diff --git a/ui/src/kapacitor/components/AlertTabs.js b/ui/src/kapacitor/components/AlertTabs.js
index 41c31a94e9..e75a979eaf 100644
--- a/ui/src/kapacitor/components/AlertTabs.js
+++ b/ui/src/kapacitor/components/AlertTabs.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 {Tab, Tabs, TabPanel, TabPanels, TabList} from 'shared/components/Tabs'
diff --git a/ui/src/kapacitor/components/CodeData.js b/ui/src/kapacitor/components/CodeData.js
index 23a4fd160d..779bc87a71 100644
--- a/ui/src/kapacitor/components/CodeData.js
+++ b/ui/src/kapacitor/components/CodeData.js
@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react'
+import React from 'react'
+import PropTypes from 'prop-types'
 
 const CodeData = ({onClickTemplate, template}) =>
   <code
diff --git a/ui/src/kapacitor/components/DataSection.js b/ui/src/kapacitor/components/DataSection.js
index 7231f994f6..050998d465 100644
--- a/ui/src/kapacitor/components/DataSection.js
+++ b/ui/src/kapacitor/components/DataSection.js
@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react'
+import React from 'react'
+import PropTypes from 'prop-types'
 
 import DatabaseList from 'src/shared/components/DatabaseList'
 import MeasurementList from 'src/shared/components/MeasurementList'
diff --git a/ui/src/kapacitor/components/Deadman.js b/ui/src/kapacitor/components/Deadman.js
index dea1dd15e1..9e9cbe0c31 100644
--- a/ui/src/kapacitor/components/Deadman.js
+++ b/ui/src/kapacitor/components/Deadman.js
@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react'
+import React from 'react'
+import PropTypes from 'prop-types'
 import {PERIODS} from 'src/kapacitor/constants'
 import Dropdown from 'shared/components/Dropdown'
 
diff --git a/ui/src/kapacitor/components/HandlerCheckbox.js b/ui/src/kapacitor/components/HandlerCheckbox.js
index 3b052dc57a..04cff08dd8 100644
--- a/ui/src/kapacitor/components/HandlerCheckbox.js
+++ b/ui/src/kapacitor/components/HandlerCheckbox.js
@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react'
+import React from 'react'
+import PropTypes from 'prop-types'
 
 const HandlerCheckbox = ({
   fieldName,
diff --git a/ui/src/kapacitor/components/HandlerEmpty.js b/ui/src/kapacitor/components/HandlerEmpty.js
index 6ff2a18da4..11cc80a2c0 100644
--- a/ui/src/kapacitor/components/HandlerEmpty.js
+++ b/ui/src/kapacitor/components/HandlerEmpty.js
@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react'
+import React from 'react'
+import PropTypes from 'prop-types'
 
 const HandlerEmpty = ({onGoToConfig, validationError}) =>
   <div className="endpoint-tab-contents">
diff --git a/ui/src/kapacitor/components/HandlerInput.js b/ui/src/kapacitor/components/HandlerInput.js
index 35f6d6e960..1b63c2925d 100644
--- a/ui/src/kapacitor/components/HandlerInput.js
+++ b/ui/src/kapacitor/components/HandlerInput.js
@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react'
+import React from 'react'
+import PropTypes from 'prop-types'
 import _ from 'lodash'
 
 const HandlerInput = ({
diff --git a/ui/src/kapacitor/components/HandlerOptions.js b/ui/src/kapacitor/components/HandlerOptions.js
index 5b2c6fdaea..67e39b1a00 100644
--- a/ui/src/kapacitor/components/HandlerOptions.js
+++ b/ui/src/kapacitor/components/HandlerOptions.js
@@ -1,4 +1,5 @@
-import React, {Component, PropTypes} from 'react'
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
 import {
   PostHandler,
   TcpHandler,
diff --git a/ui/src/kapacitor/components/HandlerTabs.js b/ui/src/kapacitor/components/HandlerTabs.js
index 980c9a5afc..5e4f62292e 100644
--- a/ui/src/kapacitor/components/HandlerTabs.js
+++ b/ui/src/kapacitor/components/HandlerTabs.js
@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react'
+import React from 'react'
+import PropTypes from 'prop-types'
 import classnames from 'classnames'
 import uuid from 'uuid'
 
diff --git a/ui/src/kapacitor/components/KapacitorForm.js b/ui/src/kapacitor/components/KapacitorForm.js
deleted file mode 100644
index 4ec77efb79..0000000000
--- a/ui/src/kapacitor/components/KapacitorForm.js
+++ /dev/null
@@ -1,169 +0,0 @@
-import React, {Component, PropTypes} from 'react'
-
-import AlertTabs from 'src/kapacitor/components/AlertTabs'
-import FancyScrollbar from 'shared/components/FancyScrollbar'
-
-class KapacitorForm extends Component {
-  render() {
-    const {
-      onInputChange,
-      onChangeUrl,
-      onReset,
-      kapacitor,
-      onSubmit,
-      exists,
-    } = this.props
-    const {url, name, username, password} = kapacitor
-    return (
-      <div className="page">
-        <div className="page-header">
-          <div className="page-header__container">
-            <div className="page-header__left">
-              <h1 className="page-header__title">{`${exists
-                ? 'Configure'
-                : 'Add a New'} Kapacitor Connection`}</h1>
-            </div>
-          </div>
-        </div>
-        <FancyScrollbar className="page-contents">
-          <div className="container-fluid">
-            <div className="row">
-              <div className="col-md-3">
-                <div className="panel">
-                  <div className="panel-heading">
-                    <h2 className="panel-title">Connection Details</h2>
-                  </div>
-                  <div className="panel-body">
-                    <form onSubmit={onSubmit}>
-                      <div>
-                        <div className="form-group">
-                          <label htmlFor="kapaUrl">Kapacitor URL</label>
-                          <input
-                            className="form-control"
-                            id="kapaUrl"
-                            name="kapaUrl"
-                            placeholder={url}
-                            value={url}
-                            onChange={onChangeUrl}
-                            spellCheck="false"
-                          />
-                        </div>
-                        <div className="form-group">
-                          <label htmlFor="name">Name</label>
-                          <input
-                            className="form-control"
-                            id="name"
-                            name="name"
-                            placeholder={name}
-                            value={name}
-                            onChange={onInputChange}
-                            spellCheck="false"
-                            maxLength="33"
-                          />
-                        </div>
-                        <div className="form-group">
-                          <label htmlFor="username">Username</label>
-                          <input
-                            className="form-control"
-                            id="username"
-                            name="username"
-                            placeholder="username"
-                            value={username || ''}
-                            onChange={onInputChange}
-                            spellCheck="false"
-                          />
-                        </div>
-                        <div className="form-group">
-                          <label htmlFor="password">Password</label>
-                          <input
-                            className="form-control"
-                            id="password"
-                            type="password"
-                            name="password"
-                            placeholder="password"
-                            value={password || ''}
-                            onChange={onInputChange}
-                            spellCheck="false"
-                          />
-                        </div>
-                      </div>
-
-                      <div className="form-group form-group-submit col-xs-12 text-center">
-                        <button
-                          className="btn btn-default"
-                          type="button"
-                          onClick={onReset}
-                        >
-                          Reset
-                        </button>
-                        <button className="btn btn-success" type="submit">
-                          {exists ? 'Update' : 'Connect'}
-                        </button>
-                      </div>
-                    </form>
-                  </div>
-                </div>
-              </div>
-              <div className="col-md-9">
-                {this.renderAlertOutputs()}
-              </div>
-            </div>
-          </div>
-        </FancyScrollbar>
-      </div>
-    )
-  }
-
-  // TODO: move these to another page.  they dont belong on this page
-  renderAlertOutputs() {
-    const {exists, kapacitor, addFlashMessage, source, hash} = this.props
-
-    if (exists) {
-      return (
-        <AlertTabs
-          source={source}
-          kapacitor={kapacitor}
-          addFlashMessage={addFlashMessage}
-          hash={hash}
-        />
-      )
-    }
-
-    return (
-      <div className="panel">
-        <div className="panel-heading">
-          <h2 className="panel-title">Configure Alert Endpoints</h2>
-        </div>
-        <div className="panel-body">
-          <div className="generic-empty-state">
-            <h4 className="no-user-select">
-              Connect to an active Kapacitor instance to configure alerting
-              endpoints
-            </h4>
-          </div>
-        </div>
-      </div>
-    )
-  }
-}
-
-const {func, shape, string, bool} = PropTypes
-
-KapacitorForm.propTypes = {
-  onSubmit: func.isRequired,
-  onInputChange: func.isRequired,
-  onChangeUrl: func.isRequired,
-  onReset: func.isRequired,
-  kapacitor: shape({
-    url: string.isRequired,
-    name: string.isRequired,
-    username: string,
-    password: string,
-  }).isRequired,
-  source: shape({}).isRequired,
-  addFlashMessage: func.isRequired,
-  exists: bool.isRequired,
-  hash: string.isRequired,
-}
-
-export default KapacitorForm
diff --git a/ui/src/kapacitor/components/KapacitorForm.tsx b/ui/src/kapacitor/components/KapacitorForm.tsx
new file mode 100644
index 0000000000..38eaf1e62b
--- /dev/null
+++ b/ui/src/kapacitor/components/KapacitorForm.tsx
@@ -0,0 +1,124 @@
+import React, {SFC, ChangeEvent, MouseEvent} from 'react'
+
+import AlertOutputs from 'src/kapacitor/components/AlertOutputs'
+import FancyScrollbar from 'src/shared/components/FancyScrollbar'
+import Input from 'src/kapacitor/components/KapacitorFormInput'
+
+import {Kapacitor, Source} from 'src/types'
+
+type FlashMessage = {type: string; text: string}
+
+interface Props {
+  kapacitor: Kapacitor
+  exists: boolean
+  onReset: (e: MouseEvent<HTMLButtonElement>) => void
+  onSubmit: (e: ChangeEvent<HTMLFormElement>) => void
+  onInputChange: (e: ChangeEvent<HTMLInputElement>) => void
+  onChangeUrl: (e: ChangeEvent<HTMLInputElement>) => void
+  addFlashMessage: (message: FlashMessage) => void
+  source: Source
+  hash: string
+}
+
+const KapacitorForm: SFC<Props> = ({
+  onChangeUrl,
+  onReset,
+  kapacitor,
+  kapacitor: {url, name, username, password},
+  onSubmit,
+  exists,
+  onInputChange,
+  addFlashMessage,
+  source,
+  hash,
+}) =>
+  <div className="page">
+    <div className="page-header">
+      <div className="page-header__container">
+        <div className="page-header__left">
+          <h1 className="page-header__title">{`${exists
+            ? 'Configure'
+            : 'Add a New'} Kapacitor Connection`}</h1>
+        </div>
+      </div>
+    </div>
+    <FancyScrollbar className="page-contents">
+      <div className="container-fluid">
+        <div className="row">
+          <div className="col-md-3">
+            <div className="panel">
+              <div className="panel-heading">
+                <h2 className="panel-title">Connection Details</h2>
+              </div>
+              <div className="panel-body">
+                <form onSubmit={onSubmit}>
+                  <div>
+                    <Input
+                      name="kapaUrl"
+                      label="Kapacitor URL"
+                      value={url}
+                      placeholder={url}
+                      onChange={onChangeUrl}
+                    />
+                    <Input
+                      name="name"
+                      label="Name"
+                      value={name}
+                      placeholder={name}
+                      onChange={onInputChange}
+                      maxLength={33}
+                    />
+                    <Input
+                      name="username"
+                      label="Username"
+                      value={username || ''}
+                      placeholder={username}
+                      onChange={onInputChange}
+                    />
+                    <Input
+                      name="password"
+                      label="password"
+                      placeholder="password"
+                      value={password || ''}
+                      onChange={onInputChange}
+                      inputType="password"
+                    />
+                  </div>
+                  <div className="form-group form-group-submit col-xs-12 text-center">
+                    <button
+                      className="btn btn-default"
+                      type="button"
+                      onClick={onReset}
+                      data-test="reset-button"
+                    >
+                      Reset
+                    </button>
+                    <button
+                      className="btn btn-success"
+                      type="submit"
+                      data-test="submit-button"
+                    >
+                      {exists ? 'Update' : 'Connect'}
+                    </button>
+                  </div>
+                </form>
+              </div>
+            </div>
+          </div>
+          <div className="col-md-9">
+            {
+              <AlertOutputs
+                exists={exists}
+                kapacitor={kapacitor}
+                addFlashMessage={addFlashMessage}
+                source={source}
+                hash={hash}
+              />
+            }
+          </div>
+        </div>
+      </div>
+    </FancyScrollbar>
+  </div>
+
+export default KapacitorForm
diff --git a/ui/src/kapacitor/components/KapacitorFormInput.tsx b/ui/src/kapacitor/components/KapacitorFormInput.tsx
new file mode 100644
index 0000000000..be3afb499a
--- /dev/null
+++ b/ui/src/kapacitor/components/KapacitorFormInput.tsx
@@ -0,0 +1,43 @@
+import React, {SFC, ChangeEvent} from 'react'
+
+interface Props {
+  name: string
+  label: string
+  value: string
+  placeholder: string
+  onChange: (e: ChangeEvent<HTMLInputElement>) => void
+  maxLength?: number
+  inputType?: string
+}
+
+const KapacitorFormInput: SFC<Props> = ({
+  name,
+  label,
+  value,
+  placeholder,
+  onChange,
+  maxLength,
+  inputType,
+}) =>
+  <div className="form-group">
+    <label htmlFor={name}>
+      {label}
+    </label>
+    <input
+      className="form-control"
+      id={name}
+      name={name}
+      value={value}
+      spellCheck={false}
+      onChange={onChange}
+      placeholder={placeholder}
+      maxLength={maxLength}
+      type={inputType}
+    />
+  </div>
+
+KapacitorFormInput.defaultProps = {
+  inputType: '',
+}
+
+export default KapacitorFormInput
diff --git a/ui/src/kapacitor/components/KapacitorRule.js b/ui/src/kapacitor/components/KapacitorRule.js
index b61d8f9e13..f7fde915f9 100644
--- a/ui/src/kapacitor/components/KapacitorRule.js
+++ b/ui/src/kapacitor/components/KapacitorRule.js
@@ -1,4 +1,5 @@
-import React, {PropTypes, Component} from 'react'
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
 
 import NameSection from 'src/kapacitor/components/NameSection'
 import ValuesSection from 'src/kapacitor/components/ValuesSection'
diff --git a/ui/src/kapacitor/components/KapacitorRules.js b/ui/src/kapacitor/components/KapacitorRules.js
index 6067284868..2909b3a0e0 100644
--- a/ui/src/kapacitor/components/KapacitorRules.js
+++ b/ui/src/kapacitor/components/KapacitorRules.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 NoKapacitorError from 'shared/components/NoKapacitorError'
diff --git a/ui/src/kapacitor/components/KapacitorRulesTable.js b/ui/src/kapacitor/components/KapacitorRulesTable.js
index df01161448..d894600457 100644
--- a/ui/src/kapacitor/components/KapacitorRulesTable.js
+++ b/ui/src/kapacitor/components/KapacitorRulesTable.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'
 
diff --git a/ui/src/kapacitor/components/LogItemHTTP.js b/ui/src/kapacitor/components/LogItemHTTP.js
index 0d8b7a7758..450ce76897 100644
--- a/ui/src/kapacitor/components/LogItemHTTP.js
+++ b/ui/src/kapacitor/components/LogItemHTTP.js
@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react'
+import React from 'react'
+import PropTypes from 'prop-types'
 
 const LogItemHTTP = ({logItem}) =>
   <div className="logs-table--row">
diff --git a/ui/src/kapacitor/components/LogItemHTTPError.js b/ui/src/kapacitor/components/LogItemHTTPError.js
index c2f1d74078..0be95e49d6 100644
--- a/ui/src/kapacitor/components/LogItemHTTPError.js
+++ b/ui/src/kapacitor/components/LogItemHTTPError.js
@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react'
+import React from 'react'
+import PropTypes from 'prop-types'
 
 const LogItemHTTPError = ({logItem}) =>
   <div className="logs-table--row" key={logItem.key}>
diff --git a/ui/src/kapacitor/components/LogItemInfluxDBDebug.js b/ui/src/kapacitor/components/LogItemInfluxDBDebug.js
index bbbd292df1..4d3734b5bd 100644
--- a/ui/src/kapacitor/components/LogItemInfluxDBDebug.js
+++ b/ui/src/kapacitor/components/LogItemInfluxDBDebug.js
@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react'
+import React from 'react'
+import PropTypes from 'prop-types'
 
 const LogItemInfluxDBDebug = ({logItem}) =>
   <div className="logs-table--row">
diff --git a/ui/src/kapacitor/components/LogItemKapacitorDebug.js b/ui/src/kapacitor/components/LogItemKapacitorDebug.js
index 3f694dd4eb..50f0867f15 100644
--- a/ui/src/kapacitor/components/LogItemKapacitorDebug.js
+++ b/ui/src/kapacitor/components/LogItemKapacitorDebug.js
@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react'
+import React from 'react'
+import PropTypes from 'prop-types'
 
 const LogItemKapacitorDebug = ({logItem}) =>
   <div className="logs-table--row">
diff --git a/ui/src/kapacitor/components/LogItemKapacitorError.js b/ui/src/kapacitor/components/LogItemKapacitorError.js
index 83fa42b81f..0429bf6d33 100644
--- a/ui/src/kapacitor/components/LogItemKapacitorError.js
+++ b/ui/src/kapacitor/components/LogItemKapacitorError.js
@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react'
+import React from 'react'
+import PropTypes from 'prop-types'
 
 const LogItemKapacitorError = ({logItem}) =>
   <div className="logs-table--row">
diff --git a/ui/src/kapacitor/components/LogItemKapacitorPoint.js b/ui/src/kapacitor/components/LogItemKapacitorPoint.js
index 898f656bb4..f8289af109 100644
--- a/ui/src/kapacitor/components/LogItemKapacitorPoint.js
+++ b/ui/src/kapacitor/components/LogItemKapacitorPoint.js
@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react'
+import React from 'react'
+import PropTypes from 'prop-types'
 
 const renderKeysAndValues = (object, name) => {
   if (!object) {
diff --git a/ui/src/kapacitor/components/LogItemSession.js b/ui/src/kapacitor/components/LogItemSession.js
index c5c1cb2860..623f9f155a 100644
--- a/ui/src/kapacitor/components/LogItemSession.js
+++ b/ui/src/kapacitor/components/LogItemSession.js
@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react'
+import React from 'react'
+import PropTypes from 'prop-types'
 
 const LogItemSession = ({logItem}) =>
   <div className="logs-table--row">
diff --git a/ui/src/kapacitor/components/LogsTable.js b/ui/src/kapacitor/components/LogsTable.js
index 41fee0de53..b4ecdce048 100644
--- a/ui/src/kapacitor/components/LogsTable.js
+++ b/ui/src/kapacitor/components/LogsTable.js
@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react'
+import React from 'react'
+import PropTypes from 'prop-types'
 
 import LogsTableRow from 'src/kapacitor/components/LogsTableRow'
 import FancyScrollbar from 'src/shared/components/FancyScrollbar'
diff --git a/ui/src/kapacitor/components/LogsTableRow.js b/ui/src/kapacitor/components/LogsTableRow.js
index 83c12bcec0..91c14d4644 100644
--- a/ui/src/kapacitor/components/LogsTableRow.js
+++ b/ui/src/kapacitor/components/LogsTableRow.js
@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react'
+import React from 'react'
+import PropTypes from 'prop-types'
 
 import LogItemSession from 'src/kapacitor/components/LogItemSession'
 import LogItemHTTP from 'src/kapacitor/components/LogItemHTTP'
diff --git a/ui/src/kapacitor/components/LogsToggle.js b/ui/src/kapacitor/components/LogsToggle.js
index 9820b621b4..af6a2e41ae 100644
--- a/ui/src/kapacitor/components/LogsToggle.js
+++ b/ui/src/kapacitor/components/LogsToggle.js
@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react'
+import React from 'react'
+import PropTypes from 'prop-types'
 
 const LogsToggle = ({areLogsVisible, onToggleLogsVisibility}) =>
   <ul className="nav nav-tablist nav-tablist-sm nav-tablist-malachite logs-toggle">
diff --git a/ui/src/kapacitor/components/NameSection.js b/ui/src/kapacitor/components/NameSection.js
index 5abbc95adb..025b18c27e 100644
--- a/ui/src/kapacitor/components/NameSection.js
+++ b/ui/src/kapacitor/components/NameSection.js
@@ -1,4 +1,5 @@
-import React, {Component, PropTypes} from 'react'
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
 import {DEFAULT_RULE_ID} from 'src/kapacitor/constants'
 
 class NameSection extends Component {
diff --git a/ui/src/kapacitor/components/Relative.js b/ui/src/kapacitor/components/Relative.js
index 91709940a5..0ce0935dfe 100644
--- a/ui/src/kapacitor/components/Relative.js
+++ b/ui/src/kapacitor/components/Relative.js
@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react'
+import React from 'react'
+import PropTypes from 'prop-types'
 import {CHANGES, RELATIVE_OPERATORS, SHIFTS} from 'src/kapacitor/constants'
 import Dropdown from 'shared/components/Dropdown'
 
diff --git a/ui/src/kapacitor/components/RuleDetailsText.js b/ui/src/kapacitor/components/RuleDetailsText.js
index 82d2abf295..ba9a451ef5 100644
--- a/ui/src/kapacitor/components/RuleDetailsText.js
+++ b/ui/src/kapacitor/components/RuleDetailsText.js
@@ -1,4 +1,5 @@
-import React, {Component, PropTypes} from 'react'
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
 
 class RuleDetailsText extends Component {
   constructor(props) {
diff --git a/ui/src/kapacitor/components/RuleGraph.js b/ui/src/kapacitor/components/RuleGraph.js
index b80ea80aa4..a181243aea 100644
--- a/ui/src/kapacitor/components/RuleGraph.js
+++ b/ui/src/kapacitor/components/RuleGraph.js
@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react'
+import React from 'react'
+import PropTypes from 'prop-types'
 import buildInfluxQLQuery from 'utils/influxql'
 import AutoRefresh from 'shared/components/AutoRefresh'
 import LineGraph from 'shared/components/LineGraph'
diff --git a/ui/src/kapacitor/components/RuleHandlers.js b/ui/src/kapacitor/components/RuleHandlers.js
index 21ec7864f1..ffe1d3456d 100644
--- a/ui/src/kapacitor/components/RuleHandlers.js
+++ b/ui/src/kapacitor/components/RuleHandlers.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 HandlerOptions from 'src/kapacitor/components/HandlerOptions'
diff --git a/ui/src/kapacitor/components/RuleHeader.js b/ui/src/kapacitor/components/RuleHeader.js
index bb8246214a..19f95e31a7 100644
--- a/ui/src/kapacitor/components/RuleHeader.js
+++ b/ui/src/kapacitor/components/RuleHeader.js
@@ -1,4 +1,5 @@
-import React, {PropTypes, Component} from 'react'
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
 import RuleHeaderSave from 'src/kapacitor/components/RuleHeaderSave'
 
 class RuleHeader extends Component {
diff --git a/ui/src/kapacitor/components/RuleHeaderSave.js b/ui/src/kapacitor/components/RuleHeaderSave.js
index 8a6143d7f3..953dcd808f 100644
--- a/ui/src/kapacitor/components/RuleHeaderSave.js
+++ b/ui/src/kapacitor/components/RuleHeaderSave.js
@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react'
+import React from 'react'
+import PropTypes from 'prop-types'
 import ReactTooltip from 'react-tooltip'
 import SourceIndicator from 'shared/components/SourceIndicator'
 
diff --git a/ui/src/kapacitor/components/RuleMessage.js b/ui/src/kapacitor/components/RuleMessage.js
index ce9ecc42bc..d5da4f575e 100644
--- a/ui/src/kapacitor/components/RuleMessage.js
+++ b/ui/src/kapacitor/components/RuleMessage.js
@@ -1,4 +1,5 @@
-import React, {Component, PropTypes} from 'react'
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
 
 import RuleMessageText from 'src/kapacitor/components/RuleMessageText'
 import RuleMessageTemplates from 'src/kapacitor/components/RuleMessageTemplates'
diff --git a/ui/src/kapacitor/components/RuleMessageTemplates.js b/ui/src/kapacitor/components/RuleMessageTemplates.js
index 82807ed16b..3b0fd01d27 100644
--- a/ui/src/kapacitor/components/RuleMessageTemplates.js
+++ b/ui/src/kapacitor/components/RuleMessageTemplates.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 ReactTooltip from 'react-tooltip'
 
diff --git a/ui/src/kapacitor/components/RuleMessageText.js b/ui/src/kapacitor/components/RuleMessageText.js
index 526dc4f43c..8fcb0373a7 100644
--- a/ui/src/kapacitor/components/RuleMessageText.js
+++ b/ui/src/kapacitor/components/RuleMessageText.js
@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react'
+import React from 'react'
+import PropTypes from 'prop-types'
 
 const RuleMessageText = ({rule, updateMessage}) =>
   <div className="rule-builder--message">
diff --git a/ui/src/kapacitor/components/TICKscriptOverlay.js b/ui/src/kapacitor/components/TICKscriptOverlay.js
index 87762ae8d1..1dda8bab8c 100644
--- a/ui/src/kapacitor/components/TICKscriptOverlay.js
+++ b/ui/src/kapacitor/components/TICKscriptOverlay.js
@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react'
+import React from 'react'
+import PropTypes from 'prop-types'
 import OverlayTechnologies from 'shared/components/OverlayTechnologies'
 
 const TICKscriptOverlay = ({tickscript, onClose}) =>
diff --git a/ui/src/kapacitor/components/TasksTable.js b/ui/src/kapacitor/components/TasksTable.js
index bf48eb8871..ea49157366 100644
--- a/ui/src/kapacitor/components/TasksTable.js
+++ b/ui/src/kapacitor/components/TasksTable.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'
 
diff --git a/ui/src/kapacitor/components/Threshold.js b/ui/src/kapacitor/components/Threshold.js
index b43cfbb89c..3154d99add 100644
--- a/ui/src/kapacitor/components/Threshold.js
+++ b/ui/src/kapacitor/components/Threshold.js
@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react'
+import React from 'react'
+import PropTypes from 'prop-types'
 import {THRESHOLD_OPERATORS} from 'src/kapacitor/constants'
 import Dropdown from 'shared/components/Dropdown'
 import _ from 'lodash'
diff --git a/ui/src/kapacitor/components/Tickscript.js b/ui/src/kapacitor/components/Tickscript.js
index 65320d0561..8e9d80b894 100644
--- a/ui/src/kapacitor/components/Tickscript.js
+++ b/ui/src/kapacitor/components/Tickscript.js
@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react'
+import React from 'react'
+import PropTypes from 'prop-types'
 
 import TickscriptHeader from 'src/kapacitor/components/TickscriptHeader'
 import TickscriptEditor from 'src/kapacitor/components/TickscriptEditor'
diff --git a/ui/src/kapacitor/components/TickscriptEditor.js b/ui/src/kapacitor/components/TickscriptEditor.js
index 1ca8ab717a..571feeba9b 100644
--- a/ui/src/kapacitor/components/TickscriptEditor.js
+++ b/ui/src/kapacitor/components/TickscriptEditor.js
@@ -1,4 +1,5 @@
-import React, {PropTypes, Component} from 'react'
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
 import CodeMirror from '@skidding/react-codemirror'
 import 'src/external/codemirror'
 
diff --git a/ui/src/kapacitor/components/TickscriptEditorConsole.js b/ui/src/kapacitor/components/TickscriptEditorConsole.js
index 9940bf92ce..1b9f102dba 100644
--- a/ui/src/kapacitor/components/TickscriptEditorConsole.js
+++ b/ui/src/kapacitor/components/TickscriptEditorConsole.js
@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react'
+import React from 'react'
+import PropTypes from 'prop-types'
 
 const TickscriptEditorConsole = ({consoleMessage, unsavedChanges}) => {
   let consoleOutput = 'TICKscript is valid'
diff --git a/ui/src/kapacitor/components/TickscriptEditorControls.js b/ui/src/kapacitor/components/TickscriptEditorControls.js
index aff0961044..2b045090b2 100644
--- a/ui/src/kapacitor/components/TickscriptEditorControls.js
+++ b/ui/src/kapacitor/components/TickscriptEditorControls.js
@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react'
+import React from 'react'
+import PropTypes from 'prop-types'
 import TickscriptType from 'src/kapacitor/components/TickscriptType'
 import MultiSelectDBDropdown from 'shared/components/MultiSelectDBDropdown'
 import TickscriptID, {
diff --git a/ui/src/kapacitor/components/TickscriptHeader.js b/ui/src/kapacitor/components/TickscriptHeader.js
index babe033d8c..59b7379523 100644
--- a/ui/src/kapacitor/components/TickscriptHeader.js
+++ b/ui/src/kapacitor/components/TickscriptHeader.js
@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react'
+import React from 'react'
+import PropTypes from 'prop-types'
 
 import SourceIndicator from 'shared/components/SourceIndicator'
 import LogsToggle from 'src/kapacitor/components/LogsToggle'
diff --git a/ui/src/kapacitor/components/TickscriptID.js b/ui/src/kapacitor/components/TickscriptID.js
index 8121e70505..5d3123c6df 100644
--- a/ui/src/kapacitor/components/TickscriptID.js
+++ b/ui/src/kapacitor/components/TickscriptID.js
@@ -1,4 +1,5 @@
-import React, {PropTypes, Component} from 'react'
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
 
 class TickscriptID extends Component {
   constructor(props) {
diff --git a/ui/src/kapacitor/components/TickscriptType.js b/ui/src/kapacitor/components/TickscriptType.js
index e28a454bc2..3523f1c01f 100644
--- a/ui/src/kapacitor/components/TickscriptType.js
+++ b/ui/src/kapacitor/components/TickscriptType.js
@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react'
+import React from 'react'
+import PropTypes from 'prop-types'
 const STREAM = 'stream'
 const BATCH = 'batch'
 
diff --git a/ui/src/kapacitor/components/ValuesSection.js b/ui/src/kapacitor/components/ValuesSection.js
index 551510e95f..903cab6dfc 100644
--- a/ui/src/kapacitor/components/ValuesSection.js
+++ b/ui/src/kapacitor/components/ValuesSection.js
@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react'
+import React from 'react'
+import PropTypes from 'prop-types'
 
 import _ from 'lodash'
 
diff --git a/ui/src/kapacitor/components/config/AlertaConfig.js b/ui/src/kapacitor/components/config/AlertaConfig.js
index a55707a6fe..837bd1ca2e 100644
--- a/ui/src/kapacitor/components/config/AlertaConfig.js
+++ b/ui/src/kapacitor/components/config/AlertaConfig.js
@@ -1,4 +1,5 @@
-import React, {PropTypes, Component} from 'react'
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
 
 import RedactedInput from './RedactedInput'
 
diff --git a/ui/src/kapacitor/components/config/HipChatConfig.js b/ui/src/kapacitor/components/config/HipChatConfig.js
index 0abb95806f..355fa96147 100644
--- a/ui/src/kapacitor/components/config/HipChatConfig.js
+++ b/ui/src/kapacitor/components/config/HipChatConfig.js
@@ -1,4 +1,5 @@
-import React, {PropTypes, Component} from 'react'
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
 
 import QuestionMarkTooltip from 'shared/components/QuestionMarkTooltip'
 import {HIPCHAT_TOKEN_TIP} from 'src/kapacitor/copy'
diff --git a/ui/src/kapacitor/components/config/OpsGenieConfig.js b/ui/src/kapacitor/components/config/OpsGenieConfig.js
index 81d9b2ebb4..41427bfe1c 100644
--- a/ui/src/kapacitor/components/config/OpsGenieConfig.js
+++ b/ui/src/kapacitor/components/config/OpsGenieConfig.js
@@ -1,4 +1,5 @@
-import React, {PropTypes, Component} from 'react'
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
 
 import RedactedInput from './RedactedInput'
 import TagInput from 'shared/components/TagInput'
diff --git a/ui/src/kapacitor/components/config/PagerDutyConfig.js b/ui/src/kapacitor/components/config/PagerDutyConfig.js
index ece95e13ea..74c6863cdf 100644
--- a/ui/src/kapacitor/components/config/PagerDutyConfig.js
+++ b/ui/src/kapacitor/components/config/PagerDutyConfig.js
@@ -1,4 +1,5 @@
-import React, {PropTypes, Component} from 'react'
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
 import RedactedInput from './RedactedInput'
 
 class PagerDutyConfig extends Component {
diff --git a/ui/src/kapacitor/components/config/PushoverConfig.js b/ui/src/kapacitor/components/config/PushoverConfig.js
index bb8b7bf7dd..e0d2593e76 100644
--- a/ui/src/kapacitor/components/config/PushoverConfig.js
+++ b/ui/src/kapacitor/components/config/PushoverConfig.js
@@ -1,4 +1,5 @@
-import React, {Component, PropTypes} from 'react'
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
 
 import QuestionMarkTooltip from 'shared/components/QuestionMarkTooltip'
 import RedactedInput from './RedactedInput'
diff --git a/ui/src/kapacitor/components/config/RedactedInput.js b/ui/src/kapacitor/components/config/RedactedInput.js
index 8296be50da..a7d2ba2c5c 100644
--- a/ui/src/kapacitor/components/config/RedactedInput.js
+++ b/ui/src/kapacitor/components/config/RedactedInput.js
@@ -1,4 +1,5 @@
-import React, {Component, PropTypes} from 'react'
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
 
 class RedactedInput extends Component {
   constructor(props) {
diff --git a/ui/src/kapacitor/components/config/SMTPConfig.js b/ui/src/kapacitor/components/config/SMTPConfig.js
index 4b3a57272d..b635adc35a 100644
--- a/ui/src/kapacitor/components/config/SMTPConfig.js
+++ b/ui/src/kapacitor/components/config/SMTPConfig.js
@@ -1,4 +1,5 @@
-import React, {PropTypes, Component} from 'react'
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
 
 class SMTPConfig extends Component {
   constructor(props) {
diff --git a/ui/src/kapacitor/components/config/SensuConfig.js b/ui/src/kapacitor/components/config/SensuConfig.js
index 6bf01c2f7e..59ba63f63e 100644
--- a/ui/src/kapacitor/components/config/SensuConfig.js
+++ b/ui/src/kapacitor/components/config/SensuConfig.js
@@ -1,4 +1,5 @@
-import React, {PropTypes, Component} from 'react'
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
 
 class SensuConfig extends Component {
   constructor(props) {
diff --git a/ui/src/kapacitor/components/config/SlackConfig.js b/ui/src/kapacitor/components/config/SlackConfig.js
index 7dcfb1a701..1acba68ee0 100644
--- a/ui/src/kapacitor/components/config/SlackConfig.js
+++ b/ui/src/kapacitor/components/config/SlackConfig.js
@@ -1,4 +1,5 @@
-import React, {PropTypes, Component} from 'react'
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
 
 import RedactedInput from './RedactedInput'
 
diff --git a/ui/src/kapacitor/components/config/TalkConfig.js b/ui/src/kapacitor/components/config/TalkConfig.js
index 94c9206088..10599c92fe 100644
--- a/ui/src/kapacitor/components/config/TalkConfig.js
+++ b/ui/src/kapacitor/components/config/TalkConfig.js
@@ -1,4 +1,5 @@
-import React, {PropTypes, Component} from 'react'
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
 
 import RedactedInput from './RedactedInput'
 
diff --git a/ui/src/kapacitor/components/config/TelegramConfig.js b/ui/src/kapacitor/components/config/TelegramConfig.js
index 3cf40b73e7..03fcf727fe 100644
--- a/ui/src/kapacitor/components/config/TelegramConfig.js
+++ b/ui/src/kapacitor/components/config/TelegramConfig.js
@@ -1,4 +1,5 @@
-import React, {PropTypes, Component} from 'react'
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
 import QuestionMarkTooltip from 'shared/components/QuestionMarkTooltip'
 import {TELEGRAM_CHAT_ID_TIP, TELEGRAM_TOKEN_TIP} from 'src/kapacitor/copy'
 
diff --git a/ui/src/kapacitor/components/config/VictorOpsConfig.js b/ui/src/kapacitor/components/config/VictorOpsConfig.js
index 62c241ca48..e70159d888 100644
--- a/ui/src/kapacitor/components/config/VictorOpsConfig.js
+++ b/ui/src/kapacitor/components/config/VictorOpsConfig.js
@@ -1,4 +1,5 @@
-import React, {PropTypes, Component} from 'react'
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
 
 import RedactedInput from './RedactedInput'
 
diff --git a/ui/src/kapacitor/components/handlers/AlertaHandler.js b/ui/src/kapacitor/components/handlers/AlertaHandler.js
index 38d4b5ad22..692942ba61 100644
--- a/ui/src/kapacitor/components/handlers/AlertaHandler.js
+++ b/ui/src/kapacitor/components/handlers/AlertaHandler.js
@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react'
+import React from 'react'
+import PropTypes from 'prop-types'
 import HandlerInput from 'src/kapacitor/components/HandlerInput'
 import HandlerEmpty from 'src/kapacitor/components/HandlerEmpty'
 
diff --git a/ui/src/kapacitor/components/handlers/EmailHandler.js b/ui/src/kapacitor/components/handlers/EmailHandler.js
index ddd2175a3a..953c7340ac 100644
--- a/ui/src/kapacitor/components/handlers/EmailHandler.js
+++ b/ui/src/kapacitor/components/handlers/EmailHandler.js
@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react'
+import React from 'react'
+import PropTypes from 'prop-types'
 import HandlerInput from 'src/kapacitor/components/HandlerInput'
 import HandlerEmpty from 'src/kapacitor/components/HandlerEmpty'
 import RuleDetailsText from 'src/kapacitor/components/RuleDetailsText'
diff --git a/ui/src/kapacitor/components/handlers/ExecHandler.js b/ui/src/kapacitor/components/handlers/ExecHandler.js
index c2f92e2535..136083909f 100644
--- a/ui/src/kapacitor/components/handlers/ExecHandler.js
+++ b/ui/src/kapacitor/components/handlers/ExecHandler.js
@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react'
+import React from 'react'
+import PropTypes from 'prop-types'
 import HandlerInput from 'src/kapacitor/components/HandlerInput'
 
 const ExecHandler = ({selectedHandler, handleModifyHandler}) =>
diff --git a/ui/src/kapacitor/components/handlers/HipchatHandler.js b/ui/src/kapacitor/components/handlers/HipchatHandler.js
index bca39be612..bca5098859 100644
--- a/ui/src/kapacitor/components/handlers/HipchatHandler.js
+++ b/ui/src/kapacitor/components/handlers/HipchatHandler.js
@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react'
+import React from 'react'
+import PropTypes from 'prop-types'
 import HandlerInput from 'src/kapacitor/components/HandlerInput'
 import HandlerEmpty from 'src/kapacitor/components/HandlerEmpty'
 
diff --git a/ui/src/kapacitor/components/handlers/LogHandler.js b/ui/src/kapacitor/components/handlers/LogHandler.js
index 586c4770c5..2eabf11165 100644
--- a/ui/src/kapacitor/components/handlers/LogHandler.js
+++ b/ui/src/kapacitor/components/handlers/LogHandler.js
@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react'
+import React from 'react'
+import PropTypes from 'prop-types'
 import HandlerInput from 'src/kapacitor/components/HandlerInput'
 
 const LogHandler = ({selectedHandler, handleModifyHandler}) =>
diff --git a/ui/src/kapacitor/components/handlers/OpsgenieHandler.js b/ui/src/kapacitor/components/handlers/OpsgenieHandler.js
index 783c20ec3d..e7ee1fe253 100644
--- a/ui/src/kapacitor/components/handlers/OpsgenieHandler.js
+++ b/ui/src/kapacitor/components/handlers/OpsgenieHandler.js
@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react'
+import React from 'react'
+import PropTypes from 'prop-types'
 import HandlerInput from 'src/kapacitor/components/HandlerInput'
 import HandlerEmpty from 'src/kapacitor/components/HandlerEmpty'
 
diff --git a/ui/src/kapacitor/components/handlers/PagerdutyHandler.js b/ui/src/kapacitor/components/handlers/PagerdutyHandler.js
index 400654e2eb..1f0700143e 100644
--- a/ui/src/kapacitor/components/handlers/PagerdutyHandler.js
+++ b/ui/src/kapacitor/components/handlers/PagerdutyHandler.js
@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react'
+import React from 'react'
+import PropTypes from 'prop-types'
 import HandlerInput from 'src/kapacitor/components/HandlerInput'
 import HandlerEmpty from 'src/kapacitor/components/HandlerEmpty'
 
diff --git a/ui/src/kapacitor/components/handlers/PostHandler.js b/ui/src/kapacitor/components/handlers/PostHandler.js
index 42df3eb8d4..e5b4879004 100644
--- a/ui/src/kapacitor/components/handlers/PostHandler.js
+++ b/ui/src/kapacitor/components/handlers/PostHandler.js
@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react'
+import React from 'react'
+import PropTypes from 'prop-types'
 import HandlerInput from 'src/kapacitor/components/HandlerInput'
 
 const PostHandler = ({selectedHandler, handleModifyHandler}) =>
diff --git a/ui/src/kapacitor/components/handlers/PushoverHandler.js b/ui/src/kapacitor/components/handlers/PushoverHandler.js
index 5b2f12c7f9..e9a97aa346 100644
--- a/ui/src/kapacitor/components/handlers/PushoverHandler.js
+++ b/ui/src/kapacitor/components/handlers/PushoverHandler.js
@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react'
+import React from 'react'
+import PropTypes from 'prop-types'
 import HandlerInput from 'src/kapacitor/components/HandlerInput'
 import HandlerEmpty from 'src/kapacitor/components/HandlerEmpty'
 
diff --git a/ui/src/kapacitor/components/handlers/SensuHandler.js b/ui/src/kapacitor/components/handlers/SensuHandler.js
index 00d530469d..acb746312b 100644
--- a/ui/src/kapacitor/components/handlers/SensuHandler.js
+++ b/ui/src/kapacitor/components/handlers/SensuHandler.js
@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react'
+import React from 'react'
+import PropTypes from 'prop-types'
 import HandlerInput from 'src/kapacitor/components/HandlerInput'
 import HandlerEmpty from 'src/kapacitor/components/HandlerEmpty'
 
diff --git a/ui/src/kapacitor/components/handlers/SlackHandler.js b/ui/src/kapacitor/components/handlers/SlackHandler.js
index 2a2ebd1acf..74f1192583 100644
--- a/ui/src/kapacitor/components/handlers/SlackHandler.js
+++ b/ui/src/kapacitor/components/handlers/SlackHandler.js
@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react'
+import React from 'react'
+import PropTypes from 'prop-types'
 import HandlerInput from 'src/kapacitor/components/HandlerInput'
 import HandlerEmpty from 'src/kapacitor/components/HandlerEmpty'
 
diff --git a/ui/src/kapacitor/components/handlers/TalkHandler.js b/ui/src/kapacitor/components/handlers/TalkHandler.js
index 5b24b8b864..e842efa6da 100644
--- a/ui/src/kapacitor/components/handlers/TalkHandler.js
+++ b/ui/src/kapacitor/components/handlers/TalkHandler.js
@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react'
+import React from 'react'
+import PropTypes from 'prop-types'
 import HandlerInput from 'src/kapacitor/components/HandlerInput'
 import HandlerEmpty from 'src/kapacitor/components/HandlerEmpty'
 
diff --git a/ui/src/kapacitor/components/handlers/TcpHandler.js b/ui/src/kapacitor/components/handlers/TcpHandler.js
index 9e8aeadef6..739023a5b8 100644
--- a/ui/src/kapacitor/components/handlers/TcpHandler.js
+++ b/ui/src/kapacitor/components/handlers/TcpHandler.js
@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react'
+import React from 'react'
+import PropTypes from 'prop-types'
 import HandlerInput from 'src/kapacitor/components/HandlerInput'
 
 const TcpHandler = ({selectedHandler, handleModifyHandler}) =>
diff --git a/ui/src/kapacitor/components/handlers/TelegramHandler.js b/ui/src/kapacitor/components/handlers/TelegramHandler.js
index fcc2cfe428..d46d640d77 100644
--- a/ui/src/kapacitor/components/handlers/TelegramHandler.js
+++ b/ui/src/kapacitor/components/handlers/TelegramHandler.js
@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react'
+import React from 'react'
+import PropTypes from 'prop-types'
 import HandlerInput from 'src/kapacitor/components/HandlerInput'
 import HandlerCheckbox from 'src/kapacitor/components/HandlerCheckbox'
 import HandlerEmpty from 'src/kapacitor/components/HandlerEmpty'
diff --git a/ui/src/kapacitor/components/handlers/VictoropsHandler.js b/ui/src/kapacitor/components/handlers/VictoropsHandler.js
index 9aa00bbcb9..dd90655ff2 100644
--- a/ui/src/kapacitor/components/handlers/VictoropsHandler.js
+++ b/ui/src/kapacitor/components/handlers/VictoropsHandler.js
@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react'
+import React from 'react'
+import PropTypes from 'prop-types'
 import HandlerInput from 'src/kapacitor/components/HandlerInput'
 import HandlerEmpty from 'src/kapacitor/components/HandlerEmpty'
 
diff --git a/ui/src/kapacitor/containers/KapacitorPage.js b/ui/src/kapacitor/containers/KapacitorPage.js
deleted file mode 100644
index 79fd256783..0000000000
--- a/ui/src/kapacitor/containers/KapacitorPage.js
+++ /dev/null
@@ -1,180 +0,0 @@
-import React, {Component, PropTypes} from 'react'
-import {withRouter} from 'react-router'
-
-import {
-  getKapacitor,
-  createKapacitor,
-  updateKapacitor,
-  pingKapacitor,
-} from 'shared/apis'
-import KapacitorForm from '../components/KapacitorForm'
-
-const defaultName = 'My Kapacitor'
-const kapacitorPort = '9092'
-
-class KapacitorPage extends Component {
-  constructor(props) {
-    super(props)
-    this.state = {
-      kapacitor: {
-        url: this._parseKapacitorURL(),
-        name: defaultName,
-        username: '',
-        password: '',
-      },
-      exists: false,
-    }
-  }
-
-  componentDidMount() {
-    const {source, params: {id}} = this.props
-    if (!id) {
-      return
-    }
-
-    getKapacitor(source, id).then(kapacitor => {
-      this.setState({kapacitor})
-      this.checkKapacitorConnection(kapacitor)
-    })
-  }
-
-  checkKapacitorConnection = async kapacitor => {
-    try {
-      await pingKapacitor(kapacitor)
-      this.setState({exists: true})
-    } catch (error) {
-      this.setState({exists: false})
-      this.props.addFlashMessage({
-        type: 'error',
-        text: 'Could not connect to Kapacitor. Check settings.',
-      })
-    }
-  }
-
-  handleInputChange = e => {
-    const {value, name} = e.target
-
-    this.setState(prevState => {
-      const update = {[name]: value}
-      return {kapacitor: {...prevState.kapacitor, ...update}}
-    })
-  }
-
-  handleChangeUrl = e => {
-    this.setState({kapacitor: {...this.state.kapacitor, url: e.target.value}})
-  }
-
-  handleSubmit = e => {
-    e.preventDefault()
-    const {
-      addFlashMessage,
-      source,
-      source: {kapacitors = []},
-      params,
-      router,
-    } = this.props
-    const {kapacitor} = this.state
-    kapacitor.name = kapacitor.name.trim()
-    const isNameTaken = kapacitors.some(k => k.name === kapacitor.name)
-    const isNew = !params.id
-
-    if (isNew && isNameTaken) {
-      addFlashMessage({
-        type: 'error',
-        text: `There is already a Kapacitor configuration named "${kapacitor.name}"`,
-      })
-      return
-    }
-
-    if (params.id) {
-      updateKapacitor(kapacitor)
-        .then(({data}) => {
-          this.setState({kapacitor: data})
-          this.checkKapacitorConnection(data)
-          addFlashMessage({type: 'success', text: 'Kapacitor Updated!'})
-        })
-        .catch(() => {
-          addFlashMessage({
-            type: 'error',
-            text: 'There was a problem updating the Kapacitor record',
-          })
-        })
-    } else {
-      createKapacitor(source, kapacitor)
-        .then(({data}) => {
-          // need up update kapacitor with info from server to AlertOutputs
-          this.setState({kapacitor: data})
-          this.checkKapacitorConnection(data)
-          router.push(`/sources/${source.id}/kapacitors/${data.id}/edit`)
-          addFlashMessage({
-            type: 'success',
-            text: 'Kapacitor Created! Configuring endpoints is optional.',
-          })
-        })
-        .catch(() => {
-          addFlashMessage({
-            type: 'error',
-            text: 'There was a problem creating the Kapacitor record',
-          })
-        })
-    }
-  }
-
-  handleResetToDefaults = e => {
-    e.preventDefault()
-    const defaultState = {
-      url: this._parseKapacitorURL(),
-      name: defaultName,
-      username: '',
-      password: '',
-    }
-
-    this.setState({kapacitor: {...defaultState}})
-  }
-
-  _parseKapacitorURL = () => {
-    const parser = document.createElement('a')
-    parser.href = this.props.source.url
-
-    return `${parser.protocol}//${parser.hostname}:${kapacitorPort}`
-  }
-
-  render() {
-    const {source, addFlashMessage, location, params} = this.props
-    const hash = (location && location.hash) || (params && params.hash) || ''
-    const {kapacitor, exists} = this.state
-    return (
-      <KapacitorForm
-        onSubmit={this.handleSubmit}
-        onInputChange={this.handleInputChange}
-        onChangeUrl={this.handleChangeUrl}
-        onReset={this.handleResetToDefaults}
-        kapacitor={kapacitor}
-        source={source}
-        addFlashMessage={addFlashMessage}
-        exists={exists}
-        hash={hash}
-      />
-    )
-  }
-}
-
-const {array, func, shape, string} = PropTypes
-
-KapacitorPage.propTypes = {
-  addFlashMessage: func,
-  params: shape({
-    id: string,
-  }).isRequired,
-  router: shape({
-    push: func.isRequired,
-  }).isRequired,
-  source: shape({
-    id: string.isRequired,
-    url: string.isRequired,
-    kapacitors: array,
-  }),
-  location: shape({pathname: string, hash: string}).isRequired,
-}
-
-export default withRouter(KapacitorPage)
diff --git a/ui/src/kapacitor/containers/KapacitorPage.tsx b/ui/src/kapacitor/containers/KapacitorPage.tsx
new file mode 100644
index 0000000000..eabfa17f16
--- /dev/null
+++ b/ui/src/kapacitor/containers/KapacitorPage.tsx
@@ -0,0 +1,211 @@
+import React, {PureComponent, ChangeEvent} from 'react'
+import {withRouter} from 'react-router'
+
+import {Source} from 'src/types'
+
+import {
+  getKapacitor,
+  createKapacitor,
+  updateKapacitor,
+  pingKapacitor,
+} from 'src/shared/apis'
+
+import KapacitorForm from '../components/KapacitorForm'
+
+export const defaultName = 'My Kapacitor'
+export const kapacitorPort = '9092'
+
+type FlashMessage = {type: string; text: string}
+
+interface Kapacitor {
+  url: string
+  name: string
+  username: string
+  password: string
+  active: boolean
+  links: {
+    self: string
+  }
+}
+
+interface Props {
+  source: Source
+  addFlashMessage: (message: FlashMessage) => void
+  kapacitor: Kapacitor
+  router: {push: (url: string) => void}
+  location: {pathname: string; hash: string}
+  params: {id: string; hash: string}
+}
+
+interface State {
+  kapacitor: Kapacitor
+  exists: boolean
+}
+
+export class KapacitorPage extends PureComponent<Props, State> {
+  constructor(props) {
+    super(props)
+    this.state = {
+      kapacitor: {
+        url: this.parseKapacitorURL(),
+        name: defaultName,
+        username: '',
+        password: '',
+        active: false,
+        links: {
+          self: '',
+        },
+      },
+      exists: false,
+    }
+
+    this.handleSubmit = this.handleSubmit.bind(this)
+  }
+
+  async componentDidMount() {
+    const {source, params: {id}, addFlashMessage} = this.props
+    if (!id) {
+      return
+    }
+
+    try {
+      const kapacitor = await getKapacitor(source, id)
+      this.setState({kapacitor})
+      await this.checkKapacitorConnection(kapacitor)
+    } catch (err) {
+      console.error('Could not get kapacitor: ', err)
+      addFlashMessage({
+        type: 'error',
+        text: 'Could not connect to Kapacitor',
+      })
+    }
+  }
+
+  handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
+    const {value, name} = e.target
+
+    this.setState(prevState => {
+      const update = {[name]: value}
+      return {kapacitor: {...prevState.kapacitor, ...update}}
+    })
+  }
+
+  handleChangeUrl = e => {
+    this.setState({kapacitor: {...this.state.kapacitor, url: e.target.value}})
+  }
+
+  handleSubmit = async e => {
+    e.preventDefault()
+    const {
+      addFlashMessage,
+      source,
+      source: {kapacitors = []},
+      params,
+      router,
+    } = this.props
+
+    const {kapacitor} = this.state
+    kapacitor.name = kapacitor.name.trim()
+    const isNameTaken = kapacitors.some(k => k.name === kapacitor.name)
+    const isNew = !params.id
+
+    if (isNew && isNameTaken) {
+      addFlashMessage({
+        type: 'error',
+        text: `There is already a Kapacitor configuration named "${kapacitor.name}"`,
+      })
+      return
+    }
+
+    if (params.id) {
+      try {
+        const {data} = await updateKapacitor(kapacitor)
+        this.setState({kapacitor: data})
+        this.checkKapacitorConnection(data)
+        addFlashMessage({type: 'success', text: 'Kapacitor Updated!'})
+      } catch (error) {
+        console.error(error)
+        addFlashMessage({
+          type: 'error',
+          text: 'There was a problem updating the Kapacitor record',
+        })
+      }
+    } else {
+      try {
+        const {data} = await createKapacitor(source, kapacitor)
+        // need up update kapacitor with info from server to AlertOutputs
+        this.setState({kapacitor: data})
+        this.checkKapacitorConnection(data)
+        router.push(`/sources/${source.id}/kapacitors/${data.id}/edit`)
+        addFlashMessage({
+          type: 'success',
+          text: 'Kapacitor Created! Configuring endpoints is optional.',
+        })
+      } catch (error) {
+        console.error(error)
+        addFlashMessage({
+          type: 'error',
+          text: 'There was a problem creating the Kapacitor record',
+        })
+      }
+    }
+  }
+
+  handleResetToDefaults = e => {
+    e.preventDefault()
+    const defaultState = {
+      url: this.parseKapacitorURL(),
+      name: defaultName,
+      username: '',
+      password: '',
+      active: false,
+      links: {
+        self: '',
+      },
+    }
+
+    this.setState({kapacitor: {...defaultState}})
+  }
+
+  private checkKapacitorConnection = async (kapacitor: Kapacitor) => {
+    try {
+      await pingKapacitor(kapacitor)
+      this.setState({exists: true})
+    } catch (error) {
+      this.setState({exists: false})
+      this.props.addFlashMessage({
+        type: 'error',
+        text: 'Could not connect to Kapacitor. Check settings.',
+      })
+    }
+  }
+
+  private parseKapacitorURL = () => {
+    const parser = document.createElement('a')
+    parser.href = this.props.source.url
+
+    return `${parser.protocol}//${parser.hostname}:${kapacitorPort}`
+  }
+
+  render() {
+    const {source, addFlashMessage, location, params} = this.props
+    const hash = (location && location.hash) || (params && params.hash) || ''
+    const {kapacitor, exists} = this.state
+
+    return (
+      <KapacitorForm
+        hash={hash}
+        source={source}
+        exists={exists}
+        kapacitor={kapacitor}
+        onSubmit={this.handleSubmit}
+        addFlashMessage={addFlashMessage}
+        onChangeUrl={this.handleChangeUrl}
+        onReset={this.handleResetToDefaults}
+        onInputChange={this.handleInputChange}
+      />
+    )
+  }
+}
+
+export default withRouter(KapacitorPage)
diff --git a/ui/src/kapacitor/containers/KapacitorRulePage.js b/ui/src/kapacitor/containers/KapacitorRulePage.js
index 5a0abcd562..daf9728505 100644
--- a/ui/src/kapacitor/containers/KapacitorRulePage.js
+++ b/ui/src/kapacitor/containers/KapacitorRulePage.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 * as kapacitorRuleActionCreators from 'src/kapacitor/actions/view'
diff --git a/ui/src/kapacitor/containers/KapacitorRulesPage.js b/ui/src/kapacitor/containers/KapacitorRulesPage.js
index 68931be1bd..65fa946fad 100644
--- a/ui/src/kapacitor/containers/KapacitorRulesPage.js
+++ b/ui/src/kapacitor/containers/KapacitorRulesPage.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 {getActiveKapacitor} from 'shared/apis'
diff --git a/ui/src/kapacitor/containers/KapacitorTasksPage.js b/ui/src/kapacitor/containers/KapacitorTasksPage.js
index dc8d6c348e..5ae7aed4c2 100644
--- a/ui/src/kapacitor/containers/KapacitorTasksPage.js
+++ b/ui/src/kapacitor/containers/KapacitorTasksPage.js
@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react'
+import React from 'react'
+import PropTypes from 'prop-types'
 
 export const KapacitorTasksPage = React.createClass({
   propTypes: {
diff --git a/ui/src/kapacitor/containers/TickscriptPage.js b/ui/src/kapacitor/containers/TickscriptPage.js
index 2a4f821d3a..92bad77cca 100644
--- a/ui/src/kapacitor/containers/TickscriptPage.js
+++ b/ui/src/kapacitor/containers/TickscriptPage.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 uuid from 'uuid'
diff --git a/ui/src/shared/components/Annotation.js b/ui/src/shared/components/Annotation.js
index bb972f613b..56fd17e65e 100644
--- a/ui/src/shared/components/Annotation.js
+++ b/ui/src/shared/components/Annotation.js
@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react'
+import React from 'react'
+import PropTypes from 'prop-types'
 
 import AnnotationPoint from 'shared/components/AnnotationPoint'
 import AnnotationSpan from 'shared/components/AnnotationSpan'
diff --git a/ui/src/shared/components/AnnotationInput.js b/ui/src/shared/components/AnnotationInput.js
index 1c559bf0c7..64ec098dc7 100644
--- a/ui/src/shared/components/AnnotationInput.js
+++ b/ui/src/shared/components/AnnotationInput.js
@@ -1,4 +1,5 @@
-import React, {Component, PropTypes} from 'react'
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
 import onClickOutside from 'react-onclickoutside'
 
 class AnnotationInput extends Component {
diff --git a/ui/src/shared/components/AnnotationPoint.js b/ui/src/shared/components/AnnotationPoint.js
index 8407387153..84a7fdbe35 100644
--- a/ui/src/shared/components/AnnotationPoint.js
+++ b/ui/src/shared/components/AnnotationPoint.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 {
diff --git a/ui/src/shared/components/AnnotationSpan.js b/ui/src/shared/components/AnnotationSpan.js
index 1bf2001670..84a8e89c35 100644
--- a/ui/src/shared/components/AnnotationSpan.js
+++ b/ui/src/shared/components/AnnotationSpan.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 {
diff --git a/ui/src/shared/components/AnnotationTooltip.js b/ui/src/shared/components/AnnotationTooltip.js
index b0d5b8f833..08a77f0341 100644
--- a/ui/src/shared/components/AnnotationTooltip.js
+++ b/ui/src/shared/components/AnnotationTooltip.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 moment from 'moment'
 import classnames from 'classnames'
diff --git a/ui/src/shared/components/AnnotationWindow.js b/ui/src/shared/components/AnnotationWindow.js
index 909745cf46..5837cae2db 100644
--- a/ui/src/shared/components/AnnotationWindow.js
+++ b/ui/src/shared/components/AnnotationWindow.js
@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react'
+import React from 'react'
+import PropTypes from 'prop-types'
 
 import {
   DYGRAPH_CONTAINER_H_MARGIN,
diff --git a/ui/src/shared/components/Annotations.js b/ui/src/shared/components/Annotations.js
index d0c0a9ff0a..558f7697f2 100644
--- a/ui/src/shared/components/Annotations.js
+++ b/ui/src/shared/components/Annotations.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'
 
diff --git a/ui/src/shared/components/AutoRefresh.js b/ui/src/shared/components/AutoRefresh.js
index 5cf7e286a0..43c49f63e7 100644
--- a/ui/src/shared/components/AutoRefresh.js
+++ b/ui/src/shared/components/AutoRefresh.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 {fetchTimeSeriesAsync} from 'shared/actions/timeSeries'
diff --git a/ui/src/shared/components/AutoRefreshDropdown.js b/ui/src/shared/components/AutoRefreshDropdown.js
index 9310aeb678..d31430e006 100644
--- a/ui/src/shared/components/AutoRefreshDropdown.js
+++ b/ui/src/shared/components/AutoRefreshDropdown.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 OnClickOutside from 'shared/components/OnClickOutside'
 
diff --git a/ui/src/shared/components/ClickOutsideInput.js b/ui/src/shared/components/ClickOutsideInput.js
index 8d4155a76a..47b573c59c 100644
--- a/ui/src/shared/components/ClickOutsideInput.js
+++ b/ui/src/shared/components/ClickOutsideInput.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'
 
diff --git a/ui/src/shared/components/ColorDropdown.js b/ui/src/shared/components/ColorDropdown.js
index 8d8275e603..515a492bde 100644
--- a/ui/src/shared/components/ColorDropdown.js
+++ b/ui/src/shared/components/ColorDropdown.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 OnClickOutside from 'shared/components/OnClickOutside'
diff --git a/ui/src/shared/components/CustomTimeIndicator.js b/ui/src/shared/components/CustomTimeIndicator.js
index 16fd558364..a74e619407 100644
--- a/ui/src/shared/components/CustomTimeIndicator.js
+++ b/ui/src/shared/components/CustomTimeIndicator.js
@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react'
+import React from 'react'
+import PropTypes from 'prop-types'
 import _ from 'lodash'
 
 const CustomTimeIndicator = ({queries}) => {
diff --git a/ui/src/shared/components/CustomTimeRange.js b/ui/src/shared/components/CustomTimeRange.js
index d497217286..c0486ddda2 100644
--- a/ui/src/shared/components/CustomTimeRange.js
+++ b/ui/src/shared/components/CustomTimeRange.js
@@ -1,4 +1,5 @@
-import React, {PropTypes, Component} from 'react'
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
 import rome from 'rome'
 import moment from 'moment'
 
diff --git a/ui/src/shared/components/CustomTimeRangeDropdown.js b/ui/src/shared/components/CustomTimeRangeDropdown.js
index e7e998776d..cb35a4e039 100644
--- a/ui/src/shared/components/CustomTimeRangeDropdown.js
+++ b/ui/src/shared/components/CustomTimeRangeDropdown.js
@@ -1,4 +1,5 @@
-import React, {PropTypes, Component} from 'react'
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
 import moment from 'moment'
 import classnames from 'classnames'
 import OnClickOutside from 'react-onclickoutside'
diff --git a/ui/src/shared/components/CustomTimeRangeOverlay.js b/ui/src/shared/components/CustomTimeRangeOverlay.js
index 04e941c702..b7c395a9ce 100644
--- a/ui/src/shared/components/CustomTimeRangeOverlay.js
+++ b/ui/src/shared/components/CustomTimeRangeOverlay.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 CustomTimeRange from 'shared/components/CustomTimeRange'
diff --git a/ui/src/shared/components/DeleteConfirmButtons.js b/ui/src/shared/components/DeleteConfirmButtons.js
index 1f85e29917..11f80f8d17 100644
--- a/ui/src/shared/components/DeleteConfirmButtons.js
+++ b/ui/src/shared/components/DeleteConfirmButtons.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 OnClickOutside from 'shared/components/OnClickOutside'
diff --git a/ui/src/shared/components/Dygraph.js b/ui/src/shared/components/Dygraph.js
index 5d58c3fde1..eff78785ba 100644
--- a/ui/src/shared/components/Dygraph.js
+++ b/ui/src/shared/components/Dygraph.js
@@ -1,5 +1,6 @@
 /* eslint-disable no-magic-numbers */
-import React, {Component, PropTypes} from 'react'
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
 import {connect} from 'react-redux'
 import shallowCompare from 'react-addons-shallow-compare'
 import _ from 'lodash'
diff --git a/ui/src/shared/components/DygraphLegend.js b/ui/src/shared/components/DygraphLegend.js
index 433a6b0fe1..d490747cdb 100644
--- a/ui/src/shared/components/DygraphLegend.js
+++ b/ui/src/shared/components/DygraphLegend.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'
 import uuid from 'uuid'
diff --git a/ui/src/shared/components/EmptyQuery.js b/ui/src/shared/components/EmptyQuery.js
index e42cca09d9..9511c6480e 100644
--- a/ui/src/shared/components/EmptyQuery.js
+++ b/ui/src/shared/components/EmptyQuery.js
@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react'
+import React from 'react'
+import PropTypes from 'prop-types'
 
 const EmptyQueryState = ({onAddQuery}) =>
   <div className="query-maker--empty">
diff --git a/ui/src/shared/components/FieldList.js b/ui/src/shared/components/FieldList.js
index dd2db74860..6aa4ffcab3 100644
--- a/ui/src/shared/components/FieldList.js
+++ b/ui/src/shared/components/FieldList.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 QueryOptions from 'shared/components/QueryOptions'
diff --git a/ui/src/shared/components/FillQuery.js b/ui/src/shared/components/FillQuery.js
index b126752486..7b42a2c007 100644
--- a/ui/src/shared/components/FillQuery.js
+++ b/ui/src/shared/components/FillQuery.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'
 
 import {NULL_STRING, NUMBER} from 'shared/constants/queryFillOptions'
diff --git a/ui/src/shared/components/FunctionSelector.js b/ui/src/shared/components/FunctionSelector.js
index 9a977784df..0ee308baa4 100644
--- a/ui/src/shared/components/FunctionSelector.js
+++ b/ui/src/shared/components/FunctionSelector.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 _ from 'lodash'
 import {INFLUXQL_FUNCTIONS} from 'src/data_explorer/constants'
diff --git a/ui/src/shared/components/Gauge.js b/ui/src/shared/components/Gauge.js
index aa18fd8eda..704fa37fb0 100644
--- a/ui/src/shared/components/Gauge.js
+++ b/ui/src/shared/components/Gauge.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 {GAUGE_SPECS} from 'shared/constants/gaugeSpecs'
diff --git a/ui/src/shared/components/GaugeChart.js b/ui/src/shared/components/GaugeChart.js
index 9362af8747..d280df2072 100644
--- a/ui/src/shared/components/GaugeChart.js
+++ b/ui/src/shared/components/GaugeChart.js
@@ -1,4 +1,5 @@
-import React, {PropTypes, PureComponent} from 'react'
+import React, {PureComponent} from 'react'
+import PropTypes from 'prop-types'
 import lastValues from 'shared/parsing/lastValues'
 import Gauge from 'shared/components/Gauge'
 
diff --git a/ui/src/shared/components/InfiniteScroll.js b/ui/src/shared/components/InfiniteScroll.js
index 9854ef1afa..1be5787aca 100644
--- a/ui/src/shared/components/InfiniteScroll.js
+++ b/ui/src/shared/components/InfiniteScroll.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 {Scrollbars} from 'react-custom-scrollbars'
 import _ from 'lodash'
diff --git a/ui/src/shared/components/InputClickToEdit.js b/ui/src/shared/components/InputClickToEdit.js
new file mode 100644
index 0000000000..6d6daa1699
--- /dev/null
+++ b/ui/src/shared/components/InputClickToEdit.js
@@ -0,0 +1,108 @@
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
+
+class InputClickToEdit extends Component {
+  constructor(props) {
+    super(props)
+
+    this.state = {
+      isEditing: null,
+      value: this.props.value,
+    }
+  }
+
+  handleCancel = () => {
+    this.setState({
+      isEditing: false,
+      value: this.props.value,
+    })
+  }
+
+  handleInputClick = () => {
+    this.setState({isEditing: true})
+  }
+
+  handleInputBlur = e => {
+    const {onUpdate, value} = this.props
+
+    if (value !== e.target.value) {
+      onUpdate(e.target.value)
+    }
+
+    this.setState({isEditing: false, value: e.target.value})
+  }
+
+  handleKeyDown = e => {
+    if (e.key === 'Enter') {
+      this.handleInputBlur(e)
+    }
+    if (e.key === 'Escape') {
+      this.handleCancel()
+    }
+  }
+
+  handleFocus = e => {
+    e.target.select()
+  }
+
+  render() {
+    const {isEditing, value} = this.state
+    const {
+      wrapperClass: wrapper,
+      disabled,
+      tabIndex,
+      placeholder,
+      appearAsNormalInput,
+    } = this.props
+
+    const wrapperClass = `${wrapper}${appearAsNormalInput
+      ? ' input-cte__normal'
+      : ''}`
+    const defaultStyle = value ? 'input-cte' : 'input-cte__empty'
+
+    return disabled
+      ? <div className={wrapperClass}>
+          <div className="input-cte__disabled">
+            {value}
+          </div>
+        </div>
+      : <div className={wrapperClass}>
+          {isEditing
+            ? <input
+                type="text"
+                className="form-control input-sm provider--input"
+                defaultValue={value}
+                onBlur={this.handleInputBlur}
+                onKeyDown={this.handleKeyDown}
+                autoFocus={true}
+                onFocus={this.handleFocus}
+                ref={r => (this.inputRef = r)}
+                tabIndex={tabIndex}
+                spellCheck={false}
+              />
+            : <div
+                className={defaultStyle}
+                onClick={this.handleInputClick}
+                onFocus={this.handleInputClick}
+                tabIndex={tabIndex}
+              >
+                {value || placeholder}
+                {appearAsNormalInput || <span className="icon pencil" />}
+              </div>}
+        </div>
+  }
+}
+
+const {func, bool, number, string} = PropTypes
+
+InputClickToEdit.propTypes = {
+  wrapperClass: string.isRequired,
+  value: string,
+  onUpdate: func.isRequired,
+  disabled: bool,
+  tabIndex: number,
+  placeholder: string,
+  appearAsNormalInput: bool,
+}
+
+export default InputClickToEdit
diff --git a/ui/src/shared/components/Layout.js b/ui/src/shared/components/Layout.js
index 96548e422e..71b9e88c77 100644
--- a/ui/src/shared/components/Layout.js
+++ b/ui/src/shared/components/Layout.js
@@ -1,4 +1,5 @@
-import React, {Component, PropTypes} from 'react'
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
 import WidgetCell from 'shared/components/WidgetCell'
 import LayoutCell from 'shared/components/LayoutCell'
 import RefreshingGraph from 'shared/components/RefreshingGraph'
diff --git a/ui/src/shared/components/LayoutCell.js b/ui/src/shared/components/LayoutCell.js
index 91360f6c43..e0fd20caaa 100644
--- a/ui/src/shared/components/LayoutCell.js
+++ b/ui/src/shared/components/LayoutCell.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 Authorized, {EDITOR_ROLE} from 'src/auth/Authorized'
diff --git a/ui/src/shared/components/LayoutCellHeader.js b/ui/src/shared/components/LayoutCellHeader.js
index cf7aa147dc..64878f1ec3 100644
--- a/ui/src/shared/components/LayoutCellHeader.js
+++ b/ui/src/shared/components/LayoutCellHeader.js
@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react'
+import React from 'react'
+import PropTypes from 'prop-types'
 import {NEW_DEFAULT_DASHBOARD_CELL} from 'src/dashboards/constants/index'
 
 const LayoutCellHeader = ({isEditable, cellName}) => {
diff --git a/ui/src/shared/components/LayoutCellMenu.js b/ui/src/shared/components/LayoutCellMenu.js
index 267d6217aa..e8080b66fc 100644
--- a/ui/src/shared/components/LayoutCellMenu.js
+++ b/ui/src/shared/components/LayoutCellMenu.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'
 
diff --git a/ui/src/shared/components/LayoutRenderer.js b/ui/src/shared/components/LayoutRenderer.js
index 0b8f975753..f853071e41 100644
--- a/ui/src/shared/components/LayoutRenderer.js
+++ b/ui/src/shared/components/LayoutRenderer.js
@@ -1,8 +1,7 @@
-import React, {Component, PropTypes} from 'react'
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
 import ReactGridLayout, {WidthProvider} from 'react-grid-layout'
-import Resizeable from 'react-component-resizable'
-
-import _ from 'lodash'
+import {ResizableBox} from 'react-resizable'
 
 import Authorized, {EDITOR_ROLE} from 'src/auth/Authorized'
 
@@ -55,12 +54,8 @@ class LayoutRenderer extends Component {
       : DASHBOARD_LAYOUT_ROW_HEIGHT
   }
 
-  handleCellResize = (__, oldCoords, resizeCoords) => {
-    if (_.isEqual(oldCoords, resizeCoords)) {
-      return
-    }
-
-    this.setState({resizeCoords})
+  handleCellResize = () => {
+    this.resizeCoords = this.setState({resizeCoords: new Date()})
   }
 
   render() {
@@ -86,7 +81,11 @@ class LayoutRenderer extends Component {
     const isDashboard = !!this.props.onPositionChange
 
     return (
-      <Resizeable onResize={this.handleCellResize}>
+      <ResizableBox
+        height={Infinity}
+        width={Infinity}
+        onResize={this.handleCellResize}
+      >
         <Authorized
           requiredRole={EDITOR_ROLE}
           propsOverride={{
@@ -141,7 +140,7 @@ class LayoutRenderer extends Component {
             )}
           </GridLayout>
         </Authorized>
-      </Resizeable>
+      </ResizableBox>
     )
   }
 }
diff --git a/ui/src/shared/components/LineGraph.js b/ui/src/shared/components/LineGraph.js
index 4cc8b00789..7c73e8ae76 100644
--- a/ui/src/shared/components/LineGraph.js
+++ b/ui/src/shared/components/LineGraph.js
@@ -1,4 +1,5 @@
-import React, {PropTypes, Component} from 'react'
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
 import Dygraph from 'shared/components/Dygraph'
 import shallowCompare from 'react-addons-shallow-compare'
 
diff --git a/ui/src/shared/components/LoadingDots.js b/ui/src/shared/components/LoadingDots.js
index 51a5543c6b..e5f1c8cda8 100644
--- a/ui/src/shared/components/LoadingDots.js
+++ b/ui/src/shared/components/LoadingDots.js
@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react'
+import React from 'react'
+import PropTypes from 'prop-types'
 
 const LoadingDots = ({className}) =>
   <div className={`loading-dots ${className}`}>
diff --git a/ui/src/shared/components/MenuTooltipButton.js b/ui/src/shared/components/MenuTooltipButton.js
index 13b691167b..58b8b9fc89 100644
--- a/ui/src/shared/components/MenuTooltipButton.js
+++ b/ui/src/shared/components/MenuTooltipButton.js
@@ -1,4 +1,5 @@
-import React, {Component, PropTypes} from 'react'
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
 import OnClickOutside from 'react-onclickoutside'
 import classnames from 'classnames'
 
diff --git a/ui/src/shared/components/MiniGraph.js b/ui/src/shared/components/MiniGraph.js
index a79ccb6abd..79ce1f23fd 100644
--- a/ui/src/shared/components/MiniGraph.js
+++ b/ui/src/shared/components/MiniGraph.js
@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react'
+import React from 'react'
+import PropTypes from 'prop-types'
 import Dygraph from './Dygraph'
 import shallowCompare from 'react-addons-shallow-compare'
 
diff --git a/ui/src/shared/components/MultiSelectDBDropdown.js b/ui/src/shared/components/MultiSelectDBDropdown.js
index 050789a33e..4ba5ed535b 100644
--- a/ui/src/shared/components/MultiSelectDBDropdown.js
+++ b/ui/src/shared/components/MultiSelectDBDropdown.js
@@ -1,4 +1,5 @@
-import React, {PropTypes, Component} from 'react'
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
 
 import {showDatabases, showRetentionPolicies} from 'shared/apis/metaQuery'
 import showDatabasesParser from 'shared/parsing/showDatabases'
diff --git a/ui/src/shared/components/MultiSelectDropdown.js b/ui/src/shared/components/MultiSelectDropdown.js
index 5abbd159b3..dd1aa64bfd 100644
--- a/ui/src/shared/components/MultiSelectDropdown.js
+++ b/ui/src/shared/components/MultiSelectDropdown.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 _ from 'lodash'
diff --git a/ui/src/shared/components/NewAnnotation.js b/ui/src/shared/components/NewAnnotation.js
index a53a5343c2..c1c591fac2 100644
--- a/ui/src/shared/components/NewAnnotation.js
+++ b/ui/src/shared/components/NewAnnotation.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 {connect} from 'react-redux'
 import uuid from 'uuid'
diff --git a/ui/src/shared/components/NoKapacitorError.js b/ui/src/shared/components/NoKapacitorError.js
index 05cf2af522..1712f0286a 100644
--- a/ui/src/shared/components/NoKapacitorError.js
+++ b/ui/src/shared/components/NoKapacitorError.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 Authorized, {EDITOR_ROLE} from 'src/auth/Authorized'
diff --git a/ui/src/shared/components/Notifications.js b/ui/src/shared/components/Notifications.js
index d45d840c88..43e4ab2231 100644
--- a/ui/src/shared/components/Notifications.js
+++ b/ui/src/shared/components/Notifications.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 {withRouter} from 'react-router'
 import {connect} from 'react-redux'
diff --git a/ui/src/shared/components/OptIn.js b/ui/src/shared/components/OptIn.js
index 541cf9be80..265c081351 100644
--- a/ui/src/shared/components/OptIn.js
+++ b/ui/src/shared/components/OptIn.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'
diff --git a/ui/src/shared/components/OverlayTechnologies.js b/ui/src/shared/components/OverlayTechnologies.js
index 8f3e6089bc..96d0651006 100644
--- a/ui/src/shared/components/OverlayTechnologies.js
+++ b/ui/src/shared/components/OverlayTechnologies.js
@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react'
+import React from 'react'
+import PropTypes from 'prop-types'
 
 import {OVERLAY_TECHNOLOGY} from 'shared/constants/classNames'
 
diff --git a/ui/src/shared/components/PanelBody.js b/ui/src/shared/components/PanelBody.js
index caa0ed44ec..307ebafdac 100644
--- a/ui/src/shared/components/PanelBody.js
+++ b/ui/src/shared/components/PanelBody.js
@@ -1,6 +1,7 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 
-const {node} = React.PropTypes
+const {node} = PropTypes
 const PanelBody = React.createClass({
   propTypes: {
     children: node.isRequired,
diff --git a/ui/src/shared/components/PanelHeading.js b/ui/src/shared/components/PanelHeading.js
index c46aa2e49d..e5200e39dc 100644
--- a/ui/src/shared/components/PanelHeading.js
+++ b/ui/src/shared/components/PanelHeading.js
@@ -1,6 +1,7 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 
-const {node} = React.PropTypes
+const {node} = PropTypes
 const PanelHeading = React.createClass({
   propTypes: {
     children: node.isRequired,
diff --git a/ui/src/shared/components/QueryOptions.js b/ui/src/shared/components/QueryOptions.js
index d02ee02408..a922ddad31 100644
--- a/ui/src/shared/components/QueryOptions.js
+++ b/ui/src/shared/components/QueryOptions.js
@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react'
+import React from 'react'
+import PropTypes from 'prop-types'
 import GroupByTimeDropdown from 'src/data_explorer/components/GroupByTimeDropdown'
 import TimeShiftDropdown from 'src/shared/components/TimeShiftDropdown'
 import FillQuery from 'shared/components/FillQuery'
diff --git a/ui/src/shared/components/QueryStatus.js b/ui/src/shared/components/QueryStatus.js
index 9fa329a38c..1eaadb93b9 100644
--- a/ui/src/shared/components/QueryStatus.js
+++ b/ui/src/shared/components/QueryStatus.js
@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react'
+import React from 'react'
+import PropTypes from 'prop-types'
 import LoadingDots from 'shared/components/LoadingDots'
 import classnames from 'classnames'
 
diff --git a/ui/src/shared/components/QueryTabList.js b/ui/src/shared/components/QueryTabList.js
index 49d7225764..b7078ba6bf 100644
--- a/ui/src/shared/components/QueryTabList.js
+++ b/ui/src/shared/components/QueryTabList.js
@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react'
+import React from 'react'
+import PropTypes from 'prop-types'
 import QueryMakerTab from 'src/data_explorer/components/QueryMakerTab'
 import buildInfluxQLQuery from 'utils/influxql'
 
diff --git a/ui/src/shared/components/QuestionMarkTooltip.js b/ui/src/shared/components/QuestionMarkTooltip.js
index bad9352ab9..5c14253783 100644
--- a/ui/src/shared/components/QuestionMarkTooltip.js
+++ b/ui/src/shared/components/QuestionMarkTooltip.js
@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react'
+import React from 'react'
+import PropTypes from 'prop-types'
 import ReactTooltip from 'react-tooltip'
 
 const QuestionMarkTooltip = ({tipID, tipContent}) =>
diff --git a/ui/src/shared/components/RefreshingGraph.js b/ui/src/shared/components/RefreshingGraph.js
index 588efdb7d4..7a1544c404 100644
--- a/ui/src/shared/components/RefreshingGraph.js
+++ b/ui/src/shared/components/RefreshingGraph.js
@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react'
+import React from 'react'
+import PropTypes from 'prop-types'
 
 import {emptyGraphCopy} from 'src/shared/copy/cell'
 
diff --git a/ui/src/shared/components/ResizeContainer.js b/ui/src/shared/components/ResizeContainer.js
index 95076f2013..f4ebfc0673 100644
--- a/ui/src/shared/components/ResizeContainer.js
+++ b/ui/src/shared/components/ResizeContainer.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 ResizeHandle from 'shared/components/ResizeHandle'
diff --git a/ui/src/shared/components/ResizeHandle.js b/ui/src/shared/components/ResizeHandle.js
index 86585f17b6..cb57728942 100644
--- a/ui/src/shared/components/ResizeHandle.js
+++ b/ui/src/shared/components/ResizeHandle.js
@@ -1,7 +1,8 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 import classnames from 'classnames'
 
-const {func, bool, string} = React.PropTypes
+const {func, bool, string} = PropTypes
 const ResizeHandle = React.createClass({
   propTypes: {
     onHandleStartDrag: func.isRequired,
diff --git a/ui/src/shared/components/RoleIndicator.js b/ui/src/shared/components/RoleIndicator.js
index 5854a0ba05..ce99e3bc55 100644
--- a/ui/src/shared/components/RoleIndicator.js
+++ b/ui/src/shared/components/RoleIndicator.js
@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react'
+import React from 'react'
+import PropTypes from 'prop-types'
 import uuid from 'uuid'
 import {connect} from 'react-redux'
 
diff --git a/ui/src/shared/components/SchemaExplorer.js b/ui/src/shared/components/SchemaExplorer.js
index e3326b2310..d48369a736 100644
--- a/ui/src/shared/components/SchemaExplorer.js
+++ b/ui/src/shared/components/SchemaExplorer.js
@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react'
+import React from 'react'
+import PropTypes from 'prop-types'
 
 import DatabaseList from 'src/shared/components/DatabaseList'
 import MeasurementList from 'src/shared/components/MeasurementList'
diff --git a/ui/src/shared/components/SingleStat.js b/ui/src/shared/components/SingleStat.js
index 9161466f86..a560ddf462 100644
--- a/ui/src/shared/components/SingleStat.js
+++ b/ui/src/shared/components/SingleStat.js
@@ -1,4 +1,5 @@
-import React, {PropTypes, PureComponent} from 'react'
+import React, {PureComponent} from 'react'
+import PropTypes from 'prop-types'
 import classnames from 'classnames'
 import lastValues from 'shared/parsing/lastValues'
 
diff --git a/ui/src/shared/components/SlideToggle.js b/ui/src/shared/components/SlideToggle.js
index 3597e9ab14..7e478b1d81 100644
--- a/ui/src/shared/components/SlideToggle.js
+++ b/ui/src/shared/components/SlideToggle.js
@@ -1,4 +1,5 @@
-import React, {Component, PropTypes} from 'react'
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
 
 class SlideToggle extends Component {
   constructor(props) {
diff --git a/ui/src/shared/components/SourceIndicator.js b/ui/src/shared/components/SourceIndicator.js
index e6d1892193..b7e7200800 100644
--- a/ui/src/shared/components/SourceIndicator.js
+++ b/ui/src/shared/components/SourceIndicator.js
@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react'
+import React from 'react'
+import PropTypes from 'prop-types'
 import _ from 'lodash'
 import uuid from 'uuid'
 
diff --git a/ui/src/shared/components/SplashPage.js b/ui/src/shared/components/SplashPage.js
index 237dc2d1be..955cb253ce 100644
--- a/ui/src/shared/components/SplashPage.js
+++ b/ui/src/shared/components/SplashPage.js
@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react'
+import React from 'react'
+import PropTypes from 'prop-types'
 
 const SplashPage = ({children}) =>
   <div className="auth-page">
diff --git a/ui/src/shared/components/StaticLegend.js b/ui/src/shared/components/StaticLegend.js
index 5b49cc71e2..a268fb42cd 100644
--- a/ui/src/shared/components/StaticLegend.js
+++ b/ui/src/shared/components/StaticLegend.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 uuid from 'uuid'
 import {removeMeasurement} from 'shared/graphs/helpers'
diff --git a/ui/src/shared/components/TableGraph.js b/ui/src/shared/components/TableGraph.js
index 5d90cbc20c..0d9124f276 100644
--- a/ui/src/shared/components/TableGraph.js
+++ b/ui/src/shared/components/TableGraph.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'
 import {timeSeriesToTable} from 'src/utils/timeSeriesToDygraph'
diff --git a/ui/src/shared/components/Tabs.js b/ui/src/shared/components/Tabs.js
deleted file mode 100644
index afb84ff2d6..0000000000
--- a/ui/src/shared/components/Tabs.js
+++ /dev/null
@@ -1,176 +0,0 @@
-import React, {PropTypes} from 'react'
-import classnames from 'classnames'
-
-const {node, func, bool, number, string} = PropTypes
-export const Tab = React.createClass({
-  propTypes: {
-    children: node.isRequired,
-    onClick: func,
-    isDisabled: bool,
-    isActive: bool,
-    isKapacitorTab: bool,
-    isConfigured: bool,
-  },
-
-  render() {
-    if (this.props.isKapacitorTab) {
-      return (
-        <li
-          className={classnames({active: this.props.isActive})}
-          onClick={this.props.isDisabled ? null : this.props.onClick}
-        >
-          {this.props.children}
-        </li>
-      )
-    }
-    return (
-      <div
-        className={classnames('btn tab', {
-          active: this.props.isActive,
-          configured: this.props.isConfigured,
-        })}
-        onClick={this.props.isDisabled ? null : this.props.onClick}
-      >
-        {this.props.children}
-      </div>
-    )
-  },
-})
-
-export const TabList = React.createClass({
-  propTypes: {
-    children: node.isRequired,
-    activeIndex: number,
-    onActivate: func,
-    isKapacitorTabs: string,
-    customClass: string,
-  },
-
-  getDefaultProps() {
-    return {
-      isKapacitorTabs: '',
-    }
-  },
-
-  render() {
-    const children = React.Children.map(this.props.children, (child, index) => {
-      return React.cloneElement(child, {
-        isActive: index === this.props.activeIndex,
-        onClick: () => this.props.onActivate(index),
-      })
-    })
-
-    if (this.props.isKapacitorTabs === 'true') {
-      return (
-        <div className="rule-section--row rule-section--row-first rule-section--row-last">
-          <p>Choose One:</p>
-          <div className="nav nav-tablist nav-tablist-sm nav-tablist-malachite">
-            {children}
-          </div>
-        </div>
-      )
-    }
-
-    if (this.props.customClass) {
-      return (
-        <div className={this.props.customClass}>
-          <div className="btn-group btn-group-lg tab-group">
-            {children}
-          </div>
-        </div>
-      )
-    }
-
-    return (
-      <div className="btn-group btn-group-lg tab-group">
-        {children}
-      </div>
-    )
-  },
-})
-
-export const TabPanels = React.createClass({
-  propTypes: {
-    children: node.isRequired,
-    activeIndex: number,
-    customClass: string,
-  },
-
-  // if only 1 child, children array index lookup will fail
-  render() {
-    return (
-      <div className={this.props.customClass ? this.props.customClass : null}>
-        {this.props.children[this.props.activeIndex]}
-      </div>
-    )
-  },
-})
-
-export const TabPanel = React.createClass({
-  propTypes: {
-    children: node.isRequired,
-  },
-
-  render() {
-    return (
-      <div>
-        {this.props.children}
-      </div>
-    )
-  },
-})
-
-export const Tabs = React.createClass({
-  propTypes: {
-    children: node.isRequired,
-    onSelect: func,
-    tabContentsClass: string,
-    tabsClass: string,
-    initialIndex: number,
-  },
-
-  getDefaultProps() {
-    return {
-      onSelect() {},
-      tabContentsClass: '',
-    }
-  },
-
-  getInitialState() {
-    // initialIndex allows the user to enable a Tab and TabPanel
-    // other than 0 on initial render.
-    return {
-      activeIndex: this.props.initialIndex || 0,
-    }
-  },
-
-  handleActivateTab(activeIndex) {
-    this.setState({activeIndex})
-    this.props.onSelect(activeIndex)
-  },
-
-  render() {
-    const children = React.Children.map(this.props.children, child => {
-      if (child && child.type === TabPanels) {
-        return React.cloneElement(child, {
-          activeIndex: this.state.activeIndex,
-        })
-      }
-
-      if (child && child.type === TabList) {
-        return React.cloneElement(child, {
-          activeIndex: this.state.activeIndex,
-          onActivate: this.handleActivateTab,
-        })
-      }
-
-      return child
-    })
-
-    return (
-      <div className={this.props.tabContentsClass}>
-        {children}
-      </div>
-    )
-  },
-})
diff --git a/ui/src/shared/components/Tabs.tsx b/ui/src/shared/components/Tabs.tsx
new file mode 100644
index 0000000000..56408e9c31
--- /dev/null
+++ b/ui/src/shared/components/Tabs.tsx
@@ -0,0 +1,186 @@
+import React, {SFC, ReactElement, PureComponent} from 'react'
+import classnames from 'classnames'
+
+interface TabProps {
+  children: JSX.Element[] | JSX.Element
+  onClick: () => void
+  isDisabled: boolean
+  isActive: boolean
+  isKapacitorTab: boolean
+  isConfigured: boolean
+}
+
+export const Tab: SFC<TabProps> = ({
+  children,
+  onClick,
+  isDisabled,
+  isActive,
+  isKapacitorTab,
+  isConfigured,
+}) => {
+  if (isKapacitorTab) {
+    return (
+      <li
+        className={classnames({active: isActive})}
+        onClick={isDisabled ? null : onClick}
+      >
+        {children}
+      </li>
+    )
+  }
+
+  return (
+    <div
+      className={classnames('btn tab', {
+        active: isActive,
+        configured: isConfigured,
+      })}
+      onClick={isDisabled ? null : onClick}
+    >
+      {children}
+    </div>
+  )
+}
+
+interface TabListProps {
+  children: JSX.Element[] | JSX.Element
+  activeIndex: number
+  onActivate: (index: number) => void
+  isKapacitorTabs: string
+  customClass: string
+}
+
+export const TabList: SFC<TabListProps> = ({
+  children,
+  activeIndex,
+  onActivate,
+  isKapacitorTabs,
+  customClass,
+}) => {
+  const kids = React.Children.map(
+    children,
+    (child: ReactElement<any>, index) => {
+      return React.cloneElement(child, {
+        isActive: index === activeIndex,
+        onClick: () => onActivate(index),
+      })
+    }
+  )
+
+  if (isKapacitorTabs === 'true') {
+    return (
+      <div className="rule-section--row rule-section--row-first rule-section--row-last">
+        <p>Choose One:</p>
+        <div className="nav nav-tablist nav-tablist-sm nav-tablist-malachite">
+          {kids}
+        </div>
+      </div>
+    )
+  }
+
+  if (customClass) {
+    return (
+      <div className={customClass}>
+        <div className="btn-group btn-group-lg tab-group">
+          {kids}
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="btn-group btn-group-lg tab-group">
+      {kids}
+    </div>
+  )
+}
+
+TabList.defaultProps = {
+  isKapacitorTabs: '',
+}
+
+interface TabPanelsProps {
+  children: JSX.Element[] | JSX.Element
+  activeIndex: number
+  customClass: string
+}
+
+export const TabPanels: SFC<TabPanelsProps> = ({
+  children,
+  activeIndex,
+  customClass,
+}) =>
+  // if only 1 child, children array index lookup will fail
+  <div className={customClass}>
+    {children[activeIndex]}
+  </div>
+
+interface TabPanelProps {
+  children: JSX.Element[] | JSX.Element
+}
+
+export const TabPanel: SFC<TabPanelProps> = ({children}) =>
+  <div>
+    {children}
+  </div>
+
+interface TabsProps {
+  children: JSX.Element[] | JSX.Element
+  onSelect: (activeIndex: number) => void
+  tabContentsClass: string
+  tabsClass: string
+  initialIndex: number
+}
+
+interface TabsState {
+  activeIndex: number
+}
+
+export class Tabs extends PureComponent<TabsProps, TabsState> {
+  constructor(props) {
+    super(props)
+
+    // initialIndex allows the user to enable a Tab and TabPanel
+    // other than 0 on initial render.
+    this.state = {
+      activeIndex: this.props.initialIndex || 0,
+    }
+  }
+
+  public static defaultProps: Partial<TabsProps> = {
+    onSelect: () => {},
+    tabContentsClass: '',
+  }
+
+  handleActivateTab = activeIndex => {
+    this.setState({activeIndex})
+    this.props.onSelect(activeIndex)
+  }
+
+  render() {
+    const {children, tabContentsClass} = this.props
+
+    const kids = React.Children.map(children, (child: ReactElement<any>) => {
+      if (child && child.type === TabPanels) {
+        return React.cloneElement(child, {
+          activeIndex: this.state.activeIndex,
+        })
+      }
+
+      if (child && child.type === TabList) {
+        return React.cloneElement(child, {
+          activeIndex: this.state.activeIndex,
+          onActivate: this.handleActivateTab,
+        })
+      }
+
+      return child
+    })
+
+    return (
+      <div className={tabContentsClass}>
+        {kids}
+      </div>
+    )
+  }
+}
diff --git a/ui/src/shared/components/TagInput.js b/ui/src/shared/components/TagInput.js
index 6fd7d6f039..a246daf085 100644
--- a/ui/src/shared/components/TagInput.js
+++ b/ui/src/shared/components/TagInput.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 Tags from 'shared/components/Tags'
diff --git a/ui/src/shared/components/Tags.js b/ui/src/shared/components/Tags.js
index 7a0897ed43..b7b4bc47a5 100644
--- a/ui/src/shared/components/Tags.js
+++ b/ui/src/shared/components/Tags.js
@@ -1,4 +1,5 @@
-import React, {Component, PropTypes} from 'react'
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
 import TagsAddButton from 'src/shared/components/TagsAddButton'
 import ConfirmButton from 'src/shared/components/ConfirmButton'
 
diff --git a/ui/src/shared/components/TagsAddButton.js b/ui/src/shared/components/TagsAddButton.js
index 7f59b74969..8a3a74de16 100644
--- a/ui/src/shared/components/TagsAddButton.js
+++ b/ui/src/shared/components/TagsAddButton.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 uuid from 'uuid'
diff --git a/ui/src/shared/components/TemplateDrawer.js b/ui/src/shared/components/TemplateDrawer.js
index db58f4cfed..80e360c788 100644
--- a/ui/src/shared/components/TemplateDrawer.js
+++ b/ui/src/shared/components/TemplateDrawer.js
@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react'
+import React from 'react'
+import PropTypes from 'prop-types'
 import OnClickOutside from 'react-onclickoutside'
 import classnames from 'classnames'
 
diff --git a/ui/src/shared/components/TimeRangeDropdown.js b/ui/src/shared/components/TimeRangeDropdown.js
index 1626574836..50559e9175 100644
--- a/ui/src/shared/components/TimeRangeDropdown.js
+++ b/ui/src/shared/components/TimeRangeDropdown.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 moment from 'moment'
 
diff --git a/ui/src/shared/components/TimeShiftDropdown.js b/ui/src/shared/components/TimeShiftDropdown.js
index 066be7fd19..20a3b2dbf5 100644
--- a/ui/src/shared/components/TimeShiftDropdown.js
+++ b/ui/src/shared/components/TimeShiftDropdown.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 {TIME_SHIFTS} from 'shared/constants/timeShift'
 
diff --git a/ui/src/shared/components/Tooltip.js b/ui/src/shared/components/Tooltip.js
index 8022cd273a..eb93ffa7db 100644
--- a/ui/src/shared/components/Tooltip.js
+++ b/ui/src/shared/components/Tooltip.js
@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react'
+import React from 'react'
+import PropTypes from 'prop-types'
 import ReactTooltip from 'react-tooltip'
 
 const Tooltip = ({tip, children}) =>
diff --git a/ui/src/shared/components/WidgetCell.js b/ui/src/shared/components/WidgetCell.js
index 098b686851..c2930f6a62 100644
--- a/ui/src/shared/components/WidgetCell.js
+++ b/ui/src/shared/components/WidgetCell.js
@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react'
+import React from 'react'
+import PropTypes from 'prop-types'
 
 import AlertsApp from 'src/alerts/containers/AlertsApp'
 import NewsFeed from 'src/status/components/NewsFeed'
diff --git a/ui/src/shared/components/YesNoButtons.js b/ui/src/shared/components/YesNoButtons.js
index b9cae1c2ba..b74bf21821 100644
--- a/ui/src/shared/components/YesNoButtons.js
+++ b/ui/src/shared/components/YesNoButtons.js
@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react'
+import React from 'react'
+import PropTypes from 'prop-types'
 import classnames from 'classnames'
 
 const YesNoButtons = ({onConfirm, onCancel, buttonSize}) =>
diff --git a/ui/src/shared/schemas.js b/ui/src/shared/schemas.js
index b012e1a2d8..35df59a72b 100644
--- a/ui/src/shared/schemas.js
+++ b/ui/src/shared/schemas.js
@@ -1,4 +1,4 @@
-import {PropTypes} from 'react'
+import PropTypes from 'prop-types'
 
 const {shape, string} = PropTypes
 
diff --git a/ui/src/side_nav/components/NavItems.js b/ui/src/side_nav/components/NavItems.js
index c0761582a7..f9f3e23533 100644
--- a/ui/src/side_nav/components/NavItems.js
+++ b/ui/src/side_nav/components/NavItems.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 classnames from 'classnames'
 
diff --git a/ui/src/side_nav/components/UserNavBlock.js b/ui/src/side_nav/components/UserNavBlock.js
index 4883dcf96e..cda37afc99 100644
--- a/ui/src/side_nav/components/UserNavBlock.js
+++ b/ui/src/side_nav/components/UserNavBlock.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'
diff --git a/ui/src/side_nav/containers/SideNav.js b/ui/src/side_nav/containers/SideNav.js
index 633f543fa5..55ca9cca17 100644
--- a/ui/src/side_nav/containers/SideNav.js
+++ b/ui/src/side_nav/containers/SideNav.js
@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react'
+import React from 'react'
+import PropTypes from 'prop-types'
 import {withRouter, Link} from 'react-router'
 import {connect} from 'react-redux'
 
diff --git a/ui/src/side_nav/modals/RenameCluster.js b/ui/src/side_nav/modals/RenameCluster.js
index 20f16ace29..d4bc36b524 100644
--- a/ui/src/side_nav/modals/RenameCluster.js
+++ b/ui/src/side_nav/modals/RenameCluster.js
@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react'
+import React from 'react'
+import PropTypes from 'prop-types'
 
 const {func} = PropTypes
 const RenameCluster = React.createClass({
diff --git a/ui/src/sources/components/InfluxTable.js b/ui/src/sources/components/InfluxTable.js
index 98eb9f3a85..fef5936b1b 100644
--- a/ui/src/sources/components/InfluxTable.js
+++ b/ui/src/sources/components/InfluxTable.js
@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react'
+import React from 'react'
+import PropTypes from 'prop-types'
 import {Link, withRouter} from 'react-router'
 import {connect} from 'react-redux'
 
diff --git a/ui/src/sources/components/SourceForm.js b/ui/src/sources/components/SourceForm.js
index 6275928da8..9c97ef5a10 100644
--- a/ui/src/sources/components/SourceForm.js
+++ b/ui/src/sources/components/SourceForm.js
@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react'
+import React from 'react'
+import PropTypes from 'prop-types'
 import classnames from 'classnames'
 import {connect} from 'react-redux'
 import _ from 'lodash'
diff --git a/ui/src/sources/containers/ManageSources.js b/ui/src/sources/containers/ManageSources.js
index 24b2b915bf..cca6b5ff6a 100644
--- a/ui/src/sources/containers/ManageSources.js
+++ b/ui/src/sources/containers/ManageSources.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'
 
diff --git a/ui/src/sources/containers/SourcePage.js b/ui/src/sources/containers/SourcePage.js
index 1dc7b1cfae..812004952c 100644
--- a/ui/src/sources/containers/SourcePage.js
+++ b/ui/src/sources/containers/SourcePage.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 _ from 'lodash'
 import {getSource} from 'shared/apis'
diff --git a/ui/src/status/components/JSONFeedReader.js b/ui/src/status/components/JSONFeedReader.js
index ca7274610b..7ed520fa65 100644
--- a/ui/src/status/components/JSONFeedReader.js
+++ b/ui/src/status/components/JSONFeedReader.js
@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react'
+import React from 'react'
+import PropTypes from 'prop-types'
 
 import moment from 'moment'
 
diff --git a/ui/src/status/components/NewsFeed.js b/ui/src/status/components/NewsFeed.js
index d643ac3708..11bb92098a 100644
--- a/ui/src/status/components/NewsFeed.js
+++ b/ui/src/status/components/NewsFeed.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'
 
diff --git a/ui/src/status/containers/StatusPage.js b/ui/src/status/containers/StatusPage.js
index 50974161de..179d589f8a 100644
--- a/ui/src/status/containers/StatusPage.js
+++ b/ui/src/status/containers/StatusPage.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 SourceIndicator from 'shared/components/SourceIndicator'
diff --git a/ui/src/types/index.tsx b/ui/src/types/index.tsx
index 804c6ced8a..a1013345f1 100644
--- a/ui/src/types/index.tsx
+++ b/ui/src/types/index.tsx
@@ -1,4 +1,4 @@
 import {Query} from './query'
-import {Source} from './sources'
+import {Source, Kapacitor} from './sources'
 
-export {Query, Source}
+export {Query, Source, Kapacitor}
diff --git a/ui/test/kapacitor/containers/KapacitorPage.test.tsx b/ui/test/kapacitor/containers/KapacitorPage.test.tsx
new file mode 100644
index 0000000000..9cd879ee9f
--- /dev/null
+++ b/ui/test/kapacitor/containers/KapacitorPage.test.tsx
@@ -0,0 +1,206 @@
+import React from 'react'
+import {
+  KapacitorPage,
+  defaultName,
+  kapacitorPort,
+} from 'src/kapacitor/containers/KapacitorPage'
+import KapacitorForm from 'src/kapacitor/components/KapacitorForm'
+import KapacitorFormInput from 'src/kapacitor/components/KapacitorFormInput'
+import {mount} from 'enzyme'
+import {getKapacitor, createKapacitor, updateKapacitor} from 'src/shared/apis'
+
+import {source, kapacitor} from 'test/resources'
+import * as mocks from 'mocks/dummy'
+
+jest.mock('src/shared/apis', () => require('mocks/shared/apis'))
+
+const setup = (override = {}) => {
+  const props = {
+    source: source,
+    addFlashMessage: () => {},
+    kapacitor,
+    router: {
+      push: () => {},
+      replace: () => {},
+    },
+    location: {pathname: '', hash: ''},
+    params: {id: '', hash: ''},
+    ...override,
+  }
+
+  const wrapper = mount(<KapacitorPage {...props} />)
+
+  return {
+    wrapper,
+    props,
+  }
+}
+
+describe('Kapacitor.Containers.KapacitorPage', () => {
+  afterEach(() => {
+    jest.clearAllMocks()
+  })
+
+  describe('rendering', () => {
+    it('renders the KapacitorPage', () => {
+      const {wrapper} = setup()
+      expect(wrapper.exists()).toBe(true)
+    })
+
+    it('renders the KapacitorForm', async () => {
+      const {wrapper} = setup()
+      const form = wrapper.find(KapacitorForm)
+
+      expect(form.exists()).toBe(true)
+    })
+  })
+
+  describe('user interactions ', () => {
+    describe('entering the url', () => {
+      it('renders the text that is inputted', () => {
+        const {wrapper} = setup()
+        const value = '/new/url'
+        const event = {target: {value}}
+
+        let inputElement = wrapper.find('#kapaUrl')
+
+        inputElement.simulate('change', event)
+        wrapper.update()
+
+        inputElement = wrapper.find('#kapaUrl')
+
+        expect(inputElement.prop('value')).toBe(value)
+      })
+    })
+
+    describe('entering the kapacitor name', () => {
+      it('renders the text that is inputted', () => {
+        const {wrapper} = setup()
+        const value = 'My New Kapacitor'
+        const event = {target: {value, name: 'name'}}
+
+        let input = wrapper.find('#name')
+
+        input.simulate('change', event)
+        wrapper.update()
+
+        input = wrapper.find('#name')
+
+        expect(input.prop('value')).toBe(value)
+      })
+    })
+
+    describe('entering the username', () => {
+      it('renders the text that is inputted', () => {
+        const {wrapper} = setup()
+        const value = 'user1'
+        const event = {target: {value, name: 'username'}}
+
+        let input = wrapper.find('#username')
+
+        input.simulate('change', event)
+        wrapper.update()
+
+        input = wrapper.find('#username')
+
+        expect(input.prop('value')).toBe(value)
+      })
+    })
+
+    describe('entering the password', () => {
+      it('renders the text that is inputted', () => {
+        const {wrapper} = setup()
+        const value = 'password'
+        const event = {target: {value, name: 'password'}}
+
+        let input = wrapper.find('#password')
+
+        input.simulate('change', event)
+        wrapper.update()
+
+        input = wrapper.find('#password')
+
+        expect(input.prop('value')).toBe(value)
+      })
+    })
+
+    describe('submitting the form', () => {
+      it('creates a new Kapacitor if there is no kapacitor', async () => {
+        const {wrapper} = setup()
+        const submit = wrapper.find({'data-test': 'submit-button'})
+
+        submit.simulate('submit')
+
+        expect(createKapacitor).toHaveBeenCalled()
+        expect(updateKapacitor).not.toHaveBeenCalled()
+      })
+
+      it('updates an existing Kapacitor if there is a kapacitor', () => {
+        const props = {params: {id: '1', hash: ''}}
+        const {wrapper} = setup(props)
+        const submit = wrapper.find({'data-test': 'submit-button'})
+
+        submit.simulate('submit')
+
+        expect(updateKapacitor).toHaveBeenCalled()
+        expect(createKapacitor).not.toHaveBeenCalled()
+      })
+    })
+
+    describe('clicking the `reset` button', () => {
+      it('resets all inputs to their defaults', () => {
+        const {wrapper} = setup()
+
+        const url = wrapper.find('#kapaUrl')
+        const name = wrapper.find('#name')
+        const username = wrapper.find('#username')
+        const password = wrapper.find('#password')
+
+        const value = 'reset me'
+
+        // change all values to some non-default value
+        url.simulate('change', {target: {value}})
+        name.simulate('change', {target: {value, name: 'name'}})
+        username.simulate('change', {target: {value, name: 'username'}})
+        password.simulate('change', {target: {value, name: 'password'}})
+
+        const inputs = wrapper.find(KapacitorFormInput)
+        inputs.map(n => expect(n.find('input').prop('value')).toBe(value))
+
+        // reset
+        const reset = wrapper.find({'data-test': 'reset-button'})
+        reset.simulate('click')
+
+        expect(url.prop('value')).toBe(`https://localhost:${kapacitorPort}`)
+        expect(name.prop('value')).toBe(defaultName)
+        expect(username.prop('value')).toBe('')
+        expect(password.prop('value')).toBe('')
+      })
+    })
+  })
+
+  describe('instance methods', () => {
+    describe('componentDidMount', () => {
+      describe('if it is a new kapacitor', () => {
+        it('does not get the kapacitor', async () => {
+          const {wrapper} = setup()
+
+          await wrapper.instance().componentDidMount()
+
+          expect(getKapacitor).not.toHaveBeenCalled()
+        })
+      })
+
+      describe('if it is an existing kapacitor', () => {
+        it('gets the kapacitor info and sets the appropriate state', async () => {
+          const params = {id: '1', hash: ''}
+          const {wrapper} = setup({params})
+
+          await wrapper.instance().componentDidMount()
+
+          expect(wrapper.state().kapacitor).toEqual(mocks.kapacitor)
+        })
+      })
+    })
+  })
+})
diff --git a/ui/test/resources.ts b/ui/test/resources.ts
index 392766a6ee..caee2f9c51 100644
--- a/ui/test/resources.ts
+++ b/ui/test/resources.ts
@@ -47,3 +47,15 @@ export const query = {
   status: null,
   shifts: [],
 }
+
+export const kapacitor = {
+  url: '/foo/bar/baz',
+  name: 'kapa',
+  username: 'influx',
+  password: '',
+  active: false,
+  links: {
+    self: '/kapa/1',
+    proxy: '/proxy/kapacitor/1',
+  },
+}
diff --git a/ui/yarn.lock b/ui/yarn.lock
index 5a7a789ae5..80fc640763 100644
--- a/ui/yarn.lock
+++ b/ui/yarn.lock
@@ -1704,7 +1704,7 @@ class-utils@^0.3.5:
     isobject "^3.0.0"
     static-extend "^0.1.1"
 
-classnames@^2.2.3, classnames@^2.2.5:
+classnames@2.x, classnames@^2.2.3, classnames@^2.2.5:
   version "2.2.5"
   resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.5.tgz#fb3801d453467649ef3603c7d61a02bd129bde6d"
 
@@ -6874,10 +6874,6 @@ react-codemirror@^1.0.0:
     lodash.isequal "^4.5.0"
     prop-types "^15.5.4"
 
-react-component-resizable@^1.1.0-rc1:
-  version "1.1.0-rc1"
-  resolved "https://registry.yarnpkg.com/react-component-resizable/-/react-component-resizable-1.1.0-rc1.tgz#167b635dfde48da512b0000cbd224c6bc539f2b3"
-
 react-custom-scrollbars@^4.1.1:
   version "4.2.1"
   resolved "https://registry.yarnpkg.com/react-custom-scrollbars/-/react-custom-scrollbars-4.2.1.tgz#830fd9502927e97e8a78c2086813899b2a8b66db"
@@ -6901,19 +6897,28 @@ react-dom@^15.0.2:
     object-assign "^4.1.0"
     prop-types "^15.5.10"
 
-react-draggable@^2.1.1, "react-draggable@^2.2.6 || ^3.0.3":
+react-draggable@3.x:
+  version "3.0.5"
+  resolved "https://registry.yarnpkg.com/react-draggable/-/react-draggable-3.0.5.tgz#c031e0ed4313531f9409d6cd84c8ebcec0ddfe2d"
+  dependencies:
+    classnames "^2.2.5"
+    prop-types "^15.6.0"
+
+"react-draggable@^2.2.6 || ^3.0.3":
   version "2.2.6"
   resolved "https://registry.yarnpkg.com/react-draggable/-/react-draggable-2.2.6.tgz#3a806e10f2da6babfea4136be6510e89b0d76901"
   dependencies:
     classnames "^2.2.5"
 
-react-grid-layout@^0.13.9:
-  version "0.13.9"
-  resolved "https://registry.yarnpkg.com/react-grid-layout/-/react-grid-layout-0.13.9.tgz#5ba29cdc0e6422362f46d9a49047ebb24e0e293e"
+react-grid-layout@^0.16.6:
+  version "0.16.6"
+  resolved "https://registry.yarnpkg.com/react-grid-layout/-/react-grid-layout-0.16.6.tgz#9b2407a2b946c2260ebaf66f13b556e1da4efeb2"
   dependencies:
+    classnames "2.x"
     lodash.isequal "^4.0.0"
-    react-draggable "^2.1.1"
-    react-resizable "^1.4.0"
+    prop-types "15.x"
+    react-draggable "3.x"
+    react-resizable "1.x"
 
 react-onclickoutside@^5.2.0:
   version "5.11.1"
@@ -6932,7 +6937,7 @@ react-redux@^4.4.0:
     loose-envify "^1.1.0"
     prop-types "^15.5.4"
 
-react-resizable@^1.4.0:
+react-resizable@1.x, react-resizable@^1.7.5:
   version "1.7.5"
   resolved "https://registry.yarnpkg.com/react-resizable/-/react-resizable-1.7.5.tgz#83eb75bb3684da6989bbbf4f826e1470f0af902e"
   dependencies: