Convert KapacitorRulesPage and SourceIndicator to .tsx

ui/src/kapacitor/components/KapacitorRules.tsx

@@ -1,12 +1,21 @@
-import React from 'react'
-import PropTypes from 'prop-types'
+import React, {SFC} from 'react'
 import {Link} from 'react-router'
 
-import NoKapacitorError from 'shared/components/NoKapacitorError'
+import NoKapacitorError from 'src/shared/components/NoKapacitorError'
 import KapacitorRulesTable from 'src/kapacitor/components/KapacitorRulesTable'
 import TasksTable from 'src/kapacitor/components/TasksTable'
 
-const KapacitorRules = ({
+import {Source, AlertRule} from 'src/types'
+
+interface Props {
+  source: Source
+  rules: AlertRule[]
+  hasKapacitor: boolean
+  loading: boolean
+  onDelete: (rule: AlertRule) => void
+  onChangeRuleStatus: (rule: AlertRule) => void
+}
+const KapacitorRules: SFC<Props> = ({
   source,
   rules,
   hasKapacitor,
@@ -36,12 +45,12 @@ const KapacitorRules = ({
     )
   }
 
-  const builderRules = rules.filter(r => r.query)
+  const builderRules: AlertRule[] = rules.filter((r: AlertRule) => r.query)
 
-  const builderHeader = `${builderRules.length} Alert Rule${
+  const builderHeader: string = `${builderRules.length} Alert Rule${
     builderRules.length === 1 ? '' : 's'
   }`
-  const scriptsHeader = `${rules.length} TICKscript${
+  const scriptsHeader: string = `${rules.length} TICKscript${
     rules.length === 1 ? '' : 's'
   }`
 
@@ -91,15 +100,4 @@ const KapacitorRules = ({
   )
 }
 
-const {arrayOf, bool, func, shape} = PropTypes
-
-KapacitorRules.propTypes = {
-  source: shape(),
-  rules: arrayOf(shape()),
-  hasKapacitor: bool,
-  loading: bool,
-  onChangeRuleStatus: func,
-  onDelete: func,
-}
-
 export default KapacitorRules

ui/src/kapacitor/containers/KapacitorRulesPage.tsx

@@ -97,7 +97,7 @@ const PageContents: SFC<PageContentsProps> = ({children}) => (
             tipID="manage-tasks--tooltip"
             tipContent="<b>Alert Rules</b> generate a TICKscript for<br/>you using our Builder UI.<br/><br/>Not all TICKscripts can be edited<br/>using the Builder."
           />
-          <SourceIndicator sourceOverride={{}} />
+          <SourceIndicator />
         </div>
       </div>
     </div>

ui/src/shared/components/SourceIndicator.js

@@ -1,52 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import _ from 'lodash'
-import uuid from 'uuid'
-
-import ReactTooltip from 'react-tooltip'
-
-const SourceIndicator = ({sourceOverride}, {source: {name, url}}) => {
-  const sourceName = _.get(sourceOverride, 'name', name)
-  const sourceUrl = _.get(sourceOverride, 'url', url)
-
-  if (!sourceName) {
-    return null
-  }
-  const sourceNameTooltip = `<h1>Connected to Source:</h1><p><code>${sourceName} @ ${sourceUrl}</code></p>`
-  const uuidTooltip = uuid.v4()
-
-  return (
-    <div
-      className="source-indicator"
-      data-for={uuidTooltip}
-      data-tip={sourceNameTooltip}
-    >
-      <span className="icon server2" />
-      <ReactTooltip
-        id={uuidTooltip}
-        effect="solid"
-        html={true}
-        place="left"
-        class="influx-tooltip"
-      />
-    </div>
-  )
-}
-
-const {shape, string} = PropTypes
-
-SourceIndicator.propTypes = {
-  sourceOverride: shape({
-    name: string,
-    url: string,
-  }),
-}
-
-SourceIndicator.contextTypes = {
-  source: shape({
-    name: string,
-    url: string,
-  }),
-}
-
-export default SourceIndicator

ui/src/shared/components/SourceIndicator.tsx

@@ -0,0 +1,53 @@
+import React, {SFC} from 'react'
+import PropTypes from 'prop-types'
+import _ from 'lodash'
+import uuid from 'uuid'
+
+import ReactTooltip from 'react-tooltip'
+
+import {Source} from 'src/types'
+
+interface Props {
+  sourceOverride?: Source
+}
+
+const SourceIndicator: SFC<Props> = (
+  {sourceOverride},
+  {source: {name, url}}
+) => {
+  const sourceName: string = _.get(sourceOverride, 'name', name)
+  const sourceUrl: string = _.get(sourceOverride, 'url', url)
+
+  if (sourceName) {
+    const sourceNameTooltip: string = `<h1>Connected to Source:</h1><p><code>${sourceName} @ ${sourceUrl}</code></p>`
+    const uuidTooltip: string = uuid.v4()
+
+    return (
+      <div
+        className="source-indicator"
+        data-for={uuidTooltip}
+        data-tip={sourceNameTooltip}
+      >
+        <span className="icon server2" />
+        <ReactTooltip
+          id={uuidTooltip}
+          effect="solid"
+          html={true}
+          place="left"
+          class="influx-tooltip"
+        />
+      </div>
+    )
+  }
+  return null
+}
+const {shape, string} = PropTypes
+
+SourceIndicator.contextTypes = {
+  source: shape({
+    name: string,
+    url: string,
+  }),
+}
+
+export default SourceIndicator