[APM] Alert rules: The transaction type and environment options are not filtered by the selected service (#149849)

closes https://github.com/elastic/kibana/issues/128257



https://user-images.githubusercontent.com/55978943/215530743-46577bb1-5cdd-459c-990e-aae00f604720.mov

---------

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

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

@@ -94,11 +94,17 @@ export function ErrorCountRuleType(props: Props) {
   const fields = [
     <ServiceField
       currentValue={params.serviceName}
-      onChange={(value) => setRuleParams('serviceName', value)}
+      onChange={(value) => {
+        if (value !== params.serviceName) {
+          setRuleParams('serviceName', value);
+          setRuleParams('environment', ENVIRONMENT_ALL.value);
+        }
+      }}
     />,
     <EnvironmentField
       currentValue={params.environment}
       onChange={(value) => setRuleParams('environment', value)}
+      serviceName={params.serviceName}
     />,
     <IsAboveField
       value={params.threshold}

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

@@ -71,15 +71,23 @@ export function TransactionDurationAnomalyRuleType(props: Props) {
   const fields = [
     <ServiceField
       currentValue={params.serviceName}
-      onChange={(value) => setRuleParams('serviceName', value)}
+      onChange={(value) => {
+        if (value !== params.serviceName) {
+          setRuleParams('serviceName', value);
+          setRuleParams('transactionType', '');
+          setRuleParams('environment', ENVIRONMENT_ALL.value);
+        }
+      }}
     />,
     <TransactionTypeField
       currentValue={params.transactionType}
       onChange={(value) => setRuleParams('transactionType', value)}
+      serviceName={params.serviceName}
     />,
     <EnvironmentField
       currentValue={params.environment}
       onChange={(value) => setRuleParams('environment', value)}
+      serviceName={params.serviceName}
     />,
     <PopoverExpression
       value={<AnomalySeverity type={params.anomalySeverityType} />}

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

@@ -146,15 +146,23 @@ export function TransactionDurationRuleType(props: Props) {
     <ServiceField
       allowAll={false}
       currentValue={params.serviceName}
-      onChange={(value) => setRuleParams('serviceName', value)}
+      onChange={(value) => {
+        if (value !== params.serviceName) {
+          setRuleParams('serviceName', value);
+          setRuleParams('transactionType', '');
+          setRuleParams('environment', ENVIRONMENT_ALL.value);
+        }
+      }}
     />,
     <TransactionTypeField
       currentValue={params.transactionType}
       onChange={(value) => setRuleParams('transactionType', value)}
+      serviceName={params.serviceName}
     />,
     <EnvironmentField
       currentValue={params.environment}
       onChange={(value) => setRuleParams('environment', value)}
+      serviceName={params.serviceName}
     />,
     <PopoverExpression
       value={params.aggregationType}

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

@@ -99,15 +99,23 @@ export function TransactionErrorRateRuleType(props: Props) {
   const fields = [
     <ServiceField
       currentValue={params.serviceName}
-      onChange={(value) => setRuleParams('serviceName', value)}
+      onChange={(value) => {
+        if (value !== params.serviceName) {
+          setRuleParams('serviceName', value);
+          setRuleParams('transactionType', '');
+          setRuleParams('environment', ENVIRONMENT_ALL.value);
+        }
+      }}
     />,
     <TransactionTypeField
       currentValue={params.transactionType}
       onChange={(value) => setRuleParams('transactionType', value)}
+      serviceName={params.serviceName}
     />,
     <EnvironmentField
       currentValue={params.environment}
       onChange={(value) => setRuleParams('environment', value)}
+      serviceName={params.serviceName}
     />,
     <IsAboveField
       value={params.threshold}

x-pack/plugins/apm/public/components/alerting/utils/fields.tsx

@@ -63,9 +63,11 @@ export function ServiceField({
 export function EnvironmentField({
   currentValue,
   onChange,
+  serviceName,
 }: {
   currentValue: string;
   onChange: (value?: string) => void;
+  serviceName?: string;
 }) {
   return (
     <PopoverExpression
@@ -90,6 +92,7 @@ export function EnvironmentField({
         })}
         start={moment().subtract(24, 'h').toISOString()}
         end={moment().toISOString()}
+        serviceName={serviceName}
       />
     </PopoverExpression>
   );
@@ -98,9 +101,11 @@ export function EnvironmentField({
 export function TransactionTypeField({
   currentValue,
   onChange,
+  serviceName,
 }: {
   currentValue?: string;
   onChange: (value?: string) => void;
+  serviceName?: string;
 }) {
   const label = i18n.translate('xpack.apm.alerting.fields.type', {
     defaultMessage: 'Type',
@@ -126,6 +131,7 @@ export function TransactionTypeField({
         )}
         start={moment().subtract(24, 'h').toISOString()}
         end={moment().toISOString()}
+        serviceName={serviceName}
       />
     </PopoverExpression>
   );

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

@@ -23,6 +23,7 @@ interface SuggestionsSelectProps {
   placeholder: string;
   dataTestSubj?: string;
   prepend?: string;
+  serviceName?: string;
 }
 
 export function SuggestionsSelect({
@@ -38,6 +39,7 @@ export function SuggestionsSelect({
   dataTestSubj,
   isClearable = true,
   prepend,
+  serviceName,
 }: SuggestionsSelectProps) {
   let defaultOption: EuiComboBoxOptionOption<string> | undefined;
 
@@ -59,11 +61,12 @@ export function SuggestionsSelect({
             fieldValue: searchValue,
             start,
             end,
+            serviceName,
           },
         },
       });
     },
-    [fieldName, searchValue, start, end],
+    [fieldName, searchValue, start, end, serviceName],
     { preservePreviousData: false }
   );