From 63815fb591e2a4c68b31d20e0c14a01b9baa86e0 Mon Sep 17 00:00:00 2001 From: Walter Rafelsberger Date: Fri, 11 Oct 2024 16:15:53 +0200 Subject: [PATCH] Revert [ML] AIOps: Use package instead of context for using field stats flyout (#194517) (#195860) ## Summary This reverts #194517 ([ML] AIOps: Use package instead of context for using field stats flyout) committed in eebfba4f9bfe2592ce92d35aed9cf3c0c8540130. The PR refactored how `FieldStatsFlyout` is passed in as a dependency to change point detection. Unfortunately the refactor caused the dropdown to select the split field to break when used in the flyout for the options of the change point detection embeddable. This revert is done to restore the original behavior. In a follow up I will revisit the refactor to work properly. ### Checklist - [x] This was checked for breaking API changes and was [labeled appropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#_add_your_labels) (cherry picked from commit 37a420b950aa7ced58360283ec4a4e63d5d410f8) --- .../change_point_detection/fields_config.tsx | 5 ++-- .../metric_field_selector.tsx | 5 ++-- .../split_field_selector.tsx | 5 ++-- .../public/hooks/use_aiops_app_context.ts | 26 ++++++++++++++++++- x-pack/plugins/aiops/tsconfig.json | 1 - .../aiops/change_point_detection.tsx | 2 ++ 6 files changed, 36 insertions(+), 8 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 index 3c906dae4446a..38b5620465a0d 100644 --- 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,7 +37,6 @@ 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'; @@ -639,7 +638,7 @@ export const FieldsControls: FC> = ({ }) => { const { splitFieldsOptions, combinedQuery } = useChangePointDetectionContext(); const { dataView } = useDataSource(); - const { data, uiSettings, fieldFormats, charts } = useAiopsAppContext(); + const { data, uiSettings, fieldFormats, charts, fieldStats } = useAiopsAppContext(); const timefilter = useTimefilter(); // required in order to trigger state updates useTimeRangeUpdates(); @@ -655,6 +654,8 @@ export const FieldsControls: FC> = ({ }; }, [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 index 8456063437bb5..2f2db17ee6afc 100644 --- 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,9 +19,10 @@ interface MetricFieldSelectorProps { export const MetricFieldSelector: FC = React.memo( ({ value, onChange, inline = true }) => { + const { fieldStats } = useAiopsAppContext(); const { metricFieldOptions } = useChangePointDetectionControlsContext(); - const { renderOption, closeFlyout } = useFieldStatsTrigger(); + const { renderOption, closeFlyout } = fieldStats?.useFieldStatsTrigger() ?? {}; const options = useMemo>>(() => { 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 index 182262416e810..cfc33d79d3e54 100644 --- 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 { useFieldStatsTrigger } from '@kbn/ml-field-stats-flyout'; +import { useAiopsAppContext } from '../../hooks/use_aiops_app_context'; import { useChangePointDetectionControlsContext } from './change_point_detection_context'; interface SplitFieldSelectorProps { @@ -20,7 +20,8 @@ interface SplitFieldSelectorProps { export const SplitFieldSelector: FC = React.memo( ({ value, onChange, inline = true }) => { - const { renderOption, closeFlyout } = useFieldStatsTrigger(); + const { fieldStats } = useAiopsAppContext(); + const { renderOption, closeFlyout } = fieldStats?.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 index de563f8f5a38d..03762a7ba70ba 100644 --- 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, useContext } from 'react'; +import { createContext, type FC, type PropsWithChildren, useContext } from 'react'; import type { ObservabilityAIAssistantPublicStart } from '@kbn/observability-ai-assistant-plugin/public'; import type { IStorageWrapper } from '@kbn/kibana-utils-plugin/public'; @@ -24,6 +24,13 @@ 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 { EmbeddableStart } from '@kbn/embeddable-plugin/public'; import type { CasesPublicStart } from '@kbn/cases-plugin/public'; import type { UsageCollectionSetup } from '@kbn/usage-collection-plugin/public'; @@ -104,6 +111,23 @@ export interface AiopsAppContextValue { * Internationalisation service */ i18n: CoreStart['i18n']; + /** + * Deps for unified fields stats. + */ + fieldStats?: { + useFieldStatsTrigger: () => { + renderOption: EuiComboBoxProps['renderOption']; + closeFlyout: () => void; + }; + FieldStatsFlyoutProvider: FC< + PropsWithChildren<{ + dataView: DataView; + fieldStatsServices: FieldStatsServices; + timeRangeMs?: TimeRangeMs; + dslQuery?: FieldStatsProps['dslQuery']; + }> + >; + }; embeddable?: EmbeddableStart; cases?: CasesPublicStart; isServerless?: boolean; diff --git a/x-pack/plugins/aiops/tsconfig.json b/x-pack/plugins/aiops/tsconfig.json index a90c72660f069..188f8b275fbac 100644 --- a/x-pack/plugins/aiops/tsconfig.json +++ b/x-pack/plugins/aiops/tsconfig.json @@ -79,7 +79,6 @@ "@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 index f9c2e7846be91..2d4c06321e8da 100644 --- a/x-pack/plugins/ml/public/application/aiops/change_point_detection.tsx +++ b/x-pack/plugins/ml/public/application/aiops/change_point_detection.tsx @@ -14,6 +14,7 @@ import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui'; import { FormattedMessage } from '@kbn/i18n-react'; import { ChangePointDetection } from '@kbn/aiops-plugin/public'; import { AIOPS_EMBEDDABLE_ORIGIN } from '@kbn/aiops-common/constants'; +import { useFieldStatsTrigger, FieldStatsFlyoutProvider } from '@kbn/ml-field-stats-flyout'; import { useDataSource } from '../contexts/ml/data_source_context'; import { useMlKibana } from '../contexts/kibana'; @@ -72,6 +73,7 @@ export const ChangePointDetectionPage: FC = () => { 'unifiedSearch', 'usageCollection', ]), + fieldStats: { useFieldStatsTrigger, FieldStatsFlyoutProvider }, }} /> ) : null}