diff --git a/x-pack/plugins/apm/public/components/app/Home/index.tsx b/x-pack/plugins/apm/public/components/app/Home/index.tsx index f612ac0d383ef..bcc834fef6a6a 100644 --- a/x-pack/plugins/apm/public/components/app/Home/index.tsx +++ b/x-pack/plugins/apm/public/components/app/Home/index.tsx @@ -20,6 +20,7 @@ import { EuiTabLink } from '../../shared/EuiTabLink'; import { ServiceMapLink } from '../../shared/Links/apm/ServiceMapLink'; import { ServiceOverviewLink } from '../../shared/Links/apm/ServiceOverviewLink'; import { SettingsLink } from '../../shared/Links/apm/SettingsLink'; +import { AnomalyDetectionSetupLink } from '../../shared/Links/apm/AnomalyDetectionSetupLink'; import { TraceOverviewLink } from '../../shared/Links/apm/TraceOverviewLink'; import { SetupInstructionsLink } from '../../shared/Links/SetupInstructionsLink'; import { ServiceMap } from '../ServiceMap'; @@ -118,6 +119,9 @@ export function Home({ tab }: Props) { + + + diff --git a/x-pack/plugins/apm/public/components/shared/Links/apm/AnomalyDetectionSetupLink.tsx b/x-pack/plugins/apm/public/components/shared/Links/apm/AnomalyDetectionSetupLink.tsx new file mode 100644 index 0000000000000..171a7c24d7661 --- /dev/null +++ b/x-pack/plugins/apm/public/components/shared/Links/apm/AnomalyDetectionSetupLink.tsx @@ -0,0 +1,79 @@ +/* + * 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 React from 'react'; +import { EuiButtonEmpty, EuiToolTip, EuiIcon } from '@elastic/eui'; +import { i18n } from '@kbn/i18n'; +import { APMLink } from './APMLink'; +import { ENVIRONMENT_NOT_DEFINED } from '../../../../../common/environment_filter_values'; +import { useUrlParams } from '../../../../hooks/useUrlParams'; +import { useFetcher, FETCH_STATUS } from '../../../../hooks/useFetcher'; + +export function AnomalyDetectionSetupLink() { + const { uiFilters, urlParams } = useUrlParams(); + // check both uiFilters and urlParams for selected environment + const environment = uiFilters.environment || urlParams.environment; + + const { data = [], status } = useFetcher( + (callApmApi) => + callApmApi({ pathname: `/api/apm/settings/anomaly-detection` }), + [], + { preservePreviousData: false } + ); + const isFetchSuccess = status === FETCH_STATUS.SUCCESS; + + const hasJobs = data.length > 0; + const hasJobForEnv = environment + ? data.some(({ environment: env }) => environment === env) + : true; + + const showAlert = isFetchSuccess && (!hasJobs || !hasJobForEnv); + const toolTipText = environment + ? getNotEnabledForEnvironmentText(environment) + : NOT_ENABLED_TEXT; + + return ( + + + {ANOMALY_DETECTION_LINK_LABEL} + + {showAlert && ( + + + + )} + + ); +} + +function getEnvironmentLabel(environment: string) { + if (environment === ENVIRONMENT_NOT_DEFINED) { + return i18n.translate('xpack.apm.filter.environment.notDefinedLabel', { + defaultMessage: 'Not defined', + }); + } + return environment; +} + +function getNotEnabledForEnvironmentText(environment: string) { + return i18n.translate( + 'xpack.apm.anomalyDetectionSetup.notEnabledForEnvironmentText', + { + defaultMessage: `Anomaly detection is not yet enabled for the "{currentEnvironment}" environment. Click to continue setup.`, + values: { currentEnvironment: getEnvironmentLabel(environment) }, + } + ); +} + +const ANOMALY_DETECTION_LINK_LABEL = i18n.translate( + 'xpack.apm.anomalyDetectionSetup.linkLabel', + { defaultMessage: `Anomaly detection` } +); +const NOT_ENABLED_TEXT = i18n.translate( + 'xpack.apm.anomalyDetectionSetup.notEnabledText', + { + defaultMessage: `Anomaly detection is not yet enabled. Click to continue setup.`, + } +);