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

(cherry picked from commit 92b2c03)
elastic · Sep 19, 2024 · 1af6b3d · 1af6b3d
1 parent c5ff79a
commit 1af6b3d
Show file tree

Hide file tree

Showing 4 changed files with 71 additions and 32 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
@@ -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 });
     }
   };
 

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
@@ -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,
@@ -104,15 +104,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' }} />

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