From 59b8c8ea2ce492e236651f17dcfda972af4ad35e Mon Sep 17 00:00:00 2001 From: Pete Harverson Date: Tue, 24 Jul 2018 16:32:47 +0100 Subject: [PATCH] [ML] Adds icon to the Anomalies Table if detector has rules (#21135) (#21142) * [ML] Adds icon to the Anomalies Table if detector has rules * [ML] Edit to tooltip message on anomalies table detetor rule icon --- .../anomalies_table/anomalies_table.js | 9 +++- .../anomalies_table/detector_cell.js | 42 +++++++++++++++++++ .../anomalies_table/styles/main.less | 5 +++ .../ml/public/explorer/explorer_controller.js | 11 ++++- .../timeseriesexplorer_controller.js | 11 ++++- 5 files changed, 73 insertions(+), 5 deletions(-) create mode 100644 x-pack/plugins/ml/public/components/anomalies_table/detector_cell.js diff --git a/x-pack/plugins/ml/public/components/anomalies_table/anomalies_table.js b/x-pack/plugins/ml/public/components/anomalies_table/anomalies_table.js index 7f1e37999795..d7b2794fab9c 100644 --- a/x-pack/plugins/ml/public/components/anomalies_table/anomalies_table.js +++ b/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) => ( + + ), sortable: true } ]; diff --git a/x-pack/plugins/ml/public/components/anomalies_table/detector_cell.js b/x-pack/plugins/ml/public/components/anomalies_table/detector_cell.js new file mode 100644 index 000000000000..4d136c8c5ff6 --- /dev/null +++ b/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 = ( + + + + ); + } + return ( + + {detectorDescription} + {rulesIcon} + + ); +} +DetectorCell.propTypes = { + detectorDescription: PropTypes.string.isRequired, + numberOfRules: PropTypes.number +}; diff --git a/x-pack/plugins/ml/public/components/anomalies_table/styles/main.less b/x-pack/plugins/ml/public/components/anomalies_table/styles/main.less index a71d790ce538..7469f1b52910 100644 --- a/x-pack/plugins/ml/public/components/anomalies_table/styles/main.less +++ b/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 { diff --git a/x-pack/plugins/ml/public/explorer/explorer_controller.js b/x-pack/plugins/ml/public/explorer/explorer_controller.js index b4f47a438222..0f5c59d70620 100644 --- a/x-pack/plugins/ml/public/explorer/explorer_controller.js +++ b/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( diff --git a/x-pack/plugins/ml/public/timeseriesexplorer/timeseriesexplorer_controller.js b/x-pack/plugins/ml/public/timeseriesexplorer/timeseriesexplorer_controller.js index 8ce3a5c68414..f061f3340d92 100644 --- a/x-pack/plugins/ml/public/timeseriesexplorer/timeseriesexplorer_controller.js +++ b/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)) {