[ML] Fix initial plugin's bundle size

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