[ML] Move FieldStatsFlyout, parseInterval, validators to packages.

.github/CODEOWNERS

@@ -609,13 +609,15 @@ x-pack/packages/ml/data_view_utils @elastic/ml-ui
 x-pack/packages/ml/date_picker @elastic/ml-ui
 x-pack/packages/ml/date_utils @elastic/ml-ui
 x-pack/packages/ml/error_utils @elastic/ml-ui
+x-pack/packages/ml/field_stats_flyout @elastic/ml-ui
 x-pack/packages/ml/in_memory_table @elastic/ml-ui
 x-pack/packages/ml/is_defined @elastic/ml-ui
 x-pack/packages/ml/is_populated_object @elastic/ml-ui
 x-pack/packages/ml/kibana_theme @elastic/ml-ui
 x-pack/packages/ml/local_storage @elastic/ml-ui
 x-pack/packages/ml/nested_property @elastic/ml-ui
 x-pack/packages/ml/number_utils @elastic/ml-ui
+x-pack/packages/ml/parse_interval @elastic/ml-ui
 x-pack/plugins/ml @elastic/ml-ui
 x-pack/packages/ml/query_utils @elastic/ml-ui
 x-pack/packages/ml/random_sampler_utils @elastic/ml-ui
@@ -627,6 +629,7 @@ x-pack/packages/ml/time_buckets @elastic/ml-ui
 x-pack/packages/ml/trained_models_utils @elastic/ml-ui
 x-pack/packages/ml/ui_actions @elastic/ml-ui
 x-pack/packages/ml/url_state @elastic/ml-ui
+x-pack/packages/ml/validators @elastic/ml-ui
 packages/kbn-mock-idp-plugin @elastic/kibana-security
 packages/kbn-mock-idp-utils @elastic/kibana-security
 packages/kbn-monaco @elastic/appex-sharedux

package.json

@@ -644,13 +644,15 @@
     "@kbn/ml-date-picker": "link:x-pack/packages/ml/date_picker",
     "@kbn/ml-date-utils": "link:x-pack/packages/ml/date_utils",
     "@kbn/ml-error-utils": "link:x-pack/packages/ml/error_utils",
+    "@kbn/ml-field-stats-flyout": "link:x-pack/packages/ml/field_stats_flyout",
     "@kbn/ml-in-memory-table": "link:x-pack/packages/ml/in_memory_table",
     "@kbn/ml-is-defined": "link:x-pack/packages/ml/is_defined",
     "@kbn/ml-is-populated-object": "link:x-pack/packages/ml/is_populated_object",
     "@kbn/ml-kibana-theme": "link:x-pack/packages/ml/kibana_theme",
     "@kbn/ml-local-storage": "link:x-pack/packages/ml/local_storage",
     "@kbn/ml-nested-property": "link:x-pack/packages/ml/nested_property",
     "@kbn/ml-number-utils": "link:x-pack/packages/ml/number_utils",
+    "@kbn/ml-parse-interval": "link:x-pack/packages/ml/parse_interval",
     "@kbn/ml-plugin": "link:x-pack/plugins/ml",
     "@kbn/ml-query-utils": "link:x-pack/packages/ml/query_utils",
     "@kbn/ml-random-sampler-utils": "link:x-pack/packages/ml/random_sampler_utils",
@@ -662,6 +664,7 @@
     "@kbn/ml-trained-models-utils": "link:x-pack/packages/ml/trained_models_utils",
     "@kbn/ml-ui-actions": "link:x-pack/packages/ml/ui_actions",
     "@kbn/ml-url-state": "link:x-pack/packages/ml/url_state",
+    "@kbn/ml-validators": "link:x-pack/packages/ml/validators",
     "@kbn/monaco": "link:packages/kbn-monaco",
     "@kbn/monitoring-collection-plugin": "link:x-pack/plugins/monitoring_collection",
     "@kbn/monitoring-plugin": "link:x-pack/plugins/monitoring",

tsconfig.base.json

@@ -1212,6 +1212,8 @@
       "@kbn/ml-date-utils/*": ["x-pack/packages/ml/date_utils/*"],
       "@kbn/ml-error-utils": ["x-pack/packages/ml/error_utils"],
       "@kbn/ml-error-utils/*": ["x-pack/packages/ml/error_utils/*"],
