[ML] Adds editor for configuring detector rules (elastic#20989) (elas…

…tic#21067)

* [ML] Adds editor for configuring detector rules

* [ML] Edits to Rule Editor flyout following review

x-pack/plugins/ml/common/constants/detector_rule.js

@@ -0,0 +1,33 @@
+/*
+ * 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.
+ */
+
+/*
+ * Contains values for ML job detector rules.
+ */
+
+
+export const ACTION = {
+  SKIP_MODEL_UPDATE: 'skip_model_update',
+  SKIP_RESULT: 'skip_result',
+};
+
+export const FILTER_TYPE = {
+  EXCLUDE: 'exclude',
+  INCLUDE: 'include',
+};
+
+export const APPLIES_TO = {
+  ACTUAL: 'actual',
+  DIFF_FROM_TYPICAL: 'diff_from_typical',
+  TYPICAL: 'typical',
+};
+
+export const OPERATOR = {
+  LESS_THAN: 'lt',
+  LESS_THAN_OR_EQUAL: 'lte',
+  GREATER_THAN: 'gt',
+  GREATER_THAN_OR_EQUAL: 'gte',
+};

x-pack/plugins/ml/common/util/__tests__/job_utils.js

@@ -12,6 +12,7 @@ import {
   isTimeSeriesViewJob,
   isTimeSeriesViewDetector,
   isTimeSeriesViewFunction,
+  getPartitioningFieldNames,
   isModelPlotEnabled,
   isJobVersionGte,
   mlFunctionToESAggregation,
@@ -201,6 +202,68 @@ describe('ML - job utils', () => {
     });
   });
 
