[ML] Limit exposing shared static code through ml/public/index.ts. (e…

…lastic#77745) (elastic#79252)

- 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';