Update visualization for out of range rule

ui/src/kapacitor/components/RuleGraph.js

@@ -4,6 +4,7 @@ import AutoRefresh from 'shared/components/AutoRefresh';
 import LineGraph from 'shared/components/LineGraph';
 const RefreshingLineGraph = AutoRefresh(LineGraph);
 
+const OUT_OF_RANGE = "out of range";
 export const RuleGraph = React.createClass({
   propTypes: {
     source: PropTypes.shape({
@@ -25,7 +26,7 @@ export const RuleGraph = React.createClass({
   },
 
   renderGraph() {
-    const {query, source, timeRange} = this.props;
+    const {query, source, timeRange, rule} = this.props;
     const autoRefreshMs = 30000;
     const queryText = selectStatement({lower: timeRange.queryValue}, query);
     const queries = [{host: source.links.proxy, text: queryText}];
@@ -39,8 +40,27 @@ export const RuleGraph = React.createClass({
       );
     }
 
+    const {value, rangeValue, operator} = rule.values;
+    const tenPercent = 0.1;
+    let lower, upper;
+    let upperRange, lowerRange;
+
+    if (value !== "" && operator === OUT_OF_RANGE) {
+      lower = Math.min(+rule.values.rangeValue, +rule.values.value);
+      lowerRange = lower ? lower + lower * tenPercent : null;
+    }
+
+    if (rangeValue !== "" && operator === OUT_OF_RANGE) {
+      upper = Math.max(+rule.values.rangeValue, +rule.values.value);
+      upperRange = upper ? upper + upper * tenPercent : null;
+    }
+
+    // if either value is null, Dygraph will choose a sensible default
+    const range = {y: [lowerRange, upperRange]};
+
     return (
       <RefreshingLineGraph
+        ranges={range}
         queries={queries}
         autoRefresh={autoRefreshMs}
         underlayCallback={this.createUnderlayCallback()}
@@ -84,7 +104,15 @@ export const RuleGraph = React.createClass({
           break;
         }
 
-        case 'out of range':
+        case 'out of range': {
+          const {rangeValue, value} = rule.values;
+          highlightStart = Math.min(+value, +rangeValue);
+          highlightEnd = Math.max(+value, +rangeValue);
+
+          canvas.fillStyle = 'rgba(78, 216, 160, 0.3)';
+          canvas.fillRect(area.x, area.y, area.w, area.h);
+          break;
+        }
         case 'within range': {
           const {rangeValue, value} = rule.values;
           highlightStart = Math.min(+value, +rangeValue);
@@ -96,7 +124,7 @@ export const RuleGraph = React.createClass({
       const bottom = dygraph.toDomYCoord(highlightStart);
       const top = dygraph.toDomYCoord(highlightEnd);
 
-      canvas.fillStyle = 'rgba(78,216,160,0.3)';
+      canvas.fillStyle = rule.values.operator === 'out of range' ? 'rgba(41, 41, 51, 1)' : 'rgba(78, 216, 160, 0.3)';
       canvas.fillRect(area.x, top, area.w, bottom - top);
     };
   },

ui/src/shared/components/Dygraph.js

@@ -25,8 +25,8 @@ export default React.createClass({
 
   propTypes: {
     ranges: shape({
-      y: arrayOf(number.isRequired),
+      y: arrayOf(number),
-      y2: arrayOf(number.isRequired),
+      y2: arrayOf(number),
     }),
     timeSeries: array.isRequired, // eslint-disable-line react/forbid-prop-types
     labels: array.isRequired, // eslint-disable-line react/forbid-prop-types

ui/src/shared/components/LineGraph.js

@@ -11,6 +11,10 @@ export default React.createClass({
   displayName: 'LineGraph',
   propTypes: {
     data: PropTypes.arrayOf(PropTypes.shape({}).isRequired).isRequired,
+    ranges: PropTypes.shape({
+      y: PropTypes.arrayOf(PropTypes.number),
+      y2: PropTypes.arrayOf(PropTypes.number),
+    }),
     title: PropTypes.string,
     isFetchingInitially: PropTypes.bool,
     isRefreshing: PropTypes.bool,
@@ -46,7 +50,7 @@ export default React.createClass({
   },
 
   render() {
-    const {data, isFetchingInitially, isRefreshing, isGraphFilled, overrideLineColors, title, underlayCallback, queries, showSingleStat} = this.props;
+    const {data, ranges, isFetchingInitially, isRefreshing, isGraphFilled, overrideLineColors, title, underlayCallback, queries, showSingleStat} = this.props;
     const {labels, timeSeries, dygraphSeries} = this._timeSeries;
 
     // If data for this graph is being fetched for the first time, show a graph-wide spinner.
@@ -94,7 +98,7 @@ export default React.createClass({
           labels={labels}
           options={options}
           dygraphSeries={dygraphSeries}
-          ranges={this.getRanges()}
+          ranges={ranges || this.getRanges()}
         />
         {showSingleStat ? <div className="graph-single-stat single-stat">{roundedValue}</div> : null}
       </div>