[APM] Transaction duration anomaly alerting integration

x-pack/plugins/apm/common/environment_filter_values.ts

@@ -9,11 +9,29 @@ import { i18n } from '@kbn/i18n';
 export const ENVIRONMENT_ALL = 'ENVIRONMENT_ALL';
 export const ENVIRONMENT_NOT_DEFINED = 'ENVIRONMENT_NOT_DEFINED';
 
+const ENVIRONMENT_ALL_LABEL = i18n.translate('xpack.apm.environment.allLabel', {
+  defaultMessage: 'All',
+});
+const ENVIRONMENT_NOT_DEFINED_LABEL = i18n.translate(
+  'xpack.apm.filter.environment.notDefinedLabel',
+  { defaultMessage: 'Not defined' }
+);
+
+export const ALL_OPTION = {
+  value: ENVIRONMENT_ALL,
+  text: ENVIRONMENT_ALL_LABEL,
+};
+export const NOT_DEFINED_OPTION = {
+  value: ENVIRONMENT_NOT_DEFINED,
+  text: ENVIRONMENT_NOT_DEFINED_LABEL,
+};
+
 export function getEnvironmentLabel(environment: string) {
+  if (environment === ENVIRONMENT_ALL) {
+    return ENVIRONMENT_ALL_LABEL;
+  }
   if (environment === ENVIRONMENT_NOT_DEFINED) {
-    return i18n.translate('xpack.apm.filter.environment.notDefinedLabel', {
-      defaultMessage: 'Not defined',
-    });
+    return ENVIRONMENT_NOT_DEFINED_LABEL;
   }
   return environment;
 }

x-pack/plugins/apm/public/components/shared/EnvironmentFilter/index.tsx

@@ -12,10 +12,12 @@ import { useUrlParams } from '../../../hooks/useUrlParams';
 import { history } from '../../../utils/history';
 import { fromQuery, toQuery } from '../Links/url_helpers';
 import {
+  ALL_OPTION,
+  NOT_DEFINED_OPTION,
   ENVIRONMENT_ALL,
   ENVIRONMENT_NOT_DEFINED,
 } from '../../../../common/environment_filter_values';
-import { useEnvironments, ALL_OPTION } from '../../../hooks/useEnvironments';
+import { useEnvironments } from '../../../hooks/useEnvironments';
 
 function updateEnvironmentUrl(
   location: ReturnType<typeof useLocation>,
@@ -32,13 +34,6 @@ function updateEnvironmentUrl(
   });
 }
 
