[8.x] [ML] AIOps: Use package instead of context for using field stat…

…s flyout (#194517) (#194710) # Backport This will backport the following commits from `main` to `8.x`: - [[ML] AIOps: Use package instead of context for using field stats flyout (#194517)](#194517)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  Co-authored-by: Walter Rafelsberger <[email protected]>
elastic · Oct 2, 2024 · eeee8f7 · eeee8f7
1 parent f284343
commit eeee8f7
Show file tree

Hide file tree

Showing 6 changed files with 8 additions and 36 deletions.
diff --git a/x-pack/plugins/aiops/public/components/change_point_detection/fields_config.tsx b/x-pack/plugins/aiops/public/components/change_point_detection/fields_config.tsx
@@ -37,6 +37,7 @@ import {
   CHANGE_POINT_DETECTION_VIEW_TYPE,
   EMBEDDABLE_CHANGE_POINT_CHART_TYPE,
 } from '@kbn/aiops-change-point-detection/constants';
+import { FieldStatsFlyoutProvider } from '@kbn/ml-field-stats-flyout';
 import type { ChangePointEmbeddableRuntimeState } from '../../embeddables/change_point_chart/types';
 import { MaxSeriesControl } from './max_series_control';
 import { useCasesModal } from '../../hooks/use_cases_modal';
@@ -638,7 +639,7 @@ export const FieldsControls: FC<PropsWithChildren<FieldsControlsProps>> = ({
 }) => {
   const { splitFieldsOptions, combinedQuery } = useChangePointDetectionContext();
   const { dataView } = useDataSource();
-  const { data, uiSettings, fieldFormats, charts, fieldStats } = useAiopsAppContext();
+  const { data, uiSettings, fieldFormats, charts } = useAiopsAppContext();
   const timefilter = useTimefilter();
   // required in order to trigger state updates
   useTimeRangeUpdates();
@@ -654,8 +655,6 @@ export const FieldsControls: FC<PropsWithChildren<FieldsControlsProps>> = ({
     };
   }, [uiSettings, data, fieldFormats, charts]);
 
-  const FieldStatsFlyoutProvider = fieldStats!.FieldStatsFlyoutProvider;
-
   const onChangeFn = useCallback(
     (field: keyof FieldConfig, value: string) => {
       const result = { ...fieldConfig, [field]: value };

diff --git a/x-pack/plugins/aiops/public/components/change_point_detection/metric_field_selector.tsx b/x-pack/plugins/aiops/public/components/change_point_detection/metric_field_selector.tsx
@@ -8,8 +8,8 @@
 import React, { type FC, useCallback, useMemo } from 'react';
 import { i18n } from '@kbn/i18n';
 import { EuiComboBox, type EuiComboBoxOptionOption, EuiFormRow } from '@elastic/eui';
+import { useFieldStatsTrigger } from '@kbn/ml-field-stats-flyout';
 import { useChangePointDetectionControlsContext } from './change_point_detection_context';
-import { useAiopsAppContext } from '../../hooks/use_aiops_app_context';
 
 interface MetricFieldSelectorProps {
   value: string;
@@ -19,10 +19,9 @@ interface MetricFieldSelectorProps {
 
 export const MetricFieldSelector: FC<MetricFieldSelectorProps> = React.memo(
   ({ value, onChange, inline = true }) => {
-    const { fieldStats } = useAiopsAppContext();
     const { metricFieldOptions } = useChangePointDetectionControlsContext();
 
-    const { renderOption, closeFlyout } = fieldStats?.useFieldStatsTrigger() ?? {};
+    const { renderOption, closeFlyout } = useFieldStatsTrigger();
 
     const options = useMemo<Array<EuiComboBoxOptionOption<string>>>(() => {
       return metricFieldOptions.map((v) => {

diff --git a/x-pack/plugins/aiops/public/components/change_point_detection/split_field_selector.tsx b/x-pack/plugins/aiops/public/components/change_point_detection/split_field_selector.tsx
@@ -9,7 +9,7 @@ import type { FC } from 'react';
 import React, { useMemo, useCallback } from 'react';
 import { i18n } from '@kbn/i18n';
 import { EuiComboBox, type EuiComboBoxOptionOption, EuiFormRow } from '@elastic/eui';
-import { useAiopsAppContext } from '../../hooks/use_aiops_app_context';
+import { useFieldStatsTrigger } from '@kbn/ml-field-stats-flyout';
 import { useChangePointDetectionControlsContext } from './change_point_detection_context';
 
 interface SplitFieldSelectorProps {
@@ -20,8 +20,7 @@ interface SplitFieldSelectorProps {
 
 export const SplitFieldSelector: FC<SplitFieldSelectorProps> = React.memo(
   ({ value, onChange, inline = true }) => {
-    const { fieldStats } = useAiopsAppContext();
-    const { renderOption, closeFlyout } = fieldStats?.useFieldStatsTrigger() ?? {};
+    const { renderOption, closeFlyout } = useFieldStatsTrigger();
 
     const { splitFieldsOptions } = useChangePointDetectionControlsContext();
 

diff --git a/x-pack/plugins/aiops/public/hooks/use_aiops_app_context.ts b/x-pack/plugins/aiops/public/hooks/use_aiops_app_context.ts
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { createContext, type FC, type PropsWithChildren, useContext } from 'react';
+import { createContext, useContext } from 'react';
 
 import type { ObservabilityAIAssistantPublicStart } from '@kbn/observability-ai-assistant-plugin/public';
 import type { IStorageWrapper } from '@kbn/kibana-utils-plugin/public';
@@ -24,13 +24,6 @@ import type {
   ThemeServiceStart,
 } from '@kbn/core/public';
 import type { LensPublicStart } from '@kbn/lens-plugin/public';
-import { type EuiComboBoxProps } from '@elastic/eui/src/components/combo_box/combo_box';
-import { type DataView } from '@kbn/data-views-plugin/common';
-import type {
-  FieldStatsProps,
-  FieldStatsServices,
-} from '@kbn/unified-field-list/src/components/field_stats';
-import type { TimeRange as TimeRangeMs } from '@kbn/ml-date-picker';
 import type { PresentationUtilPluginStart } from '@kbn/presentation-util-plugin/public';
 import type { EmbeddableStart } from '@kbn/embeddable-plugin/public';
 import type { CasesPublicStart } from '@kbn/cases-plugin/public';
@@ -112,23 +105,6 @@ export interface AiopsAppDependencies {
    * Internationalisation service
    */
   i18n: CoreStart['i18n'];
-  /**
-   * Deps for unified fields stats.
-   */
-  fieldStats?: {
-    useFieldStatsTrigger: () => {
-      renderOption: EuiComboBoxProps<string>['renderOption'];
-      closeFlyout: () => void;
-    };
-    FieldStatsFlyoutProvider: FC<
-      PropsWithChildren<{
-        dataView: DataView;
-        fieldStatsServices: FieldStatsServices;
-        timeRangeMs?: TimeRangeMs;
-        dslQuery?: FieldStatsProps['dslQuery'];
-      }>
-    >;
-  };
   presentationUtil?: PresentationUtilPluginStart;
   embeddable?: EmbeddableStart;
   cases?: CasesPublicStart;

diff --git a/x-pack/plugins/aiops/tsconfig.json b/x-pack/plugins/aiops/tsconfig.json
@@ -80,6 +80,7 @@
     "@kbn/observability-ai-assistant-plugin",
     "@kbn/ui-theme",
     "@kbn/apm-utils",
+    "@kbn/ml-field-stats-flyout",
   ],
   "exclude": [
     "target/**/*",

diff --git a/x-pack/plugins/ml/public/application/aiops/change_point_detection.tsx b/x-pack/plugins/ml/public/application/aiops/change_point_detection.tsx
@@ -13,7 +13,6 @@ import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 
 import { FormattedMessage } from '@kbn/i18n-react';
 import { ChangePointDetection } from '@kbn/aiops-plugin/public';
-import { useFieldStatsTrigger, FieldStatsFlyoutProvider } from '@kbn/ml-field-stats-flyout';
 
 import { useDataSource } from '../contexts/ml/data_source_context';
 import { useMlKibana } from '../contexts/kibana';
@@ -72,7 +71,6 @@ export const ChangePointDetectionPage: FC = () => {
               'unifiedSearch',
               'usageCollection',
             ]),
-            fieldStats: { useFieldStatsTrigger, FieldStatsFlyoutProvider },
           }}
         />
       ) : null}