[ML] Fix initial plugin's bundle size (#74047) (#74351)

* [ML] use dynamic imports

* [ML] fix react-use imports

* [ML] change embeddables imports

* [ML] embeddable exports

* [ML] move SCSS import

* [ML] management page styles

* [ML] refactor with types and constants files

* [ML] move declarations

x-pack/plugins/ml/public/application/_index.scss

@@ -1,11 +1,6 @@
 // ML has it's own variables for coloring
 @import 'variables';
 
-// Kibana management page ML section
-#kibanaManagementMLSection {
-  @import 'management/index';
-}
-
 // Protect the rest of Kibana from ML generic namespacing
 // SASSTODO: Prefix ml selectors instead
 .ml-app {
@@ -24,7 +19,6 @@
   // Components
   @import 'components/annotations/annotation_description_list/index'; // SASSTODO: This file overwrites EUI directly
   @import 'components/anomalies_table/index'; // SASSTODO: This file overwrites EUI directly
-  @import 'components/chart_tooltip/index';
   @import 'components/color_range_legend/index';
   @import 'components/controls/index';
   @import 'components/entity_cell/index';

x-pack/plugins/ml/public/application/app.tsx

@@ -5,6 +5,7 @@
  */
 
 import React, { FC } from 'react';
+import './_index.scss';
 import ReactDOM from 'react-dom';
 
 import { AppMountParameters, CoreStart, HttpStart } from 'kibana/public';

x-pack/plugins/ml/public/application/components/data_grid/use_column_chart.tsx

@@ -8,7 +8,7 @@ import moment from 'moment';
 import { BehaviorSubject } from 'rxjs';
 import React from 'react';
 
-import { useObservable } from 'react-use';
+import useObservable from 'react-use/lib/useObservable';
 
 import { euiPaletteColorBlind, EuiDataGridColumn } from '@elastic/eui';
 

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

@@ -25,13 +25,11 @@ import { EuiInMemoryTable } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { useMlKibana } from '../contexts/kibana';
 import { SavedObjectDashboard } from '../../../../../../src/plugins/dashboard/public';
-import {
-  ANOMALY_SWIMLANE_EMBEDDABLE_TYPE,
-  getDefaultPanelTitle,
-} from '../../embeddables/anomaly_swimlane/anomaly_swimlane_embeddable';
+import { getDefaultPanelTitle } from '../../embeddables/anomaly_swimlane/anomaly_swimlane_embeddable';
 import { useDashboardService } from '../services/dashboard_service';
 import { SWIMLANE_TYPE, SwimlaneType } from './explorer_constants';
 import { JobId } from '../../../common/types/anomaly_detection_jobs';
+import { ANOMALY_SWIMLANE_EMBEDDABLE_TYPE } from '../../embeddables';
 
 export interface DashboardItem {
   id: string;

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

@@ -15,12 +15,9 @@ import {
 } from '@elastic/eui';
 
 import { throttle } from 'lodash';
-import {
-  ExplorerSwimlane,
-  ExplorerSwimlaneProps,
-} from '../../application/explorer/explorer_swimlane';
+import { ExplorerSwimlane, ExplorerSwimlaneProps } from './explorer_swimlane';
 
-import { MlTooltipComponent } from '../../application/components/chart_tooltip';
+import { MlTooltipComponent } from '../components/chart_tooltip';
 import { SwimLanePagination } from './swimlane_pagination';
 import { SWIMLANE_TYPE } from './explorer_constants';
 import { ViewBySwimLaneData } from './explorer_utils';

x-pack/plugins/ml/public/application/management/jobs_list/_index.scss

@@ -1 +1,4 @@
-@import 'components/index';
+// Kibana management page ML section
+#kibanaManagementMLSection {
+  @import 'components/index';
+}

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

@@ -12,6 +12,7 @@ import { MlStartDependencies } from '../../../plugin';
 import { JobsListPage } from './components';
 import { getJobsListBreadcrumbs } from '../breadcrumbs';
 import { setDependencyCache, clearCache } from '../../util/dependency_cache';
+import './_index.scss';
 
 const renderApp = (element: HTMLElement, coreStart: CoreStart) => {
   ReactDOM.render(React.createElement(JobsListPage, { coreStart }), element);

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

@@ -5,7 +5,7 @@
  */
 
 import React, { useEffect, FC } from 'react';
-import { useObservable } from 'react-use';
+import useObservable from 'react-use/lib/useObservable';
 import { i18n } from '@kbn/i18n';
 
 import { NavigateToPath } from '../../contexts/kibana';

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

@@ -6,7 +6,7 @@
 
 import { isEqual } from 'lodash';
 import React, { FC, useCallback, useEffect, useState } from 'react';
-import { usePrevious } from 'react-use';
+import usePrevious from 'react-use/lib/usePrevious';
 import moment from 'moment';
 
 import { i18n } from '@kbn/i18n';

x-pack/plugins/ml/public/application/routing/use_refresh.ts

@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { useObservable } from 'react-use';
+import useObservable from 'react-use/lib/useObservable';
 import { merge } from 'rxjs';
 import { map } from 'rxjs/operators';
 

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

@@ -7,7 +7,6 @@
 /*
  * Contains utility functions for performing operations on Strings.
  */
-import _ from 'lodash';
 import d3 from 'd3';
 import he from 'he';
 
@@ -28,7 +27,8 @@ export function replaceStringTokens(
 ) {
   return String(str).replace(/\$([^?&$\'"]+)\$/g, (match, name) => {
     // Use lodash get to allow nested JSON fields to be retrieved.
-    let tokenValue = _.get(valuesByTokenName, name, null);
+    let tokenValue =
+      valuesByTokenName && valuesByTokenName[name] !== undefined ? valuesByTokenName[name] : null;
     if (encodeForURI === true && tokenValue !== null) {
       tokenValue = encodeURIComponent(tokenValue);
     }

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

@@ -9,81 +9,25 @@ import ReactDOM from 'react-dom';
 import { CoreStart } from 'kibana/public';
 import { i18n } from '@kbn/i18n';
 import { Subject } from 'rxjs';
-import {
-  Embeddable,
-  EmbeddableInput,
-  EmbeddableOutput,
-  IContainer,
-  IEmbeddable,
-} from '../../../../../../src/plugins/embeddable/public';
+import { Embeddable, IContainer } from '../../../../../../src/plugins/embeddable/public';
 import { EmbeddableSwimLaneContainer } from './embeddable_swim_lane_container';
-import { AnomalyDetectorService } from '../../application/services/anomaly_detector_service';
 import { JobId } from '../../../common/types/anomaly_detection_jobs';
-import { AnomalyTimelineService } from '../../application/services/anomaly_timeline_service';
-import {
-  Filter,
-  Query,
-  RefreshInterval,
-  TimeRange,
-} from '../../../../../../src/plugins/data/common';
-import { SwimlaneType } from '../../application/explorer/explorer_constants';
 import { MlDependencies } from '../../application/app';
-import { AppStateSelectedCells } from '../../application/explorer/explorer_utils';
-import { SWIM_LANE_SELECTION_TRIGGER } from '../../ui_actions/triggers';
-
-export const ANOMALY_SWIMLANE_EMBEDDABLE_TYPE = 'ml_anomaly_swimlane';
+import { SWIM_LANE_SELECTION_TRIGGER } from '../../ui_actions';
+import {
+  ANOMALY_SWIMLANE_EMBEDDABLE_TYPE,
+  AnomalySwimlaneEmbeddableInput,
+  AnomalySwimlaneEmbeddableOutput,
+  AnomalySwimlaneServices,
+} from '..';
 
 export const getDefaultPanelTitle = (jobIds: JobId[]) =>
   i18n.translate('xpack.ml.swimlaneEmbeddable.title', {
     defaultMessage: 'ML anomaly swim lane for {jobIds}',
     values: { jobIds: jobIds.join(', ') },
   });
 
-export interface AnomalySwimlaneEmbeddableCustomInput {
-  jobIds: JobId[];
-  swimlaneType: SwimlaneType;
-  viewBy?: string;
-  perPage?: number;
-
-  // Embeddable inputs which are not included in the default interface
-  filters: Filter[];
-  query: Query;
-  refreshConfig: RefreshInterval;
-  timeRange: TimeRange;
-}
-
-export interface EditSwimlanePanelContext {
-  embeddable: IEmbeddable<AnomalySwimlaneEmbeddableInput, AnomalySwimlaneEmbeddableOutput>;
-}
-
-export interface SwimLaneDrilldownContext extends EditSwimlanePanelContext {
-  /**
-   * Optional data provided by swim lane selection
-   */
-  data?: AppStateSelectedCells;
-}
-
-export type AnomalySwimlaneEmbeddableInput = EmbeddableInput & AnomalySwimlaneEmbeddableCustomInput;
-
-export type AnomalySwimlaneEmbeddableOutput = EmbeddableOutput &
-  AnomalySwimlaneEmbeddableCustomOutput;
-
-export interface AnomalySwimlaneEmbeddableCustomOutput {
-  perPage?: number;
-  fromPage?: number;
-  interval?: number;
-}
-
-export interface AnomalySwimlaneServices {
-  anomalyDetectorService: AnomalyDetectorService;
-  anomalyTimelineService: AnomalyTimelineService;
-}
-
-export type AnomalySwimlaneEmbeddableServices = [
-  CoreStart,
-  MlDependencies,
-  AnomalySwimlaneServices
-];
+export type IAnomalySwimlaneEmbeddable = typeof AnomalySwimlaneEmbeddable;
 
 export class AnomalySwimlaneEmbeddable extends Embeddable<
   AnomalySwimlaneEmbeddableInput,

x-pack/plugins/ml/public/embeddables/anomaly_swimlane/anomaly_swimlane_embeddable_factory.test.tsx

@@ -7,10 +7,8 @@
 import { AnomalySwimlaneEmbeddableFactory } from './anomaly_swimlane_embeddable_factory';
 import { coreMock } from '../../../../../../src/core/public/mocks';
 import { dataPluginMock } from '../../../../../../src/plugins/data/public/mocks';
-import {
-  AnomalySwimlaneEmbeddable,
-  AnomalySwimlaneEmbeddableInput,
-} from './anomaly_swimlane_embeddable';
+import { AnomalySwimlaneEmbeddable } from './anomaly_swimlane_embeddable';
+import { AnomalySwimlaneEmbeddableInput } from '..';
 
 jest.mock('./anomaly_swimlane_embeddable', () => ({
   AnomalySwimlaneEmbeddable: jest.fn(),

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

@@ -10,23 +10,16 @@ import { StartServicesAccessor } from 'kibana/public';
 
 import {
   EmbeddableFactoryDefinition,
-  ErrorEmbeddable,
   IContainer,
 } from '../../../../../../src/plugins/embeddable/public';
+import { HttpService } from '../../application/services/http_service';
+import { MlPluginStart, MlStartDependencies } from '../../plugin';
+import { MlDependencies } from '../../application/app';
 import {
   ANOMALY_SWIMLANE_EMBEDDABLE_TYPE,
-  AnomalySwimlaneEmbeddable,
   AnomalySwimlaneEmbeddableInput,
   AnomalySwimlaneEmbeddableServices,
-} from './anomaly_swimlane_embeddable';
-import { HttpService } from '../../application/services/http_service';
-import { AnomalyDetectorService } from '../../application/services/anomaly_detector_service';
-import { AnomalyTimelineService } from '../../application/services/anomaly_timeline_service';
-import { mlResultsServiceProvider } from '../../application/services/results_service';
-import { resolveAnomalySwimlaneUserInput } from './anomaly_swimlane_setup_flyout';
-import { mlApiServicesProvider } from '../../application/services/ml_api_service';
-import { MlPluginStart, MlStartDependencies } from '../../plugin';
-import { MlDependencies } from '../../application/app';
+} from '..';
 
 export class AnomalySwimlaneEmbeddableFactory
   implements EmbeddableFactoryDefinition<AnomalySwimlaneEmbeddableInput> {
@@ -50,6 +43,7 @@ export class AnomalySwimlaneEmbeddableFactory
     const [coreStart] = await this.getServices();
 
     try {
+      const { resolveAnomalySwimlaneUserInput } = await import('./anomaly_swimlane_setup_flyout');
       return await resolveAnomalySwimlaneUserInput(coreStart);
     } catch (e) {
       return Promise.reject();
@@ -59,6 +53,15 @@ export class AnomalySwimlaneEmbeddableFactory
   private async getServices(): Promise<AnomalySwimlaneEmbeddableServices> {
     const [coreStart, pluginsStart] = await this.getStartServices();
 
+    const { AnomalyDetectorService } = await import(
+      '../../application/services/anomaly_detector_service'
+    );
+    const { AnomalyTimelineService } = await import(
+      '../../application/services/anomaly_timeline_service'
+    );
+    const { mlApiServicesProvider } = await import('../../application/services/ml_api_service');
+    const { mlResultsServiceProvider } = await import('../../application/services/results_service');
+
     const httpService = new HttpService(coreStart.http);
     const anomalyDetectorService = new AnomalyDetectorService(httpService);
     const anomalyTimelineService = new AnomalyTimelineService(
@@ -77,8 +80,9 @@ export class AnomalySwimlaneEmbeddableFactory
   public async create(
     initialInput: AnomalySwimlaneEmbeddableInput,
     parent?: IContainer
-  ): Promise<AnomalySwimlaneEmbeddable | ErrorEmbeddable> {
+  ): Promise<any> {
     const services = await this.getServices();
+    const { AnomalySwimlaneEmbeddable } = await import('./anomaly_swimlane_embeddable');
     return new AnomalySwimlaneEmbeddable(initialInput, services, parent);
   }
 }

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

@@ -22,7 +22,7 @@ import {
 import { FormattedMessage } from '@kbn/i18n/react';
 import { i18n } from '@kbn/i18n';
 import { SWIMLANE_TYPE, SwimlaneType } from '../../application/explorer/explorer_constants';
-import { AnomalySwimlaneEmbeddableInput } from './anomaly_swimlane_embeddable';
+import { AnomalySwimlaneEmbeddableInput } from '..';
 
 export interface AnomalySwimlaneInitializerProps {
   defaultTitle: string;

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

@@ -16,12 +16,10 @@ import { AnomalySwimlaneInitializer } from './anomaly_swimlane_initializer';
 import { JobSelectorFlyout } from '../../application/components/job_selector/job_selector_flyout';
 import { AnomalyDetectorService } from '../../application/services/anomaly_detector_service';
 import { getInitialGroupsMap } from '../../application/components/job_selector/job_selector';
-import {
-  AnomalySwimlaneEmbeddableInput,
-  getDefaultPanelTitle,
-} from './anomaly_swimlane_embeddable';
+import { getDefaultPanelTitle } from './anomaly_swimlane_embeddable';
 import { getMlGlobalServices } from '../../application/app';
 import { HttpService } from '../../application/services/http_service';
+import { AnomalySwimlaneEmbeddableInput } from '..';
 
 export async function resolveAnomalySwimlaneUserInput(
   coreStart: CoreStart,

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

@@ -12,11 +12,7 @@ import {
 } from './embeddable_swim_lane_container';
 import { BehaviorSubject, Observable } from 'rxjs';
 import { I18nProvider } from '@kbn/i18n/react';
-import {
-  AnomalySwimlaneEmbeddable,
-  AnomalySwimlaneEmbeddableInput,
-  AnomalySwimlaneServices,
-} from './anomaly_swimlane_embeddable';
+import { AnomalySwimlaneEmbeddable } from './anomaly_swimlane_embeddable';
 import { CoreStart } from 'kibana/public';
 import { useSwimlaneInputResolver } from './swimlane_input_resolver';
 import { SWIMLANE_TYPE } from '../../application/explorer/explorer_constants';
@@ -25,6 +21,7 @@ import { MlDependencies } from '../../application/app';
 import { uiActionsPluginMock } from 'src/plugins/ui_actions/public/mocks';
 import { TriggerContract } from 'src/plugins/ui_actions/public/triggers';
 import { TriggerId } from 'src/plugins/ui_actions/public';
+import { AnomalySwimlaneEmbeddableInput, AnomalySwimlaneServices } from '..';
 
 jest.mock('./swimlane_input_resolver', () => ({
   useSwimlaneInputResolver: jest.fn(() => {

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

@@ -10,12 +10,7 @@ import { Observable } from 'rxjs';
 
 import { CoreStart } from 'kibana/public';
 import { FormattedMessage } from '@kbn/i18n/react';
-import {
-  AnomalySwimlaneEmbeddable,
-  AnomalySwimlaneEmbeddableInput,
-  AnomalySwimlaneEmbeddableOutput,
-  AnomalySwimlaneServices,
-} from './anomaly_swimlane_embeddable';
+import { IAnomalySwimlaneEmbeddable } from './anomaly_swimlane_embeddable';
 import { useSwimlaneInputResolver } from './swimlane_input_resolver';
 import { SwimlaneType } from '../../application/explorer/explorer_constants';
 import {
@@ -24,11 +19,16 @@ import {
 } from '../../application/explorer/swimlane_container';
 import { AppStateSelectedCells } from '../../application/explorer/explorer_utils';
 import { MlDependencies } from '../../application/app';
-import { SWIM_LANE_SELECTION_TRIGGER } from '../../ui_actions/triggers';
+import { SWIM_LANE_SELECTION_TRIGGER } from '../../ui_actions';
+import {
+  AnomalySwimlaneEmbeddableInput,
+  AnomalySwimlaneEmbeddableOutput,
+  AnomalySwimlaneServices,
+} from '..';
 
 export interface ExplorerSwimlaneContainerProps {
   id: string;
-  embeddableContext: AnomalySwimlaneEmbeddable;
+  embeddableContext: InstanceType<IAnomalySwimlaneEmbeddable>;
   embeddableInput: Observable<AnomalySwimlaneEmbeddableInput>;
   services: [CoreStart, MlDependencies, AnomalySwimlaneServices];
   refresh: Observable<any>;

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

@@ -5,4 +5,3 @@
  */
 
 export { AnomalySwimlaneEmbeddableFactory } from './anomaly_swimlane_embeddable_factory';
-export { ANOMALY_SWIMLANE_EMBEDDABLE_TYPE } from './anomaly_swimlane_embeddable';

x-pack/plugins/ml/public/embeddables/anomaly_swimlane/swimlane_input_resolver.test.ts

@@ -8,12 +8,9 @@ import { renderHook, act } from '@testing-library/react-hooks';
 import { processFilters, useSwimlaneInputResolver } from './swimlane_input_resolver';
 import { BehaviorSubject, Observable, of, Subject } from 'rxjs';
 import { SWIMLANE_TYPE } from '../../application/explorer/explorer_constants';
-import {
-  AnomalySwimlaneEmbeddableInput,
-  AnomalySwimlaneServices,
-} from './anomaly_swimlane_embeddable';
 import { CoreStart, IUiSettingsClient } from 'kibana/public';
 import { MlStartDependencies } from '../../plugin';
+import { AnomalySwimlaneEmbeddableInput, AnomalySwimlaneServices } from '..';
 
 describe('useSwimlaneInputResolver', () => {
   let embeddableInput: BehaviorSubject<Partial<AnomalySwimlaneEmbeddableInput>>;