Show warning message when attempting to create an APM alert in stack management (#111781)

Creating new rules in Stack Management does not work. Editing existing rules should work. If you enable editing rules, you also have to enable creating rules. Make it so when you attempt to create a rule in stack management it shows a warning telling you to go create the rule in APM.

x-pack/plugins/apm/public/components/alerting/error_count_alert_trigger/index.tsx

@@ -8,14 +8,20 @@
 import { i18n } from '@kbn/i18n';
 import { defaults, omit } from 'lodash';
 import React from 'react';
-import { ENVIRONMENT_ALL } from '../../../../common/environment_filter_values';
 import { ForLastExpression } from '../../../../../triggers_actions_ui/public';
+import { ENVIRONMENT_ALL } from '../../../../common/environment_filter_values';
 import { asInteger } from '../../../../common/utils/formatters';
 import { useEnvironmentsFetcher } from '../../../hooks/use_environments_fetcher';
 import { useFetcher } from '../../../hooks/use_fetcher';
 import { ChartPreview } from '../chart_preview';
 import { EnvironmentField, IsAboveField, ServiceField } from '../fields';
-import { AlertMetadata, getIntervalAndTimeRange, TimeUnit } from '../helper';
+import {
+  AlertMetadata,
+  getIntervalAndTimeRange,
+  isNewApmRuleFromStackManagement,
+  TimeUnit,
+} from '../helper';
+import { NewAlertEmptyPrompt } from '../new_alert_empty_prompt';
 import { ServiceAlertTrigger } from '../service_alert_trigger';
 
 export interface AlertParams {
@@ -81,6 +87,10 @@ export function ErrorCountAlertTrigger(props: Props) {
     ]
   );
 
+  if (isNewApmRuleFromStackManagement(alertParams, metadata)) {
+    return <NewAlertEmptyPrompt />;
+  }
+
   const fields = [
     <ServiceField value={params.serviceName} />,
     <EnvironmentField

x-pack/plugins/apm/public/components/alerting/helper.ts

@@ -36,3 +36,14 @@ export function getIntervalAndTimeRange({
     end: new Date(end).toISOString(),
   };
 }
+
+export function isNewApmRuleFromStackManagement(
+  alertParams: any,
+  metadata?: AlertMetadata
+) {
+  return (
+    alertParams !== undefined &&
+    Object.keys(alertParams).length === 0 &&
+    metadata === undefined
+  );
+}

x-pack/plugins/apm/public/components/alerting/new_alert_empty_prompt.tsx

@@ -0,0 +1,47 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+/* eslint-disable @elastic/eui/href-or-on-click */
+
+import { EuiButton, EuiEmptyPrompt } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import React, { MouseEvent } from 'react';
+import { useKibana } from '../../../../../../src/plugins/kibana_react/public';
+
+export function NewAlertEmptyPrompt() {
+  const { services } = useKibana();
+  const apmUrl = services.http?.basePath.prepend('/app/apm');
+  const navigateToUrl = services.application?.navigateToUrl;
+  const handleClick = (event: MouseEvent<HTMLAnchorElement>) => {
+    event.preventDefault();
+    if (apmUrl && navigateToUrl) {
+      navigateToUrl(apmUrl);
+    }
+  };
+
+  return (
+    <EuiEmptyPrompt
+      iconType="alert"
+      body={i18n.translate('xpack.apm.NewAlertEmptyPrompt.bodyDescription', {
+        defaultMessage:
+          'APM rules cannot be created in Stack Management. Go to APM and use the "Alerts and rules" menu.',
+      })}
+      actions={[
+        <EuiButton
+          color="primary"
+          fill={true}
+          href={apmUrl}
+          onClick={handleClick}
+        >
+          {i18n.translate('xpack.apm.NewAlertEmptyPrompt.goToApmLinkText', {
+            defaultMessage: 'Go to APM',
+          })}
+        </EuiButton>,
+      ]}
+    />
+  );
+}

x-pack/plugins/apm/public/components/alerting/transaction_duration_alert_trigger/index.tsx

@@ -9,10 +9,10 @@ import { EuiSelect } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { defaults, map, omit } from 'lodash';
 import React from 'react';
-import { ENVIRONMENT_ALL } from '../../../../common/environment_filter_values';
 import { CoreStart } from '../../../../../../../src/core/public';
 import { useKibana } from '../../../../../../../src/plugins/kibana_react/public';
 import { ForLastExpression } from '../../../../../triggers_actions_ui/public';
+import { ENVIRONMENT_ALL } from '../../../../common/environment_filter_values';
 import { getDurationFormatter } from '../../../../common/utils/formatters';
 import { useServiceTransactionTypesFetcher } from '../../../context/apm_service/use_service_transaction_types_fetcher';
 import { useEnvironmentsFetcher } from '../../../hooks/use_environments_fetcher';
@@ -29,7 +29,13 @@ import {
   ServiceField,
   TransactionTypeField,
 } from '../fields';
-import { AlertMetadata, getIntervalAndTimeRange, TimeUnit } from '../helper';
+import {
+  AlertMetadata,
+  getIntervalAndTimeRange,
+  isNewApmRuleFromStackManagement,
+  TimeUnit,
+} from '../helper';
+import { NewAlertEmptyPrompt } from '../new_alert_empty_prompt';
 import { ServiceAlertTrigger } from '../service_alert_trigger';
 import { PopoverExpression } from '../service_alert_trigger/popover_expression';
 
@@ -154,6 +160,10 @@ export function TransactionDurationAlertTrigger(props: Props) {
     />
   );
 
+  if (isNewApmRuleFromStackManagement(alertParams, metadata)) {
+    return <NewAlertEmptyPrompt />;
+  }
+
   if (!params.serviceName) {
     return null;
   }

x-pack/plugins/apm/public/components/alerting/transaction_duration_anomaly_alert_trigger/index.tsx

@@ -17,7 +17,8 @@ import {
   ServiceField,
   TransactionTypeField,
 } from '../fields';
-import { AlertMetadata } from '../helper';
+import { AlertMetadata, isNewApmRuleFromStackManagement } from '../helper';
+import { NewAlertEmptyPrompt } from '../new_alert_empty_prompt';
 import { ServiceAlertTrigger } from '../service_alert_trigger';
 import { PopoverExpression } from '../service_alert_trigger/popover_expression';
 import {
@@ -73,6 +74,10 @@ export function TransactionDurationAnomalyAlertTrigger(props: Props) {
     end: metadata?.end,
   });
 
+  if (isNewApmRuleFromStackManagement(alertParams, metadata)) {
+    return <NewAlertEmptyPrompt />;
+  }
+
   const fields = [
     <ServiceField value={params.serviceName} />,
     <TransactionTypeField

x-pack/plugins/apm/public/components/alerting/transaction_error_rate_alert_trigger/index.tsx

@@ -7,10 +7,10 @@
 
 import { defaults, omit } from 'lodash';
 import React from 'react';
-import { ENVIRONMENT_ALL } from '../../../../common/environment_filter_values';
 import { CoreStart } from '../../../../../../../src/core/public';
 import { useKibana } from '../../../../../../../src/plugins/kibana_react/public';
 import { ForLastExpression } from '../../../../../triggers_actions_ui/public';
+import { ENVIRONMENT_ALL } from '../../../../common/environment_filter_values';
 import { asPercent } from '../../../../common/utils/formatters';
 import { useServiceTransactionTypesFetcher } from '../../../context/apm_service/use_service_transaction_types_fetcher';
 import { useEnvironmentsFetcher } from '../../../hooks/use_environments_fetcher';
@@ -23,7 +23,13 @@ import {
   ServiceField,
   TransactionTypeField,
 } from '../fields';
-import { AlertMetadata, getIntervalAndTimeRange, TimeUnit } from '../helper';
+import {
+  AlertMetadata,
+  getIntervalAndTimeRange,
+  isNewApmRuleFromStackManagement,
+  TimeUnit,
+} from '../helper';
+import { NewAlertEmptyPrompt } from '../new_alert_empty_prompt';
 import { ServiceAlertTrigger } from '../service_alert_trigger';
 
 interface AlertParams {
@@ -102,6 +108,10 @@ export function TransactionErrorRateAlertTrigger(props: Props) {
     ]
   );
 
+  if (isNewApmRuleFromStackManagement(alertParams, metadata)) {
+    return <NewAlertEmptyPrompt />;
+  }
+
   const fields = [
     <ServiceField value={params.serviceName} />,
     <TransactionTypeField