Fix issues with serviceName

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

@@ -4,6 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 import { EuiFieldNumber, EuiSelect, EuiExpression } from '@elastic/eui';
+import { useParams } from 'react-router-dom';
 import { i18n } from '@kbn/i18n';
 import { map } from 'lodash';
 import React from 'react';
@@ -60,10 +61,11 @@ export function TransactionDurationAlertTrigger(props: Props) {
   const { setAlertParams, alertParams, setAlertProperty } = props;
   const { urlParams } = useUrlParams();
   const transactionTypes = useServiceTransactionTypes(urlParams);
-  const { serviceName, start, end, transactionType } = urlParams;
+  const { serviceName } = useParams<{ serviceName?: string }>();
+  const { start, end, transactionType } = urlParams;
   const { environmentOptions } = useEnvironments({ serviceName, start, end });
 
-  if (!transactionTypes.length) {
+  if (!transactionTypes.length || !serviceName) {
     return null;
   }
 
@@ -72,7 +74,9 @@ export function TransactionDurationAlertTrigger(props: Props) {
     aggregationType: 'avg',
     windowSize: 5,
     windowUnit: 'm',
-    transactionType,
+
+    // use the current transaction type or default to the first in the list
+    transactionType: transactionType || transactionTypes[0],
     environment: urlParams.environment || ENVIRONMENT_ALL.value,
   };
 

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

@@ -4,6 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 import { EuiExpression, EuiSelect } from '@elastic/eui';
+import { useParams } from 'react-router-dom';
 import { i18n } from '@kbn/i18n';
 import React from 'react';
 import { ALERT_TYPES_CONFIG } from '../../../../common/alert_types';
@@ -42,9 +43,9 @@ interface Props {
 
 export function TransactionDurationAnomalyAlertTrigger(props: Props) {
   const { setAlertParams, alertParams, setAlertProperty } = props;
-  const { serviceName } = alertParams;
   const { urlParams } = useUrlParams();
   const transactionTypes = useServiceTransactionTypes(urlParams);
+  const { serviceName } = useParams<{ serviceName?: string }>();
   const { start, end } = urlParams;
   const { environmentOptions } = useEnvironments({ serviceName, start, end });
   const supportedTransactionTypes = transactionTypes.filter((transactionType) =>

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

@@ -4,6 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 import { EuiFieldNumber, EuiSelect, EuiExpression } from '@elastic/eui';
+import { useParams } from 'react-router-dom';
 import { i18n } from '@kbn/i18n';
 import React from 'react';
 import { ForLastExpression } from '../../../../../triggers_actions_ui/public';
@@ -37,18 +38,19 @@ export function TransactionErrorRateAlertTrigger(props: Props) {
   const { setAlertParams, alertParams, setAlertProperty } = props;
   const { urlParams } = useUrlParams();
   const transactionTypes = useServiceTransactionTypes(urlParams);
-  const { serviceName, start, end, transactionType } = urlParams;
+  const { serviceName } = useParams<{ serviceName?: string }>();
+  const { start, end } = urlParams;
   const { environmentOptions } = useEnvironments({ serviceName, start, end });
 
-  if (!transactionTypes.length) {
+  if (!transactionTypes.length || !serviceName) {
     return null;
   }
 
   const defaultParams = {
     threshold: 30,
     windowSize: 5,
     windowUnit: 'm',
-    transactionType,
+    transactionType: transactionType || transactionTypes[0],
     environment: urlParams.environment || ENVIRONMENT_ALL.value,
   };