From e2d3467a6655d1ea0bd85cc3a57950b6b74a06cf Mon Sep 17 00:00:00 2001 From: Pete Harverson Date: Fri, 20 Jul 2018 15:50:34 +0100 Subject: [PATCH] [ML] Edits to Rule Editor flyout following review --- .../rule_editor/condition_expression.js | 2 +- .../rule_editor/conditions_section.js | 4 +- .../rule_editor/rule_editor_flyout.js | 40 +++++---- .../components/rule_editor/save_rule_modal.js | 88 ------------------- .../rule_editor/scope_expression.js | 2 +- .../select_rule_action/delete_rule_modal.js | 4 +- .../select_rule_action/rule_action_panel.js | 8 +- 7 files changed, 37 insertions(+), 111 deletions(-) delete mode 100644 x-pack/plugins/ml/public/components/rule_editor/save_rule_modal.js 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 index d6fc173e25355..be1ee6093b1f7 100644 --- 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 index 354c73be33186..d3972a2e29be7 100644 --- 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,7 +49,7 @@ export function ConditionsSection({ } return ( -
+ {expressions} Add new condition -
+ ); } 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 index 0e7c836d29439..1a719c6c93756 100644 --- 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 { ); } 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 = ( + {flyout} - + ); } 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 deleted file mode 100644 index ec56cd19181ec..0000000000000 --- a/x-pack/plugins/ml/public/components/rule_editor/save_rule_modal.js +++ /dev/null @@ -1,88 +0,0 @@ -/* - * 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 PropTypes from 'prop-types'; -import React, { - Component, -} from 'react'; - -import { - EuiButton, - EuiConfirmModal, - EuiOverlayMask, - EUI_MODAL_CONFIRM_BUTTON, -} from '@elastic/eui'; - - -/* - * React modal for validating and saving edits to a rule. - */ -export class SaveRuleModal extends Component { - constructor(props) { - super(props); - - this.state = { - isModalVisible: false - }; - } - - closeModal = () => { - this.setState({ isModalVisible: false }); - } - - showModal = () => { - this.setState({ isModalVisible: true }); - } - - validateAndSave = () => { - this.setState({ isModalVisible: true }); - } - - render() { - let modal; - - if (this.state.isModalVisible) { - modal = ( - - -

- Invalid rule -

- - - ); - } - - return ( -
- - Save - - - {modal} -
- ); - } -} -SaveRuleModal.propTypes = { - job: PropTypes.object.isRequired, - detectorIndex: PropTypes.number.isRequired, - rule: PropTypes.object.isRequired, - ruleIndex: PropTypes.number.isRequired -}; - - 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 index f4169554e627d..28c97c11180c2 100644 --- 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 index 8ea7c0f50780b..4892b9d474c7a 100644 --- 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,7 +65,7 @@ export class DeleteRuleModal extends Component { } return ( -
+ this.showModal()} @@ -73,7 +73,7 @@ export class DeleteRuleModal extends Component { Delete rule {modal} -
+ ); } } 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 index fee0a8224f7b0..8116f207d417d 100644 --- 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 = [ {