[ML] Makes mlExplorerDashboardService independent of angularjs (#23874)

This is a refactor of mlExplorerDashboardService to make it available via import instead of angularjs dependency injection. This way it's also not necessary anymore to pass it on as a prop to ExplorerSwimlane, the component can now import the service by itself.

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
 ) {
 

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

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();
+  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();
 
-  this.init = function () {
+  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();

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;
 

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

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) {