Transform Deadman to an SFC

ui/src/kapacitor/components/Deadman.js

@@ -0,0 +1,32 @@
+import React, {PropTypes} from 'react'
+import {PERIODS} from 'src/kapacitor/constants'
+import Dropdown from 'shared/components/Dropdown'
+
+const periods = PERIODS.map(text => {
+  return {text}
+})
+
+const Deadman = ({rule, onChange}) =>
+  <div className="rule-section--row">
+    <p>Send Alert if Data is missing for</p>
+    <Dropdown
+      className="dropdown-80"
+      menuClass="dropdown-malachite"
+      items={periods}
+      selected={rule.values.period}
+      onChoose={onChange}
+    />
+  </div>
+
+const {shape, string, func} = PropTypes
+
+Deadman.propTypes = {
+  rule: shape({
+    values: shape({
+      period: string,
+    }),
+  }),
+  onChange: func.isRequired,
+}
+
+export default Deadman

ui/src/kapacitor/components/KapacitorRule.js

@@ -106,6 +106,11 @@ class KapacitorRule extends Component {
     return ''
   }
 
+  handleDeadmanChange = ({text}) => {
+    const {ruleActions, rule} = this.props
+    ruleActions.updateRuleValues(rule.id, rule.trigger, {period: text})
+  }
+
   render() {
     const {
       queryConfigActions,
@@ -141,6 +146,7 @@ class KapacitorRule extends Component {
                     query={queryConfigs[rule.queryID]}
                     onChooseTrigger={chooseTrigger}
                     onUpdateValues={updateRuleValues}
+                    onDeadmanChange={this.handleDeadmanChange}
                   />
                   <DataSection
                     timeRange={timeRange}

ui/src/kapacitor/components/ValuesSection.js

@@ -1,9 +1,13 @@
 import React, {PropTypes} from 'react'
-import Dropdown from 'shared/components/Dropdown'
-import {Tab, TabList, TabPanels, TabPanel, Tabs} from 'shared/components/Tabs'
-import {OPERATORS, PERIODS, CHANGES, SHIFTS} from 'src/kapacitor/constants'
+
 import _ from 'lodash'
 
+import Dropdown from 'shared/components/Dropdown'
+import Deadman from 'src/kapacitor/components/Deadman'
+
+import {Tab, TabList, TabPanels, TabPanel, Tabs} from 'shared/components/Tabs'
+import {OPERATORS, CHANGES, SHIFTS} from 'src/kapacitor/constants'
+
 const TABS = ['Threshold', 'Relative', 'Deadman']
 const mapToItems = (arr, type) => arr.map(text => ({text, type}))
 
@@ -15,10 +19,11 @@ export const ValuesSection = React.createClass({
     onChooseTrigger: PropTypes.func.isRequired,
     onUpdateValues: PropTypes.func.isRequired,
     query: PropTypes.shape({}).isRequired,
+    onDeadmanChange: PropTypes.func.isRequired,
   },
 
   render() {
-    const {rule, query} = this.props
+    const {rule, query, onDeadmanChange} = this.props
     const initialIndex = TABS.indexOf(_.startCase(rule.trigger))
 
     return (
@@ -46,7 +51,7 @@ export const ValuesSection = React.createClass({
                 <Relative rule={rule} onChange={this.handleValuesChange} />
               </TabPanel>
               <TabPanel>
-                <Deadman rule={rule} onChange={this.handleValuesChange} />
+                <Deadman rule={rule} onChange={onDeadmanChange} />
               </TabPanel>
             </TabPanels>
           </Tabs>
@@ -216,38 +221,4 @@ const Relative = React.createClass({
   },
 })
 
-const Deadman = React.createClass({
-  propTypes: {
-    rule: PropTypes.shape({
-      values: PropTypes.shape({
-        period: PropTypes.string,
-      }),
-    }),
-    onChange: PropTypes.func.isRequired,
-  },
-
-  handleChange(item) {
-    this.props.onChange({period: item.text})
-  },
-
-  render() {
-    const periods = PERIODS.map(text => {
-      return {text}
-    })
-
-    return (
-      <div className="rule-section--row">
-        <p>Send Alert if Data is missing for</p>
-        <Dropdown
-          className="dropdown-80"
-          menuClass="dropdown-malachite"
-          items={periods}
-          selected={this.props.rule.values.period}
-          onChoose={this.handleChange}
-        />
-      </div>
-    )
-  },
-})
-
 export default ValuesSection