From a007dd14d82c35d32a90dd759822a2d89f816668 Mon Sep 17 00:00:00 2001
From: Kevin Delemme <kevin.delemme@elastic.co>
Date: Tue, 29 Aug 2023 10:17:02 -0400
Subject: [PATCH] Add partition by field

---
 .../apm_availability/apm_availability_indicator_type_form.tsx | 4 ++++
 .../apm_latency/apm_latency_indicator_type_form.tsx           | 4 ++++
 2 files changed, 8 insertions(+)

diff --git a/x-pack/plugins/observability/public/pages/slo_edit/components/apm_availability/apm_availability_indicator_type_form.tsx b/x-pack/plugins/observability/public/pages/slo_edit/components/apm_availability/apm_availability_indicator_type_form.tsx
index 5c6f06051eb3d..377f5e0dc0710 100644
--- a/x-pack/plugins/observability/public/pages/slo_edit/components/apm_availability/apm_availability_indicator_type_form.tsx
+++ b/x-pack/plugins/observability/public/pages/slo_edit/components/apm_availability/apm_availability_indicator_type_form.tsx
@@ -12,10 +12,12 @@ import { useFormContext } from 'react-hook-form';
 import { CreateSLOForm } from '../../types';
 import { FieldSelector } from '../apm_common/field_selector';
 import { DataPreviewChart } from '../common/data_preview_chart';
+import { GroupByFieldSelector } from '../common/group_by_field_selector';
 import { QueryBuilder } from '../common/query_builder';
 
 export function ApmAvailabilityIndicatorTypeForm() {
   const { watch } = useFormContext<CreateSLOForm>();
+  const index = watch('indicator.params.index');
 
   return (
     <EuiFlexGroup direction="column" gutterSize="l">
@@ -119,6 +121,8 @@ export function ApmAvailabilityIndicatorTypeForm() {
         </EuiFlexItem>
       </EuiFlexGroup>
 
+      <GroupByFieldSelector index={index} />
+
       <DataPreviewChart />
     </EuiFlexGroup>
   );
diff --git a/x-pack/plugins/observability/public/pages/slo_edit/components/apm_latency/apm_latency_indicator_type_form.tsx b/x-pack/plugins/observability/public/pages/slo_edit/components/apm_latency/apm_latency_indicator_type_form.tsx
index e91080e2910dd..316f17f5072e6 100644
--- a/x-pack/plugins/observability/public/pages/slo_edit/components/apm_latency/apm_latency_indicator_type_form.tsx
+++ b/x-pack/plugins/observability/public/pages/slo_edit/components/apm_latency/apm_latency_indicator_type_form.tsx
@@ -12,10 +12,12 @@ import { Controller, useFormContext } from 'react-hook-form';
 import { CreateSLOForm } from '../../types';
 import { FieldSelector } from '../apm_common/field_selector';
 import { DataPreviewChart } from '../common/data_preview_chart';
+import { GroupByFieldSelector } from '../common/group_by_field_selector';
 import { QueryBuilder } from '../common/query_builder';
 
 export function ApmLatencyIndicatorTypeForm() {
   const { control, watch, getFieldState } = useFormContext<CreateSLOForm>();
+  const index = watch('indicator.params.index');
 
   return (
     <EuiFlexGroup direction="column" gutterSize="l">
@@ -162,6 +164,8 @@ export function ApmLatencyIndicatorTypeForm() {
         </EuiFlexItem>
       </EuiFlexGroup>
 
+      <GroupByFieldSelector index={index} />
+
       <DataPreviewChart />
     </EuiFlexGroup>
   );