From a104e5ab0ee939b4d7f9cc4511a18dcb822c9dbf Mon Sep 17 00:00:00 2001
From: Paul Tavares <56442535+paul-tavares@users.noreply.github.com>
Date: Wed, 24 Jun 2020 15:16:15 -0400
Subject: [PATCH 1/8] [Ingest Manager] Support registration of server side
 callbacks for Create Datasource API (#69428)

* Ingest: Expose `registerExternalCallback()` method out of Ingest server `start` lifecycle
* Ingest: Add support for External Callbacks on REST `createDatasourceHandler()`
* Ingest: expose DatasourceServices to Plugin start interface
* Endpoint: Added Endpoint Ingest handler for Create Datasources
  - Also moved the temporary logic from the middleware
    to the handler (still temporary)

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
---
 x-pack/plugins/ingest_manager/server/index.ts |   3 +
 x-pack/plugins/ingest_manager/server/mocks.ts |  36 ++
 .../plugins/ingest_manager/server/plugin.ts   |  26 +-
 .../datasource/datasource_handlers.test.ts    | 332 ++++++++++++++++++
 .../server/routes/datasource/handlers.ts      |  41 ++-
 .../server/services/app_context.ts            |  20 +-
 .../server/services/datasource.ts             |   1 +
 .../policy/store/policy_details/middleware.ts |  18 -
 .../endpoint/alerts/handlers/alerts.test.ts   |   6 +-
 .../endpoint/endpoint_app_context_services.ts |  13 +-
 .../server/endpoint/ingest_integration.ts     |  49 +++
 .../server/endpoint/mocks.ts                  |  25 +-
 .../endpoint/routes/metadata/metadata.test.ts |  17 +-
 .../endpoint/routes/policy/handlers.test.ts   |  12 +-
 .../security_solution/server/plugin.ts        |   2 +
 15 files changed, 553 insertions(+), 48 deletions(-)
 create mode 100644 x-pack/plugins/ingest_manager/server/mocks.ts
 create mode 100644 x-pack/plugins/ingest_manager/server/routes/datasource/datasource_handlers.test.ts
 create mode 100644 x-pack/plugins/security_solution/server/endpoint/ingest_integration.ts

diff --git a/x-pack/plugins/ingest_manager/server/index.ts b/x-pack/plugins/ingest_manager/server/index.ts
index f6b2d7ccc6d4..1e9011c9dfe4 100644
--- a/x-pack/plugins/ingest_manager/server/index.ts
+++ b/x-pack/plugins/ingest_manager/server/index.ts
@@ -11,6 +11,7 @@ export {
   IngestManagerSetupContract,
   IngestManagerSetupDeps,
   IngestManagerStartContract,
+  ExternalCallback,
 } from './plugin';
 
 export const config = {
@@ -42,6 +43,8 @@ export const config = {
 
 export type IngestManagerConfigType = TypeOf<typeof config.schema>;
 
+export { DatasourceServiceInterface } from './services/datasource';
+
 export const plugin = (initializerContext: PluginInitializerContext) => {
   return new IngestManagerPlugin(initializerContext);
 };
diff --git a/x-pack/plugins/ingest_manager/server/mocks.ts b/x-pack/plugins/ingest_manager/server/mocks.ts
new file mode 100644
index 000000000000..3bdef14dc85a
--- /dev/null
+++ b/x-pack/plugins/ingest_manager/server/mocks.ts
@@ -0,0 +1,36 @@
+/*
+ * 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 { loggingSystemMock, savedObjectsServiceMock } from 'src/core/server/mocks';
+import { IngestManagerAppContext } from './plugin';
+import { encryptedSavedObjectsMock } from '../../encrypted_saved_objects/server/mocks';
+import { securityMock } from '../../security/server/mocks';
+import { DatasourceServiceInterface } from './services/datasource';
+
+export const createAppContextStartContractMock = (): IngestManagerAppContext => {
+  return {
+    encryptedSavedObjectsStart: encryptedSavedObjectsMock.createStart(),
+    savedObjects: savedObjectsServiceMock.createStartContract(),
+    security: securityMock.createSetup(),
+    logger: loggingSystemMock.create().get(),
+    isProductionMode: true,
+    kibanaVersion: '8.0.0',
+  };
+};
+
+export const createDatasourceServiceMock = () => {
+  return {
+    assignPackageStream: jest.fn(),
+    buildDatasourceFromPackage: jest.fn(),
+    bulkCreate: jest.fn(),
+    create: jest.fn(),
+    delete: jest.fn(),
+    get: jest.fn(),
+    getByIDs: jest.fn(),
+    list: jest.fn(),
+    update: jest.fn(),
+  } as jest.Mocked<DatasourceServiceInterface>;
+};
diff --git a/x-pack/plugins/ingest_manager/server/plugin.ts b/x-pack/plugins/ingest_manager/server/plugin.ts
index fb1c218e1545..e060eb5e8068 100644
--- a/x-pack/plugins/ingest_manager/server/plugin.ts
+++ b/x-pack/plugins/ingest_manager/server/plugin.ts
@@ -45,13 +45,14 @@ import {
   registerSettingsRoutes,
   registerAppRoutes,
 } from './routes';
-import { IngestManagerConfigType } from '../common';
+import { IngestManagerConfigType, NewDatasource } from '../common';
 import {
   appContextService,
   licenseService,
   ESIndexPatternSavedObjectService,
   ESIndexPatternService,
   AgentService,
+  datasourceService,
 } from './services';
 import { getAgentStatusById } from './services/agents';
 import { CloudSetup } from '../../cloud/server';
@@ -92,12 +93,31 @@ const allSavedObjectTypes = [
   ENROLLMENT_API_KEYS_SAVED_OBJECT_TYPE,
 ];
 
+/**
+ * Callbacks supported by the Ingest plugin
+ */
+export type ExternalCallback = [
+  'datasourceCreate',
+  (newDatasource: NewDatasource) => Promise<NewDatasource>
+];
+
+export type ExternalCallbacksStorage = Map<ExternalCallback[0], Set<ExternalCallback[1]>>;
+
 /**
  * Describes public IngestManager plugin contract returned at the `startup` stage.
  */
 export interface IngestManagerStartContract {
   esIndexPatternService: ESIndexPatternService;
   agentService: AgentService;
+  /**
+   * Services for Ingest's Datasources
+   */
+  datasourceService: typeof datasourceService;
+  /**
+   * Register callbacks for inclusion in ingest API processing
+   * @param args
+   */
+  registerExternalCallback: (...args: ExternalCallback) => void;
 }
 
 export class IngestManagerPlugin
@@ -237,6 +257,10 @@ export class IngestManagerPlugin
       agentService: {
         getAgentStatusById,
       },
+      datasourceService,
+      registerExternalCallback: (...args: ExternalCallback) => {
+        return appContextService.addExternalCallback(...args);
+      },
     };
   }
 
diff --git a/x-pack/plugins/ingest_manager/server/routes/datasource/datasource_handlers.test.ts b/x-pack/plugins/ingest_manager/server/routes/datasource/datasource_handlers.test.ts
new file mode 100644
index 000000000000..07cbeb8b2cec
--- /dev/null
+++ b/x-pack/plugins/ingest_manager/server/routes/datasource/datasource_handlers.test.ts
@@ -0,0 +1,332 @@
+/*
+ * 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 { httpServerMock, httpServiceMock } from 'src/core/server/mocks';
+import { IRouter, KibanaRequest, Logger, RequestHandler, RouteConfig } from 'kibana/server';
+import { registerRoutes } from './index';
+import { DATASOURCE_API_ROUTES } from '../../../common/constants';
+import { xpackMocks } from '../../../../../mocks';
+import { appContextService } from '../../services';
+import { createAppContextStartContractMock } from '../../mocks';
+import { DatasourceServiceInterface, ExternalCallback } from '../..';
+import { CreateDatasourceRequestSchema } from '../../types/rest_spec';
+import { datasourceService } from '../../services';
+
+const datasourceServiceMock = datasourceService as jest.Mocked<DatasourceServiceInterface>;
+
+jest.mock('../../services/datasource', (): {
+  datasourceService: jest.Mocked<DatasourceServiceInterface>;
+} => {
+  return {
+    datasourceService: {
+      assignPackageStream: jest.fn((packageInfo, dataInputs) => Promise.resolve(dataInputs)),
+      buildDatasourceFromPackage: jest.fn(),
+      bulkCreate: jest.fn(),
+      create: jest.fn((soClient, newData) =>
+        Promise.resolve({
+          ...newData,
+          id: '1',
+          revision: 1,
+          updated_at: new Date().toISOString(),
+          updated_by: 'elastic',
+          created_at: new Date().toISOString(),
+          created_by: 'elastic',
+        })
+      ),
+      delete: jest.fn(),
+      get: jest.fn(),
+      getByIDs: jest.fn(),
+      list: jest.fn(),
+      update: jest.fn(),
+    },
+  };
+});
+
+jest.mock('../../services/epm/packages', () => {
+  return {
+    ensureInstalledPackage: jest.fn(() => Promise.resolve()),
+    getPackageInfo: jest.fn(() => Promise.resolve()),
+  };
+});
+
+describe('When calling datasource', () => {
+  let routerMock: jest.Mocked<IRouter>;
+  let routeHandler: RequestHandler<any, any, any>;
+  let routeConfig: RouteConfig<any, any, any, any>;
+  let context: ReturnType<typeof xpackMocks.createRequestHandlerContext>;
+  let response: ReturnType<typeof httpServerMock.createResponseFactory>;
+
+  beforeAll(() => {
+    routerMock = httpServiceMock.createRouter();
+    registerRoutes(routerMock);
+  });
+
+  beforeEach(() => {
+    appContextService.start(createAppContextStartContractMock());
+    context = xpackMocks.createRequestHandlerContext();
+    response = httpServerMock.createResponseFactory();
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+    appContextService.stop();
+  });
+
+  describe('create api handler', () => {
+    const getCreateKibanaRequest = (
+      newData?: typeof CreateDatasourceRequestSchema.body
+    ): KibanaRequest<undefined, undefined, typeof CreateDatasourceRequestSchema.body> => {
+      return httpServerMock.createKibanaRequest<
+        undefined,
+        undefined,
+        typeof CreateDatasourceRequestSchema.body
+      >({
+        path: routeConfig.path,
+        method: 'post',
+        body: newData || {
+          name: 'endpoint-1',
+          description: '',
+          config_id: 'a5ca00c0-b30c-11ea-9732-1bb05811278c',
+          enabled: true,
+          output_id: '',
+          inputs: [],
+          namespace: 'default',
+          package: { name: 'endpoint', title: 'Elastic Endpoint', version: '0.5.0' },
+        },
+      });
+    };
+
+    // Set the routeConfig and routeHandler to the Create API
+    beforeAll(() => {
+      [routeConfig, routeHandler] = routerMock.post.mock.calls.find(([{ path }]) =>
+        path.startsWith(DATASOURCE_API_ROUTES.CREATE_PATTERN)
+      )!;
+    });
+
+    describe('and external callbacks are registered', () => {
+      const callbackCallingOrder: string[] = [];
+
+      // Callback one adds an input that includes a `config` property
+      const callbackOne: ExternalCallback[1] = jest.fn(async (ds) => {
+        callbackCallingOrder.push('one');
+        const newDs = {
+          ...ds,
+          inputs: [
+            {
+              type: 'endpoint',
+              enabled: true,
+              streams: [],
+              config: {
+                one: {
+                  value: 'inserted by callbackOne',
+                },
+              },
+            },
+          ],
+        };
+        return newDs;
+      });
+
+      // Callback two adds an additional `input[0].config` property
+      const callbackTwo: ExternalCallback[1] = jest.fn(async (ds) => {
+        callbackCallingOrder.push('two');
+        const newDs = {
+          ...ds,
+          inputs: [
+            {
+              ...ds.inputs[0],
+              config: {
+                ...ds.inputs[0].config,
+                two: {
+                  value: 'inserted by callbackTwo',
+                },
+              },
+            },
+          ],
+        };
+        return newDs;
+      });
+
+      beforeEach(() => {
+        appContextService.addExternalCallback('datasourceCreate', callbackOne);
+        appContextService.addExternalCallback('datasourceCreate', callbackTwo);
+      });
+
+      afterEach(() => (callbackCallingOrder.length = 0));
+
+      it('should call external callbacks in expected order', async () => {
+        const request = getCreateKibanaRequest();
+        await routeHandler(context, request, response);
+        expect(response.ok).toHaveBeenCalled();
+        expect(callbackCallingOrder).toEqual(['one', 'two']);
+      });
+
+      it('should feed datasource returned by last callback', async () => {
+        const request = getCreateKibanaRequest();
+        await routeHandler(context, request, response);
+        expect(response.ok).toHaveBeenCalled();
+        expect(callbackOne).toHaveBeenCalledWith({
+          config_id: 'a5ca00c0-b30c-11ea-9732-1bb05811278c',
+          description: '',
+          enabled: true,
+          inputs: [],
+          name: 'endpoint-1',
+          namespace: 'default',
+          output_id: '',
+          package: {
+            name: 'endpoint',
+            title: 'Elastic Endpoint',
+            version: '0.5.0',
+          },
+        });
+        expect(callbackTwo).toHaveBeenCalledWith({
+          config_id: 'a5ca00c0-b30c-11ea-9732-1bb05811278c',
+          description: '',
+          enabled: true,
+          inputs: [
+            {
+              type: 'endpoint',
+              enabled: true,
+              streams: [],
+              config: {
+                one: {
+                  value: 'inserted by callbackOne',
+                },
+              },
+            },
+          ],
+          name: 'endpoint-1',
+          namespace: 'default',
+          output_id: '',
+          package: {
+            name: 'endpoint',
+            title: 'Elastic Endpoint',
+            version: '0.5.0',
+          },
+        });
+      });
+
+      it('should create with data from callback', async () => {
+        const request = getCreateKibanaRequest();
+        await routeHandler(context, request, response);
+        expect(response.ok).toHaveBeenCalled();
+        expect(datasourceServiceMock.create.mock.calls[0][1]).toEqual({
+          config_id: 'a5ca00c0-b30c-11ea-9732-1bb05811278c',
+          description: '',
+          enabled: true,
+          inputs: [
+            {
+              config: {
+                one: {
+                  value: 'inserted by callbackOne',
+                },
+                two: {
+                  value: 'inserted by callbackTwo',
+                },
+              },
+              enabled: true,
+              streams: [],
+              type: 'endpoint',
+            },
+          ],
+          name: 'endpoint-1',
+          namespace: 'default',
+          output_id: '',
+          package: {
+            name: 'endpoint',
+            title: 'Elastic Endpoint',
+            version: '0.5.0',
+          },
+        });
+      });
+
+      describe('and a callback throws an exception', () => {
+        const callbackThree: ExternalCallback[1] = jest.fn(async (ds) => {
+          callbackCallingOrder.push('three');
+          throw new Error('callbackThree threw error on purpose');
+        });
+
+        const callbackFour: ExternalCallback[1] = jest.fn(async (ds) => {
+          callbackCallingOrder.push('four');
+          return {
+            ...ds,
+            inputs: [
+              {
+                ...ds.inputs[0],
+                config: {
+                  ...ds.inputs[0].config,
+                  four: {
+                    value: 'inserted by callbackFour',
+                  },
+                },
+              },
+            ],
+          };
+        });
+
+        beforeEach(() => {
+          appContextService.addExternalCallback('datasourceCreate', callbackThree);
+          appContextService.addExternalCallback('datasourceCreate', callbackFour);
+        });
+
+        it('should skip over callback exceptions and still execute other callbacks', async () => {
+          const request = getCreateKibanaRequest();
+          await routeHandler(context, request, response);
+          expect(response.ok).toHaveBeenCalled();
+          expect(callbackCallingOrder).toEqual(['one', 'two', 'three', 'four']);
+        });
+
+        it('should log errors', async () => {
+          const errorLogger = (appContextService.getLogger() as jest.Mocked<Logger>).error;
+          const request = getCreateKibanaRequest();
+          await routeHandler(context, request, response);
+          expect(response.ok).toHaveBeenCalled();
+          expect(errorLogger.mock.calls).toEqual([
+            ['An external registered [datasourceCreate] callback failed when executed'],
+            [new Error('callbackThree threw error on purpose')],
+          ]);
+        });
+
+        it('should create datasource with last successful returned datasource', async () => {
+          const request = getCreateKibanaRequest();
+          await routeHandler(context, request, response);
+          expect(response.ok).toHaveBeenCalled();
+          expect(datasourceServiceMock.create.mock.calls[0][1]).toEqual({
+            config_id: 'a5ca00c0-b30c-11ea-9732-1bb05811278c',
+            description: '',
+            enabled: true,
+            inputs: [
+              {
+                config: {
+                  one: {
+                    value: 'inserted by callbackOne',
+                  },
+                  two: {
+                    value: 'inserted by callbackTwo',
+                  },
+                  four: {
+                    value: 'inserted by callbackFour',
+                  },
+                },
+                enabled: true,
+                streams: [],
+                type: 'endpoint',
+              },
+            ],
+            name: 'endpoint-1',
+            namespace: 'default',
+            output_id: '',
+            package: {
+              name: 'endpoint',
+              title: 'Elastic Endpoint',
+              version: '0.5.0',
+            },
+          });
+        });
+      });
+    });
+  });
+});
diff --git a/x-pack/plugins/ingest_manager/server/routes/datasource/handlers.ts b/x-pack/plugins/ingest_manager/server/routes/datasource/handlers.ts
index 09daec337040..4f83d24a846e 100644
--- a/x-pack/plugins/ingest_manager/server/routes/datasource/handlers.ts
+++ b/x-pack/plugins/ingest_manager/server/routes/datasource/handlers.ts
@@ -14,6 +14,7 @@ import {
   CreateDatasourceRequestSchema,
   UpdateDatasourceRequestSchema,
   DeleteDatasourcesRequestSchema,
+  NewDatasource,
 } from '../../types';
 import { CreateDatasourceResponse, DeleteDatasourcesResponse } from '../../../common';
 
@@ -76,23 +77,50 @@ export const createDatasourceHandler: RequestHandler<
   const soClient = context.core.savedObjects.client;
   const callCluster = context.core.elasticsearch.legacy.client.callAsCurrentUser;
   const user = (await appContextService.getSecurity()?.authc.getCurrentUser(request)) || undefined;
-  const newData = { ...request.body };
+  const logger = appContextService.getLogger();
+  let newData = { ...request.body };
   try {
+    // If we have external callbacks, then process those now before creating the actual datasource
+    const externalCallbacks = appContextService.getExternalCallbacks('datasourceCreate');
+    if (externalCallbacks && externalCallbacks.size > 0) {
+      let updatedNewData: NewDatasource = newData;
+
+      for (const callback of externalCallbacks) {
+        try {
+          // ensure that the returned value by the callback passes schema validation
+          updatedNewData = CreateDatasourceRequestSchema.body.validate(
+            await callback(updatedNewData)
+          );
+        } catch (error) {
+          // Log the error, but keep going and process the other callbacks
+          logger.error('An external registered [datasourceCreate] callback failed when executed');
+          logger.error(error);
+        }
+      }
+
+      // The type `NewDatasource` and the `DatasourceBaseSchema` are incompatible.
+      // `NewDatasrouce` defines `namespace` as optional string, which means that `undefined` is a
+      // valid value, however, the schema defines it as string with a minimum length of 1.
+      // Here, we need to cast the value back to the schema type and ignore the TS error.
+      // @ts-ignore
+      newData = updatedNewData as typeof CreateDatasourceRequestSchema.body;
+    }
+
     // Make sure the datasource package is installed
-    if (request.body.package?.name) {
+    if (newData.package?.name) {
       await ensureInstalledPackage({
         savedObjectsClient: soClient,
-        pkgName: request.body.package.name,
+        pkgName: newData.package.name,
         callCluster,
       });
       const pkgInfo = await getPackageInfo({
         savedObjectsClient: soClient,
-        pkgName: request.body.package.name,
-        pkgVersion: request.body.package.version,
+        pkgName: newData.package.name,
+        pkgVersion: newData.package.version,
       });
       newData.inputs = (await datasourceService.assignPackageStream(
         pkgInfo,
-        request.body.inputs
+        newData.inputs
       )) as TypeOf<typeof CreateDatasourceRequestSchema.body>['inputs'];
     }
 
@@ -103,6 +131,7 @@ export const createDatasourceHandler: RequestHandler<
       body,
     });
   } catch (e) {
+    logger.error(e);
     return response.customError({
       statusCode: 500,
       body: { message: e.message },
diff --git a/x-pack/plugins/ingest_manager/server/services/app_context.ts b/x-pack/plugins/ingest_manager/server/services/app_context.ts
index 5ed6f7c5e54d..4d109b73d12d 100644
--- a/x-pack/plugins/ingest_manager/server/services/app_context.ts
+++ b/x-pack/plugins/ingest_manager/server/services/app_context.ts
@@ -12,7 +12,7 @@ import {
 } from '../../../encrypted_saved_objects/server';
 import { SecurityPluginSetup } from '../../../security/server';
 import { IngestManagerConfigType } from '../../common';
-import { IngestManagerAppContext } from '../plugin';
+import { ExternalCallback, ExternalCallbacksStorage, IngestManagerAppContext } from '../plugin';
 import { CloudSetup } from '../../../cloud/server';
 
 class AppContextService {
@@ -27,6 +27,7 @@ class AppContextService {
   private cloud?: CloudSetup;
   private logger: Logger | undefined;
   private httpSetup?: HttpServiceSetup;
+  private externalCallbacks: ExternalCallbacksStorage = new Map();
 
   public async start(appContext: IngestManagerAppContext) {
     this.encryptedSavedObjects = appContext.encryptedSavedObjectsStart?.getClient();
@@ -47,7 +48,9 @@ class AppContextService {
     }
   }
 
-  public stop() {}
+  public stop() {
+    this.externalCallbacks.clear();
+  }
 
   public getEncryptedSavedObjects() {
     if (!this.encryptedSavedObjects) {
@@ -121,6 +124,19 @@ class AppContextService {
     }
     return this.kibanaVersion;
   }
+
+  public addExternalCallback(type: ExternalCallback[0], callback: ExternalCallback[1]) {
+    if (!this.externalCallbacks.has(type)) {
+      this.externalCallbacks.set(type, new Set());
+    }
+    this.externalCallbacks.get(type)!.add(callback);
+  }
+
+  public getExternalCallbacks(type: ExternalCallback[0]) {
+    if (this.externalCallbacks) {
+      return this.externalCallbacks.get(type);
+    }
+  }
 }
 
 export const appContextService = new AppContextService();
diff --git a/x-pack/plugins/ingest_manager/server/services/datasource.ts b/x-pack/plugins/ingest_manager/server/services/datasource.ts
index 3ad94ea8191d..f3f460d2a742 100644
--- a/x-pack/plugins/ingest_manager/server/services/datasource.ts
+++ b/x-pack/plugins/ingest_manager/server/services/datasource.ts
@@ -307,4 +307,5 @@ async function _assignPackageStreamToStream(
   return { ...stream };
 }
 
+export type DatasourceServiceInterface = DatasourceService;
 export const datasourceService = new DatasourceService();
diff --git a/x-pack/plugins/security_solution/public/management/pages/policy/store/policy_details/middleware.ts b/x-pack/plugins/security_solution/public/management/pages/policy/store/policy_details/middleware.ts
index ec0c526482b4..899f85ecdea3 100644
--- a/x-pack/plugins/security_solution/public/management/pages/policy/store/policy_details/middleware.ts
+++ b/x-pack/plugins/security_solution/public/management/pages/policy/store/policy_details/middleware.ts
@@ -17,7 +17,6 @@ import {
   sendPutDatasource,
 } from '../policy_list/services/ingest';
 import { NewPolicyData, PolicyData } from '../../../../../../common/endpoint/types';
-import { factory as policyConfigFactory } from '../../../../../../common/endpoint/models/policy_config';
 import { ImmutableMiddlewareFactory } from '../../../../../common/store';
 
 export const policyDetailsMiddlewareFactory: ImmutableMiddlewareFactory<PolicyDetailsState> = (
@@ -43,23 +42,6 @@ export const policyDetailsMiddlewareFactory: ImmutableMiddlewareFactory<PolicyDe
         return;
       }
 
-      // Until we get the Default configuration into the Endpoint package so that the datasource has
-      // the expected data structure, we will add it here manually.
-      if (!policyItem.inputs.length) {
-        policyItem.inputs = [
-          {
-            type: 'endpoint',
-            enabled: true,
-            streams: [],
-            config: {
-              policy: {
-                value: policyConfigFactory(),
-              },
-            },
-          },
-        ];
-      }
-
       dispatch({
         type: 'serverReturnedPolicyDetailsData',
         payload: {
diff --git a/x-pack/plugins/security_solution/server/endpoint/alerts/handlers/alerts.test.ts b/x-pack/plugins/security_solution/server/endpoint/alerts/handlers/alerts.test.ts
index 0134f9e72ab5..6c0ff9fcdc66 100644
--- a/x-pack/plugins/security_solution/server/endpoint/alerts/handlers/alerts.test.ts
+++ b/x-pack/plugins/security_solution/server/endpoint/alerts/handlers/alerts.test.ts
@@ -11,7 +11,7 @@ import {
 } from '../../../../../../../src/core/server/mocks';
 import { registerAlertRoutes } from '../routes';
 import { alertingIndexGetQuerySchema } from '../../../../common/endpoint_alerts/schema/alert_index';
-import { createMockAgentService } from '../../mocks';
+import { createMockEndpointAppContextServiceStartContract } from '../../mocks';
 import { EndpointAppContextService } from '../../endpoint_app_context_services';
 import { createMockConfig } from '../../../lib/detection_engine/routes/__mocks__';
 
@@ -28,9 +28,7 @@ describe('test alerts route', () => {
     routerMock = httpServiceMock.createRouter();
 
     endpointAppContextService = new EndpointAppContextService();
-    endpointAppContextService.start({
-      agentService: createMockAgentService(),
-    });
+    endpointAppContextService.start(createMockEndpointAppContextServiceStartContract());
 
     registerAlertRoutes(routerMock, {
       logFactory: loggingSystemMock.create(),
diff --git a/x-pack/plugins/security_solution/server/endpoint/endpoint_app_context_services.ts b/x-pack/plugins/security_solution/server/endpoint/endpoint_app_context_services.ts
index cb8c913a73b8..7b8a368b6c97 100644
--- a/x-pack/plugins/security_solution/server/endpoint/endpoint_app_context_services.ts
+++ b/x-pack/plugins/security_solution/server/endpoint/endpoint_app_context_services.ts
@@ -3,7 +3,15 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
-import { AgentService } from '../../../ingest_manager/server';
+import { AgentService, IngestManagerStartContract } from '../../../ingest_manager/server';
+import { handleDatasourceCreate } from './ingest_integration';
+
+export type EndpointAppContextServiceStartContract = Pick<
+  IngestManagerStartContract,
+  'agentService'
+> & {
+  registerIngestCallback: IngestManagerStartContract['registerExternalCallback'];
+};
 
 /**
  * A singleton that holds shared services that are initialized during the start up phase
@@ -12,8 +20,9 @@ import { AgentService } from '../../../ingest_manager/server';
 export class EndpointAppContextService {
   private agentService: AgentService | undefined;
 
-  public start(dependencies: { agentService: AgentService }) {
+  public start(dependencies: EndpointAppContextServiceStartContract) {
     this.agentService = dependencies.agentService;
+    dependencies.registerIngestCallback('datasourceCreate', handleDatasourceCreate);
   }
 
   public stop() {}
diff --git a/x-pack/plugins/security_solution/server/endpoint/ingest_integration.ts b/x-pack/plugins/security_solution/server/endpoint/ingest_integration.ts
new file mode 100644
index 000000000000..6ff094931158
--- /dev/null
+++ b/x-pack/plugins/security_solution/server/endpoint/ingest_integration.ts
@@ -0,0 +1,49 @@
+/*
+ * 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 { factory as policyConfigFactory } from '../../common/endpoint/models/policy_config';
+import { NewPolicyData } from '../../common/endpoint/types';
+import { NewDatasource } from '../../../ingest_manager/common/types/models';
+
+/**
+ * Callback to handle creation of Datasources in Ingest Manager
+ * @param newDatasource
+ */
+export const handleDatasourceCreate = async (
+  newDatasource: NewDatasource
+): Promise<NewDatasource> => {
+  // We only care about Endpoint datasources
+  if (newDatasource.package?.name !== 'endpoint') {
+    return newDatasource;
+  }
+
+  // We cast the type here so that any changes to the Endpoint specific data
+  // follow the types/schema expected
+  let updatedDatasource = newDatasource as NewPolicyData;
+
+  // Until we get the Default Policy Configuration in the Endpoint package,
+  // we will add it here manually at creation time.
+  // @ts-ignore
+  if (newDatasource.inputs.length === 0) {
+    updatedDatasource = {
+      ...newDatasource,
+      inputs: [
+        {
+          type: 'endpoint',
+          enabled: true,
+          streams: [],
+          config: {
+            policy: {
+              value: policyConfigFactory(),
+            },
+          },
+        },
+      ],
+    };
+  }
+
+  return updatedDatasource;
+};
diff --git a/x-pack/plugins/security_solution/server/endpoint/mocks.ts b/x-pack/plugins/security_solution/server/endpoint/mocks.ts
index b10e9e4dc90e..5435eff4ef15 100644
--- a/x-pack/plugins/security_solution/server/endpoint/mocks.ts
+++ b/x-pack/plugins/security_solution/server/endpoint/mocks.ts
@@ -6,7 +6,28 @@
 
 import { IScopedClusterClient, SavedObjectsClientContract } from 'kibana/server';
 import { xpackMocks } from '../../../../mocks';
-import { AgentService, IngestManagerStartContract } from '../../../ingest_manager/server';
+import {
+  AgentService,
+  IngestManagerStartContract,
+  ExternalCallback,
+} from '../../../ingest_manager/server';
+import { EndpointAppContextServiceStartContract } from './endpoint_app_context_services';
+import { createDatasourceServiceMock } from '../../../ingest_manager/server/mocks';
+
+/**
+ * Crates a mocked input contract for the `EndpointAppContextService#start()` method
+ */
+export const createMockEndpointAppContextServiceStartContract = (): jest.Mocked<
+  EndpointAppContextServiceStartContract
+> => {
+  return {
+    agentService: createMockAgentService(),
+    registerIngestCallback: jest.fn<
+      ReturnType<IngestManagerStartContract['registerExternalCallback']>,
+      Parameters<IngestManagerStartContract['registerExternalCallback']>
+    >(),
+  };
+};
 
 /**
  * Creates a mock AgentService
@@ -32,6 +53,8 @@ export const createMockIngestManagerStartContract = (
       getESIndexPattern: jest.fn().mockResolvedValue(indexPattern),
     },
     agentService: createMockAgentService(),
+    registerExternalCallback: jest.fn((...args: ExternalCallback) => {}),
+    datasourceService: createDatasourceServiceMock(),
   };
 };
 
diff --git a/x-pack/plugins/security_solution/server/endpoint/routes/metadata/metadata.test.ts b/x-pack/plugins/security_solution/server/endpoint/routes/metadata/metadata.test.ts
index ba51a3b6aa92..c04975fa8b28 100644
--- a/x-pack/plugins/security_solution/server/endpoint/routes/metadata/metadata.test.ts
+++ b/x-pack/plugins/security_solution/server/endpoint/routes/metadata/metadata.test.ts
@@ -27,8 +27,10 @@ import {
 } from '../../../../common/endpoint/types';
 import { SearchResponse } from 'elasticsearch';
 import { registerEndpointRoutes } from './index';
-import { createMockAgentService, createRouteHandlerContext } from '../../mocks';
-import { AgentService } from '../../../../../ingest_manager/server';
+import {
+  createMockEndpointAppContextServiceStartContract,
+  createRouteHandlerContext,
+} from '../../mocks';
 import Boom from 'boom';
 import { EndpointAppContextService } from '../../endpoint_app_context_services';
 import { createMockConfig } from '../../../lib/detection_engine/routes/__mocks__';
@@ -44,7 +46,9 @@ describe('test endpoint route', () => {
   let routeHandler: RequestHandler<any, any, any>;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   let routeConfig: RouteConfig<any, any, any, any>;
-  let mockAgentService: jest.Mocked<AgentService>;
+  let mockAgentService: ReturnType<
+    typeof createMockEndpointAppContextServiceStartContract
+  >['agentService'];
   let endpointAppContextService: EndpointAppContextService;
 
   beforeEach(() => {
@@ -56,11 +60,10 @@ describe('test endpoint route', () => {
     mockClusterClient.asScoped.mockReturnValue(mockScopedClient);
     routerMock = httpServiceMock.createRouter();
     mockResponse = httpServerMock.createResponseFactory();
-    mockAgentService = createMockAgentService();
     endpointAppContextService = new EndpointAppContextService();
-    endpointAppContextService.start({
-      agentService: mockAgentService,
-    });
+    const startContract = createMockEndpointAppContextServiceStartContract();
+    endpointAppContextService.start(startContract);
+    mockAgentService = startContract.agentService;
 
     registerEndpointRoutes(routerMock, {
       logFactory: loggingSystemMock.create(),
diff --git a/x-pack/plugins/security_solution/server/endpoint/routes/policy/handlers.test.ts b/x-pack/plugins/security_solution/server/endpoint/routes/policy/handlers.test.ts
index 6c1f0a206ffa..16af3a95bc72 100644
--- a/x-pack/plugins/security_solution/server/endpoint/routes/policy/handlers.test.ts
+++ b/x-pack/plugins/security_solution/server/endpoint/routes/policy/handlers.test.ts
@@ -4,7 +4,10 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 import { EndpointAppContextService } from '../../endpoint_app_context_services';
-import { createMockAgentService, createRouteHandlerContext } from '../../mocks';
+import {
+  createMockEndpointAppContextServiceStartContract,
+  createRouteHandlerContext,
+} from '../../mocks';
 import { getHostPolicyResponseHandler } from './handlers';
 import {
   IScopedClusterClient,
@@ -17,7 +20,6 @@ import {
   loggingSystemMock,
   savedObjectsClientMock,
 } from '../../../../../../../src/core/server/mocks';
-import { AgentService } from '../../../../../ingest_manager/server/services';
 import { SearchResponse } from 'elasticsearch';
 import { GetHostPolicyResponse, HostPolicyResponse } from '../../../../common/endpoint/types';
 import { EndpointDocGenerator } from '../../../../common/endpoint/generate_data';
@@ -28,17 +30,13 @@ describe('test policy response handler', () => {
   let mockScopedClient: jest.Mocked<IScopedClusterClient>;
   let mockSavedObjectClient: jest.Mocked<SavedObjectsClientContract>;
   let mockResponse: jest.Mocked<KibanaResponseFactory>;
-  let mockAgentService: jest.Mocked<AgentService>;
 
   beforeEach(() => {
     mockScopedClient = elasticsearchServiceMock.createScopedClusterClient();
     mockSavedObjectClient = savedObjectsClientMock.create();
     mockResponse = httpServerMock.createResponseFactory();
     endpointAppContextService = new EndpointAppContextService();
-    mockAgentService = createMockAgentService();
-    endpointAppContextService.start({
-      agentService: mockAgentService,
-    });
+    endpointAppContextService.start(createMockEndpointAppContextServiceStartContract());
   });
 
   afterEach(() => endpointAppContextService.stop());
diff --git a/x-pack/plugins/security_solution/server/plugin.ts b/x-pack/plugins/security_solution/server/plugin.ts
index 9fe7307e8cb6..879c132ddec5 100644
--- a/x-pack/plugins/security_solution/server/plugin.ts
+++ b/x-pack/plugins/security_solution/server/plugin.ts
@@ -219,7 +219,9 @@ export class Plugin implements IPlugin<PluginSetup, PluginStart, SetupPlugins, S
   public start(core: CoreStart, plugins: StartPlugins) {
     this.endpointAppContextService.start({
       agentService: plugins.ingestManager.agentService,
+      registerIngestCallback: plugins.ingestManager.registerExternalCallback,
     });
+
     return {};
   }
 

From 14f975c899dfbca96ced6bdf383d386c82663445 Mon Sep 17 00:00:00 2001
From: Nicolas Chaulet <nicolas.chaulet@elastic.co>
Date: Wed, 24 Jun 2020 15:53:38 -0400
Subject: [PATCH 2/8] [IngestManager] Expose agent authentication using access
 key (#69650)

* [IngestManager] Expose agent authentication using access key

* Add unit tests to authenticateAgentWithAccessToken service
---
 .../plugins/ingest_manager/server/plugin.ts   |   3 +-
 .../server/routes/agent/acks_handlers.test.ts |   2 +-
 .../server/routes/agent/acks_handlers.ts      |   4 +-
 .../server/routes/agent/handlers.ts           |   3 +-
 .../server/routes/agent/index.ts              |   2 +-
 .../server/services/agents/acks.ts            |   4 +-
 .../services/agents/authenticate.test.ts      | 154 ++++++++++++++++++
 .../server/services/agents/authenticate.ts    |  30 ++++
 .../server/services/agents/index.ts           |   1 +
 9 files changed, 193 insertions(+), 10 deletions(-)
 create mode 100644 x-pack/plugins/ingest_manager/server/services/agents/authenticate.test.ts
 create mode 100644 x-pack/plugins/ingest_manager/server/services/agents/authenticate.ts

diff --git a/x-pack/plugins/ingest_manager/server/plugin.ts b/x-pack/plugins/ingest_manager/server/plugin.ts
index e060eb5e8068..fcdb6387fed3 100644
--- a/x-pack/plugins/ingest_manager/server/plugin.ts
+++ b/x-pack/plugins/ingest_manager/server/plugin.ts
@@ -54,7 +54,7 @@ import {
   AgentService,
   datasourceService,
 } from './services';
-import { getAgentStatusById } from './services/agents';
+import { getAgentStatusById, authenticateAgentWithAccessToken } from './services/agents';
 import { CloudSetup } from '../../cloud/server';
 import { agentCheckinState } from './services/agents/checkin/state';
 
@@ -256,6 +256,7 @@ export class IngestManagerPlugin
       esIndexPatternService: new ESIndexPatternSavedObjectService(),
       agentService: {
         getAgentStatusById,
+        authenticateAgentWithAccessToken,
       },
       datasourceService,
       registerExternalCallback: (...args: ExternalCallback) => {
diff --git a/x-pack/plugins/ingest_manager/server/routes/agent/acks_handlers.test.ts b/x-pack/plugins/ingest_manager/server/routes/agent/acks_handlers.test.ts
index 84923d5c3366..aaed189ae3dd 100644
--- a/x-pack/plugins/ingest_manager/server/routes/agent/acks_handlers.test.ts
+++ b/x-pack/plugins/ingest_manager/server/routes/agent/acks_handlers.test.ts
@@ -77,7 +77,7 @@ describe('test acks handlers', () => {
           id: 'action1',
         },
       ]),
-      getAgentByAccessAPIKeyId: jest.fn().mockReturnValueOnce({
+      authenticateAgentWithAccessToken: jest.fn().mockReturnValueOnce({
         id: 'agent',
       }),
       getSavedObjectsClientContract: jest.fn().mockReturnValueOnce(mockSavedObjectsClient),
diff --git a/x-pack/plugins/ingest_manager/server/routes/agent/acks_handlers.ts b/x-pack/plugins/ingest_manager/server/routes/agent/acks_handlers.ts
index 83d894295c31..0b719d8a67df 100644
--- a/x-pack/plugins/ingest_manager/server/routes/agent/acks_handlers.ts
+++ b/x-pack/plugins/ingest_manager/server/routes/agent/acks_handlers.ts
@@ -9,7 +9,6 @@
 import { RequestHandler } from 'kibana/server';
 import { TypeOf } from '@kbn/config-schema';
 import { PostAgentAcksRequestSchema } from '../../types/rest_spec';
-import * as APIKeyService from '../../services/api_keys';
 import { AcksService } from '../../services/agents';
 import { AgentEvent } from '../../../common/types/models';
 import { PostAgentAcksResponse } from '../../../common/types/rest_spec';
@@ -24,8 +23,7 @@ export const postAgentAcksHandlerBuilder = function (
   return async (context, request, response) => {
     try {
       const soClient = ackService.getSavedObjectsClientContract(request);
-      const res = APIKeyService.parseApiKeyFromHeaders(request.headers);
-      const agent = await ackService.getAgentByAccessAPIKeyId(soClient, res.apiKeyId as string);
+      const agent = await ackService.authenticateAgentWithAccessToken(soClient, request);
       const agentEvents = request.body.events as AgentEvent[];
 
       // validate that all events are for the authorized agent obtained from the api key
diff --git a/x-pack/plugins/ingest_manager/server/routes/agent/handlers.ts b/x-pack/plugins/ingest_manager/server/routes/agent/handlers.ts
index 0d1c77b8d697..d31498599a2b 100644
--- a/x-pack/plugins/ingest_manager/server/routes/agent/handlers.ts
+++ b/x-pack/plugins/ingest_manager/server/routes/agent/handlers.ts
@@ -171,8 +171,7 @@ export const postAgentCheckinHandler: RequestHandler<
 > = async (context, request, response) => {
   try {
     const soClient = appContextService.getInternalUserSOClient(request);
-    const res = APIKeyService.parseApiKeyFromHeaders(request.headers);
-    const agent = await AgentService.getAgentByAccessAPIKeyId(soClient, res.apiKeyId);
+    const agent = await AgentService.authenticateAgentWithAccessToken(soClient, request);
     const abortController = new AbortController();
     request.events.aborted$.subscribe(() => {
       abortController.abort();
diff --git a/x-pack/plugins/ingest_manager/server/routes/agent/index.ts b/x-pack/plugins/ingest_manager/server/routes/agent/index.ts
index 87eee4622c80..eaab46c7b455 100644
--- a/x-pack/plugins/ingest_manager/server/routes/agent/index.ts
+++ b/x-pack/plugins/ingest_manager/server/routes/agent/index.ts
@@ -109,7 +109,7 @@ export const registerRoutes = (router: IRouter) => {
     },
     postAgentAcksHandlerBuilder({
       acknowledgeAgentActions: AgentService.acknowledgeAgentActions,
-      getAgentByAccessAPIKeyId: AgentService.getAgentByAccessAPIKeyId,
+      authenticateAgentWithAccessToken: AgentService.authenticateAgentWithAccessToken,
       getSavedObjectsClientContract: appContextService.getInternalUserSOClient.bind(
         appContextService
       ),
diff --git a/x-pack/plugins/ingest_manager/server/services/agents/acks.ts b/x-pack/plugins/ingest_manager/server/services/agents/acks.ts
index 81ba9754e8aa..a1b48a879bb8 100644
--- a/x-pack/plugins/ingest_manager/server/services/agents/acks.ts
+++ b/x-pack/plugins/ingest_manager/server/services/agents/acks.ts
@@ -140,9 +140,9 @@ export interface AcksService {
     actionIds: AgentEvent[]
   ) => Promise<AgentAction[]>;
 
-  getAgentByAccessAPIKeyId: (
+  authenticateAgentWithAccessToken: (
     soClient: SavedObjectsClientContract,
-    accessAPIKeyId: string
+    request: KibanaRequest
   ) => Promise<Agent>;
 
   getSavedObjectsClientContract: (kibanaRequest: KibanaRequest) => SavedObjectsClientContract;
diff --git a/x-pack/plugins/ingest_manager/server/services/agents/authenticate.test.ts b/x-pack/plugins/ingest_manager/server/services/agents/authenticate.test.ts
new file mode 100644
index 000000000000..b56ca4ca8cc1
--- /dev/null
+++ b/x-pack/plugins/ingest_manager/server/services/agents/authenticate.test.ts
@@ -0,0 +1,154 @@
+/*
+ * 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 { KibanaRequest } from 'kibana/server';
+import { savedObjectsClientMock } from 'src/core/server/mocks';
+
+import { authenticateAgentWithAccessToken } from './authenticate';
+
+describe('test agent autenticate services', () => {
+  it('should succeed with a valid API key and an active agent', async () => {
+    const mockSavedObjectsClient = savedObjectsClientMock.create();
+    mockSavedObjectsClient.find.mockReturnValue(
+      Promise.resolve({
+        page: 1,
+        per_page: 100,
+        total: 1,
+        saved_objects: [
+          {
+            id: 'agent1',
+            type: 'agent',
+            references: [],
+            score: 0,
+            attributes: {
+              active: true,
+              access_api_key_id: 'pedTuHIBTEDt93wW0Fhr',
+            },
+          },
+        ],
+      })
+    );
+    await authenticateAgentWithAccessToken(mockSavedObjectsClient, {
+      auth: { isAuthenticated: true },
+      headers: {
+        authorization: 'ApiKey cGVkVHVISUJURUR0OTN3VzBGaHI6TnU1U0JtbHJSeC12Rm9qQWpoSHlUZw==',
+      },
+    } as KibanaRequest);
+  });
+
+  it('should throw if the request is not authenticated', async () => {
+    const mockSavedObjectsClient = savedObjectsClientMock.create();
+    mockSavedObjectsClient.find.mockReturnValue(
+      Promise.resolve({
+        page: 1,
+        per_page: 100,
+        total: 1,
+        saved_objects: [
+          {
+            id: 'agent1',
+            type: 'agent',
+            references: [],
+            score: 0,
+            attributes: {
+              active: true,
+              access_api_key_id: 'pedTuHIBTEDt93wW0Fhr',
+            },
+          },
+        ],
+      })
+    );
+    expect(
+      authenticateAgentWithAccessToken(mockSavedObjectsClient, {
+        auth: { isAuthenticated: false },
+        headers: {
+          authorization: 'ApiKey cGVkVHVISUJURUR0OTN3VzBGaHI6TnU1U0JtbHJSeC12Rm9qQWpoSHlUZw==',
+        },
+      } as KibanaRequest)
+    ).rejects.toThrow(/Request not authenticated/);
+  });
+
+  it('should throw if the ApiKey headers is malformed', async () => {
+    const mockSavedObjectsClient = savedObjectsClientMock.create();
+    mockSavedObjectsClient.find.mockReturnValue(
+      Promise.resolve({
+        page: 1,
+        per_page: 100,
+        total: 1,
+        saved_objects: [
+          {
+            id: 'agent1',
+            type: 'agent',
+            references: [],
+            score: 0,
+            attributes: {
+              active: false,
+              access_api_key_id: 'pedTuHIBTEDt93wW0Fhr',
+            },
+          },
+        ],
+      })
+    );
+    expect(
+      authenticateAgentWithAccessToken(mockSavedObjectsClient, {
+        auth: { isAuthenticated: true },
+        headers: {
+          authorization: 'aaaa',
+        },
+      } as KibanaRequest)
+    ).rejects.toThrow(/Authorization header is malformed/);
+  });
+
+  it('should throw if the agent is not active', async () => {
+    const mockSavedObjectsClient = savedObjectsClientMock.create();
+    mockSavedObjectsClient.find.mockReturnValue(
+      Promise.resolve({
+        page: 1,
+        per_page: 100,
+        total: 1,
+        saved_objects: [
+          {
+            id: 'agent1',
+            type: 'agent',
+            references: [],
+            score: 0,
+            attributes: {
+              active: false,
+              access_api_key_id: 'pedTuHIBTEDt93wW0Fhr',
+            },
+          },
+        ],
+      })
+    );
+    expect(
+      authenticateAgentWithAccessToken(mockSavedObjectsClient, {
+        auth: { isAuthenticated: true },
+        headers: {
+          authorization: 'ApiKey cGVkVHVISUJURUR0OTN3VzBGaHI6TnU1U0JtbHJSeC12Rm9qQWpoSHlUZw==',
+        },
+      } as KibanaRequest)
+    ).rejects.toThrow(/Agent inactive/);
+  });
+
+  it('should throw if there is no agent matching the API key', async () => {
+    const mockSavedObjectsClient = savedObjectsClientMock.create();
+    mockSavedObjectsClient.find.mockReturnValue(
+      Promise.resolve({
+        page: 1,
+        per_page: 100,
+        total: 1,
+        saved_objects: [],
+      })
+    );
+    expect(
+      authenticateAgentWithAccessToken(mockSavedObjectsClient, {
+        auth: { isAuthenticated: true },
+        headers: {
+          authorization: 'ApiKey cGVkVHVISUJURUR0OTN3VzBGaHI6TnU1U0JtbHJSeC12Rm9qQWpoSHlUZw==',
+        },
+      } as KibanaRequest)
+    ).rejects.toThrow(/Agent not found/);
+  });
+});
diff --git a/x-pack/plugins/ingest_manager/server/services/agents/authenticate.ts b/x-pack/plugins/ingest_manager/server/services/agents/authenticate.ts
new file mode 100644
index 000000000000..2515a02da4e7
--- /dev/null
+++ b/x-pack/plugins/ingest_manager/server/services/agents/authenticate.ts
@@ -0,0 +1,30 @@
+/*
+ * 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 Boom from 'boom';
+import { KibanaRequest, SavedObjectsClientContract } from 'src/core/server';
+import { Agent } from '../../types';
+import * as APIKeyService from '../api_keys';
+import { getAgentByAccessAPIKeyId } from './crud';
+
+export async function authenticateAgentWithAccessToken(
+  soClient: SavedObjectsClientContract,
+  request: KibanaRequest
+): Promise<Agent> {
+  if (!request.auth.isAuthenticated) {
+    throw Boom.unauthorized('Request not authenticated');
+  }
+  let res: { apiKey: string; apiKeyId: string };
+  try {
+    res = APIKeyService.parseApiKeyFromHeaders(request.headers);
+  } catch (err) {
+    throw Boom.unauthorized(err.message);
+  }
+
+  const agent = await getAgentByAccessAPIKeyId(soClient, res.apiKeyId);
+
+  return agent;
+}
diff --git a/x-pack/plugins/ingest_manager/server/services/agents/index.ts b/x-pack/plugins/ingest_manager/server/services/agents/index.ts
index 257091af0ebd..400c099af4e9 100644
--- a/x-pack/plugins/ingest_manager/server/services/agents/index.ts
+++ b/x-pack/plugins/ingest_manager/server/services/agents/index.ts
@@ -14,3 +14,4 @@ export * from './crud';
 export * from './update';
 export * from './actions';
 export * from './reassign';
+export * from './authenticate';

From e3598cbecaa022cd18a4a24d1c067359b1ea4973 Mon Sep 17 00:00:00 2001
From: Oliver Gupte <ogupte@users.noreply.github.com>
Date: Wed, 24 Jun 2020 13:31:02 -0700
Subject: [PATCH 3/8] [APM] Pulls legacy ML code from service maps and
 integrations (#69779)

* Pulls out existing ML integration from the service maps

* - removes ML job creation flyout in integrations menu on the service details UI
- removes ML searches and transforms in the transaction charts API
- removes unused shared functions and types related to the legacy ML integration

* removes unused translations for APM anomaly detection

* Adds tags to TODOs for easy searching later
---
 .../apm/common/ml_job_constants.test.ts       |  38 +--
 x-pack/plugins/apm/common/ml_job_constants.ts |  19 --
 x-pack/plugins/apm/common/service_map.ts      |  10 -
 .../TransactionSelect.tsx                     |  56 ----
 .../MachineLearningFlyout/index.tsx           | 167 ----------
 .../MachineLearningFlyout/view.tsx            | 264 ---------------
 .../ServiceIntegrations/index.tsx             | 107 ++-----
 .../app/ServiceMap/Popover/Contents.tsx       |   9 +-
 .../ServiceMap/Popover/anomaly_detection.tsx  | 157 ---------
 .../app/TransactionOverview/index.tsx         |  18 +-
 .../MachineLearningLinks/MLJobLink.test.tsx   |  15 -
 .../Links/MachineLearningLinks/MLJobLink.tsx  |  18 +-
 .../shared/charts/TransactionCharts/index.tsx |  11 +-
 x-pack/plugins/apm/public/services/rest/ml.ts | 123 -------
 .../service_map/get_service_anomalies.test.ts |  40 ---
 .../lib/service_map/get_service_anomalies.ts  | 166 ----------
 .../server/lib/service_map/get_service_map.ts |  19 +-
 .../server/lib/service_map/ml_helpers.test.ts |  76 -----
 .../apm/server/lib/service_map/ml_helpers.ts  |  67 ----
 .../transform_service_map_responses.test.ts   |   7 -
 .../transform_service_map_responses.ts        |  24 +-
 .../__snapshots__/fetcher.test.ts.snap        |  68 ----
 .../__snapshots__/index.test.ts.snap          |  38 ---
 .../__snapshots__/transform.test.ts.snap      |  33 --
 .../charts/get_anomaly_data/fetcher.test.ts   |  76 -----
 .../charts/get_anomaly_data/fetcher.ts        |  90 ------
 .../get_anomaly_data/get_ml_bucket_size.ts    |  65 ----
 .../charts/get_anomaly_data/index.test.ts     |  83 -----
 .../charts/get_anomaly_data/index.ts          |  39 +--
 .../mock_responses/ml_anomaly_response.ts     | 127 --------
 .../mock_responses/ml_bucket_span_response.ts |  31 --
 .../charts/get_anomaly_data/transform.test.ts | 303 ------------------
 .../charts/get_anomaly_data/transform.ts      | 126 --------
 .../translations/translations/ja-JP.json      |  20 --
 .../translations/translations/zh-CN.json      |  20 --
 35 files changed, 57 insertions(+), 2473 deletions(-)
 delete mode 100644 x-pack/plugins/apm/public/components/app/ServiceDetails/ServiceIntegrations/MachineLearningFlyout/TransactionSelect.tsx
 delete mode 100644 x-pack/plugins/apm/public/components/app/ServiceDetails/ServiceIntegrations/MachineLearningFlyout/index.tsx
 delete mode 100644 x-pack/plugins/apm/public/components/app/ServiceDetails/ServiceIntegrations/MachineLearningFlyout/view.tsx
 delete mode 100644 x-pack/plugins/apm/public/components/app/ServiceMap/Popover/anomaly_detection.tsx
 delete mode 100644 x-pack/plugins/apm/public/services/rest/ml.ts
 delete mode 100644 x-pack/plugins/apm/server/lib/service_map/get_service_anomalies.test.ts
 delete mode 100644 x-pack/plugins/apm/server/lib/service_map/get_service_anomalies.ts
 delete mode 100644 x-pack/plugins/apm/server/lib/service_map/ml_helpers.test.ts
 delete mode 100644 x-pack/plugins/apm/server/lib/service_map/ml_helpers.ts
 delete mode 100644 x-pack/plugins/apm/server/lib/transactions/charts/get_anomaly_data/__snapshots__/fetcher.test.ts.snap
 delete mode 100644 x-pack/plugins/apm/server/lib/transactions/charts/get_anomaly_data/__snapshots__/index.test.ts.snap
 delete mode 100644 x-pack/plugins/apm/server/lib/transactions/charts/get_anomaly_data/__snapshots__/transform.test.ts.snap
 delete mode 100644 x-pack/plugins/apm/server/lib/transactions/charts/get_anomaly_data/fetcher.test.ts
 delete mode 100644 x-pack/plugins/apm/server/lib/transactions/charts/get_anomaly_data/fetcher.ts
 delete mode 100644 x-pack/plugins/apm/server/lib/transactions/charts/get_anomaly_data/get_ml_bucket_size.ts
 delete mode 100644 x-pack/plugins/apm/server/lib/transactions/charts/get_anomaly_data/index.test.ts
 delete mode 100644 x-pack/plugins/apm/server/lib/transactions/charts/get_anomaly_data/mock_responses/ml_anomaly_response.ts
 delete mode 100644 x-pack/plugins/apm/server/lib/transactions/charts/get_anomaly_data/mock_responses/ml_bucket_span_response.ts
 delete mode 100644 x-pack/plugins/apm/server/lib/transactions/charts/get_anomaly_data/transform.test.ts
 delete mode 100644 x-pack/plugins/apm/server/lib/transactions/charts/get_anomaly_data/transform.ts

diff --git a/x-pack/plugins/apm/common/ml_job_constants.test.ts b/x-pack/plugins/apm/common/ml_job_constants.test.ts
index 45bb7133e852..96e3ba826d20 100644
--- a/x-pack/plugins/apm/common/ml_job_constants.test.ts
+++ b/x-pack/plugins/apm/common/ml_job_constants.test.ts
@@ -4,45 +4,9 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import {
-  getMlJobId,
-  getMlPrefix,
-  getMlJobServiceName,
-  getSeverity,
-  severity,
-} from './ml_job_constants';
+import { getSeverity, severity } from './ml_job_constants';
 
 describe('ml_job_constants', () => {
-  it('getMlPrefix', () => {
-    expect(getMlPrefix('myServiceName')).toBe('myservicename-');
-    expect(getMlPrefix('myServiceName', 'myTransactionType')).toBe(
-      'myservicename-mytransactiontype-'
-    );
-  });
-
-  it('getMlJobId', () => {
-    expect(getMlJobId('myServiceName')).toBe(
-      'myservicename-high_mean_response_time'
-    );
-    expect(getMlJobId('myServiceName', 'myTransactionType')).toBe(
-      'myservicename-mytransactiontype-high_mean_response_time'
-    );
-    expect(getMlJobId('my service name')).toBe(
-      'my_service_name-high_mean_response_time'
-    );
-    expect(getMlJobId('my service name', 'my transaction type')).toBe(
-      'my_service_name-my_transaction_type-high_mean_response_time'
-    );
-  });
-
-  describe('getMlJobServiceName', () => {
-    it('extracts the service name from a job id', () => {
-      expect(
-        getMlJobServiceName('opbeans-node-request-high_mean_response_time')
-      ).toEqual('opbeans-node');
-    });
-  });
-
   describe('getSeverity', () => {
     describe('when score is undefined', () => {
       it('returns undefined', () => {
diff --git a/x-pack/plugins/apm/common/ml_job_constants.ts b/x-pack/plugins/apm/common/ml_job_constants.ts
index f9b0119d8a10..b8c2546bd0c8 100644
--- a/x-pack/plugins/apm/common/ml_job_constants.ts
+++ b/x-pack/plugins/apm/common/ml_job_constants.ts
@@ -11,25 +11,6 @@ export enum severity {
   warning = 'warning',
 }
 
-export const APM_ML_JOB_GROUP_NAME = 'apm';
-
-export function getMlPrefix(serviceName: string, transactionType?: string) {
-  const maybeTransactionType = transactionType ? `${transactionType}-` : '';
-  return encodeForMlApi(`${serviceName}-${maybeTransactionType}`);
-}
-
-export function getMlJobId(serviceName: string, transactionType?: string) {
-  return `${getMlPrefix(serviceName, transactionType)}high_mean_response_time`;
-}
-
-export function getMlJobServiceName(jobId: string) {
-  return jobId.split('-').slice(0, -2).join('-');
-}
-
-export function encodeForMlApi(value: string) {
-  return value.replace(/\s+/g, '_').toLowerCase();
-}
-
 export function getSeverity(score?: number) {
   if (typeof score !== 'number') {
     return undefined;
diff --git a/x-pack/plugins/apm/common/service_map.ts b/x-pack/plugins/apm/common/service_map.ts
index 7d7a7811eeba..43f3585d0ebb 100644
--- a/x-pack/plugins/apm/common/service_map.ts
+++ b/x-pack/plugins/apm/common/service_map.ts
@@ -34,16 +34,6 @@ export interface Connection {
   destination: ConnectionNode;
 }
 
-export interface ServiceAnomaly {
-  anomaly_score: number;
-  anomaly_severity: string;
-  actual_value: number;
-  typical_value: number;
-  ml_job_id: string;
-}
-
-export type ServiceNode = ConnectionNode & Partial<ServiceAnomaly>;
-
 export interface ServiceNodeMetrics {
   avgMemoryUsage: number | null;
   avgCpuUsage: number | null;
diff --git a/x-pack/plugins/apm/public/components/app/ServiceDetails/ServiceIntegrations/MachineLearningFlyout/TransactionSelect.tsx b/x-pack/plugins/apm/public/components/app/ServiceDetails/ServiceIntegrations/MachineLearningFlyout/TransactionSelect.tsx
deleted file mode 100644
index 42f7246b6ea3..000000000000
--- a/x-pack/plugins/apm/public/components/app/ServiceDetails/ServiceIntegrations/MachineLearningFlyout/TransactionSelect.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-/*
- * 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 {
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiFormRow,
-  EuiSuperSelect,
-  EuiText,
-} from '@elastic/eui';
-import { i18n } from '@kbn/i18n';
-import React from 'react';
-
-interface TransactionSelectProps {
-  transactionTypes: string[];
-  onChange: (value: string) => void;
-  selectedTransactionType: string;
-}
-
-export function TransactionSelect({
-  transactionTypes,
-  onChange,
-  selectedTransactionType,
-}: TransactionSelectProps) {
-  return (
-    <EuiFormRow
-      label={i18n.translate(
-        'xpack.apm.serviceDetails.enableAnomalyDetectionPanel.selectTransactionTypeLabel',
-        {
-          defaultMessage: 'Select a transaction type for this job',
-        }
-      )}
-    >
-      <EuiSuperSelect
-        valueOfSelected={selectedTransactionType}
-        onChange={onChange}
-        options={transactionTypes.map((transactionType) => {
-          return {
-            value: transactionType,
-            inputDisplay: transactionType,
-            dropdownDisplay: (
-              <EuiFlexGroup justifyContent="spaceBetween">
-                <EuiFlexItem>
-                  <EuiText>{transactionType}</EuiText>
-                </EuiFlexItem>
-              </EuiFlexGroup>
-            ),
-          };
-        })}
-      />
-    </EuiFormRow>
-  );
-}
diff --git a/x-pack/plugins/apm/public/components/app/ServiceDetails/ServiceIntegrations/MachineLearningFlyout/index.tsx b/x-pack/plugins/apm/public/components/app/ServiceDetails/ServiceIntegrations/MachineLearningFlyout/index.tsx
deleted file mode 100644
index 91778b2940c6..000000000000
--- a/x-pack/plugins/apm/public/components/app/ServiceDetails/ServiceIntegrations/MachineLearningFlyout/index.tsx
+++ /dev/null
@@ -1,167 +0,0 @@
-/*
- * 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 { i18n } from '@kbn/i18n';
-import React, { Component } from 'react';
-import { toMountPoint } from '../../../../../../../../../src/plugins/kibana_react/public';
-import { startMLJob, MLError } from '../../../../../services/rest/ml';
-import { IUrlParams } from '../../../../../context/UrlParamsContext/types';
-import { MLJobLink } from '../../../../shared/Links/MachineLearningLinks/MLJobLink';
-import { MachineLearningFlyoutView } from './view';
-import { ApmPluginContext } from '../../../../../context/ApmPluginContext';
-
-interface Props {
-  isOpen: boolean;
-  onClose: () => void;
-  urlParams: IUrlParams;
-}
-
-interface State {
-  isCreatingJob: boolean;
-}
-
-export class MachineLearningFlyout extends Component<Props, State> {
-  static contextType = ApmPluginContext;
-
-  public state: State = {
-    isCreatingJob: false,
-  };
-
-  public onClickCreate = async ({
-    transactionType,
-  }: {
-    transactionType: string;
-  }) => {
-    this.setState({ isCreatingJob: true });
-    try {
-      const { http } = this.context.core;
-      const { serviceName } = this.props.urlParams;
-      if (!serviceName) {
-        throw new Error('Service name is required to create this ML job');
-      }
-      const res = await startMLJob({ http, serviceName, transactionType });
-      const didSucceed = res.datafeeds[0].success && res.jobs[0].success;
-      if (!didSucceed) {
-        throw new Error('Creating ML job failed');
-      }
-      this.addSuccessToast({ transactionType });
-    } catch (e) {
-      this.addErrorToast(e as MLError);
-    }
-
-    this.setState({ isCreatingJob: false });
-    this.props.onClose();
-  };
-
-  public addErrorToast = (error: MLError) => {
-    const { core } = this.context;
-
-    const { urlParams } = this.props;
-    const { serviceName } = urlParams;
-
-    if (!serviceName) {
-      return;
-    }
-
-    const errorDescription = error?.body?.message;
-    const errorText = errorDescription
-      ? `${error.message}: ${errorDescription}`
-      : error.message;
-
-    core.notifications.toasts.addWarning({
-      title: i18n.translate(
-        'xpack.apm.serviceDetails.enableAnomalyDetectionPanel.jobCreationFailedNotificationTitle',
-        {
-          defaultMessage: 'Job creation failed',
-        }
-      ),
-      text: toMountPoint(
-        <>
-          <p>{errorText}</p>
-          <p>
-            {i18n.translate(
-              'xpack.apm.serviceDetails.enableAnomalyDetectionPanel.jobCreationFailedNotificationText',
-              {
-                defaultMessage:
-                  'Your current license may not allow for creating machine learning jobs, or this job may already exist.',
-              }
-            )}
-          </p>
-        </>
-      ),
-    });
-  };
-
-  public addSuccessToast = ({
-    transactionType,
-  }: {
-    transactionType: string;
-  }) => {
-    const { core } = this.context;
-    const { urlParams } = this.props;
-    const { serviceName } = urlParams;
-
-    if (!serviceName) {
-      return;
-    }
-
-    core.notifications.toasts.addSuccess({
-      title: i18n.translate(
-        'xpack.apm.serviceDetails.enableAnomalyDetectionPanel.jobCreatedNotificationTitle',
-        {
-          defaultMessage: 'Job successfully created',
-        }
-      ),
-      text: toMountPoint(
-        <p>
-          {i18n.translate(
-            'xpack.apm.serviceDetails.enableAnomalyDetectionPanel.jobCreatedNotificationText',
-            {
-              defaultMessage:
-                'The analysis is now running for {serviceName} ({transactionType}). It might take a while before results are added to the response times graph.',
-              values: {
-                serviceName,
-                transactionType,
-              },
-            }
-          )}{' '}
-          <ApmPluginContext.Provider value={this.context}>
-            <MLJobLink
-              serviceName={serviceName}
-              transactionType={transactionType}
-            >
-              {i18n.translate(
-                'xpack.apm.serviceDetails.enableAnomalyDetectionPanel.jobCreatedNotificationText.viewJobLinkText',
-                {
-                  defaultMessage: 'View job',
-                }
-              )}
-            </MLJobLink>
-          </ApmPluginContext.Provider>
-        </p>
-      ),
-    });
-  };
-
-  public render() {
-    const { isOpen, onClose, urlParams } = this.props;
-    const { serviceName } = urlParams;
-    const { isCreatingJob } = this.state;
-
-    if (!isOpen || !serviceName) {
-      return null;
-    }
-
-    return (
-      <MachineLearningFlyoutView
-        isCreatingJob={isCreatingJob}
-        onClickCreate={this.onClickCreate}
-        onClose={onClose}
-        urlParams={urlParams}
-      />
-    );
-  }
-}
diff --git a/x-pack/plugins/apm/public/components/app/ServiceDetails/ServiceIntegrations/MachineLearningFlyout/view.tsx b/x-pack/plugins/apm/public/components/app/ServiceDetails/ServiceIntegrations/MachineLearningFlyout/view.tsx
deleted file mode 100644
index 72e8193ba2de..000000000000
--- a/x-pack/plugins/apm/public/components/app/ServiceDetails/ServiceIntegrations/MachineLearningFlyout/view.tsx
+++ /dev/null
@@ -1,264 +0,0 @@
-/*
- * 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 {
-  EuiButton,
-  EuiCallOut,
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiFlyout,
-  EuiFlyoutBody,
-  EuiFlyoutFooter,
-  EuiFlyoutHeader,
-  EuiFormRow,
-  EuiSpacer,
-  EuiText,
-  EuiTitle,
-} from '@elastic/eui';
-import { i18n } from '@kbn/i18n';
-import { FormattedMessage } from '@kbn/i18n/react';
-import React, { useState, useEffect } from 'react';
-import { isEmpty } from 'lodash';
-import { FETCH_STATUS, useFetcher } from '../../../../../hooks/useFetcher';
-import { getHasMLJob } from '../../../../../services/rest/ml';
-import { MLJobLink } from '../../../../shared/Links/MachineLearningLinks/MLJobLink';
-import { MLLink } from '../../../../shared/Links/MachineLearningLinks/MLLink';
-import { TransactionSelect } from './TransactionSelect';
-import { IUrlParams } from '../../../../../context/UrlParamsContext/types';
-import { useServiceTransactionTypes } from '../../../../../hooks/useServiceTransactionTypes';
-import { useApmPluginContext } from '../../../../../hooks/useApmPluginContext';
-
-interface Props {
-  isCreatingJob: boolean;
-  onClickCreate: ({ transactionType }: { transactionType: string }) => void;
-  onClose: () => void;
-  urlParams: IUrlParams;
-}
-
-export function MachineLearningFlyoutView({
-  isCreatingJob,
-  onClickCreate,
-  onClose,
-  urlParams,
-}: Props) {
-  const { serviceName } = urlParams;
-  const transactionTypes = useServiceTransactionTypes(urlParams);
-
-  const [selectedTransactionType, setSelectedTransactionType] = useState<
-    string | undefined
-  >(undefined);
-
-  const { http } = useApmPluginContext().core;
-
-  const { data: hasMLJob, status } = useFetcher(
-    () => {
-      if (serviceName && selectedTransactionType) {
-        return getHasMLJob({
-          serviceName,
-          transactionType: selectedTransactionType,
-          http,
-        });
-      }
-    },
-    [serviceName, selectedTransactionType, http],
-    { showToastOnError: false }
-  );
-
-  // update selectedTransactionType when list of transaction types has loaded
-  useEffect(() => {
-    setSelectedTransactionType(transactionTypes[0]);
-  }, [transactionTypes]);
-
-  if (!serviceName || !selectedTransactionType || isEmpty(transactionTypes)) {
-    return null;
-  }
-
-  const isLoadingMLJob = status === FETCH_STATUS.LOADING;
-  const isMlAvailable = status !== FETCH_STATUS.FAILURE;
-
-  return (
-    <EuiFlyout onClose={onClose} size="s">
-      <EuiFlyoutHeader>
-        <EuiTitle>
-          <h2>
-            {i18n.translate(
-              'xpack.apm.serviceDetails.enableAnomalyDetectionPanel.enableAnomalyDetectionTitle',
-              {
-                defaultMessage: 'Enable anomaly detection',
-              }
-            )}
-          </h2>
-        </EuiTitle>
-        <EuiSpacer size="s" />
-      </EuiFlyoutHeader>
-      <EuiFlyoutBody>
-        {!isMlAvailable && (
-          <div>
-            <EuiCallOut
-              title={i18n.translate(
-                'xpack.apm.serviceDetails.enableAnomalyDetectionPanel.callout.mlNotAvailable',
-                {
-                  defaultMessage: 'Machine learning not available',
-                }
-              )}
-              color="warning"
-              iconType="alert"
-            >
-              <p>
-                {i18n.translate(
-                  'xpack.apm.serviceDetails.enableAnomalyDetectionPanel.callout.mlNotAvailableDescription',
-                  {
-                    defaultMessage:
-                      'Unable to connect to Machine learning. Make sure it is enabled in Kibana to use anomaly detection.',
-                  }
-                )}
-              </p>
-            </EuiCallOut>
-            <EuiSpacer size="m" />
-          </div>
-        )}
-        {hasMLJob && (
-          <div>
-            <EuiCallOut
-              title={i18n.translate(
-                'xpack.apm.serviceDetails.enableAnomalyDetectionPanel.callout.jobExistsTitle',
-                {
-                  defaultMessage: 'Job already exists',
-                }
-              )}
-              color="success"
-              iconType="check"
-            >
-              <p>
-                {i18n.translate(
-                  'xpack.apm.serviceDetails.enableAnomalyDetectionPanel.callout.jobExistsDescription',
-                  {
-                    defaultMessage:
-                      'There is currently a job running for {serviceName} ({transactionType}).',
-                    values: {
-                      serviceName,
-                      transactionType: selectedTransactionType,
-                    },
-                  }
-                )}{' '}
-                <MLJobLink
-                  serviceName={serviceName}
-                  transactionType={selectedTransactionType}
-                >
-                  {i18n.translate(
-                    'xpack.apm.serviceDetails.enableAnomalyDetectionPanel.callout.jobExistsDescription.viewJobLinkText',
-                    {
-                      defaultMessage: 'View existing job',
-                    }
-                  )}
-                </MLJobLink>
-              </p>
-            </EuiCallOut>
-            <EuiSpacer size="m" />
-          </div>
-        )}
-        <EuiText>
-          <p>
-            <FormattedMessage
-              id="xpack.apm.serviceDetails.enableAnomalyDetectionPanel.createMLJobDescription"
-              defaultMessage="Create a machine learning job to calculate anomaly scores on APM transaction durations
-                    within the {serviceName} service. When enabled, anomalies are show in two places:
-                    The {transactionDurationGraphText} graph will show the expected bounds and annotate
-                    the graph if the anomaly score is &gt;=75, and {serviceMapAnnotationText} will display color
-                    coded service indicators based on the active anomaly score."
-              values={{
-                serviceName,
-                transactionDurationGraphText: (
-                  <b>
-                    {i18n.translate(
-                      'xpack.apm.serviceDetails.enableAnomalyDetectionPanel.createMLJobDescription.transactionDurationGraphText',
-                      {
-                        defaultMessage: 'transaction duration',
-                      }
-                    )}
-                  </b>
-                ),
-                serviceMapAnnotationText: (
-                  <b>
-                    {i18n.translate(
-                      'xpack.apm.serviceDetails.enableAnomalyDetectionPanel.createMLJobDescription.serviceMapAnnotationText',
-                      {
-                        defaultMessage: 'service maps',
-                      }
-                    )}
-                  </b>
-                ),
-              }}
-            />
-          </p>
-          <p>
-            <FormattedMessage
-              id="xpack.apm.serviceDetails.enableAnomalyDetectionPanel.manageMLJobDescription"
-              defaultMessage="Jobs can be created for each service and transaction type.
-                    Once a job is created, you can manage it and see more details on the {mlJobsPageLink}."
-              values={{
-                mlJobsPageLink: (
-                  <MLLink>
-                    {i18n.translate(
-                      'xpack.apm.serviceDetails.enableAnomalyDetectionPanel.manageMLJobDescription.mlJobsPageLinkText',
-                      {
-                        defaultMessage: 'Machine Learning Job Management page',
-                      }
-                    )}
-                  </MLLink>
-                ),
-              }}
-            />{' '}
-            <em>
-              {i18n.translate(
-                'xpack.apm.serviceDetails.enableAnomalyDetectionPanel.manageMLJobDescription.noteText',
-                {
-                  defaultMessage:
-                    'Note: It might take a few minutes for the job to begin calculating results.',
-                }
-              )}
-            </em>
-          </p>
-        </EuiText>
-
-        <EuiSpacer />
-      </EuiFlyoutBody>
-      <EuiFlyoutFooter>
-        <EuiFlexGroup justifyContent="spaceBetween" alignItems="flexEnd">
-          <EuiFlexItem>
-            {transactionTypes.length > 1 ? (
-              <TransactionSelect
-                selectedTransactionType={selectedTransactionType}
-                transactionTypes={transactionTypes}
-                onChange={(value: string) => {
-                  setSelectedTransactionType(value);
-                }}
-              />
-            ) : null}
-          </EuiFlexItem>
-          <EuiFlexItem grow={false}>
-            <EuiFormRow>
-              <EuiButton
-                onClick={() =>
-                  onClickCreate({ transactionType: selectedTransactionType })
-                }
-                fill
-                disabled={isCreatingJob || hasMLJob || isLoadingMLJob}
-              >
-                {i18n.translate(
-                  'xpack.apm.serviceDetails.enableAnomalyDetectionPanel.createNewJobButtonLabel',
-                  {
-                    defaultMessage: 'Create job',
-                  }
-                )}
-              </EuiButton>
-            </EuiFormRow>
-          </EuiFlexItem>
-        </EuiFlexGroup>
-      </EuiFlyoutFooter>
-    </EuiFlyout>
-  );
-}
diff --git a/x-pack/plugins/apm/public/components/app/ServiceDetails/ServiceIntegrations/index.tsx b/x-pack/plugins/apm/public/components/app/ServiceDetails/ServiceIntegrations/index.tsx
index 321617ed8496..0a7dcbd0be3d 100644
--- a/x-pack/plugins/apm/public/components/app/ServiceDetails/ServiceIntegrations/index.tsx
+++ b/x-pack/plugins/apm/public/components/app/ServiceDetails/ServiceIntegrations/index.tsx
@@ -4,18 +4,10 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import {
-  EuiButtonEmpty,
-  EuiContextMenu,
-  EuiContextMenuPanelItemDescriptor,
-  EuiPopover,
-} from '@elastic/eui';
+import { EuiButtonEmpty, EuiContextMenu, EuiPopover } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-import { memoize } from 'lodash';
-import React, { Fragment } from 'react';
+import React from 'react';
 import { IUrlParams } from '../../../../context/UrlParamsContext/types';
-import { LicenseContext } from '../../../../context/LicenseContext';
-import { MachineLearningFlyout } from './MachineLearningFlyout';
 import { WatcherFlyout } from './WatcherFlyout';
 import { ApmPluginContext } from '../../../../context/ApmPluginContext';
 
@@ -26,7 +18,7 @@ interface State {
   isPopoverOpen: boolean;
   activeFlyout: FlyoutName;
 }
-type FlyoutName = null | 'ML' | 'Watcher';
+type FlyoutName = null | 'Watcher';
 
 export class ServiceIntegrations extends React.Component<Props, State> {
   static contextType = ApmPluginContext;
@@ -34,38 +26,6 @@ export class ServiceIntegrations extends React.Component<Props, State> {
 
   public state: State = { isPopoverOpen: false, activeFlyout: null };
 
-  public getPanelItems = memoize((mlAvailable: boolean | undefined) => {
-    let panelItems: EuiContextMenuPanelItemDescriptor[] = [];
-    if (mlAvailable) {
-      panelItems = panelItems.concat(this.getMLPanelItems());
-    }
-    return panelItems.concat(this.getWatcherPanelItems());
-  });
-
-  public getMLPanelItems = () => {
-    return [
-      {
-        name: i18n.translate(
-          'xpack.apm.serviceDetails.integrationsMenu.enableMLAnomalyDetectionButtonLabel',
-          {
-            defaultMessage: 'Enable ML anomaly detection',
-          }
-        ),
-        icon: 'machineLearningApp',
-        toolTipContent: i18n.translate(
-          'xpack.apm.serviceDetails.integrationsMenu.enableMLAnomalyDetectionButtonTooltip',
-          {
-            defaultMessage: 'Set up a machine learning job for this service',
-          }
-        ),
-        onClick: () => {
-          this.closePopover();
-          this.openFlyout('ML');
-        },
-      },
-    ];
-  };
-
   public getWatcherPanelItems = () => {
     const { core } = this.context;
 
@@ -132,42 +92,31 @@ export class ServiceIntegrations extends React.Component<Props, State> {
     );
 
     return (
-      <LicenseContext.Consumer>
-        {(license) => (
-          <Fragment>
-            <EuiPopover
-              id="integrations-menu"
-              button={button}
-              isOpen={this.state.isPopoverOpen}
-              closePopover={this.closePopover}
-              panelPaddingSize="none"
-              anchorPosition="downRight"
-            >
-              <EuiContextMenu
-                initialPanelId={0}
-                panels={[
-                  {
-                    id: 0,
-                    items: this.getPanelItems(
-                      license?.getFeature('ml').isAvailable
-                    ),
-                  },
-                ]}
-              />
-            </EuiPopover>
-            <MachineLearningFlyout
-              isOpen={this.state.activeFlyout === 'ML'}
-              onClose={this.closeFlyouts}
-              urlParams={this.props.urlParams}
-            />
-            <WatcherFlyout
-              isOpen={this.state.activeFlyout === 'Watcher'}
-              onClose={this.closeFlyouts}
-              urlParams={this.props.urlParams}
-            />
-          </Fragment>
-        )}
-      </LicenseContext.Consumer>
+      <>
+        <EuiPopover
+          id="integrations-menu"
+          button={button}
+          isOpen={this.state.isPopoverOpen}
+          closePopover={this.closePopover}
+          panelPaddingSize="none"
+          anchorPosition="downRight"
+        >
+          <EuiContextMenu
+            initialPanelId={0}
+            panels={[
+              {
+                id: 0,
+                items: this.getWatcherPanelItems(),
+              },
+            ]}
+          />
+        </EuiPopover>
+        <WatcherFlyout
+          isOpen={this.state.activeFlyout === 'Watcher'}
+          onClose={this.closeFlyouts}
+          urlParams={this.props.urlParams}
+        />
+      </>
     );
   }
 }
diff --git a/x-pack/plugins/apm/public/components/app/ServiceMap/Popover/Contents.tsx b/x-pack/plugins/apm/public/components/app/ServiceMap/Popover/Contents.tsx
index ff68288916af..78779bdcc205 100644
--- a/x-pack/plugins/apm/public/components/app/ServiceMap/Popover/Contents.tsx
+++ b/x-pack/plugins/apm/public/components/app/ServiceMap/Popover/Contents.tsx
@@ -15,8 +15,6 @@ import React, { MouseEvent } from 'react';
 import { Buttons } from './Buttons';
 import { Info } from './Info';
 import { ServiceMetricFetcher } from './ServiceMetricFetcher';
-import { AnomalyDetection } from './anomaly_detection';
-import { ServiceNode } from '../../../../../common/service_map';
 import { popoverMinWidth } from '../cytoscapeOptions';
 
 interface ContentsProps {
@@ -70,12 +68,13 @@ export function Contents({
         </EuiTitle>
         <EuiHorizontalRule margin="xs" />
       </FlexColumnItem>
-      {isService && (
+      {/* //TODO [APM ML] add service health stats here:
+      isService && (
         <FlexColumnItem>
-          <AnomalyDetection serviceNodeData={selectedNodeData as ServiceNode} />
+          <ServiceHealth serviceNodeData={selectedNodeData} />
           <EuiHorizontalRule margin="xs" />
         </FlexColumnItem>
-      )}
+      )*/}
       <FlexColumnItem>
         {isService ? (
           <ServiceMetricFetcher serviceName={selectedNodeServiceName} />
diff --git a/x-pack/plugins/apm/public/components/app/ServiceMap/Popover/anomaly_detection.tsx b/x-pack/plugins/apm/public/components/app/ServiceMap/Popover/anomaly_detection.tsx
deleted file mode 100644
index 531bbb139d58..000000000000
--- a/x-pack/plugins/apm/public/components/app/ServiceMap/Popover/anomaly_detection.tsx
+++ /dev/null
@@ -1,157 +0,0 @@
-/*
- * 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 { i18n } from '@kbn/i18n';
-import React from 'react';
-import styled from 'styled-components';
-import {
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiTitle,
-  EuiIconTip,
-  EuiHealth,
-} from '@elastic/eui';
-import { useTheme } from '../../../../hooks/useTheme';
-import { fontSize, px } from '../../../../style/variables';
-import { asInteger } from '../../../../utils/formatters';
-import { MLJobLink } from '../../../shared/Links/MachineLearningLinks/MLJobLink';
-import { getSeverityColor, popoverMinWidth } from '../cytoscapeOptions';
-import { getMetricChangeDescription } from '../../../../../../ml/public';
-import { ServiceNode } from '../../../../../common/service_map';
-
-const HealthStatusTitle = styled(EuiTitle)`
-  display: inline;
-  text-transform: uppercase;
-`;
-
-const VerticallyCentered = styled.div`
-  display: flex;
-  align-items: center;
-`;
-
-const SubduedText = styled.span`
-  color: ${({ theme }) => theme.eui.euiTextSubduedColor};
-`;
-
-const EnableText = styled.section`
-  color: ${({ theme }) => theme.eui.euiTextSubduedColor};
-  line-height: 1.4;
-  font-size: ${fontSize};
-  width: ${px(popoverMinWidth)};
-`;
-
-export const ContentLine = styled.section`
-  line-height: 2;
-`;
-
-interface AnomalyDetectionProps {
-  serviceNodeData: cytoscape.NodeDataDefinition & ServiceNode;
-}
-
-export function AnomalyDetection({ serviceNodeData }: AnomalyDetectionProps) {
-  const theme = useTheme();
-  const anomalySeverity = serviceNodeData.anomaly_severity;
-  const anomalyScore = serviceNodeData.anomaly_score;
-  const actualValue = serviceNodeData.actual_value;
-  const typicalValue = serviceNodeData.typical_value;
-  const mlJobId = serviceNodeData.ml_job_id;
-  const hasAnomalyDetectionScore =
-    anomalySeverity !== undefined && anomalyScore !== undefined;
-  const anomalyDescription =
-    hasAnomalyDetectionScore &&
-    actualValue !== undefined &&
-    typicalValue !== undefined
-      ? getMetricChangeDescription(actualValue, typicalValue).message
-      : null;
-
-  return (
-    <>
-      <section>
-        <HealthStatusTitle size="xxs">
-          <h3>{ANOMALY_DETECTION_TITLE}</h3>
-        </HealthStatusTitle>
-        &nbsp;
-        <EuiIconTip type="iInCircle" content={ANOMALY_DETECTION_TOOLTIP} />
-        {!mlJobId && <EnableText>{ANOMALY_DETECTION_DISABLED_TEXT}</EnableText>}
-      </section>
-      {hasAnomalyDetectionScore && (
-        <ContentLine>
-          <EuiFlexGroup>
-            <EuiFlexItem>
-              <VerticallyCentered>
-                <EuiHealth color={getSeverityColor(theme, anomalySeverity)} />
-                <SubduedText>{ANOMALY_DETECTION_SCORE_METRIC}</SubduedText>
-              </VerticallyCentered>
-            </EuiFlexItem>
-            <EuiFlexItem grow={false}>
-              <div>
-                {getDisplayedAnomalyScore(anomalyScore as number)}
-                {anomalyDescription && (
-                  <SubduedText>&nbsp;({anomalyDescription})</SubduedText>
-                )}
-              </div>
-            </EuiFlexItem>
-          </EuiFlexGroup>
-        </ContentLine>
-      )}
-      {mlJobId && !hasAnomalyDetectionScore && (
-        <EnableText>{ANOMALY_DETECTION_NO_DATA_TEXT}</EnableText>
-      )}
-      {mlJobId && (
-        <ContentLine>
-          <MLJobLink external jobId={mlJobId}>
-            {ANOMALY_DETECTION_LINK}
-          </MLJobLink>
-        </ContentLine>
-      )}
-    </>
-  );
-}
-
-function getDisplayedAnomalyScore(score: number) {
-  if (score > 0 && score < 1) {
-    return '< 1';
-  }
-  return asInteger(score);
-}
-
-const ANOMALY_DETECTION_TITLE = i18n.translate(
-  'xpack.apm.serviceMap.anomalyDetectionPopoverTitle',
-  { defaultMessage: 'Anomaly Detection' }
-);
-
-const ANOMALY_DETECTION_TOOLTIP = i18n.translate(
-  'xpack.apm.serviceMap.anomalyDetectionPopoverTooltip',
-  {
-    defaultMessage:
-      'Service health indicators are powered by the anomaly detection feature in machine learning',
-  }
-);
-
-const ANOMALY_DETECTION_SCORE_METRIC = i18n.translate(
-  'xpack.apm.serviceMap.anomalyDetectionPopoverScoreMetric',
-  { defaultMessage: 'Score (max.)' }
-);
-
-const ANOMALY_DETECTION_LINK = i18n.translate(
-  'xpack.apm.serviceMap.anomalyDetectionPopoverLink',
-  { defaultMessage: 'View anomalies' }
-);
-
-const ANOMALY_DETECTION_DISABLED_TEXT = i18n.translate(
-  'xpack.apm.serviceMap.anomalyDetectionPopoverDisabled',
-  {
-    defaultMessage:
-      'Display service health indicators by enabling anomaly detection from the Integrations menu in the Service details view.',
-  }
-);
-
-const ANOMALY_DETECTION_NO_DATA_TEXT = i18n.translate(
-  'xpack.apm.serviceMap.anomalyDetectionPopoverNoData',
-  {
-    defaultMessage: `We couldn't find an anomaly score within the selected time range. See details in the anomaly explorer.`,
-  }
-);
diff --git a/x-pack/plugins/apm/public/components/app/TransactionOverview/index.tsx b/x-pack/plugins/apm/public/components/app/TransactionOverview/index.tsx
index 9018fbb2bc41..fc5347d08131 100644
--- a/x-pack/plugins/apm/public/components/app/TransactionOverview/index.tsx
+++ b/x-pack/plugins/apm/public/components/app/TransactionOverview/index.tsx
@@ -22,8 +22,6 @@ import { TransactionCharts } from '../../shared/charts/TransactionCharts';
 import { TransactionBreakdown } from '../../shared/TransactionBreakdown';
 import { TransactionList } from './List';
 import { useRedirect } from './useRedirect';
-import { useFetcher } from '../../../hooks/useFetcher';
-import { getHasMLJob } from '../../../services/rest/ml';
 import { history } from '../../../utils/history';
 import { useLocation } from '../../../hooks/useLocation';
 import { ChartsSyncContextProvider } from '../../../context/ChartsSyncContext';
@@ -34,7 +32,6 @@ import { PROJECTION } from '../../../../common/projections/typings';
 import { useUrlParams } from '../../../hooks/useUrlParams';
 import { useServiceTransactionTypes } from '../../../hooks/useServiceTransactionTypes';
 import { TransactionTypeFilter } from '../../shared/LocalUIFilters/TransactionTypeFilter';
-import { useApmPluginContext } from '../../../hooks/useApmPluginContext';
 
 function getRedirectLocation({
   urlParams,
@@ -86,18 +83,6 @@ export function TransactionOverview() {
     status: transactionListStatus,
   } = useTransactionList(urlParams);
 
-  const { http } = useApmPluginContext().core;
-
-  const { data: hasMLJob = false } = useFetcher(
-    () => {
-      if (serviceName && transactionType) {
-        return getHasMLJob({ serviceName, transactionType, http });
-      }
-    },
-    [http, serviceName, transactionType],
-    { showToastOnError: false }
-  );
-
   const localFiltersConfig: React.ComponentProps<typeof LocalUIFilters> = useMemo(
     () => ({
       filterNames: [
@@ -140,7 +125,8 @@ export function TransactionOverview() {
             <EuiSpacer size="s" />
 
             <TransactionCharts
-              hasMLJob={hasMLJob}
+              // TODO [APM ML] set hasMLJob prop when ML integration is reintroduced:
+              hasMLJob={false}
               charts={transactionCharts}
               location={location}
               urlParams={urlParams}
diff --git a/x-pack/plugins/apm/public/components/shared/Links/MachineLearningLinks/MLJobLink.test.tsx b/x-pack/plugins/apm/public/components/shared/Links/MachineLearningLinks/MLJobLink.test.tsx
index 9065f20ae600..b4cf3a65fea3 100644
--- a/x-pack/plugins/apm/public/components/shared/Links/MachineLearningLinks/MLJobLink.test.tsx
+++ b/x-pack/plugins/apm/public/components/shared/Links/MachineLearningLinks/MLJobLink.test.tsx
@@ -10,21 +10,6 @@ import { getRenderedHref } from '../../../../utils/testHelpers';
 import { MLJobLink } from './MLJobLink';
 
 describe('MLJobLink', () => {
-  it('should produce the correct URL with serviceName', async () => {
-    const href = await getRenderedHref(
-      () => (
-        <MLJobLink
-          serviceName="myServiceName"
-          transactionType="myTransactionType"
-        />
-      ),
-      { search: '?rangeFrom=now/w&rangeTo=now-4h' } as Location
-    );
-
-    expect(href).toEqual(
-      `/basepath/app/ml#/timeseriesexplorer?_g=(ml:(jobIds:!(myservicename-mytransactiontype-high_mean_response_time)),refreshInterval:(pause:true,value:'0'),time:(from:now%2Fw,to:now-4h))`
-    );
-  });
   it('should produce the correct URL with jobId', async () => {
     const href = await getRenderedHref(
       () => (
diff --git a/x-pack/plugins/apm/public/components/shared/Links/MachineLearningLinks/MLJobLink.tsx b/x-pack/plugins/apm/public/components/shared/Links/MachineLearningLinks/MLJobLink.tsx
index 346748964d52..1e1f9ea5f23b 100644
--- a/x-pack/plugins/apm/public/components/shared/Links/MachineLearningLinks/MLJobLink.tsx
+++ b/x-pack/plugins/apm/public/components/shared/Links/MachineLearningLinks/MLJobLink.tsx
@@ -5,28 +5,16 @@
  */
 
 import React from 'react';
-import { getMlJobId } from '../../../../../common/ml_job_constants';
 import { MLLink } from './MLLink';
 
-interface PropsServiceName {
-  serviceName: string;
-  transactionType?: string;
-}
-interface PropsJobId {
+interface Props {
   jobId: string;
-}
-
-type Props = (PropsServiceName | PropsJobId) & {
   external?: boolean;
-};
+}
 
 export const MLJobLink: React.FC<Props> = (props) => {
-  const jobId =
-    'jobId' in props
-      ? props.jobId
-      : getMlJobId(props.serviceName, props.transactionType);
   const query = {
-    ml: { jobIds: [jobId] },
+    ml: { jobIds: [props.jobId] },
   };
 
   return (
diff --git a/x-pack/plugins/apm/public/components/shared/charts/TransactionCharts/index.tsx b/x-pack/plugins/apm/public/components/shared/charts/TransactionCharts/index.tsx
index 4821e06419e3..00ff6f996972 100644
--- a/x-pack/plugins/apm/public/components/shared/charts/TransactionCharts/index.tsx
+++ b/x-pack/plugins/apm/public/components/shared/charts/TransactionCharts/index.tsx
@@ -101,11 +101,13 @@ export class TransactionCharts extends Component<TransactionChartProps> {
       return null;
     }
 
-    const { serviceName, transactionType, kuery } = this.props.urlParams;
+    const { serviceName, kuery } = this.props.urlParams;
     if (!serviceName) {
       return null;
     }
 
+    const linkedJobId = ''; // TODO [APM ML] link to ML job id for the selected environment
+
     const hasKuery = !isEmpty(kuery);
     const icon = hasKuery ? (
       <EuiIconTip
@@ -138,12 +140,7 @@ export class TransactionCharts extends Component<TransactionChartProps> {
               }
             )}{' '}
           </span>
-          <MLJobLink
-            serviceName={serviceName}
-            transactionType={transactionType}
-          >
-            View Job
-          </MLJobLink>
+          <MLJobLink jobId={linkedJobId}>View Job</MLJobLink>
         </ShiftedEuiText>
       </EuiFlexItem>
     );
diff --git a/x-pack/plugins/apm/public/services/rest/ml.ts b/x-pack/plugins/apm/public/services/rest/ml.ts
deleted file mode 100644
index 47032501d9fb..000000000000
--- a/x-pack/plugins/apm/public/services/rest/ml.ts
+++ /dev/null
@@ -1,123 +0,0 @@
-/*
- * 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 { HttpSetup } from 'kibana/public';
-import {
-  PROCESSOR_EVENT,
-  SERVICE_NAME,
-  TRANSACTION_TYPE,
-} from '../../../common/elasticsearch_fieldnames';
-import {
-  APM_ML_JOB_GROUP_NAME,
-  getMlJobId,
-  getMlPrefix,
-  encodeForMlApi,
-} from '../../../common/ml_job_constants';
-import { callApi } from './callApi';
-import { ESFilter } from '../../../typings/elasticsearch';
-import { callApmApi } from './createCallApmApi';
-
-interface MlResponseItem {
-  id: string;
-  success: boolean;
-  error?: {
-    msg: string;
-    body: string;
-    path: string;
-    response: string;
-    statusCode: number;
-  };
-}
-
-interface StartedMLJobApiResponse {
-  datafeeds: MlResponseItem[];
-  jobs: MlResponseItem[];
-}
-
-async function getTransactionIndices() {
-  const indices = await callApmApi({
-    method: 'GET',
-    pathname: `/api/apm/settings/apm-indices`,
-  });
-  return indices['apm_oss.transactionIndices'];
-}
-
-export async function startMLJob({
-  serviceName,
-  transactionType,
-  http,
-}: {
-  serviceName: string;
-  transactionType: string;
-  http: HttpSetup;
-}) {
-  const transactionIndices = await getTransactionIndices();
-  const groups = [
-    APM_ML_JOB_GROUP_NAME,
-    encodeForMlApi(serviceName),
-    encodeForMlApi(transactionType),
-  ];
-  const filter: ESFilter[] = [
-    { term: { [SERVICE_NAME]: serviceName } },
-    { term: { [PROCESSOR_EVENT]: 'transaction' } },
-    { term: { [TRANSACTION_TYPE]: transactionType } },
-  ];
-  return callApi<StartedMLJobApiResponse>(http, {
-    method: 'POST',
-    pathname: `/api/ml/modules/setup/apm_transaction`,
-    body: {
-      prefix: getMlPrefix(serviceName, transactionType),
-      groups,
-      indexPatternName: transactionIndices,
-      startDatafeed: true,
-      query: {
-        bool: {
-          filter,
-        },
-      },
-    },
-  });
-}
-
-// https://www.elastic.co/guide/en/elasticsearch/reference/6.5/ml-get-job.html
-export interface MLJobApiResponse {
-  count: number;
-  jobs: Array<{
-    job_id: string;
-  }>;
-}
-
-export type MLError = Error & { body?: { message?: string } };
-
-export async function getHasMLJob({
-  serviceName,
-  transactionType,
-  http,
-}: {
-  serviceName: string;
-  transactionType: string;
-  http: HttpSetup;
-}) {
-  try {
-    await callApi<MLJobApiResponse>(http, {
-      method: 'GET',
-      pathname: `/api/ml/anomaly_detectors/${getMlJobId(
-        serviceName,
-        transactionType
-      )}`,
-    });
-    return true;
-  } catch (error) {
-    if (
-      error?.body?.statusCode === 404 &&
-      error?.body?.attributes?.body?.error?.type ===
-        'resource_not_found_exception'
-    ) {
-      return false; // false only if ML api responds with resource_not_found_exception
-    }
-    throw error;
-  }
-}
diff --git a/x-pack/plugins/apm/server/lib/service_map/get_service_anomalies.test.ts b/x-pack/plugins/apm/server/lib/service_map/get_service_anomalies.test.ts
deleted file mode 100644
index aefd074c373f..000000000000
--- a/x-pack/plugins/apm/server/lib/service_map/get_service_anomalies.test.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-/*
- * 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 { getApmMlJobCategory } from './get_service_anomalies';
-import { Job as AnomalyDetectionJob } from '../../../../ml/server';
-
-describe('getApmMlJobCategory', () => {
-  it('should match service names with different casings', () => {
-    const mlJob = {
-      job_id: 'testservice-request-high_mean_response_time',
-      groups: ['apm', 'testservice', 'request'],
-    } as AnomalyDetectionJob;
-    const serviceNames = ['testService'];
-    const apmMlJobCategory = getApmMlJobCategory(mlJob, serviceNames);
-
-    expect(apmMlJobCategory).toEqual({
-      jobId: 'testservice-request-high_mean_response_time',
-      serviceName: 'testService',
-      transactionType: 'request',
-    });
-  });
-
-  it('should match service names with spaces', () => {
-    const mlJob = {
-      job_id: 'test_service-request-high_mean_response_time',
-      groups: ['apm', 'test_service', 'request'],
-    } as AnomalyDetectionJob;
-    const serviceNames = ['Test Service'];
-    const apmMlJobCategory = getApmMlJobCategory(mlJob, serviceNames);
-
-    expect(apmMlJobCategory).toEqual({
-      jobId: 'test_service-request-high_mean_response_time',
-      serviceName: 'Test Service',
-      transactionType: 'request',
-    });
-  });
-});
diff --git a/x-pack/plugins/apm/server/lib/service_map/get_service_anomalies.ts b/x-pack/plugins/apm/server/lib/service_map/get_service_anomalies.ts
deleted file mode 100644
index 900141e9040a..000000000000
--- a/x-pack/plugins/apm/server/lib/service_map/get_service_anomalies.ts
+++ /dev/null
@@ -1,166 +0,0 @@
-/*
- * 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 { intersection } from 'lodash';
-import { leftJoin } from '../../../common/utils/left_join';
-import { Job as AnomalyDetectionJob } from '../../../../ml/server';
-import { PromiseReturnType } from '../../../typings/common';
-import { IEnvOptions } from './get_service_map';
-import { Setup } from '../helpers/setup_request';
-import {
-  APM_ML_JOB_GROUP_NAME,
-  encodeForMlApi,
-} from '../../../common/ml_job_constants';
-
-async function getApmAnomalyDetectionJobs(
-  setup: Setup
-): Promise<AnomalyDetectionJob[]> {
-  const { ml } = setup;
-
-  if (!ml) {
-    return [];
-  }
-  try {
-    const { jobs } = await ml.anomalyDetectors.jobs(APM_ML_JOB_GROUP_NAME);
-    return jobs;
-  } catch (error) {
-    if (error.statusCode === 404) {
-      return [];
-    }
-    throw error;
-  }
-}
-
-type ApmMlJobCategory = NonNullable<ReturnType<typeof getApmMlJobCategory>>;
-
-export const getApmMlJobCategory = (
-  mlJob: AnomalyDetectionJob,
-  serviceNames: string[]
-) => {
-  const serviceByGroupNameMap = new Map(
-    serviceNames.map((serviceName) => [
-      encodeForMlApi(serviceName),
-      serviceName,
-    ])
-  );
-  if (!mlJob.groups.includes(APM_ML_JOB_GROUP_NAME)) {
-    // ML job missing "apm" group name
-    return;
-  }
-  const apmJobGroups = mlJob.groups.filter(
-    (groupName) => groupName !== APM_ML_JOB_GROUP_NAME
-  );
-  const apmJobServiceNames = apmJobGroups.map(
-    (groupName) => serviceByGroupNameMap.get(groupName) || groupName
-  );
-  const [serviceName] = intersection(apmJobServiceNames, serviceNames);
-  if (!serviceName) {
-    // APM ML job service was not found
-    return;
-  }
-  const serviceGroupName = encodeForMlApi(serviceName);
-  const [transactionType] = apmJobGroups.filter(
-    (groupName) => groupName !== serviceGroupName
-  );
-  if (!transactionType) {
-    // APM ML job transaction type was not found.
-    return;
-  }
-  return { jobId: mlJob.job_id, serviceName, transactionType };
-};
-
-export type ServiceAnomalies = PromiseReturnType<typeof getServiceAnomalies>;
-
-export async function getServiceAnomalies(
-  options: IEnvOptions,
-  serviceNames: string[]
-) {
-  const { start, end, ml } = options.setup;
-
-  if (!ml || serviceNames.length === 0) {
-    return [];
-  }
-
-  const apmMlJobs = await getApmAnomalyDetectionJobs(options.setup);
-  if (apmMlJobs.length === 0) {
-    return [];
-  }
-  const apmMlJobCategories = apmMlJobs
-    .map((job) => getApmMlJobCategory(job, serviceNames))
-    .filter(
-      (apmJobCategory) => apmJobCategory !== undefined
-    ) as ApmMlJobCategory[];
-  const apmJobIds = apmMlJobs.map((job) => job.job_id);
-  const params = {
-    body: {
-      size: 0,
-      query: {
-        bool: {
-          filter: [
-            { term: { result_type: 'record' } },
-            {
-              terms: {
-                job_id: apmJobIds,
-              },
-            },
-            {
-              range: {
-                timestamp: { gte: start, lte: end, format: 'epoch_millis' },
-              },
-            },
-          ],
-        },
-      },
-      aggs: {
-        jobs: {
-          terms: { field: 'job_id', size: apmJobIds.length },
-          aggs: {
-            top_score_hits: {
-              top_hits: {
-                sort: [{ record_score: { order: 'desc' as const } }],
-                _source: ['record_score', 'timestamp', 'typical', 'actual'],
-                size: 1,
-              },
-            },
-          },
-        },
-      },
-    },
-  };
-
-  const response = (await ml.mlSystem.mlAnomalySearch(params)) as {
-    aggregations: {
-      jobs: {
-        buckets: Array<{
-          key: string;
-          top_score_hits: {
-            hits: {
-              hits: Array<{
-                _source: {
-                  record_score: number;
-                  timestamp: number;
-                  typical: number[];
-                  actual: number[];
-                };
-              }>;
-            };
-          };
-        }>;
-      };
-    };
-  };
-  const anomalyScores = response.aggregations.jobs.buckets.map((jobBucket) => {
-    const jobId = jobBucket.key;
-    const bucketSource = jobBucket.top_score_hits.hits.hits?.[0]?._source;
-    return {
-      jobId,
-      anomalyScore: bucketSource.record_score,
-      timestamp: bucketSource.timestamp,
-      typical: bucketSource.typical[0],
-      actual: bucketSource.actual[0],
-    };
-  });
-  return leftJoin(apmMlJobCategories, 'jobId', anomalyScores);
-}
diff --git a/x-pack/plugins/apm/server/lib/service_map/get_service_map.ts b/x-pack/plugins/apm/server/lib/service_map/get_service_map.ts
index 9f3ded82d7cb..4d488cd1a550 100644
--- a/x-pack/plugins/apm/server/lib/service_map/get_service_map.ts
+++ b/x-pack/plugins/apm/server/lib/service_map/get_service_map.ts
@@ -13,14 +13,9 @@ import { getServicesProjection } from '../../../common/projections/services';
 import { mergeProjection } from '../../../common/projections/util/merge_projection';
 import { PromiseReturnType } from '../../../typings/common';
 import { Setup, SetupTimeRange } from '../helpers/setup_request';
-import {
-  transformServiceMapResponses,
-  getAllNodes,
-  getServiceNodes,
-} from './transform_service_map_responses';
+import { transformServiceMapResponses } from './transform_service_map_responses';
 import { getServiceMapFromTraceIds } from './get_service_map_from_trace_ids';
 import { getTraceSampleIds } from './get_trace_sample_ids';
-import { getServiceAnomalies, ServiceAnomalies } from './get_service_anomalies';
 
 export interface IEnvOptions {
   setup: Setup & SetupTimeRange;
@@ -132,7 +127,6 @@ async function getServicesData(options: IEnvOptions) {
   );
 }
 
-export { ServiceAnomalies };
 export type ConnectionsResponse = PromiseReturnType<typeof getConnectionData>;
 export type ServicesResponse = PromiseReturnType<typeof getServicesData>;
 export type ServiceMapAPIResponse = PromiseReturnType<typeof getServiceMap>;
@@ -143,19 +137,8 @@ export async function getServiceMap(options: IEnvOptions) {
     getServicesData(options),
   ]);
 
-  // Derive all related service names from connection and service data
-  const allNodes = getAllNodes(servicesData, connectionData.connections);
-  const serviceNodes = getServiceNodes(allNodes);
-  const serviceNames = serviceNodes.map(
-    (serviceData) => serviceData[SERVICE_NAME]
-  );
-
-  // Get related service anomalies
-  const serviceAnomalies = await getServiceAnomalies(options, serviceNames);
-
   return transformServiceMapResponses({
     ...connectionData,
-    anomalies: serviceAnomalies,
     services: servicesData,
   });
 }
diff --git a/x-pack/plugins/apm/server/lib/service_map/ml_helpers.test.ts b/x-pack/plugins/apm/server/lib/service_map/ml_helpers.test.ts
deleted file mode 100644
index f07b575cc0a3..000000000000
--- a/x-pack/plugins/apm/server/lib/service_map/ml_helpers.test.ts
+++ /dev/null
@@ -1,76 +0,0 @@
-/*
- * 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 { ServiceAnomalies } from './get_service_map';
-import { addAnomaliesDataToNodes } from './ml_helpers';
-
-describe('addAnomaliesDataToNodes', () => {
-  it('adds anomalies to nodes', () => {
-    const nodes = [
-      {
-        'service.name': 'opbeans-ruby',
-        'agent.name': 'ruby',
-        'service.environment': null,
-      },
-      {
-        'service.name': 'opbeans-java',
-        'agent.name': 'java',
-        'service.environment': null,
-      },
-    ];
-
-    const serviceAnomalies: ServiceAnomalies = [
-      {
-        jobId: 'opbeans-ruby-request-high_mean_response_time',
-        serviceName: 'opbeans-ruby',
-        transactionType: 'request',
-        anomalyScore: 50,
-        timestamp: 1591351200000,
-        actual: 2000,
-        typical: 1000,
-      },
-      {
-        jobId: 'opbeans-java-request-high_mean_response_time',
-        serviceName: 'opbeans-java',
-        transactionType: 'request',
-        anomalyScore: 100,
-        timestamp: 1591351200000,
-        actual: 9000,
-        typical: 3000,
-      },
-    ];
-
-    const result = [
-      {
-        'service.name': 'opbeans-ruby',
-        'agent.name': 'ruby',
-        'service.environment': null,
-        anomaly_score: 50,
-        anomaly_severity: 'major',
-        actual_value: 2000,
-        typical_value: 1000,
-        ml_job_id: 'opbeans-ruby-request-high_mean_response_time',
-      },
-      {
-        'service.name': 'opbeans-java',
-        'agent.name': 'java',
-        'service.environment': null,
-        anomaly_score: 100,
-        anomaly_severity: 'critical',
-        actual_value: 9000,
-        typical_value: 3000,
-        ml_job_id: 'opbeans-java-request-high_mean_response_time',
-      },
-    ];
-
-    expect(
-      addAnomaliesDataToNodes(
-        nodes,
-        (serviceAnomalies as unknown) as ServiceAnomalies
-      )
-    ).toEqual(result);
-  });
-});
diff --git a/x-pack/plugins/apm/server/lib/service_map/ml_helpers.ts b/x-pack/plugins/apm/server/lib/service_map/ml_helpers.ts
deleted file mode 100644
index 8162417616b6..000000000000
--- a/x-pack/plugins/apm/server/lib/service_map/ml_helpers.ts
+++ /dev/null
@@ -1,67 +0,0 @@
-/*
- * 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 { SERVICE_NAME } from '../../../common/elasticsearch_fieldnames';
-import { getSeverity } from '../../../common/ml_job_constants';
-import { ConnectionNode, ServiceNode } from '../../../common/service_map';
-import { ServiceAnomalies } from './get_service_map';
-
-export function addAnomaliesDataToNodes(
-  nodes: ConnectionNode[],
-  serviceAnomalies: ServiceAnomalies
-) {
-  const anomaliesMap = serviceAnomalies.reduce(
-    (acc, anomalyJob) => {
-      const serviceAnomaly: typeof acc[string] | undefined =
-        acc[anomalyJob.serviceName];
-      const hasAnomalyJob = serviceAnomaly !== undefined;
-      const hasAnomalyScore = serviceAnomaly?.anomaly_score !== undefined;
-      const hasNewAnomalyScore = anomalyJob.anomalyScore !== undefined;
-      const hasNewMaxAnomalyScore =
-        hasNewAnomalyScore &&
-        (!hasAnomalyScore ||
-          (anomalyJob?.anomalyScore ?? 0) >
-            (serviceAnomaly?.anomaly_score ?? 0));
-
-      if (!hasAnomalyJob || hasNewMaxAnomalyScore) {
-        acc[anomalyJob.serviceName] = {
-          anomaly_score: anomalyJob.anomalyScore,
-          actual_value: anomalyJob.actual,
-          typical_value: anomalyJob.typical,
-          ml_job_id: anomalyJob.jobId,
-        };
-      }
-
-      return acc;
-    },
-    {} as {
-      [serviceName: string]: {
-        anomaly_score?: number;
-        actual_value?: number;
-        typical_value?: number;
-        ml_job_id: string;
-      };
-    }
-  );
-
-  const servicesDataWithAnomalies: ServiceNode[] = nodes.map((service) => {
-    const serviceAnomaly = anomaliesMap[service[SERVICE_NAME]];
-    if (serviceAnomaly) {
-      const anomalyScore = serviceAnomaly.anomaly_score;
-      return {
-        ...service,
-        anomaly_score: anomalyScore,
-        anomaly_severity: getSeverity(anomalyScore),
-        actual_value: serviceAnomaly.actual_value,
-        typical_value: serviceAnomaly.typical_value,
-        ml_job_id: serviceAnomaly.ml_job_id,
-      };
-    }
-    return service;
-  });
-
-  return servicesDataWithAnomalies;
-}
diff --git a/x-pack/plugins/apm/server/lib/service_map/transform_service_map_responses.test.ts b/x-pack/plugins/apm/server/lib/service_map/transform_service_map_responses.test.ts
index 6c9880c2dc4d..1e26634bdf0f 100644
--- a/x-pack/plugins/apm/server/lib/service_map/transform_service_map_responses.test.ts
+++ b/x-pack/plugins/apm/server/lib/service_map/transform_service_map_responses.test.ts
@@ -12,7 +12,6 @@ import {
   SPAN_SUBTYPE,
   SPAN_TYPE,
 } from '../../../common/elasticsearch_fieldnames';
-import { ServiceAnomalies } from './get_service_map';
 import {
   transformServiceMapResponses,
   ServiceMapResponse,
@@ -36,12 +35,9 @@ const javaService = {
   [AGENT_NAME]: 'java',
 };
 
-const serviceAnomalies: ServiceAnomalies = [];
-
 describe('transformServiceMapResponses', () => {
   it('maps external destinations to internal services', () => {
     const response: ServiceMapResponse = {
-      anomalies: serviceAnomalies,
       services: [nodejsService, javaService],
       discoveredServices: [
         {
@@ -73,7 +69,6 @@ describe('transformServiceMapResponses', () => {
 
   it('collapses external destinations based on span.destination.resource.name', () => {
     const response: ServiceMapResponse = {
-      anomalies: serviceAnomalies,
       services: [nodejsService, javaService],
       discoveredServices: [
         {
@@ -109,7 +104,6 @@ describe('transformServiceMapResponses', () => {
 
   it('picks the first span.type/subtype in an alphabetically sorted list', () => {
     const response: ServiceMapResponse = {
-      anomalies: serviceAnomalies,
       services: [javaService],
       discoveredServices: [],
       connections: [
@@ -148,7 +142,6 @@ describe('transformServiceMapResponses', () => {
 
   it('processes connections without a matching "service" aggregation', () => {
     const response: ServiceMapResponse = {
-      anomalies: serviceAnomalies,
       services: [javaService],
       discoveredServices: [],
       connections: [
diff --git a/x-pack/plugins/apm/server/lib/service_map/transform_service_map_responses.ts b/x-pack/plugins/apm/server/lib/service_map/transform_service_map_responses.ts
index 53abf54cbcf3..835c00b8df23 100644
--- a/x-pack/plugins/apm/server/lib/service_map/transform_service_map_responses.ts
+++ b/x-pack/plugins/apm/server/lib/service_map/transform_service_map_responses.ts
@@ -17,12 +17,7 @@ import {
   ServiceConnectionNode,
   ExternalConnectionNode,
 } from '../../../common/service_map';
-import {
-  ConnectionsResponse,
-  ServicesResponse,
-  ServiceAnomalies,
-} from './get_service_map';
-import { addAnomaliesDataToNodes } from './ml_helpers';
+import { ConnectionsResponse, ServicesResponse } from './get_service_map';
 
 function getConnectionNodeId(node: ConnectionNode): string {
   if ('span.destination.service.resource' in node) {
@@ -67,12 +62,11 @@ export function getServiceNodes(allNodes: ConnectionNode[]) {
 }
 
 export type ServiceMapResponse = ConnectionsResponse & {
-  anomalies: ServiceAnomalies;
   services: ServicesResponse;
 };
 
 export function transformServiceMapResponses(response: ServiceMapResponse) {
-  const { anomalies, discoveredServices, services, connections } = response;
+  const { discoveredServices, services, connections } = response;
 
   const allNodes = getAllNodes(services, connections);
   const serviceNodes = getServiceNodes(allNodes);
@@ -214,18 +208,10 @@ export function transformServiceMapResponses(response: ServiceMapResponse) {
     return prev.concat(connection);
   }, []);
 
-  // Add anomlies data
-  const dedupedNodesWithAnomliesData = addAnomaliesDataToNodes(
-    dedupedNodes,
-    anomalies
-  );
-
   // Put everything together in elements, with everything in the "data" property
-  const elements = [...dedupedConnections, ...dedupedNodesWithAnomliesData].map(
-    (element) => ({
-      data: element,
-    })
-  );
+  const elements = [...dedupedConnections, ...dedupedNodes].map((element) => ({
+    data: element,
+  }));
 
   return { elements };
 }
diff --git a/x-pack/plugins/apm/server/lib/transactions/charts/get_anomaly_data/__snapshots__/fetcher.test.ts.snap b/x-pack/plugins/apm/server/lib/transactions/charts/get_anomaly_data/__snapshots__/fetcher.test.ts.snap
deleted file mode 100644
index cf3fdac221b5..000000000000
--- a/x-pack/plugins/apm/server/lib/transactions/charts/get_anomaly_data/__snapshots__/fetcher.test.ts.snap
+++ /dev/null
@@ -1,68 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`anomalyAggsFetcher when ES returns valid response should call client with correct query 1`] = `
-Array [
-  Array [
-    Object {
-      "body": Object {
-        "aggs": Object {
-          "ml_avg_response_times": Object {
-            "aggs": Object {
-              "anomaly_score": Object {
-                "max": Object {
-                  "field": "anomaly_score",
-                },
-              },
-              "lower": Object {
-                "min": Object {
-                  "field": "model_lower",
-                },
-              },
-              "upper": Object {
-                "max": Object {
-                  "field": "model_upper",
-                },
-              },
-            },
-            "date_histogram": Object {
-              "extended_bounds": Object {
-                "max": 200000,
-                "min": 90000,
-              },
-              "field": "timestamp",
-              "fixed_interval": "myInterval",
-              "min_doc_count": 0,
-            },
-          },
-        },
-        "query": Object {
-          "bool": Object {
-            "filter": Array [
-              Object {
-                "term": Object {
-                  "job_id": "myservicename-mytransactiontype-high_mean_response_time",
-                },
-              },
-              Object {
-                "exists": Object {
-                  "field": "bucket_span",
-                },
-              },
-              Object {
-                "range": Object {
-                  "timestamp": Object {
-                    "format": "epoch_millis",
-                    "gte": 90000,
-                    "lte": 200000,
-                  },
-                },
-              },
-            ],
-          },
-        },
-        "size": 0,
-      },
-    },
-  ],
-]
-`;
diff --git a/x-pack/plugins/apm/server/lib/transactions/charts/get_anomaly_data/__snapshots__/index.test.ts.snap b/x-pack/plugins/apm/server/lib/transactions/charts/get_anomaly_data/__snapshots__/index.test.ts.snap
deleted file mode 100644
index 971fa3b92cc8..000000000000
--- a/x-pack/plugins/apm/server/lib/transactions/charts/get_anomaly_data/__snapshots__/index.test.ts.snap
+++ /dev/null
@@ -1,38 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`getAnomalySeries should match snapshot 1`] = `
-Object {
-  "anomalyBoundaries": Array [
-    Object {
-      "x": 5000,
-      "y": 200,
-      "y0": 20,
-    },
-    Object {
-      "x": 15000,
-      "y": 100,
-      "y0": 20,
-    },
-    Object {
-      "x": 25000,
-      "y": 50,
-      "y0": 10,
-    },
-    Object {
-      "x": 30000,
-      "y": 50,
-      "y0": 10,
-    },
-  ],
-  "anomalyScore": Array [
-    Object {
-      "x": 25000,
-      "x0": 15000,
-    },
-    Object {
-      "x": 35000,
-      "x0": 25000,
-    },
-  ],
-}
-`;
diff --git a/x-pack/plugins/apm/server/lib/transactions/charts/get_anomaly_data/__snapshots__/transform.test.ts.snap b/x-pack/plugins/apm/server/lib/transactions/charts/get_anomaly_data/__snapshots__/transform.test.ts.snap
deleted file mode 100644
index 8cf471cb34ed..000000000000
--- a/x-pack/plugins/apm/server/lib/transactions/charts/get_anomaly_data/__snapshots__/transform.test.ts.snap
+++ /dev/null
@@ -1,33 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`anomalySeriesTransform should match snapshot 1`] = `
-Object {
-  "anomalyBoundaries": Array [
-    Object {
-      "x": 10000,
-      "y": 200,
-      "y0": 20,
-    },
-    Object {
-      "x": 15000,
-      "y": 100,
-      "y0": 20,
-    },
-    Object {
-      "x": 25000,
-      "y": 50,
-      "y0": 10,
-    },
-  ],
-  "anomalyScore": Array [
-    Object {
-      "x": 25000,
-      "x0": 15000,
-    },
-    Object {
-      "x": 25000,
-      "x0": 25000,
-    },
-  ],
-}
-`;
diff --git a/x-pack/plugins/apm/server/lib/transactions/charts/get_anomaly_data/fetcher.test.ts b/x-pack/plugins/apm/server/lib/transactions/charts/get_anomaly_data/fetcher.test.ts
deleted file mode 100644
index 313cf818a322..000000000000
--- a/x-pack/plugins/apm/server/lib/transactions/charts/get_anomaly_data/fetcher.test.ts
+++ /dev/null
@@ -1,76 +0,0 @@
-/*
- * 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 { anomalySeriesFetcher, ESResponse } from './fetcher';
-
-describe('anomalyAggsFetcher', () => {
-  describe('when ES returns valid response', () => {
-    let response: ESResponse | undefined;
-    let clientSpy: jest.Mock;
-
-    beforeEach(async () => {
-      clientSpy = jest.fn().mockReturnValue('ES Response');
-      response = await anomalySeriesFetcher({
-        serviceName: 'myServiceName',
-        transactionType: 'myTransactionType',
-        intervalString: 'myInterval',
-        mlBucketSize: 10,
-        setup: {
-          ml: {
-            mlSystem: {
-              mlAnomalySearch: clientSpy,
-            },
-          } as any,
-          start: 100000,
-          end: 200000,
-        } as any,
-      });
-    });
-
-    it('should call client with correct query', () => {
-      expect(clientSpy.mock.calls).toMatchSnapshot();
-    });
-
-    it('should return correct response', () => {
-      expect(response).toBe('ES Response');
-    });
-  });
-
-  it('should swallow HTTP errors', () => {
-    const httpError = new Error('anomaly lookup failed') as any;
-    httpError.statusCode = 418;
-    const failedRequestSpy = jest.fn(() => Promise.reject(httpError));
-
-    return expect(
-      anomalySeriesFetcher({
-        setup: {
-          ml: {
-            mlSystem: {
-              mlAnomalySearch: failedRequestSpy,
-            },
-          } as any,
-        },
-      } as any)
-    ).resolves.toEqual(undefined);
-  });
-
-  it('should throw other errors', () => {
-    const otherError = new Error('anomaly lookup ASPLODED') as any;
-    const failedRequestSpy = jest.fn(() => Promise.reject(otherError));
-
-    return expect(
-      anomalySeriesFetcher({
-        setup: {
-          ml: {
-            mlSystem: {
-              mlAnomalySearch: failedRequestSpy,
-            },
-          } as any,
-        },
-      } as any)
-    ).rejects.toThrow(otherError);
-  });
-});
diff --git a/x-pack/plugins/apm/server/lib/transactions/charts/get_anomaly_data/fetcher.ts b/x-pack/plugins/apm/server/lib/transactions/charts/get_anomaly_data/fetcher.ts
deleted file mode 100644
index 8ee078de7f3c..000000000000
--- a/x-pack/plugins/apm/server/lib/transactions/charts/get_anomaly_data/fetcher.ts
+++ /dev/null
@@ -1,90 +0,0 @@
-/*
- * 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 { getMlJobId } from '../../../../../common/ml_job_constants';
-import { PromiseReturnType } from '../../../../../../observability/typings/common';
-import { Setup, SetupTimeRange } from '../../../helpers/setup_request';
-
-export type ESResponse = Exclude<
-  PromiseReturnType<typeof anomalySeriesFetcher>,
-  undefined
->;
-
-export async function anomalySeriesFetcher({
-  serviceName,
-  transactionType,
-  intervalString,
-  mlBucketSize,
-  setup,
-}: {
-  serviceName: string;
-  transactionType: string;
-  intervalString: string;
-  mlBucketSize: number;
-  setup: Setup & SetupTimeRange;
-}) {
-  const { ml, start, end } = setup;
-  if (!ml) {
-    return;
-  }
-
-  // move the start back with one bucket size, to ensure to get anomaly data in the beginning
-  // this is required because ML has a minimum bucket size (default is 900s) so if our buckets are smaller, we might have several null buckets in the beginning
-  const newStart = start - mlBucketSize * 1000;
-  const jobId = getMlJobId(serviceName, transactionType);
-
-  const params = {
-    body: {
-      size: 0,
-      query: {
-        bool: {
-          filter: [
-            { term: { job_id: jobId } },
-            { exists: { field: 'bucket_span' } },
-            {
-              range: {
-                timestamp: {
-                  gte: newStart,
-                  lte: end,
-                  format: 'epoch_millis',
-                },
-              },
-            },
-          ],
-        },
-      },
-      aggs: {
-        ml_avg_response_times: {
-          date_histogram: {
-            field: 'timestamp',
-            fixed_interval: intervalString,
-            min_doc_count: 0,
-            extended_bounds: {
-              min: newStart,
-              max: end,
-            },
-          },
-          aggs: {
-            anomaly_score: { max: { field: 'anomaly_score' } },
-            lower: { min: { field: 'model_lower' } },
-            upper: { max: { field: 'model_upper' } },
-          },
-        },
-      },
-    },
-  };
-
-  try {
-    const response = await ml.mlSystem.mlAnomalySearch(params);
-    return response;
-  } catch (err) {
-    const isHttpError = 'statusCode' in err;
-    if (isHttpError) {
-      return;
-    }
-    throw err;
-  }
-}
diff --git a/x-pack/plugins/apm/server/lib/transactions/charts/get_anomaly_data/get_ml_bucket_size.ts b/x-pack/plugins/apm/server/lib/transactions/charts/get_anomaly_data/get_ml_bucket_size.ts
deleted file mode 100644
index d649bfb19273..000000000000
--- a/x-pack/plugins/apm/server/lib/transactions/charts/get_anomaly_data/get_ml_bucket_size.ts
+++ /dev/null
@@ -1,65 +0,0 @@
-/*
- * 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 { getMlJobId } from '../../../../../common/ml_job_constants';
-import { Setup, SetupTimeRange } from '../../../helpers/setup_request';
-
-interface IOptions {
-  serviceName: string;
-  transactionType: string;
-  setup: Setup & SetupTimeRange;
-}
-
-interface ESResponse {
-  bucket_span: number;
-}
-
-export async function getMlBucketSize({
-  serviceName,
-  transactionType,
-  setup,
-}: IOptions): Promise<number> {
-  const { ml, start, end } = setup;
-  if (!ml) {
-    return 0;
-  }
-  const jobId = getMlJobId(serviceName, transactionType);
-
-  const params = {
-    body: {
-      _source: 'bucket_span',
-      size: 1,
-      query: {
-        bool: {
-          filter: [
-            { term: { job_id: jobId } },
-            { exists: { field: 'bucket_span' } },
-            {
-              range: {
-                timestamp: {
-                  gte: start,
-                  lte: end,
-                  format: 'epoch_millis',
-                },
-              },
-            },
-          ],
-        },
-      },
-    },
-  };
-
-  try {
-    const resp = await ml.mlSystem.mlAnomalySearch<ESResponse>(params);
-    return resp.hits.hits[0]?._source.bucket_span || 0;
-  } catch (err) {
-    const isHttpError = 'statusCode' in err;
-    if (isHttpError) {
-      return 0;
-    }
-    throw err;
-  }
-}
diff --git a/x-pack/plugins/apm/server/lib/transactions/charts/get_anomaly_data/index.test.ts b/x-pack/plugins/apm/server/lib/transactions/charts/get_anomaly_data/index.test.ts
deleted file mode 100644
index fb87f1b5707d..000000000000
--- a/x-pack/plugins/apm/server/lib/transactions/charts/get_anomaly_data/index.test.ts
+++ /dev/null
@@ -1,83 +0,0 @@
-/*
- * 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 { getAnomalySeries } from '.';
-import { mlAnomalyResponse } from './mock_responses/ml_anomaly_response';
-import { mlBucketSpanResponse } from './mock_responses/ml_bucket_span_response';
-import { PromiseReturnType } from '../../../../../../observability/typings/common';
-import { APMConfig } from '../../../..';
-
-describe('getAnomalySeries', () => {
-  let avgAnomalies: PromiseReturnType<typeof getAnomalySeries>;
-  beforeEach(async () => {
-    const clientSpy = jest
-      .fn()
-      .mockResolvedValueOnce(mlBucketSpanResponse)
-      .mockResolvedValueOnce(mlAnomalyResponse);
-
-    avgAnomalies = await getAnomalySeries({
-      serviceName: 'myServiceName',
-      transactionType: 'myTransactionType',
-      transactionName: undefined,
-      timeSeriesDates: [100, 100000],
-      setup: {
-        start: 0,
-        end: 500000,
-        client: { search: () => {} } as any,
-        internalClient: { search: () => {} } as any,
-        config: new Proxy(
-          {},
-          {
-            get: () => 'myIndex',
-          }
-        ) as APMConfig,
-        uiFiltersES: [],
-        indices: {
-          'apm_oss.sourcemapIndices': 'myIndex',
-          'apm_oss.errorIndices': 'myIndex',
-          'apm_oss.onboardingIndices': 'myIndex',
-          'apm_oss.spanIndices': 'myIndex',
-          'apm_oss.transactionIndices': 'myIndex',
-          'apm_oss.metricsIndices': 'myIndex',
-          apmAgentConfigurationIndex: 'myIndex',
-          apmCustomLinkIndex: 'myIndex',
-        },
-        dynamicIndexPattern: null as any,
-        ml: {
-          mlSystem: {
-            mlAnomalySearch: clientSpy,
-            mlCapabilities: async () => ({ isPlatinumOrTrialLicense: true }),
-          },
-        } as any,
-      },
-    });
-  });
-
-  it('should remove buckets lower than threshold and outside date range from anomalyScore', () => {
-    expect(avgAnomalies!.anomalyScore).toEqual([
-      { x0: 15000, x: 25000 },
-      { x0: 25000, x: 35000 },
-    ]);
-  });
-
-  it('should remove buckets outside date range from anomalyBoundaries', () => {
-    expect(
-      avgAnomalies!.anomalyBoundaries!.filter(
-        (bucket) => bucket.x < 100 || bucket.x > 100000
-      ).length
-    ).toBe(0);
-  });
-
-  it('should remove buckets with null from anomalyBoundaries', () => {
-    expect(
-      avgAnomalies!.anomalyBoundaries!.filter((p) => p.y === null).length
-    ).toBe(0);
-  });
-
-  it('should match snapshot', async () => {
-    expect(avgAnomalies).toMatchSnapshot();
-  });
-});
diff --git a/x-pack/plugins/apm/server/lib/transactions/charts/get_anomaly_data/index.ts b/x-pack/plugins/apm/server/lib/transactions/charts/get_anomaly_data/index.ts
index 6f44cfa1df9f..b2d11f2ffe19 100644
--- a/x-pack/plugins/apm/server/lib/transactions/charts/get_anomaly_data/index.ts
+++ b/x-pack/plugins/apm/server/lib/transactions/charts/get_anomaly_data/index.ts
@@ -4,15 +4,17 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { getBucketSize } from '../../../helpers/get_bucket_size';
 import {
   Setup,
   SetupTimeRange,
   SetupUIFilters,
 } from '../../../helpers/setup_request';
-import { anomalySeriesFetcher } from './fetcher';
-import { getMlBucketSize } from './get_ml_bucket_size';
-import { anomalySeriesTransform } from './transform';
+import { Coordinate, RectCoordinate } from '../../../../../typings/timeseries';
+
+interface AnomalyTimeseries {
+  anomalyBoundaries: Coordinate[];
+  anomalyScore: RectCoordinate[];
+}
 
 export async function getAnomalySeries({
   serviceName,
@@ -26,7 +28,7 @@ export async function getAnomalySeries({
   transactionName: string | undefined;
   timeSeriesDates: number[];
   setup: Setup & SetupTimeRange & SetupUIFilters;
-}) {
+}): Promise<void | AnomalyTimeseries> {
   // don't fetch anomalies for transaction details page
   if (transactionName) {
     return;
@@ -53,29 +55,6 @@ export async function getAnomalySeries({
     return;
   }
 
-  const mlBucketSize = await getMlBucketSize({
-    serviceName,
-    transactionType,
-    setup,
-  });
-
-  const { start, end } = setup;
-  const { intervalString, bucketSize } = getBucketSize(start, end, 'auto');
-
-  const esResponse = await anomalySeriesFetcher({
-    serviceName,
-    transactionType,
-    intervalString,
-    mlBucketSize,
-    setup,
-  });
-
-  return esResponse
-    ? anomalySeriesTransform(
-        esResponse,
-        mlBucketSize,
-        bucketSize,
-        timeSeriesDates
-      )
-    : undefined;
+  // TODO [APM ML] return a series of anomaly scores, upper & lower bounds for the given timeSeriesDates
+  return;
 }
diff --git a/x-pack/plugins/apm/server/lib/transactions/charts/get_anomaly_data/mock_responses/ml_anomaly_response.ts b/x-pack/plugins/apm/server/lib/transactions/charts/get_anomaly_data/mock_responses/ml_anomaly_response.ts
deleted file mode 100644
index 523161ec1027..000000000000
--- a/x-pack/plugins/apm/server/lib/transactions/charts/get_anomaly_data/mock_responses/ml_anomaly_response.ts
+++ /dev/null
@@ -1,127 +0,0 @@
-/*
- * 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 { ESResponse } from '../fetcher';
-
-export const mlAnomalyResponse: ESResponse = ({
-  took: 3,
-  timed_out: false,
-  _shards: {
-    total: 5,
-    successful: 5,
-    skipped: 0,
-    failed: 0,
-  },
-  hits: {
-    total: 10,
-    max_score: 0,
-    hits: [],
-  },
-  aggregations: {
-    ml_avg_response_times: {
-      buckets: [
-        {
-          key_as_string: '2018-07-02T09:16:40.000Z',
-          key: 0,
-          doc_count: 0,
-          anomaly_score: {
-            value: null,
-          },
-          upper: {
-            value: 200,
-          },
-          lower: {
-            value: 20,
-          },
-        },
-        {
-          key_as_string: '2018-07-02T09:25:00.000Z',
-          key: 5000,
-          doc_count: 4,
-          anomaly_score: {
-            value: null,
-          },
-          upper: {
-            value: null,
-          },
-          lower: {
-            value: null,
-          },
-        },
-        {
-          key_as_string: '2018-07-02T09:33:20.000Z',
-          key: 10000,
-          doc_count: 0,
-          anomaly_score: {
-            value: null,
-          },
-          upper: {
-            value: null,
-          },
-          lower: {
-            value: null,
-          },
-        },
-        {
-          key_as_string: '2018-07-02T09:41:40.000Z',
-          key: 15000,
-          doc_count: 2,
-          anomaly_score: {
-            value: 90,
-          },
-          upper: {
-            value: 100,
-          },
-          lower: {
-            value: 20,
-          },
-        },
-        {
-          key_as_string: '2018-07-02T09:50:00.000Z',
-          key: 20000,
-          doc_count: 0,
-          anomaly_score: {
-            value: null,
-          },
-          upper: {
-            value: null,
-          },
-          lower: {
-            value: null,
-          },
-        },
-        {
-          key_as_string: '2018-07-02T09:58:20.000Z',
-          key: 25000,
-          doc_count: 2,
-          anomaly_score: {
-            value: 100,
-          },
-          upper: {
-            value: 50,
-          },
-          lower: {
-            value: 10,
-          },
-        },
-        {
-          key_as_string: '2018-07-02T10:15:00.000Z',
-          key: 30000,
-          doc_count: 2,
-          anomaly_score: {
-            value: 0,
-          },
-          upper: {
-            value: null,
-          },
-          lower: {
-            value: null,
-          },
-        },
-      ],
-    },
-  },
-} as unknown) as ESResponse;
diff --git a/x-pack/plugins/apm/server/lib/transactions/charts/get_anomaly_data/mock_responses/ml_bucket_span_response.ts b/x-pack/plugins/apm/server/lib/transactions/charts/get_anomaly_data/mock_responses/ml_bucket_span_response.ts
deleted file mode 100644
index 3689529a07c4..000000000000
--- a/x-pack/plugins/apm/server/lib/transactions/charts/get_anomaly_data/mock_responses/ml_bucket_span_response.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-/*
- * 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 mlBucketSpanResponse = {
-  took: 1,
-  timed_out: false,
-  _shards: {
-    total: 1,
-    successful: 1,
-    skipped: 0,
-    failed: 0,
-  },
-  hits: {
-    total: 192,
-    max_score: 1.0,
-    hits: [
-      {
-        _index: '.ml-anomalies-shared',
-        _id:
-          'opbeans-go-request-high_mean_response_time_model_plot_1542636000000_900_0_29791_0',
-        _score: 1.0,
-        _source: {
-          bucket_span: 10,
-        },
-      },
-    ],
-  },
-};
diff --git a/x-pack/plugins/apm/server/lib/transactions/charts/get_anomaly_data/transform.test.ts b/x-pack/plugins/apm/server/lib/transactions/charts/get_anomaly_data/transform.test.ts
deleted file mode 100644
index eb94c83e9257..000000000000
--- a/x-pack/plugins/apm/server/lib/transactions/charts/get_anomaly_data/transform.test.ts
+++ /dev/null
@@ -1,303 +0,0 @@
-/*
- * 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 { ESResponse } from './fetcher';
-import { mlAnomalyResponse } from './mock_responses/ml_anomaly_response';
-import { anomalySeriesTransform, replaceFirstAndLastBucket } from './transform';
-
-describe('anomalySeriesTransform', () => {
-  it('should match snapshot', () => {
-    const getMlBucketSize = 10;
-    const bucketSize = 5;
-    const timeSeriesDates = [10000, 25000];
-    const anomalySeries = anomalySeriesTransform(
-      mlAnomalyResponse,
-      getMlBucketSize,
-      bucketSize,
-      timeSeriesDates
-    );
-    expect(anomalySeries).toMatchSnapshot();
-  });
-
-  describe('anomalyScoreSeries', () => {
-    it('should only returns bucket within range and above threshold', () => {
-      const esResponse = getESResponse([
-        {
-          key: 0,
-          anomaly_score: { value: 90 },
-        },
-        {
-          key: 5000,
-          anomaly_score: { value: 0 },
-        },
-        {
-          key: 10000,
-          anomaly_score: { value: 90 },
-        },
-        {
-          key: 15000,
-          anomaly_score: { value: 0 },
-        },
-        {
-          key: 20000,
-          anomaly_score: { value: 90 },
-        },
-      ]);
-
-      const getMlBucketSize = 5;
-      const bucketSize = 5;
-      const timeSeriesDates = [5000, 15000];
-      const anomalySeries = anomalySeriesTransform(
-        esResponse,
-        getMlBucketSize,
-        bucketSize,
-        timeSeriesDates
-      );
-
-      const buckets = anomalySeries!.anomalyScore;
-      expect(buckets).toEqual([{ x0: 10000, x: 15000 }]);
-    });
-
-    it('should decrease the x-value to avoid going beyond last date', () => {
-      const esResponse = getESResponse([
-        {
-          key: 0,
-          anomaly_score: { value: 0 },
-        },
-        {
-          key: 5000,
-          anomaly_score: { value: 90 },
-        },
-      ]);
-
-      const getMlBucketSize = 10;
-      const bucketSize = 5;
-      const timeSeriesDates = [0, 10000];
-      const anomalySeries = anomalySeriesTransform(
-        esResponse,
-        getMlBucketSize,
-        bucketSize,
-        timeSeriesDates
-      );
-
-      const buckets = anomalySeries!.anomalyScore;
-      expect(buckets).toEqual([{ x0: 5000, x: 10000 }]);
-    });
-  });
-
-  describe('anomalyBoundariesSeries', () => {
-    it('should trim buckets to time range', () => {
-      const esResponse = getESResponse([
-        {
-          key: 0,
-          upper: { value: 15 },
-          lower: { value: 10 },
-        },
-        {
-          key: 5000,
-          upper: { value: 25 },
-          lower: { value: 20 },
-        },
-        {
-          key: 10000,
-          upper: { value: 35 },
-          lower: { value: 30 },
-        },
-        {
-          key: 15000,
-          upper: { value: 45 },
-          lower: { value: 40 },
-        },
-      ]);
-
-      const mlBucketSize = 10;
-      const bucketSize = 5;
-      const timeSeriesDates = [5000, 10000];
-      const anomalySeries = anomalySeriesTransform(
-        esResponse,
-        mlBucketSize,
-        bucketSize,
-        timeSeriesDates
-      );
-
-      const buckets = anomalySeries!.anomalyBoundaries;
-      expect(buckets).toEqual([
-        { x: 5000, y: 25, y0: 20 },
-        { x: 10000, y: 35, y0: 30 },
-      ]);
-    });
-
-    it('should replace first bucket in range', () => {
-      const esResponse = getESResponse([
-        {
-          key: 0,
-          anomaly_score: { value: 0 },
-          upper: { value: 15 },
-          lower: { value: 10 },
-        },
-        {
-          key: 5000,
-          anomaly_score: { value: 0 },
-          upper: { value: null },
-          lower: { value: null },
-        },
-        {
-          key: 10000,
-          anomaly_score: { value: 0 },
-          upper: { value: 25 },
-          lower: { value: 20 },
-        },
-      ]);
-
-      const getMlBucketSize = 10;
-      const bucketSize = 5;
-      const timeSeriesDates = [5000, 10000];
-      const anomalySeries = anomalySeriesTransform(
-        esResponse,
-        getMlBucketSize,
-        bucketSize,
-        timeSeriesDates
-      );
-
-      const buckets = anomalySeries!.anomalyBoundaries;
-      expect(buckets).toEqual([
-        { x: 5000, y: 15, y0: 10 },
-        { x: 10000, y: 25, y0: 20 },
-      ]);
-    });
-
-    it('should replace last bucket in range', () => {
-      const esResponse = getESResponse([
-        {
-          key: 0,
-          anomaly_score: { value: 0 },
-          upper: { value: 15 },
-          lower: { value: 10 },
-        },
-        {
-          key: 5000,
-          anomaly_score: { value: 0 },
-          upper: { value: null },
-          lower: { value: null },
-        },
-        {
-          key: 10000,
-          anomaly_score: { value: 0 },
-          upper: { value: null },
-          lower: { value: null },
-        },
-      ]);
-
-      const getMlBucketSize = 10;
-      const bucketSize = 5;
-      const timeSeriesDates = [5000, 10000];
-      const anomalySeries = anomalySeriesTransform(
-        esResponse,
-        getMlBucketSize,
-        bucketSize,
-        timeSeriesDates
-      );
-
-      const buckets = anomalySeries!.anomalyBoundaries;
-      expect(buckets).toEqual([
-        { x: 5000, y: 15, y0: 10 },
-        { x: 10000, y: 15, y0: 10 },
-      ]);
-    });
-  });
-});
-
-describe('replaceFirstAndLastBucket', () => {
-  it('should extend the first bucket', () => {
-    const buckets = [
-      {
-        x: 0,
-        lower: 10,
-        upper: 20,
-      },
-      {
-        x: 5,
-        lower: null,
-        upper: null,
-      },
-      {
-        x: 10,
-        lower: null,
-        upper: null,
-      },
-      {
-        x: 15,
-        lower: 30,
-        upper: 40,
-      },
-    ];
-
-    const timeSeriesDates = [10, 15];
-    expect(replaceFirstAndLastBucket(buckets as any, timeSeriesDates)).toEqual([
-      { x: 10, lower: 10, upper: 20 },
-      { x: 15, lower: 30, upper: 40 },
-    ]);
-  });
-
-  it('should extend the last bucket', () => {
-    const buckets = [
-      {
-        x: 10,
-        lower: 30,
-        upper: 40,
-      },
-      {
-        x: 15,
-        lower: null,
-        upper: null,
-      },
-      {
-        x: 20,
-        lower: null,
-        upper: null,
-      },
-    ] as any;
-
-    const timeSeriesDates = [10, 15, 20];
-    expect(replaceFirstAndLastBucket(buckets, timeSeriesDates)).toEqual([
-      { x: 10, lower: 30, upper: 40 },
-      { x: 15, lower: null, upper: null },
-      { x: 20, lower: 30, upper: 40 },
-    ]);
-  });
-});
-
-function getESResponse(buckets: any): ESResponse {
-  return ({
-    took: 3,
-    timed_out: false,
-    _shards: {
-      total: 5,
-      successful: 5,
-      skipped: 0,
-      failed: 0,
-    },
-    hits: {
-      total: 10,
-      max_score: 0,
-      hits: [],
-    },
-    aggregations: {
-      ml_avg_response_times: {
-        buckets: buckets.map((bucket: any) => {
-          return {
-            ...bucket,
-            lower: { value: bucket?.lower?.value || null },
-            upper: { value: bucket?.upper?.value || null },
-            anomaly_score: {
-              value: bucket?.anomaly_score?.value || null,
-            },
-          };
-        }),
-      },
-    },
-  } as unknown) as ESResponse;
-}
diff --git a/x-pack/plugins/apm/server/lib/transactions/charts/get_anomaly_data/transform.ts b/x-pack/plugins/apm/server/lib/transactions/charts/get_anomaly_data/transform.ts
deleted file mode 100644
index 454a6add3e25..000000000000
--- a/x-pack/plugins/apm/server/lib/transactions/charts/get_anomaly_data/transform.ts
+++ /dev/null
@@ -1,126 +0,0 @@
-/*
- * 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 { first, last } from 'lodash';
-import { Coordinate, RectCoordinate } from '../../../../../typings/timeseries';
-import { ESResponse } from './fetcher';
-
-type IBucket = ReturnType<typeof getBucket>;
-function getBucket(
-  bucket: Required<
-    ESResponse
-  >['aggregations']['ml_avg_response_times']['buckets'][0]
-) {
-  return {
-    x: bucket.key,
-    anomalyScore: bucket.anomaly_score.value,
-    lower: bucket.lower.value,
-    upper: bucket.upper.value,
-  };
-}
-
-export type AnomalyTimeSeriesResponse = ReturnType<
-  typeof anomalySeriesTransform
->;
-export function anomalySeriesTransform(
-  response: ESResponse,
-  mlBucketSize: number,
-  bucketSize: number,
-  timeSeriesDates: number[]
-) {
-  const buckets =
-    response.aggregations?.ml_avg_response_times.buckets.map(getBucket) || [];
-
-  const bucketSizeInMillis = Math.max(bucketSize, mlBucketSize) * 1000;
-
-  return {
-    anomalyScore: getAnomalyScoreDataPoints(
-      buckets,
-      timeSeriesDates,
-      bucketSizeInMillis
-    ),
-    anomalyBoundaries: getAnomalyBoundaryDataPoints(buckets, timeSeriesDates),
-  };
-}
-
-export function getAnomalyScoreDataPoints(
-  buckets: IBucket[],
-  timeSeriesDates: number[],
-  bucketSizeInMillis: number
-): RectCoordinate[] {
-  const ANOMALY_THRESHOLD = 75;
-  const firstDate = first(timeSeriesDates);
-  const lastDate = last(timeSeriesDates);
-
-  return buckets
-    .filter(
-      (bucket) =>
-        bucket.anomalyScore !== null && bucket.anomalyScore > ANOMALY_THRESHOLD
-    )
-    .filter(isInDateRange(firstDate, lastDate))
-    .map((bucket) => {
-      return {
-        x0: bucket.x,
-        x: Math.min(bucket.x + bucketSizeInMillis, lastDate), // don't go beyond last date
-      };
-    });
-}
-
-export function getAnomalyBoundaryDataPoints(
-  buckets: IBucket[],
-  timeSeriesDates: number[]
-): Coordinate[] {
-  return replaceFirstAndLastBucket(buckets, timeSeriesDates)
-    .filter((bucket) => bucket.lower !== null)
-    .map((bucket) => {
-      return {
-        x: bucket.x,
-        y0: bucket.lower,
-        y: bucket.upper,
-      };
-    });
-}
-
-export function replaceFirstAndLastBucket(
-  buckets: IBucket[],
-  timeSeriesDates: number[]
-) {
-  const firstDate = first(timeSeriesDates);
-  const lastDate = last(timeSeriesDates);
-
-  const preBucketWithValue = buckets
-    .filter((p) => p.x <= firstDate)
-    .reverse()
-    .find((p) => p.lower !== null);
-
-  const bucketsInRange = buckets.filter(isInDateRange(firstDate, lastDate));
-
-  // replace first bucket if it is null
-  const firstBucket = first(bucketsInRange);
-  if (preBucketWithValue && firstBucket && firstBucket.lower === null) {
-    firstBucket.lower = preBucketWithValue.lower;
-    firstBucket.upper = preBucketWithValue.upper;
-  }
-
-  const lastBucketWithValue = [...buckets]
-    .reverse()
-    .find((p) => p.lower !== null);
-
-  // replace last bucket if it is null
-  const lastBucket = last(bucketsInRange);
-  if (lastBucketWithValue && lastBucket && lastBucket.lower === null) {
-    lastBucket.lower = lastBucketWithValue.lower;
-    lastBucket.upper = lastBucketWithValue.upper;
-  }
-
-  return bucketsInRange;
-}
-
-// anomaly time series contain one or more buckets extra in the beginning
-// these extra buckets should be removed
-function isInDateRange(firstDate: number, lastDate: number) {
-  return (p: IBucket) => p.x >= firstDate && p.x <= lastDate;
-}
diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json
index 14a58ec595ab..0d85960807f9 100644
--- a/x-pack/plugins/translations/translations/ja-JP.json
+++ b/x-pack/plugins/translations/translations/ja-JP.json
@@ -4296,21 +4296,6 @@
     "xpack.apm.serviceDetails.alertsMenu.errorRate": "エラー率",
     "xpack.apm.serviceDetails.alertsMenu.transactionDuration": "トランザクション期間",
     "xpack.apm.serviceDetails.alertsMenu.viewActiveAlerts": "アクティブアラートを表示",
-    "xpack.apm.serviceDetails.enableAnomalyDetectionPanel.callout.jobExistsDescription": "現在 {serviceName} ({transactionType}) の実行中のジョブがあります。",
-    "xpack.apm.serviceDetails.enableAnomalyDetectionPanel.callout.jobExistsDescription.viewJobLinkText": "既存のジョブを表示",
-    "xpack.apm.serviceDetails.enableAnomalyDetectionPanel.callout.jobExistsTitle": "ジョブが既に存在します",
-    "xpack.apm.serviceDetails.enableAnomalyDetectionPanel.createMLJobDescription.transactionDurationGraphText": "トランザクション時間のグラフ",
-    "xpack.apm.serviceDetails.enableAnomalyDetectionPanel.createNewJobButtonLabel": "ジョブを作成",
-    "xpack.apm.serviceDetails.enableAnomalyDetectionPanel.enableAnomalyDetectionTitle": "異常検知を有効にする",
-    "xpack.apm.serviceDetails.enableAnomalyDetectionPanel.jobCreatedNotificationText": "現在 {serviceName} ({transactionType}) の分析を実行中です。応答時間グラフに結果が追加されるまで少し時間がかかる場合があります。",
-    "xpack.apm.serviceDetails.enableAnomalyDetectionPanel.jobCreatedNotificationText.viewJobLinkText": "ジョブを表示",
-    "xpack.apm.serviceDetails.enableAnomalyDetectionPanel.jobCreatedNotificationTitle": "ジョブが作成されました",
-    "xpack.apm.serviceDetails.enableAnomalyDetectionPanel.jobCreationFailedNotificationText": "現在のライセンスでは機械学習ジョブの作成が許可されていないか、ジョブが既に存在する可能性があります。",
-    "xpack.apm.serviceDetails.enableAnomalyDetectionPanel.jobCreationFailedNotificationTitle": "ジョブの作成に失敗",
-    "xpack.apm.serviceDetails.enableAnomalyDetectionPanel.manageMLJobDescription": "ジョブはそれぞれのサービス + トランザクションタイプの組み合わせに対して作成できます。ジョブの作成後、{mlJobsPageLink} で管理と詳細の確認ができます。",
-    "xpack.apm.serviceDetails.enableAnomalyDetectionPanel.manageMLJobDescription.mlJobsPageLinkText": "機械学習ジョブの管理ページ",
-    "xpack.apm.serviceDetails.enableAnomalyDetectionPanel.manageMLJobDescription.noteText": "注:ジョブが結果の計算を開始するまでに少し時間がかかる場合があります。",
-    "xpack.apm.serviceDetails.enableAnomalyDetectionPanel.selectTransactionTypeLabel": "このジョブのトランザクションタイプを選択してください",
     "xpack.apm.serviceDetails.enableErrorReportsPanel.actionsDescription": "レポートはメールで送信するか Slack チャンネルに投稿できます。各レポートにはオカランス別のトップ 10 のエラーが含まれます。",
     "xpack.apm.serviceDetails.enableErrorReportsPanel.actionsTitle": "アクション",
     "xpack.apm.serviceDetails.enableErrorReportsPanel.conditionTitle": "コンディション",
@@ -4346,8 +4331,6 @@
     "xpack.apm.serviceDetails.enableErrorReportsPanel.watchCreationFailedNotificationText": "ユーザーにウォッチ作成のパーミッションがあることを確認してください。",
     "xpack.apm.serviceDetails.enableErrorReportsPanel.watchCreationFailedNotificationTitle": "ウォッチの作成に失敗",
     "xpack.apm.serviceDetails.errorsTabLabel": "エラー",
-    "xpack.apm.serviceDetails.integrationsMenu.enableMLAnomalyDetectionButtonLabel": "ML 異常検知を有効にする",
-    "xpack.apm.serviceDetails.integrationsMenu.enableMLAnomalyDetectionButtonTooltip": "このサービスの機械学習ジョブをセットアップします",
     "xpack.apm.serviceDetails.integrationsMenu.enableWatcherErrorReportsButtonLabel": "ウォッチエラーレポートを有効にする",
     "xpack.apm.serviceDetails.integrationsMenu.integrationsButtonLabel": "統合",
     "xpack.apm.serviceDetails.integrationsMenu.viewWatchesButtonLabel": "既存のウォッチを表示",
@@ -4357,9 +4340,6 @@
     "xpack.apm.serviceDetails.metricsTabLabel": "メトリック",
     "xpack.apm.serviceDetails.nodesTabLabel": "JVM",
     "xpack.apm.serviceDetails.transactionsTabLabel": "トランザクション",
-    "xpack.apm.serviceMap.anomalyDetectionPopoverLink": "異常を表示",
-    "xpack.apm.serviceMap.anomalyDetectionPopoverScoreMetric": "スコア（最大）",
-    "xpack.apm.serviceMap.anomalyDetectionPopoverTitle": "異常検知",
     "xpack.apm.serviceMap.avgCpuUsagePopoverMetric": "CPU使用状況 （平均）",
     "xpack.apm.serviceMap.avgErrorsPerMinutePopoverMetric": "1分あたりのエラー（平均）",
     "xpack.apm.serviceMap.avgMemoryUsagePopoverMetric": "メモリー使用状況（平均）",
diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json
index 9c58aeba1dba..85167e11b28b 100644
--- a/x-pack/plugins/translations/translations/zh-CN.json
+++ b/x-pack/plugins/translations/translations/zh-CN.json
@@ -4299,21 +4299,6 @@
     "xpack.apm.serviceDetails.alertsMenu.errorRate": "错误率",
     "xpack.apm.serviceDetails.alertsMenu.transactionDuration": "事务持续时间",
     "xpack.apm.serviceDetails.alertsMenu.viewActiveAlerts": "查看活动的告警",
-    "xpack.apm.serviceDetails.enableAnomalyDetectionPanel.callout.jobExistsDescription": "当前有 {serviceName}（{transactionType}）的作业正在运行。",
-    "xpack.apm.serviceDetails.enableAnomalyDetectionPanel.callout.jobExistsDescription.viewJobLinkText": "查看现有作业",
-    "xpack.apm.serviceDetails.enableAnomalyDetectionPanel.callout.jobExistsTitle": "作业已存在",
-    "xpack.apm.serviceDetails.enableAnomalyDetectionPanel.createMLJobDescription.transactionDurationGraphText": "事务持续时间图表",
-    "xpack.apm.serviceDetails.enableAnomalyDetectionPanel.createNewJobButtonLabel": "创建作业",
-    "xpack.apm.serviceDetails.enableAnomalyDetectionPanel.enableAnomalyDetectionTitle": "启用异常检测",
-    "xpack.apm.serviceDetails.enableAnomalyDetectionPanel.jobCreatedNotificationText": "现在正在运行对 {serviceName}（{transactionType}）的分析。可能要花费点时间，才会将结果添加响应时间图表。",
-    "xpack.apm.serviceDetails.enableAnomalyDetectionPanel.jobCreatedNotificationText.viewJobLinkText": "查看作业",
-    "xpack.apm.serviceDetails.enableAnomalyDetectionPanel.jobCreatedNotificationTitle": "作业已成功创建",
-    "xpack.apm.serviceDetails.enableAnomalyDetectionPanel.jobCreationFailedNotificationText": "您当前的许可可能不允许创建 Machine Learning 作业，或者此作业可能已存在。",
-    "xpack.apm.serviceDetails.enableAnomalyDetectionPanel.jobCreationFailedNotificationTitle": "作业创建失败",
-    "xpack.apm.serviceDetails.enableAnomalyDetectionPanel.manageMLJobDescription": "可以创建每个服务 + 事务类型组合的作业。创建作业后，可以在 {mlJobsPageLink}中管理作业以及查看更多详细信息。",
-    "xpack.apm.serviceDetails.enableAnomalyDetectionPanel.manageMLJobDescription.mlJobsPageLinkText": "Machine Learning 作业管理页面",
-    "xpack.apm.serviceDetails.enableAnomalyDetectionPanel.manageMLJobDescription.noteText": "注意：可能要过几分钟后，作业才会开始计算结果。",
-    "xpack.apm.serviceDetails.enableAnomalyDetectionPanel.selectTransactionTypeLabel": "为此作业选择事务类型",
     "xpack.apm.serviceDetails.enableErrorReportsPanel.actionsDescription": "可以通过电子邮件发送报告或将报告发布到 Slack 频道。每个报告将包括按发生次数排序的前 10 个错误。",
     "xpack.apm.serviceDetails.enableErrorReportsPanel.actionsTitle": "操作",
     "xpack.apm.serviceDetails.enableErrorReportsPanel.conditionTitle": "条件",
@@ -4349,8 +4334,6 @@
     "xpack.apm.serviceDetails.enableErrorReportsPanel.watchCreationFailedNotificationText": "确保您的用户有权创建监视。",
     "xpack.apm.serviceDetails.enableErrorReportsPanel.watchCreationFailedNotificationTitle": "监视创建失败",
     "xpack.apm.serviceDetails.errorsTabLabel": "错误",
-    "xpack.apm.serviceDetails.integrationsMenu.enableMLAnomalyDetectionButtonLabel": "启用 ML 异常检测",
-    "xpack.apm.serviceDetails.integrationsMenu.enableMLAnomalyDetectionButtonTooltip": "为此服务设置 Machine Learning 作业",
     "xpack.apm.serviceDetails.integrationsMenu.enableWatcherErrorReportsButtonLabel": "启用 Watcher 错误报告",
     "xpack.apm.serviceDetails.integrationsMenu.integrationsButtonLabel": "集成",
     "xpack.apm.serviceDetails.integrationsMenu.viewWatchesButtonLabel": "查看现有监视",
@@ -4360,9 +4343,6 @@
     "xpack.apm.serviceDetails.metricsTabLabel": "指标",
     "xpack.apm.serviceDetails.nodesTabLabel": "JVM",
     "xpack.apm.serviceDetails.transactionsTabLabel": "事务",
-    "xpack.apm.serviceMap.anomalyDetectionPopoverLink": "查看异常",
-    "xpack.apm.serviceMap.anomalyDetectionPopoverScoreMetric": "分数（最大）",
-    "xpack.apm.serviceMap.anomalyDetectionPopoverTitle": "异常检测",
     "xpack.apm.serviceMap.avgCpuUsagePopoverMetric": "CPU 使用（平均）",
     "xpack.apm.serviceMap.avgErrorsPerMinutePopoverMetric": "每分钟错误数（平均）",
     "xpack.apm.serviceMap.avgMemoryUsagePopoverMetric": "内存使用（平均）",

From 8e363e5d61d279e4857b941b4ddd322a340f0556 Mon Sep 17 00:00:00 2001
From: Clint Andrew Hall <clint.hall@elastic.co>
Date: Wed, 24 Jun 2020 17:18:28 -0400
Subject: [PATCH 4/8] Convert Positionable, RenderToDom and RenderWithFn to
 functional/hooks/no recompose. (#68202)

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
---
 .../element_content/element_content.js        |  12 +-
 .../element_wrapper/element_wrapper.js        |   8 +-
 .../components/element_wrapper/index.js       |   4 +-
 .../element_wrapper/lib/handlers.js           |  60 -------
 .../positionable/{index.js => index.ts}       |   5 +-
 .../components/positionable/positionable.js   |  42 -----
 .../components/positionable/positionable.tsx  |  48 ++++++
 .../public/components/render_to_dom/index.js  |  12 --
 .../handlers.js => render_to_dom/index.ts}    |  14 +-
 .../components/render_to_dom/render_to_dom.js |  40 -----
 .../render_to_dom/render_to_dom.tsx           |  27 +++
 .../public/components/render_with_fn/index.js |  30 ----
 .../public/components/render_with_fn/index.ts |   7 +
 .../render_with_fn/render_with_fn.js          | 157 ------------------
 .../render_with_fn/render_with_fn.tsx         | 117 +++++++++++++
 .../canvas/public/lib/create_handlers.ts      |  96 +++++++++++
 .../components/rendered_element.tsx           |  14 +-
 x-pack/plugins/canvas/types/renderers.ts      |  28 ++--
 18 files changed, 331 insertions(+), 390 deletions(-)
 delete mode 100644 x-pack/plugins/canvas/public/components/element_wrapper/lib/handlers.js
 rename x-pack/plugins/canvas/public/components/positionable/{index.js => index.ts} (63%)
 delete mode 100644 x-pack/plugins/canvas/public/components/positionable/positionable.js
 create mode 100644 x-pack/plugins/canvas/public/components/positionable/positionable.tsx
 delete mode 100644 x-pack/plugins/canvas/public/components/render_to_dom/index.js
 rename x-pack/plugins/canvas/public/components/{render_with_fn/lib/handlers.js => render_to_dom/index.ts} (61%)
 delete mode 100644 x-pack/plugins/canvas/public/components/render_to_dom/render_to_dom.js
 create mode 100644 x-pack/plugins/canvas/public/components/render_to_dom/render_to_dom.tsx
 delete mode 100644 x-pack/plugins/canvas/public/components/render_with_fn/index.js
 create mode 100644 x-pack/plugins/canvas/public/components/render_with_fn/index.ts
 delete mode 100644 x-pack/plugins/canvas/public/components/render_with_fn/render_with_fn.js
 create mode 100644 x-pack/plugins/canvas/public/components/render_with_fn/render_with_fn.tsx
 create mode 100644 x-pack/plugins/canvas/public/lib/create_handlers.ts

diff --git a/x-pack/plugins/canvas/public/components/element_content/element_content.js b/x-pack/plugins/canvas/public/components/element_content/element_content.js
index 114a457d167e..e2c1a61c348d 100644
--- a/x-pack/plugins/canvas/public/components/element_content/element_content.js
+++ b/x-pack/plugins/canvas/public/components/element_content/element_content.js
@@ -12,6 +12,7 @@ import { getType } from '@kbn/interpreter/common';
 import { Loading } from '../loading';
 import { RenderWithFn } from '../render_with_fn';
 import { ElementShareContainer } from '../element_share_container';
+import { assignHandlers } from '../../lib/create_handlers';
 import { InvalidExpression } from './invalid_expression';
 import { InvalidElementType } from './invalid_element_type';
 
@@ -46,7 +47,7 @@ const branches = [
 export const ElementContent = compose(
   pure,
   ...branches
-)(({ renderable, renderFunction, size, handlers }) => {
+)(({ renderable, renderFunction, width, height, handlers }) => {
   const {
     getFilter,
     setFilter,
@@ -62,7 +63,7 @@ export const ElementContent = compose(
     <div
       // TODO: 'canvas__element' was added for BWC, It can be removed after a while
       className={'canvas__element canvasElement'}
-      style={{ ...renderable.containerStyle, ...size }}
+      style={{ ...renderable.containerStyle, width, height }}
       data-test-subj="canvasWorkpadPageElementContent"
     >
       <ElementShareContainer
@@ -76,15 +77,16 @@ export const ElementContent = compose(
           reuseNode={renderFunction.reuseDomNode}
           config={renderable.value}
           css={renderable.css} // This is an actual CSS stylesheet string, it will be scoped by RenderElement
-          size={size} // Size is only passed for the purpose of triggering the resize event, it isn't really used otherwise
-          handlers={{
+          width={width}
+          height={height}
+          handlers={assignHandlers({
             getFilter,
             setFilter,
             done,
             onEmbeddableInputChange,
             onEmbeddableDestroyed,
             getElementId,
-          }}
+          })}
         />
       </ElementShareContainer>
     </div>
diff --git a/x-pack/plugins/canvas/public/components/element_wrapper/element_wrapper.js b/x-pack/plugins/canvas/public/components/element_wrapper/element_wrapper.js
index 845fc5927d83..de7748413b71 100644
--- a/x-pack/plugins/canvas/public/components/element_wrapper/element_wrapper.js
+++ b/x-pack/plugins/canvas/public/components/element_wrapper/element_wrapper.js
@@ -14,7 +14,13 @@ export const ElementWrapper = (props) => {
 
   return (
     <Positionable transformMatrix={transformMatrix} width={width} height={height}>
-      <ElementContent renderable={renderable} state={state} handlers={handlers} />
+      <ElementContent
+        renderable={renderable}
+        state={state}
+        handlers={handlers}
+        width={width}
+        height={height}
+      />
     </Positionable>
   );
 };
diff --git a/x-pack/plugins/canvas/public/components/element_wrapper/index.js b/x-pack/plugins/canvas/public/components/element_wrapper/index.js
index 390c349ab2ee..6fc582bfee44 100644
--- a/x-pack/plugins/canvas/public/components/element_wrapper/index.js
+++ b/x-pack/plugins/canvas/public/components/element_wrapper/index.js
@@ -10,12 +10,12 @@ import { compose, withPropsOnChange, mapProps } from 'recompose';
 import isEqual from 'react-fast-compare';
 import { getResolvedArgs, getSelectedPage } from '../../state/selectors/workpad';
 import { getState, getValue } from '../../lib/resolved_arg';
+import { createDispatchedHandlerFactory } from '../../lib/create_handlers';
 import { ElementWrapper as Component } from './element_wrapper';
-import { createHandlers as createHandlersWithDispatch } from './lib/handlers';
 
 function selectorFactory(dispatch) {
   let result = {};
-  const createHandlers = createHandlersWithDispatch(dispatch);
+  const createHandlers = createDispatchedHandlerFactory(dispatch);
 
   return (nextState, nextOwnProps) => {
     const { element, ...restOwnProps } = nextOwnProps;
diff --git a/x-pack/plugins/canvas/public/components/element_wrapper/lib/handlers.js b/x-pack/plugins/canvas/public/components/element_wrapper/lib/handlers.js
deleted file mode 100644
index 33e8eacd902d..000000000000
--- a/x-pack/plugins/canvas/public/components/element_wrapper/lib/handlers.js
+++ /dev/null
@@ -1,60 +0,0 @@
-/*
- * 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 { isEqual } from 'lodash';
-import { setFilter } from '../../../state/actions/elements';
-import {
-  updateEmbeddableExpression,
-  fetchEmbeddableRenderable,
-} from '../../../state/actions/embeddable';
-
-export const createHandlers = (dispatch) => {
-  let isComplete = false;
-  let oldElement;
-  let completeFn = () => {};
-
-  return (element) => {
-    // reset isComplete when element changes
-    if (!isEqual(oldElement, element)) {
-      isComplete = false;
-      oldElement = element;
-    }
-
-    return {
-      setFilter(text) {
-        dispatch(setFilter(text, element.id, true));
-      },
-
-      getFilter() {
-        return element.filter;
-      },
-
-      onComplete(fn) {
-        completeFn = fn;
-      },
-
-      getElementId: () => element.id,
-
-      onEmbeddableInputChange(embeddableExpression) {
-        dispatch(updateEmbeddableExpression({ elementId: element.id, embeddableExpression }));
-      },
-
-      onEmbeddableDestroyed() {
-        dispatch(fetchEmbeddableRenderable(element.id));
-      },
-
-      done() {
-        // don't emit if the element is already done
-        if (isComplete) {
-          return;
-        }
-
-        isComplete = true;
-        completeFn();
-      },
-    };
-  };
-};
diff --git a/x-pack/plugins/canvas/public/components/positionable/index.js b/x-pack/plugins/canvas/public/components/positionable/index.ts
similarity index 63%
rename from x-pack/plugins/canvas/public/components/positionable/index.js
rename to x-pack/plugins/canvas/public/components/positionable/index.ts
index e5c3c32acb02..964e2ee41df7 100644
--- a/x-pack/plugins/canvas/public/components/positionable/index.js
+++ b/x-pack/plugins/canvas/public/components/positionable/index.ts
@@ -4,7 +4,4 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { pure } from 'recompose';
-import { Positionable as Component } from './positionable';
-
-export const Positionable = pure(Component);
+export { Positionable } from './positionable';
diff --git a/x-pack/plugins/canvas/public/components/positionable/positionable.js b/x-pack/plugins/canvas/public/components/positionable/positionable.js
deleted file mode 100644
index 9898f50cbb0f..000000000000
--- a/x-pack/plugins/canvas/public/components/positionable/positionable.js
+++ /dev/null
@@ -1,42 +0,0 @@
-/*
- * 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 React from 'react';
-import PropTypes from 'prop-types';
-import { matrixToCSS } from '../../lib/dom';
-
-export const Positionable = ({ children, transformMatrix, width, height }) => {
-  // Throw if there is more than one child
-  React.Children.only(children);
-  // This could probably be made nicer by having just one child
-  const wrappedChildren = React.Children.map(children, (child) => {
-    const newStyle = {
-      width,
-      height,
-      marginLeft: -width / 2,
-      marginTop: -height / 2,
-      position: 'absolute',
-      transform: matrixToCSS(transformMatrix.map((n, i) => (i < 12 ? n : Math.round(n)))),
-    };
-
-    const stepChild = React.cloneElement(child, { size: { width, height } });
-    return (
-      <div className="canvasPositionable canvasInteractable" style={newStyle}>
-        {stepChild}
-      </div>
-    );
-  });
-
-  return wrappedChildren;
-};
-
-Positionable.propTypes = {
-  onChange: PropTypes.func,
-  children: PropTypes.element.isRequired,
-  transformMatrix: PropTypes.arrayOf(PropTypes.number).isRequired,
-  width: PropTypes.number.isRequired,
-  height: PropTypes.number.isRequired,
-};
diff --git a/x-pack/plugins/canvas/public/components/positionable/positionable.tsx b/x-pack/plugins/canvas/public/components/positionable/positionable.tsx
new file mode 100644
index 000000000000..3344398b0019
--- /dev/null
+++ b/x-pack/plugins/canvas/public/components/positionable/positionable.tsx
@@ -0,0 +1,48 @@
+/*
+ * 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 React, { FC, ReactElement, CSSProperties } from 'react';
+import PropTypes from 'prop-types';
+import { matrixToCSS } from '../../lib/dom';
+import { TransformMatrix3d } from '../../lib/aeroelastic';
+
+interface Props {
+  children: ReactElement;
+  transformMatrix: TransformMatrix3d;
+  height: number;
+  width: number;
+}
+
+export const Positionable: FC<Props> = ({ children, transformMatrix, width, height }) => {
+  // Throw if there is more than one child
+  const childNode = React.Children.only(children);
+
+  const matrix = (transformMatrix.map((n, i) =>
+    i < 12 ? n : Math.round(n)
+  ) as any) as TransformMatrix3d;
+
+  const newStyle: CSSProperties = {
+    width,
+    height,
+    marginLeft: -width / 2,
+    marginTop: -height / 2,
+    position: 'absolute',
+    transform: matrixToCSS(matrix),
+  };
+
+  return (
+    <div className="canvasPositionable canvasInteractable" style={newStyle}>
+      {childNode}
+    </div>
+  );
+};
+
+Positionable.propTypes = {
+  children: PropTypes.element.isRequired,
+  transformMatrix: PropTypes.arrayOf(PropTypes.number).isRequired,
+  width: PropTypes.number.isRequired,
+  height: PropTypes.number.isRequired,
+};
diff --git a/x-pack/plugins/canvas/public/components/render_to_dom/index.js b/x-pack/plugins/canvas/public/components/render_to_dom/index.js
deleted file mode 100644
index e8a3f8cd8c93..000000000000
--- a/x-pack/plugins/canvas/public/components/render_to_dom/index.js
+++ /dev/null
@@ -1,12 +0,0 @@
-/*
- * 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 { compose, withState } from 'recompose';
-import { RenderToDom as Component } from './render_to_dom';
-
-export const RenderToDom = compose(
-  withState('domNode', 'setDomNode') // Still don't like this, seems to be the only way todo it.
-)(Component);
diff --git a/x-pack/plugins/canvas/public/components/render_with_fn/lib/handlers.js b/x-pack/plugins/canvas/public/components/render_to_dom/index.ts
similarity index 61%
rename from x-pack/plugins/canvas/public/components/render_with_fn/lib/handlers.js
rename to x-pack/plugins/canvas/public/components/render_to_dom/index.ts
index 9e5032efa97e..43a5dad059c9 100644
--- a/x-pack/plugins/canvas/public/components/render_with_fn/lib/handlers.js
+++ b/x-pack/plugins/canvas/public/components/render_to_dom/index.ts
@@ -4,16 +4,4 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-export class ElementHandlers {
-  resize() {}
-
-  destroy() {}
-
-  onResize(fn) {
-    this.resize = fn;
-  }
-
-  onDestroy(fn) {
-    this.destroy = fn;
-  }
-}
+export { RenderToDom } from './render_to_dom';
diff --git a/x-pack/plugins/canvas/public/components/render_to_dom/render_to_dom.js b/x-pack/plugins/canvas/public/components/render_to_dom/render_to_dom.js
deleted file mode 100644
index db393a8dde4f..000000000000
--- a/x-pack/plugins/canvas/public/components/render_to_dom/render_to_dom.js
+++ /dev/null
@@ -1,40 +0,0 @@
-/*
- * 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 React from 'react';
-import PropTypes from 'prop-types';
-
-export class RenderToDom extends React.Component {
-  static propTypes = {
-    domNode: PropTypes.object,
-    setDomNode: PropTypes.func.isRequired,
-    render: PropTypes.func.isRequired,
-    style: PropTypes.object,
-  };
-
-  shouldComponentUpdate(nextProps) {
-    return this.props.domNode !== nextProps.domNode;
-  }
-
-  componentDidUpdate() {
-    // Calls render function once we have the reference to the DOM element to render into
-    if (this.props.domNode) {
-      this.props.render(this.props.domNode);
-    }
-  }
-
-  render() {
-    const { domNode, setDomNode, style } = this.props;
-    const linkRef = (refNode) => {
-      if (!domNode && refNode) {
-        // Initialize the domNode property. This should only happen once, even if config changes.
-        setDomNode(refNode);
-      }
-    };
-
-    return <div className="render_to_dom" ref={linkRef} style={style} />;
-  }
-}
diff --git a/x-pack/plugins/canvas/public/components/render_to_dom/render_to_dom.tsx b/x-pack/plugins/canvas/public/components/render_to_dom/render_to_dom.tsx
new file mode 100644
index 000000000000..a37c0fc096e5
--- /dev/null
+++ b/x-pack/plugins/canvas/public/components/render_to_dom/render_to_dom.tsx
@@ -0,0 +1,27 @@
+/*
+ * 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 React, { useCallback, FC } from 'react';
+import CSS from 'csstype';
+
+interface Props {
+  render: (element: HTMLElement) => void;
+  style?: CSS.Properties;
+}
+
+export const RenderToDom: FC<Props> = ({ render, style }) => {
+  // https://reactjs.org/docs/hooks-faq.html#how-can-i-measure-a-dom-node
+  const ref = useCallback(
+    (node: HTMLDivElement) => {
+      if (node !== null) {
+        render(node);
+      }
+    },
+    [render]
+  );
+
+  return <div className="render_to_dom" {...{ ref, style }} />;
+};
diff --git a/x-pack/plugins/canvas/public/components/render_with_fn/index.js b/x-pack/plugins/canvas/public/components/render_with_fn/index.js
deleted file mode 100644
index 37c49624a394..000000000000
--- a/x-pack/plugins/canvas/public/components/render_with_fn/index.js
+++ /dev/null
@@ -1,30 +0,0 @@
-/*
- * 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 { compose, withProps, withPropsOnChange } from 'recompose';
-import PropTypes from 'prop-types';
-import isEqual from 'react-fast-compare';
-import { withKibana } from '../../../../../../src/plugins/kibana_react/public';
-import { RenderWithFn as Component } from './render_with_fn';
-import { ElementHandlers } from './lib/handlers';
-
-export const RenderWithFn = compose(
-  withPropsOnChange(
-    // rebuild elementHandlers when handlers object changes
-    (props, nextProps) => !isEqual(props.handlers, nextProps.handlers),
-    ({ handlers }) => ({
-      handlers: Object.assign(new ElementHandlers(), handlers),
-    })
-  ),
-  withKibana,
-  withProps((props) => ({
-    onError: props.kibana.services.canvas.notify.error,
-  }))
-)(Component);
-
-RenderWithFn.propTypes = {
-  handlers: PropTypes.object,
-};
diff --git a/x-pack/plugins/canvas/public/components/render_with_fn/index.ts b/x-pack/plugins/canvas/public/components/render_with_fn/index.ts
new file mode 100644
index 000000000000..4bfef734d34f
--- /dev/null
+++ b/x-pack/plugins/canvas/public/components/render_with_fn/index.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 { RenderWithFn } from './render_with_fn';
diff --git a/x-pack/plugins/canvas/public/components/render_with_fn/render_with_fn.js b/x-pack/plugins/canvas/public/components/render_with_fn/render_with_fn.js
deleted file mode 100644
index 763cbd5e53eb..000000000000
--- a/x-pack/plugins/canvas/public/components/render_with_fn/render_with_fn.js
+++ /dev/null
@@ -1,157 +0,0 @@
-/*
- * 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 React from 'react';
-import PropTypes from 'prop-types';
-import { isEqual, cloneDeep } from 'lodash';
-import { RenderToDom } from '../render_to_dom';
-import { ErrorStrings } from '../../../i18n';
-
-const { RenderWithFn: strings } = ErrorStrings;
-
-export class RenderWithFn extends React.Component {
-  static propTypes = {
-    name: PropTypes.string.isRequired,
-    renderFn: PropTypes.func.isRequired,
-    reuseNode: PropTypes.bool,
-    handlers: PropTypes.shape({
-      // element handlers, see components/element_wrapper/lib/handlers.js
-      setFilter: PropTypes.func.isRequired,
-      getFilter: PropTypes.func.isRequired,
-      done: PropTypes.func.isRequired,
-      // render handlers, see lib/handlers.js
-      resize: PropTypes.func.isRequired,
-      onResize: PropTypes.func.isRequired,
-      destroy: PropTypes.func.isRequired,
-      onDestroy: PropTypes.func.isRequired,
-    }),
-    config: PropTypes.object,
-    size: PropTypes.object.isRequired,
-    onError: PropTypes.func.isRequired,
-  };
-
-  static defaultProps = {
-    reuseNode: false,
-  };
-
-  componentDidMount() {
-    this.firstRender = true;
-    this.renderTarget = null;
-  }
-
-  UNSAFE_componentWillReceiveProps({ renderFn }) {
-    const newRenderFunction = renderFn !== this.props.renderFn;
-
-    if (newRenderFunction) {
-      this._resetRenderTarget(this._domNode);
-    }
-  }
-
-  shouldComponentUpdate(prevProps) {
-    return !isEqual(this.props.size, prevProps.size) || this._shouldFullRerender(prevProps);
-  }
-
-  componentDidUpdate(prevProps) {
-    const { handlers, size } = this.props;
-    // Config changes
-    if (this._shouldFullRerender(prevProps)) {
-      // This should be the only place you call renderFn besides the first time
-      this._callRenderFn();
-    }
-
-    // Size changes
-    if (!isEqual(size, prevProps.size)) {
-      return handlers.resize(size);
-    }
-  }
-
-  componentWillUnmount() {
-    this.props.handlers.destroy();
-  }
-
-  _domNode = null;
-
-  _callRenderFn = () => {
-    const { handlers, config, renderFn, reuseNode, name: functionName } = this.props;
-    // TODO: We should wait until handlers.done() is called before replacing the element content?
-    if (!reuseNode || !this.renderTarget) {
-      this._resetRenderTarget(this._domNode);
-    }
-    // else if (!firstRender) handlers.destroy();
-
-    const renderConfig = cloneDeep(config);
-
-    // TODO: this is hacky, but it works. it stops Kibana from blowing up when a render throws
-    try {
-      renderFn(this.renderTarget, renderConfig, handlers);
-      this.firstRender = false;
-    } catch (err) {
-      console.error('renderFn threw', err);
-      this.props.onError(err, { title: strings.getRenderErrorMessage(functionName) });
-    }
-  };
-
-  _resetRenderTarget = (domNode) => {
-    const { handlers } = this.props;
-
-    if (!domNode) {
-      throw new Error('RenderWithFn can not reset undefined target node');
-    }
-
-    // call destroy on existing element
-    if (!this.firstRender) {
-      handlers.destroy();
-    }
-
-    while (domNode.firstChild) {
-      domNode.removeChild(domNode.firstChild);
-    }
-
-    this.firstRender = true;
-    this.renderTarget = this._createRenderTarget();
-    domNode.appendChild(this.renderTarget);
-  };
-
-  _createRenderTarget = () => {
-    const div = document.createElement('div');
-    div.style.width = '100%';
-    div.style.height = '100%';
-    return div;
-  };
-
-  _shouldFullRerender = (prevProps) => {
-    // required to stop re-renders on element move, anything that should
-    // cause a re-render needs to be checked here
-    // TODO: fix props passed in to remove this check
-    return (
-      this.props.handlers !== prevProps.handlers ||
-      !isEqual(this.props.config, prevProps.config) ||
-      !isEqual(this.props.renderFn.toString(), prevProps.renderFn.toString())
-    );
-  };
-
-  destroy = () => {
-    this.props.handlers.destroy();
-  };
-
-  render() {
-    // NOTE: the data-shared-* attributes here are used for reporting
-    return (
-      <div
-        className="canvasWorkpad--element_render canvasRenderEl"
-        style={{ height: '100%', width: '100%' }}
-      >
-        <RenderToDom
-          style={{ height: '100%', width: '100%' }}
-          render={(domNode) => {
-            this._domNode = domNode;
-            this._callRenderFn();
-          }}
-        />
-      </div>
-    );
-  }
-}
diff --git a/x-pack/plugins/canvas/public/components/render_with_fn/render_with_fn.tsx b/x-pack/plugins/canvas/public/components/render_with_fn/render_with_fn.tsx
new file mode 100644
index 000000000000..bc51128cf0c8
--- /dev/null
+++ b/x-pack/plugins/canvas/public/components/render_with_fn/render_with_fn.tsx
@@ -0,0 +1,117 @@
+/*
+ * 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 React, { useState, useEffect, useRef, FC, useCallback } from 'react';
+import { useDebounce } from 'react-use';
+
+import { useKibana } from '../../../../../../src/plugins/kibana_react/public';
+import { RenderToDom } from '../render_to_dom';
+import { ErrorStrings } from '../../../i18n';
+import { RendererHandlers } from '../../../types';
+
+const { RenderWithFn: strings } = ErrorStrings;
+
+interface Props {
+  name: string;
+  renderFn: (
+    domNode: HTMLElement,
+    config: Record<string, any>,
+    handlers: RendererHandlers
+  ) => void | Promise<void>;
+  reuseNode: boolean;
+  handlers: RendererHandlers;
+  config: Record<string, any>;
+  height: number;
+  width: number;
+}
+
+const style = { height: '100%', width: '100%' };
+
+export const RenderWithFn: FC<Props> = ({
+  name: functionName,
+  renderFn,
+  reuseNode = false,
+  handlers: incomingHandlers,
+  config,
+  width,
+  height,
+}) => {
+  const { services } = useKibana();
+  const onError = services.canvas.notify.error;
+
+  const [domNode, setDomNode] = useState<HTMLElement | null>(null);
+
+  // Tells us if the component is attempting to re-render into a previously-populated render target.
+  const firstRender = useRef(true);
+  // A reference to the node appended to the provided DOM node which is created and optionally replaced.
+  const renderTarget = useRef<HTMLDivElement | null>(null);
+  // A reference to the handlers, as the renderFn may mutate them, (via onXYZ functions)
+  const handlers = useRef<RendererHandlers>(incomingHandlers);
+
+  // Reset the render target, the node appended to the DOM node provided by RenderToDOM.
+  const resetRenderTarget = useCallback(() => {
+    if (!domNode) {
+      return;
+    }
+
+    if (!firstRender) {
+      handlers.current.destroy();
+    }
+
+    while (domNode.firstChild) {
+      domNode.removeChild(domNode.firstChild);
+    }
+
+    const div = document.createElement('div');
+    div.style.width = '100%';
+    div.style.height = '100%';
+    domNode.appendChild(div);
+
+    renderTarget.current = div;
+    firstRender.current = true;
+  }, [domNode]);
+
+  useDebounce(() => handlers.current.resize({ height, width }), 150, [height, width]);
+
+  useEffect(
+    () => () => {
+      handlers.current.destroy();
+    },
+    []
+  );
+
+  const render = useCallback(() => {
+    renderFn(renderTarget.current!, config, handlers.current);
+  }, [renderTarget, config, renderFn]);
+
+  useEffect(() => {
+    if (!domNode) {
+      return;
+    }
+
+    if (!reuseNode || !renderTarget.current) {
+      resetRenderTarget();
+    }
+
+    try {
+      render();
+      firstRender.current = false;
+    } catch (err) {
+      onError(err, { title: strings.getRenderErrorMessage(functionName) });
+    }
+  }, [domNode, functionName, onError, render, resetRenderTarget, reuseNode]);
+
+  return (
+    <div className="canvasWorkpad--element_render canvasRenderEl" style={style}>
+      <RenderToDom
+        style={style}
+        render={(node: HTMLElement) => {
+          setDomNode(node);
+        }}
+      />
+    </div>
+  );
+};
diff --git a/x-pack/plugins/canvas/public/lib/create_handlers.ts b/x-pack/plugins/canvas/public/lib/create_handlers.ts
new file mode 100644
index 000000000000..4e0c7b217d5b
--- /dev/null
+++ b/x-pack/plugins/canvas/public/lib/create_handlers.ts
@@ -0,0 +1,96 @@
+/*
+ * 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 { isEqual } from 'lodash';
+// @ts-ignore untyped local
+import { setFilter } from '../state/actions/elements';
+import { updateEmbeddableExpression, fetchEmbeddableRenderable } from '../state/actions/embeddable';
+import { RendererHandlers, CanvasElement } from '../../types';
+
+// This class creates stub handlers to ensure every element and renderer fulfills the contract.
+// TODO: consider warning if these methods are invoked but not implemented by the renderer...?
+
+export const createHandlers = (): RendererHandlers => ({
+  destroy() {},
+  done() {},
+  event() {},
+  getElementId() {
+    return '';
+  },
+  getFilter() {
+    return '';
+  },
+  onComplete(fn: () => void) {
+    this.done = fn;
+  },
+  onDestroy(fn: () => void) {
+    this.destroy = fn;
+  },
+  // TODO: these functions do not match the `onXYZ` and `xyz` pattern elsewhere.
+  onEmbeddableDestroyed() {},
+  onEmbeddableInputChange() {},
+  onResize(fn: (size: { height: number; width: number }) => void) {
+    this.resize = fn;
+  },
+  reload() {},
+  resize(_size: { height: number; width: number }) {},
+  setFilter() {},
+  update() {},
+});
+
+export const assignHandlers = (handlers: Partial<RendererHandlers> = {}): RendererHandlers =>
+  Object.assign(createHandlers(), handlers);
+
+// TODO: this is a legacy approach we should unravel in the near future.
+export const createDispatchedHandlerFactory = (
+  dispatch: (action: any) => void
+): ((element: CanvasElement) => RendererHandlers) => {
+  let isComplete = false;
+  let oldElement: CanvasElement | undefined;
+  let completeFn = () => {};
+
+  return (element: CanvasElement) => {
+    // reset isComplete when element changes
+    if (!isEqual(oldElement, element)) {
+      isComplete = false;
+      oldElement = element;
+    }
+
+    return assignHandlers({
+      setFilter(text: string) {
+        dispatch(setFilter(text, element.id, true));
+      },
+
+      getFilter() {
+        return element.filter;
+      },
+
+      onComplete(fn: () => void) {
+        completeFn = fn;
+      },
+
+      getElementId: () => element.id,
+
+      onEmbeddableInputChange(embeddableExpression: string) {
+        dispatch(updateEmbeddableExpression({ elementId: element.id, embeddableExpression }));
+      },
+
+      onEmbeddableDestroyed() {
+        dispatch(fetchEmbeddableRenderable(element.id));
+      },
+
+      done() {
+        // don't emit if the element is already done
+        if (isComplete) {
+          return;
+        }
+
+        isComplete = true;
+        completeFn();
+      },
+    });
+  };
+};
diff --git a/x-pack/plugins/canvas/shareable_runtime/components/rendered_element.tsx b/x-pack/plugins/canvas/shareable_runtime/components/rendered_element.tsx
index 5741f5f2d698..6bcc0db92f1c 100644
--- a/x-pack/plugins/canvas/shareable_runtime/components/rendered_element.tsx
+++ b/x-pack/plugins/canvas/shareable_runtime/components/rendered_element.tsx
@@ -7,13 +7,13 @@
 import React, { FC, PureComponent } from 'react';
 // @ts-expect-error untyped library
 import Style from 'style-it';
-// @ts-expect-error untyped local
 import { Positionable } from '../../public/components/positionable/positionable';
 // @ts-expect-error untyped local
 import { elementToShape } from '../../public/components/workpad_page/utils';
 import { CanvasRenderedElement } from '../types';
 import { CanvasShareableContext, useCanvasShareableState } from '../context';
 import { RendererSpec } from '../../types';
+import { createHandlers } from '../../public/lib/create_handlers';
 
 import css from './rendered_element.module.scss';
 
@@ -62,17 +62,7 @@ export class RenderedElementComponent extends PureComponent<Props> {
     }
 
     try {
-      // TODO: These are stubbed, but may need implementation.
-      fn.render(this.ref.current, value.value, {
-        done: () => {},
-        onDestroy: () => {},
-        onResize: () => {},
-        getElementId: () => '',
-        setFilter: () => {},
-        getFilter: () => '',
-        onEmbeddableInputChange: () => {},
-        onEmbeddableDestroyed: () => {},
-      });
+      fn.render(this.ref.current, value.value, createHandlers());
     } catch (e) {
       // eslint-disable-next-line no-console
       console.log(as, e.message);
diff --git a/x-pack/plugins/canvas/types/renderers.ts b/x-pack/plugins/canvas/types/renderers.ts
index 2564b045d1cf..772a16aa94c6 100644
--- a/x-pack/plugins/canvas/types/renderers.ts
+++ b/x-pack/plugins/canvas/types/renderers.ts
@@ -4,25 +4,29 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-type GenericCallback = (callback: () => void) => void;
+import { IInterpreterRenderHandlers } from 'src/plugins/expressions';
 
-export interface RendererHandlers {
-  /** Handler to invoke when an element has finished rendering */
-  done: () => void;
+type GenericRendererCallback = (callback: () => void) => void;
+
+export interface RendererHandlers extends IInterpreterRenderHandlers {
+  /** Handler to invoke when an element should be destroyed. */
+  destroy: () => void;
   /** Get the id of the element being rendered.  Can be used as a unique ID in a render function */
   getElementId: () => string;
-  /** Handler to invoke when an element is deleted or changes to a different render type */
-  onDestroy: GenericCallback;
-  /** Handler to invoke when an element's dimensions have changed*/
-  onResize: GenericCallback;
   /** Retrieves the value of the filter property on the element object persisted on the workpad */
   getFilter: () => string;
-  /** Sets the value of the filter property on the element object persisted on the workpad */
-  setFilter: (filter: string) => void;
-  /** Handler to invoke when the input to a function has changed internally */
-  onEmbeddableInputChange: (expression: string) => void;
+  /** Handler to invoke when a renderer is considered complete */
+  onComplete: (fn: () => void) => void;
   /** Handler to invoke when a rendered embeddable is destroyed */
   onEmbeddableDestroyed: () => void;
+  /** Handler to invoke when the input to a function has changed internally */
+  onEmbeddableInputChange: (expression: string) => void;
+  /** Handler to invoke when an element's dimensions have changed*/
+  onResize: GenericRendererCallback;
+  /** Handler to invoke when an element should be resized. */
+  resize: (size: { height: number; width: number }) => void;
+  /** Sets the value of the filter property on the element object persisted on the workpad */
+  setFilter: (filter: string) => void;
 }
 
 export interface RendererSpec<RendererConfig = {}> {

From 8ed4f7f91f4efecb39e4e74c0e658259b68b40b1 Mon Sep 17 00:00:00 2001
From: Catherine Liu <catherine.liu@elastic.co>
Date: Wed, 24 Jun 2020 15:08:37 -0700
Subject: [PATCH 5/8] Adds link for Cloud deployment settings (#66486)

Co-authored-by: Michail Yasonik <michail@yasonik.com>
Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
---
 src/core/public/chrome/chrome_service.mock.ts |   3 +
 src/core/public/chrome/chrome_service.test.ts |  21 +
 src/core/public/chrome/chrome_service.tsx     |  20 +-
 .../collapsible_nav.test.tsx.snap             | 395 ++++++++++++++++
 .../header/__snapshots__/header.test.tsx.snap | 435 ++++++++++++++++++
 .../chrome/ui/header/collapsible_nav.test.tsx |   3 +
 .../chrome/ui/header/collapsible_nav.tsx      |  36 +-
 .../public/chrome/ui/header/header.test.tsx   |   8 +
 src/core/public/chrome/ui/header/header.tsx   |   2 +
 src/core/public/chrome/ui/header/nav_link.tsx |   5 +-
 src/core/public/public.api.md                 |   2 +
 x-pack/.i18nrc.json                           |   1 +
 x-pack/plugins/cloud/public/plugin.ts         |  20 +-
 x-pack/plugins/cloud/server/config.ts         |   2 +
 14 files changed, 948 insertions(+), 5 deletions(-)

diff --git a/src/core/public/chrome/chrome_service.mock.ts b/src/core/public/chrome/chrome_service.mock.ts
index 4a79dd8869c1..c9a05ff4e08f 100644
--- a/src/core/public/chrome/chrome_service.mock.ts
+++ b/src/core/public/chrome/chrome_service.mock.ts
@@ -74,6 +74,8 @@ const createStartContractMock = () => {
     setHelpSupportUrl: jest.fn(),
     getIsNavDrawerLocked$: jest.fn(),
     getNavType$: jest.fn(),
+    getCustomNavLink$: jest.fn(),
+    setCustomNavLink: jest.fn(),
   };
   startContract.navLinks.getAll.mockReturnValue([]);
   startContract.getBrand$.mockReturnValue(new BehaviorSubject({} as ChromeBrand));
@@ -81,6 +83,7 @@ const createStartContractMock = () => {
   startContract.getApplicationClasses$.mockReturnValue(new BehaviorSubject(['class-name']));
   startContract.getBadge$.mockReturnValue(new BehaviorSubject({} as ChromeBadge));
   startContract.getBreadcrumbs$.mockReturnValue(new BehaviorSubject([{} as ChromeBreadcrumb]));
+  startContract.getCustomNavLink$.mockReturnValue(new BehaviorSubject(undefined));
   startContract.getHelpExtension$.mockReturnValue(new BehaviorSubject(undefined));
   startContract.getIsNavDrawerLocked$.mockReturnValue(new BehaviorSubject(false));
   startContract.getNavType$.mockReturnValue(new BehaviorSubject('modern' as NavType));
diff --git a/src/core/public/chrome/chrome_service.test.ts b/src/core/public/chrome/chrome_service.test.ts
index e39733cc10de..8dc81dceaccd 100644
--- a/src/core/public/chrome/chrome_service.test.ts
+++ b/src/core/public/chrome/chrome_service.test.ts
@@ -363,6 +363,27 @@ describe('start', () => {
     });
   });
 
+  describe('custom nav link', () => {
+    it('updates/emits the current custom nav link', async () => {
+      const { chrome, service } = await start();
+      const promise = chrome.getCustomNavLink$().pipe(toArray()).toPromise();
+
+      chrome.setCustomNavLink({ title: 'Manage cloud deployment' });
+      chrome.setCustomNavLink(undefined);
+      service.stop();
+
+      await expect(promise).resolves.toMatchInlineSnapshot(`
+              Array [
+                undefined,
+                Object {
+                  "title": "Manage cloud deployment",
+                },
+                undefined,
+              ]
+            `);
+    });
+  });
+
   describe('help extension', () => {
     it('updates/emits the current help extension', async () => {
       const { chrome, service } = await start();
diff --git a/src/core/public/chrome/chrome_service.tsx b/src/core/public/chrome/chrome_service.tsx
index 67cd43f0647e..0fe3c1f083cf 100644
--- a/src/core/public/chrome/chrome_service.tsx
+++ b/src/core/public/chrome/chrome_service.tsx
@@ -34,7 +34,7 @@ import { IUiSettingsClient } from '../ui_settings';
 import { KIBANA_ASK_ELASTIC_LINK } from './constants';
 import { ChromeDocTitle, DocTitleService } from './doc_title';
 import { ChromeNavControls, NavControlsService } from './nav_controls';
-import { ChromeNavLinks, NavLinksService } from './nav_links';
+import { ChromeNavLinks, NavLinksService, ChromeNavLink } from './nav_links';
 import { ChromeRecentlyAccessed, RecentlyAccessedService } from './recently_accessed';
 import { Header } from './ui';
 import { NavType } from './ui/header';
@@ -148,6 +148,7 @@ export class ChromeService {
     const helpExtension$ = new BehaviorSubject<ChromeHelpExtension | undefined>(undefined);
     const breadcrumbs$ = new BehaviorSubject<ChromeBreadcrumb[]>([]);
     const badge$ = new BehaviorSubject<ChromeBadge | undefined>(undefined);
+    const customNavLink$ = new BehaviorSubject<ChromeNavLink | undefined>(undefined);
     const helpSupportUrl$ = new BehaviorSubject<string>(KIBANA_ASK_ELASTIC_LINK);
     const isNavDrawerLocked$ = new BehaviorSubject(localStorage.getItem(IS_LOCKED_KEY) === 'true');
 
@@ -221,6 +222,7 @@ export class ChromeService {
           badge$={badge$.pipe(takeUntil(this.stop$))}
           basePath={http.basePath}
           breadcrumbs$={breadcrumbs$.pipe(takeUntil(this.stop$))}
+          customNavLink$={customNavLink$.pipe(takeUntil(this.stop$))}
           kibanaDocLink={docLinks.links.kibana}
           forceAppSwitcherNavigation$={navLinks.getForceAppSwitcherNavigation$()}
           helpExtension$={helpExtension$.pipe(takeUntil(this.stop$))}
@@ -297,6 +299,12 @@ export class ChromeService {
       getIsNavDrawerLocked$: () => getIsNavDrawerLocked$,
 
       getNavType$: () => getNavType$,
+
+      getCustomNavLink$: () => customNavLink$.pipe(takeUntil(this.stop$)),
+
+      setCustomNavLink: (customNavLink?: ChromeNavLink) => {
+        customNavLink$.next(customNavLink);
+      },
     };
   }
 
@@ -423,6 +431,16 @@ export interface ChromeStart {
    */
   setBreadcrumbs(newBreadcrumbs: ChromeBreadcrumb[]): void;
 
+  /**
+   * Get an observable of the current custom nav link
+   */
+  getCustomNavLink$(): Observable<Partial<ChromeNavLink> | undefined>;
+
+  /**
+   * Override the current set of custom nav link
+   */
+  setCustomNavLink(newCustomNavLink?: Partial<ChromeNavLink>): void;
+
   /**
    * Get an observable of the current custom help conttent
    */
diff --git a/src/core/public/chrome/ui/header/__snapshots__/collapsible_nav.test.tsx.snap b/src/core/public/chrome/ui/header/__snapshots__/collapsible_nav.test.tsx.snap
index 9239811df206..9fee7b50f371 100644
--- a/src/core/public/chrome/ui/header/__snapshots__/collapsible_nav.test.tsx.snap
+++ b/src/core/public/chrome/ui/header/__snapshots__/collapsible_nav.test.tsx.snap
@@ -61,6 +61,64 @@ exports[`CollapsibleNav renders links grouped by category 1`] = `
     }
   }
   closeNav={[Function]}
+  customNavLink$={
+    BehaviorSubject {
+      "_isScalar": false,
+      "_value": Object {
+        "baseUrl": "/",
+        "category": undefined,
+        "data-test-subj": "Custom link",
+        "href": "Custom link",
+        "id": "Custom link",
+        "isActive": true,
+        "legacy": false,
+        "title": "Custom link",
+      },
+      "closed": false,
+      "hasError": false,
+      "isStopped": false,
+      "observers": Array [
+        Subscriber {
+          "_parentOrParents": null,
+          "_subscriptions": Array [
+            SubjectSubscription {
+              "_parentOrParents": [Circular],
+              "_subscriptions": null,
+              "closed": false,
+              "subject": [Circular],
+              "subscriber": [Circular],
+            },
+          ],
+          "closed": false,
+          "destination": SafeSubscriber {
+            "_complete": undefined,
+            "_context": [Circular],
+            "_error": undefined,
+            "_next": [Function],
+            "_parentOrParents": null,
+            "_parentSubscriber": [Circular],
+            "_subscriptions": null,
+            "closed": false,
+            "destination": Object {
+              "closed": true,
+              "complete": [Function],
+              "error": [Function],
+              "next": [Function],
+            },
+            "isStopped": false,
+            "syncErrorThrowable": false,
+            "syncErrorThrown": false,
+            "syncErrorValue": null,
+          },
+          "isStopped": false,
+          "syncErrorThrowable": true,
+          "syncErrorThrown": false,
+          "syncErrorValue": null,
+        },
+      ],
+      "thrownError": null,
+    }
+  }
   homeHref="/"
   id="collapsibe-nav"
   isLocked={false}
@@ -408,6 +466,46 @@ exports[`CollapsibleNav renders links grouped by category 1`] = `
                         data-test-subj="collapsibleNav"
                         id="collapsibe-nav"
                       >
+                        <div
+                          class="euiFlexItem euiFlexItem--flexGrowZero"
+                          style="flex-shrink: 0;"
+                        >
+                          <div
+                            class="euiCollapsibleNavGroup euiCollapsibleNavGroup--light eui-yScroll"
+                            id="mockId"
+                            style="max-height: 40vh;"
+                          >
+                            <div
+                              class="euiCollapsibleNavGroup__children"
+                            >
+                              <ul
+                                class="euiListGroup"
+                                style="max-width: none;"
+                              >
+                                <li
+                                  class="euiListGroupItem euiListGroupItem--small euiListGroupItem--text euiListGroupItem-isClickable"
+                                >
+                                  <a
+                                    class="euiListGroupItem__button"
+                                    data-test-subj="collapsibleNavCustomNavLink"
+                                    href="Custom link"
+                                    rel="noreferrer"
+                                  >
+                                    <span
+                                      class="euiListGroupItem__label"
+                                      title="Custom link"
+                                    >
+                                      Custom link
+                                    </span>
+                                  </a>
+                                </li>
+                              </ul>
+                            </div>
+                          </div>
+                        </div>
+                        <hr
+                          class="euiHorizontalRule euiHorizontalRule--full"
+                        />
                         <div
                           class="euiFlexItem euiFlexItem--flexGrowZero"
                           style="flex-shrink: 0;"
@@ -1053,6 +1151,46 @@ exports[`CollapsibleNav renders links grouped by category 1`] = `
                           data-test-subj="collapsibleNav"
                           id="collapsibe-nav"
                         >
+                          <div
+                            class="euiFlexItem euiFlexItem--flexGrowZero"
+                            style="flex-shrink: 0;"
+                          >
+                            <div
+                              class="euiCollapsibleNavGroup euiCollapsibleNavGroup--light eui-yScroll"
+                              id="mockId"
+                              style="max-height: 40vh;"
+                            >
+                              <div
+                                class="euiCollapsibleNavGroup__children"
+                              >
+                                <ul
+                                  class="euiListGroup"
+                                  style="max-width: none;"
+                                >
+                                  <li
+                                    class="euiListGroupItem euiListGroupItem--small euiListGroupItem--text euiListGroupItem-isClickable"
+                                  >
+                                    <a
+                                      class="euiListGroupItem__button"
+                                      data-test-subj="collapsibleNavCustomNavLink"
+                                      href="Custom link"
+                                      rel="noreferrer"
+                                    >
+                                      <span
+                                        class="euiListGroupItem__label"
+                                        title="Custom link"
+                                      >
+                                        Custom link
+                                      </span>
+                                    </a>
+                                  </li>
+                                </ul>
+                              </div>
+                            </div>
+                          </div>
+                          <hr
+                            class="euiHorizontalRule euiHorizontalRule--full"
+                          />
                           <div
                             class="euiFlexItem euiFlexItem--flexGrowZero"
                             style="flex-shrink: 0;"
@@ -1692,6 +1830,116 @@ exports[`CollapsibleNav renders links grouped by category 1`] = `
                   data-test-subj="collapsibleNav"
                   id="collapsibe-nav"
                 >
+                  <EuiFlexItem
+                    grow={false}
+                    style={
+                      Object {
+                        "flexShrink": 0,
+                      }
+                    }
+                  >
+                    <div
+                      className="euiFlexItem euiFlexItem--flexGrowZero"
+                      style={
+                        Object {
+                          "flexShrink": 0,
+                        }
+                      }
+                    >
+                      <EuiCollapsibleNavGroup
+                        background="light"
+                        className="eui-yScroll"
+                        style={
+                          Object {
+                            "maxHeight": "40vh",
+                          }
+                        }
+                      >
+                        <div
+                          className="euiCollapsibleNavGroup euiCollapsibleNavGroup--light eui-yScroll"
+                          id="mockId"
+                          style={
+                            Object {
+                              "maxHeight": "40vh",
+                            }
+                          }
+                        >
+                          <div
+                            className="euiCollapsibleNavGroup__children"
+                          >
+                            <EuiListGroup
+                              color="text"
+                              gutterSize="none"
+                              listItems={
+                                Array [
+                                  Object {
+                                    "data-test-subj": "collapsibleNavCustomNavLink",
+                                    "href": "Custom link",
+                                    "icon": undefined,
+                                    "iconType": undefined,
+                                    "isActive": false,
+                                    "isDisabled": undefined,
+                                    "label": "Custom link",
+                                    "onClick": [Function],
+                                  },
+                                ]
+                              }
+                              maxWidth="none"
+                              size="s"
+                            >
+                              <ul
+                                className="euiListGroup"
+                                style={
+                                  Object {
+                                    "maxWidth": "none",
+                                  }
+                                }
+                              >
+                                <EuiListGroupItem
+                                  color="text"
+                                  data-test-subj="collapsibleNavCustomNavLink"
+                                  href="Custom link"
+                                  isActive={false}
+                                  key="title-0"
+                                  label="Custom link"
+                                  onClick={[Function]}
+                                  showToolTip={false}
+                                  size="s"
+                                  wrapText={false}
+                                >
+                                  <li
+                                    className="euiListGroupItem euiListGroupItem--small euiListGroupItem--text euiListGroupItem-isClickable"
+                                  >
+                                    <a
+                                      className="euiListGroupItem__button"
+                                      data-test-subj="collapsibleNavCustomNavLink"
+                                      href="Custom link"
+                                      onClick={[Function]}
+                                      rel="noreferrer"
+                                    >
+                                      <span
+                                        className="euiListGroupItem__label"
+                                        title="Custom link"
+                                      >
+                                        Custom link
+                                      </span>
+                                    </a>
+                                  </li>
+                                </EuiListGroupItem>
+                              </ul>
+                            </EuiListGroup>
+                          </div>
+                        </div>
+                      </EuiCollapsibleNavGroup>
+                    </div>
+                  </EuiFlexItem>
+                  <EuiHorizontalRule
+                    margin="none"
+                  >
+                    <hr
+                      className="euiHorizontalRule euiHorizontalRule--full"
+                    />
+                  </EuiHorizontalRule>
                   <EuiFlexItem
                     grow={false}
                     style={
@@ -3249,6 +3497,55 @@ exports[`CollapsibleNav renders the default nav 1`] = `
     }
   }
   closeNav={[Function]}
+  customNavLink$={
+    BehaviorSubject {
+      "_isScalar": false,
+      "_value": undefined,
+      "closed": false,
+      "hasError": false,
+      "isStopped": false,
+      "observers": Array [
+        Subscriber {
+          "_parentOrParents": null,
+          "_subscriptions": Array [
+            SubjectSubscription {
+              "_parentOrParents": [Circular],
+              "_subscriptions": null,
+              "closed": false,
+              "subject": [Circular],
+              "subscriber": [Circular],
+            },
+          ],
+          "closed": false,
+          "destination": SafeSubscriber {
+            "_complete": undefined,
+            "_context": [Circular],
+            "_error": undefined,
+            "_next": [Function],
+            "_parentOrParents": null,
+            "_parentSubscriber": [Circular],
+            "_subscriptions": null,
+            "closed": false,
+            "destination": Object {
+              "closed": true,
+              "complete": [Function],
+              "error": [Function],
+              "next": [Function],
+            },
+            "isStopped": false,
+            "syncErrorThrowable": false,
+            "syncErrorThrown": false,
+            "syncErrorValue": null,
+          },
+          "isStopped": false,
+          "syncErrorThrowable": true,
+          "syncErrorThrown": false,
+          "syncErrorValue": null,
+        },
+      ],
+      "thrownError": null,
+    }
+  }
   homeHref="/"
   id="collapsibe-nav"
   isLocked={false}
@@ -3435,6 +3732,55 @@ exports[`CollapsibleNav renders the default nav 2`] = `
     }
   }
   closeNav={[Function]}
+  customNavLink$={
+    BehaviorSubject {
+      "_isScalar": false,
+      "_value": undefined,
+      "closed": false,
+      "hasError": false,
+      "isStopped": false,
+      "observers": Array [
+        Subscriber {
+          "_parentOrParents": null,
+          "_subscriptions": Array [
+            SubjectSubscription {
+              "_parentOrParents": [Circular],
+              "_subscriptions": null,
+              "closed": false,
+              "subject": [Circular],
+              "subscriber": [Circular],
+            },
+          ],
+          "closed": false,
+          "destination": SafeSubscriber {
+            "_complete": undefined,
+            "_context": [Circular],
+            "_error": undefined,
+            "_next": [Function],
+            "_parentOrParents": null,
+            "_parentSubscriber": [Circular],
+            "_subscriptions": null,
+            "closed": false,
+            "destination": Object {
+              "closed": true,
+              "complete": [Function],
+              "error": [Function],
+              "next": [Function],
+            },
+            "isStopped": false,
+            "syncErrorThrowable": false,
+            "syncErrorThrown": false,
+            "syncErrorValue": null,
+          },
+          "isStopped": false,
+          "syncErrorThrowable": true,
+          "syncErrorThrown": false,
+          "syncErrorValue": null,
+        },
+      ],
+      "thrownError": null,
+    }
+  }
   homeHref="/"
   id="collapsibe-nav"
   isLocked={false}
@@ -4167,6 +4513,55 @@ exports[`CollapsibleNav renders the default nav 3`] = `
     }
   }
   closeNav={[Function]}
+  customNavLink$={
+    BehaviorSubject {
+      "_isScalar": false,
+      "_value": undefined,
+      "closed": false,
+      "hasError": false,
+      "isStopped": false,
+      "observers": Array [
+        Subscriber {
+          "_parentOrParents": null,
+          "_subscriptions": Array [
+            SubjectSubscription {
+              "_parentOrParents": [Circular],
+              "_subscriptions": null,
+              "closed": false,
+              "subject": [Circular],
+              "subscriber": [Circular],
+            },
+          ],
+          "closed": false,
+          "destination": SafeSubscriber {
+            "_complete": undefined,
+            "_context": [Circular],
+            "_error": undefined,
+            "_next": [Function],
+            "_parentOrParents": null,
+            "_parentSubscriber": [Circular],
+            "_subscriptions": null,
+            "closed": false,
+            "destination": Object {
+              "closed": true,
+              "complete": [Function],
+              "error": [Function],
+              "next": [Function],
+            },
+            "isStopped": false,
+            "syncErrorThrowable": false,
+            "syncErrorThrown": false,
+            "syncErrorValue": null,
+          },
+          "isStopped": false,
+          "syncErrorThrowable": true,
+          "syncErrorThrown": false,
+          "syncErrorValue": null,
+        },
+      ],
+      "thrownError": null,
+    }
+  }
   homeHref="/"
   id="collapsibe-nav"
   isLocked={true}
diff --git a/src/core/public/chrome/ui/header/__snapshots__/header.test.tsx.snap b/src/core/public/chrome/ui/header/__snapshots__/header.test.tsx.snap
index 455921ba38a8..a70de7e04a46 100644
--- a/src/core/public/chrome/ui/header/__snapshots__/header.test.tsx.snap
+++ b/src/core/public/chrome/ui/header/__snapshots__/header.test.tsx.snap
@@ -101,6 +101,22 @@ exports[`Header renders 1`] = `
       "thrownError": null,
     }
   }
+  customNavLink$={
+    BehaviorSubject {
+      "_isScalar": false,
+      "_value": Object {
+        "baseUrl": "",
+        "id": "cloud-deployment-link",
+        "legacy": false,
+        "title": "Manage cloud deployment",
+      },
+      "closed": false,
+      "hasError": false,
+      "isStopped": false,
+      "observers": Array [],
+      "thrownError": null,
+    }
+  }
   forceAppSwitcherNavigation$={
     BehaviorSubject {
       "_isScalar": false,
@@ -811,6 +827,60 @@ exports[`Header renders 2`] = `
       "thrownError": null,
     }
   }
+  customNavLink$={
+    BehaviorSubject {
+      "_isScalar": false,
+      "_value": Object {
+        "baseUrl": "",
+        "id": "cloud-deployment-link",
+        "legacy": false,
+        "title": "Manage cloud deployment",
+      },
+      "closed": false,
+      "hasError": false,
+      "isStopped": false,
+      "observers": Array [
+        Subscriber {
+          "_parentOrParents": null,
+          "_subscriptions": Array [
+            SubjectSubscription {
+              "_parentOrParents": [Circular],
+              "_subscriptions": null,
+              "closed": false,
+              "subject": [Circular],
+              "subscriber": [Circular],
+            },
+          ],
+          "closed": false,
+          "destination": SafeSubscriber {
+            "_complete": undefined,
+            "_context": [Circular],
+            "_error": undefined,
+            "_next": [Function],
+            "_parentOrParents": null,
+            "_parentSubscriber": [Circular],
+            "_subscriptions": null,
+            "closed": false,
+            "destination": Object {
+              "closed": true,
+              "complete": [Function],
+              "error": [Function],
+              "next": [Function],
+            },
+            "isStopped": false,
+            "syncErrorThrowable": false,
+            "syncErrorThrown": false,
+            "syncErrorValue": null,
+          },
+          "isStopped": false,
+          "syncErrorThrowable": true,
+          "syncErrorThrown": false,
+          "syncErrorValue": null,
+        },
+      ],
+      "thrownError": null,
+    }
+  }
   forceAppSwitcherNavigation$={
     BehaviorSubject {
       "_isScalar": false,
@@ -4492,6 +4562,60 @@ exports[`Header renders 2`] = `
         }
       }
       closeNav={[Function]}
+      customNavLink$={
+        BehaviorSubject {
+          "_isScalar": false,
+          "_value": Object {
+            "baseUrl": "",
+            "id": "cloud-deployment-link",
+            "legacy": false,
+            "title": "Manage cloud deployment",
+          },
+          "closed": false,
+          "hasError": false,
+          "isStopped": false,
+          "observers": Array [
+            Subscriber {
+              "_parentOrParents": null,
+              "_subscriptions": Array [
+                SubjectSubscription {
+                  "_parentOrParents": [Circular],
+                  "_subscriptions": null,
+                  "closed": false,
+                  "subject": [Circular],
+                  "subscriber": [Circular],
+                },
+              ],
+              "closed": false,
+              "destination": SafeSubscriber {
+                "_complete": undefined,
+                "_context": [Circular],
+                "_error": undefined,
+                "_next": [Function],
+                "_parentOrParents": null,
+                "_parentSubscriber": [Circular],
+                "_subscriptions": null,
+                "closed": false,
+                "destination": Object {
+                  "closed": true,
+                  "complete": [Function],
+                  "error": [Function],
+                  "next": [Function],
+                },
+                "isStopped": false,
+                "syncErrorThrowable": false,
+                "syncErrorThrown": false,
+                "syncErrorValue": null,
+              },
+              "isStopped": false,
+              "syncErrorThrowable": true,
+              "syncErrorThrown": false,
+              "syncErrorValue": null,
+            },
+          ],
+          "thrownError": null,
+        }
+      }
       homeHref="/"
       id="mockId"
       isLocked={false}
@@ -4914,6 +5038,60 @@ exports[`Header renders 3`] = `
       "thrownError": null,
     }
   }
+  customNavLink$={
+    BehaviorSubject {
+      "_isScalar": false,
+      "_value": Object {
+        "baseUrl": "",
+        "id": "cloud-deployment-link",
+        "legacy": false,
+        "title": "Manage cloud deployment",
+      },
+      "closed": false,
+      "hasError": false,
+      "isStopped": false,
+      "observers": Array [
+        Subscriber {
+          "_parentOrParents": null,
+          "_subscriptions": Array [
+            SubjectSubscription {
+              "_parentOrParents": [Circular],
+              "_subscriptions": null,
+              "closed": false,
+              "subject": [Circular],
+              "subscriber": [Circular],
+            },
+          ],
+          "closed": false,
+          "destination": SafeSubscriber {
+            "_complete": undefined,
+            "_context": [Circular],
+            "_error": undefined,
+            "_next": [Function],
+            "_parentOrParents": null,
+            "_parentSubscriber": [Circular],
+            "_subscriptions": null,
+            "closed": false,
+            "destination": Object {
+              "closed": true,
+              "complete": [Function],
+              "error": [Function],
+              "next": [Function],
+            },
+            "isStopped": false,
+            "syncErrorThrowable": false,
+            "syncErrorThrown": false,
+            "syncErrorValue": null,
+          },
+          "isStopped": false,
+          "syncErrorThrowable": true,
+          "syncErrorThrown": false,
+          "syncErrorValue": null,
+        },
+      ],
+      "thrownError": null,
+    }
+  }
   forceAppSwitcherNavigation$={
     BehaviorSubject {
       "_isScalar": false,
@@ -8595,6 +8773,60 @@ exports[`Header renders 3`] = `
         }
       }
       closeNav={[Function]}
+      customNavLink$={
+        BehaviorSubject {
+          "_isScalar": false,
+          "_value": Object {
+            "baseUrl": "",
+            "id": "cloud-deployment-link",
+            "legacy": false,
+            "title": "Manage cloud deployment",
+          },
+          "closed": false,
+          "hasError": false,
+          "isStopped": false,
+          "observers": Array [
+            Subscriber {
+              "_parentOrParents": null,
+              "_subscriptions": Array [
+                SubjectSubscription {
+                  "_parentOrParents": [Circular],
+                  "_subscriptions": null,
+                  "closed": false,
+                  "subject": [Circular],
+                  "subscriber": [Circular],
+                },
+              ],
+              "closed": false,
+              "destination": SafeSubscriber {
+                "_complete": undefined,
+                "_context": [Circular],
+                "_error": undefined,
+                "_next": [Function],
+                "_parentOrParents": null,
+                "_parentSubscriber": [Circular],
+                "_subscriptions": null,
+                "closed": false,
+                "destination": Object {
+                  "closed": true,
+                  "complete": [Function],
+                  "error": [Function],
+                  "next": [Function],
+                },
+                "isStopped": false,
+                "syncErrorThrowable": false,
+                "syncErrorThrown": false,
+                "syncErrorValue": null,
+              },
+              "isStopped": false,
+              "syncErrorThrowable": true,
+              "syncErrorThrown": false,
+              "syncErrorValue": null,
+            },
+          ],
+          "thrownError": null,
+        }
+      }
       homeHref="/"
       id="mockId"
       isLocked={true}
@@ -8847,6 +9079,45 @@ exports[`Header renders 3`] = `
                             data-test-subj="collapsibleNav"
                             id="mockId"
                           >
+                            <div
+                              class="euiFlexItem euiFlexItem--flexGrowZero"
+                              style="flex-shrink: 0;"
+                            >
+                              <div
+                                class="euiCollapsibleNavGroup euiCollapsibleNavGroup--light eui-yScroll"
+                                id="mockId"
+                                style="max-height: 40vh;"
+                              >
+                                <div
+                                  class="euiCollapsibleNavGroup__children"
+                                >
+                                  <ul
+                                    class="euiListGroup"
+                                    style="max-width: none;"
+                                  >
+                                    <li
+                                      class="euiListGroupItem euiListGroupItem--small euiListGroupItem--text euiListGroupItem-isClickable"
+                                    >
+                                      <button
+                                        class="euiListGroupItem__button"
+                                        data-test-subj="collapsibleNavCustomNavLink"
+                                        type="button"
+                                      >
+                                        <span
+                                          class="euiListGroupItem__label"
+                                          title="Manage cloud deployment"
+                                        >
+                                          Manage cloud deployment
+                                        </span>
+                                      </button>
+                                    </li>
+                                  </ul>
+                                </div>
+                              </div>
+                            </div>
+                            <hr
+                              class="euiHorizontalRule euiHorizontalRule--full"
+                            />
                             <div
                               class="euiFlexItem euiFlexItem--flexGrowZero"
                               style="flex-shrink: 0;"
@@ -9080,6 +9351,45 @@ exports[`Header renders 3`] = `
                               data-test-subj="collapsibleNav"
                               id="mockId"
                             >
+                              <div
+                                class="euiFlexItem euiFlexItem--flexGrowZero"
+                                style="flex-shrink: 0;"
+                              >
+                                <div
+                                  class="euiCollapsibleNavGroup euiCollapsibleNavGroup--light eui-yScroll"
+                                  id="mockId"
+                                  style="max-height: 40vh;"
+                                >
+                                  <div
+                                    class="euiCollapsibleNavGroup__children"
+                                  >
+                                    <ul
+                                      class="euiListGroup"
+                                      style="max-width: none;"
+                                    >
+                                      <li
+                                        class="euiListGroupItem euiListGroupItem--small euiListGroupItem--text euiListGroupItem-isClickable"
+                                      >
+                                        <button
+                                          class="euiListGroupItem__button"
+                                          data-test-subj="collapsibleNavCustomNavLink"
+                                          type="button"
+                                        >
+                                          <span
+                                            class="euiListGroupItem__label"
+                                            title="Manage cloud deployment"
+                                          >
+                                            Manage cloud deployment
+                                          </span>
+                                        </button>
+                                      </li>
+                                    </ul>
+                                  </div>
+                                </div>
+                              </div>
+                              <hr
+                                class="euiHorizontalRule euiHorizontalRule--full"
+                              />
                               <div
                                 class="euiFlexItem euiFlexItem--flexGrowZero"
                                 style="flex-shrink: 0;"
@@ -9307,6 +9617,115 @@ exports[`Header renders 3`] = `
                       data-test-subj="collapsibleNav"
                       id="mockId"
                     >
+                      <EuiFlexItem
+                        grow={false}
+                        style={
+                          Object {
+                            "flexShrink": 0,
+                          }
+                        }
+                      >
+                        <div
+                          className="euiFlexItem euiFlexItem--flexGrowZero"
+                          style={
+                            Object {
+                              "flexShrink": 0,
+                            }
+                          }
+                        >
+                          <EuiCollapsibleNavGroup
+                            background="light"
+                            className="eui-yScroll"
+                            style={
+                              Object {
+                                "maxHeight": "40vh",
+                              }
+                            }
+                          >
+                            <div
+                              className="euiCollapsibleNavGroup euiCollapsibleNavGroup--light eui-yScroll"
+                              id="mockId"
+                              style={
+                                Object {
+                                  "maxHeight": "40vh",
+                                }
+                              }
+                            >
+                              <div
+                                className="euiCollapsibleNavGroup__children"
+                              >
+                                <EuiListGroup
+                                  color="text"
+                                  gutterSize="none"
+                                  listItems={
+                                    Array [
+                                      Object {
+                                        "data-test-subj": "collapsibleNavCustomNavLink",
+                                        "href": undefined,
+                                        "icon": undefined,
+                                        "iconType": undefined,
+                                        "isActive": false,
+                                        "isDisabled": undefined,
+                                        "label": "Manage cloud deployment",
+                                        "onClick": [Function],
+                                      },
+                                    ]
+                                  }
+                                  maxWidth="none"
+                                  size="s"
+                                >
+                                  <ul
+                                    className="euiListGroup"
+                                    style={
+                                      Object {
+                                        "maxWidth": "none",
+                                      }
+                                    }
+                                  >
+                                    <EuiListGroupItem
+                                      color="text"
+                                      data-test-subj="collapsibleNavCustomNavLink"
+                                      isActive={false}
+                                      key="title-0"
+                                      label="Manage cloud deployment"
+                                      onClick={[Function]}
+                                      showToolTip={false}
+                                      size="s"
+                                      wrapText={false}
+                                    >
+                                      <li
+                                        className="euiListGroupItem euiListGroupItem--small euiListGroupItem--text euiListGroupItem-isClickable"
+                                      >
+                                        <button
+                                          className="euiListGroupItem__button"
+                                          data-test-subj="collapsibleNavCustomNavLink"
+                                          disabled={false}
+                                          onClick={[Function]}
+                                          type="button"
+                                        >
+                                          <span
+                                            className="euiListGroupItem__label"
+                                            title="Manage cloud deployment"
+                                          >
+                                            Manage cloud deployment
+                                          </span>
+                                        </button>
+                                      </li>
+                                    </EuiListGroupItem>
+                                  </ul>
+                                </EuiListGroup>
+                              </div>
+                            </div>
+                          </EuiCollapsibleNavGroup>
+                        </div>
+                      </EuiFlexItem>
+                      <EuiHorizontalRule
+                        margin="none"
+                      >
+                        <hr
+                          className="euiHorizontalRule euiHorizontalRule--full"
+                        />
+                      </EuiHorizontalRule>
                       <EuiFlexItem
                         grow={false}
                         style={
@@ -10088,6 +10507,22 @@ exports[`Header renders 4`] = `
       "thrownError": null,
     }
   }
+  customNavLink$={
+    BehaviorSubject {
+      "_isScalar": false,
+      "_value": Object {
+        "baseUrl": "",
+        "id": "cloud-deployment-link",
+        "legacy": false,
+        "title": "Manage cloud deployment",
+      },
+      "closed": false,
+      "hasError": false,
+      "isStopped": false,
+      "observers": Array [],
+      "thrownError": null,
+    }
+  }
   forceAppSwitcherNavigation$={
     BehaviorSubject {
       "_isScalar": false,
diff --git a/src/core/public/chrome/ui/header/collapsible_nav.test.tsx b/src/core/public/chrome/ui/header/collapsible_nav.test.tsx
index 5a734d55445a..97dd229cb1ea 100644
--- a/src/core/public/chrome/ui/header/collapsible_nav.test.tsx
+++ b/src/core/public/chrome/ui/header/collapsible_nav.test.tsx
@@ -69,6 +69,7 @@ function mockProps() {
     onIsLockedUpdate: () => {},
     closeNav: () => {},
     navigateToApp: () => Promise.resolve(),
+    customNavLink$: new BehaviorSubject(undefined),
   };
 }
 
@@ -120,12 +121,14 @@ describe('CollapsibleNav', () => {
       mockRecentNavLink({ label: 'recent 1' }),
       mockRecentNavLink({ label: 'recent 2' }),
     ];
+    const customNavLink = mockLink({ title: 'Custom link' });
     const component = mount(
       <CollapsibleNav
         {...mockProps()}
         isOpen={true}
         navLinks$={new BehaviorSubject(navLinks)}
         recentlyAccessed$={new BehaviorSubject(recentNavLinks)}
+        customNavLink$={new BehaviorSubject(customNavLink)}
       />
     );
     expect(component).toMatchSnapshot();
diff --git a/src/core/public/chrome/ui/header/collapsible_nav.tsx b/src/core/public/chrome/ui/header/collapsible_nav.tsx
index 9494e22920de..07541b1adff1 100644
--- a/src/core/public/chrome/ui/header/collapsible_nav.tsx
+++ b/src/core/public/chrome/ui/header/collapsible_nav.tsx
@@ -30,7 +30,7 @@ import {
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { groupBy, sortBy } from 'lodash';
-import React, { useRef } from 'react';
+import React, { Fragment, useRef } from 'react';
 import { useObservable } from 'react-use';
 import * as Rx from 'rxjs';
 import { ChromeNavLink, ChromeRecentlyAccessedHistoryItem } from '../..';
@@ -88,6 +88,7 @@ interface Props {
   onIsLockedUpdate: OnIsLockedUpdate;
   closeNav: () => void;
   navigateToApp: InternalApplicationStart['navigateToApp'];
+  customNavLink$: Rx.Observable<ChromeNavLink | undefined>;
 }
 
 export function CollapsibleNav({
@@ -105,6 +106,7 @@ export function CollapsibleNav({
 }: Props) {
   const navLinks = useObservable(observables.navLinks$, []).filter((link) => !link.hidden);
   const recentlyAccessed = useObservable(observables.recentlyAccessed$, []);
+  const customNavLink = useObservable(observables.customNavLink$, undefined);
   const appId = useObservable(observables.appId$, '');
   const lockRef = useRef<HTMLButtonElement>(null);
   const groupedNavLinks = groupBy(navLinks, (link) => link?.category?.id);
@@ -134,6 +136,38 @@ export function CollapsibleNav({
       isDocked={isLocked}
       onClose={closeNav}
     >
+      {customNavLink && (
+        <Fragment>
+          <EuiFlexItem grow={false} style={{ flexShrink: 0 }}>
+            <EuiCollapsibleNavGroup
+              background="light"
+              className="eui-yScroll"
+              style={{ maxHeight: '40vh' }}
+            >
+              <EuiListGroup
+                listItems={[
+                  createEuiListItem({
+                    link: customNavLink,
+                    legacyMode,
+                    basePath,
+                    navigateToApp,
+                    dataTestSubj: 'collapsibleNavCustomNavLink',
+                    onClick: closeNav,
+                    externalLink: true,
+                  }),
+                ]}
+                maxWidth="none"
+                color="text"
+                gutterSize="none"
+                size="s"
+              />
+            </EuiCollapsibleNavGroup>
+          </EuiFlexItem>
+
+          <EuiHorizontalRule margin="none" />
+        </Fragment>
+      )}
+
       {/* Pinned items */}
       <EuiFlexItem grow={false} style={{ flexShrink: 0 }}>
         <EuiCollapsibleNavGroup
diff --git a/src/core/public/chrome/ui/header/header.test.tsx b/src/core/public/chrome/ui/header/header.test.tsx
index 13e1f6f086ae..a9fa15d43182 100644
--- a/src/core/public/chrome/ui/header/header.test.tsx
+++ b/src/core/public/chrome/ui/header/header.test.tsx
@@ -45,6 +45,7 @@ function mockProps() {
     isVisible$: new BehaviorSubject(true),
     kibanaDocLink: '/docs',
     navLinks$: new BehaviorSubject([]),
+    customNavLink$: new BehaviorSubject(undefined),
     recentlyAccessed$: new BehaviorSubject([]),
     forceAppSwitcherNavigation$: new BehaviorSubject(false),
     helpExtension$: new BehaviorSubject(undefined),
@@ -75,6 +76,12 @@ describe('Header', () => {
     const navLinks$ = new BehaviorSubject([
       { id: 'kibana', title: 'kibana', baseUrl: '', legacy: false },
     ]);
+    const customNavLink$ = new BehaviorSubject({
+      id: 'cloud-deployment-link',
+      title: 'Manage cloud deployment',
+      baseUrl: '',
+      legacy: false,
+    });
     const recentlyAccessed$ = new BehaviorSubject([
       { link: '', label: 'dashboard', id: 'dashboard' },
     ]);
@@ -87,6 +94,7 @@ describe('Header', () => {
         recentlyAccessed$={recentlyAccessed$}
         isLocked$={isLocked$}
         navType$={navType$}
+        customNavLink$={customNavLink$}
       />
     );
     expect(component).toMatchSnapshot();
diff --git a/src/core/public/chrome/ui/header/header.tsx b/src/core/public/chrome/ui/header/header.tsx
index d24b342e0386..3da3caaaa4a4 100644
--- a/src/core/public/chrome/ui/header/header.tsx
+++ b/src/core/public/chrome/ui/header/header.tsx
@@ -58,6 +58,7 @@ export interface HeaderProps {
   appTitle$: Observable<string>;
   badge$: Observable<ChromeBadge | undefined>;
   breadcrumbs$: Observable<ChromeBreadcrumb[]>;
+  customNavLink$: Observable<ChromeNavLink | undefined>;
   homeHref: string;
   isVisible$: Observable<boolean>;
   kibanaDocLink: string;
@@ -203,6 +204,7 @@ export function Header({
                 toggleCollapsibleNavRef.current.focus();
               }
             }}
+            customNavLink$={observables.customNavLink$}
           />
         ) : (
           // TODO #64541
diff --git a/src/core/public/chrome/ui/header/nav_link.tsx b/src/core/public/chrome/ui/header/nav_link.tsx
index 969b6728e026..6b5cecd13837 100644
--- a/src/core/public/chrome/ui/header/nav_link.tsx
+++ b/src/core/public/chrome/ui/header/nav_link.tsx
@@ -35,11 +35,12 @@ function LinkIcon({ url }: { url: string }) {
 interface Props {
   link: ChromeNavLink;
   legacyMode: boolean;
-  appId: string | undefined;
+  appId?: string;
   basePath?: HttpStart['basePath'];
   dataTestSubj: string;
   onClick?: Function;
   navigateToApp: CoreStart['application']['navigateToApp'];
+  externalLink?: boolean;
 }
 
 // TODO #64541
@@ -54,6 +55,7 @@ export function createEuiListItem({
   onClick = () => {},
   navigateToApp,
   dataTestSubj,
+  externalLink = false,
 }: Props) {
   const { legacy, active, id, title, disabled, euiIconType, icon, tooltip } = link;
   let { href } = link;
@@ -69,6 +71,7 @@ export function createEuiListItem({
     onClick(event: React.MouseEvent<HTMLButtonElement, MouseEvent>) {
       onClick();
       if (
+        !externalLink && // ignore external links
         !legacyMode && // ignore when in legacy mode
         !legacy && // ignore links to legacy apps
         !event.defaultPrevented && // onClick prevented default
diff --git a/src/core/public/public.api.md b/src/core/public/public.api.md
index 9a79576b14d1..bc11ab57b3ea 100644
--- a/src/core/public/public.api.md
+++ b/src/core/public/public.api.md
@@ -466,6 +466,7 @@ export interface ChromeStart {
     getBadge$(): Observable<ChromeBadge | undefined>;
     getBrand$(): Observable<ChromeBrand>;
     getBreadcrumbs$(): Observable<ChromeBreadcrumb[]>;
+    getCustomNavLink$(): Observable<Partial<ChromeNavLink> | undefined>;
     getHelpExtension$(): Observable<ChromeHelpExtension | undefined>;
     getIsNavDrawerLocked$(): Observable<boolean>;
     getIsVisible$(): Observable<boolean>;
@@ -478,6 +479,7 @@ export interface ChromeStart {
     setBadge(badge?: ChromeBadge): void;
     setBrand(brand: ChromeBrand): void;
     setBreadcrumbs(newBreadcrumbs: ChromeBreadcrumb[]): void;
+    setCustomNavLink(newCustomNavLink?: Partial<ChromeNavLink>): void;
     setHelpExtension(helpExtension?: ChromeHelpExtension): void;
     setHelpSupportUrl(url: string): void;
     setIsVisible(isVisible: boolean): void;
diff --git a/x-pack/.i18nrc.json b/x-pack/.i18nrc.json
index 36cfdf904d6d..596ba17d343c 100644
--- a/x-pack/.i18nrc.json
+++ b/x-pack/.i18nrc.json
@@ -8,6 +8,7 @@
     "xpack.apm": ["legacy/plugins/apm", "plugins/apm"],
     "xpack.beatsManagement": ["legacy/plugins/beats_management", "plugins/beats_management"],
     "xpack.canvas": "plugins/canvas",
+    "xpack.cloud": "plugins/cloud",
     "xpack.dashboard": "plugins/dashboard_enhanced",
     "xpack.discover": "plugins/discover_enhanced",
     "xpack.crossClusterReplication": "plugins/cross_cluster_replication",
diff --git a/x-pack/plugins/cloud/public/plugin.ts b/x-pack/plugins/cloud/public/plugin.ts
index 62e21392f711..1c3a770da79f 100644
--- a/x-pack/plugins/cloud/public/plugin.ts
+++ b/x-pack/plugins/cloud/public/plugin.ts
@@ -5,6 +5,7 @@
  */
 
 import { CoreSetup, CoreStart, Plugin, PluginInitializerContext } from 'src/core/public';
+import { i18n } from '@kbn/i18n';
 import { getIsCloudEnabled } from '../common/is_cloud_enabled';
 import { ELASTIC_SUPPORT_LINK } from '../common/constants';
 import { HomePublicPluginSetup } from '../../../../src/plugins/home/public';
@@ -12,6 +13,7 @@ import { HomePublicPluginSetup } from '../../../../src/plugins/home/public';
 interface CloudConfigType {
   id?: string;
   resetPasswordUrl?: string;
+  deploymentUrl?: string;
 }
 
 interface CloudSetupDependencies {
@@ -24,10 +26,14 @@ export interface CloudSetup {
 }
 
 export class CloudPlugin implements Plugin<CloudSetup> {
-  constructor(private readonly initializerContext: PluginInitializerContext) {}
+  private config!: CloudConfigType;
+
+  constructor(private readonly initializerContext: PluginInitializerContext) {
+    this.config = this.initializerContext.config.get<CloudConfigType>();
+  }
 
   public async setup(core: CoreSetup, { home }: CloudSetupDependencies) {
-    const { id, resetPasswordUrl } = this.initializerContext.config.get<CloudConfigType>();
+    const { id, resetPasswordUrl } = this.config;
     const isCloudEnabled = getIsCloudEnabled(id);
 
     if (home) {
@@ -44,6 +50,16 @@ export class CloudPlugin implements Plugin<CloudSetup> {
   }
 
   public start(coreStart: CoreStart) {
+    const { deploymentUrl } = this.config;
     coreStart.chrome.setHelpSupportUrl(ELASTIC_SUPPORT_LINK);
+    if (deploymentUrl) {
+      coreStart.chrome.setCustomNavLink({
+        title: i18n.translate('xpack.cloud.deploymentLinkLabel', {
+          defaultMessage: 'Manage this deployment',
+        }),
+        euiIconType: 'arrowLeft',
+        href: deploymentUrl,
+      });
+    }
   }
 }
diff --git a/x-pack/plugins/cloud/server/config.ts b/x-pack/plugins/cloud/server/config.ts
index d899b45aebdf..ff8a2c5acdf9 100644
--- a/x-pack/plugins/cloud/server/config.ts
+++ b/x-pack/plugins/cloud/server/config.ts
@@ -22,6 +22,7 @@ const configSchema = schema.object({
   id: schema.maybe(schema.string()),
   apm: schema.maybe(apmConfigSchema),
   resetPasswordUrl: schema.maybe(schema.string()),
+  deploymentUrl: schema.maybe(schema.string()),
 });
 
 export type CloudConfigType = TypeOf<typeof configSchema>;
@@ -30,6 +31,7 @@ export const config: PluginConfigDescriptor<CloudConfigType> = {
   exposeToBrowser: {
     id: true,
     resetPasswordUrl: true,
+    deploymentUrl: true,
   },
   schema: configSchema,
 };

From bcc62095f0bb90e063cd46eaefac59f429c08f82 Mon Sep 17 00:00:00 2001
From: Tyler Smalley <tyler.smalley@elastic.co>
Date: Wed, 24 Jun 2020 16:21:46 -0700
Subject: [PATCH 6/8] [SECURITY] Disables Cypress tests

Signed-off-by: Tyler Smalley <tyler.smalley@elastic.co>
---
 test/scripts/jenkins_security_solution_cypress.sh | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/test/scripts/jenkins_security_solution_cypress.sh b/test/scripts/jenkins_security_solution_cypress.sh
index 23b83cf946d4..8aa3425be0be 100644
--- a/test/scripts/jenkins_security_solution_cypress.sh
+++ b/test/scripts/jenkins_security_solution_cypress.sh
@@ -11,11 +11,16 @@ export KIBANA_INSTALL_DIR="$destDir"
 echo " -> Running security solution cypress tests"
 cd "$XPACK_DIR"
 
-checks-reporter-with-killswitch "Security solution Cypress Tests" \
-  node scripts/functional_tests \
-    --debug --bail \
-    --kibana-install-dir "$KIBANA_INSTALL_DIR" \
-    --config test/security_solution_cypress/config.ts
+# Failures across multiple suites, skipping all
+# https://github.com/elastic/kibana/issues/69847
+# https://github.com/elastic/kibana/issues/69848
+# https://github.com/elastic/kibana/issues/69849
+
+# checks-reporter-with-killswitch "Security solution Cypress Tests" \
+#   node scripts/functional_tests \
+#     --debug --bail \
+#     --kibana-install-dir "$KIBANA_INSTALL_DIR" \
+#     --config test/security_solution_cypress/config.ts
 
 echo ""
 echo ""

From b48c8bf355252016ea290f3bbcdfd09c33b940b7 Mon Sep 17 00:00:00 2001
From: CJ Cenizal <cj@cenizal.com>
Date: Wed, 24 Jun 2020 19:30:12 -0700
Subject: [PATCH 7/8] Add delete data stream action and detail panel (#68919)

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
---
 .../helpers/http_requests.ts                  |  18 ++
 .../helpers/setup_environment.tsx             |  18 +-
 .../home/data_streams_tab.helpers.ts          | 116 ++++++++--
 .../home/data_streams_tab.test.ts             | 200 +++++++++++++-----
 .../home/indices_tab.helpers.ts               |  15 ++
 .../home/indices_tab.test.ts                  |  21 +-
 .../common/lib/data_stream_serialization.ts   |  12 +-
 .../index_management/common/lib/index.ts      |   2 +-
 x-pack/plugins/index_management/kibana.json   |   3 +-
 .../public/application/app_context.tsx        |   6 +-
 .../application/mount_management_section.ts   |   5 +-
 .../data_stream_detail_panel.tsx              | 136 ++++++++----
 .../data_stream_list/data_stream_list.tsx     | 107 +++++++---
 .../data_stream_table/data_stream_table.tsx   |  86 ++++++--
 .../delete_data_stream_confirmation_modal.tsx | 149 +++++++++++++
 .../index.ts                                  |   7 +
 .../public/application/services/api.ts        |  13 +-
 .../plugins/index_management/public/plugin.ts |   7 +-
 .../server/client/elasticsearch.ts            |  14 ++
 .../server/routes/api/data_streams/index.ts   |   5 +-
 .../api/data_streams/register_delete_route.ts |  52 +++++
 .../api/data_streams/register_get_route.ts    |  41 +++-
 x-pack/plugins/ingest_manager/public/index.ts |   2 +-
 .../plugins/ingest_manager/public/plugin.ts   |   8 +-
 24 files changed, 860 insertions(+), 183 deletions(-)
 create mode 100644 x-pack/plugins/index_management/public/application/sections/home/data_stream_list/delete_data_stream_confirmation_modal/delete_data_stream_confirmation_modal.tsx
 create mode 100644 x-pack/plugins/index_management/public/application/sections/home/data_stream_list/delete_data_stream_confirmation_modal/index.ts
 create mode 100644 x-pack/plugins/index_management/server/routes/api/data_streams/register_delete_route.ts

diff --git a/x-pack/plugins/index_management/__jest__/client_integration/helpers/http_requests.ts b/x-pack/plugins/index_management/__jest__/client_integration/helpers/http_requests.ts
index 56d76da522ac..907c749f8ec0 100644
--- a/x-pack/plugins/index_management/__jest__/client_integration/helpers/http_requests.ts
+++ b/x-pack/plugins/index_management/__jest__/client_integration/helpers/http_requests.ts
@@ -35,6 +35,22 @@ const registerHttpRequestMockHelpers = (server: SinonFakeServer) => {
     ]);
   };
 
+  const setLoadDataStreamResponse = (response: HttpResponse = []) => {
+    server.respondWith('GET', `${API_BASE_PATH}/data_streams/:id`, [
+      200,
+      { 'Content-Type': 'application/json' },
+      JSON.stringify(response),
+    ]);
+  };
+
+  const setDeleteDataStreamResponse = (response: HttpResponse = []) => {
+    server.respondWith('POST', `${API_BASE_PATH}/delete_data_streams`, [
+      200,
+      { 'Content-Type': 'application/json' },
+      JSON.stringify(response),
+    ]);
+  };
+
   const setDeleteTemplateResponse = (response: HttpResponse = []) => {
     server.respondWith('POST', `${API_BASE_PATH}/delete_index_templates`, [
       200,
@@ -80,6 +96,8 @@ const registerHttpRequestMockHelpers = (server: SinonFakeServer) => {
     setLoadTemplatesResponse,
     setLoadIndicesResponse,
     setLoadDataStreamsResponse,
+    setLoadDataStreamResponse,
+    setDeleteDataStreamResponse,
     setDeleteTemplateResponse,
     setLoadTemplateResponse,
     setCreateTemplateResponse,
diff --git a/x-pack/plugins/index_management/__jest__/client_integration/helpers/setup_environment.tsx b/x-pack/plugins/index_management/__jest__/client_integration/helpers/setup_environment.tsx
index 0a49191fdb14..d85db94d4a97 100644
--- a/x-pack/plugins/index_management/__jest__/client_integration/helpers/setup_environment.tsx
+++ b/x-pack/plugins/index_management/__jest__/client_integration/helpers/setup_environment.tsx
@@ -8,6 +8,7 @@
 import React from 'react';
 import axios from 'axios';
 import axiosXhrAdapter from 'axios/lib/adapters/xhr';
+import { merge } from 'lodash';
 
 import {
   notificationServiceMock,
@@ -33,7 +34,7 @@ export const services = {
 services.uiMetricService.setup({ reportUiStats() {} } as any);
 setExtensionsService(services.extensionsService);
 setUiMetricService(services.uiMetricService);
-const appDependencies = { services, core: {}, plugins: {} } as any;
+const appDependencies = { services, core: { getUrlForApp: () => {} }, plugins: {} } as any;
 
 export const setupEnvironment = () => {
   // Mock initialization of services
@@ -51,8 +52,13 @@ export const setupEnvironment = () => {
   };
 };
 
-export const WithAppDependencies = (Comp: any) => (props: any) => (
-  <AppContextProvider value={appDependencies}>
-    <Comp {...props} />
-  </AppContextProvider>
-);
+export const WithAppDependencies = (Comp: any, overridingDependencies: any = {}) => (
+  props: any
+) => {
+  const mergedDependencies = merge({}, appDependencies, overridingDependencies);
+  return (
+    <AppContextProvider value={mergedDependencies}>
+      <Comp {...props} />
+    </AppContextProvider>
+  );
+};
diff --git a/x-pack/plugins/index_management/__jest__/client_integration/home/data_streams_tab.helpers.ts b/x-pack/plugins/index_management/__jest__/client_integration/home/data_streams_tab.helpers.ts
index 572889954db6..ecea230ecab8 100644
--- a/x-pack/plugins/index_management/__jest__/client_integration/home/data_streams_tab.helpers.ts
+++ b/x-pack/plugins/index_management/__jest__/client_integration/home/data_streams_tab.helpers.ts
@@ -5,6 +5,7 @@
  */
 
 import { act } from 'react-dom/test-utils';
+import { ReactWrapper } from 'enzyme';
 
 import {
   registerTestBed,
@@ -17,27 +18,38 @@ import { IndexManagementHome } from '../../../public/application/sections/home';
 import { indexManagementStore } from '../../../public/application/store'; // eslint-disable-line @kbn/eslint/no-restricted-paths
 import { WithAppDependencies, services, TestSubjects } from '../helpers';
 
-const testBedConfig: TestBedConfig = {
-  store: () => indexManagementStore(services as any),
-  memoryRouter: {
-    initialEntries: [`/indices`],
-    componentRoutePath: `/:section(indices|data_streams|templates)`,
-  },
-  doMountAsync: true,
-};
-
-const initTestBed = registerTestBed(WithAppDependencies(IndexManagementHome), testBedConfig);
-
 export interface DataStreamsTabTestBed extends TestBed<TestSubjects> {
   actions: {
     goToDataStreamsList: () => void;
     clickEmptyPromptIndexTemplateLink: () => void;
     clickReloadButton: () => void;
+    clickNameAt: (index: number) => void;
     clickIndicesAt: (index: number) => void;
+    clickDeletActionAt: (index: number) => void;
+    clickConfirmDelete: () => void;
+    clickDeletDataStreamButton: () => void;
   };
+  findDeleteActionAt: (index: number) => ReactWrapper;
+  findDeleteConfirmationModal: () => ReactWrapper;
+  findDetailPanel: () => ReactWrapper;
+  findDetailPanelTitle: () => string;
+  findEmptyPromptIndexTemplateLink: () => ReactWrapper;
 }
 
-export const setup = async (): Promise<DataStreamsTabTestBed> => {
+export const setup = async (overridingDependencies: any = {}): Promise<DataStreamsTabTestBed> => {
+  const testBedConfig: TestBedConfig = {
+    store: () => indexManagementStore(services as any),
+    memoryRouter: {
+      initialEntries: [`/indices`],
+      componentRoutePath: `/:section(indices|data_streams|templates)`,
+    },
+    doMountAsync: true,
+  };
+
+  const initTestBed = registerTestBed(
+    WithAppDependencies(IndexManagementHome, overridingDependencies),
+    testBedConfig
+  );
   const testBed = await initTestBed();
 
   /**
@@ -48,15 +60,17 @@ export const setup = async (): Promise<DataStreamsTabTestBed> => {
     testBed.find('data_streamsTab').simulate('click');
   };
 
-  const clickEmptyPromptIndexTemplateLink = async () => {
-    const { find, component, router } = testBed;
-
+  const findEmptyPromptIndexTemplateLink = () => {
+    const { find } = testBed;
     const templateLink = find('dataStreamsEmptyPromptTemplateLink');
+    return templateLink;
+  };
 
+  const clickEmptyPromptIndexTemplateLink = async () => {
+    const { component, router } = testBed;
     await act(async () => {
-      router.navigateTo(templateLink.props().href!);
+      router.navigateTo(findEmptyPromptIndexTemplateLink().props().href!);
     });
-
     component.update();
   };
 
@@ -65,10 +79,15 @@ export const setup = async (): Promise<DataStreamsTabTestBed> => {
     find('reloadButton').simulate('click');
   };
 
-  const clickIndicesAt = async (index: number) => {
-    const { component, table, router } = testBed;
+  const findTestSubjectAt = (testSubject: string, index: number) => {
+    const { table } = testBed;
     const { rows } = table.getMetaData('dataStreamTable');
-    const indicesLink = findTestSubject(rows[index].reactWrapper, 'indicesLink');
+    return findTestSubject(rows[index].reactWrapper, testSubject);
+  };
+
+  const clickIndicesAt = async (index: number) => {
+    const { component, router } = testBed;
+    const indicesLink = findTestSubjectAt('indicesLink', index);
 
     await act(async () => {
       router.navigateTo(indicesLink.props().href!);
@@ -77,14 +96,71 @@ export const setup = async (): Promise<DataStreamsTabTestBed> => {
     component.update();
   };
 
+  const clickNameAt = async (index: number) => {
+    const { component, router } = testBed;
+    const nameLink = findTestSubjectAt('nameLink', index);
+
+    await act(async () => {
+      router.navigateTo(nameLink.props().href!);
+    });
+
+    component.update();
+  };
+
+  const findDeleteActionAt = findTestSubjectAt.bind(null, 'deleteDataStream');
+
+  const clickDeletActionAt = (index: number) => {
+    findDeleteActionAt(index).simulate('click');
+  };
+
+  const findDeleteConfirmationModal = () => {
+    const { find } = testBed;
+    return find('deleteDataStreamsConfirmation');
+  };
+
+  const clickConfirmDelete = async () => {
+    const modal = document.body.querySelector('[data-test-subj="deleteDataStreamsConfirmation"]');
+    const confirmButton: HTMLButtonElement | null = modal!.querySelector(
+      '[data-test-subj="confirmModalConfirmButton"]'
+    );
+
+    await act(async () => {
+      confirmButton!.click();
+    });
+  };
+
+  const clickDeletDataStreamButton = () => {
+    const { find } = testBed;
+    find('deleteDataStreamButton').simulate('click');
+  };
+
+  const findDetailPanel = () => {
+    const { find } = testBed;
+    return find('dataStreamDetailPanel');
+  };
+
+  const findDetailPanelTitle = () => {
+    const { find } = testBed;
+    return find('dataStreamDetailPanelTitle').text();
+  };
+
   return {
     ...testBed,
     actions: {
       goToDataStreamsList,
       clickEmptyPromptIndexTemplateLink,
       clickReloadButton,
+      clickNameAt,
       clickIndicesAt,
+      clickDeletActionAt,
+      clickConfirmDelete,
+      clickDeletDataStreamButton,
     },
+    findDeleteActionAt,
+    findDeleteConfirmationModal,
+    findDetailPanel,
+    findDetailPanelTitle,
+    findEmptyPromptIndexTemplateLink,
   };
 };
 
diff --git a/x-pack/plugins/index_management/__jest__/client_integration/home/data_streams_tab.test.ts b/x-pack/plugins/index_management/__jest__/client_integration/home/data_streams_tab.test.ts
index efe2e2d0c74a..dfcbb5186946 100644
--- a/x-pack/plugins/index_management/__jest__/client_integration/home/data_streams_tab.test.ts
+++ b/x-pack/plugins/index_management/__jest__/client_integration/home/data_streams_tab.test.ts
@@ -19,61 +19,38 @@ describe('Data Streams tab', () => {
     server.restore();
   });
 
-  beforeEach(async () => {
-    httpRequestsMockHelpers.setLoadIndicesResponse([
-      {
-        health: '',
-        status: '',
-        primary: '',
-        replica: '',
-        documents: '',
-        documents_deleted: '',
-        size: '',
-        primary_size: '',
-        name: 'data-stream-index',
-        data_stream: 'dataStream1',
-      },
-      {
-        health: 'green',
-        status: 'open',
-        primary: 1,
-        replica: 1,
-        documents: 10000,
-        documents_deleted: 100,
-        size: '156kb',
-        primary_size: '156kb',
-        name: 'non-data-stream-index',
-      },
-    ]);
-
-    await act(async () => {
-      testBed = await setup();
-    });
-  });
-
   describe('when there are no data streams', () => {
     beforeEach(async () => {
-      const { actions, component } = testBed;
-
+      httpRequestsMockHelpers.setLoadIndicesResponse([]);
       httpRequestsMockHelpers.setLoadDataStreamsResponse([]);
       httpRequestsMockHelpers.setLoadTemplatesResponse({ templates: [], legacyTemplates: [] });
+    });
+
+    test('displays an empty prompt', async () => {
+      testBed = await setup();
 
       await act(async () => {
-        actions.goToDataStreamsList();
+        testBed.actions.goToDataStreamsList();
       });
 
+      const { exists, component } = testBed;
       component.update();
-    });
-
-    test('displays an empty prompt', async () => {
-      const { exists } = testBed;
 
       expect(exists('sectionLoading')).toBe(false);
       expect(exists('emptyPrompt')).toBe(true);
     });
 
-    test('goes to index templates tab when "Get started" link is clicked', async () => {
-      const { actions, exists } = testBed;
+    test('when Ingest Manager is disabled, goes to index templates tab when "Get started" link is clicked', async () => {
+      testBed = await setup({
+        plugins: {},
+      });
+
+      await act(async () => {
+        testBed.actions.goToDataStreamsList();
+      });
+
+      const { actions, exists, component } = testBed;
+      component.update();
 
       await act(async () => {
         actions.clickEmptyPromptIndexTemplateLink();
@@ -81,32 +58,77 @@ describe('Data Streams tab', () => {
 
       expect(exists('templateList')).toBe(true);
     });
+
+    test('when Ingest Manager is enabled, links to Ingest Manager', async () => {
+      testBed = await setup({
+        plugins: { ingestManager: { hi: 'ok' } },
+      });
+
+      await act(async () => {
+        testBed.actions.goToDataStreamsList();
+      });
+
+      const { findEmptyPromptIndexTemplateLink, component } = testBed;
+      component.update();
+
+      // Assert against the text because the href won't be available, due to dependency upon our core mock.
+      expect(findEmptyPromptIndexTemplateLink().text()).toBe('Ingest Manager');
+    });
   });
 
   describe('when there are data streams', () => {
     beforeEach(async () => {
-      const { actions, component } = testBed;
+      httpRequestsMockHelpers.setLoadIndicesResponse([
+        {
+          health: '',
+          status: '',
+          primary: '',
+          replica: '',
+          documents: '',
+          documents_deleted: '',
+          size: '',
+          primary_size: '',
+          name: 'data-stream-index',
+          data_stream: 'dataStream1',
+        },
+        {
+          health: 'green',
+          status: 'open',
+          primary: 1,
+          replica: 1,
+          documents: 10000,
+          documents_deleted: 100,
+          size: '156kb',
+          primary_size: '156kb',
+          name: 'non-data-stream-index',
+        },
+      ]);
+
+      const dataStreamForDetailPanel = createDataStreamPayload('dataStream1');
 
       httpRequestsMockHelpers.setLoadDataStreamsResponse([
-        createDataStreamPayload('dataStream1'),
+        dataStreamForDetailPanel,
         createDataStreamPayload('dataStream2'),
       ]);
 
+      httpRequestsMockHelpers.setLoadDataStreamResponse(dataStreamForDetailPanel);
+
+      testBed = await setup();
+
       await act(async () => {
-        actions.goToDataStreamsList();
+        testBed.actions.goToDataStreamsList();
       });
 
-      component.update();
+      testBed.component.update();
     });
 
     test('lists them in the table', async () => {
       const { table } = testBed;
-
       const { tableCellsValues } = table.getMetaData('dataStreamTable');
 
       expect(tableCellsValues).toEqual([
-        ['dataStream1', '1', '@timestamp', '1'],
-        ['dataStream2', '1', '@timestamp', '1'],
+        ['', 'dataStream1', '1', ''],
+        ['', 'dataStream2', '1', ''],
       ]);
     });
 
@@ -126,12 +148,90 @@ describe('Data Streams tab', () => {
 
     test('clicking the indices count navigates to the backing indices', async () => {
       const { table, actions } = testBed;
-
       await actions.clickIndicesAt(0);
-
       expect(table.getMetaData('indexTable').tableCellsValues).toEqual([
         ['', '', '', '', '', '', '', 'dataStream1'],
       ]);
     });
+
+    describe('row actions', () => {
+      test('can delete', () => {
+        const { findDeleteActionAt } = testBed;
+        const deleteAction = findDeleteActionAt(0);
+        expect(deleteAction.length).toBe(1);
+      });
+    });
+
+    describe('deleting a data stream', () => {
+      test('shows a confirmation modal', async () => {
+        const {
+          actions: { clickDeletActionAt },
+          findDeleteConfirmationModal,
+        } = testBed;
+        clickDeletActionAt(0);
+        const confirmationModal = findDeleteConfirmationModal();
+        expect(confirmationModal).toBeDefined();
+      });
+
+      test('sends a request to the Delete API', async () => {
+        const {
+          actions: { clickDeletActionAt, clickConfirmDelete },
+        } = testBed;
+        clickDeletActionAt(0);
+
+        httpRequestsMockHelpers.setDeleteDataStreamResponse({
+          results: {
+            dataStreamsDeleted: ['dataStream1'],
+            errors: [],
+          },
+        });
+
+        await clickConfirmDelete();
+
+        const { method, url, requestBody } = server.requests[server.requests.length - 1];
+
+        expect(method).toBe('POST');
+        expect(url).toBe(`${API_BASE_PATH}/delete_data_streams`);
+        expect(JSON.parse(JSON.parse(requestBody).body)).toEqual({
+          dataStreams: ['dataStream1'],
+        });
+      });
+    });
+
+    describe('detail panel', () => {
+      test('opens when the data stream name in the table is clicked', async () => {
+        const { actions, findDetailPanel, findDetailPanelTitle } = testBed;
+        await actions.clickNameAt(0);
+        expect(findDetailPanel().length).toBe(1);
+        expect(findDetailPanelTitle()).toBe('dataStream1');
+      });
+
+      test('deletes the data stream when delete button is clicked', async () => {
+        const {
+          actions: { clickNameAt, clickDeletDataStreamButton, clickConfirmDelete },
+        } = testBed;
+
+        await clickNameAt(0);
+
+        clickDeletDataStreamButton();
+
+        httpRequestsMockHelpers.setDeleteDataStreamResponse({
+          results: {
+            dataStreamsDeleted: ['dataStream1'],
+            errors: [],
+          },
+        });
+
+        await clickConfirmDelete();
+
+        const { method, url, requestBody } = server.requests[server.requests.length - 1];
+
+        expect(method).toBe('POST');
+        expect(url).toBe(`${API_BASE_PATH}/delete_data_streams`);
+        expect(JSON.parse(JSON.parse(requestBody).body)).toEqual({
+          dataStreams: ['dataStream1'],
+        });
+      });
+    });
   });
 });
diff --git a/x-pack/plugins/index_management/__jest__/client_integration/home/indices_tab.helpers.ts b/x-pack/plugins/index_management/__jest__/client_integration/home/indices_tab.helpers.ts
index f00348aacbf0..11ea29fd9b78 100644
--- a/x-pack/plugins/index_management/__jest__/client_integration/home/indices_tab.helpers.ts
+++ b/x-pack/plugins/index_management/__jest__/client_integration/home/indices_tab.helpers.ts
@@ -5,6 +5,7 @@
  */
 
 import { act } from 'react-dom/test-utils';
+import { ReactWrapper } from 'enzyme';
 
 import {
   registerTestBed,
@@ -34,6 +35,8 @@ export interface IndicesTestBed extends TestBed<TestSubjects> {
     clickIncludeHiddenIndicesToggle: () => void;
     clickDataStreamAt: (index: number) => void;
   };
+  findDataStreamDetailPanel: () => ReactWrapper;
+  findDataStreamDetailPanelTitle: () => string;
 }
 
 export const setup = async (): Promise<IndicesTestBed> => {
@@ -77,6 +80,16 @@ export const setup = async (): Promise<IndicesTestBed> => {
     component.update();
   };
 
+  const findDataStreamDetailPanel = () => {
+    const { find } = testBed;
+    return find('dataStreamDetailPanel');
+  };
+
+  const findDataStreamDetailPanelTitle = () => {
+    const { find } = testBed;
+    return find('dataStreamDetailPanelTitle').text();
+  };
+
   return {
     ...testBed,
     actions: {
@@ -85,5 +98,7 @@ export const setup = async (): Promise<IndicesTestBed> => {
       clickIncludeHiddenIndicesToggle,
       clickDataStreamAt,
     },
+    findDataStreamDetailPanel,
+    findDataStreamDetailPanelTitle,
   };
 };
diff --git a/x-pack/plugins/index_management/__jest__/client_integration/home/indices_tab.test.ts b/x-pack/plugins/index_management/__jest__/client_integration/home/indices_tab.test.ts
index c2d955bb4dfc..3d6d94d16585 100644
--- a/x-pack/plugins/index_management/__jest__/client_integration/home/indices_tab.test.ts
+++ b/x-pack/plugins/index_management/__jest__/client_integration/home/indices_tab.test.ts
@@ -70,10 +70,10 @@ describe('<IndexManagementHome />', () => {
         },
       ]);
 
-      httpRequestsMockHelpers.setLoadDataStreamsResponse([
-        createDataStreamPayload('dataStream1'),
-        createDataStreamPayload('dataStream2'),
-      ]);
+      // The detail panel should still appear even if there are no data streams.
+      httpRequestsMockHelpers.setLoadDataStreamsResponse([]);
+
+      httpRequestsMockHelpers.setLoadDataStreamResponse(createDataStreamPayload('dataStream1'));
 
       testBed = await setup();
 
@@ -86,13 +86,16 @@ describe('<IndexManagementHome />', () => {
     });
 
     test('navigates to the data stream in the Data Streams tab', async () => {
-      const { table, actions } = testBed;
+      const {
+        findDataStreamDetailPanel,
+        findDataStreamDetailPanelTitle,
+        actions: { clickDataStreamAt },
+      } = testBed;
 
-      await actions.clickDataStreamAt(0);
+      await clickDataStreamAt(0);
 
-      expect(table.getMetaData('dataStreamTable').tableCellsValues).toEqual([
-        ['dataStream1', '1', '@timestamp', '1'],
-      ]);
+      expect(findDataStreamDetailPanel().length).toBe(1);
+      expect(findDataStreamDetailPanelTitle()).toBe('dataStream1');
     });
   });
 
diff --git a/x-pack/plugins/index_management/common/lib/data_stream_serialization.ts b/x-pack/plugins/index_management/common/lib/data_stream_serialization.ts
index 9d267210a6b3..51528ed9856c 100644
--- a/x-pack/plugins/index_management/common/lib/data_stream_serialization.ts
+++ b/x-pack/plugins/index_management/common/lib/data_stream_serialization.ts
@@ -6,8 +6,10 @@
 
 import { DataStream, DataStreamFromEs } from '../types';
 
-export function deserializeDataStreamList(dataStreamsFromEs: DataStreamFromEs[]): DataStream[] {
-  return dataStreamsFromEs.map(({ name, timestamp_field, indices, generation }) => ({
+export function deserializeDataStream(dataStreamFromEs: DataStreamFromEs): DataStream {
+  const { name, timestamp_field, indices, generation } = dataStreamFromEs;
+
+  return {
     name,
     timeStampField: timestamp_field,
     indices: indices.map(
@@ -17,5 +19,9 @@ export function deserializeDataStreamList(dataStreamsFromEs: DataStreamFromEs[])
       })
     ),
     generation,
-  }));
+  };
+}
+
+export function deserializeDataStreamList(dataStreamsFromEs: DataStreamFromEs[]): DataStream[] {
+  return dataStreamsFromEs.map((dataStream) => deserializeDataStream(dataStream));
 }
diff --git a/x-pack/plugins/index_management/common/lib/index.ts b/x-pack/plugins/index_management/common/lib/index.ts
index fce4d8ccc250..4e76a40ced52 100644
--- a/x-pack/plugins/index_management/common/lib/index.ts
+++ b/x-pack/plugins/index_management/common/lib/index.ts
@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-export { deserializeDataStreamList } from './data_stream_serialization';
+export { deserializeDataStream, deserializeDataStreamList } from './data_stream_serialization';
 
 export {
   deserializeLegacyTemplateList,
diff --git a/x-pack/plugins/index_management/kibana.json b/x-pack/plugins/index_management/kibana.json
index 2e0fa04337b4..40ecb26e8f0c 100644
--- a/x-pack/plugins/index_management/kibana.json
+++ b/x-pack/plugins/index_management/kibana.json
@@ -10,7 +10,8 @@
   ],
   "optionalPlugins": [
     "security",
-    "usageCollection"
+    "usageCollection",
+    "ingestManager"
   ],
   "configPath": ["xpack", "index_management"]
 }
diff --git a/x-pack/plugins/index_management/public/application/app_context.tsx b/x-pack/plugins/index_management/public/application/app_context.tsx
index 84938de41694..c82190712037 100644
--- a/x-pack/plugins/index_management/public/application/app_context.tsx
+++ b/x-pack/plugins/index_management/public/application/app_context.tsx
@@ -6,9 +6,10 @@
 
 import React, { createContext, useContext } from 'react';
 import { ScopedHistory } from 'kibana/public';
-import { CoreStart } from '../../../../../src/core/public';
+import { UsageCollectionSetup } from 'src/plugins/usage_collection/public';
 
-import { UsageCollectionSetup } from '../../../../../src/plugins/usage_collection/public';
+import { CoreStart } from '../../../../../src/core/public';
+import { IngestManagerSetup } from '../../../ingest_manager/public';
 import { IndexMgmtMetricsType } from '../types';
 import { UiMetricService, NotificationService, HttpService } from './services';
 import { ExtensionsService } from '../services';
@@ -22,6 +23,7 @@ export interface AppDependencies {
   };
   plugins: {
     usageCollection: UsageCollectionSetup;
+    ingestManager?: IngestManagerSetup;
   };
   services: {
     uiMetricService: UiMetricService<IndexMgmtMetricsType>;
diff --git a/x-pack/plugins/index_management/public/application/mount_management_section.ts b/x-pack/plugins/index_management/public/application/mount_management_section.ts
index e8b6f200fb34..258f32865720 100644
--- a/x-pack/plugins/index_management/public/application/mount_management_section.ts
+++ b/x-pack/plugins/index_management/public/application/mount_management_section.ts
@@ -8,6 +8,7 @@ import { CoreSetup } from 'src/core/public';
 import { ManagementAppMountParams } from 'src/plugins/management/public/';
 import { UsageCollectionSetup } from 'src/plugins/usage_collection/public';
 
+import { IngestManagerSetup } from '../../../ingest_manager/public';
 import { ExtensionsService } from '../services';
 import { IndexMgmtMetricsType } from '../types';
 import { AppDependencies } from './app_context';
@@ -28,7 +29,8 @@ export async function mountManagementSection(
   coreSetup: CoreSetup,
   usageCollection: UsageCollectionSetup,
   services: InternalServices,
-  params: ManagementAppMountParams
+  params: ManagementAppMountParams,
+  ingestManager?: IngestManagerSetup
 ) {
   const { element, setBreadcrumbs, history } = params;
   const [core] = await coreSetup.getStartServices();
@@ -44,6 +46,7 @@ export async function mountManagementSection(
     },
     plugins: {
       usageCollection,
+      ingestManager,
     },
     services,
     history,
diff --git a/x-pack/plugins/index_management/public/application/sections/home/data_stream_list/data_stream_detail_panel/data_stream_detail_panel.tsx b/x-pack/plugins/index_management/public/application/sections/home/data_stream_list/data_stream_detail_panel/data_stream_detail_panel.tsx
index a6c8b83a05f9..577f04a4a7ef 100644
--- a/x-pack/plugins/index_management/public/application/sections/home/data_stream_list/data_stream_detail_panel/data_stream_detail_panel.tsx
+++ b/x-pack/plugins/index_management/public/application/sections/home/data_stream_list/data_stream_detail_panel/data_stream_detail_panel.tsx
@@ -4,9 +4,10 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { Fragment } from 'react';
+import React, { useState } from 'react';
 import { FormattedMessage } from '@kbn/i18n/react';
 import {
+  EuiButton,
   EuiFlyout,
   EuiFlyoutHeader,
   EuiTitle,
@@ -15,14 +16,18 @@ import {
   EuiFlexGroup,
   EuiFlexItem,
   EuiButtonEmpty,
+  EuiDescriptionList,
+  EuiDescriptionListTitle,
+  EuiDescriptionListDescription,
 } from '@elastic/eui';
 
 import { SectionLoading, SectionError, Error } from '../../../../components';
 import { useLoadDataStream } from '../../../../services/api';
+import { DeleteDataStreamConfirmationModal } from '../delete_data_stream_confirmation_modal';
 
 interface Props {
   dataStreamName: string;
-  onClose: () => void;
+  onClose: (shouldReload?: boolean) => void;
 }
 
 /**
@@ -36,6 +41,8 @@ export const DataStreamDetailPanel: React.FunctionComponent<Props> = ({
 }) => {
   const { error, data: dataStream, isLoading } = useLoadDataStream(dataStreamName);
 
+  const [isDeleting, setIsDeleting] = useState<boolean>(false);
+
   let content;
 
   if (isLoading) {
@@ -61,44 +68,97 @@ export const DataStreamDetailPanel: React.FunctionComponent<Props> = ({
       />
     );
   } else if (dataStream) {
-    content = <Fragment>{JSON.stringify(dataStream)}</Fragment>;
+    const { timeStampField, generation } = dataStream;
+
+    content = (
+      <EuiDescriptionList textStyle="reverse">
+        <EuiDescriptionListTitle>
+          <FormattedMessage
+            id="xpack.idxMgmt.dataStreamDetailPanel.timestampFieldTitle"
+            defaultMessage="Timestamp field"
+          />
+        </EuiDescriptionListTitle>
+
+        <EuiDescriptionListDescription>{timeStampField.name}</EuiDescriptionListDescription>
+
+        <EuiDescriptionListTitle>
+          <FormattedMessage
+            id="xpack.idxMgmt.dataStreamDetailPanel.generationTitle"
+            defaultMessage="Generation"
+          />
+        </EuiDescriptionListTitle>
+
+        <EuiDescriptionListDescription>{generation}</EuiDescriptionListDescription>
+      </EuiDescriptionList>
+    );
   }
 
   return (
-    <EuiFlyout
-      onClose={onClose}
-      data-test-subj="dataStreamDetailPanel"
-      aria-labelledby="dataStreamDetailPanelTitle"
-      size="m"
-      maxWidth={500}
-    >
-      <EuiFlyoutHeader>
-        <EuiTitle size="m">
-          <h2 id="dataStreamDetailPanelTitle" data-test-subj="title">
-            {dataStreamName}
-          </h2>
-        </EuiTitle>
-      </EuiFlyoutHeader>
-
-      <EuiFlyoutBody data-test-subj="content">{content}</EuiFlyoutBody>
-
-      <EuiFlyoutFooter>
-        <EuiFlexGroup justifyContent="spaceBetween" alignItems="center">
-          <EuiFlexItem grow={false}>
-            <EuiButtonEmpty
-              iconType="cross"
-              flush="left"
-              onClick={onClose}
-              data-test-subj="closeDetailsButton"
-            >
-              <FormattedMessage
-                id="xpack.idxMgmt.dataStreamDetailPanel.closeButtonLabel"
-                defaultMessage="Close"
-              />
-            </EuiButtonEmpty>
-          </EuiFlexItem>
-        </EuiFlexGroup>
-      </EuiFlyoutFooter>
-    </EuiFlyout>
+    <>
+      {isDeleting ? (
+        <DeleteDataStreamConfirmationModal
+          onClose={(data) => {
+            if (data && data.hasDeletedDataStreams) {
+              onClose(true);
+            } else {
+              setIsDeleting(false);
+            }
+          }}
+          dataStreams={[dataStreamName]}
+        />
+      ) : null}
+
+      <EuiFlyout
+        onClose={onClose}
+        data-test-subj="dataStreamDetailPanel"
+        aria-labelledby="dataStreamDetailPanelTitle"
+        size="m"
+        maxWidth={500}
+      >
+        <EuiFlyoutHeader>
+          <EuiTitle size="m">
+            <h2 id="dataStreamDetailPanelTitle" data-test-subj="dataStreamDetailPanelTitle">
+              {dataStreamName}
+            </h2>
+          </EuiTitle>
+        </EuiFlyoutHeader>
+
+        <EuiFlyoutBody data-test-subj="content">{content}</EuiFlyoutBody>
+
+        <EuiFlyoutFooter>
+          <EuiFlexGroup justifyContent="spaceBetween" alignItems="center">
+            <EuiFlexItem grow={false}>
+              <EuiButtonEmpty
+                iconType="cross"
+                flush="left"
+                onClick={() => onClose()}
+                data-test-subj="closeDetailsButton"
+              >
+                <FormattedMessage
+                  id="xpack.idxMgmt.dataStreamDetailPanel.closeButtonLabel"
+                  defaultMessage="Close"
+                />
+              </EuiButtonEmpty>
+            </EuiFlexItem>
+
+            {!isLoading && !error ? (
+              <EuiFlexItem grow={false}>
+                <EuiButton
+                  color="danger"
+                  iconType="trash"
+                  onClick={() => setIsDeleting(true)}
+                  data-test-subj="deleteDataStreamButton"
+                >
+                  <FormattedMessage
+                    id="xpack.idxMgmt.dataStreamDetailPanel.deleteButtonLabel"
+                    defaultMessage="Delete data stream"
+                  />
+                </EuiButton>
+              </EuiFlexItem>
+            ) : null}
+          </EuiFlexGroup>
+        </EuiFlyoutFooter>
+      </EuiFlyout>
+    </>
   );
 };
diff --git a/x-pack/plugins/index_management/public/application/sections/home/data_stream_list/data_stream_list.tsx b/x-pack/plugins/index_management/public/application/sections/home/data_stream_list/data_stream_list.tsx
index 951c4a0d7f3c..bad008b665cf 100644
--- a/x-pack/plugins/index_management/public/application/sections/home/data_stream_list/data_stream_list.tsx
+++ b/x-pack/plugins/index_management/public/application/sections/home/data_stream_list/data_stream_list.tsx
@@ -12,9 +12,13 @@ import { EuiTitle, EuiText, EuiSpacer, EuiEmptyPrompt, EuiLink } from '@elastic/
 import { ScopedHistory } from 'kibana/public';
 
 import { reactRouterNavigate } from '../../../../shared_imports';
+import { useAppContext } from '../../../app_context';
 import { SectionError, SectionLoading, Error } from '../../../components';
 import { useLoadDataStreams } from '../../../services/api';
+import { decodePathFromReactRouter } from '../../../services/routing';
+import { Section } from '../../home';
 import { DataStreamTable } from './data_stream_table';
+import { DataStreamDetailPanel } from './data_stream_detail_panel';
 
 interface MatchParams {
   dataStreamName?: string;
@@ -26,6 +30,11 @@ export const DataStreamList: React.FunctionComponent<RouteComponentProps<MatchPa
   },
   history,
 }) => {
+  const {
+    core: { getUrlForApp },
+    plugins: { ingestManager },
+  } = useAppContext();
+
   const { error, isLoading, data: dataStreams, sendRequest: reload } = useLoadDataStreams();
 
   let content;
@@ -67,22 +76,52 @@ export const DataStreamList: React.FunctionComponent<RouteComponentProps<MatchPa
           <p>
             <FormattedMessage
               id="xpack.idxMgmt.dataStreamList.emptyPrompt.noDataStreamsDescription"
-              defaultMessage="Data streams represent the latest data in a rollover series. Get started with data streams by creating a {link}."
-              values={{
-                link: (
-                  <EuiLink
-                    data-test-subj="dataStreamsEmptyPromptTemplateLink"
-                    {...reactRouterNavigate(history, {
-                      pathname: '/templates',
-                    })}
-                  >
-                    {i18n.translate('xpack.idxMgmt.dataStreamList.emptyPrompt.getStartedLink', {
-                      defaultMessage: 'composable index template',
-                    })}
-                  </EuiLink>
-                ),
-              }}
+              defaultMessage="Data streams represent collections of time series indices."
             />
+            {' ' /* We need this space to separate these two sentences. */}
+            {ingestManager ? (
+              <FormattedMessage
+                id="xpack.idxMgmt.dataStreamList.emptyPrompt.noDataStreamsCtaIngestManagerMessage"
+                defaultMessage="Get started with data streams in {link}."
+                values={{
+                  link: (
+                    <EuiLink
+                      data-test-subj="dataStreamsEmptyPromptTemplateLink"
+                      href={getUrlForApp('ingestManager')}
+                    >
+                      {i18n.translate(
+                        'xpack.idxMgmt.dataStreamList.emptyPrompt.noDataStreamsCtaIngestManagerLink',
+                        {
+                          defaultMessage: 'Ingest Manager',
+                        }
+                      )}
+                    </EuiLink>
+                  ),
+                }}
+              />
+            ) : (
+              <FormattedMessage
+                id="xpack.idxMgmt.dataStreamList.emptyPrompt.noDataStreamsCtaIndexTemplateMessage"
+                defaultMessage="Get started with data streams by creating a {link}."
+                values={{
+                  link: (
+                    <EuiLink
+                      data-test-subj="dataStreamsEmptyPromptTemplateLink"
+                      {...reactRouterNavigate(history, {
+                        pathname: '/templates',
+                      })}
+                    >
+                      {i18n.translate(
+                        'xpack.idxMgmt.dataStreamList.emptyPrompt.noDataStreamsCtaIndexTemplateLink',
+                        {
+                          defaultMessage: 'composable index template',
+                        }
+                      )}
+                    </EuiLink>
+                  ),
+                }}
+              />
+            )}
           </p>
         }
         data-test-subj="emptyPrompt"
@@ -104,24 +143,38 @@ export const DataStreamList: React.FunctionComponent<RouteComponentProps<MatchPa
         <EuiSpacer size="l" />
 
         <DataStreamTable
-          filters={dataStreamName !== undefined ? `name=${dataStreamName}` : ''}
+          filters={
+            dataStreamName !== undefined ? `name=${decodePathFromReactRouter(dataStreamName)}` : ''
+          }
           dataStreams={dataStreams}
           reload={reload}
           history={history as ScopedHistory}
         />
-
-        {/* TODO: Implement this once we have something to put in here, e.g. storage size, docs count */}
-        {/* dataStreamName && (
-          <DataStreamDetailPanel
-            dataStreamName={decodePathFromReactRouter(dataStreamName)}
-            onClose={() => {
-              history.push('/data_streams');
-            }}
-          />
-        )*/}
       </>
     );
   }
 
-  return <div data-test-subj="dataStreamList">{content}</div>;
+  return (
+    <div data-test-subj="dataStreamList">
+      {content}
+
+      {/*
+        If the user has been deep-linked, they'll expect to see the detail panel because it reflects
+        the URL state, even if there are no data streams or if there was an error loading them.
+      */}
+      {dataStreamName && (
+        <DataStreamDetailPanel
+          dataStreamName={decodePathFromReactRouter(dataStreamName)}
+          onClose={(shouldReload?: boolean) => {
+            history.push(`/${Section.DataStreams}`);
+
+            // If the data stream was deleted, we need to refresh the list.
+            if (shouldReload) {
+              reload();
+            }
+          }}
+        />
+      )}
+    </div>
+  );
 };
diff --git a/x-pack/plugins/index_management/public/application/sections/home/data_stream_list/data_stream_table/data_stream_table.tsx b/x-pack/plugins/index_management/public/application/sections/home/data_stream_list/data_stream_table/data_stream_table.tsx
index 54035e219362..d01d8fa03a3f 100644
--- a/x-pack/plugins/index_management/public/application/sections/home/data_stream_list/data_stream_table/data_stream_table.tsx
+++ b/x-pack/plugins/index_management/public/application/sections/home/data_stream_list/data_stream_table/data_stream_table.tsx
@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React from 'react';
+import React, { useState } from 'react';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { EuiInMemoryTable, EuiBasicTableColumn, EuiButton, EuiLink } from '@elastic/eui';
@@ -13,6 +13,8 @@ import { ScopedHistory } from 'kibana/public';
 import { DataStream } from '../../../../../../common/types';
 import { reactRouterNavigate } from '../../../../../shared_imports';
 import { encodePathForReactRouter } from '../../../../services/routing';
+import { Section } from '../../../home';
+import { DeleteDataStreamConfirmationModal } from '../delete_data_stream_confirmation_modal';
 
 interface Props {
   dataStreams?: DataStream[];
@@ -27,6 +29,9 @@ export const DataStreamTable: React.FunctionComponent<Props> = ({
   history,
   filters,
 }) => {
+  const [selection, setSelection] = useState<DataStream[]>([]);
+  const [dataStreamsToDelete, setDataStreamsToDelete] = useState<string[]>([]);
+
   const columns: Array<EuiBasicTableColumn<DataStream>> = [
     {
       field: 'name',
@@ -35,7 +40,19 @@ export const DataStreamTable: React.FunctionComponent<Props> = ({
       }),
       truncateText: true,
       sortable: true,
-      // TODO: Render as a link to open the detail panel
+      render: (name: DataStream['name'], item: DataStream) => {
+        return (
+          /* eslint-disable-next-line @elastic/eui/href-or-on-click */
+          <EuiLink
+            data-test-subj="nameLink"
+            {...reactRouterNavigate(history, {
+              pathname: `/${Section.DataStreams}/${encodePathForReactRouter(name)}`,
+            })}
+          >
+            {name}
+          </EuiLink>
+        );
+      },
     },
     {
       field: 'indices',
@@ -59,20 +76,27 @@ export const DataStreamTable: React.FunctionComponent<Props> = ({
       ),
     },
     {
-      field: 'timeStampField.name',
-      name: i18n.translate('xpack.idxMgmt.dataStreamList.table.timeStampFieldColumnTitle', {
-        defaultMessage: 'Timestamp field',
+      name: i18n.translate('xpack.idxMgmt.dataStreamList.table.actionColumnTitle', {
+        defaultMessage: 'Actions',
       }),
-      truncateText: true,
-      sortable: true,
-    },
-    {
-      field: 'generation',
-      name: i18n.translate('xpack.idxMgmt.dataStreamList.table.generationFieldColumnTitle', {
-        defaultMessage: 'Generation',
-      }),
-      truncateText: true,
-      sortable: true,
+      actions: [
+        {
+          name: i18n.translate('xpack.idxMgmt.dataStreamList.table.actionDeleteText', {
+            defaultMessage: 'Delete',
+          }),
+          description: i18n.translate('xpack.idxMgmt.dataStreamList.table.actionDeleteDecription', {
+            defaultMessage: 'Delete this data stream',
+          }),
+          icon: 'trash',
+          color: 'danger',
+          type: 'icon',
+          onClick: ({ name }: DataStream) => {
+            setDataStreamsToDelete([name]);
+          },
+          isPrimary: true,
+          'data-test-subj': 'deleteDataStream',
+        },
+      ],
     },
   ];
 
@@ -88,12 +112,29 @@ export const DataStreamTable: React.FunctionComponent<Props> = ({
     },
   } as const;
 
+  const selectionConfig = {
+    onSelectionChange: setSelection,
+  };
+
   const searchConfig = {
     query: filters,
     box: {
       incremental: true,
     },
-    toolsLeft: undefined /* TODO: Actions menu */,
+    toolsLeft:
+      selection.length > 0 ? (
+        <EuiButton
+          data-test-subj="deletDataStreamsButton"
+          onClick={() => setDataStreamsToDelete(selection.map(({ name }: DataStream) => name))}
+          color="danger"
+        >
+          <FormattedMessage
+            id="xpack.idxMgmt.dataStreamList.table.deleteDataStreamsButtonLabel"
+            defaultMessage="Delete {count, plural, one {data stream} other {data streams} }"
+            values={{ count: selection.length }}
+          />
+        </EuiButton>
+      ) : undefined,
     toolsRight: [
       <EuiButton
         color="secondary"
@@ -112,6 +153,18 @@ export const DataStreamTable: React.FunctionComponent<Props> = ({
 
   return (
     <>
+      {dataStreamsToDelete && dataStreamsToDelete.length > 0 ? (
+        <DeleteDataStreamConfirmationModal
+          onClose={(data) => {
+            if (data && data.hasDeletedDataStreams) {
+              reload();
+            } else {
+              setDataStreamsToDelete([]);
+            }
+          }}
+          dataStreams={dataStreamsToDelete}
+        />
+      ) : null}
       <EuiInMemoryTable
         items={dataStreams || []}
         itemId="name"
@@ -119,6 +172,7 @@ export const DataStreamTable: React.FunctionComponent<Props> = ({
         search={searchConfig}
         sorting={sorting}
         isSelectable={true}
+        selection={selectionConfig}
         pagination={pagination}
         rowProps={() => ({
           'data-test-subj': 'row',
diff --git a/x-pack/plugins/index_management/public/application/sections/home/data_stream_list/delete_data_stream_confirmation_modal/delete_data_stream_confirmation_modal.tsx b/x-pack/plugins/index_management/public/application/sections/home/data_stream_list/delete_data_stream_confirmation_modal/delete_data_stream_confirmation_modal.tsx
new file mode 100644
index 000000000000..fc8e41aa634b
--- /dev/null
+++ b/x-pack/plugins/index_management/public/application/sections/home/data_stream_list/delete_data_stream_confirmation_modal/delete_data_stream_confirmation_modal.tsx
@@ -0,0 +1,149 @@
+/*
+ * 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 React, { Fragment } from 'react';
+import { EuiCallOut, EuiConfirmModal, EuiOverlayMask, EuiSpacer } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n/react';
+
+import { deleteDataStreams } from '../../../../services/api';
+import { notificationService } from '../../../../services/notification';
+
+interface Props {
+  dataStreams: string[];
+  onClose: (data?: { hasDeletedDataStreams: boolean }) => void;
+}
+
+export const DeleteDataStreamConfirmationModal: React.FunctionComponent<Props> = ({
+  dataStreams,
+  onClose,
+}: {
+  dataStreams: string[];
+  onClose: (data?: { hasDeletedDataStreams: boolean }) => void;
+}) => {
+  const dataStreamsCount = dataStreams.length;
+
+  const handleDeleteDataStreams = () => {
+    deleteDataStreams(dataStreams).then(({ data: { dataStreamsDeleted, errors }, error }) => {
+      const hasDeletedDataStreams = dataStreamsDeleted && dataStreamsDeleted.length;
+
+      if (hasDeletedDataStreams) {
+        const successMessage =
+          dataStreamsDeleted.length === 1
+            ? i18n.translate(
+                'xpack.idxMgmt.deleteDataStreamsConfirmationModal.successDeleteSingleNotificationMessageText',
+                {
+                  defaultMessage: "Deleted data stream '{dataStreamName}'",
+                  values: { dataStreamName: dataStreams[0] },
+                }
+              )
+            : i18n.translate(
+                'xpack.idxMgmt.deleteDataStreamsConfirmationModal.successDeleteMultipleNotificationMessageText',
+                {
+                  defaultMessage:
+                    'Deleted {numSuccesses, plural, one {# data stream} other {# data streams}}',
+                  values: { numSuccesses: dataStreamsDeleted.length },
+                }
+              );
+
+        onClose({ hasDeletedDataStreams });
+        notificationService.showSuccessToast(successMessage);
+      }
+
+      if (error || (errors && errors.length)) {
+        const hasMultipleErrors =
+          (errors && errors.length > 1) || (error && dataStreams.length > 1);
+
+        const errorMessage = hasMultipleErrors
+          ? i18n.translate(
+              'xpack.idxMgmt.deleteDataStreamsConfirmationModal.multipleErrorsNotificationMessageText',
+              {
+                defaultMessage: 'Error deleting {count} data streams',
+                values: {
+                  count: (errors && errors.length) || dataStreams.length,
+                },
+              }
+            )
+          : i18n.translate(
+              'xpack.idxMgmt.deleteDataStreamsConfirmationModal.errorNotificationMessageText',
+              {
+                defaultMessage: "Error deleting data stream '{name}'",
+                values: { name: (errors && errors[0].name) || dataStreams[0] },
+              }
+            );
+
+        notificationService.showDangerToast(errorMessage);
+      }
+    });
+  };
+
+  return (
+    <EuiOverlayMask>
+      <EuiConfirmModal
+        buttonColor="danger"
+        data-test-subj="deleteDataStreamsConfirmation"
+        title={
+          <FormattedMessage
+            id="xpack.idxMgmt.deleteDataStreamsConfirmationModal.modalTitleText"
+            defaultMessage="Delete {dataStreamsCount, plural, one {data stream} other {# data streams}}"
+            values={{ dataStreamsCount }}
+          />
+        }
+        onCancel={() => onClose()}
+        onConfirm={handleDeleteDataStreams}
+        cancelButtonText={
+          <FormattedMessage
+            id="xpack.idxMgmt.deleteDataStreamsConfirmationModal.cancelButtonLabel"
+            defaultMessage="Cancel"
+          />
+        }
+        confirmButtonText={
+          <FormattedMessage
+            id="xpack.idxMgmt.deleteDataStreamsConfirmationModal.confirmButtonLabel"
+            defaultMessage="Delete {dataStreamsCount, plural, one {data stream} other {data streams} }"
+            values={{ dataStreamsCount }}
+          />
+        }
+      >
+        <Fragment>
+          <EuiCallOut
+            title={
+              <FormattedMessage
+                id="xpack.idxMgmt.deleteDataStreamsConfirmationModal.warningTitle"
+                defaultMessage="Deleting data streams also deletes indices"
+              />
+            }
+            color="danger"
+            iconType="alert"
+          >
+            <p>
+              <FormattedMessage
+                id="xpack.idxMgmt.deleteDataStreamsConfirmationModal.warningMessage"
+                defaultMessage="Data streams are collections of time series indices. Deleting a data stream will also delete its indices."
+              />
+            </p>
+          </EuiCallOut>
+
+          <EuiSpacer />
+
+          <p>
+            <FormattedMessage
+              id="xpack.idxMgmt.deleteDataStreamsConfirmationModal.deleteDescription"
+              defaultMessage="You are about to delete {dataStreamsCount, plural, one {this data stream} other {these data streams} }:"
+              values={{ dataStreamsCount }}
+            />
+          </p>
+
+          <ul>
+            {dataStreams.map((name) => (
+              <li key={name}>{name}</li>
+            ))}
+          </ul>
+        </Fragment>
+      </EuiConfirmModal>
+    </EuiOverlayMask>
+  );
+};
diff --git a/x-pack/plugins/index_management/public/application/sections/home/data_stream_list/delete_data_stream_confirmation_modal/index.ts b/x-pack/plugins/index_management/public/application/sections/home/data_stream_list/delete_data_stream_confirmation_modal/index.ts
new file mode 100644
index 000000000000..eaa4a8fc2de0
--- /dev/null
+++ b/x-pack/plugins/index_management/public/application/sections/home/data_stream_list/delete_data_stream_confirmation_modal/index.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 { DeleteDataStreamConfirmationModal } from './delete_data_stream_confirmation_modal';
diff --git a/x-pack/plugins/index_management/public/application/services/api.ts b/x-pack/plugins/index_management/public/application/services/api.ts
index 5ad84395d24c..d7874ec2dcf3 100644
--- a/x-pack/plugins/index_management/public/application/services/api.ts
+++ b/x-pack/plugins/index_management/public/application/services/api.ts
@@ -53,14 +53,21 @@ export function useLoadDataStreams() {
   });
 }
 
-// TODO: Implement this API endpoint once we have content to surface in the detail panel.
 export function useLoadDataStream(name: string) {
-  return useRequest<DataStream[]>({
-    path: `${API_BASE_PATH}/data_stream/${encodeURIComponent(name)}`,
+  return useRequest<DataStream>({
+    path: `${API_BASE_PATH}/data_streams/${encodeURIComponent(name)}`,
     method: 'get',
   });
 }
 
+export async function deleteDataStreams(dataStreams: string[]) {
+  return sendRequest({
+    path: `${API_BASE_PATH}/delete_data_streams`,
+    method: 'post',
+    body: { dataStreams },
+  });
+}
+
 export async function loadIndices() {
   const response = await httpService.httpClient.get(`${API_BASE_PATH}/indices`);
   return response.data ? response.data : response;
diff --git a/x-pack/plugins/index_management/public/plugin.ts b/x-pack/plugins/index_management/public/plugin.ts
index 94d9bccdc63c..aec25ee3247d 100644
--- a/x-pack/plugins/index_management/public/plugin.ts
+++ b/x-pack/plugins/index_management/public/plugin.ts
@@ -8,6 +8,8 @@ import { i18n } from '@kbn/i18n';
 import { CoreSetup } from '../../../../src/core/public';
 import { UsageCollectionSetup } from '../../../../src/plugins/usage_collection/public';
 import { ManagementSetup, ManagementSectionId } from '../../../../src/plugins/management/public';
+
+import { IngestManagerSetup } from '../../ingest_manager/public';
 import { UIM_APP_NAME, PLUGIN } from '../common/constants';
 
 import { httpService } from './application/services/http';
@@ -25,6 +27,7 @@ export interface IndexManagementPluginSetup {
 }
 
 interface PluginsDependencies {
+  ingestManager?: IngestManagerSetup;
   usageCollection: UsageCollectionSetup;
   management: ManagementSetup;
 }
@@ -42,7 +45,7 @@ export class IndexMgmtUIPlugin {
 
   public setup(coreSetup: CoreSetup, plugins: PluginsDependencies): IndexManagementPluginSetup {
     const { http, notifications } = coreSetup;
-    const { usageCollection, management } = plugins;
+    const { ingestManager, usageCollection, management } = plugins;
 
     httpService.setup(http);
     notificationService.setup(notifications);
@@ -60,7 +63,7 @@ export class IndexMgmtUIPlugin {
           uiMetricService: this.uiMetricService,
           extensionsService: this.extensionsService,
         };
-        return mountManagementSection(coreSetup, usageCollection, services, params);
+        return mountManagementSection(coreSetup, usageCollection, services, params, ingestManager);
       },
     });
 
diff --git a/x-pack/plugins/index_management/server/client/elasticsearch.ts b/x-pack/plugins/index_management/server/client/elasticsearch.ts
index 6b1bf47512b2..6c0fbe3dd6a6 100644
--- a/x-pack/plugins/index_management/server/client/elasticsearch.ts
+++ b/x-pack/plugins/index_management/server/client/elasticsearch.ts
@@ -20,6 +20,20 @@ export const elasticsearchJsPlugin = (Client: any, config: any, components: any)
     method: 'GET',
   });
 
+  dataManagement.getDataStream = ca({
+    urls: [
+      {
+        fmt: '/_data_stream/<%=name%>',
+        req: {
+          name: {
+            type: 'string',
+          },
+        },
+      },
+    ],
+    method: 'GET',
+  });
+
   // We don't allow the user to create a data stream in the UI or API. We're just adding this here
   // to enable the API integration tests.
   dataManagement.createDataStream = ca({
diff --git a/x-pack/plugins/index_management/server/routes/api/data_streams/index.ts b/x-pack/plugins/index_management/server/routes/api/data_streams/index.ts
index 56c514e30f24..4aaf2b1bc5ed 100644
--- a/x-pack/plugins/index_management/server/routes/api/data_streams/index.ts
+++ b/x-pack/plugins/index_management/server/routes/api/data_streams/index.ts
@@ -6,8 +6,11 @@
 
 import { RouteDependencies } from '../../../types';
 
-import { registerGetAllRoute } from './register_get_route';
+import { registerGetOneRoute, registerGetAllRoute } from './register_get_route';
+import { registerDeleteRoute } from './register_delete_route';
 
 export function registerDataStreamRoutes(dependencies: RouteDependencies) {
+  registerGetOneRoute(dependencies);
   registerGetAllRoute(dependencies);
+  registerDeleteRoute(dependencies);
 }
diff --git a/x-pack/plugins/index_management/server/routes/api/data_streams/register_delete_route.ts b/x-pack/plugins/index_management/server/routes/api/data_streams/register_delete_route.ts
new file mode 100644
index 000000000000..45b185bcd053
--- /dev/null
+++ b/x-pack/plugins/index_management/server/routes/api/data_streams/register_delete_route.ts
@@ -0,0 +1,52 @@
+/*
+ * 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 { schema, TypeOf } from '@kbn/config-schema';
+
+import { RouteDependencies } from '../../../types';
+import { addBasePath } from '../index';
+import { wrapEsError } from '../../helpers';
+
+const bodySchema = schema.object({
+  dataStreams: schema.arrayOf(schema.string()),
+});
+
+export function registerDeleteRoute({ router, license }: RouteDependencies) {
+  router.post(
+    {
+      path: addBasePath('/delete_data_streams'),
+      validate: { body: bodySchema },
+    },
+    license.guardApiRoute(async (ctx, req, res) => {
+      const { callAsCurrentUser } = ctx.dataManagement!.client;
+      const { dataStreams } = req.body as TypeOf<typeof bodySchema>;
+
+      const response: { dataStreamsDeleted: string[]; errors: any[] } = {
+        dataStreamsDeleted: [],
+        errors: [],
+      };
+
+      await Promise.all(
+        dataStreams.map(async (name: string) => {
+          try {
+            await callAsCurrentUser('dataManagement.deleteDataStream', {
+              name,
+            });
+
+            return response.dataStreamsDeleted.push(name);
+          } catch (e) {
+            return response.errors.push({
+              name,
+              error: wrapEsError(e),
+            });
+          }
+        })
+      );
+
+      return res.ok({ body: response });
+    })
+  );
+}
diff --git a/x-pack/plugins/index_management/server/routes/api/data_streams/register_get_route.ts b/x-pack/plugins/index_management/server/routes/api/data_streams/register_get_route.ts
index 9128556130bf..5f4e62534833 100644
--- a/x-pack/plugins/index_management/server/routes/api/data_streams/register_get_route.ts
+++ b/x-pack/plugins/index_management/server/routes/api/data_streams/register_get_route.ts
@@ -4,7 +4,9 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { deserializeDataStreamList } from '../../../../common/lib';
+import { schema, TypeOf } from '@kbn/config-schema';
+
+import { deserializeDataStream, deserializeDataStreamList } from '../../../../common/lib';
 import { RouteDependencies } from '../../../types';
 import { addBasePath } from '../index';
 
@@ -32,3 +34,40 @@ export function registerGetAllRoute({ router, license, lib: { isEsError } }: Rou
     })
   );
 }
+
+export function registerGetOneRoute({ router, license, lib: { isEsError } }: RouteDependencies) {
+  const paramsSchema = schema.object({
+    name: schema.string(),
+  });
+
+  router.get(
+    {
+      path: addBasePath('/data_streams/{name}'),
+      validate: { params: paramsSchema },
+    },
+    license.guardApiRoute(async (ctx, req, res) => {
+      const { name } = req.params as TypeOf<typeof paramsSchema>;
+      const { callAsCurrentUser } = ctx.dataManagement!.client;
+
+      try {
+        const dataStream = await callAsCurrentUser('dataManagement.getDataStream', { name });
+
+        if (dataStream[0]) {
+          const body = deserializeDataStream(dataStream[0]);
+          return res.ok({ body });
+        }
+
+        return res.notFound();
+      } catch (e) {
+        if (isEsError(e)) {
+          return res.customError({
+            statusCode: e.statusCode,
+            body: e,
+          });
+        }
+        // Case: default
+        return res.internalError({ body: e });
+      }
+    })
+  );
+}
diff --git a/x-pack/plugins/ingest_manager/public/index.ts b/x-pack/plugins/ingest_manager/public/index.ts
index 9f4893ac6e49..ac56349b30c1 100644
--- a/x-pack/plugins/ingest_manager/public/index.ts
+++ b/x-pack/plugins/ingest_manager/public/index.ts
@@ -6,7 +6,7 @@
 import { PluginInitializerContext } from 'src/core/public';
 import { IngestManagerPlugin } from './plugin';
 
-export { IngestManagerStart } from './plugin';
+export { IngestManagerSetup, IngestManagerStart } from './plugin';
 
 export const plugin = (initializerContext: PluginInitializerContext) => {
   return new IngestManagerPlugin(initializerContext);
diff --git a/x-pack/plugins/ingest_manager/public/plugin.ts b/x-pack/plugins/ingest_manager/public/plugin.ts
index 1cd70f70faa3..4a10a26151e7 100644
--- a/x-pack/plugins/ingest_manager/public/plugin.ts
+++ b/x-pack/plugins/ingest_manager/public/plugin.ts
@@ -22,7 +22,11 @@ import { registerDatasource } from './applications/ingest_manager/sections/agent
 
 export { IngestManagerConfigType } from '../common/types';
 
-export type IngestManagerSetup = void;
+// We need to provide an object instead of void so that dependent plugins know when Ingest Manager
+// is disabled.
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+export interface IngestManagerSetup {}
+
 /**
  * Describes public IngestManager plugin contract returned at the `start` stage.
  */
@@ -72,6 +76,8 @@ export class IngestManagerPlugin
         };
       },
     });
+
+    return {};
   }
 
   public async start(core: CoreStart): Promise<IngestManagerStart> {

From 1ae5d32652fef5fdda296ee80b7f0f2a397378b0 Mon Sep 17 00:00:00 2001
From: igoristic <igor.zaytsev.dev@gmail.com>
Date: Thu, 25 Jun 2020 00:22:58 -0400
Subject: [PATCH 8/8] Fixed links missing a hash (#69861)

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
---
 .../monitoring/public/components/logstash/listing/listing.js  | 2 +-
 .../components/logstash/pipeline_listing/pipeline_listing.js  | 2 +-
 .../public/directives/elasticsearch/ml_job_listing/index.js   | 4 +++-
 x-pack/plugins/monitoring/public/directives/main/index.js     | 2 +-
 4 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/x-pack/plugins/monitoring/public/components/logstash/listing/listing.js b/x-pack/plugins/monitoring/public/components/logstash/listing/listing.js
index 8e2c43e44ee1..78eb982a95dd 100644
--- a/x-pack/plugins/monitoring/public/components/logstash/listing/listing.js
+++ b/x-pack/plugins/monitoring/public/components/logstash/listing/listing.js
@@ -62,7 +62,7 @@ export class Listing extends PureComponent {
           return (
             <div>
               <div>
-                <EuiLink href={getSafeForExternalLink(`/logstash/node/${node.logstash.uuid}`)}>
+                <EuiLink href={getSafeForExternalLink(`#/logstash/node/${node.logstash.uuid}`)}>
                   {name}
                 </EuiLink>
               </div>
diff --git a/x-pack/plugins/monitoring/public/components/logstash/pipeline_listing/pipeline_listing.js b/x-pack/plugins/monitoring/public/components/logstash/pipeline_listing/pipeline_listing.js
index 1b22bc6823bb..4cacf91913ab 100644
--- a/x-pack/plugins/monitoring/public/components/logstash/pipeline_listing/pipeline_listing.js
+++ b/x-pack/plugins/monitoring/public/components/logstash/pipeline_listing/pipeline_listing.js
@@ -46,7 +46,7 @@ export class PipelineListing extends Component {
         field: 'id',
         sortable: true,
         render: (id) => (
-          <EuiLink data-test-subj="id" href={getSafeForExternalLink(`/logstash/pipelines/${id}`)}>
+          <EuiLink data-test-subj="id" href={getSafeForExternalLink(`#/logstash/pipelines/${id}`)}>
             {id}
           </EuiLink>
         ),
diff --git a/x-pack/plugins/monitoring/public/directives/elasticsearch/ml_job_listing/index.js b/x-pack/plugins/monitoring/public/directives/elasticsearch/ml_job_listing/index.js
index bef0fce4cd08..ec325673ddfd 100644
--- a/x-pack/plugins/monitoring/public/directives/elasticsearch/ml_job_listing/index.js
+++ b/x-pack/plugins/monitoring/public/directives/elasticsearch/ml_job_listing/index.js
@@ -72,7 +72,9 @@ const getColumns = () => [
     render: (name, node) => {
       if (node) {
         return (
-          <EuiLink href={getSafeForExternalLink(`/elasticsearch/nodes/${node.id}`)}>{name}</EuiLink>
+          <EuiLink href={getSafeForExternalLink(`#/elasticsearch/nodes/${node.id}`)}>
+            {name}
+          </EuiLink>
         );
       }
 
diff --git a/x-pack/plugins/monitoring/public/directives/main/index.js b/x-pack/plugins/monitoring/public/directives/main/index.js
index 97ec66c9b341..eda32cd39c0d 100644
--- a/x-pack/plugins/monitoring/public/directives/main/index.js
+++ b/x-pack/plugins/monitoring/public/directives/main/index.js
@@ -133,7 +133,7 @@ export class MonitoringMainController {
       this.pipelineHashShort = shortenPipelineHash(this.pipelineHash);
       this.onChangePipelineHash = () => {
         window.location.hash = getSafeForExternalLink(
-          `/logstash/pipelines/${this.pipelineId}/${this.pipelineHash}`
+          `#/logstash/pipelines/${this.pipelineId}/${this.pipelineHash}`
         );
       };
     }