[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)](#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":"[email protected]"},"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-->

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>
   );

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>
   );