[ML] Edits to Rule Editor flyout following review

elastic · Jul 22, 2018 · e2d3467 · e2d3467
1 parent c2dff02
commit e2d3467
Show file tree

Hide file tree

Showing 7 changed files with 37 additions and 111 deletions.
diff --git a/x-pack/plugins/ml/public/components/rule_editor/condition_expression.js b/x-pack/plugins/ml/public/components/rule_editor/condition_expression.js
@@ -29,7 +29,7 @@ import {
 import { APPLIES_TO, OPERATOR } from '../../../common/constants/detector_rule';
 import { appliesToText, operatorToText } from './utils';
 
-// Rise the popovers above GuidePageSideNav
+// Raise the popovers above GuidePageSideNav
 const POPOVER_STYLE = { zIndex: '200' };
 
 

diff --git a/x-pack/plugins/ml/public/components/rule_editor/conditions_section.js b/x-pack/plugins/ml/public/components/rule_editor/conditions_section.js
@@ -49,15 +49,15 @@ export function ConditionsSection({
   }
 
   return (
-    <div>
+    <React.Fragment>
       {expressions}
       <EuiSpacer size="s" />
       <EuiButtonEmpty
         onClick={() => addCondition()}
       >
         Add new condition
       </EuiButtonEmpty>
-    </div>
+    </React.Fragment>
   );
 
 }

diff --git a/x-pack/plugins/ml/public/components/rule_editor/rule_editor_flyout.js b/x-pack/plugins/ml/public/components/rule_editor/rule_editor_flyout.js
@@ -84,19 +84,26 @@ export class RuleEditorFlyout extends Component {
   showFlyout = (anomaly) => {
     let ruleIndex = -1;
     const job = mlJobService.getJob(anomaly.jobId);
-    if (job !== undefined) {
-      this.partitioningFieldNames = getPartitioningFieldNames(job, anomaly.detectorIndex);
-
-      // Check if any rules are configured for this detector.
-      const detectorIndex = anomaly.detectorIndex;
-      const detector = job.analysis_config.detectors[detectorIndex];
-      if (detector.custom_rules === undefined) {
-        ruleIndex = 0;
-      }
-
-    } else {
+    if (job === undefined) {
+      // No details found for this job, display an error and
+      // don't open the Flyout as no edits can be made without the job.
       toastNotifications.addDanger(
-        `Error obtaining details for job ID ${anomaly.jobId}`);
+        `Unable to configure rules as an error occurred obtaining details for job ID ${anomaly.jobId}`);
+      this.setState({
+        job,
+        isFlyoutVisible: false
+      });
+
+      return;
+    }
+
+    this.partitioningFieldNames = getPartitioningFieldNames(job, anomaly.detectorIndex);
+
+    // Check if any rules are configured for this detector.
+    const detectorIndex = anomaly.detectorIndex;
+    const detector = job.analysis_config.detectors[detectorIndex];
+    if (detector.custom_rules === undefined) {
+      ruleIndex = 0;
     }
 
     let isConditionsEnabled = false;
@@ -400,6 +407,9 @@ export class RuleEditorFlyout extends Component {
         </EuiFlyout>
       );
     } else {
+      const conditionsText = 'Add numeric conditions to take action according ' +
+        'to the actual or typical values of the anomaly. Multiple conditions are ' +
+        'combined using AND.';
       flyout = (
         <EuiFlyout
           className="ml-rule-editor-flyout"
@@ -443,7 +453,7 @@ export class RuleEditorFlyout extends Component {
             <EuiCheckbox
               id="enable_conditions_checkbox"
               className="scope-enable-checkbox"
-              label="Add numeric conditions to take action according to the actual or typical values of the anomaly"
+              label={conditionsText}
               checked={isConditionsEnabled}
               onChange={this.onConditionsEnabledChange}
               disabled={!hasPartitioningFields}
@@ -513,9 +523,9 @@ export class RuleEditorFlyout extends Component {
     }
 
     return (
-      <div>
+      <React.Fragment>
         {flyout}
-      </div>
+      </React.Fragment>
     );
 
   }

diff --git a/x-pack/plugins/ml/public/components/rule_editor/save_rule_modal.js b/x-pack/plugins/ml/public/components/rule_editor/save_rule_modal.js
diff --git a/x-pack/plugins/ml/public/components/rule_editor/scope_expression.js b/x-pack/plugins/ml/public/components/rule_editor/scope_expression.js
@@ -28,7 +28,7 @@ import {
 import { FILTER_TYPE } from '../../../common/constants/detector_rule';
 import { filterTypeToText } from './utils';
 
-// Rise the popovers above GuidePageSideNav
+// Raise the popovers above GuidePageSideNav
 const POPOVER_STYLE = { zIndex: '200' };
 
 function getFilterListOptions(filterListIds) {

diff --git a/x-pack/plugins/ml/public/components/rule_editor/select_rule_action/delete_rule_modal.js b/x-pack/plugins/ml/public/components/rule_editor/select_rule_action/delete_rule_modal.js
@@ -65,15 +65,15 @@ export class DeleteRuleModal extends Component {
     }
 
     return (
-      <div>
+      <React.Fragment>
         <EuiLink
           color="danger"
           onClick={() => this.showModal()}
         >
           Delete rule
         </EuiLink>
         {modal}
-      </div>
+      </React.Fragment>
     );
   }
 }

diff --git a/x-pack/plugins/ml/public/components/rule_editor/select_rule_action/rule_action_panel.js b/x-pack/plugins/ml/public/components/rule_editor/select_rule_action/rule_action_panel.js
@@ -47,9 +47,13 @@ export function RuleActionPanel({
   setEditRuleIndex,
   deleteRuleAtIndex,
 }) {
-
   const detector = job.analysis_config.detectors[detectorIndex];
-  const rule = detector.custom_rules[ruleIndex];
+  const rules = detector.custom_rules;
+  if (rules === undefined || ruleIndex >= rules.length) {
+    return null;
+  }
+
+  const rule = rules[ruleIndex];
 
   const descriptionListItems = [
     {