From c5652e638ac3b5892d0c4ed9ee20484d42885aac Mon Sep 17 00:00:00 2001
From: Kevin Delemme <kevin.delemme@elastic.co>
Date: Fri, 29 Sep 2023 11:38:51 -0400
Subject: [PATCH] [8.10] feat(slo): add partition by field in APM indicators
 (#165106) (#167652)

# Backport

This will backport the following commits from `main` to `8.10`:
- [feat(slo): add partition by field in APM indicators
(#165106)](https://github.com/elastic/kibana/pull/165106)

<!--- Backport version: 8.9.8 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Kevin
Delemme","email":"kevin.delemme@elastic.co"},"sourceCommit":{"committedDate":"2023-08-30T13:57:10Z","message":"feat(slo):
add partition by field in APM indicators
(#165106)","sha":"e56c0f61eddbb5dd377a7893cfb69d9044d3d86f","branchLabelMapping":{"^v8.11.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["backport","release_note:skip","Team:
Actionable
Observability","v8.10.0","v8.11.0"],"number":165106,"url":"https://github.com/elastic/kibana/pull/165106","mergeCommit":{"message":"feat(slo):
add partition by field in APM indicators
(#165106)","sha":"e56c0f61eddbb5dd377a7893cfb69d9044d3d86f"}},"sourceBranch":"main","suggestedTargetBranches":["8.10"],"targetPullRequestStates":[{"branch":"8.10","label":"v8.10.0","labelRegex":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v8.11.0","labelRegex":"^v8.11.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/165106","number":165106,"mergeCommit":{"message":"feat(slo):
add partition by field in APM indicators
(#165106)","sha":"e56c0f61eddbb5dd377a7893cfb69d9044d3d86f"}}]}]
BACKPORT-->
---
 .../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>
   );