[ML] Limit exposing shared static code through ml/public/index.ts. (#77745)

- Clean up lodash imports.
- Import types only where applicable.
- Reduce page load bundle size by fetching more code asynchronously.

x-pack/plugins/ml/common/index.ts

@@ -7,3 +7,4 @@
 export { SearchResponse7 } from './types/es_client';
 export { ANOMALY_SEVERITY, ANOMALY_THRESHOLD } from './constants/anomalies';
 export { getSeverityColor, getSeverityType } from './util/anomaly_utils';
+export { composeValidators, patternValidator } from './util/validators';

x-pack/plugins/ml/common/util/job_utils.ts

@@ -4,18 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-// Prefer importing entire lodash library, e.g. import { get } from "lodash"
-// eslint-disable-next-line no-restricted-imports
-import isEmpty from 'lodash/isEmpty';
-// Prefer importing entire lodash library, e.g. import { get } from "lodash"
-// eslint-disable-next-line no-restricted-imports
-import isEqual from 'lodash/isEqual';
-// Prefer importing entire lodash library, e.g. import { get } from "lodash"
-// eslint-disable-next-line no-restricted-imports
-import each from 'lodash/each';
-// Prefer importing entire lodash library, e.g. import { get } from "lodash"
-// eslint-disable-next-line no-restricted-imports
-import pick from 'lodash/pick';
+import { isEmpty, isEqual, each, pick } from 'lodash';
 
 import semver from 'semver';
 import moment, { Duration } from 'moment';

x-pack/plugins/ml/public/application/components/annotations/annotations_table/annotations_table.js

@@ -10,9 +10,7 @@
  * getting the annotations via props (used in Anomaly Explorer and Single Series Viewer).
  */
 
-// Prefer importing entire lodash library, e.g. import { get } from "lodash"
-// eslint-disable-next-line no-restricted-imports
-import uniq from 'lodash/uniq';
+import { uniq } from 'lodash';
 
 import PropTypes from 'prop-types';
 import React, { Component, Fragment } from 'react';

x-pack/plugins/ml/public/application/components/anomalies_table/anomalies_table.js

@@ -9,9 +9,7 @@
  */
 
 import PropTypes from 'prop-types';
-// Prefer importing entire lodash library, e.g. import { get } from "lodash"
-// eslint-disable-next-line no-restricted-imports
-import get from 'lodash/get';
+import { get } from 'lodash';
 
 import React, { Component } from 'react';
 

x-pack/plugins/ml/public/application/components/anomalies_table/anomalies_table_columns.js

@@ -7,9 +7,7 @@
 import { EuiButtonIcon, EuiLink, EuiScreenReaderOnly } from '@elastic/eui';
 
 import React from 'react';
-// Prefer importing entire lodash library, e.g. import { get } from "lodash"
-// eslint-disable-next-line no-restricted-imports
-import get from 'lodash/get';
+import { get } from 'lodash';
 
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';

x-pack/plugins/ml/public/application/components/anomalies_table/anomaly_details.js

@@ -11,12 +11,7 @@
 
 import PropTypes from 'prop-types';
 import React, { Component, Fragment } from 'react';
-// Prefer importing entire lodash library, e.g. import { get } from "lodash"
-// eslint-disable-next-line no-restricted-imports
-import get from 'lodash/get';
-// Prefer importing entire lodash library, e.g. import { get } from "lodash"
-// eslint-disable-next-line no-restricted-imports
-import pick from 'lodash/pick';
+import { get, pick } from 'lodash';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 

x-pack/plugins/ml/public/application/components/anomalies_table/influencers_cell.js

@@ -4,9 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-// Prefer importing entire lodash library, e.g. import { get } from "lodash"
-// eslint-disable-next-line no-restricted-imports
-import each from 'lodash/each';
+import { each } from 'lodash';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 

x-pack/plugins/ml/public/application/components/anomalies_table/links_menu.js

@@ -4,9 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-// Prefer importing entire lodash library, e.g. import { get } from "lodash"
-// eslint-disable-next-line no-restricted-imports
-import cloneDeep from 'lodash/cloneDeep';
+import { cloneDeep } from 'lodash';
 import moment from 'moment';
 import rison from 'rison-node';
 import PropTypes from 'prop-types';

x-pack/plugins/ml/public/application/components/model_snapshots/revert_model_snapshot_flyout/revert_model_snapshot_flyout.tsx

@@ -12,7 +12,6 @@
 
 import React, { FC, useState, useCallback, useMemo, useEffect } from 'react';
 import { i18n } from '@kbn/i18n';
-import {} from 'lodash';
 import { FormattedMessage } from '@kbn/i18n/react';
 import {
   EuiFlyout,

x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/action_clone/clone_action_name.tsx

@@ -6,7 +6,7 @@
 
 import { EuiToolTip } from '@elastic/eui';
 import React, { FC } from 'react';
-import { isEqual, cloneDeep } from 'lodash';
+import { cloneDeep, isEqual } from 'lodash';
 import { i18n } from '@kbn/i18n';
 import { IIndexPattern } from 'src/plugins/data/common';
 import { DeepReadonly } from '../../../../../../../common/types/common';

x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/analytics_list/use_table_settings.ts

@@ -6,12 +6,7 @@
 
 import { useState } from 'react';
 import { Direction, EuiBasicTableProps, EuiTableSortingType } from '@elastic/eui';
-// Prefer importing entire lodash library, e.g. import { get } from "lodash"
-// eslint-disable-next-line no-restricted-imports
-import sortBy from 'lodash/sortBy';
-// Prefer importing entire lodash library, e.g. import { get } from "lodash"
-// eslint-disable-next-line no-restricted-imports
-import get from 'lodash/get';
+import { sortBy, get } from 'lodash';
 
 const PAGE_SIZE = 10;
 const PAGE_SIZE_OPTIONS = [10, 25, 50];

x-pack/plugins/ml/public/application/datavisualizer/file_based/components/combined_fields/geo_point.tsx

@@ -5,9 +5,7 @@
  */
 
 import { i18n } from '@kbn/i18n';
-// Prefer importing entire lodash library, e.g. import { get } from "lodash"
-// eslint-disable-next-line no-restricted-imports
-import debounce from 'lodash/debounce';
+import { debounce } from 'lodash';
 import { FormattedMessage } from '@kbn/i18n/react';
 import React, { ChangeEvent, Component, Fragment } from 'react';
 

x-pack/plugins/ml/public/application/datavisualizer/file_based/components/combined_fields/utils.ts

@@ -5,7 +5,7 @@
  */
 
 import { i18n } from '@kbn/i18n';
-import _ from 'lodash';
+import { cloneDeep } from 'lodash';
 import uuid from 'uuid/v4';
 import { CombinedField } from './types';
 import {
@@ -54,7 +54,7 @@ export function addCombinedFieldsToPipeline(
   pipeline: IngestPipeline,
   combinedFields: CombinedField[]
 ) {
-  const updatedPipeline = _.cloneDeep(pipeline);
+  const updatedPipeline = cloneDeep(pipeline);
   combinedFields.forEach((combinedField) => {
     updatedPipeline.processors.push({
       set: {

x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_charts_container_service.js

@@ -11,24 +11,7 @@
  * and manages the layout of the charts in the containing div.
  */
 
-// Prefer importing entire lodash library, e.g. import { get } from "lodash"
-// eslint-disable-next-line no-restricted-imports
-import get from 'lodash/get';
-// Prefer importing entire lodash library, e.g. import { get } from "lodash"
-// eslint-disable-next-line no-restricted-imports
-import each from 'lodash/each';
-// Prefer importing entire lodash library, e.g. import { get } from "lodash"
-// eslint-disable-next-line no-restricted-imports
-import find from 'lodash/find';
-// Prefer importing entire lodash library, e.g. import { get } from "lodash"
-// eslint-disable-next-line no-restricted-imports
-import sortBy from 'lodash/sortBy';
-// Prefer importing entire lodash library, e.g. import { get } from "lodash"
-// eslint-disable-next-line no-restricted-imports
-import map from 'lodash/map';
-// Prefer importing entire lodash library, e.g. import { get } from "lodash"
-// eslint-disable-next-line no-restricted-imports
-import reduce from 'lodash/reduce';
+import { get, each, find, sortBy, map, reduce } from 'lodash';
 
 import { buildConfig } from './explorer_chart_config_builder';
 import { chartLimits, getChartType } from '../../util/chart_utils';

x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_charts_container_service.test.js

@@ -4,9 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-// Prefer importing entire lodash library, e.g. import { get } from "lodash"
-// eslint-disable-next-line no-restricted-imports
-import cloneDeep from 'lodash/cloneDeep';
+import { cloneDeep } from 'lodash';
 
 import mockAnomalyChartRecords from './__mocks__/mock_anomaly_chart_records.json';
 import mockDetectorsByJob from './__mocks__/mock_detectors_by_job.json';

x-pack/plugins/ml/public/application/explorer/explorer_swimlane.tsx

@@ -10,15 +10,7 @@
 
 import React from 'react';
 import './_explorer.scss';
-// Prefer importing entire lodash library, e.g. import { get } from "lodash"
-// eslint-disable-next-line no-restricted-imports
-import isEqual from 'lodash/isEqual';
-// Prefer importing entire lodash library, e.g. import { get } from "lodash"
-// eslint-disable-next-line no-restricted-imports
-import uniq from 'lodash/uniq';
-// Prefer importing entire lodash library, e.g. import { get } from "lodash"
-// eslint-disable-next-line no-restricted-imports
-import get from 'lodash/get';
+import { isEqual, uniq, get } from 'lodash';
 import d3 from 'd3';
 import moment from 'moment';
 import DragSelect from 'dragselect';

x-pack/plugins/ml/public/application/explorer/explorer_utils.js

@@ -8,7 +8,7 @@
  * utils for Anomaly Explorer.
  */
 
-import { chain, get, union, uniq } from 'lodash';
+import { get, union, sortBy, uniq } from 'lodash';
 import moment from 'moment-timezone';
 
 import {
@@ -279,17 +279,17 @@ export function getViewBySwimlaneOptions({
   const selectedJobIds = selectedJobs.map((d) => d.id);
 
   // Unique influencers for the selected job(s).
-  const viewByOptions = chain(
-    mlJobService.jobs.reduce((reducedViewByOptions, job) => {
-      if (selectedJobIds.some((jobId) => jobId === job.job_id)) {
-        return reducedViewByOptions.concat(job.analysis_config.influencers || []);
-      }
-      return reducedViewByOptions;
-    }, [])
-  )
-    .uniq()
-    .sortBy((fieldName) => fieldName.toLowerCase())
-    .value();
+  const viewByOptions = sortBy(
+    uniq(
+      mlJobService.jobs.reduce((reducedViewByOptions, job) => {
+        if (selectedJobIds.some((jobId) => jobId === job.job_id)) {
+          return reducedViewByOptions.concat(job.analysis_config.influencers || []);
+        }
+        return reducedViewByOptions;
+      }, [])
+    ),
+    (fieldName) => fieldName.toLowerCase()
+  );
 
   viewByOptions.push(VIEW_BY_JOB_LABEL);
   let viewBySwimlaneOptions = viewByOptions;

x-pack/plugins/ml/public/application/jobs/jobs_list/components/jobs_list/jobs_list.js

@@ -7,9 +7,7 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 
-// Prefer importing entire lodash library, e.g. import { get } from "lodash"
-// eslint-disable-next-line no-restricted-imports
-import sortBy from 'lodash/sortBy';
+import { sortBy } from 'lodash';
 import moment from 'moment';
 
 import { toLocaleString } from '../../../../util/string_utils';

x-pack/plugins/ml/public/application/management/index.ts

@@ -12,27 +12,25 @@
 
 import { i18n } from '@kbn/i18n';
 
-import { CoreSetup } from 'kibana/public';
-import { ManagementSetup } from 'src/plugins/management/public';
-import { MlStartDependencies } from '../../plugin';
+import type { CoreSetup } from 'kibana/public';
+import type { ManagementSetup } from 'src/plugins/management/public';
+import type { MlStartDependencies } from '../../plugin';
 
-import { ManagementAppMountParams } from '../../../../../../src/plugins/management/public';
+import type { ManagementAppMountParams } from '../../../../../../src/plugins/management/public';
 
 export function registerManagementSection(
-  management: ManagementSetup | undefined,
+  management: ManagementSetup,
   core: CoreSetup<MlStartDependencies>
 ) {
-  if (management !== undefined) {
-    return management.sections.section.insightsAndAlerting.registerApp({
-      id: 'jobsListLink',
-      title: i18n.translate('xpack.ml.management.jobsListTitle', {
-        defaultMessage: 'Machine Learning Jobs',
-      }),
-      order: 2,
-      async mount(params: ManagementAppMountParams) {
-        const { mountApp } = await import('./jobs_list');
-        return mountApp(core, params);
-      },
-    });
-  }
+  return management.sections.section.insightsAndAlerting.registerApp({
+    id: 'jobsListLink',
+    title: i18n.translate('xpack.ml.management.jobsListTitle', {
+      defaultMessage: 'Machine Learning Jobs',
+    }),
+    order: 2,
+    async mount(params: ManagementAppMountParams) {
+      const { mountApp } = await import('./jobs_list');
+      return mountApp(core, params);
+    },
+  });
 }

x-pack/plugins/ml/public/application/overview/overview_page.tsx

@@ -40,3 +40,7 @@ export const OverviewPage: FC = () => {
     </Fragment>
   );
 };
+
+// required for dynamic import using React.lazy()
+// eslint-disable-next-line import/no-default-export
+export default OverviewPage;

x-pack/plugins/ml/public/application/routing/routes/overview.tsx

@@ -4,16 +4,15 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { FC } from 'react';
+import React, { FC, Suspense } from 'react';
 import { i18n } from '@kbn/i18n';
 
 import { Redirect } from 'react-router-dom';
 
-import { NavigateToPath } from '../../contexts/kibana';
+import type { NavigateToPath } from '../../contexts/kibana';
 
 import { MlRoute, PageLoader, PageProps } from '../router';
 import { useResolver } from '../use_resolver';
-import { OverviewPage } from '../../overview';
 
 import { checkFullLicense } from '../../license';
 import { checkGetJobsCapabilitiesResolver } from '../../capabilities/check_capabilities';
@@ -22,6 +21,8 @@ import { loadMlServerInfo } from '../../services/ml_server_info';
 import { useTimefilter } from '../../contexts/kibana';
 import { breadcrumbOnClickFactory, getBreadcrumbWithUrlForApp } from '../breadcrumbs';
 
+const OverviewPage = React.lazy(() => import('../../overview/overview_page'));
+
 export const overviewRouteFactory = (
   navigateToPath: NavigateToPath,
   basePath: string
@@ -52,7 +53,10 @@ const PageWrapper: FC<PageProps> = ({ deps }) => {
 
   return (
     <PageLoader context={context}>
-      <OverviewPage />
+      {/* No fallback yet, we don't show a loading spinner on an outer level until context is available either. */}
+      <Suspense fallback={null}>
+        <OverviewPage />
+      </Suspense>
     </PageLoader>
   );
 };

x-pack/plugins/ml/public/application/services/forecast_service.js

@@ -6,15 +6,7 @@
 
 // Service for carrying out requests to run ML forecasts and to obtain
 // data on forecasts that have been performed.
-// Prefer importing entire lodash library, e.g. import { get } from "lodash"
-// eslint-disable-next-line no-restricted-imports
-import get from 'lodash/get';
-// Prefer importing entire lodash library, e.g. import { get } from "lodash"
-// eslint-disable-next-line no-restricted-imports
-import find from 'lodash/find';
-// Prefer importing entire lodash library, e.g. import { get } from "lodash"
-// eslint-disable-next-line no-restricted-imports
-import each from 'lodash/each';
+import { get, find, each } from 'lodash';
 import { map } from 'rxjs/operators';
 
 import { ml } from './ml_api_service';

x-pack/plugins/ml/public/application/services/job_service.js

@@ -4,21 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-// Prefer importing entire lodash library, e.g. import { get } from "lodash"
-// eslint-disable-next-line no-restricted-imports
-import cloneDeep from 'lodash/cloneDeep';
-// Prefer importing entire lodash library, e.g. import { get } from "lodash"
-// eslint-disable-next-line no-restricted-imports
-import each from 'lodash/each';
-// Prefer importing entire lodash library, e.g. import { get } from "lodash"
-// eslint-disable-next-line no-restricted-imports
-import find from 'lodash/find';
-// Prefer importing entire lodash library, e.g. import { get } from "lodash"
-// eslint-disable-next-line no-restricted-imports
-import get from 'lodash/get';
-// Prefer importing entire lodash library, e.g. import { get } from "lodash"
-// eslint-disable-next-line no-restricted-imports
-import isNumber from 'lodash/isNumber';
+import { cloneDeep, each, find, get, isNumber } from 'lodash';
 import moment from 'moment';
 import { i18n } from '@kbn/i18n';
 

x-pack/plugins/ml/public/application/services/mapping_service.js

@@ -4,9 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-// Prefer importing entire lodash library, e.g. import { get } from "lodash"
-// eslint-disable-next-line no-restricted-imports
-import each from 'lodash/each';
+import { each } from 'lodash';
 
 import { ml } from './ml_api_service';
 

x-pack/plugins/ml/public/application/services/results_service/result_service_rx.ts

@@ -13,12 +13,7 @@
 // Returned response contains a results property containing the requested aggregation.
 import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
-// Prefer importing entire lodash library, e.g. import { get } from "lodash"
-// eslint-disable-next-line no-restricted-imports
-import each from 'lodash/each';
-// Prefer importing entire lodash library, e.g. import { get } from "lodash"
-// eslint-disable-next-line no-restricted-imports
-import get from 'lodash/get';
+import { each, get } from 'lodash';
 import { Dictionary } from '../../../../common/types/common';
 import { ML_MEDIAN_PERCENTS } from '../../../../common/util/job_utils';
 import { JobId } from '../../../../common/types/anomaly_detection_jobs';

x-pack/plugins/ml/public/application/services/results_service/results_service.js

@@ -4,12 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-// Prefer importing entire lodash library, e.g. import { get } from "lodash"
-// eslint-disable-next-line no-restricted-imports
-import each from 'lodash/each';
-// Prefer importing entire lodash library, e.g. import { get } from "lodash"
-// eslint-disable-next-line no-restricted-imports
-import get from 'lodash/get';
+import { each, get } from 'lodash';
 
 import { ML_MEDIAN_PERCENTS } from '../../../../common/util/job_utils';
 import { escapeForElasticsearchQuery } from '../../util/string_utils';

x-pack/plugins/ml/public/application/timeseriesexplorer/components/forecasting_modal/forecasting_modal.js

@@ -9,9 +9,7 @@
  */
 
 import PropTypes from 'prop-types';
-// Prefer importing entire lodash library, e.g. import { get } from "lodash"
-// eslint-disable-next-line no-restricted-imports
-import get from 'lodash/get';
+import { get } from 'lodash';
 
 import React, { Component } from 'react';
 

x-pack/plugins/ml/public/application/timeseriesexplorer/components/timeseries_chart/timeseries_chart.js

@@ -12,18 +12,7 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import useObservable from 'react-use/lib/useObservable';
-// Prefer importing entire lodash library, e.g. import { get } from "lodash"
-// eslint-disable-next-line no-restricted-imports
-import isEqual from 'lodash/isEqual';
-// Prefer importing entire lodash library, e.g. import { get } from "lodash"
-// eslint-disable-next-line no-restricted-imports
-import reduce from 'lodash/reduce';
-// Prefer importing entire lodash library, e.g. import { get } from "lodash"
-// eslint-disable-next-line no-restricted-imports
-import each from 'lodash/each';
-// Prefer importing entire lodash library, e.g. import { get } from "lodash"
-// eslint-disable-next-line no-restricted-imports
-import get from 'lodash/get';
+import { isEqual, reduce, each, get } from 'lodash';
 import d3 from 'd3';
 import moment from 'moment';
 import { i18n } from '@kbn/i18n';

x-pack/plugins/ml/public/application/timeseriesexplorer/timeseries_search_service.ts

@@ -4,18 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-// Prefer importing entire lodash library, e.g. import { get } from "lodash"
-// eslint-disable-next-line no-restricted-imports
-import each from 'lodash/each';
-// Prefer importing entire lodash library, e.g. import { get } from "lodash"
-// eslint-disable-next-line no-restricted-imports
-import find from 'lodash/find';
-// Prefer importing entire lodash library, e.g. import { get } from "lodash"
-// eslint-disable-next-line no-restricted-imports
-import get from 'lodash/get';
-// Prefer importing entire lodash library, e.g. import { get } from "lodash"
-// eslint-disable-next-line no-restricted-imports
-import filter from 'lodash/filter';
+import { each, find, get, filter } from 'lodash';
 
 import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
@@ -29,7 +18,7 @@ import { buildConfigFromDetector } from '../util/chart_config_builder';
 import { mlResultsService } from '../services/results_service';
 import { ModelPlotOutput } from '../services/results_service/result_service_rx';
 import { Job } from '../../../common/types/anomaly_detection_jobs';
-import { EntityField } from '../..';
+import { EntityField } from '../../../common/util/anomaly_utils';
 
 function getMetricData(
   job: Job,

x-pack/plugins/ml/public/application/timeseriesexplorer/timeseriesexplorer_utils/timeseriesexplorer_utils.js

@@ -10,15 +10,7 @@
  * Viewer dashboard.
  */
 
-// Prefer importing entire lodash library, e.g. import { get } from "lodash"
-// eslint-disable-next-line no-restricted-imports
-import each from 'lodash/each';
-// Prefer importing entire lodash library, e.g. import { get } from "lodash"
-// eslint-disable-next-line no-restricted-imports
-import get from 'lodash/get';
-// Prefer importing entire lodash library, e.g. import { get } from "lodash"
-// eslint-disable-next-line no-restricted-imports
-import find from 'lodash/find';
+import { each, get, find } from 'lodash';
 import moment from 'moment-timezone';
 
 import { isTimeSeriesViewJob } from '../../../../common/util/job_utils';

x-pack/plugins/ml/public/application/util/chart_config_builder.js

@@ -9,9 +9,7 @@
  * in the source metric data.
  */
 
-// Prefer importing entire lodash library, e.g. import { get } from "lodash"
-// eslint-disable-next-line no-restricted-imports
-import get from 'lodash/get';
+import { get } from 'lodash';
 
 import { mlFunctionToESAggregation } from '../../../common/util/job_utils';
 

x-pack/plugins/ml/public/application/util/dependency_cache.ts

@@ -4,25 +4,23 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { DataPublicPluginSetup } from 'src/plugins/data/public';
-import {
+import type { DataPublicPluginSetup } from 'src/plugins/data/public';
+import type {
   IUiSettingsClient,
   ChromeStart,
   SavedObjectsClientContract,
   ApplicationStart,
   HttpStart,
   I18nStart,
-} from 'kibana/public';
-import { IndexPatternsContract, DataPublicPluginStart } from 'src/plugins/data/public';
-import {
   DocLinksStart,
   ToastsStart,
   OverlayStart,
   ChromeRecentlyAccessed,
   IBasePath,
 } from 'kibana/public';
-import { SharePluginStart } from 'src/plugins/share/public';
-import { SecurityPluginSetup } from '../../../../security/public';
+import type { IndexPatternsContract, DataPublicPluginStart } from 'src/plugins/data/public';
+import type { SharePluginStart } from 'src/plugins/share/public';
+import type { SecurityPluginSetup } from '../../../../security/public';
 
 export interface DependencyCache {
   timefilter: DataPublicPluginSetup['query']['timefilter'] | null;

x-pack/plugins/ml/public/application/util/time_buckets.js

@@ -4,21 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-// Prefer importing entire lodash library, e.g. import { get } from "lodash"
-// eslint-disable-next-line no-restricted-imports
-import isPlainObject from 'lodash/isPlainObject';
-// Prefer importing entire lodash library, e.g. import { get } from "lodash"
-// eslint-disable-next-line no-restricted-imports
-import isString from 'lodash/isString';
-// Prefer importing entire lodash library, e.g. import { get } from "lodash"
-// eslint-disable-next-line no-restricted-imports
-import ary from 'lodash/ary';
-// Prefer importing entire lodash library, e.g. import { get } from "lodash"
-// eslint-disable-next-line no-restricted-imports
-import sortBy from 'lodash/sortBy';
-// Prefer importing entire lodash library, e.g. import { get } from "lodash"
-// eslint-disable-next-line no-restricted-imports
-import assign from 'lodash/assign';
+import { isPlainObject, isString, ary, sortBy, assign } from 'lodash';
 import moment from 'moment';
 import dateMath from '@elastic/datemath';
 

x-pack/plugins/ml/public/embeddables/anomaly_swimlane/anomaly_swimlane_embeddable.tsx

@@ -4,15 +4,15 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React from 'react';
+import React, { Suspense } from 'react';
 import ReactDOM from 'react-dom';
 import { CoreStart } from 'kibana/public';
 import { i18n } from '@kbn/i18n';
 import { Subject } from 'rxjs';
 import { Embeddable, IContainer } from '../../../../../../src/plugins/embeddable/public';
-import { EmbeddableSwimLaneContainer } from './embeddable_swim_lane_container';
-import { JobId } from '../../../common/types/anomaly_detection_jobs';
-import { MlDependencies } from '../../application/app';
+import { EmbeddableSwimLaneContainer } from './embeddable_swim_lane_container_lazy';
+import type { JobId } from '../../../common/types/anomaly_detection_jobs';
+import type { MlDependencies } from '../../application/app';
 import { SWIM_LANE_SELECTION_TRIGGER } from '../../ui_actions';
 import {
   ANOMALY_SWIMLANE_EMBEDDABLE_TYPE,
@@ -59,15 +59,17 @@ export class AnomalySwimlaneEmbeddable extends Embeddable<
 
     ReactDOM.render(
       <I18nContext>
-        <EmbeddableSwimLaneContainer
-          id={this.input.id}
-          embeddableContext={this}
-          embeddableInput={this.getInput$()}
-          services={this.services}
-          refresh={this.reload$.asObservable()}
-          onInputChange={this.updateInput.bind(this)}
-          onOutputChange={this.updateOutput.bind(this)}
-        />
+        <Suspense fallback={null}>
+          <EmbeddableSwimLaneContainer
+            id={this.input.id}
+            embeddableContext={this}
+            embeddableInput={this.getInput$()}
+            services={this.services}
+            refresh={this.reload$.asObservable()}
+            onInputChange={this.updateInput.bind(this)}
+            onOutputChange={this.updateOutput.bind(this)}
+          />
+        </Suspense>
       </I18nContext>,
       node
     );

x-pack/plugins/ml/public/embeddables/anomaly_swimlane/anomaly_swimlane_embeddable_factory.ts

@@ -6,15 +6,15 @@
 
 import { i18n } from '@kbn/i18n';
 
-import { StartServicesAccessor } from 'kibana/public';
+import type { StartServicesAccessor } from 'kibana/public';
 
-import {
+import type {
   EmbeddableFactoryDefinition,
   IContainer,
 } from '../../../../../../src/plugins/embeddable/public';
 import { HttpService } from '../../application/services/http_service';
-import { MlPluginStart, MlStartDependencies } from '../../plugin';
-import { MlDependencies } from '../../application/app';
+import type { MlPluginStart, MlStartDependencies } from '../../plugin';
+import type { MlDependencies } from '../../application/app';
 import {
   ANOMALY_SWIMLANE_EMBEDDABLE_TYPE,
   AnomalySwimlaneEmbeddableInput,

x-pack/plugins/ml/public/embeddables/anomaly_swimlane/embeddable_swim_lane_container.tsx

@@ -145,3 +145,7 @@ export const EmbeddableSwimLaneContainer: FC<ExplorerSwimlaneContainerProps> = (
     </div>
   );
 };
+
+// required for dynamic import using React.lazy()
+// eslint-disable-next-line import/no-default-export
+export default EmbeddableSwimLaneContainer;

x-pack/plugins/ml/public/embeddables/anomaly_swimlane/embeddable_swim_lane_container_lazy.tsx

@@ -4,4 +4,8 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-export { OverviewPage } from './overview_page';
+import React from 'react';
+
+export const EmbeddableSwimLaneContainer = React.lazy(
+  () => import('./embeddable_swim_lane_container')
+);

x-pack/plugins/ml/public/embeddables/index.ts

@@ -5,8 +5,8 @@
  */
 
 import { AnomalySwimlaneEmbeddableFactory } from './anomaly_swimlane';
-import { MlCoreSetup } from '../plugin';
-import { EmbeddableSetup } from '../../../../../src/plugins/embeddable/public';
+import type { MlCoreSetup } from '../plugin';
+import type { EmbeddableSetup } from '../../../../../src/plugins/embeddable/public';
 
 export * from './constants';
 export * from './types';

x-pack/plugins/ml/public/embeddables/types.ts

@@ -4,20 +4,24 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { CoreStart } from 'kibana/public';
-import { JobId } from '../../common/types/anomaly_detection_jobs';
-import { SwimlaneType } from '../application/explorer/explorer_constants';
-import { Filter } from '../../../../../src/plugins/data/common/es_query/filters';
-import { Query, RefreshInterval, TimeRange } from '../../../../../src/plugins/data/common/query';
-import {
+import type { CoreStart } from 'kibana/public';
+import type { JobId } from '../../common/types/anomaly_detection_jobs';
+import type { SwimlaneType } from '../application/explorer/explorer_constants';
+import type { Filter } from '../../../../../src/plugins/data/common/es_query/filters';
+import type {
+  Query,
+  RefreshInterval,
+  TimeRange,
+} from '../../../../../src/plugins/data/common/query';
+import type {
   EmbeddableInput,
   EmbeddableOutput,
   IEmbeddable,
 } from '../../../../../src/plugins/embeddable/public';
-import { AnomalyDetectorService } from '../application/services/anomaly_detector_service';
-import { AnomalyTimelineService } from '../application/services/anomaly_timeline_service';
-import { MlDependencies } from '../application/app';
-import { AppStateSelectedCells } from '../application/explorer/explorer_utils';
+import type { AnomalyDetectorService } from '../application/services/anomaly_detector_service';
+import type { AnomalyTimelineService } from '../application/services/anomaly_timeline_service';
+import type { MlDependencies } from '../application/app';
+import type { AppStateSelectedCells } from '../application/explorer/explorer_utils';
 
 export interface AnomalySwimlaneEmbeddableCustomInput {
   jobIds: JobId[];

x-pack/plugins/ml/public/index.ts

@@ -4,6 +4,10 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+// Be careful adding exports to this file, it may increase the bundle size of
+// the ML plugin's page load bundle. You should either just export types or
+// use `getMlSharedImports()` to export static code.
+
 import { PluginInitializer, PluginInitializerContext } from 'kibana/public';
 import {
   MlPlugin,
@@ -20,5 +24,29 @@ export const plugin: PluginInitializer<
   MlStartDependencies
 > = (initializerContext: PluginInitializerContext) => new MlPlugin(initializerContext);
 
-export { MlPluginSetup, MlPluginStart };
-export * from './shared';
+export type { MlPluginSetup, MlPluginStart };
+export type {
+  AnomaliesTableRecord,
+  DataRecognizerConfigResponse,
+  Influencer,
+  JobExistResult,
+  JobStat,
+  MlCapabilitiesResponse,
+  MlSummaryJob,
+  UseIndexDataReturnType,
+  EsSorting,
+  RenderCellValue,
+} from './shared';
+
+// Static exports
+export { getSeverityColor, getSeverityType } from '../common/util/anomaly_utils';
+export { ANOMALY_SEVERITY } from '../common';
+
+// Bundled shared exports
+// Exported this way so the code doesn't end up in ML's page load bundle
+export const getMlSharedImports = async () => {
+  return await import('./shared');
+};
+// Helper to get Type returned by getMlSharedImports.
+type AwaitReturnType<T> = T extends PromiseLike<infer U> ? U : T;
+export type GetMlSharedImportsReturnType = AwaitReturnType<ReturnType<typeof getMlSharedImports>>;

x-pack/plugins/ml/public/ml_url_generator/anomaly_detection_urls_generator.ts

@@ -4,10 +4,8 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-// Prefer importing entire lodash library, e.g. import { get } from "lodash"
-// eslint-disable-next-line no-restricted-imports
-import isEmpty from 'lodash/isEmpty';
-import {
+import { isEmpty } from 'lodash';
+import type {
   AnomalyDetectionQueryState,
   AnomalyDetectionUrlState,
   ExplorerAppState,

x-pack/plugins/ml/public/ml_url_generator/common.ts

@@ -4,9 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-// Prefer importing entire lodash library, e.g. import { get } from "lodash"
-// eslint-disable-next-line no-restricted-imports
-import isEmpty from 'lodash/isEmpty';
+import { isEmpty } from 'lodash';
 import { MlGenericUrlState } from '../../common/types/ml_url_generator';
 import { setStateToKbnUrl } from '../../../../../src/plugins/kibana_utils/public';
 

x-pack/plugins/ml/public/ml_url_generator/ml_url_generator.ts

@@ -4,15 +4,15 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { CoreSetup } from 'kibana/public';
-import {
+import type { CoreSetup } from 'kibana/public';
+import type {
   SharePluginSetup,
   UrlGeneratorsDefinition,
   UrlGeneratorState,
 } from '../../../../../src/plugins/share/public';
-import { MlStartDependencies } from '../plugin';
+import type { MlStartDependencies } from '../plugin';
 import { ML_PAGES, ML_APP_URL_GENERATOR } from '../../common/constants/ml_url_generator';
-import { MlUrlGeneratorState } from '../../common/types/ml_url_generator';
+import type { MlUrlGeneratorState } from '../../common/types/ml_url_generator';
 import {
   createAnomalyDetectionJobManagementUrl,
   createAnomalyDetectionCreateJobSelectType,

x-pack/plugins/ml/public/plugin.ts

@@ -5,7 +5,7 @@
  */
 
 import { i18n } from '@kbn/i18n';
-import {
+import type {
   AppMountParameters,
   CoreSetup,
   CoreStart,
@@ -14,29 +14,26 @@ import {
 } from 'kibana/public';
 import { BehaviorSubject } from 'rxjs';
 import { take } from 'rxjs/operators';
-import { ManagementSetup } from 'src/plugins/management/public';
-import { SharePluginSetup, SharePluginStart } from 'src/plugins/share/public';
-import { UsageCollectionSetup } from 'src/plugins/usage_collection/server';
 
-import { DataPublicPluginStart } from 'src/plugins/data/public';
-import { HomePublicPluginSetup } from 'src/plugins/home/public';
-import { IndexPatternManagementSetup } from 'src/plugins/index_pattern_management/public';
-import { EmbeddableSetup } from 'src/plugins/embeddable/public';
+import type { ManagementSetup } from 'src/plugins/management/public';
+import type { SharePluginSetup, SharePluginStart } from 'src/plugins/share/public';
+import type { UsageCollectionSetup } from 'src/plugins/usage_collection/server';
+import type { DataPublicPluginStart } from 'src/plugins/data/public';
+import type { HomePublicPluginSetup } from 'src/plugins/home/public';
+import type { IndexPatternManagementSetup } from 'src/plugins/index_pattern_management/public';
+import type { EmbeddableSetup } from 'src/plugins/embeddable/public';
+
 import { AppStatus, AppUpdater, DEFAULT_APP_CATEGORIES } from '../../../../src/core/public';
-import { MlCardState } from '../../../../src/plugins/index_pattern_management/public';
-import { SecurityPluginSetup } from '../../security/public';
-import { LicensingPluginSetup } from '../../licensing/public';
-import { registerManagementSection } from './application/management';
-import { LicenseManagementUIPluginSetup } from '../../license_management/public';
-import { setDependencyCache } from './application/util/dependency_cache';
+import type { UiActionsSetup, UiActionsStart } from '../../../../src/plugins/ui_actions/public';
+import type { KibanaLegacyStart } from '../../../../src/plugins/kibana_legacy/public';
+
+import type { LicenseManagementUIPluginSetup } from '../../license_management/public';
+import type { LicensingPluginSetup } from '../../licensing/public';
+import type { SecurityPluginSetup } from '../../security/public';
+
 import { PLUGIN_ICON_SOLUTION, PLUGIN_ID } from '../common/constants/app';
-import { registerFeature } from './register_feature';
-import { UiActionsSetup, UiActionsStart } from '../../../../src/plugins/ui_actions/public';
-import { registerMlUiActions } from './ui_actions';
-import { KibanaLegacyStart } from '../../../../src/plugins/kibana_legacy/public';
-import { registerUrlGenerator } from './ml_url_generator';
-import { isFullLicense, isMlEnabled } from '../common/license';
-import { registerEmbeddables } from './embeddables';
+
+import { setDependencyCache } from './application/util/dependency_cache';
 
 export interface MlStartDependencies {
   data: DataPublicPluginStart;
@@ -101,12 +98,21 @@ export class MlPlugin implements Plugin<MlPluginSetup, MlPluginStart> {
       },
     });
 
-    const managementApp = registerManagementSection(pluginsSetup.management, core);
-
     const licensing = pluginsSetup.licensing.license$.pipe(take(1));
     licensing.subscribe(async (license) => {
       const [coreStart] = await core.getStartServices();
 
+      const {
+        isFullLicense,
+        isMlEnabled,
+        registerEmbeddables,
+        registerFeature,
+        registerManagementSection,
+        registerMlUiActions,
+        registerUrlGenerator,
+        MlCardState,
+      } = await import('./register_helper');
+
       if (isMlEnabled(license)) {
         // add ML to home page
         if (pluginsSetup.home) {
@@ -129,22 +135,17 @@ export class MlPlugin implements Plugin<MlPluginSetup, MlPluginStart> {
 
         // register various ML plugin features which require a full license
         if (isFullLicense(license)) {
-          if (canManageMLJobs && managementApp) {
-            managementApp.enable();
+          if (canManageMLJobs && pluginsSetup.management !== undefined) {
+            registerManagementSection(pluginsSetup.management, core).enable();
           }
           registerEmbeddables(pluginsSetup.embeddable, core);
           registerMlUiActions(pluginsSetup.uiActions, core);
-        } else if (managementApp) {
-          managementApp.disable();
         }
       } else {
         // if ml is disabled in elasticsearch, disable ML in kibana
         this.appUpdater.next(() => ({
           status: AppStatus.inaccessible,
         }));
-        if (managementApp) {
-          managementApp.disable();
-        }
       }
     });
 

x-pack/plugins/ml/public/register_helper.ts

@@ -0,0 +1,15 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export { MlCardState } from '../../../../src/plugins/index_pattern_management/public';
+
+export { isFullLicense, isMlEnabled } from '../common/license';
+
+export { registerEmbeddables } from './embeddables';
+export { registerFeature } from './register_feature';
+export { registerManagementSection } from './application/management';
+export { registerMlUiActions } from './ui_actions';
+export { registerUrlGenerator } from './ml_url_generator';

x-pack/plugins/ml/server/index.ts

@@ -6,7 +6,7 @@
 
 import { PluginInitializerContext } from 'kibana/server';
 import { MlServerPlugin } from './plugin';
-export { MlPluginSetup, MlPluginStart } from './plugin';
+export type { MlPluginSetup, MlPluginStart } from './plugin';
 export * from './shared';
 
 export const plugin = (ctx: PluginInitializerContext) => new MlServerPlugin(ctx);

x-pack/plugins/ml/server/lib/telemetry/telemetry.ts

@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import isEmpty from 'lodash/isEmpty';
+import { isEmpty } from 'lodash';
 import { ISavedObjectsRepository } from 'kibana/server';
 
 import { getInternalRepository } from './internal_repository';

x-pack/plugins/ml/server/models/annotation_service/annotation.ts

@@ -5,8 +5,7 @@
  */
 
 import Boom from 'boom';
-import each from 'lodash/each';
-import get from 'lodash/get';
+import { each, get } from 'lodash';
 import { IScopedClusterClient } from 'kibana/server';
 
 import { ANNOTATION_EVENT_USER, ANNOTATION_TYPE } from '../../../common/constants/annotations';

x-pack/plugins/ml/server/models/bucket_span_estimator/bucket_span_estimator.js

@@ -4,11 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import cloneDeep from 'lodash/cloneDeep';
-import each from 'lodash/each';
-import remove from 'lodash/remove';
-import sortBy from 'lodash/sortBy';
-import get from 'lodash/get';
+import { cloneDeep, each, remove, sortBy, get } from 'lodash';
 
 import { mlLog } from '../../client/log';
 

x-pack/plugins/ml/server/models/bucket_span_estimator/polled_data_checker.js

@@ -10,7 +10,7 @@
  * And a minimum bucket span
  */
 
-import get from 'lodash/get';
+import { get } from 'lodash';
 
 export function polledDataCheckerFactory({ asCurrentUser }) {
   class PolledDataChecker {

x-pack/plugins/ml/server/models/data_visualizer/data_visualizer.ts

@@ -5,10 +5,7 @@
  */
 
 import { IScopedClusterClient } from 'kibana/server';
-import get from 'lodash/get';
-import each from 'lodash/each';
-import last from 'lodash/last';
-import find from 'lodash/find';
+import { get, each, last, find } from 'lodash';
 import { KBN_FIELD_TYPES } from '../../../../../../src/plugins/data/server';
 import { ML_JOB_FIELD_TYPES } from '../../../common/constants/field_types';
 import { getSafeAggregationName } from '../../../common/util/job_utils';

x-pack/plugins/ml/server/models/job_validation/validate_cardinality.test.ts

@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import cloneDeep from 'lodash/cloneDeep';
+import { cloneDeep } from 'lodash';
 
 import { IScopedClusterClient } from 'kibana/server';
 

x-pack/plugins/ml/server/models/job_validation/validate_time_range.test.ts

@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import cloneDeep from 'lodash/cloneDeep';
+import { cloneDeep } from 'lodash';
 
 import { IScopedClusterClient } from 'kibana/server';
 

x-pack/plugins/ml/server/models/results_service/build_anomaly_table_items.js

@@ -4,8 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import sortBy from 'lodash/sortBy';
-import each from 'lodash/each';
+import { sortBy, each } from 'lodash';
 import moment from 'moment-timezone';
 
 import {

x-pack/plugins/ml/server/models/results_service/results_service.ts

@@ -4,9 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import sortBy from 'lodash/sortBy';
-import slice from 'lodash/slice';
-import get from 'lodash/get';
+import { sortBy, slice, get } from 'lodash';
 import moment from 'moment';
 import { SearchResponse } from 'elasticsearch';
 import { IScopedClusterClient } from 'kibana/server';

x-pack/plugins/ml/server/shared.ts

@@ -7,5 +7,5 @@
 export * from '../common/types/anomalies';
 export * from '../common/types/anomaly_detection_jobs';
 export * from './lib/capabilities/errors';
-export { ModuleSetupPayload } from './shared_services/providers/modules';
+export type { ModuleSetupPayload } from './shared_services/providers/modules';
 export { getHistogramsForFields } from './models/data_visualizer/';

x-pack/plugins/transform/common/shared_imports.ts

@@ -5,3 +5,4 @@
  */
 
 export type { SearchResponse7 } from '../../ml/common';
+export { composeValidators, patternValidator } from '../../ml/common';

x-pack/plugins/transform/kibana.json

@@ -16,11 +16,11 @@
   ],
   "configPath": ["xpack", "transform"],
   "requiredBundles": [
-    "ml",
     "esUiShared",
     "discover",
     "kibanaUtils",
     "kibanaReact",
-    "savedObjects"
+    "savedObjects",
+    "ml"
   ]
 }

x-pack/plugins/transform/public/__mocks__/shared_imports.ts

@@ -14,16 +14,4 @@ export const useRequest = jest.fn(() => ({
 }));
 
 // just passing through the reimports
-export {
-  getDataGridSchemaFromKibanaFieldType,
-  getFieldsFromKibanaIndexPattern,
-  multiColumnSortFactory,
-  useDataGrid,
-  useRenderCellValue,
-  DataGrid,
-  EsSorting,
-  RenderCellValue,
-  UseDataGridReturnType,
-  UseIndexDataReturnType,
-  INDEX_STATUS,
-} from '../../../ml/public';
+export { getMlSharedImports } from '../../../ml/public';

x-pack/plugins/transform/public/app/__mocks__/app_dependencies.tsx

@@ -4,10 +4,14 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import { useContext } from 'react';
+
 import { coreMock } from '../../../../../../src/core/public/mocks';
 import { dataPluginMock } from '../../../../../../src/plugins/data/public/mocks';
 import { Storage } from '../../../../../../src/plugins/kibana_utils/public';
 
+import { MlSharedContext } from './shared_context';
+
 const coreSetup = coreMock.createSetup();
 const coreStart = coreMock.createStart();
 const dataStart = dataPluginMock.createStartContract();
@@ -26,7 +30,8 @@ const appDependencies = {
 };
 
 export const useAppDependencies = () => {
-  return appDependencies;
+  const ml = useContext(MlSharedContext);
+  return { ...appDependencies, ml };
 };
 
 export const useToastNotifications = () => {

x-pack/plugins/transform/public/app/__mocks__/shared_context.ts

@@ -0,0 +1,13 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { createContext } from 'react';
+
+import { GetMlSharedImportsReturnType } from '../../shared_imports';
+
+// This code is a workaround to provide dependencies that are
+// loaded dynamically during runtime.
+export const MlSharedContext = createContext({} as GetMlSharedImportsReturnType);

x-pack/plugins/transform/public/app/app_dependencies.tsx

@@ -11,6 +11,8 @@ import { ScopedHistory } from 'kibana/public';
 import { useKibana } from '../../../../../src/plugins/kibana_react/public';
 import { Storage } from '../../../../../src/plugins/kibana_utils/public';
 
+import type { GetMlSharedImportsReturnType } from '../shared_imports';
+
 export interface AppDependencies {
   chrome: CoreStart['chrome'];
   data: DataPublicPluginStart;
@@ -23,6 +25,7 @@ export interface AppDependencies {
   storage: Storage;
   overlays: CoreStart['overlays'];
   history: ScopedHistory;
+  ml: GetMlSharedImportsReturnType;
 }
 
 export const useAppDependencies = () => {

x-pack/plugins/transform/public/app/common/aggregations.ts

@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { composeValidators, patternValidator } from '../../../../ml/public';
+import { composeValidators, patternValidator } from '../../../common/shared_imports';
 
 import { AggName } from '../../../common/types/aggregations';
 

x-pack/plugins/transform/public/app/hooks/use_delete_transform.tsx

@@ -12,7 +12,6 @@ import type {
   DeleteTransformsRequestSchema,
 } from '../../../common/api_schemas/delete_transforms';
 import { isDeleteTransformsResponseSchema } from '../../../common/api_schemas/type_guards';
-import { extractErrorMessage } from '../../shared_imports';
 import { getErrorMessage } from '../../../common/utils/errors';
 import { useAppDependencies, useToastNotifications } from '../app_dependencies';
 import { REFRESH_TRANSFORM_LIST_STATE, refreshTransformList$, TransformListRow } from '../common';
@@ -21,7 +20,11 @@ import { useApi } from './use_api';
 import { indexService } from '../services/es_index_service';
 
 export const useDeleteIndexAndTargetIndex = (items: TransformListRow[]) => {
-  const { http, savedObjects } = useAppDependencies();
+  const {
+    http,
+    savedObjects,
+    ml: { extractErrorMessage },
+  } = useAppDependencies();
   const toastNotifications = useToastNotifications();
 
   const [deleteDestIndex, setDeleteDestIndex] = useState<boolean>(true);
@@ -56,7 +59,7 @@ export const useDeleteIndexAndTargetIndex = (items: TransformListRow[]) => {
         );
       }
     },
-    [savedObjects.client, toastNotifications]
+    [savedObjects.client, toastNotifications, extractErrorMessage]
   );
 
   const checkUserIndexPermission = useCallback(async () => {
@@ -105,7 +108,10 @@ export const useDeleteIndexAndTargetIndex = (items: TransformListRow[]) => {
 type SuccessCountField = keyof Omit<DeleteTransformStatus, 'destinationIndex'>;
 
 export const useDeleteTransforms = () => {
-  const { overlays } = useAppDependencies();
+  const {
+    overlays,
+    ml: { extractErrorMessage },
+  } = useAppDependencies();
   const toastNotifications = useToastNotifications();
   const api = useApi();
 

x-pack/plugins/transform/public/app/hooks/use_index_data.test.tsx

@@ -4,14 +4,14 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React from 'react';
+import React, { FC } from 'react';
 
 import { render, wait } from '@testing-library/react';
 import { renderHook } from '@testing-library/react-hooks';
 
 import { CoreSetup } from 'src/core/public';
 
-import { DataGrid, UseIndexDataReturnType, INDEX_STATUS } from '../../shared_imports';
+import { getMlSharedImports, UseIndexDataReturnType } from '../../shared_imports';
 
 import { SimpleQuery } from '../common';
 
@@ -22,6 +22,9 @@ jest.mock('../../shared_imports');
 jest.mock('../app_dependencies');
 jest.mock('./use_api');
 
+import { useAppDependencies } from '../__mocks__/app_dependencies';
+import { MlSharedContext } from '../__mocks__/shared_context';
+
 const query: SimpleQuery = {
   query_string: {
     query: '*',
@@ -31,22 +34,29 @@ const query: SimpleQuery = {
 
 describe('Transform: useIndexData()', () => {
   test('indexPattern set triggers loading', async (done) => {
-    const { result, waitForNextUpdate } = renderHook(() =>
-      useIndexData(
-        ({
-          id: 'the-id',
-          title: 'the-title',
-          fields: [],
-        } as unknown) as SearchItems['indexPattern'],
-        query
-      )
+    const mlShared = await getMlSharedImports();
+    const wrapper: FC = ({ children }) => (
+      <MlSharedContext.Provider value={mlShared}>{children}</MlSharedContext.Provider>
+    );
+
+    const { result, waitForNextUpdate } = renderHook(
+      () =>
+        useIndexData(
+          ({
+            id: 'the-id',
+            title: 'the-title',
+            fields: [],
+          } as unknown) as SearchItems['indexPattern'],
+          query
+        ),
+      { wrapper }
     );
     const IndexObj: UseIndexDataReturnType = result.current;
 
     await waitForNextUpdate();
 
     expect(IndexObj.errorMessage).toBe('');
-    expect(IndexObj.status).toBe(INDEX_STATUS.LOADING);
+    expect(IndexObj.status).toBe(1);
     expect(IndexObj.tableItems).toEqual([]);
     done();
   });
@@ -61,7 +71,12 @@ describe('Transform: <DataGrid /> with useIndexData()', () => {
       fields: [] as any[],
     } as SearchItems['indexPattern'];
 
+    const mlSharedImports = await getMlSharedImports();
+
     const Wrapper = () => {
+      const {
+        ml: { DataGrid },
+      } = useAppDependencies();
       const props = {
         ...useIndexData(indexPattern, { match_all: {} }),
         copyToClipboard: 'the-copy-to-clipboard-code',
@@ -73,7 +88,11 @@ describe('Transform: <DataGrid /> with useIndexData()', () => {
 
       return <DataGrid {...props} />;
     };
-    const { getByText } = render(<Wrapper />);
+    const { getByText } = render(
+      <MlSharedContext.Provider value={mlSharedImports}>
+        <Wrapper />
+      </MlSharedContext.Provider>
+    );
 
     // Act
     // Assert

x-pack/plugins/transform/public/app/hooks/use_index_data.ts

@@ -13,25 +13,16 @@ import {
   isFieldHistogramsResponseSchema,
 } from '../../../common/api_schemas/type_guards';
 
-import {
-  getFieldType,
-  getDataGridSchemaFromKibanaFieldType,
-  getFieldsFromKibanaIndexPattern,
-  showDataGridColumnChartErrorMessageToast,
-  useDataGrid,
-  useRenderCellValue,
-  EsSorting,
-  UseIndexDataReturnType,
-  INDEX_STATUS,
-} from '../../shared_imports';
 import { getErrorMessage } from '../../../common/utils/errors';
 
+import type { EsSorting, UseIndexDataReturnType } from '../../shared_imports';
+
 import { isDefaultQuery, matchAllQuery, PivotQuery } from '../common';
 
 import { SearchItems } from './use_search_items';
 import { useApi } from './use_api';
 
-import { useToastNotifications } from '../app_dependencies';
+import { useAppDependencies, useToastNotifications } from '../app_dependencies';
 
 export const useIndexData = (
   indexPattern: SearchItems['indexPattern'],
@@ -39,6 +30,17 @@ export const useIndexData = (
 ): UseIndexDataReturnType => {
   const api = useApi();
   const toastNotifications = useToastNotifications();
+  const {
+    ml: {
+      getFieldType,
+      getDataGridSchemaFromKibanaFieldType,
+      getFieldsFromKibanaIndexPattern,
+      showDataGridColumnChartErrorMessageToast,
+      useDataGrid,
+      useRenderCellValue,
+      INDEX_STATUS,
+    },
+  } = useAppDependencies();
 
   const indexPatternFields = getFieldsFromKibanaIndexPattern(indexPattern);
 

x-pack/plugins/transform/public/app/hooks/use_pivot_data.ts

@@ -18,16 +18,10 @@ import { isPostTransformsPreviewResponseSchema } from '../../../common/api_schem
 import { dictionaryToArray } from '../../../common/types/common';
 import { getNestedProperty } from '../../../common/utils/object_utils';
 
-import {
-  formatHumanReadableDateTimeSeconds,
-  multiColumnSortFactory,
-  useDataGrid,
-  RenderCellValue,
-  UseIndexDataReturnType,
-  INDEX_STATUS,
-} from '../../shared_imports';
+import { RenderCellValue, UseIndexDataReturnType } from '../../shared_imports';
 import { getErrorMessage } from '../../../common/utils/errors';
 
+import { useAppDependencies } from '../app_dependencies';
 import {
   getPreviewTransformRequestBody,
   PivotAggsConfigDict,
@@ -36,10 +30,10 @@ import {
   PivotQuery,
   PivotAggsConfig,
 } from '../common';
+import { isPivotAggsWithExtendedForm } from '../common/pivot_aggs';
 
 import { SearchItems } from './use_search_items';
 import { useApi } from './use_api';
-import { isPivotAggsWithExtendedForm } from '../common/pivot_aggs';
 
 /**
  * Checks if the aggregations collection is invalid.
@@ -79,6 +73,9 @@ export const usePivotData = (
     PreviewMappingsProperties
   >({});
   const api = useApi();
+  const {
+    ml: { formatHumanReadableDateTimeSeconds, multiColumnSortFactory, useDataGrid, INDEX_STATUS },
+  } = useAppDependencies();
 
   const aggsArr = useMemo(() => dictionaryToArray(aggs), [aggs]);
   const groupByArr = useMemo(() => dictionaryToArray(groupBy), [groupBy]);
@@ -258,7 +255,13 @@ export const usePivotData = (
 
       return cellValue;
     };
-  }, [pageData, pagination.pageIndex, pagination.pageSize, previewMappingsProperties]);
+  }, [
+    pageData,
+    pagination.pageIndex,
+    pagination.pageSize,
+    previewMappingsProperties,
+    formatHumanReadableDateTimeSeconds,
+  ]);
 
   return {
     ...dataGrid,

x-pack/plugins/transform/public/app/mount_management_section.ts

@@ -8,6 +8,7 @@ import { ManagementAppMountParams } from '../../../../../src/plugins/management/
 import { Storage } from '../../../../../src/plugins/kibana_utils/public';
 
 import { PluginsDependencies } from '../plugin';
+import { getMlSharedImports } from '../shared_imports';
 
 import { AppDependencies } from './app_dependencies';
 import { breadcrumbService } from './services/navigation';
@@ -47,6 +48,7 @@ export async function mountManagementSection(
     storage: localStorage,
     uiSettings,
     history,
+    ml: await getMlSharedImports(),
   };
 
   const unmountAppCallback = renderApp(element, appDependencies);

x-pack/plugins/transform/public/app/sections/create_transform/components/advanced_pivot_editor/advanced_pivot_editor.tsx

@@ -4,9 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-// Prefer importing entire lodash library, e.g. import { get } from "lodash"
-// eslint-disable-next-line no-restricted-imports
-import isEqual from 'lodash/isEqual';
+import { isEqual } from 'lodash';
 import React, { memo, FC } from 'react';
 
 import { EuiCodeEditor, EuiFormRow } from '@elastic/eui';

x-pack/plugins/transform/public/app/sections/create_transform/components/aggregation_list/popover_form.tsx

@@ -18,9 +18,7 @@ import {
   EuiSelectOption,
 } from '@elastic/eui';
 
-// Prefer importing entire lodash library, e.g. import { get } from "lodash"
-// eslint-disable-next-line no-restricted-imports
-import cloneDeep from 'lodash/cloneDeep';
+import { cloneDeep } from 'lodash';
 import { useUpdateEffect } from 'react-use';
 import { AggName } from '../../../../../../common/types/aggregations';
 import { dictionaryToArray } from '../../../../../../common/types/common';

x-pack/plugins/transform/public/app/sections/create_transform/components/step_define/common/apply_transform_config_to_define_state.ts

@@ -4,9 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-// Prefer importing entire lodash library, e.g. import { get } from "lodash"
-// eslint-disable-next-line no-restricted-imports
-import isEqual from 'lodash/isEqual';
+import { isEqual } from 'lodash';
 
 import { Dictionary } from '../../../../../../../common/types/common';
 import { PivotSupportedAggs } from '../../../../../../../common/types/pivot_aggs';

x-pack/plugins/transform/public/app/sections/create_transform/components/step_define/common/filter_agg/components/filter_term_form.tsx

@@ -7,9 +7,7 @@
 import React, { useCallback, useContext, useEffect, useState } from 'react';
 import { EuiComboBox, EuiFormRow } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
-// Prefer importing entire lodash library, e.g. import { get } from "lodash"
-// eslint-disable-next-line no-restricted-imports
-import debounce from 'lodash/debounce';
+import { debounce } from 'lodash';
 import { useUpdateEffect } from 'react-use';
 import { i18n } from '@kbn/i18n';
 import { isEsSearchResponse } from '../../../../../../../../../common/api_schemas/type_guards';

x-pack/plugins/transform/public/app/sections/create_transform/components/step_define/step_define_form.test.tsx

@@ -30,6 +30,9 @@ import { StepDefineForm } from './step_define_form';
 jest.mock('../../../../../shared_imports');
 jest.mock('../../../../../app/app_dependencies');
 
+import { MlSharedContext } from '../../../../../app/__mocks__/shared_context';
+import { getMlSharedImports } from '../../../../../shared_imports';
+
 const createMockWebStorage = () => ({
   clear: jest.fn(),
   getItem: jest.fn(),
@@ -51,6 +54,8 @@ describe('Transform: <DefinePivotForm />', () => {
   // Using the async/await wait()/done() pattern to avoid act() errors.
   test('Minimal initialization', async (done) => {
     // Arrange
+    const mlSharedImports = await getMlSharedImports();
+
     const searchItems = {
       indexPattern: {
         title: 'the-index-pattern-title',
@@ -69,7 +74,9 @@ describe('Transform: <DefinePivotForm />', () => {
     const { getByText } = render(
       <I18nProvider>
         <KibanaContextProvider services={services}>
-          <StepDefineForm onChange={jest.fn()} searchItems={searchItems as SearchItems} />
+          <MlSharedContext.Provider value={mlSharedImports}>
+            <StepDefineForm onChange={jest.fn()} searchItems={searchItems as SearchItems} />
+          </MlSharedContext.Provider>
         </KibanaContextProvider>
       </I18nProvider>
     );

x-pack/plugins/transform/public/app/sections/create_transform/components/step_define/step_define_form.tsx

@@ -25,8 +25,6 @@ import {
 import { PivotAggDict } from '../../../../../../common/types/pivot_aggs';
 import { PivotGroupByDict } from '../../../../../../common/types/pivot_group_by';
 
-import { DataGrid } from '../../../../../shared_imports';
-
 import {
   getIndexDevConsoleStatement,
   getPivotPreviewDevConsoleStatement,
@@ -42,7 +40,7 @@ import {
 import { useDocumentationLinks } from '../../../../hooks/use_documentation_links';
 import { useIndexData } from '../../../../hooks/use_index_data';
 import { usePivotData } from '../../../../hooks/use_pivot_data';
-import { useToastNotifications } from '../../../../app_dependencies';
+import { useAppDependencies, useToastNotifications } from '../../../../app_dependencies';
 import { SearchItems } from '../../../../hooks/use_search_items';
 
 import { AdvancedPivotEditor } from '../advanced_pivot_editor';
@@ -66,6 +64,9 @@ export const StepDefineForm: FC<StepDefineFormProps> = React.memo((props) => {
   const { searchItems } = props;
   const { indexPattern } = searchItems;
 
+  const {
+    ml: { DataGrid },
+  } = useAppDependencies();
   const toastNotifications = useToastNotifications();
   const stepDefineForm = useStepDefineForm(props);
 

x-pack/plugins/transform/public/app/sections/create_transform/components/step_define/step_define_summary.test.tsx

@@ -22,10 +22,15 @@ import { StepDefineSummary } from './step_define_summary';
 jest.mock('../../../../../shared_imports');
 jest.mock('../../../../../app/app_dependencies');
 
+import { MlSharedContext } from '../../../../../app/__mocks__/shared_context';
+import { getMlSharedImports } from '../../../../../shared_imports';
+
 describe('Transform: <DefinePivotSummary />', () => {
   // Using the async/await wait()/done() pattern to avoid act() errors.
   test('Minimal initialization', async (done) => {
     // Arrange
+    const mlSharedImports = await getMlSharedImports();
+
     const searchItems = {
       indexPattern: {
         title: 'the-index-pattern-title',
@@ -57,7 +62,9 @@ describe('Transform: <DefinePivotSummary />', () => {
     };
 
     const { getByText } = render(
-      <StepDefineSummary formState={formState} searchItems={searchItems as SearchItems} />
+      <MlSharedContext.Provider value={mlSharedImports}>
+        <StepDefineSummary formState={formState} searchItems={searchItems as SearchItems} />
+      </MlSharedContext.Provider>
     );
 
     // Act

x-pack/plugins/transform/public/app/sections/create_transform/components/step_define/step_define_summary.tsx

@@ -12,9 +12,7 @@ import { EuiCodeBlock, EuiForm, EuiFormRow, EuiSpacer } from '@elastic/eui';
 
 import { dictionaryToArray } from '../../../../../../common/types/common';
 
-import { DataGrid } from '../../../../../shared_imports';
-
-import { useToastNotifications } from '../../../../app_dependencies';
+import { useAppDependencies, useToastNotifications } from '../../../../app_dependencies';
 import {
   getPivotQuery,
   getPivotPreviewDevConsoleStatement,
@@ -39,6 +37,9 @@ export const StepDefineSummary: FC<Props> = ({
   formState: { searchString, searchQuery, groupByList, aggList },
   searchItems,
 }) => {
+  const {
+    ml: { DataGrid },
+  } = useAppDependencies();
   const toastNotifications = useToastNotifications();
   const pivotAggsArr = dictionaryToArray(aggList);
   const pivotGroupByArr = dictionaryToArray(groupByList);

x-pack/plugins/transform/public/app/sections/transform_management/components/edit_transform_flyout/use_edit_transform_flyout.ts

@@ -4,12 +4,8 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-// Prefer importing entire lodash library, e.g. import { get } from "lodash"
-// eslint-disable-next-line no-restricted-imports
-import isEqual from 'lodash/isEqual';
-// Prefer importing entire lodash library, e.g. import { get } from "lodash"
-// eslint-disable-next-line no-restricted-imports
-import merge from 'lodash/merge';
+import { isEqual } from 'lodash';
+import { merge } from 'lodash';
 
 import { useReducer } from 'react';
 

x-pack/plugins/transform/public/app/sections/transform_management/components/transform_list/expanded_row.test.tsx

@@ -13,9 +13,12 @@ import { ExpandedRow } from './expanded_row';
 import transformListRow from '../../../../common/__mocks__/transform_list_row.json';
 import { within } from '@testing-library/dom';
 
-jest.mock('../../../../../shared_imports', () => ({
-  formatHumanReadableDateTimeSeconds: jest.fn(),
-}));
+jest.mock('../../../../../shared_imports');
+jest.mock('../../../../../app/app_dependencies');
+
+import { MlSharedContext } from '../../../../../app/__mocks__/shared_context';
+import { getMlSharedImports } from '../../../../../shared_imports';
+
 describe('Transform: Transform List <ExpandedRow />', () => {
   // Set timezone to US/Eastern for consistent test results.
   beforeEach(() => {
@@ -27,9 +30,14 @@ describe('Transform: Transform List <ExpandedRow />', () => {
   });
 
   test('Minimal initialization', async () => {
+    const mlShared = await getMlSharedImports();
     const item: TransformListRow = transformListRow;
 
-    const { getByText, getByTestId } = render(<ExpandedRow item={item} />);
+    const { getByText, getByTestId } = render(
+      <MlSharedContext.Provider value={mlShared}>
+        <ExpandedRow item={item} />
+      </MlSharedContext.Provider>
+    );
 
     expect(getByText('Details')).toBeInTheDocument();
     expect(getByText('Stats')).toBeInTheDocument();

x-pack/plugins/transform/public/app/sections/transform_management/components/transform_list/expanded_row.tsx

@@ -11,8 +11,8 @@ import { Optional } from '@kbn/utility-types';
 import { i18n } from '@kbn/i18n';
 
 import moment from 'moment-timezone';
-import { formatHumanReadableDateTimeSeconds } from '../../../../../shared_imports';
 import { TransformListRow } from '../../../../common';
+import { useAppDependencies } from '../../../../app_dependencies';
 import { ExpandedRowDetailsPane, SectionConfig } from './expanded_row_details_pane';
 import { ExpandedRowJsonPane } from './expanded_row_json_pane';
 import { ExpandedRowMessagesPane } from './expanded_row_messages_pane';
@@ -38,6 +38,9 @@ interface Props {
 type StateValues = Optional<TransformListRow['stats'], 'stats' | 'checkpointing'>;
 
 export const ExpandedRow: FC<Props> = ({ item }) => {
+  const {
+    ml: { formatHumanReadableDateTimeSeconds },
+  } = useAppDependencies();
   const stateValues: StateValues = { ...item.stats };
   delete stateValues.stats;
   delete stateValues.checkpointing;

x-pack/plugins/transform/public/app/sections/transform_management/components/transform_list/expanded_row_preview_pane.tsx

@@ -7,9 +7,8 @@
 import React, { useMemo, FC } from 'react';
 
 import { TransformPivotConfig } from '../../../../../../common/types/transform';
-import { DataGrid } from '../../../../../shared_imports';
 
-import { useToastNotifications } from '../../../../app_dependencies';
+import { useAppDependencies, useToastNotifications } from '../../../../app_dependencies';
 import { getPivotQuery } from '../../../../common';
 import { usePivotData } from '../../../../hooks/use_pivot_data';
 import { SearchItems } from '../../../../hooks/use_search_items';
@@ -24,6 +23,9 @@ interface ExpandedRowPreviewPaneProps {
 }
 
 export const ExpandedRowPreviewPane: FC<ExpandedRowPreviewPaneProps> = ({ transformConfig }) => {
+  const {
+    ml: { DataGrid },
+  } = useAppDependencies();
   const toastNotifications = useToastNotifications();
 
   const { aggList, groupByList, searchQuery } = useMemo(

x-pack/plugins/transform/public/app/sections/transform_management/components/transform_list/use_table_settings.ts

@@ -6,12 +6,8 @@
 
 import { useState } from 'react';
 import { Direction, EuiBasicTableProps, EuiTableSortingType } from '@elastic/eui';
-// Prefer importing entire lodash library, e.g. import { get } from "lodash"
-// eslint-disable-next-line no-restricted-imports
-import sortBy from 'lodash/sortBy';
-// Prefer importing entire lodash library, e.g. import { get } from "lodash"
-// eslint-disable-next-line no-restricted-imports
-import get from 'lodash/get';
+import { sortBy } from 'lodash';
+import { get } from 'lodash';
 
 const PAGE_SIZE = 10;
 const PAGE_SIZE_OPTIONS = [10, 25, 50];

x-pack/plugins/transform/public/shared_imports.ts

@@ -9,22 +9,11 @@ export { XJsonMode } from '@kbn/ace';
 export { UseRequestConfig, useRequest } from '../../../../src/plugins/es_ui_shared/public';
 
 export {
-  getFieldType,
-  extractErrorMessage,
-  formatHumanReadableDateTimeSeconds,
-  getDataGridSchemaFromKibanaFieldType,
-  getFieldsFromKibanaIndexPattern,
-  multiColumnSortFactory,
-  showDataGridColumnChartErrorMessageToast,
-  useDataGrid,
-  useRenderCellValue,
-  ChartData,
-  DataGrid,
+  getMlSharedImports,
+  GetMlSharedImportsReturnType,
+  UseIndexDataReturnType,
   EsSorting,
   RenderCellValue,
-  UseDataGridReturnType,
-  UseIndexDataReturnType,
-  INDEX_STATUS,
 } from '../../ml/public';
 
 import { XJson } from '../../../../src/plugins/es_ui_shared/public';