fix(slo): use correct uisettings (#193362)

(cherry picked from commit 92b2c03) # Conflicts: # x-pack/plugins/observability_solution/slo/public/components/good_bad_events_chart/good_bad_events_chart.tsx # x-pack/plugins/observability_solution/slo/public/pages/slo_details/components/events_chart_panel.tsx # x-pack/plugins/observability_solution/slo/public/utils/slo/get_discover_link.ts
elastic · Sep 20, 2024 · f142eda · f142eda
1 parent 3f98ac6
commit f142eda
Show file tree

Hide file tree

Showing 4 changed files with 75 additions and 31 deletions.
diff --git a/...mponents/common/good_bad_events_chart.tsx → ...ad_events_chart/good_bad_events_chart.tsx b/...mponents/common/good_bad_events_chart.tsx → ...ad_events_chart/good_bad_events_chart.tsx
@@ -23,10 +23,10 @@ import { i18n } from '@kbn/i18n';
 import { GetPreviewDataResponse, SLOWithSummaryResponse } from '@kbn/slo-schema';
 import moment from 'moment';
 import React, { useRef } from 'react';
-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;
@@ -85,7 +85,8 @@ export function GoodBadEventsChart({
         to: moment(datanum.x).add(intervalInMilliseconds, 'ms').toISOString(),
         mode: 'absolute' as const,
       };
-      openInDiscover(discover, slo, isBad, !isBad, timeRange);
+      openInDiscover({ slo, showBad: isBad, showGood: !isBad, timeRange, discover, uiSettings });
+
     }
   };
 

diff --git a/...ins/observability_solution/slo/public/pages/slo_details/components/events_chart_panel.tsx b/...ins/observability_solution/slo/public/pages/slo_details/components/events_chart_panel.tsx
@@ -42,7 +42,7 @@ import { SloTabId } from './slo_details';
 import { useGetPreviewData } from '../../../hooks/use_get_preview_data';
 import { useKibana } from '../../../utils/kibana_react';
 import { COMPARATOR_MAPPING } from '../../slo_edit/constants';
-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 {
@@ -173,10 +173,15 @@ export function EventsChartPanel({ slo, range, selectedTabId, onBrushed }: Props
             <EuiFlexItem grow={0}>
               <EuiLink
                 color="text"
-                href={getDiscoverLink(discover, slo, {
-                  from: 'now-24h',
-                  to: 'now',
-                  mode: 'relative',
+                href={getDiscoverLink({
+                  slo,
+                  timeRange: {
+                    from: 'now-24h',
+                    to: 'now',
+                    mode: 'relative',
+                  },
+                  discover,
+                  uiSettings,
                 })}
                 data-test-subj="sloDetailDiscoverLink"
               >

diff --git a/...observability_solution/slo/public/pages/slo_edit/components/common/data_preview_chart.tsx b/...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';

diff --git a/x-pack/plugins/observability_solution/slo/public/utils/slo/get_discover_link.ts b/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(
-  discover: DiscoverStart,
-  slo: SLOWithSummaryResponse,
-  timeRange: TimeRange
-) {
-  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(
-  discover: DiscoverStart,
-  slo: SLOWithSummaryResponse,
+export function openInDiscover({
+  slo,
   showBad = false,
   showGood = false,
-  timeRange?: TimeRange
-) {
-  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);
 }