From a5c1a83e9011c4f4c98084d8244babff92ca9bbc Mon Sep 17 00:00:00 2001
From: Andrew Watkins <watts@influxdb.com>
Date: Wed, 6 Sep 2017 15:40:54 -0700
Subject: [PATCH] Reform Relative into an SFC

---
 ui/src/kapacitor/components/KapacitorRule.js |  15 +--
 ui/src/kapacitor/components/Relative.js      | 129 +++++++++----------
 ui/src/kapacitor/components/Threshold.js     |   8 +-
 ui/src/kapacitor/components/ValuesSection.js |  12 +-
 4 files changed, 79 insertions(+), 85 deletions(-)

diff --git a/ui/src/kapacitor/components/KapacitorRule.js b/ui/src/kapacitor/components/KapacitorRule.js
index 4e09347ffd..02a2edaf46 100644
--- a/ui/src/kapacitor/components/KapacitorRule.js
+++ b/ui/src/kapacitor/components/KapacitorRule.js
@@ -108,10 +108,13 @@ class KapacitorRule extends Component {
 
   handleRuleTypeDropdownChange = ({type, text}) => {
     const {ruleActions, rule} = this.props
-    ruleActions.updateRuleValues(rule.id, rule.trigger, {[type]: text})
+    ruleActions.updateRuleValues(rule.id, rule.trigger, {
+      ...this.props.rule.values,
+      [type]: text,
+    })
   }
 
-  handleThresholdInputChange = e => {
+  handleRuleTypeInputChange = e => {
     const {ruleActions, rule} = this.props
     const {lower, upper} = e.target.form
 
@@ -121,11 +124,6 @@ class KapacitorRule extends Component {
       rangeValue: upper ? upper.value : '',
     })
   }
-  //
-  // handleRelativeInputChange = () => {
-  //   const {ruleActions, rule} = this.props
-  //   // ruleActions.updateRuleValues(rule.id, rule.trigger, {period: text})
-  // }
 
   handleDeadmanChange = ({text}) => {
     const {ruleActions, rule} = this.props
@@ -169,8 +167,7 @@ class KapacitorRule extends Component {
                     onUpdateValues={updateRuleValues}
                     onDeadmanChange={this.handleDeadmanChange}
                     onRuleTypeDropdownChange={this.handleRuleTypeDropdownChange}
-                    onThresholdInputChange={this.handleThresholdInputChange}
-                    onRelativeInputChange={this.handleRelativeInputChange}
+                    onRuleTypeInputChange={this.handleRuleTypeInputChange}
                   />
                   <DataSection
                     timeRange={timeRange}
diff --git a/ui/src/kapacitor/components/Relative.js b/ui/src/kapacitor/components/Relative.js
index 3ae30a9e66..ff2713971a 100644
--- a/ui/src/kapacitor/components/Relative.js
+++ b/ui/src/kapacitor/components/Relative.js
@@ -3,75 +3,68 @@ import {CHANGES, OPERATORS, SHIFTS} from 'src/kapacitor/constants'
 import Dropdown from 'shared/components/Dropdown'
 
 const mapToItems = (arr, type) => arr.map(text => ({text, type}))
+const changes = mapToItems(CHANGES, 'change')
+const shifts = mapToItems(SHIFTS, 'shift')
+const operators = mapToItems(OPERATORS, 'operator')
 
-const Relative = React.createClass({
-  propTypes: {
-    rule: PropTypes.shape({
-      values: PropTypes.shape({
-        change: PropTypes.string,
-        shift: PropTypes.string,
-        operator: PropTypes.string,
-        value: PropTypes.string,
-      }),
+const Relative = ({
+  onRuleTypeInputChange,
+  onDropdownChange,
+  rule: {values: {change, shift, operator, value}},
+}) =>
+  <div className="rule-section--row rule-section--border-bottom">
+    <p>Send Alert when</p>
+    <Dropdown
+      className="dropdown-110"
+      menuClass="dropdown-malachite"
+      items={changes}
+      selected={change}
+      onChoose={onDropdownChange}
+    />
+    <p>compared to previous</p>
+    <Dropdown
+      className="dropdown-80"
+      menuClass="dropdown-malachite"
+      items={shifts}
+      selected={shift}
+      onChoose={onDropdownChange}
+    />
+    <p>is</p>
+    <Dropdown
+      className="dropdown-160"
+      menuClass="dropdown-malachite"
+      items={operators}
+      selected={operator}
+      onChoose={onDropdownChange}
+    />
+    <form style={{display: 'flex'}}>
+      <input
+        className="form-control input-sm form-malachite monotype"
+        style={{width: '160px', marginLeft: '6px'}}
+        type="text"
+        name="lower"
+        spellCheck="false"
+        value={value}
+        onChange={onRuleTypeInputChange}
+        required={true}
+      />
+    </form>
+    {change === CHANGES[1] ? <p>%</p> : null}
+  </div>
+
+const {shape, string, func} = PropTypes
+
+Relative.propTypes = {
+  onRuleTypeInputChange: func.isRequired,
+  onDropdownChange: func.isRequired,
+  rule: shape({
+    values: shape({
+      change: string,
+      shift: string,
+      operator: string,
+      value: string,
     }),
-    onChange: PropTypes.func.isRequired,
-  },
-
-  handleDropdownChange(item) {
-    this.props.onChange({...this.props.rule.values, [item.type]: item.text})
-  },
-
-  handleInputChange() {
-    this.props.onChange({...this.props.rule.values, value: this.input.value})
-  },
-
-  render() {
-    const {change, shift, operator, value} = this.props.rule.values
-
-    const changes = mapToItems(CHANGES, 'change')
-    const shifts = mapToItems(SHIFTS, 'shift')
-    const operators = mapToItems(OPERATORS, 'operator')
-
-    return (
-      <div className="rule-section--row rule-section--border-bottom">
-        <p>Send Alert when</p>
-        <Dropdown
-          className="dropdown-110"
-          menuClass="dropdown-malachite"
-          items={changes}
-          selected={change}
-          onChoose={this.handleDropdownChange}
-        />
-        <p>compared to previous</p>
-        <Dropdown
-          className="dropdown-80"
-          menuClass="dropdown-malachite"
-          items={shifts}
-          selected={shift}
-          onChoose={this.handleDropdownChange}
-        />
-        <p>is</p>
-        <Dropdown
-          className="dropdown-160"
-          menuClass="dropdown-malachite"
-          items={operators}
-          selected={operator}
-          onChoose={this.handleDropdownChange}
-        />
-        <input
-          className="form-control input-sm form-malachite monotype"
-          style={{width: '160px'}}
-          ref={r => (this.input = r)}
-          defaultValue={value}
-          onKeyUp={this.handleInputChange}
-          required={true}
-          type="text"
-          spellCheck="false"
-        />
-        {change === CHANGES[1] ? <p>%</p> : null}
-      </div>
-    )
-  },
-})
+  }),
+}
 
 export default Relative
diff --git a/ui/src/kapacitor/components/Threshold.js b/ui/src/kapacitor/components/Threshold.js
index f7e8fbb9fd..62a4049199 100644
--- a/ui/src/kapacitor/components/Threshold.js
+++ b/ui/src/kapacitor/components/Threshold.js
@@ -9,7 +9,7 @@ const Threshold = ({
   rule: {values: {operator, value, rangeValue}},
   query,
   onDropdownChange,
-  onThresholdInputChange,
+  onRuleTypeInputChange,
 }) =>
   <div className="rule-section--row rule-section--border-bottom">
     <p>Send Alert where</p>
@@ -32,7 +32,7 @@ const Threshold = ({
         name="lower"
         spellCheck="false"
         value={value}
-        onChange={onThresholdInputChange}
+        onChange={onRuleTypeInputChange}
         placeholder={
           operator === 'inside range' || operator === 'outside range'
             ? 'Lower'
@@ -48,7 +48,7 @@ const Threshold = ({
           type="text"
           spellCheck="false"
           value={rangeValue}
-          onChange={onThresholdInputChange}
+          onChange={onRuleTypeInputChange}
         />}
     </form>
   </div>
@@ -65,7 +65,7 @@ Threshold.propTypes = {
     }),
   }),
   onDropdownChange: func.isRequired,
-  onThresholdInputChange: func.isRequired,
+  onRuleTypeInputChange: func.isRequired,
   query: shape({}).isRequired,
 }
 
diff --git a/ui/src/kapacitor/components/ValuesSection.js b/ui/src/kapacitor/components/ValuesSection.js
index d82f69c8c4..8b329e15eb 100644
--- a/ui/src/kapacitor/components/ValuesSection.js
+++ b/ui/src/kapacitor/components/ValuesSection.js
@@ -20,7 +20,7 @@ export const ValuesSection = React.createClass({
     query: PropTypes.shape({}).isRequired,
     onDeadmanChange: PropTypes.func.isRequired,
     onRuleTypeDropdownChange: PropTypes.func.isRequired,
-    onThresholdInputChange: PropTypes.func.isRequired,
+    onRuleTypeInputChange: PropTypes.func.isRequired,
   },
 
   render() {
@@ -29,7 +29,7 @@ export const ValuesSection = React.createClass({
       query,
       onDeadmanChange,
       onRuleTypeDropdownChange,
-      onThresholdInputChange,
+      onRuleTypeInputChange,
     } = this.props
     const initialIndex = TABS.indexOf(_.startCase(rule.trigger))
 
@@ -52,11 +52,15 @@ export const ValuesSection = React.createClass({
                   rule={rule}
                   query={query}
                   onDropdownChange={onRuleTypeDropdownChange}
-                  onThresholdInputChange={onThresholdInputChange}
+                  onRuleTypeInputChange={onRuleTypeInputChange}
                 />
               </TabPanel>
               <TabPanel>
-                <Relative rule={rule} onChange={this.handleValuesChange} />
+                <Relative
+                  rule={rule}
+                  onDropdownChange={onRuleTypeDropdownChange}
+                  onRuleTypeInputChange={onRuleTypeInputChange}
+                />
               </TabPanel>
               <TabPanel>
                 <Deadman rule={rule} onChange={onDeadmanChange} />