[ML] AIOps: Adds field stats for metric and split fields

x-pack/plugins/aiops/public/components/change_point_detection/fields_config.tsx

@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import React, { type FC, useCallback } from 'react';
+import React, { type FC, useCallback, useMemo } from 'react';
 import {
   EuiAccordion,
   EuiButton,
@@ -20,6 +20,10 @@ import {
 } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { i18n } from '@kbn/i18n';
+import { FieldStatsServices } from '@kbn/unified-field-list-plugin/public';
+import { useTimefilter, useTimeRangeUpdates } from '@kbn/ml-date-picker';
+import { useDataSource } from '../../hooks/use_data_source';
+import { useAiopsAppContext } from '../../hooks/use_aiops_app_context';
 import { ChangePointsTable } from './change_points_table';
 import { MAX_CHANGE_POINT_CONFIGS, SPLIT_FIELD_CARDINALITY_LIMIT } from './constants';
 import { FunctionPicker } from './function_picker';
@@ -205,7 +209,25 @@ interface FieldsControlsProps {
  * Renders controls for fields selection and emits updates on change.
  */
 export const FieldsControls: FC<FieldsControlsProps> = ({ fieldConfig, onChange, children }) => {
-  const { splitFieldsOptions } = useChangePointDetectionContext();
+  const { splitFieldsOptions, combinedQuery } = useChangePointDetectionContext();
+  const { dataView } = useDataSource();
+  const { data, uiSettings, fieldFormats, charts, fieldStats } = useAiopsAppContext();
+  const timefilter = useTimefilter();
+  // required in order to trigger state updates
+  useTimeRangeUpdates();
+  const timefilterActiveBounds = timefilter.getActiveBounds();
+
+  const fieldStatsServices: FieldStatsServices = useMemo(() => {
+    return {
+      uiSettings,
+      dataViews: data.dataViews,
+      data,
+      fieldFormats,
+      charts,
+    };
+  }, [uiSettings, data, fieldFormats, charts]);
+
+  const FieldStatsFlyoutProvider = fieldStats!.FieldStatsFlyoutProvider;
 
   const onChangeFn = useCallback(
     (field: keyof FieldConfig, value: string) => {
@@ -216,27 +238,41 @@ export const FieldsControls: FC<FieldsControlsProps> = ({ fieldConfig, onChange,
   );
 
   return (
-    <EuiFlexGroup alignItems={'center'} responsive={true} wrap={true} gutterSize={'m'}>
-      <EuiFlexItem grow={false} css={{ width: '200px' }}>
-        <FunctionPicker value={fieldConfig.fn} onChange={(v) => onChangeFn('fn', v)} />
-      </EuiFlexItem>
-      <EuiFlexItem grow={true} css={selectControlCss}>
-        <MetricFieldSelector
-          value={fieldConfig.metricField!}
-          onChange={(v) => onChangeFn('metricField', v)}
-        />
-      </EuiFlexItem>
-      {splitFieldsOptions.length > 0 ? (
+    <FieldStatsFlyoutProvider
+      fieldStatsServices={fieldStatsServices}
+      dataView={dataView}
+      dslQuery={combinedQuery}
+      timeRangeMs={
+        timefilterActiveBounds
+          ? {
+              from: timefilterActiveBounds.min!.valueOf(),
+              to: timefilterActiveBounds.max!.valueOf(),
+            }
+          : undefined
+      }
+    >
+      <EuiFlexGroup alignItems={'center'} responsive={true} wrap={true} gutterSize={'m'}>
+        <EuiFlexItem grow={false} css={{ width: '200px' }}>
+          <FunctionPicker value={fieldConfig.fn} onChange={(v) => onChangeFn('fn', v)} />
+        </EuiFlexItem>
         <EuiFlexItem grow={true} css={selectControlCss}>
-          <SplitFieldSelector
-            value={fieldConfig.splitField}
-            onChange={(v) => onChangeFn('splitField', v!)}
+          <MetricFieldSelector
+            value={fieldConfig.metricField!}
+            onChange={(v) => onChangeFn('metricField', v)}
           />
         </EuiFlexItem>
-      ) : null}
+        {splitFieldsOptions.length > 0 ? (
+          <EuiFlexItem grow={true} css={selectControlCss}>
+            <SplitFieldSelector
+              value={fieldConfig.splitField}
+              onChange={(v) => onChangeFn('splitField', v!)}
+            />
+          </EuiFlexItem>
+        ) : null}
 
-      {children}
-    </EuiFlexGroup>
+        {children}
+      </EuiFlexGroup>
+    </FieldStatsFlyoutProvider>
   );
 };
 

x-pack/plugins/aiops/public/components/change_point_detection/metric_field_selector.tsx

@@ -5,10 +5,12 @@
  * 2.0.
  */
 
-import React, { FC, useCallback, useMemo } from 'react';
+import React, { type FC, useCallback, useMemo } from 'react';
 import { i18n } from '@kbn/i18n';
 import { EuiComboBox, type EuiComboBoxOptionOption, EuiFormRow } from '@elastic/eui';
+import { type Field } from '@kbn/ml-plugin/common/types/fields';
 import { useChangePointDetectionContext } from './change_point_detection_context';
+import { useAiopsAppContext } from '../../hooks/use_aiops_app_context';
 
 interface MetricFieldSelectorProps {
   value: string;
@@ -17,10 +19,19 @@ interface MetricFieldSelectorProps {
 
 export const MetricFieldSelector: FC<MetricFieldSelectorProps> = React.memo(
   ({ value, onChange }) => {
+    const { fieldStats } = useAiopsAppContext();
     const { metricFieldOptions } = useChangePointDetectionContext();
 
+    const { renderOption } = fieldStats!.useFieldStatsTrigger();
+
     const options = useMemo<EuiComboBoxOptionOption[]>(() => {
-      return metricFieldOptions.map((v) => ({ value: v.name, label: v.displayName }));
+      return metricFieldOptions.map((v) => {
+        return {
+          value: v.name,
+          label: v.displayName,
+          field: { id: v.name, type: v.type } as Field,
+        };
+      });
     }, [metricFieldOptions]);
 
     const selection = options.filter((v) => v.value === value);
@@ -29,28 +40,32 @@ export const MetricFieldSelector: FC<MetricFieldSelectorProps> = React.memo(
       (selectedOptions: EuiComboBoxOptionOption[]) => {
         const option = selectedOptions[0];
         if (typeof option !== 'undefined') {
-          onChange(option.label);
+          onChange(option.value as string);
         }
       },
       [onChange]
     );
 
     return (
-      <EuiFormRow>
-        <EuiComboBox
-          compressed
-          prepend={i18n.translate('xpack.aiops.changePointDetection.selectMetricFieldLabel', {
-            defaultMessage: 'Metric field',
-          })}
-          singleSelection={{ asPlainText: true }}
-          options={options}
-          selectedOptions={selection}
-          onChange={onChangeCallback}
-          isClearable={false}
-          data-test-subj="aiopsChangePointMetricField"
-          onClick={(e) => e.stopPropagation()}
-        />
-      </EuiFormRow>
+      <>
+        <EuiFormRow>
+          <EuiComboBox
+            compressed
+            prepend={i18n.translate('xpack.aiops.changePointDetection.selectMetricFieldLabel', {
+              defaultMessage: 'Metric field',
+            })}
+            singleSelection={{ asPlainText: true }}
+            options={options}
+            selectedOptions={selection}
+            onChange={onChangeCallback}
+            isClearable={false}
+            data-test-subj="aiopsChangePointMetricField"
+            onClick={(e) => e.stopPropagation()}
+            // @ts-ignore
+            renderOption={renderOption}
+          />
+        </EuiFormRow>
+      </>
     );
   }
 );

x-pack/plugins/aiops/public/components/change_point_detection/split_field_selector.tsx

@@ -8,6 +8,8 @@
 import React, { FC, useMemo, useCallback } from 'react';
 import { i18n } from '@kbn/i18n';
 import { EuiComboBox, type EuiComboBoxOptionOption, EuiFormRow } from '@elastic/eui';
+import { type Field } from '@kbn/ml-plugin/common/types/fields';
+import { useAiopsAppContext } from '../../hooks/use_aiops_app_context';
 import { useChangePointDetectionContext } from './change_point_detection_context';
 
 interface SplitFieldSelectorProps {
@@ -16,29 +18,33 @@ interface SplitFieldSelectorProps {
 }
 
 export const SplitFieldSelector: FC<SplitFieldSelectorProps> = React.memo(({ value, onChange }) => {
+  const { fieldStats } = useAiopsAppContext();
+  const { renderOption } = fieldStats!.useFieldStatsTrigger();
+
   const { splitFieldsOptions } = useChangePointDetectionContext();
 
-  const options = useMemo<Array<EuiComboBoxOptionOption<string>>>(() => {
+  const options = useMemo<EuiComboBoxOptionOption[]>(() => {
     return [
       {
-        name: undefined,
-        displayName: i18n.translate('xpack.aiops.changePointDetection.notSelectedSplitFieldLabel', {
+        value: undefined,
+        label: i18n.translate('xpack.aiops.changePointDetection.notSelectedSplitFieldLabel', {
           defaultMessage: '--- Not selected ---',
         }),
       },
-      ...splitFieldsOptions,
-    ].map((v) => ({
-      value: v.name,
-      label: v.displayName,
-    }));
+      ...splitFieldsOptions.map((v) => ({
+        value: v.name,
+        label: v.displayName,
+        ...(v.name ? { field: { id: v.name, type: v?.type } as Field } : {}),
+      })),
+    ];
   }, [splitFieldsOptions]);
 
   const selection = options.filter((v) => v.value === value);
 
   const onChangeCallback = useCallback(
-    (selectedOptions: Array<EuiComboBoxOptionOption<string>>) => {
+    (selectedOptions: EuiComboBoxOptionOption[]) => {
       const option = selectedOptions[0];
-      const newValue = option?.value;
+      const newValue = option?.value as string;
       onChange(newValue);
     },
     [onChange]
@@ -58,6 +64,8 @@ export const SplitFieldSelector: FC<SplitFieldSelectorProps> = React.memo(({ val
         isClearable
         data-test-subj="aiopsChangePointSplitField"
         onClick={(e) => e.stopPropagation()}
+        // @ts-ignore
+        renderOption={renderOption}
       />
     </EuiFormRow>
   );

x-pack/plugins/aiops/public/hooks/use_aiops_app_context.ts

@@ -22,6 +22,7 @@ import type {
   ThemeServiceStart,
 } from '@kbn/core/public';
 import type { LensPublicStart } from '@kbn/lens-plugin/public';
+import { type GetMlSharedImportsReturnType } from '@kbn/ml-plugin/public';
 
 export interface AiopsAppDependencies {
   application: CoreStart['application'];
@@ -36,6 +37,11 @@ export interface AiopsAppDependencies {
   unifiedSearch: UnifiedSearchPublicPluginStart;
   share: SharePluginStart;
   lens: LensPublicStart;
+  // deps for unified field stats
+  fieldStats?: {
+    useFieldStatsTrigger: GetMlSharedImportsReturnType['useFieldStatsTrigger'];
+    FieldStatsFlyoutProvider: GetMlSharedImportsReturnType['FieldStatsFlyoutProvider'];
+  };
 }
 
 export const AiopsAppContext = createContext<AiopsAppDependencies | undefined>(undefined);

x-pack/plugins/aiops/tsconfig.json

@@ -51,6 +51,7 @@
     "@kbn/ml-route-utils",
     "@kbn/unified-field-list-plugin",
     "@kbn/ml-random-sampler-utils",
+    "@kbn/ml-plugin",
   ],
   "exclude": [
     "target/**/*",

x-pack/plugins/ml/public/application/aiops/change_point_detection.tsx

@@ -13,6 +13,7 @@ import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { ChangePointDetection } from '@kbn/aiops-plugin/public';
 
+import { useFieldStatsTrigger, FieldStatsFlyoutProvider } from '../components/field_stats_flyout';
 import { useMlContext } from '../contexts/ml';
 import { useMlKibana } from '../contexts/kibana';
 import { HelpMenu } from '../components/help_menu';
@@ -46,20 +47,23 @@ export const ChangePointDetectionPage: FC = () => {
         <ChangePointDetection
           dataView={dataView}
           savedSearch={savedSearch}
-          appDependencies={pick(services, [
-            'application',
-            'data',
-            'charts',
-            'fieldFormats',
-            'http',
-            'notifications',
-            'share',
-            'storage',
-            'uiSettings',
-            'unifiedSearch',
-            'theme',
-            'lens',
-          ])}
+          appDependencies={{
+            ...pick(services, [
+              'application',
+              'data',
+              'charts',
+              'fieldFormats',
+              'http',
+              'notifications',
+              'share',
+              'storage',
+              'uiSettings',
+              'unifiedSearch',
+              'theme',
+              'lens',
+            ]),
+            fieldStats: { useFieldStatsTrigger, FieldStatsFlyoutProvider },
+          }}
         />
       ) : null}
       <HelpMenu