WIP Partially transform Values Section to an SFC

ui/src/kapacitor/components/ValuesSection.js

@@ -12,26 +12,16 @@ 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 {
+const ValuesSection = ({
   rule,
   query,
   source,
@@ -42,15 +32,15 @@ export const ValuesSection = React.createClass({
   queryConfigActions,
   onRuleTypeInputChange,
   onRuleTypeDropdownChange,
-    } = this.props
-    const initialIndex = TABS.indexOf(_.startCase(rule.trigger))
-    const isDeadman = rule.trigger === 'deadman'
-
-    return (
+  onChooseTrigger,
+}) =>
   <div className="rule-section">
     <h3 className="rule-section--heading">Alert Type</h3>
     <div className="rule-section--body">
-          <Tabs initialIndex={initialIndex} onSelect={this.handleChooseTrigger}>
+      <Tabs
+        initialIndex={initialIndex(rule)}
+        onSelect={handleChooseTrigger(rule, onChooseTrigger)}
+      >
         <TabList isKapacitorTabs="true">
           {TABS.map(tab =>
             <Tab key={tab} isKapacitorTab={true}>
@@ -67,10 +57,9 @@ export const ValuesSection = React.createClass({
             actions={queryConfigActions}
             onAddEvery={onAddEvery}
             onRemoveEvery={onRemoveEvery}
-                isDeadman={isDeadman}
+            isDeadman={isDeadman(rule)}
           />
         </div>
-
         <h3 className="rule-builder--sub-header">Rule Conditions</h3>
         <TabPanels>
           <TabPanel>
@@ -92,7 +81,7 @@ export const ValuesSection = React.createClass({
             <Deadman rule={rule} onChange={onDeadmanChange} />
           </TabPanel>
         </TabPanels>
-            {isDeadman
+        {isDeadman(rule)
           ? null
           : <RuleGraph
               rule={rule}
@@ -103,22 +92,24 @@ export const ValuesSection = React.createClass({
       </Tabs>
     </div>
   </div>
-    )
-  },
 
-  handleChooseTrigger(triggerIndex) {
-    const {rule, onChooseTrigger} = this.props
-    if (TABS[triggerIndex] === rule.trigger) {
-      return
+const {shape, string, func} = PropTypes
+
+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,
 }
 
-    onChooseTrigger(rule.id, TABS[triggerIndex])
-  },
-
-  handleValuesChange(values) {
-    const {onUpdateValues, rule} = this.props
-    onUpdateValues(rule.id, rule.trigger, values)
-  },
-})
-
 export default ValuesSection