feat(slo): Add filter query into APM indicator types (#152273)

x-pack/plugins/observability/public/pages/slo_edit/components/apm_availability/apm_availability_indicator_type_form.tsx

@@ -18,10 +18,11 @@ import { i18n } from '@kbn/i18n';
 import type { CreateSLOInput } from '@kbn/slo-schema';
 
 import { useFetchApmIndex } from '../../../../hooks/slo/use_fetch_apm_indices';
-import { FieldSelector } from '../common/field_selector';
+import { FieldSelector } from '../apm_common/field_selector';
+import { QueryBuilder } from '../common/query_builder';
 
 export function ApmAvailabilityIndicatorTypeForm() {
-  const { control, setValue } = useFormContext<CreateSLOInput>();
+  const { control, setValue, watch } = useFormContext<CreateSLOInput>();
   const { data: apmIndex } = useFetchApmIndex();
   useEffect(() => {
     setValue('indicator.params.index', apmIndex);
@@ -145,7 +146,23 @@ export function ApmAvailabilityIndicatorTypeForm() {
             )}
           />
         </EuiFlexItem>
-        <EuiFlexItem />
+        <EuiFlexItem>
+          <QueryBuilder
+            control={control}
+            dataTestSubj="apmLatencyFilterInput"
+            indexPatternString={watch('indicator.params.index')}
+            label={i18n.translate('xpack.observability.slos.sloEdit.apmLatency.filter', {
+              defaultMessage: 'Query filter',
+            })}
+            name="indicator.params.filter"
+            placeholder={i18n.translate(
+              'xpack.observability.slos.sloEdit.apmLatency.filter.placeholder',
+              {
+                defaultMessage: 'Custom filter to apply on the index',
+              }
+            )}
+          />
+        </EuiFlexItem>
       </EuiFlexGroup>
     </EuiFlexGroup>
   );

x-pack/plugins/observability/public/pages/slo_edit/components/apm_common/field_selector.stories.tsx

@@ -15,7 +15,7 @@ import { SLO_EDIT_FORM_DEFAULT_VALUES } from '../../constants';
 
 export default {
   component: Component,
-  title: 'app/SLO/EditPage/Common/FieldSelector',
+  title: 'app/SLO/EditPage/ApmCommon/FieldSelector',
   decorators: [KibanaReactStorybookDecorator],
 };
 

x-pack/plugins/observability/public/pages/slo_edit/components/apm_latency/apm_latency_indicator_type_form.tsx

@@ -12,10 +12,11 @@ import { i18n } from '@kbn/i18n';
 import type { CreateSLOInput } from '@kbn/slo-schema';
 
 import { useFetchApmIndex } from '../../../../hooks/slo/use_fetch_apm_indices';
-import { FieldSelector } from '../common/field_selector';
+import { FieldSelector } from '../apm_common/field_selector';
+import { QueryBuilder } from '../common/query_builder';
 
 export function ApmLatencyIndicatorTypeForm() {
-  const { control, setValue } = useFormContext<CreateSLOInput>();
+  const { control, setValue, watch } = useFormContext<CreateSLOInput>();
   const { data: apmIndex } = useFetchApmIndex();
   useEffect(() => {
     setValue('indicator.params.index', apmIndex);
@@ -113,7 +114,23 @@ export function ApmLatencyIndicatorTypeForm() {
             )}
           />
         </EuiFlexItem>
-        <EuiFlexItem />
+        <EuiFlexItem>
+          <QueryBuilder
+            control={control}
+            dataTestSubj="apmLatencyFilterInput"
+            indexPatternString={watch('indicator.params.index')}
+            label={i18n.translate('xpack.observability.slos.sloEdit.apmLatency.filter', {
+              defaultMessage: 'Query filter',
+            })}
+            name="indicator.params.filter"
+            placeholder={i18n.translate(
+              'xpack.observability.slos.sloEdit.apmLatency.filter.placeholder',
+              {
+                defaultMessage: 'Custom filter to apply on the index',
+              }
+            )}
+          />
+        </EuiFlexItem>
       </EuiFlexGroup>
     </EuiFlexGroup>
   );

x-pack/plugins/observability/public/pages/slo_edit/components/custom_kql/custom_kql_indicator_type_form.tsx

@@ -12,7 +12,7 @@ import { useFormContext } from 'react-hook-form';
 import { CreateSLOInput } from '@kbn/slo-schema';
 
 import { IndexSelection } from './index_selection';
-import { QueryBuilder } from './query_builder';
+import { QueryBuilder } from '../common/query_builder';
 
 export function CustomKqlIndicatorTypeForm() {
   const { control, watch } = useFormContext<CreateSLOInput>();