Skip to content

Commit

Permalink
[ML] Fix initial plugin's bundle size (elastic#74047)
Browse files Browse the repository at this point in the history
* [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
  • Loading branch information
darnautov authored Aug 5, 2020
1 parent beb7b82 commit 8231b0c
Show file tree
Hide file tree
Showing 34 changed files with 180 additions and 176 deletions.
6 changes: 0 additions & 6 deletions x-pack/plugins/ml/public/application/_index.scss
Original file line number Diff line number Diff line change
@@ -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 {
Expand All @@ -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';
Expand Down
1 change: 1 addition & 0 deletions x-pack/plugins/ml/public/application/app.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
*/

import React, { FC } from 'react';
import './_index.scss';
import ReactDOM from 'react-dom';

import { AppMountParameters, CoreStart, HttpStart } from 'kibana/public';
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down

This file was deleted.

Original file line number Diff line number Diff line change
@@ -1 +1,4 @@
@import 'components/index';
// Kibana management page ML section
#kibanaManagementMLSection {
@import 'components/index';
}
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down
4 changes: 2 additions & 2 deletions x-pack/plugins/ml/public/application/util/string_utils.ts
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@
/*
* Contains utility functions for performing operations on Strings.
*/
import _ from 'lodash';
import d3 from 'd3';
import he from 'he';

Expand All @@ -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);
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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(),
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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> {
Expand All @@ -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();
Expand All @@ -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(
Expand All @@ -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);
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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(() => {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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>;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,4 +5,3 @@
*/

export { AnomalySwimlaneEmbeddableFactory } from './anomaly_swimlane_embeddable_factory';
export { ANOMALY_SWIMLANE_EMBEDDABLE_TYPE } from './anomaly_swimlane_embeddable';
Original file line number Diff line number Diff line change
Expand Up @@ -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>>;
Expand Down
Loading

0 comments on commit 8231b0c

Please sign in to comment.