-const NOT_DEFINED_OPTION = {
-  value: ENVIRONMENT_NOT_DEFINED,
-  text: i18n.translate('xpack.apm.filter.environment.notDefinedLabel', {
-    defaultMessage: 'Not defined',
-  }),
-};
-
 const SEPARATOR_OPTION = {
   text: `- ${i18n.translate(
     'xpack.apm.filter.environment.selectEnvironmentLabel',

x-pack/plugins/apm/public/components/shared/ErrorRateAlertTrigger/index.tsx

@@ -12,8 +12,12 @@ import { ForLastExpression } from '../../../../../triggers_actions_ui/public';
 import { ALERT_TYPES_CONFIG } from '../../../../common/alert_types';
 import { ServiceAlertTrigger } from '../ServiceAlertTrigger';
 import { PopoverExpression } from '../ServiceAlertTrigger/PopoverExpression';
-import { useEnvironments, ALL_OPTION } from '../../../hooks/useEnvironments';
+import { useEnvironments } from '../../../hooks/useEnvironments';
 import { useUrlParams } from '../../../hooks/useUrlParams';
+import {
+  ENVIRONMENT_ALL,
+  getEnvironmentLabel,
+} from '../../../../common/environment_filter_values';
 
 export interface ErrorRateAlertTriggerParams {
   windowSize: number;
@@ -39,7 +43,7 @@ export function ErrorRateAlertTrigger(props: Props) {
     threshold: 25,
     windowSize: 1,
     windowUnit: 'm',
-    environment: ALL_OPTION.value,
+    environment: ENVIRONMENT_ALL,
   };
 
   const params = {
@@ -51,11 +55,7 @@ export function ErrorRateAlertTrigger(props: Props) {
 
   const fields = [
     <PopoverExpression
-      value={
-        params.environment === ALL_OPTION.value
-          ? ALL_OPTION.text
-          : params.environment
-      }
+      value={getEnvironmentLabel(params.environment)}
       title={i18n.translate('xpack.apm.errorRateAlertTrigger.environment', {
         defaultMessage: 'Environment',
       })}

x-pack/plugins/apm/public/components/shared/ServiceAlertTrigger/PopoverExpression/index.tsx

@@ -8,8 +8,8 @@ import React, { useState } from 'react';
 import { EuiExpression, EuiPopover } from '@elastic/eui';
 
 interface Props {
-  title: string;
-  value: string;
+  title: React.ReactNode;
+  value: React.ReactNode;
   children?: React.ReactNode;
 }
 

x-pack/plugins/apm/public/components/shared/TransactionDurationAlertTrigger/index.tsx

@@ -12,11 +12,15 @@ import {
   ALERT_TYPES_CONFIG,
   TRANSACTION_ALERT_AGGREGATION_TYPES,
 } from '../../../../common/alert_types';
-import { ALL_OPTION, useEnvironments } from '../../../hooks/useEnvironments';
+import { useEnvironments } from '../../../hooks/useEnvironments';
 import { useServiceTransactionTypes } from '../../../hooks/useServiceTransactionTypes';
 import { useUrlParams } from '../../../hooks/useUrlParams';
 import { ServiceAlertTrigger } from '../ServiceAlertTrigger';
 import { PopoverExpression } from '../ServiceAlertTrigger/PopoverExpression';
+import {
+  ENVIRONMENT_ALL,
+  getEnvironmentLabel,
+} from '../../../../common/environment_filter_values';
 
 interface Params {
   windowSize: number;
@@ -54,7 +58,7 @@ export function TransactionDurationAlertTrigger(props: Props) {
     windowSize: 5,
     windowUnit: 'm',
     transactionType: transactionTypes[0],
-    environment: ALL_OPTION.value,
+    environment: ENVIRONMENT_ALL,
   };
 
   const params = {
@@ -64,11 +68,7 @@ export function TransactionDurationAlertTrigger(props: Props) {
 
   const fields = [
     <PopoverExpression
-      value={
-        params.environment === ALL_OPTION.value
-          ? ALL_OPTION.text
-          : params.environment
-      }
+      value={getEnvironmentLabel(params.environment)}
       title={i18n.translate(
         'xpack.apm.transactionDurationAlertTrigger.environment',
         {

x-pack/plugins/apm/public/components/shared/TransactionDurationAnomalyAlertTrigger/SelectAnomalySeverity.tsx

@@ -4,13 +4,12 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { useState, useEffect } from 'react';
+import React from 'react';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { EuiHealth, EuiSpacer, EuiSuperSelect, EuiText } from '@elastic/eui';
 import { getSeverityColor } from '../../app/ServiceMap/cytoscapeOptions';
 import { useTheme } from '../../../hooks/useTheme';
-import { EuiTheme } from '../../../../../observability/public';
 import { severity as Severity } from '../../app/ServiceMap/Popover/getSeverity';
 
 type SeverityScore = 0 | 25 | 50 | 75;
@@ -45,24 +44,29 @@ const anomalyScoreSeverityMap: {
   },
 };
 
-const getOption = (theme: EuiTheme, value: SeverityScore) => {
-  const { label, severity } = anomalyScoreSeverityMap[value];
+export function AnomalySeverity({
+  severityScore,
+}: {
+  severityScore: SeverityScore;
+}) {
+  const theme = useTheme();
+  const { label, severity } = anomalyScoreSeverityMap[severityScore];
   const defaultColor = theme.eui.euiColorMediumShade;
   const color = getSeverityColor(theme, severity) || defaultColor;
+  return (
+    <EuiHealth color={color} style={{ lineHeight: 'inherit' }}>
+      {label}
+    </EuiHealth>
+  );
+}
+
+const getOption = (value: SeverityScore) => {
   return {
     value: value.toString(10),
-    inputDisplay: (
-      <>
-        <EuiHealth color={color} style={{ lineHeight: 'inherit' }}>
-          {label}
-        </EuiHealth>
-      </>
-    ),
+    inputDisplay: <AnomalySeverity severityScore={value} />,
     dropdownDisplay: (
       <>
-        <EuiHealth color={color} style={{ lineHeight: 'inherit' }}>
-          {label}
-        </EuiHealth>
+        <AnomalySeverity severityScore={value} />
         <EuiSpacer size="xs" />
         <EuiText size="xs" color="subdued">
           <p className="euiTextColor--subdued">
@@ -84,28 +88,19 @@ interface Props {
 }
 
 export function SelectAnomalySeverity({ onChange, value }: Props) {
-  const theme = useTheme();
-  const options = ANOMALY_SCORES.map((anomalyScore) =>
-    getOption(theme, anomalyScore)
-  );
-  const [anomalyScore, setAnomalyScore] = useState<SeverityScore>(value);
-
-  useEffect(() => {
-    setAnomalyScore(value);
-  }, [value]);
+  const options = ANOMALY_SCORES.map((anomalyScore) => getOption(anomalyScore));
 
   return (
     <EuiSuperSelect
       hasDividers
       style={{ width: 200 }}
       options={options}
-      valueOfSelected={anomalyScore.toString(10)}
+      valueOfSelected={value.toString(10)}
       onChange={(selectedValue: string) => {
         const selectedAnomalyScore = parseInt(
           selectedValue,
           10
         ) as SeverityScore;
-        setAnomalyScore(selectedAnomalyScore);
         onChange(selectedAnomalyScore);
       }}
     />

x-pack/plugins/apm/public/components/shared/TransactionDurationAnomalyAlertTrigger/index.tsx

@@ -7,12 +7,19 @@ import { EuiText, EuiSelect, EuiExpression } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import React from 'react';
 import { ALERT_TYPES_CONFIG } from '../../../../common/alert_types';
-import { ALL_OPTION, useEnvironments } from '../../../hooks/useEnvironments';
+import { useEnvironments } from '../../../hooks/useEnvironments';
 import { useServiceTransactionTypes } from '../../../hooks/useServiceTransactionTypes';
 import { useUrlParams } from '../../../hooks/useUrlParams';
 import { ServiceAlertTrigger } from '../ServiceAlertTrigger';
 import { PopoverExpression } from '../ServiceAlertTrigger/PopoverExpression';
-import { SelectAnomalySeverity } from './SelectAnomalySeverity';
+import {
+  AnomalySeverity,
+  SelectAnomalySeverity,
+} from './SelectAnomalySeverity';
+import {
+  ENVIRONMENT_ALL,
+  getEnvironmentLabel,
+} from '../../../../common/environment_filter_values';
 
 interface Params {
   windowSize: number;
@@ -45,7 +52,7 @@ export function TransactionDurationAnomalyAlertTrigger(props: Props) {
     windowUnit: 'm',
     transactionType: transactionTypes[0],
     serviceName,
-    environment: urlParams.environment || ALL_OPTION.value,
+    environment: urlParams.environment || ENVIRONMENT_ALL,
     anomalyScore: 75,
   };
 
@@ -69,11 +76,7 @@ export function TransactionDurationAnomalyAlertTrigger(props: Props) {
       }
     />,
     <PopoverExpression
-      value={
-        params.environment === ALL_OPTION.value
-          ? ALL_OPTION.text
-          : params.environment
-      }
+      value={getEnvironmentLabel(params.environment)}
       title={i18n.translate(
         'xpack.apm.transactionDurationAnomalyAlertTrigger.environment',
         {
@@ -84,9 +87,7 @@ export function TransactionDurationAnomalyAlertTrigger(props: Props) {
       <EuiSelect
         value={params.environment}
         options={environmentOptions}
-        onChange={(e) =>
-          setAlertParams('environment', e.target.value as Params['environment'])
-        }
+        onChange={(e) => setAlertParams('environment', e.target.value)}
         compressed
       />
     </PopoverExpression>,
@@ -107,21 +108,16 @@ export function TransactionDurationAnomalyAlertTrigger(props: Props) {
             value: key,
           };
         })}
-        onChange={(e) =>
-          setAlertParams(
-            'transactionType',
-            e.target.value as Params['transactionType']
-          )
-        }
+        onChange={(e) => setAlertParams('transactionType', e.target.value)}
         compressed
       />
     </PopoverExpression>,
     <PopoverExpression
-      value={params.anomalyScore.toString(10)}
+      value={<AnomalySeverity severityScore={params.anomalyScore} />}
       title={i18n.translate(
-        'xpack.apm.transactionDurationAnomalyAlertTrigger.anomalyScore',
+        'xpack.apm.transactionDurationAnomalyAlertTrigger.anomalySeverity',
         {
-          defaultMessage: 'Has anomaly score',
+          defaultMessage: 'Has anomaly with severity',
         }
       )}
     >

x-pack/plugins/apm/public/hooks/useEnvironments.tsx

@@ -5,21 +5,13 @@
  */
 
 import { useMemo } from 'react';
-import { i18n } from '@kbn/i18n';
 import { useFetcher } from './useFetcher';
 import {
+  ALL_OPTION,
   ENVIRONMENT_NOT_DEFINED,
-  ENVIRONMENT_ALL,
 } from '../../common/environment_filter_values';
 import { callApmApi } from '../services/rest/createCallApmApi';
 
-export const ALL_OPTION = {
-  value: ENVIRONMENT_ALL,
-  text: i18n.translate('xpack.apm.environment.allLabel', {
-    defaultMessage: 'All',
-  }),
-};
-
 function getEnvironmentOptions(environments: string[]) {
   const environmentOptions = environments
     .filter((env) => env !== ENVIRONMENT_NOT_DEFINED)

x-pack/plugins/apm/server/lib/alerts/register_transaction_duration_anomaly_alert_type.ts

@@ -79,7 +79,7 @@ export function registerTransactionDurationAnomalyAlertType({
       const anomalyDetectors = ml.anomalyDetectorsProvider(mlClient, request);
 
       const mlJobIds = await getMLJobIds(
-        { anomalyDetectors },
+        anomalyDetectors,
         alertParams.environment
       );
       const anomalySearchParams = {

x-pack/plugins/apm/server/lib/anomaly_detection/get_anomaly_detection_jobs.ts

@@ -22,7 +22,7 @@ export async function getAnomalyDetectionJobs(setup: Setup, logger: Logger) {
     throw Boom.forbidden(ML_ERRORS.ML_NOT_AVAILABLE_IN_SPACE);
   }
 
-  const response = await getMlJobsWithAPMGroup(ml);
+  const response = await getMlJobsWithAPMGroup(ml.anomalyDetectors);
   return response.jobs
     .filter((job) => (job.custom_settings?.job_tags?.apm_ml_version ?? 0) >= 2)
     .map((job) => {

x-pack/plugins/apm/server/lib/anomaly_detection/get_ml_jobs_with_apm_group.ts

@@ -9,11 +9,9 @@ import { APM_ML_JOB_GROUP } from './constants';
 
 // returns ml jobs containing "apm" group
 // workaround: the ML api returns 404 when no jobs are found. This is handled so instead of throwing an empty response is returned
-export async function getMlJobsWithAPMGroup({
-  anomalyDetectors,
-}: {
-  anomalyDetectors: ReturnType<MlPluginSetup['anomalyDetectorsProvider']>;
-}) {
+export async function getMlJobsWithAPMGroup(
+  anomalyDetectors: ReturnType<MlPluginSetup['anomalyDetectorsProvider']>
+) {
   try {
     return await anomalyDetectors.jobs(APM_ML_JOB_GROUP);
   } catch (e) {

x-pack/plugins/apm/server/lib/anomaly_detection/has_legacy_jobs.ts

@@ -23,7 +23,7 @@ export async function hasLegacyJobs(setup: Setup) {
     throw Boom.forbidden(ML_ERRORS.ML_NOT_AVAILABLE_IN_SPACE);
   }
 
-  const response = await getMlJobsWithAPMGroup(ml);
+  const response = await getMlJobsWithAPMGroup(ml.anomalyDetectors);
   return response.jobs.some(
     (job) =>
       job.job_id.endsWith('high_mean_response_time') &&