+      "@kbn/ml-field-stats-flyout": ["x-pack/packages/ml/field_stats_flyout"],
+      "@kbn/ml-field-stats-flyout/*": ["x-pack/packages/ml/field_stats_flyout/*"],
       "@kbn/ml-in-memory-table": ["x-pack/packages/ml/in_memory_table"],
       "@kbn/ml-in-memory-table/*": ["x-pack/packages/ml/in_memory_table/*"],
       "@kbn/ml-is-defined": ["x-pack/packages/ml/is_defined"],
@@ -1226,6 +1228,8 @@
       "@kbn/ml-nested-property/*": ["x-pack/packages/ml/nested_property/*"],
       "@kbn/ml-number-utils": ["x-pack/packages/ml/number_utils"],
       "@kbn/ml-number-utils/*": ["x-pack/packages/ml/number_utils/*"],
+      "@kbn/ml-parse-interval": ["x-pack/packages/ml/parse_interval"],
+      "@kbn/ml-parse-interval/*": ["x-pack/packages/ml/parse_interval/*"],
       "@kbn/ml-plugin": ["x-pack/plugins/ml"],
       "@kbn/ml-plugin/*": ["x-pack/plugins/ml/*"],
       "@kbn/ml-query-utils": ["x-pack/packages/ml/query_utils"],
@@ -1248,6 +1252,8 @@
       "@kbn/ml-ui-actions/*": ["x-pack/packages/ml/ui_actions/*"],
       "@kbn/ml-url-state": ["x-pack/packages/ml/url_state"],
       "@kbn/ml-url-state/*": ["x-pack/packages/ml/url_state/*"],
+      "@kbn/ml-validators": ["x-pack/packages/ml/validators"],
+      "@kbn/ml-validators/*": ["x-pack/packages/ml/validators/*"],
       "@kbn/mock-idp-plugin": ["packages/kbn-mock-idp-plugin"],
       "@kbn/mock-idp-plugin/*": ["packages/kbn-mock-idp-plugin/*"],
       "@kbn/mock-idp-utils": ["packages/kbn-mock-idp-utils"],

x-pack/.i18nrc.json

@@ -79,6 +79,7 @@
       "packages/ml/data_grid",
       "packages/ml/data_view_utils",
       "packages/ml/date_picker",
+      "packages/ml/field_stats_flyout",
       "packages/ml/inference_integration_flyout",
       "packages/ml/trained_models_utils",
       "packages/ml/category_validator",

x-pack/packages/ml/field_stats_flyout/README.md

@@ -0,0 +1,3 @@
+# @kbn/ml-field-stats-flyout
+
+This package provides a field statistics flyout component. It is used in the Machine Learning and Transforms plugin.

x-pack/plugins/ml/public/application/components/field_stats_flyout/eui_combo_box_with_field_stats.tsx → x-pack/packages/ml/field_stats_flyout/eui_combo_box_with_field_stats.tsx

@@ -25,9 +25,25 @@ export const optionCss = css`
   }
 `;
 
