Fixed default message for index threshold includes both threshold val…

…ues (#60545) * Fixed default message for index threshold includes both threshold values even if not used * fixed due to review comments * Fixed validation errors with ability to clear input
elastic · Mar 18, 2020 · 3600f5b · 3600f5b
1 parent 60d385e
commit 3600f5b
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 8 deletions.
diff --git a/...ers_actions_ui/public/application/components/builtin_alert_types/threshold/expression.tsx b/...ers_actions_ui/public/application/components/builtin_alert_types/threshold/expression.tsx
@@ -50,7 +50,7 @@ const DEFAULT_VALUES = {
   THRESHOLD_COMPARATOR: COMPARATORS.GREATER_THAN,
   TIME_WINDOW_SIZE: 5,
   TIME_WINDOW_UNIT: 'm',
-  THRESHOLD: [1000, 5000],
+  THRESHOLD: [1000],
   GROUP_BY: 'all',
 };
 

diff --git a/...gers_actions_ui/public/application/components/builtin_alert_types/threshold/validation.ts b/...gers_actions_ui/public/application/components/builtin_alert_types/threshold/validation.ts
@@ -89,7 +89,7 @@ export const validateExpression = (alertParams: IndexThresholdAlertParams): Vali
       })
     );
   }
-  if (!threshold || threshold.length === 0 || (threshold.length === 1 && !threshold[0])) {
+  if (!threshold || threshold.length === 0 || threshold[0] === undefined) {
     errors.threshold0.push(
       i18n.translate('xpack.triggersActionsUI.sections.addAlert.error.requiredThreshold0Text', {
         defaultMessage: 'Threshold0 is required.',
@@ -100,6 +100,7 @@ export const validateExpression = (alertParams: IndexThresholdAlertParams): Vali
     thresholdComparator &&
     builtInComparators[thresholdComparator].requiredValues > 1 &&
     (!threshold ||
+      threshold[1] === undefined ||
       (threshold && threshold.length < builtInComparators[thresholdComparator!].requiredValues))
   ) {
     errors.threshold1.push(

diff --git a/x-pack/plugins/triggers_actions_ui/public/common/expression_items/threshold.test.tsx b/x-pack/plugins/triggers_actions_ui/public/common/expression_items/threshold.test.tsx
@@ -15,7 +15,7 @@ describe('threshold expression', () => {
     const wrapper = shallow(
       <ThresholdExpression
         thresholdComparator={'between'}
-        errors={{ threshold0: [] }}
+        errors={{ threshold0: [], threshold1: [] }}
         onChangeSelectedThreshold={onChangeSelectedThreshold}
         onChangeSelectedThresholdComparator={onChangeSelectedThresholdComparator}
       />
@@ -59,7 +59,7 @@ describe('threshold expression', () => {
     const wrapper = shallow(
       <ThresholdExpression
         thresholdComparator={'between'}
-        errors={{ threshold0: [] }}
+        errors={{ threshold0: [], threshold1: [] }}
         onChangeSelectedThreshold={onChangeSelectedThreshold}
         onChangeSelectedThresholdComparator={onChangeSelectedThresholdComparator}
       />

diff --git a/x-pack/plugins/triggers_actions_ui/public/common/expression_items/threshold.tsx b/x-pack/plugins/triggers_actions_ui/public/common/expression_items/threshold.tsx
@@ -105,6 +105,11 @@ export const ThresholdExpression = ({
               value={thresholdComparator}
               onChange={e => {
                 onChangeSelectedThresholdComparator(e.target.value);
+                const thresholdValues = threshold.slice(
+                  0,
+                  comparators[e.target.value].requiredValues
+                );
+                onChangeSelectedThreshold(thresholdValues);
               }}
               options={Object.values(comparators).map(({ text, value }) => {
                 return { text, value };
@@ -123,18 +128,23 @@ export const ThresholdExpression = ({
                   </EuiFlexItem>
                 ) : null}
                 <EuiFlexItem grow={false}>
-                  <EuiFormRow>
+                  <EuiFormRow
+                    isInvalid={errors[`threshold${i}`].length > 0 || !threshold[i]}
+                    error={errors[`threshold${i}`]}
+                  >
                     <EuiFieldNumber
                       data-test-subj="alertThresholdInput"
-                      value={!threshold || threshold[i] === null ? 0 : threshold[i]}
                       min={0}
-                      step={0.1}
+                      value={!threshold || threshold[i] === undefined ? '' : threshold[i]}
+                      isInvalid={errors[`threshold${i}`].length > 0 || !threshold[i]}
                       onChange={e => {
                         const { value } = e.target;
                         const thresholdVal = value !== '' ? parseFloat(value) : undefined;
                         const newThreshold = [...threshold];
-                        if (thresholdVal) {
+                        if (thresholdVal !== undefined) {
                           newThreshold[i] = thresholdVal;
+                        } else {
+                          delete newThreshold[i];
                         }
                         onChangeSelectedThreshold(newThreshold);
                       }}