- Reorg the alerts menu for different alert types (threshold/anomaly)

- default environment alert settings to the selected filter

Author: ogupte

x-pack/plugins/apm/public/components/app/ServiceDetails/AlertIntegrations/index.tsx

@@ -18,19 +18,28 @@ import { useApmPluginContext } from '../../../../hooks/useApmPluginContext';
 
 const alertLabel = i18n.translate(
   'xpack.apm.serviceDetails.alertsMenu.alerts',
-  {
-    defaultMessage: 'Alerts',
-  }
+  { defaultMessage: 'Alerts' }
+);
+const transactionDurationLabel = i18n.translate(
+  'xpack.apm.serviceDetails.alertsMenu.transactionDuration',
+  { defaultMessage: 'Transaction duration' }
+);
+const errorRateLabel = i18n.translate(
+  'xpack.apm.serviceDetails.alertsMenu.errorRate',
+  { defaultMessage: 'Error rate' }
 );
-
 const createThresholdAlertLabel = i18n.translate(
   'xpack.apm.serviceDetails.alertsMenu.createThresholdAlert',
-  {
-    defaultMessage: 'Create threshold alert',
-  }
+  { defaultMessage: 'Create threshold alert' }
+);
+const createAnomalyAlertAlertLabel = i18n.translate(
+  'xpack.apm.serviceDetails.alertsMenu.createAnomalyAlert',
+  { defaultMessage: 'Create anomaly alert' }
 );
 
-const CREATE_THRESHOLD_ALERT_PANEL_ID = 'create_threshold';
+const CREATE_TRANSACTION_DURATION_ALERT_PANEL_ID =
+  'create_transaction_duration';
+const CREATE_ERROR_RATE_ALERT_PANEL_ID = 'create_error_rate';
 
 interface Props {
   canReadAlerts: boolean;
@@ -53,9 +62,7 @@ export function AlertIntegrations(props: Props) {
       iconSide="right"
       onClick={() => setPopoverOpen(true)}
     >
-      {i18n.translate('xpack.apm.serviceDetails.alertsMenu.alerts', {
-        defaultMessage: 'Alerts',
-      })}
+      {alertLabel}
     </EuiButtonEmpty>
   );
 
@@ -67,20 +74,18 @@ export function AlertIntegrations(props: Props) {
         ...(canSaveAlerts
           ? [
               {
-                name: createThresholdAlertLabel,
-                panel: CREATE_THRESHOLD_ALERT_PANEL_ID,
-                icon: 'bell',
+                name: transactionDurationLabel,
+                panel: CREATE_TRANSACTION_DURATION_ALERT_PANEL_ID,
               },
+              { name: errorRateLabel, panel: CREATE_ERROR_RATE_ALERT_PANEL_ID },
             ]
           : []),
         ...(canReadAlerts
           ? [
               {
                 name: i18n.translate(
                   'xpack.apm.serviceDetails.alertsMenu.viewActiveAlerts',
-                  {
-                    defaultMessage: 'View active alerts',
-                  }
+                  { defaultMessage: 'View active alerts' }
                 ),
                 href: plugin.core.http.basePath.prepend(
                   '/app/management/insightsAndAlerting/triggersActions/alerts'
@@ -92,44 +97,41 @@ export function AlertIntegrations(props: Props) {
       ],
     },
     {
-      id: CREATE_THRESHOLD_ALERT_PANEL_ID,
-      title: createThresholdAlertLabel,
+      id: CREATE_TRANSACTION_DURATION_ALERT_PANEL_ID,
+      title: transactionDurationLabel,
       items: [
         {
-          name: i18n.translate(
-            'xpack.apm.serviceDetails.alertsMenu.transactionDuration',
-            {
-              defaultMessage: 'Transaction duration',
-            }
-          ),
+          icon: 'bell',
+          name: createThresholdAlertLabel,
           onClick: () => {
             setAlertType(AlertType.TransactionDuration);
+            setPopoverOpen(false);
           },
         },
         ...(canReadAnomalies
           ? [
               {
-                name: i18n.translate(
-                  'xpack.apm.serviceDetails.alertsMenu.transactionDurationAnomaly',
-                  {
-                    defaultMessage: 'Transaction duration anomaly',
-                  }
-                ),
+                icon: 'bell',
+                name: createAnomalyAlertAlertLabel,
                 onClick: () => {
                   setAlertType(AlertType.TransactionDurationAnomaly);
+                  setPopoverOpen(false);
                 },
               },
             ]
           : []),
+      ],
+    },
+    {
+      id: CREATE_ERROR_RATE_ALERT_PANEL_ID,
+      title: errorRateLabel,
+      items: [
         {
-          name: i18n.translate(
-            'xpack.apm.serviceDetails.alertsMenu.errorRate',
-            {
-              defaultMessage: 'Error rate',
-            }
-          ),
+          icon: 'bell',
+          name: createThresholdAlertLabel,
           onClick: () => {
             setAlertType(AlertType.ErrorRate);
+            setPopoverOpen(false);
           },
         },
       ],

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

@@ -43,7 +43,7 @@ export function ErrorRateAlertTrigger(props: Props) {
     threshold: 25,
     windowSize: 1,
     windowUnit: 'm',
-    environment: ENVIRONMENT_ALL.value,
+    environment: urlParams.environment || ENVIRONMENT_ALL.value,
   };
 
   const params = {

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

@@ -58,7 +58,7 @@ export function TransactionDurationAlertTrigger(props: Props) {
     windowSize: 5,
     windowUnit: 'm',
     transactionType: transactionTypes[0],
-    environment: ENVIRONMENT_ALL.value,
+    environment: urlParams.environment || ENVIRONMENT_ALL.value,
   };
 
   const params = {