adding support for >=, <=, and between for threshold alerts

x-pack/plugins/watcher/common/constants/comparators.ts

@@ -6,6 +6,8 @@
 
 export const COMPARATORS: { [key: string]: string } = {
   GREATER_THAN: '>',
-
+  GREATER_THAN_OR_EQUALS: '>=',
+  BETWEEN: 'between',
   LESS_THAN: '<',
+  LESS_THAN_OR_EQUALS: '<=',
 };

x-pack/plugins/watcher/public/components/form_errors.tsx

@@ -6,7 +6,6 @@
 
 import { EuiFormRow } from '@elastic/eui';
 import React, { Children, cloneElement, Fragment, ReactElement } from 'react';
-
 export const ErrableFormRow = ({
   errorKey,
   isShowingErrors,

x-pack/plugins/watcher/public/models/watch/comparators.ts

@@ -0,0 +1,61 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { i18n } from '@kbn/i18n';
+
+import { COMPARATORS } from '../../../common/constants';
+
+export interface Comparator {
+  text: string;
+  value: string;
+  requiredValues: number;
+}
+export const comparators: { [key: string]: Comparator } = {
+  [COMPARATORS.GREATER_THAN]: {
+    text: i18n.translate('xpack.watcher.thresholdWatchExpression.comparators.isAboveLabel', {
+      defaultMessage: 'Is above',
+    }),
+    value: COMPARATORS.GREATER_THAN,
+    requiredValues: 1,
+  },
+  [COMPARATORS.GREATER_THAN_OR_EQUALS]: {
+    text: i18n.translate(
+      'xpack.watcher.thresholdWatchExpression.comparators.isAboveOrEqualsLabel',
+      {
+        defaultMessage: 'Is above or equals',
+      }
+    ),
+    value: COMPARATORS.GREATER_THAN_OR_EQUALS,
+    requiredValues: 1,
+  },
+  [COMPARATORS.LESS_THAN]: {
+    text: i18n.translate('xpack.watcher.thresholdWatchExpression.comparators.isBelowLabel', {
+      defaultMessage: 'Is below',
+    }),
+    value: COMPARATORS.LESS_THAN,
+    requiredValues: 1,
+  },
+  [COMPARATORS.LESS_THAN_OR_EQUALS]: {
+    text: i18n.translate(
+      'xpack.watcher.thresholdWatchExpression.comparators.isBelowOrEqualsLabel',
+      {
+        defaultMessage: 'Is below or equals',
+      }
+    ),
+    value: COMPARATORS.LESS_THAN_OR_EQUALS,
+    requiredValues: 1,
+  },
+  [COMPARATORS.BETWEEN]: {
+    text: i18n.translate(
+      'xpack.watcher.thresholdWatchExpression.comparators.isBelowOrEqualsLabel',
+      {
+        defaultMessage: 'Is between',
+      }
+    ),
+    value: COMPARATORS.BETWEEN,
+    requiredValues: 2,
+  },
+};

x-pack/plugins/watcher/public/models/watch/threshold_watch.js

@@ -11,6 +11,7 @@ import { getTimeUnitsLabel } from 'plugins/watcher/lib/get_time_units_label';
 import { i18n } from '@kbn/i18n';
 import { aggTypes } from './agg_types';
 import { groupByTypes } from './group_by_types';
+import { comparators } from './comparators';
 const DEFAULT_VALUES = {
   AGG_TYPE: 'count',
   TERM_SIZE: 5,
@@ -19,7 +20,7 @@ const DEFAULT_VALUES = {
   TIME_WINDOW_UNIT: 'm',
   TRIGGER_INTERVAL_SIZE: 1,
   TRIGGER_INTERVAL_UNIT: 'm',
-  THRESHOLD: 1000,
+  THRESHOLD: [1000, 5000],
   GROUP_BY: 'all',
 };
 
@@ -102,7 +103,6 @@ export class ThresholdWatch extends BaseWatch {
       aggField: [],
       termSize: [],
       termField: [],
-      threshold: [],
       timeWindowSize: [],
     };
     validationResult.errors = errors;
@@ -176,15 +176,29 @@ export class ThresholdWatch extends BaseWatch {
         );
       }
     }
-    if (!this.threshold) {
-      errors.threshold.push(
-        i18n.translate(
+
+    Array.from(Array(comparators[this.thresholdComparator].requiredValues)).forEach((value, i) => {
+      const key = `threshold${i}`;
+      errors[key] = [];
+      if (!this.threshold[i]) {
+        errors[key].push(i18n.translate(
           'xpack.watcher.thresholdWatchExpression.thresholdLevel.valueIsRequiredValidationMessage',
           {
             defaultMessage: 'A value is required.',
           }
-        )
-      );
+        ));
+      }
+    });
+    if (this.thresholdComparator === 'between' && this.threshold[0] && this.threshold[1] && !(this.threshold[1] > this.threshold[0])) {
+      errors.threshold1.push(i18n.translate(
+        'xpack.watcher.thresholdWatchExpression.thresholdLevel.secondValueMustBeGreaterMessage',
+        {
+          defaultMessage: 'This value must be greater than {lowerBound}.',
+          values: {
+            lowerBound: this.threshold[0]
+          }
+        }
+      ));
     }
     if (!this.timeWindowSize) {
       errors.timeWindowSize.push(
@@ -212,7 +226,7 @@ export class ThresholdWatch extends BaseWatch {
       thresholdComparator: this.thresholdComparator,
       timeWindowSize: this.timeWindowSize,
       timeWindowUnit: this.timeWindowUnit,
-      threshold: this.threshold,
+      threshold: comparators[this.thresholdComparator].requiredValues > 1 ? this.threshold : this.threshold[0],
     });
 
     return result;

x-pack/plugins/watcher/public/sections/watch_edit/components/threshold_watch_edit.tsx

@@ -5,7 +5,6 @@
  */
 
 import React, { Fragment, useContext, useEffect, useState } from 'react';
-
 import {
   EuiButton,
   EuiButtonEmpty,
@@ -32,7 +31,7 @@ import { ErrableFormRow } from '../../../components/form_errors';
 import { fetchFields, getMatchingIndices, loadIndexPatterns } from '../../../lib/api';
 import { aggTypes } from '../../../models/watch/agg_types';
 import { groupByTypes } from '../../../models/watch/group_by_types';
-import { comparators } from '../comparators';
+import { comparators } from '../../../models/watch/comparators';
 import { timeUnits } from '../time_units';
 import { onWatchSave, saveWatch } from '../watch_edit_actions';
 import { WatchContext } from './watch_context';
@@ -156,11 +155,21 @@ const ThresholdWatchEditUi = ({ intl, pageTitle }: { intl: InjectedIntl; pageTit
       defaultMessage: 'Please fix the errors in the expression below.',
     }
   );
-  const expressionFields = ['aggField', 'termSize', 'termField', 'threshold', 'timeWindowSize'];
+  const expressionFields = [
+    'aggField',
+    'termSize',
+    'termField',
+    'threshold0',
+    'threshold1',
+    'timeWindowSize',
+  ];
   const hasExpressionErrors = !!Object.keys(errors).find(
     errorKey => expressionFields.includes(errorKey) && errors[errorKey].length >= 1
   );
   const shouldShowThresholdExpression = watch.index && watch.index.length > 0 && watch.timeField;
+  const andThresholdText = i18n.translate('xpack.watcher.sections.watchEdit.threshold.andLabel', {
+    defaultMessage: 'AND',
+  });
   return (
     <EuiPageContent>
       <EuiFlexGroup justifyContent="spaceBetween" alignItems="flexEnd">
@@ -506,22 +515,22 @@ const ThresholdWatchEditUi = ({ intl, pageTitle }: { intl: InjectedIntl; pageTit
                       description={`${
                         groupByTypes[watch.groupBy].sizeRequired
                           ? i18n.translate(
-                              'xpack.watcher.sections.watchEdit.threshold.groupedOverLabel',
-                              {
-                                defaultMessage: 'grouped over',
-                              }
-                            )
+                            'xpack.watcher.sections.watchEdit.threshold.groupedOverLabel',
+                            {
+                              defaultMessage: 'grouped over',
+                            }
+                          )
                           : i18n.translate('xpack.watcher.sections.watchEdit.threshold.overLabel', {
-                              defaultMessage: 'over',
-                            })
-                      }`}
+                            defaultMessage: 'over',
+                          })
+                        }`}
                       value={`${groupByTypes[watch.groupBy].text} ${
                         groupByTypes[watch.groupBy].sizeRequired
                           ? `${watch.termSize || ''} ${
-                              watch.termField ? `'${watch.termField}'` : ''
-                            }`
+                          watch.termField ? `'${watch.termField}'` : ''
+                          }`
                           : ''
-                      }`}
+                        }`}
                       isActive={
                         groupByPopoverOpen ||
                         (watch.groupBy === 'top' && !(watch.termSize && watch.termField))
@@ -630,7 +639,9 @@ const ThresholdWatchEditUi = ({ intl, pageTitle }: { intl: InjectedIntl; pageTit
                   button={
                     <EuiExpression
                       description={comparators[watch.thresholdComparator].text}
-                      value={watch.threshold}
+                      value={watch.threshold
+                        .slice(0, comparators[watch.thresholdComparator].requiredValues)
+                        .join(` ${andThresholdText} `)}
                       isActive={watchThresholdPopoverOpen || !watch.threshold}
                       onClick={() => {
                         setWatchThresholdPopoverOpen(true);
@@ -655,26 +666,43 @@ const ThresholdWatchEditUi = ({ intl, pageTitle }: { intl: InjectedIntl; pageTit
                           onChange={e => {
                             setWatchProperty('thresholdComparator', e.target.value);
                           }}
-                          options={Object.values(comparators)}
+                          options={Object.values(comparators).map(({ text, value }) => {
+                            return { text, value };
+                          })}
                         />
                       </EuiFlexItem>
-                      <EuiFlexItem grow={false}>
-                        <ErrableFormRow
-                          errorKey="threshold"
-                          isShowingErrors={hasErrors}
-                          errors={errors}
-                        >
-                          <EuiFieldNumber
-                            value={watch.threshold}
-                            min={1}
-                            onChange={e => {
-                              const { value } = e.target;
-                              const threshold = value !== '' ? parseInt(value, 10) : value;
-                              setWatchProperty('threshold', threshold);
-                            }}
-                          />
-                        </ErrableFormRow>
-                      </EuiFlexItem>
+                      {Array.from(Array(comparators[watch.thresholdComparator].requiredValues)).map(
+                        (notUsed, i) => {
+                          return (
+                            <Fragment key={`threshold${i}`}>
+                              {i > 0 ? (
+                                <EuiFlexItem grow={false}>
+                                  <EuiText>{andThresholdText}</EuiText>
+                                </EuiFlexItem>
+                              ) : null}
+                              <EuiFlexItem grow={false}>
+                                <ErrableFormRow
+                                  errorKey={`threshold${i}`}
+                                  isShowingErrors={hasErrors}
+                                  errors={errors}
+                                >
+                                  <EuiFieldNumber
+                                    value={watch.threshold[i]}
+                                    min={1}
+                                    onChange={e => {
+                                      const { value } = e.target;
+                                      const threshold = value !== '' ? parseInt(value, 10) : value;
+                                      const newThreshold = [...watch.threshold];
+                                      newThreshold[i] = threshold;
+                                      setWatchProperty('threshold', newThreshold);
+                                    }}
+                                  />
+                                </ErrableFormRow>
+                              </EuiFlexItem>
+                            </Fragment>
+                          );
+                        }
+                      )}
                     </EuiFlexGroup>
                   </div>
                 </EuiPopover>
@@ -694,7 +722,7 @@ const ThresholdWatchEditUi = ({ intl, pageTitle }: { intl: InjectedIntl; pageTit
                         watch.timeWindowSize && parseInt(watch.timeWindowSize, 10) === 1
                           ? timeUnits[watch.timeWindowUnit].labelSingular
                           : timeUnits[watch.timeWindowUnit].labelPlural
-                      }`}
+                        }`}
                       isActive={watchDurationPopoverOpen || !watch.timeWindowSize}
                       onClick={() => {
                         setWatchDurationPopoverOpen(true);

x-pack/plugins/watcher/public/sections/watch_edit/components/watch_visualization.tsx

@@ -163,17 +163,22 @@ const WatchVisualizationUi = () => {
               />
             );
           })}
-          <LineSeries
-            id={getSpecId('threshold')}
-            xScaleType={ScaleType.Time}
-            yScaleType={ScaleType.Linear}
-            data={[[domain.min, watch.threshold], [domain.max, watch.threshold]]}
-            xAccessor={0}
-            yAccessors={[1]}
-            timeZone={timezone}
-            yScaleToDataExtent={true}
-            customSeriesColors={thresholdCustomSeriesColors}
-          />
+          {watch.threshold.map((value, i) => {
+            return (
+              <LineSeries
+                key={`threshold${i}`}
+                id={getSpecId(`threshold${i}`)}
+                xScaleType={ScaleType.Time}
+                yScaleType={ScaleType.Linear}
+                data={[[domain.min, watch.threshold[i]], [domain.max, watch.threshold[i]]]}
+                xAccessor={0}
+                yAccessors={[1]}
+                timeZone={timezone}
+                yScaleToDataExtent={true}
+                customSeriesColors={thresholdCustomSeriesColors}
+              />
+            );
+          })}
         </Chart>
       ) : (
         <EuiCallOut