[ML] Adds icon to the Anomalies Table if detector has rules (#21135)

* [ML] Adds icon to the Anomalies Table if detector has rules

* [ML] Edit to tooltip message on anomalies table detetor rule icon

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

@@ -22,12 +22,13 @@ import {
   EuiFlexItem,
   EuiHealth,
   EuiInMemoryTable,
-  EuiText
+  EuiText,
 } from '@elastic/eui';
 
 import { formatDate } from '@elastic/eui/lib/services/format';
 
 import { DescriptionCell } from './description_cell';
+import { DetectorCell } from './detector_cell';
 import { EntityCell } from './entity_cell';
 import { InfluencersCell } from './influencers_cell';
 import { AnomalyDetails } from './anomaly_details';
@@ -106,6 +107,12 @@ function getColumns(
     {
       field: 'detector',
       name: 'detector',
+      render: (detectorDescription, item) => (
+        <DetectorCell
+          detectorDescription={detectorDescription}
+          numberOfRules={item.rulesLength}
+        />
+      ),
       sortable: true
     }
   ];

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

@@ -0,0 +1,42 @@
+/*
+ * 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 from 'react';
+
+import {
+  EuiIcon,
+  EuiToolTip
+} from '@elastic/eui';
+
+/*
+ * Component for rendering a detector cell in the anomalies table, displaying the
+ * description of the detector, and an icon if rules have been configured for the detector.
+ */
+export function DetectorCell({ detectorDescription, numberOfRules }) {
+  let rulesIcon;
+  if (numberOfRules !== undefined && numberOfRules > 0) {
+    rulesIcon = (
+      <EuiToolTip content="rules have been configured for this detector">
+        <EuiIcon
+          type="controlsHorizontal"
+          className="detector-rules-icon"
+        />
+      </EuiToolTip>
+    );
+  }
+  return (
+    <React.Fragment>
+      {detectorDescription}
+      {rulesIcon}
+    </React.Fragment>
+  );
+}
+DetectorCell.propTypes = {
+  detectorDescription: PropTypes.string.isRequired,
+  numberOfRules: PropTypes.number
+};

x-pack/plugins/ml/public/components/anomalies_table/styles/main.less

@@ -63,6 +63,11 @@
     .filter-button:hover {
       opacity: 1;
     }
+
+    .detector-rules-icon {
+      margin-left: 3px;
+      opacity: 0.5;
+    }
   }
 
   .euiContextMenuItem {

x-pack/plugins/ml/public/explorer/explorer_controller.js

@@ -829,10 +829,17 @@ module.controller('MlExplorerController', function (
         // Default to functionDescription if no description available.
         // TODO - when job_service is moved server_side, move this to server endpoint.
         const jobId = anomaly.jobId;
-        anomaly.detector = _.get(detectorsByJob,
-          [jobId, anomaly.detectorIndex, 'detector_description'],
+        const detector = _.get(detectorsByJob, [jobId, anomaly.detectorIndex]);
+        anomaly.detector = _.get(detector,
+          ['detector_description'],
           anomaly.source.function_description);
 
+        // For detectors with rules, add a property with the rule count.
+        const customRules = detector.custom_rules;
+        if (customRules !== undefined) {
+          anomaly.rulesLength = customRules.length;
+        }
+
         // Add properties used for building the links menu.
         // TODO - when job_service is moved server_side, move this to server endpoint.
         anomaly.isTimeSeriesViewDetector = isTimeSeriesViewDetector(

x-pack/plugins/ml/public/timeseriesexplorer/timeseriesexplorer_controller.js

@@ -698,10 +698,17 @@ module.controller('MlTimeSeriesExplorerController', function (
         // Default to functionDescription if no description available.
         // TODO - when job_service is moved server_side, move this to server endpoint.
         const jobId = anomaly.jobId;
-        anomaly.detector = _.get(detectorsByJob,
-          [jobId, anomaly.detectorIndex, 'detector_description'],
+        const detector = _.get(detectorsByJob, [jobId, anomaly.detectorIndex]);
+        anomaly.detector = _.get(detector,
+          ['detector_description'],
           anomaly.source.function_description);
 
+        // For detectors with rules, add a property with the rule count.
+        const customRules = detector.custom_rules;
+        if (customRules !== undefined) {
+          anomaly.rulesLength = customRules.length;
+        }
+
         // Add properties used for building the links menu.
         // TODO - when job_service is moved server_side, move this to server endpoint.
         if (_.has(mlJobService.customUrlsByJob, jobId)) {