+  describe('getPartitioningFieldNames', () => {
+    const job = {
+      analysis_config: {
+        detectors: [
+          {
+            function: 'count',
+            detector_description: 'count'
+          },
+          {
+            function: 'count',
+            partition_field_name: 'clientip',
+            detector_description: 'Count by clientip'
+          },
+          {
+            function: 'freq_rare',
+            by_field_name: 'uri',
+            over_field_name: 'clientip',
+            detector_description: 'Freq rare URI'
+          },
+          {
+            function: 'sum',
+            field_name: 'bytes',
+            by_field_name: 'uri',
+            over_field_name: 'clientip',
+            partition_field_name: 'method',
+            detector_description: 'sum bytes'
+          },
+        ]
+      }
+    };
+
+    it('returns empty array for a detector with no partitioning fields', () => {
+      const resp = getPartitioningFieldNames(job, 0);
+      expect(resp).to.be.an('array');
+      expect(resp).to.be.empty();
+    });
+
+    it('returns expected array for a detector with a partition field', () => {
+      const resp = getPartitioningFieldNames(job, 1);
+      expect(resp).to.be.an('array');
+      expect(resp).to.have.length(1);
+      expect(resp).to.contain('clientip');
+    });
+
+    it('returns expected array for a detector with by and over fields', () => {
+      const resp = getPartitioningFieldNames(job, 2);
+      expect(resp).to.be.an('array');
+      expect(resp).to.have.length(2);
+      expect(resp).to.contain('uri');
+      expect(resp).to.contain('clientip');
+    });
+
+    it('returns expected array for a detector with partition, by and over fields', () => {
+      const resp = getPartitioningFieldNames(job, 3);
+      expect(resp).to.be.an('array');
+      expect(resp).to.have.length(3);
+      expect(resp).to.contain('uri');
+      expect(resp).to.contain('clientip');
+      expect(resp).to.contain('method');
+    });
+  });
+
   describe('isModelPlotEnabled', () => {
 
     it('returns true for a job in which model plot has been enabled', () => {

x-pack/plugins/ml/common/util/job_utils.js

@@ -88,6 +88,24 @@ export function isTimeSeriesViewFunction(functionName) {
   return mlFunctionToESAggregation(functionName) !== null;
 }
 
+// Returns the names of the partition, by, and over fields for the detector with the
+// specified index from the supplied ML job configuration.
+export function getPartitioningFieldNames(job, detectorIndex) {
+  const fieldNames = [];
+  const detector = job.analysis_config.detectors[detectorIndex];
+  if (_.has(detector, 'partition_field_name')) {
+    fieldNames.push(detector.partition_field_name);
+  }
+  if (_.has(detector, 'by_field_name')) {
+    fieldNames.push(detector.by_field_name);
+  }
+  if (_.has(detector, 'over_field_name')) {
+    fieldNames.push(detector.over_field_name);
+  }
+
+  return fieldNames;
+}
+
 // Returns a flag to indicate whether model plot has been enabled for a job.
 // If model plot is enabled for a job with a terms filter (comma separated
 // list of partition or by field names), performs additional checks that

x-pack/plugins/ml/public/components/anomalies_table/anomalies_table.js

@@ -37,6 +37,7 @@ import { mlAnomaliesTableService } from './anomalies_table_service';
 import { mlFieldFormatService } from 'plugins/ml/services/field_format_service';
 import { getSeverityColor } from 'plugins/ml/../common/util/anomaly_utils';
 import { formatValue } from 'plugins/ml/formatters/format_value';
+import { RuleEditorFlyout } from 'plugins/ml/components/rule_editor';
 
 
 const INFLUENCERS_LIMIT = 5;    // Maximum number of influencers to display before a 'show more' link is added.
@@ -53,7 +54,10 @@ function renderTime(date, aggregationInterval) {
 }
 
 function showLinksMenuForItem(item) {
-  return item.isTimeSeriesViewDetector ||
+  // TODO - add in checking of user privileges to see if they can view / edit rules.
+  const canViewRules = true;
+  return canViewRules ||
+    item.isTimeSeriesViewDetector ||
     item.entityName === 'mlcategory' ||
     item.customUrls !== undefined;
 }
@@ -65,9 +69,11 @@ function getColumns(
   interval,
   timefilter,
   showViewSeriesLink,
+  showRuleEditorFlyout,
   itemIdToExpandedRowMap,
   toggleRow,
   filter) {
+
   const columns = [
     {
       name: '',
@@ -186,12 +192,11 @@ function getColumns(
     sortable: true
   });
 
-  const showExamples = items.some(item => item.entityName === 'mlcategory');
   const showLinks = (showViewSeriesLink === true) || items.some(item => showLinksMenuForItem(item));
 
   if (showLinks === true) {
     columns.push({
-      name: 'links',
+      name: 'actions',
       render: (item) => {
         if (showLinksMenuForItem(item) === true) {
           return (
@@ -201,6 +206,7 @@ function getColumns(
               isAggregatedData={isAggregatedData}
               interval={interval}
               timefilter={timefilter}
+              showRuleEditorFlyout={showRuleEditorFlyout}
             />
           );
         } else {
@@ -211,6 +217,7 @@ function getColumns(
     });
   }
 
+  const showExamples = items.some(item => item.entityName === 'mlcategory');
   if (showExamples === true) {
     columns.push({
       name: 'category examples',
@@ -238,7 +245,8 @@ class AnomaliesTable extends Component {
     super(props);
 
     this.state = {
-      itemIdToExpandedRowMap: {}
+      itemIdToExpandedRowMap: {},
+      showRuleEditorFlyout: () => {}
     };
   }
 
@@ -313,6 +321,19 @@ class AnomaliesTable extends Component {
     }
   };
 
+  setShowRuleEditorFlyoutFunction = (func) => {
+    this.setState({
+      showRuleEditorFlyout: func
+    });
+  }
+
+  unsetShowRuleEditorFlyoutFunction = () => {
+    const showRuleEditorFlyout = () => {};
+    this.setState({
+      showRuleEditorFlyout
+    });
+  }
+
   render() {
     const { timefilter, tableData, filter } = this.props;
 
@@ -336,6 +357,7 @@ class AnomaliesTable extends Component {
       tableData.interval,
       timefilter,
       tableData.showViewSeriesLink,
+      this.state.showRuleEditorFlyout,
       this.state.itemIdToExpandedRowMap,
       this.toggleRow,
       filter);
@@ -355,20 +377,26 @@ class AnomaliesTable extends Component {
     };
 
     return (
-      <EuiInMemoryTable
-        className="ml-anomalies-table eui-textBreakWord"
-        items={tableData.anomalies}
-        columns={columns}
-        pagination={{
-          pageSizeOptions: [10, 25, 100],
-          initialPageSize: 25
-        }}
-        sorting={sorting}
-        itemId="rowId"
-        itemIdToExpandedRowMap={this.state.itemIdToExpandedRowMap}
-        compressed={true}
-        rowProps={getRowProps}
-      />
+      <React.Fragment>
+        <RuleEditorFlyout
+          setShowFunction={this.setShowRuleEditorFlyoutFunction}
+          unsetShowFunction={this.unsetShowRuleEditorFlyoutFunction}
+        />
+        <EuiInMemoryTable
+          className="ml-anomalies-table eui-textBreakWord"
+          items={tableData.anomalies}
+          columns={columns}
+          pagination={{
+            pageSizeOptions: [10, 25, 100],
+            initialPageSize: 25
+          }}
+          sorting={sorting}
+          itemId="rowId"
+          itemIdToExpandedRowMap={this.state.itemIdToExpandedRowMap}
+          compressed={true}
+          rowProps={getRowProps}
+        />
+      </React.Fragment>
     );
   }
 }

x-pack/plugins/ml/public/components/anomalies_table/links_menu.js

@@ -12,7 +12,7 @@ import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 
 import {
-  EuiButtonEmpty,
+  EuiButtonIcon,
   EuiContextMenuPanel,
   EuiContextMenuItem,
   EuiPopover
@@ -337,15 +337,13 @@ export class LinksMenu extends Component {
     const { anomaly, showViewSeriesLink } = this.props;
 
     const button = (
-      <EuiButtonEmpty
+      <EuiButtonIcon
         size="s"
-        type="text"
-        iconType="arrowDown"
-        iconSide="right"
+        color="text"
         onClick={this.onButtonClick}
-      >
-        Open link
-      </EuiButtonEmpty>
+        iconType="gear"
+        aria-label="Select action"
+      />
     );
 
     const items = [];
@@ -387,6 +385,16 @@ export class LinksMenu extends Component {
       );
     }
 
+    items.push(
+      <EuiContextMenuItem
+        key="create_rule"
+        icon="controlsHorizontal"
+        onClick={() => { this.closePopover(); this.props.showRuleEditorFlyout(anomaly); }}
+      >
+        Configure rules
+      </EuiContextMenuItem>
+    );
+
     return (
       <EuiPopover
         id="singlePanel"
@@ -409,5 +417,6 @@ LinksMenu.propTypes = {
   showViewSeriesLink: PropTypes.bool,
   isAggregatedData: PropTypes.bool,
   interval: PropTypes.string,
-  timefilter: PropTypes.object.isRequired
+  timefilter: PropTypes.object.isRequired,
+  showRuleEditorFlyout: PropTypes.func
 };