Update frontend to use new API values.

ui/src/kapacitor/apis/index.js

@@ -1,22 +1,13 @@
 import AJAX from 'utils/ajax';
 
 function rangeRule(rule) {
-  const {value, rangeValue} = rule.values;
+  const {value, rangeValue, operator} = rule.values;
 
-  if (rule.values.operator === 'within range') {
-    rule.values.operator = 'less than';
-    rule.values.rangeOperator = 'greater than';
+  if (operator === 'inside range' || operator === 'outside range') {
     rule.values.value = Math.min(value, rangeValue).toString();
     rule.values.rangeValue = Math.max(value, rangeValue).toString();
   }
 
-  if (rule.values.operator === 'out of range') {
-    rule.values.operator = 'greater than';
-    rule.values.rangeOperator = 'less than';
-    rule.values.value = Math.max(value, rangeValue).toString();
-    rule.values.rangeValue = Math.min(value, rangeValue).toString();
-  }
-
   return rule;
 }
 

ui/src/kapacitor/components/RuleGraph.js

@@ -85,7 +85,7 @@ export const RuleGraph = React.createClass({
           break;
         }
 
-        case 'out of range': {
+        case 'outside range': {
           const {rangeValue, value} = rule.values;
           highlightStart = Math.min(+value, +rangeValue);
           highlightEnd = Math.max(+value, +rangeValue);
@@ -94,7 +94,7 @@ export const RuleGraph = React.createClass({
           canvas.fillRect(area.x, area.y, area.w, area.h);
           break;
         }
-        case 'within range': {
+        case 'inside range': {
           const {rangeValue, value} = rule.values;
           highlightStart = Math.min(+value, +rangeValue);
           highlightEnd = Math.max(+value, +rangeValue);

ui/src/kapacitor/components/ValuesSection.js

@@ -102,7 +102,7 @@ const Threshold = React.createClass({
         <p>is</p>
         <Dropdown className="size-176 dropdown-kapacitor" items={operators} selected={operator} onChoose={this.handleDropdownChange} />
         <input className="form-control input-sm size-166 form-control--green" type="text" ref={(r) => this.valueInput = r} defaultValue={value} onKeyUp={this.handleInputChange} />
-        { (operator === 'within range' || operator === 'out of range') &&
+        { (operator === 'inside range' || operator === 'outside range') &&
           <input className="form-control input-sm size-166 form-control--green" type="text" ref={(r) => this.valueRangeInput = r} defaultValue={rangeValue} onKeyUp={this.handleInputChange} />
         }
       </div>

ui/src/kapacitor/constants/index.js

@@ -17,7 +17,7 @@ export const defaultRuleConfigs = {
   },
 };
 
-export const OPERATORS = ['greater than', 'equal to or greater', 'equal to or less than', 'less than', 'equal to', 'not equal to', 'within range', 'out of range'];
+export const OPERATORS = ['greater than', 'equal to or greater', 'equal to or less than', 'less than', 'equal to', 'not equal to', 'inside range', 'outside range'];
 // export const RELATIONS = ['once', 'more than ', 'less than'];
 export const PERIODS = ['1m', '5m', '10m', '30m', '1h', '2h', '24h'];
 export const CHANGES = ['change', '% change'];

ui/stories/kapacitor.js

@@ -41,9 +41,9 @@ storiesOf('ValuesSection', module)
       "rangeValue": "20",
     })
   ))
-  .add('Threshold within Range', () => (
+  .add('Threshold inside Range', () => (
     valuesSection('threshold', {
-      "operator": "within range",
+      "operator": "inside range",
       "rangeOperator": "greater than",
       "value": "10",
       "rangeValue": "20",