-export const EuiComboBoxWithFieldStats: FC<
-  EuiComboBoxProps<string | number | string[] | undefined>
-> = ({ options, ...restProps }) => {
+/**
+ * Props for the EuiComboBoxWithFieldStats component.
+ */
+export type EuiComboBoxWithFieldStatsProps = EuiComboBoxProps<
+  string | number | string[] | undefined
+>;
+
+/**
+ * React component that wraps the EuiComboBox component and adds field statistics functionality.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <EuiComboBoxWithFieldStats options={options} />
+ * ```
+ * @param {EuiComboBoxWithFieldStatsProps} props - The component props.
+ */
+export const EuiComboBoxWithFieldStats: FC<EuiComboBoxWithFieldStatsProps> = (props) => {
+  const { options, ...restProps } = props;
   const { renderOption } = useFieldStatsTrigger();
   const comboBoxOptions: EuiComboBoxOptionOption[] = useMemo(
     () =>

x-pack/plugins/ml/public/application/components/field_stats_flyout/field_stats_content.tsx → x-pack/packages/ml/field_stats_flyout/field_stats_content.tsx

@@ -15,20 +15,42 @@ import { FieldStats } from '@kbn/unified-field-list/src/components/field_stats';
 import { isDefined } from '@kbn/ml-is-defined';
 import type { DataView } from '@kbn/data-plugin/common';
 import type { TimeRange as TimeRangeMs } from '@kbn/ml-date-picker';
+import { getDefaultDSLQuery } from '@kbn/ml-query-utils';
 import moment from 'moment';
 import { euiPaletteColorBlind } from '@elastic/eui';
-import { getDefaultDatafeedQuery } from '../../jobs/new_job/utils/new_job_utils';
-import { useFieldStatsFlyoutContext } from './use_field_stats_flytout_context';
+import { useFieldStatsFlyoutContext } from './use_field_stats_flyout_context';
 
-const DEFAULT_DSL_QUERY = getDefaultDatafeedQuery();
 const DEFAULT_COLOR = euiPaletteColorBlind()[0];
 
-export const FieldStatsContent: FC<{
+/**
+ * Represents the props for the FieldStatsFlyout component.
+ */
+export interface FieldStatsFlyoutProps {
+  /**
+   * The data view object.
+   */
   dataView: DataView;
+  /**
+   * Services required for field statistics.
+   */
   fieldStatsServices: FieldStatsServices;
+  /**
+   * Optional time range in milliseconds.
+   */
   timeRangeMs?: TimeRangeMs;
+  /**
+   * Optional DSL query for filtering field statistics.
+   */
   dslQuery?: FieldStatsProps['dslQuery'];
-}> = ({ dataView: selectedDataView, fieldStatsServices, timeRangeMs, dslQuery }) => {
+}
+
+/**
+ * Renders the content for the field statistics flyout.
+ * @param props - The props for the FieldStatsContent component.
+ * @returns The rendered FieldStatsContent component.
+ */
+export const FieldStatsContent: FC<FieldStatsFlyoutProps> = (props) => {
+  const { dataView: selectedDataView, fieldStatsServices, timeRangeMs, dslQuery } = props;
   const { fieldName } = useFieldStatsFlyoutContext();
 
   // Format timestamp to ISO formatted date strings
@@ -58,7 +80,7 @@ export const FieldStatsContent: FC<{
     <FieldStats
       key={fieldForStats.name}
       services={fieldStatsServices}
-      dslQuery={dslQuery ?? DEFAULT_DSL_QUERY}
+      dslQuery={dslQuery ?? getDefaultDSLQuery()}
       fromDate={timeRange.from}
       toDate={timeRange.to}
       dataViewOrDataViewId={selectedDataView}

x-pack/plugins/ml/public/application/components/field_stats_flyout/field_stats_flyout.tsx → x-pack/packages/ml/field_stats_flyout/field_stats_flyout.tsx

@@ -26,15 +26,43 @@ import type {
   FieldStatsServices,
 } from '@kbn/unified-field-list/src/components/field_stats';
 import type { TimeRange as TimeRangeMs } from '@kbn/ml-date-picker';
-import { useFieldStatsFlyoutContext } from './use_field_stats_flytout_context';
+import { useFieldStatsFlyoutContext } from './use_field_stats_flyout_context';
 import { FieldStatsContent } from './field_stats_content';
 
-export const FieldStatsFlyout: FC<{
+/**
+ * Props for the FieldStatsFlyout component.
+ *
+ * @typedef {Object} FieldStatsFlyoutProps
+ * @property dataView - The data view object.
+ * @property fieldStatsServices - Services required for field statistics.
+ * @property [timeRangeMs] - Optional time range in milliseconds.
+ * @property [dslQuery] - Optional DSL query for filtering field statistics.
+ */
+export interface FieldStatsFlyoutProps {
   dataView: DataView;
   fieldStatsServices: FieldStatsServices;
   timeRangeMs?: TimeRangeMs;
   dslQuery?: FieldStatsProps['dslQuery'];
-}> = ({ dataView, fieldStatsServices, timeRangeMs, dslQuery }) => {
+}
+
+/**
+ * Renders a flyout component for displaying field statistics.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <FieldStatsFlyout
+ *   dataView={dataView}
+ *   fieldStatsServices={fieldStatsServices}
+ *   timeRangeMs={timeRangeMs}
+ *   dslQuery={dslQuery}
+ * />
+ * ```
+ *
+ * @param {Object} props - The component props.
+ */
+export const FieldStatsFlyout: FC<FieldStatsFlyoutProps> = (props) => {
+  const { dataView, fieldStatsServices, timeRangeMs, dslQuery } = props;
   const { setIsFlyoutVisible, isFlyoutVisible, fieldName } = useFieldStatsFlyoutContext();
 
   const closeFlyout = useCallback(() => setIsFlyoutVisible(false), []); // eslint-disable-line react-hooks/exhaustive-deps

x-pack/plugins/ml/public/application/components/field_stats_flyout/field_stats_flyout_provider.tsx → x-pack/packages/ml/field_stats_flyout/field_stats_flyout_provider.tsx

@@ -7,7 +7,9 @@
 
 import type { PropsWithChildren, FC } from 'react';
 import React, { useCallback, useState } from 'react';
+import type { CoreStart } from '@kbn/core/public';
 import type { DataView } from '@kbn/data-plugin/common';
+import type { DataPublicPluginStart } from '@kbn/data-plugin/public';
 import type { FieldStatsServices } from '@kbn/unified-field-list/src/components/field_stats';
 import type { TimeRange as TimeRangeMs } from '@kbn/ml-date-picker';
 import type { FieldStatsProps } from '@kbn/unified-field-list/src/components/field_stats';
@@ -16,33 +18,73 @@ import { getProcessedFields } from '@kbn/ml-data-grid';
 import { stringHash } from '@kbn/ml-string-hash';
 import { lastValueFrom } from 'rxjs';
 import { useRef } from 'react';
+import { useKibana } from '@kbn/kibana-react-plugin/public';
 import { getMergedSampleDocsForPopulatedFieldsQuery } from './populated_fields/get_merged_populated_fields_query';
-import { useMlKibana } from '../../contexts/kibana';
 import { FieldStatsFlyout } from './field_stats_flyout';
-import { MLFieldStatsFlyoutContext } from './use_field_stats_flytout_context';
+import { MLFieldStatsFlyoutContext } from './use_field_stats_flyout_context';
 import { PopulatedFieldsCacheManager } from './populated_fields/populated_fields_cache_manager';
 
-export const FieldStatsFlyoutProvider: FC<
-  PropsWithChildren<{
-    dataView: DataView;
-    fieldStatsServices: FieldStatsServices;
-    timeRangeMs?: TimeRangeMs;
-    dslQuery?: FieldStatsProps['dslQuery'];
-    disablePopulatedFields?: boolean;
-  }>
-> = ({
-  dataView,
-  fieldStatsServices,
-  timeRangeMs,
-  dslQuery,
-  disablePopulatedFields = false,
-  children,
-}) => {
+type Services = CoreStart & {
+  data: DataPublicPluginStart;
+};
+
+function useDataSearch() {
+  const { data } = useKibana<Services>().services;
+
+  if (!data) {
+    throw new Error('Kibana data service not available.');
+  }
+
+  return data.search;
+}
+
+/**
+ * Props for the FieldStatsFlyoutProvider component.
+ *
+ * @typedef {Object} FieldStatsFlyoutProviderProps
+ * @property dataView - The data view object.
+ * @property fieldStatsServices - Services required for field statistics.
+ * @property [timeRangeMs] - Optional time range in milliseconds.
+ * @property [dslQuery] - Optional DSL query for filtering field statistics.
+ * @property [disablePopulatedFields] - Optional flag to disable populated fields.
+ */
+export type FieldStatsFlyoutProviderProps = PropsWithChildren<{
+  dataView: DataView;
+  fieldStatsServices: FieldStatsServices;
+  timeRangeMs?: TimeRangeMs;
+  dslQuery?: FieldStatsProps['dslQuery'];
+  disablePopulatedFields?: boolean;
+}>;
+
+/**
+ * Provides field statistics in a flyout component.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <FieldStatsFlyoutProvider
+ *   dataView={dataView}
+ *   fieldStatsServices={fieldStatsServices}
+ *   timeRangeMs={timeRangeMs}
+ *   dslQuery={dslQuery}
+ *   disablePopulatedFields={disablePopulatedFields}
+ * >
+ *   {children}
+ * </FieldStatsFlyoutProvider>
+ * ```
+ *
+ * @param {FieldStatsFlyoutProviderProps} props - The component props.
+ */
+export const FieldStatsFlyoutProvider: FC<FieldStatsFlyoutProviderProps> = (props) => {
   const {
-    services: {
-      data: { search },
-    },
-  } = useMlKibana();
+    dataView,
+    fieldStatsServices,
+    timeRangeMs,
+    dslQuery,
+    disablePopulatedFields = false,
+    children,
+  } = props;
+  const search = useDataSearch();
   const [isFieldStatsFlyoutVisible, setFieldStatsIsFlyoutVisible] = useState(false);
   const [fieldName, setFieldName] = useState<string | undefined>();
   const [fieldValue, setFieldValue] = useState<string | number | undefined>();