diff --git a/ui/src/kapacitor/components/ValuesSection.js b/ui/src/kapacitor/components/ValuesSection.js
index 2aa49a93c..eed2cc582 100644
--- a/ui/src/kapacitor/components/ValuesSection.js
+++ b/ui/src/kapacitor/components/ValuesSection.js
@@ -12,113 +12,104 @@ import {Tab, TabList, TabPanels, TabPanel, Tabs} from 'shared/components/Tabs'
 
 const TABS = ['Threshold', 'Relative', 'Deadman']
 
-export const ValuesSection = React.createClass({
-  propTypes: {
-    rule: PropTypes.shape({
-      id: PropTypes.string,
-    }).isRequired,
-    onChooseTrigger: PropTypes.func.isRequired,
-    onUpdateValues: PropTypes.func.isRequired,
-    query: PropTypes.shape({}).isRequired,
-    onDeadmanChange: PropTypes.func.isRequired,
-    onRuleTypeDropdownChange: PropTypes.func.isRequired,
-    onRuleTypeInputChange: PropTypes.func.isRequired,
-    onAddEvery: PropTypes.func.isRequired,
-    onRemoveEvery: PropTypes.func.isRequired,
-    timeRange: PropTypes.shape({}).isRequired,
-    queryConfigActions: PropTypes.shape({}).isRequired,
-    source: PropTypes.shape({}).isRequired,
-  },
+const handleChooseTrigger = (rule, onChooseTrigger) => {
+  if (TABS[triggerIndex] === rule.trigger) {
+    return
+  }
+  return onChooseTrigger(rule.id, TABS[triggerIndex])
+}
+const initialIndex = rule => TABS.indexOf(_.startCase(rule.trigger))
+const isDeadman = rule => rule.trigger === 'deadman'
 
-  render() {
-    const {
-      rule,
-      query,
-      source,
-      timeRange,
-      onAddEvery,
-      onRemoveEvery,
-      onDeadmanChange,
-      queryConfigActions,
-      onRuleTypeInputChange,
-      onRuleTypeDropdownChange,
-    } = this.props
-    const initialIndex = TABS.indexOf(_.startCase(rule.trigger))
-    const isDeadman = rule.trigger === 'deadman'
-
-    return (
-      <div className="rule-section">
-        <h3 className="rule-section--heading">Alert Type</h3>
-        <div className="rule-section--body">
-          <Tabs initialIndex={initialIndex} onSelect={this.handleChooseTrigger}>
-            <TabList isKapacitorTabs="true">
-              {TABS.map(tab =>
-                <Tab key={tab} isKapacitorTab={true}>
-                  {tab}
-                </Tab>
-              )}
-            </TabList>
-            <div>
-              <h3 className="rule-builder--sub-header">Time Series</h3>
-              <DataSection
-                query={query}
-                timeRange={timeRange}
-                isKapacitorRule={true}
-                actions={queryConfigActions}
-                onAddEvery={onAddEvery}
-                onRemoveEvery={onRemoveEvery}
-                isDeadman={isDeadman}
-              />
-            </div>
-
-            <h3 className="rule-builder--sub-header">Rule Conditions</h3>
-            <TabPanels>
-              <TabPanel>
-                <Threshold
-                  rule={rule}
-                  query={query}
-                  onDropdownChange={onRuleTypeDropdownChange}
-                  onRuleTypeInputChange={onRuleTypeInputChange}
-                />
-              </TabPanel>
-              <TabPanel>
-                <Relative
-                  rule={rule}
-                  onDropdownChange={onRuleTypeDropdownChange}
-                  onRuleTypeInputChange={onRuleTypeInputChange}
-                />
-              </TabPanel>
-              <TabPanel>
-                <Deadman rule={rule} onChange={onDeadmanChange} />
-              </TabPanel>
-            </TabPanels>
-            {isDeadman
-              ? null
-              : <RuleGraph
-                  rule={rule}
-                  query={query}
-                  source={source}
-                  timeRange={timeRange}
-                />}
-          </Tabs>
+const ValuesSection = ({
+  rule,
+  query,
+  source,
+  timeRange,
+  onAddEvery,
+  onRemoveEvery,
+  onDeadmanChange,
+  queryConfigActions,
+  onRuleTypeInputChange,
+  onRuleTypeDropdownChange,
+  onChooseTrigger,
+}) =>
+  <div className="rule-section">
+    <h3 className="rule-section--heading">Alert Type</h3>
+    <div className="rule-section--body">
+      <Tabs
+        initialIndex={initialIndex(rule)}
+        onSelect={handleChooseTrigger(rule, onChooseTrigger)}
+      >
+        <TabList isKapacitorTabs="true">
+          {TABS.map(tab =>
+            <Tab key={tab} isKapacitorTab={true}>
+              {tab}
+            </Tab>
+          )}
+        </TabList>
+        <div>
+          <h3 className="rule-builder--sub-header">Time Series</h3>
+          <DataSection
+            query={query}
+            timeRange={timeRange}
+            isKapacitorRule={true}
+            actions={queryConfigActions}
+            onAddEvery={onAddEvery}
+            onRemoveEvery={onRemoveEvery}
+            isDeadman={isDeadman(rule)}
+          />
         </div>
-      </div>
-    )
-  },
+        <h3 className="rule-builder--sub-header">Rule Conditions</h3>
+        <TabPanels>
+          <TabPanel>
+            <Threshold
+              rule={rule}
+              query={query}
+              onDropdownChange={onRuleTypeDropdownChange}
+              onRuleTypeInputChange={onRuleTypeInputChange}
+            />
+          </TabPanel>
+          <TabPanel>
+            <Relative
+              rule={rule}
+              onDropdownChange={onRuleTypeDropdownChange}
+              onRuleTypeInputChange={onRuleTypeInputChange}
+            />
+          </TabPanel>
+          <TabPanel>
+            <Deadman rule={rule} onChange={onDeadmanChange} />
+          </TabPanel>
+        </TabPanels>
+        {isDeadman(rule)
+          ? null
+          : <RuleGraph
+              rule={rule}
+              query={query}
+              source={source}
+              timeRange={timeRange}
+            />}
+      </Tabs>
+    </div>
+  </div>
 
-  handleChooseTrigger(triggerIndex) {
-    const {rule, onChooseTrigger} = this.props
-    if (TABS[triggerIndex] === rule.trigger) {
-      return
-    }
+const {shape, string, func} = PropTypes
 
-    onChooseTrigger(rule.id, TABS[triggerIndex])
-  },
-
-  handleValuesChange(values) {
-    const {onUpdateValues, rule} = this.props
-    onUpdateValues(rule.id, rule.trigger, values)
-  },
-})
+ValuesSection.propTypes = {
+  rule: shape({
+    id: string,
+  }).isRequired,
+  onChooseTrigger: func.isRequired,
+  onUpdateValues: func.isRequired,
+  query: shape({}).isRequired,
+  onDeadmanChange: func.isRequired,
+  onRuleTypeDropdownChange: func.isRequired,
+  onRuleTypeInputChange: func.isRequired,
+  onAddEvery: func.isRequired,
+  onRemoveEvery: func.isRequired,
+  timeRange: shape({}).isRequired,
+  queryConfigActions: shape({}).isRequired,
+  source: shape({}).isRequired,
+}
 
 export default ValuesSection