diff --git a/x-pack/plugins/ml/public/explorer/explorer_charts/explorer_charts_container_directive.js b/x-pack/plugins/ml/public/explorer/explorer_charts/explorer_charts_container_directive.js index 45f2ae31cac2e..8fdabc6f503bd 100644 --- a/x-pack/plugins/ml/public/explorer/explorer_charts/explorer_charts_container_directive.js +++ b/x-pack/plugins/ml/public/explorer/explorer_charts/explorer_charts_container_directive.js @@ -20,12 +20,12 @@ import $ from 'jquery'; import { ExplorerChartsContainer } from './explorer_charts_container'; import { explorerChartsContainerServiceFactory } from './explorer_charts_container_service'; import { mlChartTooltipService } from '../../components/chart_tooltip/chart_tooltip_service'; +import { mlExplorerDashboardService } from '../explorer_dashboard_service'; import { uiModules } from 'ui/modules'; const module = uiModules.get('apps/ml'); module.directive('mlExplorerChartsContainer', function ( - mlExplorerDashboardService, mlSelectSeverityService ) { diff --git a/x-pack/plugins/ml/public/explorer/explorer_controller.js b/x-pack/plugins/ml/public/explorer/explorer_controller.js index 83e09a332c332..a2bd37981bc82 100644 --- a/x-pack/plugins/ml/public/explorer/explorer_controller.js +++ b/x-pack/plugins/ml/public/explorer/explorer_controller.js @@ -34,6 +34,7 @@ import { loadIndexPatterns, getIndexPatterns } from 'plugins/ml/util/index_utils import { refreshIntervalWatcher } from 'plugins/ml/util/refresh_interval_watcher'; import { IntervalHelperProvider, getBoundsRoundedToInterval } from 'plugins/ml/util/ml_time_buckets'; import { ml } from 'plugins/ml/services/ml_api_service'; +import { mlExplorerDashboardService } from './explorer_dashboard_service'; import { mlResultsService } from 'plugins/ml/services/results_service'; import { mlJobService } from 'plugins/ml/services/job_service'; import { mlFieldFormatService } from 'plugins/ml/services/field_format_service'; @@ -76,7 +77,6 @@ module.controller('MlExplorerController', function ( AppState, Private, mlCheckboxShowChartsService, - mlExplorerDashboardService, mlSelectLimitService, mlSelectIntervalService, mlSelectSeverityService) { @@ -360,7 +360,6 @@ module.controller('MlExplorerController', function ( MlTimeBuckets: TimeBuckets, swimlaneData: getSwimlaneData(swimlaneType), swimlaneType, - mlExplorerDashboardService, selection: $scope.appState.mlExplorerSwimlane }; } diff --git a/x-pack/plugins/ml/public/explorer/explorer_dashboard_service.js b/x-pack/plugins/ml/public/explorer/explorer_dashboard_service.js index ea6dcb0faab2b..14a0a9d5efdfd 100644 --- a/x-pack/plugins/ml/public/explorer/explorer_dashboard_service.js +++ b/x-pack/plugins/ml/public/explorer/explorer_dashboard_service.js @@ -11,23 +11,22 @@ * components in the Explorer dashboard. */ -import { uiModules } from 'ui/modules'; -const module = uiModules.get('apps/ml'); - import { listenerFactoryProvider } from 'plugins/ml/factories/listener_factory'; -module.service('mlExplorerDashboardService', function () { - this.allowCellRangeSelection = false; +function mlExplorerDashboardServiceFactory() { + const service = { + allowCellRangeSelection: false + }; const listenerFactory = listenerFactoryProvider(); - const dragSelect = this.dragSelect = listenerFactory(); - const swimlaneCellClick = this.swimlaneCellClick = listenerFactory(); - const swimlaneDataChange = this.swimlaneDataChange = listenerFactory(); - const swimlaneRenderDone = this.swimlaneRenderDone = listenerFactory(); - const chartsInitDone = this.chartsInitDone = listenerFactory(); - this.anomalyDataChange = listenerFactory(); - - this.init = function () { + const dragSelect = service.dragSelect = listenerFactory(); + const swimlaneCellClick = service.swimlaneCellClick = listenerFactory(); + const swimlaneDataChange = service.swimlaneDataChange = listenerFactory(); + const swimlaneRenderDone = service.swimlaneRenderDone = listenerFactory(); + const chartsInitDone = service.chartsInitDone = listenerFactory(); + service.anomalyDataChange = listenerFactory(); + + service.init = function () { // Clear out any old listeners. dragSelect.unwatchAll(); swimlaneCellClick.unwatchAll(); @@ -36,4 +35,7 @@ module.service('mlExplorerDashboardService', function () { chartsInitDone.unwatchAll(); }; -}); + return service; +} + +export const mlExplorerDashboardService = mlExplorerDashboardServiceFactory(); diff --git a/x-pack/plugins/ml/public/explorer/explorer_swimlane.js b/x-pack/plugins/ml/public/explorer/explorer_swimlane.js index 223ced53acbea..29b36efee0d0c 100644 --- a/x-pack/plugins/ml/public/explorer/explorer_swimlane.js +++ b/x-pack/plugins/ml/public/explorer/explorer_swimlane.js @@ -23,6 +23,7 @@ import { numTicksForDateFormat } from '../util/chart_utils'; import { getSeverityColor } from '../../common/util/anomaly_utils'; import { mlEscape } from '../util/string_utils'; import { mlChartTooltipService } from '../components/chart_tooltip/chart_tooltip_service'; +import { mlExplorerDashboardService } from './explorer_dashboard_service'; import { DRAG_SELECT_ACTION } from './explorer_constants'; export class ExplorerSwimlane extends React.Component { @@ -33,7 +34,6 @@ export class ExplorerSwimlane extends React.Component { laneLabels: PropTypes.array.isRequired }).isRequired, swimlaneType: PropTypes.string.isRequired, - mlExplorerDashboardService: PropTypes.object.isRequired, selection: PropTypes.object } @@ -43,7 +43,6 @@ export class ExplorerSwimlane extends React.Component { cellMouseoverActive = true; componentWillUnmount() { - const { mlExplorerDashboardService } = this.props; mlExplorerDashboardService.dragSelect.unwatch(this.boundDragSelectListener); const element = d3.select(this.rootNode); element.html(''); @@ -51,7 +50,6 @@ export class ExplorerSwimlane extends React.Component { componentDidMount() { const element = d3.select(this.rootNode.parentNode); - const { mlExplorerDashboardService } = this.props; // Consider the setting to support to select a range of cells if (!mlExplorerDashboardService.allowCellRangeSelection) { @@ -124,7 +122,6 @@ export class ExplorerSwimlane extends React.Component { selectCell(cellsToSelect, { laneLabels, bucketScore, times }) { const { selection, - mlExplorerDashboardService, swimlaneData, swimlaneType } = this.props; @@ -222,7 +219,6 @@ export class ExplorerSwimlane extends React.Component { MlTimeBuckets, swimlaneData, swimlaneType, - mlExplorerDashboardService, selection } = this.props; diff --git a/x-pack/plugins/ml/public/explorer/explorer_swimlane.test.js b/x-pack/plugins/ml/public/explorer/explorer_swimlane.test.js index 723a8e858dcff..fecaaaec41344 100644 --- a/x-pack/plugins/ml/public/explorer/explorer_swimlane.test.js +++ b/x-pack/plugins/ml/public/explorer/explorer_swimlane.test.js @@ -10,6 +10,7 @@ import moment from 'moment-timezone'; import { mount } from 'enzyme'; import React from 'react'; +import { mlExplorerDashboardService } from './explorer_dashboard_service'; import { ExplorerSwimlane } from './explorer_swimlane'; jest.mock('ui/chrome', () => ({ @@ -19,8 +20,8 @@ jest.mock('ui/chrome', () => ({ }), })); -function getExplorerSwimlaneMocks() { - const mlExplorerDashboardService = { +jest.mock('./explorer_dashboard_service', () => ({ + mlExplorerDashboardService: { allowCellRangeSelection: false, dragSelect: { watch: jest.fn(), @@ -32,8 +33,10 @@ function getExplorerSwimlaneMocks() { swimlaneRenderDone: { changed: jest.fn() } - }; + } +})); +function getExplorerSwimlaneMocks() { const MlTimeBucketsMethods = { setInterval: jest.fn(), getScaledDateFormat: jest.fn() @@ -44,7 +47,6 @@ function getExplorerSwimlaneMocks() { const swimlaneData = { laneLabels: [] }; return { - mlExplorerDashboardService, MlTimeBuckets, swimlaneData }; @@ -72,7 +74,6 @@ describe('ExplorerSwimlane', () => { MlTimeBuckets={mocks.MlTimeBuckets} swimlaneData={mocks.swimlaneData} swimlaneType="overall" - mlExplorerDashboardService={mocks.mlExplorerDashboardService} />); expect(wrapper.html()).toBe( @@ -81,12 +82,12 @@ describe('ExplorerSwimlane', () => { ); // test calls to mock functions - expect(mocks.mlExplorerDashboardService.swimlaneRenderDone.changed.mock.calls).toHaveLength(1); - expect(mocks.mlExplorerDashboardService.dragSelect.watch.mock.calls).toHaveLength(1); - expect(mocks.mlExplorerDashboardService.dragSelect.unwatch.mock.calls).toHaveLength(0); - expect(mocks.mlExplorerDashboardService.swimlaneCellClick.changed.mock.calls).toHaveLength(0); - expect(mocks.MlTimeBuckets.mockMethods.setInterval.mock.calls).toHaveLength(1); - expect(mocks.MlTimeBuckets.mockMethods.getScaledDateFormat.mock.calls).toHaveLength(1); + expect(mlExplorerDashboardService.swimlaneRenderDone.changed.mock.calls.length).toBeGreaterThanOrEqual(1); + expect(mlExplorerDashboardService.dragSelect.watch.mock.calls.length).toBeGreaterThanOrEqual(1); + expect(mlExplorerDashboardService.dragSelect.unwatch.mock.calls).toHaveLength(0); + expect(mlExplorerDashboardService.swimlaneCellClick.changed.mock.calls).toHaveLength(0); + expect(mocks.MlTimeBuckets.mockMethods.setInterval.mock.calls.length).toBeGreaterThanOrEqual(1); + expect(mocks.MlTimeBuckets.mockMethods.getScaledDateFormat.mock.calls.length).toBeGreaterThanOrEqual(1); }); test('Overall swimlane', () => { @@ -97,17 +98,16 @@ describe('ExplorerSwimlane', () => { MlTimeBuckets={mocks.MlTimeBuckets} swimlaneData={mockOverallSwimlaneData} swimlaneType="overall" - mlExplorerDashboardService={mocks.mlExplorerDashboardService} />); expect(wrapper.html()).toMatchSnapshot(); // test calls to mock functions - expect(mocks.mlExplorerDashboardService.swimlaneRenderDone.changed.mock.calls).toHaveLength(1); - expect(mocks.mlExplorerDashboardService.dragSelect.watch.mock.calls).toHaveLength(1); - expect(mocks.mlExplorerDashboardService.dragSelect.unwatch.mock.calls).toHaveLength(0); - expect(mocks.mlExplorerDashboardService.swimlaneCellClick.changed.mock.calls).toHaveLength(0); - expect(mocks.MlTimeBuckets.mockMethods.setInterval.mock.calls).toHaveLength(1); - expect(mocks.MlTimeBuckets.mockMethods.getScaledDateFormat.mock.calls).toHaveLength(1); + expect(mlExplorerDashboardService.swimlaneRenderDone.changed.mock.calls.length).toBeGreaterThanOrEqual(1); + expect(mlExplorerDashboardService.dragSelect.watch.mock.calls.length).toBeGreaterThanOrEqual(1); + expect(mlExplorerDashboardService.dragSelect.unwatch.mock.calls).toHaveLength(0); + expect(mlExplorerDashboardService.swimlaneCellClick.changed.mock.calls).toHaveLength(0); + expect(mocks.MlTimeBuckets.mockMethods.setInterval.mock.calls.length).toBeGreaterThanOrEqual(1); + expect(mocks.MlTimeBuckets.mockMethods.getScaledDateFormat.mock.calls.length).toBeGreaterThanOrEqual(1); }); }); diff --git a/x-pack/plugins/ml/public/explorer/explorer_swimlane_directive.js b/x-pack/plugins/ml/public/explorer/explorer_swimlane_directive.js index d57e829c3bdd4..e93bccc6b1537 100644 --- a/x-pack/plugins/ml/public/explorer/explorer_swimlane_directive.js +++ b/x-pack/plugins/ml/public/explorer/explorer_swimlane_directive.js @@ -18,7 +18,9 @@ import { ExplorerSwimlane } from './explorer_swimlane'; import { uiModules } from 'ui/modules'; const module = uiModules.get('apps/ml'); -module.directive('mlExplorerSwimlane', function (mlExplorerDashboardService) { +import { mlExplorerDashboardService } from './explorer_dashboard_service'; + +module.directive('mlExplorerSwimlane', function () { function link(scope, element) { function swimlaneDataChangeListener(props) {