From 8231b0ccfc12f9756dedf16ba7c36d8dcae0769a Mon Sep 17 00:00:00 2001 From: Dima Arnautov Date: Wed, 5 Aug 2020 13:18:29 +0200 Subject: [PATCH] [ML] Fix initial plugin's bundle size (#74047) * [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 --- .../plugins/ml/public/application/_index.scss | 6 -- x-pack/plugins/ml/public/application/app.tsx | 1 + .../components/data_grid/use_column_chart.tsx | 2 +- .../explorer/add_to_dashboard_control.tsx | 6 +- .../explorer/swimlane_container.tsx | 7 +- .../public/application/management/_index.scss | 1 - .../management/jobs_list/_index.scss | 5 +- .../application/management/jobs_list/index.ts | 1 + .../application/routing/routes/jobs_list.tsx | 2 +- .../routing/routes/timeseriesexplorer.tsx | 2 +- .../public/application/routing/use_refresh.ts | 2 +- .../public/application/util/string_utils.ts | 4 +- .../anomaly_swimlane_embeddable.tsx | 74 +++---------------- ...omaly_swimlane_embeddable_factory.test.tsx | 6 +- .../anomaly_swimlane_embeddable_factory.ts | 28 ++++--- .../anomaly_swimlane_initializer.tsx | 2 +- .../anomaly_swimlane_setup_flyout.tsx | 6 +- .../embeddable_swim_lane_container.test.tsx | 7 +- .../embeddable_swim_lane_container.tsx | 16 ++-- .../embeddables/anomaly_swimlane/index.ts | 1 - .../swimlane_input_resolver.test.ts | 5 +- .../swimlane_input_resolver.ts | 10 +-- .../ml/public/embeddables/constants.ts | 7 ++ x-pack/plugins/ml/public/embeddables/index.ts | 3 + x-pack/plugins/ml/public/embeddables/types.ts | 66 +++++++++++++++++ x-pack/plugins/ml/public/index.scss | 1 - x-pack/plugins/ml/public/index.ts | 1 - x-pack/plugins/ml/public/plugin.ts | 25 +++---- .../apply_influencer_filters_action.tsx | 7 +- .../ui_actions/apply_time_range_action.tsx | 7 +- .../ui_actions/edit_swimlane_panel_action.tsx | 16 ++-- x-pack/plugins/ml/public/ui_actions/index.ts | 10 ++- .../open_in_anomaly_explorer_action.tsx | 7 +- x-pack/plugins/ml/public/url_generator.ts | 12 ++- 34 files changed, 180 insertions(+), 176 deletions(-) delete mode 100644 x-pack/plugins/ml/public/application/management/_index.scss create mode 100644 x-pack/plugins/ml/public/embeddables/constants.ts create mode 100644 x-pack/plugins/ml/public/embeddables/types.ts delete mode 100644 x-pack/plugins/ml/public/index.scss diff --git a/x-pack/plugins/ml/public/application/_index.scss b/x-pack/plugins/ml/public/application/_index.scss index 65e914a1ac923..45b14543946c7 100644 --- a/x-pack/plugins/ml/public/application/_index.scss +++ b/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'; diff --git a/x-pack/plugins/ml/public/application/app.tsx b/x-pack/plugins/ml/public/application/app.tsx index cc3af9d7f4980..42c462fa9d869 100644 --- a/x-pack/plugins/ml/public/application/app.tsx +++ b/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'; diff --git a/x-pack/plugins/ml/public/application/components/data_grid/use_column_chart.tsx b/x-pack/plugins/ml/public/application/components/data_grid/use_column_chart.tsx index a762c44e243bf..6b5fbbb22120d 100644 --- a/x-pack/plugins/ml/public/application/components/data_grid/use_column_chart.tsx +++ b/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'; diff --git a/x-pack/plugins/ml/public/application/explorer/add_to_dashboard_control.tsx b/x-pack/plugins/ml/public/application/explorer/add_to_dashboard_control.tsx index 3ad749c9d0631..04ce7f79e1c02 100644 --- a/x-pack/plugins/ml/public/application/explorer/add_to_dashboard_control.tsx +++ b/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; diff --git a/x-pack/plugins/ml/public/application/explorer/swimlane_container.tsx b/x-pack/plugins/ml/public/application/explorer/swimlane_container.tsx index 51ea0f00d5f6a..0fefa71dea48b 100644 --- a/x-pack/plugins/ml/public/application/explorer/swimlane_container.tsx +++ b/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'; diff --git a/x-pack/plugins/ml/public/application/management/_index.scss b/x-pack/plugins/ml/public/application/management/_index.scss deleted file mode 100644 index e14df2d7c2039..0000000000000 --- a/x-pack/plugins/ml/public/application/management/_index.scss +++ /dev/null @@ -1 +0,0 @@ -@import 'jobs_list/index'; diff --git a/x-pack/plugins/ml/public/application/management/jobs_list/_index.scss b/x-pack/plugins/ml/public/application/management/jobs_list/_index.scss index 841415620d691..d4928a4126c1b 100644 --- a/x-pack/plugins/ml/public/application/management/jobs_list/_index.scss +++ b/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'; +} diff --git a/x-pack/plugins/ml/public/application/management/jobs_list/index.ts b/x-pack/plugins/ml/public/application/management/jobs_list/index.ts index b16f680a2a362..81190a412abc0 100644 --- a/x-pack/plugins/ml/public/application/management/jobs_list/index.ts +++ b/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); diff --git a/x-pack/plugins/ml/public/application/routing/routes/jobs_list.tsx b/x-pack/plugins/ml/public/application/routing/routes/jobs_list.tsx index db58b6a537e06..38a7900916ba8 100644 --- a/x-pack/plugins/ml/public/application/routing/routes/jobs_list.tsx +++ b/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'; diff --git a/x-pack/plugins/ml/public/application/routing/routes/timeseriesexplorer.tsx b/x-pack/plugins/ml/public/application/routing/routes/timeseriesexplorer.tsx index 6486db818e113..1f122ed18a851 100644 --- a/x-pack/plugins/ml/public/application/routing/routes/timeseriesexplorer.tsx +++ b/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'; diff --git a/x-pack/plugins/ml/public/application/routing/use_refresh.ts b/x-pack/plugins/ml/public/application/routing/use_refresh.ts index 539ce6f88a421..332677e3c5796 100644 --- a/x-pack/plugins/ml/public/application/routing/use_refresh.ts +++ b/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'; diff --git a/x-pack/plugins/ml/public/application/util/string_utils.ts b/x-pack/plugins/ml/public/application/util/string_utils.ts index 55dd16082a07c..88900c8b0ce71 100644 --- a/x-pack/plugins/ml/public/application/util/string_utils.ts +++ b/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); } diff --git a/x-pack/plugins/ml/public/embeddables/anomaly_swimlane/anomaly_swimlane_embeddable.tsx b/x-pack/plugins/ml/public/embeddables/anomaly_swimlane/anomaly_swimlane_embeddable.tsx index 9f96b73d67c57..e837cabf0b494 100644 --- a/x-pack/plugins/ml/public/embeddables/anomaly_swimlane/anomaly_swimlane_embeddable.tsx +++ b/x-pack/plugins/ml/public/embeddables/anomaly_swimlane/anomaly_swimlane_embeddable.tsx @@ -9,29 +9,17 @@ 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', { @@ -39,51 +27,7 @@ export const getDefaultPanelTitle = (jobIds: JobId[]) => 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; -} - -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, diff --git a/x-pack/plugins/ml/public/embeddables/anomaly_swimlane/anomaly_swimlane_embeddable_factory.test.tsx b/x-pack/plugins/ml/public/embeddables/anomaly_swimlane/anomaly_swimlane_embeddable_factory.test.tsx index 243369982ac1f..12813ad6277aa 100644 --- a/x-pack/plugins/ml/public/embeddables/anomaly_swimlane/anomaly_swimlane_embeddable_factory.test.tsx +++ b/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(), diff --git a/x-pack/plugins/ml/public/embeddables/anomaly_swimlane/anomaly_swimlane_embeddable_factory.ts b/x-pack/plugins/ml/public/embeddables/anomaly_swimlane/anomaly_swimlane_embeddable_factory.ts index 14fbf77544b21..9d2fd07e11be5 100644 --- a/x-pack/plugins/ml/public/embeddables/anomaly_swimlane/anomaly_swimlane_embeddable_factory.ts +++ b/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 { @@ -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 { 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 { + ): Promise { const services = await this.getServices(); + const { AnomalySwimlaneEmbeddable } = await import('./anomaly_swimlane_embeddable'); return new AnomalySwimlaneEmbeddable(initialInput, services, parent); } } diff --git a/x-pack/plugins/ml/public/embeddables/anomaly_swimlane/anomaly_swimlane_initializer.tsx b/x-pack/plugins/ml/public/embeddables/anomaly_swimlane/anomaly_swimlane_initializer.tsx index e5a13adca05db..026d4e225f45b 100644 --- a/x-pack/plugins/ml/public/embeddables/anomaly_swimlane/anomaly_swimlane_initializer.tsx +++ b/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; diff --git a/x-pack/plugins/ml/public/embeddables/anomaly_swimlane/anomaly_swimlane_setup_flyout.tsx b/x-pack/plugins/ml/public/embeddables/anomaly_swimlane/anomaly_swimlane_setup_flyout.tsx index 1ffdadb60aaa3..3a3597a7fa927 100644 --- a/x-pack/plugins/ml/public/embeddables/anomaly_swimlane/anomaly_swimlane_setup_flyout.tsx +++ b/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, diff --git a/x-pack/plugins/ml/public/embeddables/anomaly_swimlane/embeddable_swim_lane_container.test.tsx b/x-pack/plugins/ml/public/embeddables/anomaly_swimlane/embeddable_swim_lane_container.test.tsx index 23045834eae5f..ff621953cc577 100644 --- a/x-pack/plugins/ml/public/embeddables/anomaly_swimlane/embeddable_swim_lane_container.test.tsx +++ b/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(() => { diff --git a/x-pack/plugins/ml/public/embeddables/anomaly_swimlane/embeddable_swim_lane_container.tsx b/x-pack/plugins/ml/public/embeddables/anomaly_swimlane/embeddable_swim_lane_container.tsx index 8ee4e391fcdde..60681446ac7aa 100644 --- a/x-pack/plugins/ml/public/embeddables/anomaly_swimlane/embeddable_swim_lane_container.tsx +++ b/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; embeddableInput: Observable; services: [CoreStart, MlDependencies, AnomalySwimlaneServices]; refresh: Observable; diff --git a/x-pack/plugins/ml/public/embeddables/anomaly_swimlane/index.ts b/x-pack/plugins/ml/public/embeddables/anomaly_swimlane/index.ts index c0b02960d5144..ba2e1c88b3ea8 100644 --- a/x-pack/plugins/ml/public/embeddables/anomaly_swimlane/index.ts +++ b/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'; diff --git a/x-pack/plugins/ml/public/embeddables/anomaly_swimlane/swimlane_input_resolver.test.ts b/x-pack/plugins/ml/public/embeddables/anomaly_swimlane/swimlane_input_resolver.test.ts index a34955adebf62..258b72067cddd 100644 --- a/x-pack/plugins/ml/public/embeddables/anomaly_swimlane/swimlane_input_resolver.test.ts +++ b/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>; diff --git a/x-pack/plugins/ml/public/embeddables/anomaly_swimlane/swimlane_input_resolver.ts b/x-pack/plugins/ml/public/embeddables/anomaly_swimlane/swimlane_input_resolver.ts index f17c779a00252..6ddb1e954e57b 100644 --- a/x-pack/plugins/ml/public/embeddables/anomaly_swimlane/swimlane_input_resolver.ts +++ b/x-pack/plugins/ml/public/embeddables/anomaly_swimlane/swimlane_input_resolver.ts @@ -20,11 +20,6 @@ import { } from 'rxjs/operators'; import { CoreStart } from 'kibana/public'; import { TimeBuckets } from '../../application/util/time_buckets'; -import { - AnomalySwimlaneEmbeddableInput, - AnomalySwimlaneEmbeddableOutput, - AnomalySwimlaneServices, -} from './anomaly_swimlane_embeddable'; import { MlStartDependencies } from '../../plugin'; import { ANOMALY_SWIM_LANE_HARD_LIMIT, @@ -41,6 +36,11 @@ import { AnomalyDetectorService } from '../../application/services/anomaly_detec import { isViewBySwimLaneData } from '../../application/explorer/swimlane_container'; import { ViewMode } from '../../../../../../src/plugins/embeddable/public'; import { CONTROLLED_BY_SWIM_LANE_FILTER } from '../../ui_actions/apply_influencer_filters_action'; +import { + AnomalySwimlaneEmbeddableInput, + AnomalySwimlaneEmbeddableOutput, + AnomalySwimlaneServices, +} from '..'; const FETCH_RESULTS_DEBOUNCE_MS = 500; diff --git a/x-pack/plugins/ml/public/embeddables/constants.ts b/x-pack/plugins/ml/public/embeddables/constants.ts new file mode 100644 index 0000000000000..054cb8ba4b0bc --- /dev/null +++ b/x-pack/plugins/ml/public/embeddables/constants.ts @@ -0,0 +1,7 @@ +/* + * 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 const ANOMALY_SWIMLANE_EMBEDDABLE_TYPE = 'ml_anomaly_swimlane'; diff --git a/x-pack/plugins/ml/public/embeddables/index.ts b/x-pack/plugins/ml/public/embeddables/index.ts index db9f094d5721e..cc4bec0b67836 100644 --- a/x-pack/plugins/ml/public/embeddables/index.ts +++ b/x-pack/plugins/ml/public/embeddables/index.ts @@ -8,6 +8,9 @@ import { AnomalySwimlaneEmbeddableFactory } from './anomaly_swimlane'; import { MlCoreSetup } from '../plugin'; import { EmbeddableSetup } from '../../../../../src/plugins/embeddable/public'; +export * from './constants'; +export * from './types'; + export function registerEmbeddables(embeddable: EmbeddableSetup, core: MlCoreSetup) { const anomalySwimlaneEmbeddableFactory = new AnomalySwimlaneEmbeddableFactory( core.getStartServices diff --git a/x-pack/plugins/ml/public/embeddables/types.ts b/x-pack/plugins/ml/public/embeddables/types.ts new file mode 100644 index 0000000000000..93ec79d9b8310 --- /dev/null +++ b/x-pack/plugins/ml/public/embeddables/types.ts @@ -0,0 +1,66 @@ +/* + * 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 { 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 { + 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'; + +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 type AnomalySwimlaneEmbeddableInput = EmbeddableInput & AnomalySwimlaneEmbeddableCustomInput; + +export interface AnomalySwimlaneServices { + anomalyDetectorService: AnomalyDetectorService; + anomalyTimelineService: AnomalyTimelineService; +} + +export type AnomalySwimlaneEmbeddableServices = [ + CoreStart, + MlDependencies, + AnomalySwimlaneServices +]; + +export interface AnomalySwimlaneEmbeddableCustomOutput { + perPage?: number; + fromPage?: number; + interval?: number; +} + +export type AnomalySwimlaneEmbeddableOutput = EmbeddableOutput & + AnomalySwimlaneEmbeddableCustomOutput; + +export interface EditSwimlanePanelContext { + embeddable: IEmbeddable; +} + +export interface SwimLaneDrilldownContext extends EditSwimlanePanelContext { + /** + * Optional data provided by swim lane selection + */ + data?: AppStateSelectedCells; +} diff --git a/x-pack/plugins/ml/public/index.scss b/x-pack/plugins/ml/public/index.scss deleted file mode 100644 index 9bd47b6473372..0000000000000 --- a/x-pack/plugins/ml/public/index.scss +++ /dev/null @@ -1 +0,0 @@ -@import './application/index'; diff --git a/x-pack/plugins/ml/public/index.ts b/x-pack/plugins/ml/public/index.ts index 5a956651c86d8..80308977735d2 100755 --- a/x-pack/plugins/ml/public/index.ts +++ b/x-pack/plugins/ml/public/index.ts @@ -5,7 +5,6 @@ */ import { PluginInitializer, PluginInitializerContext } from 'kibana/public'; -import './index.scss'; import { MlPlugin, MlPluginSetup, diff --git a/x-pack/plugins/ml/public/plugin.ts b/x-pack/plugins/ml/public/plugin.ts index a8e1e804c2fe3..aa6163379f9c0 100644 --- a/x-pack/plugins/ml/public/plugin.ts +++ b/x-pack/plugins/ml/public/plugin.ts @@ -6,36 +6,35 @@ import { i18n } from '@kbn/i18n'; import { - Plugin, - CoreStart, - CoreSetup, AppMountParameters, + CoreSetup, + CoreStart, + Plugin, PluginInitializerContext, } from 'kibana/public'; import { BehaviorSubject } from 'rxjs'; import { take } from 'rxjs/operators'; import { ManagementSetup } from 'src/plugins/management/public'; -import { SharePluginSetup, SharePluginStart, UrlGeneratorState } from 'src/plugins/share/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 { EmbeddableSetup } from 'src/plugins/embeddable/public'; -import { AppStatus, AppUpdater } from '../../../../src/core/public'; +import { AppStatus, AppUpdater, DEFAULT_APP_CATEGORIES } from '../../../../src/core/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 { PLUGIN_ID, PLUGIN_ICON } from '../common/constants/app'; +import { PLUGIN_ICON, PLUGIN_ID } from '../common/constants/app'; import { registerFeature } from './register_feature'; -import { DEFAULT_APP_CATEGORIES } from '../../../../src/core/public'; -import { registerEmbeddables } from './embeddables'; import { UiActionsSetup, UiActionsStart } from '../../../../src/plugins/ui_actions/public'; import { registerMlUiActions } from './ui_actions'; import { KibanaLegacyStart } from '../../../../src/plugins/kibana_legacy/public'; -import { registerUrlGenerator, MlUrlGeneratorState, ML_APP_URL_GENERATOR } from './url_generator'; -import { isMlEnabled, isFullLicense } from '../common/license'; +import { registerUrlGenerator } from './url_generator'; +import { isFullLicense, isMlEnabled } from '../common/license'; +import { registerEmbeddables } from './embeddables'; export interface MlStartDependencies { data: DataPublicPluginStart; @@ -56,12 +55,6 @@ export interface MlSetupDependencies { share: SharePluginSetup; } -declare module '../../../../src/plugins/share/public' { - export interface UrlGeneratorStateMapping { - [ML_APP_URL_GENERATOR]: UrlGeneratorState; - } -} - export type MlCoreSetup = CoreSetup; export class MlPlugin implements Plugin { diff --git a/x-pack/plugins/ml/public/ui_actions/apply_influencer_filters_action.tsx b/x-pack/plugins/ml/public/ui_actions/apply_influencer_filters_action.tsx index 3af39993d39fd..9e50410751c37 100644 --- a/x-pack/plugins/ml/public/ui_actions/apply_influencer_filters_action.tsx +++ b/x-pack/plugins/ml/public/ui_actions/apply_influencer_filters_action.tsx @@ -6,13 +6,10 @@ import { i18n } from '@kbn/i18n'; import { ActionContextMapping, createAction } from '../../../../../src/plugins/ui_actions/public'; -import { - AnomalySwimlaneEmbeddable, - SwimLaneDrilldownContext, -} from '../embeddables/anomaly_swimlane/anomaly_swimlane_embeddable'; import { MlCoreSetup } from '../plugin'; import { SWIMLANE_TYPE, VIEW_BY_JOB_LABEL } from '../application/explorer/explorer_constants'; import { Filter, FilterStateStore } from '../../../../../src/plugins/data/common'; +import { ANOMALY_SWIMLANE_EMBEDDABLE_TYPE, SwimLaneDrilldownContext } from '../embeddables'; export const APPLY_INFLUENCER_FILTERS_ACTION = 'applyInfluencerFiltersAction'; @@ -73,7 +70,7 @@ export function createApplyInfluencerFiltersAction( async isCompatible({ embeddable, data }: SwimLaneDrilldownContext) { // Only compatible with view by influencer swim lanes and single selection return ( - embeddable instanceof AnomalySwimlaneEmbeddable && + embeddable.type === ANOMALY_SWIMLANE_EMBEDDABLE_TYPE && data !== undefined && data.type === SWIMLANE_TYPE.VIEW_BY && data.viewByFieldName !== VIEW_BY_JOB_LABEL && diff --git a/x-pack/plugins/ml/public/ui_actions/apply_time_range_action.tsx b/x-pack/plugins/ml/public/ui_actions/apply_time_range_action.tsx index ec59ba20acf98..325e903de0e2d 100644 --- a/x-pack/plugins/ml/public/ui_actions/apply_time_range_action.tsx +++ b/x-pack/plugins/ml/public/ui_actions/apply_time_range_action.tsx @@ -7,11 +7,8 @@ import { i18n } from '@kbn/i18n'; import moment from 'moment'; import { ActionContextMapping, createAction } from '../../../../../src/plugins/ui_actions/public'; -import { - AnomalySwimlaneEmbeddable, - SwimLaneDrilldownContext, -} from '../embeddables/anomaly_swimlane/anomaly_swimlane_embeddable'; import { MlCoreSetup } from '../plugin'; +import { ANOMALY_SWIMLANE_EMBEDDABLE_TYPE, SwimLaneDrilldownContext } from '../embeddables'; export const APPLY_TIME_RANGE_SELECTION_ACTION = 'applyTimeRangeSelectionAction'; @@ -52,7 +49,7 @@ export function createApplyTimeRangeSelectionAction( }); }, async isCompatible({ embeddable, data }: SwimLaneDrilldownContext) { - return embeddable instanceof AnomalySwimlaneEmbeddable && data !== undefined; + return embeddable.type === ANOMALY_SWIMLANE_EMBEDDABLE_TYPE && data !== undefined; }, }); } diff --git a/x-pack/plugins/ml/public/ui_actions/edit_swimlane_panel_action.tsx b/x-pack/plugins/ml/public/ui_actions/edit_swimlane_panel_action.tsx index cfd90f92e3238..c40d1e175ec77 100644 --- a/x-pack/plugins/ml/public/ui_actions/edit_swimlane_panel_action.tsx +++ b/x-pack/plugins/ml/public/ui_actions/edit_swimlane_panel_action.tsx @@ -6,13 +6,9 @@ import { i18n } from '@kbn/i18n'; import { ActionContextMapping, createAction } from '../../../../../src/plugins/ui_actions/public'; -import { - AnomalySwimlaneEmbeddable, - EditSwimlanePanelContext, -} from '../embeddables/anomaly_swimlane/anomaly_swimlane_embeddable'; -import { resolveAnomalySwimlaneUserInput } from '../embeddables/anomaly_swimlane/anomaly_swimlane_setup_flyout'; import { ViewMode } from '../../../../../src/plugins/embeddable/public'; import { MlCoreSetup } from '../plugin'; +import { ANOMALY_SWIMLANE_EMBEDDABLE_TYPE, EditSwimlanePanelContext } from '../embeddables'; export const EDIT_SWIMLANE_PANEL_ACTION = 'editSwimlanePanelAction'; @@ -27,7 +23,7 @@ export function createEditSwimlanePanelAction(getStartServices: MlCoreSetup['get i18n.translate('xpack.ml.actions.editSwimlaneTitle', { defaultMessage: 'Edit swim lane', }), - execute: async ({ embeddable }: EditSwimlanePanelContext) => { + async execute({ embeddable }: EditSwimlanePanelContext) { if (!embeddable) { throw new Error('Not possible to execute an action without the embeddable context'); } @@ -35,15 +31,19 @@ export function createEditSwimlanePanelAction(getStartServices: MlCoreSetup['get const [coreStart] = await getStartServices(); try { + const { resolveAnomalySwimlaneUserInput } = await import( + '../embeddables/anomaly_swimlane/anomaly_swimlane_setup_flyout' + ); + const result = await resolveAnomalySwimlaneUserInput(coreStart, embeddable.getInput()); embeddable.updateInput(result); } catch (e) { return Promise.reject(); } }, - isCompatible: async ({ embeddable }: EditSwimlanePanelContext) => { + async isCompatible({ embeddable }: EditSwimlanePanelContext) { return ( - embeddable instanceof AnomalySwimlaneEmbeddable && + embeddable.type === ANOMALY_SWIMLANE_EMBEDDABLE_TYPE && embeddable.getInput().viewMode === ViewMode.EDIT ); }, diff --git a/x-pack/plugins/ml/public/ui_actions/index.ts b/x-pack/plugins/ml/public/ui_actions/index.ts index b7262a330b310..437a38acf6f8b 100644 --- a/x-pack/plugins/ml/public/ui_actions/index.ts +++ b/x-pack/plugins/ml/public/ui_actions/index.ts @@ -13,7 +13,6 @@ import { createOpenInExplorerAction, OPEN_IN_ANOMALY_EXPLORER_ACTION, } from './open_in_anomaly_explorer_action'; -import { EditSwimlanePanelContext } from '../embeddables/anomaly_swimlane/anomaly_swimlane_embeddable'; import { UiActionsSetup } from '../../../../../src/plugins/ui_actions/public'; import { MlPluginStart, MlStartDependencies } from '../plugin'; import { CONTEXT_MENU_TRIGGER } from '../../../../../src/plugins/embeddable/public'; @@ -22,11 +21,18 @@ import { createApplyInfluencerFiltersAction, } from './apply_influencer_filters_action'; import { SWIM_LANE_SELECTION_TRIGGER, swimLaneSelectionTrigger } from './triggers'; -import { SwimLaneDrilldownContext } from '../embeddables/anomaly_swimlane/anomaly_swimlane_embeddable'; import { APPLY_TIME_RANGE_SELECTION_ACTION, createApplyTimeRangeSelectionAction, } from './apply_time_range_action'; +import { EditSwimlanePanelContext, SwimLaneDrilldownContext } from '../embeddables'; + +export { APPLY_TIME_RANGE_SELECTION_ACTION } from './apply_time_range_action'; +export { EDIT_SWIMLANE_PANEL_ACTION } from './edit_swimlane_panel_action'; +export { APPLY_INFLUENCER_FILTERS_ACTION } from './apply_influencer_filters_action'; +export { OPEN_IN_ANOMALY_EXPLORER_ACTION } from './open_in_anomaly_explorer_action'; + +export { SWIM_LANE_SELECTION_TRIGGER } from './triggers'; /** * Register ML UI actions diff --git a/x-pack/plugins/ml/public/ui_actions/open_in_anomaly_explorer_action.tsx b/x-pack/plugins/ml/public/ui_actions/open_in_anomaly_explorer_action.tsx index 211840467e38c..e18f593145f9c 100644 --- a/x-pack/plugins/ml/public/ui_actions/open_in_anomaly_explorer_action.tsx +++ b/x-pack/plugins/ml/public/ui_actions/open_in_anomaly_explorer_action.tsx @@ -6,12 +6,9 @@ import { i18n } from '@kbn/i18n'; import { ActionContextMapping, createAction } from '../../../../../src/plugins/ui_actions/public'; -import { - AnomalySwimlaneEmbeddable, - SwimLaneDrilldownContext, -} from '../embeddables/anomaly_swimlane/anomaly_swimlane_embeddable'; import { MlCoreSetup } from '../plugin'; import { ML_APP_URL_GENERATOR } from '../url_generator'; +import { ANOMALY_SWIMLANE_EMBEDDABLE_TYPE, SwimLaneDrilldownContext } from '../embeddables'; export const OPEN_IN_ANOMALY_EXPLORER_ACTION = 'openInAnomalyExplorerAction'; @@ -60,7 +57,7 @@ export function createOpenInExplorerAction(getStartServices: MlCoreSetup['getSta await application.navigateToUrl(anomalyExplorerUrl!); }, async isCompatible({ embeddable }: SwimLaneDrilldownContext) { - return embeddable instanceof AnomalySwimlaneEmbeddable; + return embeddable.type === ANOMALY_SWIMLANE_EMBEDDABLE_TYPE; }, }); } diff --git a/x-pack/plugins/ml/public/url_generator.ts b/x-pack/plugins/ml/public/url_generator.ts index b7cf64159a827..4e08c57c0b2e0 100644 --- a/x-pack/plugins/ml/public/url_generator.ts +++ b/x-pack/plugins/ml/public/url_generator.ts @@ -5,13 +5,23 @@ */ import { CoreSetup } from 'kibana/public'; -import { SharePluginSetup, UrlGeneratorsDefinition } from '../../../../src/plugins/share/public'; +import { + SharePluginSetup, + UrlGeneratorsDefinition, + UrlGeneratorState, +} from '../../../../src/plugins/share/public'; import { TimeRange } from '../../../../src/plugins/data/public'; import { setStateToKbnUrl } from '../../../../src/plugins/kibana_utils/public'; import { JobId } from '../../reporting/common/types'; import { ExplorerAppState } from './application/explorer/explorer_dashboard_service'; import { MlStartDependencies } from './plugin'; +declare module '../../../../src/plugins/share/public' { + export interface UrlGeneratorStateMapping { + [ML_APP_URL_GENERATOR]: UrlGeneratorState; + } +} + export const ML_APP_URL_GENERATOR = 'ML_APP_URL_GENERATOR'; export interface ExplorerUrlState {