[8.x] fix(slo): use correct uisettings (#193362) (#193457)

# Backport

This will backport the following commits from `main` to `8.x`:
- [fix(slo): use correct uisettings
(#193362)](#193362)

<!--- Backport version: 9.4.3 -->

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

<!--BACKPORT [{"author":{"name":"Kevin
Delemme","email":"[email protected]"},"sourceCommit":{"committedDate":"2024-09-19T17:23:55Z","message":"fix(slo):
use correct uisettings
(#193362)","sha":"92b2c0324779711b6c95b1f90027cef210401ce9","branchLabelMapping":{"^v9.0.0$":"main","^v8.16.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["backport","release_note:skip","v9.0.0","backport:prev-minor","backport:prev-major","ci:project-deploy-observability","Team:obs-ux-management","v8.16.0"],"title":"fix(slo):
use correct
uisettings","number":193362,"url":"https://github.com/elastic/kibana/pull/193362","mergeCommit":{"message":"fix(slo):
use correct uisettings
(#193362)","sha":"92b2c0324779711b6c95b1f90027cef210401ce9"}},"sourceBranch":"main","suggestedTargetBranches":["8.x"],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/193362","number":193362,"mergeCommit":{"message":"fix(slo):
use correct uisettings
(#193362)","sha":"92b2c0324779711b6c95b1f90027cef210401ce9"}},{"branch":"8.x","label":"v8.16.0","branchLabelMappingKey":"^v8.16.0$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

Co-authored-by: Kevin Delemme <[email protected]>

x-pack/plugins/observability_solution/slo/public/pages/slos/components/common/good_bad_events_chart.tsx → x-pack/plugins/observability_solution/slo/public/components/good_bad_events_chart/good_bad_events_chart.tsx

@@ -22,10 +22,10 @@ import { GetPreviewDataResponse, SLOWithSummaryResponse } from '@kbn/slo-schema'
 import moment from 'moment';
 import React, { useRef } from 'react';
 import { useAnnotations } from '@kbn/observability-plugin/public';
-import { TimeBounds } from '../../../slo_details/types';
-import { getBrushTimeBounds } from '../../../../utils/slo/duration';
-import { useKibana } from '../../../../utils/kibana_react';
-import { openInDiscover } from '../../../../utils/slo/get_discover_link';
+import { TimeBounds } from '../../pages/slo_details/types';
+import { getBrushTimeBounds } from '../../utils/slo/duration';
+import { useKibana } from '../../utils/kibana_react';
+import { openInDiscover } from '../../utils/slo/get_discover_link';
 
 export interface Props {
   data: GetPreviewDataResponse;
@@ -89,7 +89,7 @@ export function GoodBadEventsChart({
         to: moment(datum.x).add(intervalInMilliseconds, 'ms').toISOString(),
         mode: 'absolute' as const,
       };
-      openInDiscover(slo, isBad, !isBad, timeRange, discover);
+      openInDiscover({ slo, showBad: isBad, showGood: !isBad, timeRange, discover, uiSettings });
     }
   };
 

x-pack/plugins/observability_solution/slo/public/pages/slo_details/components/events_chart_panel.tsx

@@ -26,7 +26,7 @@ import { TimeBounds } from '../types';
 import { SloTabId } from './slo_details';
 import { useGetPreviewData } from '../../../hooks/use_get_preview_data';
 import { useKibana } from '../../../utils/kibana_react';
-import { GoodBadEventsChart } from '../../slos/components/common/good_bad_events_chart';
+import { GoodBadEventsChart } from '../../../components/good_bad_events_chart/good_bad_events_chart';
 import { getDiscoverLink } from '../../../utils/slo/get_discover_link';
 
 export interface Props {
@@ -37,7 +37,7 @@ export interface Props {
 }
 
 export function EventsChartPanel({ slo, range, selectedTabId, onBrushed }: Props) {
-  const { discover } = useKibana().services;
+  const { discover, uiSettings } = useKibana().services;
 
   const { isLoading, data } = useGetPreviewData({
     range,
@@ -105,15 +105,16 @@ export function EventsChartPanel({ slo, range, selectedTabId, onBrushed }: Props
             <EuiFlexItem grow={0}>
               <EuiLink
                 color="text"
-                href={getDiscoverLink(
+                href={getDiscoverLink({
                   slo,
-                  {
+                  timeRange: {
                     from: 'now-24h',
                     to: 'now',
                     mode: 'relative',
                   },
-                  discover
-                )}
+                  discover,
+                  uiSettings,
+                })}
                 data-test-subj="sloDetailDiscoverLink"
               >
                 <EuiIcon type="sortRight" style={{ marginRight: '4px' }} />

x-pack/plugins/observability_solution/slo/public/pages/slo_edit/components/common/data_preview_chart.tsx

@@ -38,7 +38,7 @@ import moment from 'moment';
 import React, { useState } from 'react';
 import { useFormContext } from 'react-hook-form';
 import { useKibana } from '../../../../utils/kibana_react';
-import { GoodBadEventsChart } from '../../../slos/components/common/good_bad_events_chart';
+import { GoodBadEventsChart } from '../../../../components/good_bad_events_chart/good_bad_events_chart';
 import { useDebouncedGetPreviewData } from '../../hooks/use_preview';
 import { useSectionFormValidation } from '../../hooks/use_section_form_validation';
 import { CreateSLOForm } from '../../types';

x-pack/plugins/observability_solution/slo/public/utils/slo/get_discover_link.ts

@@ -11,13 +11,22 @@ import { i18n } from '@kbn/i18n';
 import { buildEsQuery } from '@kbn/observability-plugin/public';
 import { v4 } from 'uuid';
 import { isEmpty } from 'lodash';
+import { getEsQueryConfig } from '@kbn/data-plugin/public';
+import { IUiSettingsClient } from '@kbn/core/public';
 
-function createDiscoverLocator(
-  slo: SLOWithSummaryResponse,
+function createDiscoverLocator({
+  slo,
   showBad = false,
   showGood = false,
-  timeRange?: TimeRange
-) {
+  timeRange,
+  uiSettings,
+}: {
+  slo: SLOWithSummaryResponse;
+  showBad: boolean;
+  showGood: boolean;
+  timeRange: TimeRange;
+  uiSettings?: IUiSettingsClient;
+}) {
   const indexId = v4();
   const filters: Filter[] = [];
 
@@ -42,8 +51,17 @@ function createDiscoverLocator(
     const totalFilters = kqlWithFiltersSchema.is(slo.indicator.params.total)
       ? slo.indicator.params.total.filters
       : [];
-    const customGoodFilter = buildEsQuery({ kuery: goodKuery, filters: goodFilters });
-    const customTotalFilter = buildEsQuery({ kuery: totalKuery, filters: totalFilters });
+
+    const customGoodFilter = buildEsQuery({
+      kuery: goodKuery,
+      filters: goodFilters,
+      ...(uiSettings && { config: getEsQueryConfig(uiSettings) }),
+    });
+    const customTotalFilter = buildEsQuery({
+      kuery: totalKuery,
+      filters: totalFilters,
+      ...(uiSettings && { config: getEsQueryConfig(uiSettings) }),
+    });
     const customBadFilter = { bool: { filter: customTotalFilter, must_not: customGoodFilter } };
 
     filters.push({
@@ -144,22 +162,42 @@ function createDiscoverLocator(
   };
 }
 
-export function getDiscoverLink(
-  slo: SLOWithSummaryResponse,
-  timeRange: TimeRange,
-  discover?: DiscoverStart
-) {
-  const config = createDiscoverLocator(slo, false, false, timeRange);
-  return discover?.locator?.getRedirectUrl(config);
+export function getDiscoverLink({
+  slo,
+  timeRange,
+  discover,
+  uiSettings,
+}: {
+  slo: SLOWithSummaryResponse;
+  timeRange: TimeRange;
+  discover?: DiscoverStart;
+  uiSettings?: IUiSettingsClient;
+}) {
+  const locatorConfig = createDiscoverLocator({
+    slo,
+    showBad: false,
+    showGood: false,
+    timeRange,
+    uiSettings,
+  });
+  return discover?.locator?.getRedirectUrl(locatorConfig);
 }
 
-export function openInDiscover(
-  slo: SLOWithSummaryResponse,
+export function openInDiscover({
+  slo,
   showBad = false,
   showGood = false,
-  timeRange?: TimeRange,
-  discover?: DiscoverStart
-) {
-  const config = createDiscoverLocator(slo, showBad, showGood, timeRange);
-  discover?.locator?.navigate(config);
+  timeRange,
+  discover,
+  uiSettings,
+}: {
+  slo: SLOWithSummaryResponse;
+  showBad: boolean;
+  showGood: boolean;
+  timeRange: TimeRange;
+  discover?: DiscoverStart;
+  uiSettings?: IUiSettingsClient;
+}) {
+  const locatorConfig = createDiscoverLocator({ slo, showBad, showGood, timeRange, uiSettings });
+  discover?.locator?.navigate(locatorConfig);
 }